:root {
  --pink-50: #fdf3f8;
  --pink-100: #fbe6f1;
  --pink-200: #f7d2e5;
  --pink-300: #f2b8d4;
  --pink-400: #ea94bd;
  --pink-500: #e074a6;
  --pink-600: #c85a8c;
  --lav-200: #e4defa;
  --lav-300: #cfc6f2;
  --peach-200: #ffe1cf;
  --mint-200: #d3efe1;
  --ink: #3d2f38;
  --ink-soft: #6f6069;
  --ink-faint: #9b8d96;
  --line: #efe1ea;
  --white: #ffffff;
  --shadow-lg: 0 30px 80px -30px rgba(140, 70, 105, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(140, 70, 105, 0.3);
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Per-page theme: pastel purple (Distributor Management). Re-maps the pink
 * ramp so every component picks it up without touching component rules. */
.theme-purple {
  --pink-50: #f7f4fd;
  --pink-100: #eee8fb;
  --pink-200: #e1d7f6;
  --pink-300: #ccb9ee;
  --pink-400: #ac8fe0;
  --pink-500: #9068cf;
  --pink-600: #6f4bb0;
  --line: #e8e0f6;
  --ink: #332c40;
  --shadow-lg: 0 30px 80px -30px rgba(96, 70, 150, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(96, 70, 150, 0.3);
}

/* Per-page theme: pastel orange (HR Management). Re-maps the pink ramp so
 * every component picks it up without touching component rules -- keeps
 * HR visually distinct from Distributor (purple), KOL, and Admin (both
 * default pink). */
.theme-orange {
  --pink-50: #fdf6ef;
  --pink-100: #fbe8d6;
  --pink-200: #f6d3b0;
  --pink-300: #efb87d;
  --pink-400: #e69a4d;
  --pink-500: #d97f2e;
  --pink-600: #b8631c;
  --line: #f3ddc4;
  --ink: #4a3423;
  --shadow-lg: 0 30px 80px -30px rgba(184, 99, 28, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(184, 99, 28, 0.3);
}

/* Per-page theme: pastel sky blue (E-commerce Shops). Same approach as
 * the purple and orange themes above. */
.theme-sky {
  --pink-50: #f1f8fd;
  --pink-100: #e0f0fb;
  --pink-200: #c6e4f7;
  --pink-300: #9fd1f0;
  --pink-400: #72bbe6;
  --pink-500: #4ea3d9;
  --pink-600: #2f82b8;
  --lav-200: #dcebf8;
  --line: #d8eaf6;
  --ink: #26384a;
  --shadow-lg: 0 30px 80px -30px rgba(47, 130, 184, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(47, 130, 184, 0.3);
}
.theme-sky .toolbar #search { background: #eef7fd; border-color: #cfe6f6; }

/* Per-page theme: pastel green (Product Costs). */
.theme-green {
  --pink-50: #f2faf5;
  --pink-100: #e2f3e8;
  --pink-200: #c8e7d3;
  --pink-300: #a3d6b5;
  --pink-400: #74bf90;
  --pink-500: #52a673;
  --pink-600: #3a8659;
  --lav-200: #def0e4;
  --line: #d9ecdf;
  --ink: #273d30;
  --shadow-lg: 0 30px 80px -30px rgba(58, 134, 89, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(58, 134, 89, 0.3);
}
.theme-green .toolbar #search { background: #eff8f2; border-color: #d0e8d8; }
.theme-green .toolbar #category-filter,
.theme-green .toolbar #type-filter,
.theme-green .toolbar #month,
.theme-green .toolbar #recorded-months { background: #eff8f2; border-color: #d0e8d8; }
.theme-green .stat-card.sc-0 { background: #e2f3e8; border-color: #c8e7d3; }

/* Inventory page: quantity box in each row. */
.inv-qty { width: 96px; padding: 7px 10px; text-align: right; }

/* Compact header area (Inventory): smaller cards, note and filters, all
 * filters plus the Export button on one line, so the table gets the room. */
.compact-top { gap: 12px; }
.compact-top .stat-row-compact .stat-card { padding: 7px 12px; }
.compact-top .stat-row-compact .stat-value { font-size: 14px; }
.compact-top .stat-row-compact .stat-label { font-size: 10px; }
.compact-top .toolbar-note { font-size: 12px; }
.compact-top .toolbar { gap: 8px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; }
.compact-top .toolbar .input { padding: 7px 10px; font-size: 13px; width: auto; }
.compact-top .toolbar #search { flex: 1 1 160px; min-width: 140px; }
.compact-top .toolbar .btn-primary { padding: 8px 16px; font-size: 13px; white-space: nowrap; }
.compact-top #status:empty { display: none; }

/* Per-page themes: pastel blue (BPOM Data), pastel red (Company Phones),
 * pastel yellow (Stock Count). Same approach as the themes above: remap the
 * pink ramp, plus the few hard-coded pink bits (search box, first stat card). */
.theme-blue {
  --pink-50: #f3f6fe;
  --pink-100: #e4ebfc;
  --pink-200: #cbd8f8;
  --pink-300: #a9bff2;
  --pink-400: #7f9fe8;
  --pink-500: #5f84d9;
  --pink-600: #4467b8;
  --lav-200: #dfe6fa;
  --line: #dce4f6;
  --ink: #26314a;
  --shadow-lg: 0 30px 80px -30px rgba(68, 103, 184, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(68, 103, 184, 0.3);
}
.theme-blue .toolbar #search,
.theme-blue .toolbar #status-filter { background: #f1f5fe; border-color: #d3dff7; }
.theme-blue .stat-card.sc-0 { background: #e4ebfc; border-color: #cbd8f8; }

.theme-red {
  --pink-50: #fdf3f2;
  --pink-100: #fbe3e1;
  --pink-200: #f6cac6;
  --pink-300: #efa8a2;
  --pink-400: #e58279;
  --pink-500: #d7645a;
  --pink-600: #b84a41;
  --lav-200: #f8e2df;
  --line: #f3dcd9;
  --ink: #45292a;
  --shadow-lg: 0 30px 80px -30px rgba(184, 74, 65, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(184, 74, 65, 0.3);
}
.theme-red .toolbar #search { background: #fdf1f0; border-color: #f5d6d3; }
.theme-red .stat-card.sc-0 { background: #fbe3e1; border-color: #f6cac6; }

.theme-yellow {
  --pink-50: #fefaee;
  --pink-100: #fcf1d2;
  --pink-200: #f8e3a8;
  --pink-300: #f1cf73;
  --pink-400: #e2b443;
  --pink-500: #c99a22;
  --pink-600: #a47c12;
  --lav-200: #faefcf;
  --line: #f2e6c4;
  --ink: #43391f;
  --shadow-lg: 0 30px 80px -30px rgba(164, 124, 18, 0.45);
  --shadow-sm: 0 12px 30px -12px rgba(164, 124, 18, 0.3);
}
.theme-yellow .toolbar #search,
.theme-yellow .toolbar #month,
.theme-yellow .toolbar #recorded-months,
.theme-yellow .toolbar #category-filter { background: #fefaee; border-color: #f2e3b6; }
.theme-yellow .stat-card.sc-0 { background: #fcf1d2; border-color: #f8e3a8; }

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--ink);
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ *
 * Auth layout
 * ------------------------------------------------------------------ */
.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background:
    radial-gradient(1200px 600px at 12% 0%, var(--pink-100), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, var(--lav-200), transparent 55%),
    #eceaf1;
}

.auth-shell {
  width: min(1180px, 100%);
}

.auth-card {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  min-height: 660px;
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---- left panel ---- */
.auth-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 52px);
  background: linear-gradient(180deg, #ffffff 0%, var(--pink-50) 100%);
}

.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  background: var(--white);
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-400), var(--lav-300));
}

.auth-form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
  padding: 32px 0;
}

.auth-heading h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.auth-heading p {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 15px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder {
  color: var(--ink-faint);
}

.field input:focus {
  outline: none;
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px var(--pink-100);
}

.password-input {
  position: relative;
}

.password-input input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-toggle:hover {
  color: var(--pink-500);
  background: var(--pink-50);
}

.password-toggle .eye-closed {
  display: none;
}

.password-toggle.is-visible .eye-open {
  display: none;
}

.password-toggle.is-visible .eye-closed {
  display: block;
}

.form-error {
  margin: 0 0 14px;
  min-height: 18px;
  font-size: 13px;
  color: var(--pink-600);
}

.btn-primary {
  position: relative;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color: var(--white);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -14px rgba(224, 116, 166, 0.6);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  cursor: default;
  opacity: 0.8;
  transform: none;
}

.btn-primary .btn-spinner {
  display: none;
  width: 17px;
  height: 17px;
  margin-left: 10px;
  vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-primary.is-loading .btn-spinner {
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-faint);
}

.auth-foot a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- right visual panel ---- */
.auth-visual {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, var(--pink-200) 0%, var(--lav-200) 55%, var(--peach-200) 100%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.75;
}

.blob-1 {
  width: 260px;
  height: 260px;
  top: -60px;
  right: -40px;
  background: var(--pink-300);
}

.blob-2 {
  width: 220px;
  height: 220px;
  bottom: 40px;
  left: -50px;
  background: var(--lav-300);
}

.blob-3 {
  width: 180px;
  height: 180px;
  bottom: -60px;
  right: 60px;
  background: var(--peach-200);
}

.glass-card {
  position: absolute;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 45px -20px rgba(120, 70, 100, 0.5);
}

.card-time {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.pill {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.pill-accent {
  background: linear-gradient(135deg, var(--pink-300), var(--pink-400));
  color: #5a2942;
}

.card-task {
  top: 46px;
  left: 40px;
}

.card-week {
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 16px;
}

.week {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 9px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}

.week li strong {
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}

.week li.is-today {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
}

.week li.is-today span,
.week li.is-today strong {
  color: var(--white);
}

.card-meeting {
  bottom: 54px;
  left: 44px;
}

.meeting-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meeting-top strong {
  font-size: 14px;
  font-weight: 600;
}

.dot-yellow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4c65b;
}

.avatar-row {
  display: flex;
  margin-top: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: #5a2942;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.avatar-row .avatar + .avatar {
  margin-left: -9px;
}

.a1 { background: var(--pink-300); }
.a2 { background: var(--lav-300); }
.a3 { background: var(--peach-200); }
.a4 { background: var(--mint-200); }

.avatar-cluster {
  position: absolute;
  top: 34%;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.avatar.big {
  width: 46px;
  height: 46px;
  font-size: 15px;
  box-shadow: 0 12px 24px -10px rgba(120, 70, 100, 0.5);
}

.b1 { background: var(--pink-300); }
.b2 { background: var(--lav-300); }
.b3 { background: var(--peach-200); }
.b2 { margin-left: 26px; }
.b3 { margin-left: 8px; }

/* ------------------------------------------------------------------ *
 * Dashboard
 * ------------------------------------------------------------------ */
.dash-body {
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 100% 0%, var(--pink-100), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, var(--lav-200), transparent 55%),
    #f6f4f8;
}

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(18px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-email {
  font-size: 14px;
  color: var(--ink-soft);
}

.btn-ghost {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  border-color: var(--pink-400);
  color: var(--pink-600);
}

.dash-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 48px);
}

.section-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--pink-100);
  color: var(--pink-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dash-welcome h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.6px;
}

.dash-welcome p {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.dash-tile {
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.tile-icon {
  font-size: 26px;
  margin-bottom: 12px;
}

.dash-tile h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.dash-tile p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .auth-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 32px 24px 28px;
  }

  .auth-form-wrap {
    padding: 28px 0;
  }
}

@media (max-width: 420px) {
  .auth-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

.auth-card.single {
  grid-template-columns: 1fr;
  max-width: 460px;
  margin: 0 auto;
  min-height: 0;
}

/* ================================================================== *
 * App shell (dashboard / kol / admin)
 * ================================================================== */
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px 1fr;
  background:
    radial-gradient(800px 460px at 100% 0%, var(--pink-100), transparent 60%),
    radial-gradient(700px 460px at 0% 100%, var(--lav-200), transparent 55%),
    #f6f4f8;
}

.sidebar {
  padding: 26px 20px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: var(--pink-50);
  color: var(--ink);
}

.nav-link.is-active {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color: var(--white);
}

.nav-bullet {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.nav-link.is-active .nav-bullet {
  opacity: 1;
}

.app-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.me-email {
  font-size: 13px;
  color: var(--ink-soft);
}

.app-content {
  padding: clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --- buttons --- */
.btn-ghost {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-ghost:hover {
  border-color: var(--pink-400);
  color: var(--pink-600);
}

.btn-inline {
  width: auto;
  padding: 11px 18px;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}

.btn-danger {
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: #e2607a;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-danger:hover {
  background: #d24d68;
}

/* --- stat cards --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.stat-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.stat-value-toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  align-self: flex-start;
}
.stat-value-toggle:hover {
  text-decoration: underline;
}

.stat-label {
  font-size: 12px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* --- panels --- */
.panel {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.panel-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.bar-label {
  color: var(--ink-soft);
}

.bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--pink-50);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink-300), var(--pink-500));
}

.bar-count {
  text-align: right;
  color: var(--ink-soft);
}

.recent-list {
  display: flex;
  flex-direction: column;
}

.recent-list-scroll {
  max-height: 220px;
  overflow-y: auto;
}

.recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.recent-item:first-child {
  border-top: none;
}

.recent-name {
  font-weight: 600;
  min-width: 140px;
}

.recent-meta {
  color: var(--ink-faint);
}

.recent-item .pill-status {
  margin-left: auto;
}

.empty {
  padding: 8px 0;
  color: var(--ink-faint);
  font-size: 14px;
}

/* --- toolbar --- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.toolbar .btn-primary,
.toolbar .btn-inline {
  margin-left: auto;
}

.input {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}

.input:focus {
  outline: none;
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px var(--pink-100);
}

.phone-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.phone-input .input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
}
.phone-input:focus-within {
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px var(--pink-100);
}
.phone-input .input:focus {
  box-shadow: none;
}

#search {
  min-width: 240px;
  flex: 1 1 240px;
  max-width: 360px;
}

/* --- data table --- */
.table-wrap {
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  padding: 13px 16px;
  text-align: left;
  white-space: nowrap;
}

.data-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  background: var(--pink-50);
}

.data-table tbody tr {
  border-bottom: 1px solid var(--line);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table td.strong {
  font-weight: 600;
}

.data-table .num {
  text-align: right;
}

.data-table .nowrap {
  white-space: nowrap;
}

.muted {
  color: var(--ink-faint);
}

.stock-entry-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stock-entry-form .input {
  flex: 1 1 130px;
}

.stock-entry-form button {
  margin-left: auto;
}

#stock-summary .data-table {
  margin-bottom: 18px;
}

.stock-section-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stock-qty-badge {
  display: inline-block;
  min-width: 32px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fbdede;
  color: #b3475c;
  font-weight: 700;
}

.reminder-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #e0304a;
  vertical-align: middle;
  cursor: pointer;
}
.reminder-dot:hover {
  box-shadow: 0 0 0 4px rgba(224, 48, 74, 0.18);
}
.reminder-dot-legend {
  margin-left: 0;
  margin-right: 2px;
  cursor: default;
}
.reminder-dot-legend:hover {
  box-shadow: none;
}

.sku-suggest {
  margin-top: -6px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--pink-50);
  border: 1px solid var(--pink-200);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sku-suggest .chip {
  border: 1px solid var(--pink-300);
  background: var(--white);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--pink-600);
  cursor: pointer;
}

.sku-suggest .chip:hover {
  background: var(--pink-100);
}

.sku-suggest .dismiss {
  border: none;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--ink-faint);
  text-decoration: underline;
  cursor: pointer;
  margin-left: auto;
}

.row-edit,
.row-link {
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--pink-600);
  cursor: pointer;
  padding: 0;
}

.row-link.danger {
  color: #d24d68;
}

.row-link.stock-btn {
  color: #c0374f;
}

.row-link.total-order-btn {
  color: #2f9e5c;
}

.row-edit:hover,
.row-link:hover {
  text-decoration: underline;
}

/* --- status pills --- */
.pill-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.status-prospect { background: var(--lav-200); color: #5a4c86; }
.status-contacted { background: var(--peach-200); color: #8a5a2f; }
.status-negotiating { background: #fdf0c8; color: #8a6b1f; }
.status-active { background: var(--mint-200); color: #2f7a5a; }
.status-declined { background: #f2dede; color: #9a4a4a; }
.status-offline { background: var(--peach-200); color: #8a5a2f; }
.status-online { background: var(--mint-200); color: #2f7a5a; }
.status-both { background: var(--lav-200); color: #5a4c86; }
.status-po { background: var(--mint-200); color: #2f7a5a; }
.status-manual { background: var(--lav-200); color: #5a4c86; }

/* Stock History list — Type column, one color per event type. */
.stock-type-po { background: #d6e9f8; color: #2c5f8a; }
.stock-type-manual { background: var(--mint-200); color: #2f7a5a; }
.stock-type-invoice { background: #fdf0c8; color: #8a6b1f; }
.stock-type-retur { background: #fbdede; color: #b3475c; }

/* Employee Data — Status column, one color per employment status. */
.status-hybrid { background: #d3efe9; color: #2f7a70; }

.recent-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.bar-fill.status-prospect { background: var(--lav-300); }
.bar-fill.status-contacted { background: #f4b98a; }
.bar-fill.status-negotiating { background: #f0d071; }
.bar-fill.status-active { background: #7fce9f; }
.bar-fill.status-declined { background: #dd9a9a; }

/* --- modal --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  background: rgba(60, 40, 55, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
  z-index: 50;
}

.modal {
  width: min(620px, 100%);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
}

.component-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.component-row .input {
  flex: 1;
}
.component-row .input.component-amount {
  flex: 0 0 140px;
}

.field textarea.input {
  resize: vertical;
  font-family: inherit;
}

.hint {
  margin: 0;
  font-size: 12px;
  color: var(--ink-faint);
}

.check-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.modal-foot .btn-danger {
  margin-right: auto;
}

/* --- toggle switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.15s ease;
  cursor: pointer;
}

.switch span::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.15s ease;
}

.switch input:checked + span {
  background: var(--pink-500);
}

.switch input:checked + span::before {
  transform: translateX(18px);
}

.switch input:disabled + span {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- app responsive --- */
@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 16px;
  }

  .nav {
    margin-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-wrap: wrap;
  }
}

/* ================================================================== *
 * KOL / KOL Update extras
 * ================================================================== */
.modal-narrow {
  width: min(460px, 100%);
}

.modal-wide {
  width: min(920px, 95vw);
}

.link-cell {
  color: var(--pink-600);
  text-decoration: none;
  font-weight: 500;
}

.link-cell:hover {
  text-decoration: underline;
}

.row-error {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  color: #c0506a;
  white-space: normal;
  max-width: 260px;
}

.notice {
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
}

.notice-ok {
  background: var(--mint-200);
  color: #2f7a5a;
}

.notice-warn {
  background: #fdf0c8;
  color: #8a6b1f;
}

.field-wide {
  grid-column: 1 / -1;
}

.bank-fields {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--pink-50);
}

/* paste-a-row box in the KOL modal */
.paste-box {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  background: var(--pink-50);
}

.paste-box summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}

.paste-box textarea {
  width: 100%;
  margin-top: 10px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
}

.paste-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.hint.is-error {
  color: var(--pink-600);
}

/* Invoice page */
.data-table tfoot .total-row td {
  font-weight: 600;
  border-top: 2px solid var(--line);
  background: var(--pink-50);
}
.data-table tfoot .total-row td:first-child {
  text-align: right;
}

@media print {
  .sidebar, .topbar, .toolbar { display: none !important; }
  .app { display: block; background: #fff; }
  .app-content { padding: 0; }
  .table-wrap { box-shadow: none; border: none; }
  .stat-row { margin-bottom: 16px; }
}

.paid-input,
.inline-date,
.inline-text {
  padding: 7px 9px;
  font-size: 12px;
  min-width: 130px;
}
.inline-text { min-width: 110px; }
.inline-date {
  width: 100%;
  cursor: pointer;
}

#product-bars .bar-row {
  grid-template-columns: 130px 1fr 40px;
}
#product-bars .bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dashboard top-10 ranking */
.rank-list { display: flex; flex-direction: column; }
.rank-item {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.rank-item:first-child { border-top: none; }
.rank-num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pink-100);
  color: var(--pink-600);
  font-weight: 600;
  font-size: 12px;
}
.rank-item:nth-child(-n+3) .rank-num {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
  color: #fff;
}
.rank-name { font-weight: 600; }
.rank-meta { color: var(--ink-faint); white-space: nowrap; }

/* Colour-coded filter bar controls */
.toolbar #search          { background: #fdf3f8; border-color: #f4d9e8; }
.toolbar #month-filter    { background: #ece6fb; border-color: #d8cdf3; }
.toolbar #platform-filter { background: #ffe9dc; border-color: #f7d3bf; }
.toolbar #link-filter     { background: #ddefe4; border-color: #c4e2ce; }
.toolbar #inputby-filter  { background: #fbeecf; border-color: #efdca9; }
.toolbar #tipe-filter     { background: #e4edfb; border-color: #cadcf4; }
.toolbar #paid-filter     { background: #ddefe4; border-color: #c4e2ce; }

/* Distributor Management toolbar */
.toolbar #company-filter  { background: #ddefe4; border-color: #c4e2ce; }
.toolbar #channel-filter  { background: #ffe9dc; border-color: #f7d3bf; }
.toolbar #skema-filter    { background: #e4edfb; border-color: #cadcf4; }

/* Employee Data toolbar (note: #company-filter is shared with Distributor
   Management above — same id, same mint colour, pages never render together) */
.toolbar #status-filter   { background: #fbeecf; border-color: #efdca9; }

.rank-plat {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pink-100);
  color: var(--pink-600);
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

/* Decorative mascot accents */
.mascot {
  position: fixed;
  width: 104px;
  height: auto;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 4;
  filter: drop-shadow(0 8px 16px rgba(140, 70, 105, 0.18));
}
.mascot-br { bottom: 14px; right: 16px; }
.mascot-bl { bottom: 14px; left: 16px; }
.mascot-tr { top: 74px;   right: 18px; }
@media (max-width: 900px) {
  .mascot { width: 66px; opacity: 0.75; }
  .mascot-bl { left: 8px; }
  .mascot-tr { top: 66px; }
}
.toolbar #brand-filter    { background: #efe4fb; border-color: #ddccf4; }
/* KOL Update toolbar controls */
.toolbar #search + #brand-filter { background: #efe4fb; border-color: #ddccf4; }

/* Dashboard: distinct filter colours */
.dash-filters #brand-filter { background: #ffe6d6; border-color: #f6cdb2; }
.dash-filters #month-filter { background: #dcefe2; border-color: #c2e0cc; }

/* Dashboard bars: a distinct pastel per platform / product */
.bar-fill.pf-tiktok    { background: linear-gradient(90deg, #f9c8dd, #ec8fb6); }
.bar-fill.pf-shopee    { background: linear-gradient(90deg, #ffd7bf, #f5a877); }
.bar-fill.pf-instagram { background: linear-gradient(90deg, #e3d6f7, #b89ae8); }
.bar-fill.pf-thread    { background: linear-gradient(90deg, #cfeede, #8ed3ac); }

.bar-fill.bar-c0 { background: linear-gradient(90deg, #f9c8dd, #ec8fb6); }
.bar-fill.bar-c1 { background: linear-gradient(90deg, #e3d6f7, #b89ae8); }
.bar-fill.bar-c2 { background: linear-gradient(90deg, #ffd7bf, #f5a877); }
.bar-fill.bar-c3 { background: linear-gradient(90deg, #cfeede, #8ed3ac); }
.bar-fill.bar-c4 { background: linear-gradient(90deg, #fdeaba, #f2cf6b); }
.bar-fill.bar-c5 { background: linear-gradient(90deg, #c9e4f7, #8ec3e8); }
.bar-fill.bar-c6 { background: linear-gradient(90deg, #f7cdc9, #e79a94); }
.bar-fill.bar-c7 { background: linear-gradient(90deg, #d8d2f0, #aca2e2); }

/* Dashboard stat cards: a distinct pastel each */
.stat-card.sc-0 { background: #fbe7f0; border-color: #f3d2e2; }
.stat-card.sc-1 { background: #ece4fb; border-color: #dccff3; }
.stat-card.sc-2 { background: #ffe9db; border-color: #f7d3bd; }
.stat-card.sc-3 { background: #dcefe2; border-color: #c2e0cc; }
.stat-card.sc-4 { background: #fdf2cf; border-color: #f0dfa6; }
.stat-card.sc-5 { background: #dfeefb; border-color: #c6ddf1; }

/* Mascot beside the page headline */
.page-head { display: flex; align-items: center; gap: 12px; }
.page-mascot {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 900px) { .page-mascot { width: 32px; height: 32px; } }

/* KOL Update: per-KOL link list */
.row-links {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 400;
}
.row-links a { color: var(--pink-600); text-decoration: none; }
.row-links a:hover { text-decoration: underline; }
.row-err-inline { color: #c0506a; }

/* Scrollable table box: horizontal scrollbar stays reachable, header sticks.
   On desktop the whole app shell is pinned to the viewport height (below)
   and this box flexes to fill whatever is left under the toolbar, so its
   scrollbars sit at a fixed, always-visible spot instead of drifting below
   the fold as rows are added. */
.scroll-box {
  overflow: auto;
}
.scroll-box thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

@media (min-width: 861px) {
  .app {
    height: 100vh;
    overflow: hidden;
  }
  .sidebar {
    overflow-y: auto;
  }
  .app-main {
    height: 100vh;
    min-height: 0;
  }
  .topbar {
    flex-shrink: 0;
  }
  .app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  .app-content .scroll-box {
    flex: 1;
    min-height: 0;
  }
}

/* KOL Update: clickable metric numbers -> history chart */
.metric-link {
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.metric-link:hover {
  background: var(--pink-100);
  color: var(--pink-600);
}
#chart-area svg {
  display: block;
  background: #fff;
  border-radius: 12px;
}

/* Sidebar nav groups (dropdown of related pages) */
.nav-group {
  display: flex;
  flex-direction: column;
}
.nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  border-radius: 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-group-toggle:hover {
  background: var(--pink-50);
  color: var(--ink);
}
.nav-caret {
  margin-left: auto;
  font-size: 10px;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.nav-group.is-open .nav-caret {
  transform: rotate(180deg);
}
.nav-group-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 16px;
  margin: 2px 0 4px;
}
.nav-group.is-open .nav-group-items {
  display: flex;
}
.nav-sublink {
  padding: 9px 14px;
  font-size: 13px;
}

/* Top-level nav items (Dashboard, group headers) get a distinct text color,
   separate from the sub-links inside an open group. */
.nav > .nav-link:not(.is-active),
.nav-group-toggle {
  color: #B08A97;
}
.nav > .nav-link:hover:not(.is-active),
.nav-group-toggle:hover {
  color: var(--ink);
}

/* Admin page: Daily Activity panel */
.activity-head { margin-bottom: 8px; }
.activity-head .panel-title { margin: 0; }
.activity-head .input { margin-left: auto; width: auto; }

/* Product Costs page */
.product-thumb {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--white);
}
.product-thumb-empty { background: #f4f1f6; }
.cell-wrap { min-width: 180px; max-width: 280px; white-space: normal; }
.photo-field { display: flex; align-items: center; gap: 14px; }
.photo-preview {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.photo-actions .input { width: 100%; }
/* Long text cut to two lines; the full text shows on hover and in the detail form. */
.cell-clamp {
  max-width: 220px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Page tabs (Admin page) */
.page-tabs {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0; /* .app-content is a flex column; without this the bar gets squashed */
  gap: 0 28px;
  border-bottom: 1px solid var(--line);
}
.page-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 10px 2px 14px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.page-tab:hover { color: var(--ink); }
.page-tab.is-active { color: var(--pink-500); border-bottom-color: var(--pink-500); }
.tab-panel { display: flex; flex-direction: column; gap: 22px; }
.tab-panel[hidden] { display: none; }
/* A single stat card should not stretch across the whole page. */
/* Compact stat cards (Product Costs): small cards in one line, the label
 * and number side by side. */
.stat-row-compact {
  display: flex;
  flex-shrink: 0; /* same squashing issue as .page-tabs inside .app-content */
  gap: 10px;
  overflow-x: auto;
}
.stat-row-compact .stat-card {
  /* Start from the card's own content width (label + number), never shrink
   * below it, and share any spare space out evenly. */
  flex: 1 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
}
.stat-row-compact .stat-value { order: 2; font-size: 17px; letter-spacing: 0; white-space: nowrap; }
.stat-row-compact .stat-label { white-space: nowrap; font-size: 11px; }

/* Sales person colours (Distributor Management): table pill and the
 * form dropdown. Fixed colours so the purple page theme doesn't remap them. */
.sales-adrian { background: #dcebfb; color: #2f6a9e; }
.sales-sdc { background: #fdf0c8; color: #8a6b1f; }
.sales-ana { background: #fbe0ea; color: #a3456f; }
select.sales-adrian { border-color: #b9d6f4; font-weight: 600; }
select.sales-sdc { border-color: #efdca9; font-weight: 600; }
select.sales-ana { border-color: #f2c4d6; font-weight: 600; }

/* Leave Tracking: compact summary boxes side by side, so the leave records
 * table below gets most of the page. */
.leave-page { gap: 14px; }
.leave-page > .toolbar-note { font-size: 11.5px; line-height: 1.5; }
.leave-summary {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 14px;
  align-items: start;
  flex-shrink: 0;
}
.leave-summary .panel { padding: 12px 16px; }
.leave-summary .panel-title { margin: 0 0 2px; font-size: 13px; }
.leave-summary .hint { margin: 0 0 4px; font-size: 11px; }
.leave-summary .recent-item { padding: 5px 0; font-size: 12px; gap: 8px; }
.leave-summary .recent-name { min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leave-summary .recent-meta { white-space: nowrap; }
.leave-summary .pill-status { font-size: 11px; padding: 2px 8px; }
.leave-summary .empty { font-size: 12px; padding: 4px 0; }
@media (max-width: 860px) {
  .leave-summary { grid-template-columns: 1fr; }
}