@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   BRAND MAKER INFINITY — UNIFIED PREMIUM THEME
   Purple · Orange · White · Grey  |  Responsive S/M/L/Laptop
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ── */
  --bg-base:  #0a080f;
  --bg-1:     #0e0b16;
  --bg-2:     #130f1e;
  --bg-3:     #1a1428;
  --bg-4:     #221a35;
  --bg-5:     #2c2244;
  --bg-glass: rgba(18,14,30,0.82);
  --bg-card:  rgba(22,17,36,0.95);

  /* ── Purple palette ── */
  --purple-50:  #f3eeff;
  --purple-100: #e3d5ff;
  --purple-200: #c4adff;
  --purple-300: #a07eff;
  --purple-400: #8b5cf6;
  --purple-500: #7c3aed;
  --purple-600: #6d28d9;
  --purple-700: #5b21b6;
  --purple-dim:  rgba(139,92,246,0.12);
  --purple-glow: rgba(139,92,246,0.28);
  --purple-bd:   rgba(139,92,246,0.30);

  /* ── Orange palette ── */
  --orange-50:  #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-dim:  rgba(249,115,22,0.12);
  --orange-glow: rgba(249,115,22,0.28);
  --orange-bd:   rgba(249,115,22,0.30);

  /* ── Grey / White palette ── */
  --white:    #ffffff;
  --grey-50:  #f8f7fb;
  --grey-100: #ede9f6;
  --grey-200: #d1cae7;
  --grey-300: #b3aacf;
  --grey-400: #9489b5;
  --grey-500: #7568a0;
  --grey-600: #5a4f7d;
  --grey-700: #3f3860;
  --grey-800: #272046;
  --grey-900: #140f2e;

  /* ── Text ── */
  --t1: #f5f0ff;
  --t2: #c4b8e8;
  --t3: #8b7db5;
  --t4: #5c5080;

  /* ── Accent semantic ── */
  --accent-primary:   var(--purple-400);
  --accent-secondary: var(--orange-500);
  --accent-success:   #22c55e;
  --accent-danger:    #ef4444;
  --accent-warning:   var(--orange-400);
  --accent-info:      #38bdf8;

  /* ── Status helpers ── */
  --s-success-bg: rgba(34,197,94,0.12);
  --s-success-bd: rgba(34,197,94,0.30);
  --s-danger-bg:  rgba(239,68,68,0.12);
  --s-danger-bd:  rgba(239,68,68,0.30);
  --s-warning-bg: rgba(249,115,22,0.12);
  --s-warning-bd: rgba(249,115,22,0.30);
  --s-info-bg:    rgba(56,189,248,0.10);
  --s-info-bd:    rgba(56,189,248,0.28);

  /* ── Borders ── */
  --border-subtle:  rgba(139,92,246,0.10);
  --border-default: rgba(139,92,246,0.20);
  --border-strong:  rgba(139,92,246,0.40);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Radii ── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-card:        0 2px 16px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.40);
  --shadow-card-hover:  0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40);
  --shadow-glow-purple: 0 0 28px var(--purple-glow);
  --shadow-glow-orange: 0 0 28px var(--orange-glow);
  --shadow-float:       0 12px 40px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.45);

  /* Legacy shadow aliases for old classes */
  --shadow-glow-green: 0 0 24px rgba(34,197,94,0.22);
  --shadow-glow-red:   0 0 24px rgba(239,68,68,0.22);
  --shadow-glow-amber: 0 0 24px rgba(249,115,22,0.22);
  --shadow-glow-blue:  0 0 24px rgba(139,92,246,0.22);

  /* ── Transitions ── */
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);
  --ease-snap:   cubic-bezier(0.16,1,0.3,1);

  /* ── Layout ── */
  --sidebar-w: 240px;
  --topbar-h:  0px;

  /* ── Legacy colour aliases (mapped to new palette) ── */
  --s0: var(--bg-base);
  --s1: var(--bg-1);
  --s2: var(--bg-2);
  --s3: var(--bg-3);
  --s4: var(--bg-4);
  --s5: var(--bg-5);
  --s6: #382c56;
  --s7: #453870;
  --b1: rgba(255,255,255,0.04);
  --b2: rgba(255,255,255,0.07);
  --b3: rgba(255,255,255,0.11);
  --b4: rgba(255,255,255,0.17);

  --emerald:      var(--accent-success);
  --emerald-500:  #16a34a;
  --emerald-dim:  var(--s-success-bg);
  --emerald-glow: rgba(34,197,94,0.28);
  --emerald-bd:   var(--s-success-bd);

  --amber:      var(--orange-400);
  --amber-500:  var(--orange-500);
  --amber-dim:  var(--orange-dim);
  --amber-glow: var(--orange-glow);
  --amber-bd:   var(--orange-bd);

  --coral:      var(--accent-danger);
  --coral-500:  #dc2626;
  --coral-dim:  var(--s-danger-bg);
  --coral-glow: rgba(239,68,68,0.28);
  --coral-bd:   var(--s-danger-bd);

  --blue:      var(--purple-400);
  --blue-dim:  var(--purple-dim);
  --blue-glow: var(--purple-glow);
  --blue-bd:   var(--purple-bd);

  --violet:      var(--purple-400);
  --violet-dim:  var(--purple-dim);
  --violet-glow: var(--purple-glow);
  --violet-bd:   var(--purple-bd);

  --cyan:      var(--accent-info);
  --cyan-dim:  var(--s-info-bg);
  --cyan-glow: rgba(56,189,248,0.28);
  --cyan-bd:   var(--s-info-bd);
}

/* ══════════════════════════════════════════════════════════════════════
   COLOUR PALETTES  —  CEO Settings → Theme picker
   Overrides the purple/orange accent tokens site-wide. Purple is default
   (no attribute needed); the other three apply via [data-palette].
   ══════════════════════════════════════════════════════════════════════ */
[data-palette="blue"] {
  --accent-primary:   #3b82f6;
  --accent-secondary: #06b6d4;
  --purple-400: #3b82f6;
  --purple-500: #2563eb;
  --purple-glow: rgba(59,130,246,0.28);
  --purple-bd:   rgba(59,130,246,0.30);
  --purple-dim:  rgba(59,130,246,0.12);
  --orange-400: #06b6d4;
  --orange-500: #0891b2;
  --orange-glow: rgba(6,182,212,0.28);
  --orange-bd:   rgba(6,182,212,0.30);
  --orange-dim:  rgba(6,182,212,0.12);
}
[data-palette="emerald"] {
  --accent-primary:   #10b981;
  --accent-secondary: #84cc16;
  --purple-400: #10b981;
  --purple-500: #059669;
  --purple-glow: rgba(16,185,129,0.28);
  --purple-bd:   rgba(16,185,129,0.30);
  --purple-dim:  rgba(16,185,129,0.12);
  --orange-400: #84cc16;
  --orange-500: #65a30d;
  --orange-glow: rgba(132,204,22,0.28);
  --orange-bd:   rgba(132,204,22,0.30);
  --orange-dim:  rgba(132,204,22,0.12);
}
[data-palette="rose"] {
  --accent-primary:   #f43f5e;
  --accent-secondary: #eab308;
  --purple-400: #f43f5e;
  --purple-500: #e11d48;
  --purple-glow: rgba(244,63,94,0.28);
  --purple-bd:   rgba(244,63,94,0.30);
  --purple-dim:  rgba(244,63,94,0.12);
  --orange-400: #eab308;
  --orange-500: #ca8a04;
  --orange-glow: rgba(234,179,8,0.28);
  --orange-bd:   rgba(234,179,8,0.30);
  --orange-dim:  rgba(234,179,8,0.12);
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Pure white base — crisp, professional ── */
  --bg-base:  #f7f7f9;
  --bg-1:     #ffffff;
  --bg-2:     #f2f2f6;
  --bg-3:     #e8e8ef;
  --bg-4:     #dddde7;
  --bg-5:     #cfcfdc;
  --bg-glass: rgba(255,255,255,0.95);
  --bg-card:  #ffffff;

  /* ── Deep, crisp text — maximum readability ── */
  --t1: #111118;
  --t2: #2a2a38;
  --t3: #55556e;
  --t4: #888899;

  /* ── Neutral borders — clean lines ── */
  --border-subtle:  rgba(0,0,0,0.08);
  --border-default: rgba(0,0,0,0.14);
  --border-strong:  rgba(0,0,0,0.26);

  --b1: rgba(0,0,0,0.04);
  --b2: rgba(0,0,0,0.07);
  --b3: rgba(0,0,0,0.11);
  --b4: rgba(0,0,0,0.18);

  /* ── Shadows — crisp depth ── */
  --shadow-card:       0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 4px 20px rgba(249,115,22,0.14), 0 1px 4px rgba(0,0,0,0.08);
  --shadow-float:      0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);

  /* ── Orange-forward accent system ── */
  --orange-glow: rgba(249,115,22,0.20);
  --orange-bd:   rgba(249,115,22,0.55);
  --orange-dim:  rgba(249,115,22,0.08);
  --orange-line: #f97316;

  /* ── Purple kept for active/selected states ── */
  --purple-glow: rgba(139,92,246,0.16);
  --purple-bd:   rgba(139,92,246,0.40);
  --purple-dim:  rgba(139,92,246,0.08);
}

[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--t1);
  font-weight: 500;
}

/* Catch text inside table cells / inputs / selects which sometimes reset
   font-weight via browser UA styles and don't inherit from body */
[data-theme="light"] table,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] button {
  font-weight: 500;
}

[data-theme="light"] #sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border-subtle);
  box-shadow: 2px 0 16px rgba(0,0,0,0.06);
}

/* ── Sidebar Nav Items ── */
[data-theme="light"] .nav-section {
  color: #999aab;
  font-weight: 700;
  letter-spacing: 1.6px;
}
[data-theme="light"] .nav-item {
  color: var(--t3);
  font-weight: 550;
}
[data-theme="light"] .nav-item:hover {
  background: rgba(249,115,22,0.07) !important;
  color: #ea580c !important;
  border-color: rgba(249,115,22,0.35) !important;
  box-shadow: inset 3px 0 0 #f97316 !important;
}
[data-theme="light"] .nav-item.active {
  background: rgba(249,115,22,0.10) !important;
  color: #c2410c !important;
  border-color: rgba(249,115,22,0.45) !important;
  font-weight: 700 !important;
  box-shadow: inset 3px 0 0 #f97316, 0 2px 8px rgba(249,115,22,0.12) !important;
}
[data-theme="light"] .nav-item.active::before {
  background: linear-gradient(180deg, #f97316, #ea580c) !important;
}
[data-theme="light"] #nav::-webkit-scrollbar-thumb { background: rgba(249,115,22,0.25); }
[data-theme="light"] .sb-logo { border-bottom-color: var(--border-subtle); }
[data-theme="light"] .sb-logo-name { color: var(--t1); font-weight: 800; }
[data-theme="light"] .sb-logo-tag { color: var(--t4); }
[data-theme="light"] .sb-bottom { border-top-color: var(--border-subtle); }
[data-theme="light"] .sb-switch-btn {
  color: var(--t3);
  border-color: var(--border-default);
  background: var(--bg-2);
  font-weight: 600;
}
[data-theme="light"] .sb-switch-btn:hover {
  border-color: var(--orange-bd);
  color: #c2410c;
  background: var(--orange-dim);
  box-shadow: 0 0 12px rgba(249,115,22,0.15);
}
[data-theme="light"] .sb-user { border-top-color: var(--border-subtle); }
[data-theme="light"] .sb-user-name { color: var(--t1); font-weight: 700; }
[data-theme="light"] .sb-user-clock { color: var(--t4); font-weight: 500; }
[data-theme="light"] .sb-user-av {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  font-weight: 800;
}
[data-theme="light"] .nav-badge { box-shadow: 0 2px 8px rgba(249,115,22,0.25); }

/* ── Topbar ── */
[data-theme="light"] #topbar {
  background: rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .tb-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .tb-page-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .tb-date { color: var(--t4); font-weight: 500; }
[data-theme="light"] .tb-bell {
  background: var(--bg-2);
  border-color: var(--border-default);
  color: var(--t3);
}
[data-theme="light"] .tb-bell:hover {
  border-color: var(--orange-bd);
  background: var(--orange-dim);
  color: #ea580c;
  box-shadow: 0 0 12px rgba(249,115,22,0.18);
}
[data-theme="light"] .tb-icon-btn {
  border-color: var(--border-default);
  background: var(--bg-2);
  color: var(--t3);
}
[data-theme="light"] .tb-icon-btn:hover {
  border-color: var(--orange-bd);
  color: #ea580c;
  background: var(--orange-dim);
  box-shadow: 0 0 10px rgba(249,115,22,0.15);
}
[data-theme="light"] .hamburger {
  background: var(--bg-2);
  border-color: var(--border-default);
}
[data-theme="light"] .hamburger:hover { background: var(--bg-3); }
[data-theme="light"] .hamburger span { background: var(--t2); }

/* ── App background ── */
[data-theme="light"] #app {
  background:
    radial-gradient(ellipse 50% 40% at 100% 0%, rgba(249,115,22,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(139,92,246,0.04) 0%, transparent 60%),
    #f7f7f9;
}
[data-theme="light"] #sidebar::before {
  background: linear-gradient(180deg, rgba(249,115,22,0.04) 0%, transparent 40%);
}

/* ── Cards — white, clean, orange hover ── */
[data-theme="light"] .card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .card:hover {
  border-color: rgba(249,115,22,0.45) !important;
  box-shadow: 0 4px 20px rgba(249,115,22,0.12), 0 1px 4px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .card::before {
  background: none;
}
[data-theme="light"] .card-title {
  color: var(--t1);
  font-weight: 700;
  letter-spacing: 0.1px;
}
[data-theme="light"] .card-header { color: var(--t1); font-weight: 700; }

/* ── Metric cards ── */
[data-theme="light"] .mc {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .mc:hover {
  border-color: rgba(249,115,22,0.45) !important;
  box-shadow: 0 4px 20px rgba(249,115,22,0.12) !important;
}
[data-theme="light"] .mc-label { color: var(--t3); font-weight: 600; letter-spacing: 0.3px; }
[data-theme="light"] .mc-sub { color: var(--t4); font-weight: 500; }

/* ── KPI values ── */
[data-theme="light"] .kpi-value {
  color: var(--t1);
  font-weight: 800;
  -webkit-text-fill-color: var(--t1);
}
[data-theme="light"] .kpi-label { color: var(--t3); font-weight: 600; }
[data-theme="light"] .section-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .section-subtitle { color: var(--t4); font-weight: 500; }
[data-theme="light"] .sec-label {
  color: var(--t3);
  border-bottom-color: rgba(0,0,0,0.08);
  font-weight: 700;
}

/* ── Stat card ── */
[data-theme="light"] .stat-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .stat-card:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.12);
}

/* ── Active clients strip ── */
[data-theme="light"] .active-clients-strip {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .acs-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .acs-client-chip {
  background: var(--bg-2) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
[data-theme="light"] .acs-client-chip:hover {
  border-color: rgba(249,115,22,0.50) !important;
  box-shadow: 0 2px 10px rgba(249,115,22,0.10) !important;
}
[data-theme="light"] .acs-chip-name { color: var(--t1); font-weight: 600; }
[data-theme="light"] .acs-chip-pkg { color: var(--t3); font-weight: 500; }

/* ── Team cards ── */
[data-theme="light"] .team-stat-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .team-stat-card:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .team-stat-label { color: var(--t3); font-weight: 600; }
[data-theme="light"] .team-stat-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .team-stat-icon { color: var(--t3); }

[data-theme="light"] .member-card-modern {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .member-card-modern:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.10);
}
[data-theme="light"] .member-role { color: var(--t3); font-weight: 600; }
[data-theme="light"] .member-stat-label { color: var(--t4); font-weight: 500; }
[data-theme="light"] .member-stats-row { background: var(--bg-2); }
[data-theme="light"] .progress-header { color: var(--t3); font-weight: 600; }
[data-theme="light"] .progress-bar-bg { background: rgba(0,0,0,0.08); }

[data-theme="light"] .team-member-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .team-member-card:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.10);
}
[data-theme="light"] .tmc-role { color: var(--t3); font-weight: 600; }
[data-theme="light"] .tmc-stat { background: var(--bg-2); border-color: var(--border-subtle); }
[data-theme="light"] .tmc-stat-label { color: var(--t4); font-weight: 500; }
[data-theme="light"] .tmc-progress-label { color: var(--t3); font-weight: 500; }

/* ── Buttons ── */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-o {
  background: #ffffff;
  color: var(--t2);
  border-color: rgba(0,0,0,0.14);
  font-weight: 600;
}
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-o:hover {
  background: var(--orange-dim);
  color: #c2410c;
  border-color: var(--orange-bd);
  box-shadow: 0 2px 10px rgba(249,115,22,0.14);
}
[data-theme="light"] .btn-ghost {
  background: var(--bg-2);
  color: var(--t3);
  border-color: var(--border-subtle);
  font-weight: 600;
}
[data-theme="light"] .btn-ghost:hover {
  background: var(--orange-dim);
  color: #c2410c;
  border-color: var(--orange-bd);
}
[data-theme="light"] .btn-b:hover {
  box-shadow: 0 2px 12px rgba(249,115,22,0.20);
}

/* ── Forms — critical readability ── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group textarea,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,0.14);
  color: #111118;
  font-weight: 500;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-group select:focus,
[data-theme="light"] .form-group input:focus,
[data-theme="light"] .form-group textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.14), inset 0 1px 3px rgba(0,0,0,0.04);
  background: #fffcf9;
  outline: none;
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #aaa; font-weight: 400; }
[data-theme="light"] .form-input option,
[data-theme="light"] .form-group select option {
  background: #ffffff;
  color: #111118;
}
[data-theme="light"] label,
[data-theme="light"] .form-label {
  color: var(--t2);
  font-weight: 650;
  letter-spacing: 0.1px;
}

/* ── Tables — sharp and readable ── */
[data-theme="light"] .tbl thead tr {
  background: var(--bg-2);
  border-bottom: 1.5px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .tbl th {
  color: var(--t2);
  font-weight: 700;
  letter-spacing: 0.3px;
}
[data-theme="light"] .tbl td {
  color: var(--t2);
  font-weight: 500;
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .tbl tbody tr:hover { background: rgba(249,115,22,0.04); }

[data-theme="light"] .table-modern {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .table-modern th {
  color: var(--t2);
  font-weight: 700;
  letter-spacing: 0.3px;
  border-bottom: 1.5px solid rgba(0,0,0,0.10);
  background: var(--bg-2);
}
[data-theme="light"] .table-modern td {
  color: var(--t2);
  font-weight: 500;
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .table-modern tr:hover td { background: rgba(249,115,22,0.04); }

[data-theme="light"] .salary-table thead { background: rgba(249,115,22,0.06); }
[data-theme="light"] .salary-table th {
  color: var(--t2);
  font-weight: 700;
  border-bottom-color: rgba(249,115,22,0.14);
}
[data-theme="light"] .salary-table td {
  color: var(--t2);
  font-weight: 500;
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .salary-table tbody tr:hover td { background: rgba(249,115,22,0.04); }
[data-theme="light"] .salary-table-wrap { border-color: rgba(0,0,0,0.09); }

[data-theme="light"] .rpt-tbl th {
  background: var(--bg-2);
  color: var(--t2);
  font-weight: 700;
  border-bottom: 1.5px solid rgba(0,0,0,0.10);
}
[data-theme="light"] .rpt-tbl td {
  color: var(--t2);
  font-weight: 500;
  border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .rpt-tbl tr:hover td { background: rgba(249,115,22,0.04); }

/* ── Modals ── */
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); }
[data-theme="light"] .task-modal,
[data-theme="light"] .client-modal {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.10);
}
[data-theme="light"] .task-modal-header,
[data-theme="light"] .client-modal-header {
  border-bottom: 1.5px solid rgba(0,0,0,0.09);
  background: var(--bg-2);
}
[data-theme="light"] .task-modal-title,
[data-theme="light"] .client-modal-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .modal-close-btn { color: var(--t3); }
[data-theme="light"] .modal-close-btn:hover { color: #ef4444; }

[data-theme="light"] .client-detail-overlay { background: rgba(0,0,0,0.40); }
[data-theme="light"] .client-detail-panel {
  background: #ffffff;
  border-left: 1px solid rgba(0,0,0,0.10);
  box-shadow: -8px 0 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .cdp-header {
  background: var(--bg-2);
  border-bottom: 1.5px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .report-modal {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
}
[data-theme="light"] .report-textarea {
  background: var(--bg-2);
  border: 1.5px solid rgba(0,0,0,0.12);
  color: var(--t1);
  font-weight: 500;
}
[data-theme="light"] .report-textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
[data-theme="light"] .report-modal-backdrop { background: rgba(0,0,0,0.45); }

/* ── Alert cards ── */
[data-theme="light"] .alert-item { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .alert-item:hover { background: rgba(249,115,22,0.04); }
[data-theme="light"] .ac-desc { color: var(--t2); font-weight: 500; }

/* ── Stat box ── */
[data-theme="light"] .stat-box { border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .stat-box-lbl { color: var(--t3); font-weight: 600; }

/* ── Deliverable list ── */
[data-theme="light"] .dl-item { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .dl-icon { background: var(--bg-2); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .dl-name { color: var(--t1); font-weight: 600; }
[data-theme="light"] .dl-meta { color: var(--t3); font-weight: 500; }

/* ── Delay card ── */
[data-theme="light"] .delay-card { border-color: rgba(0,0,0,0.09); }

/* ── Team rows ── */
[data-theme="light"] .team-row { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .team-row:hover { background: rgba(249,115,22,0.04); }

/* ── Progress bars ── */
[data-theme="light"] .prog { background: rgba(0,0,0,0.08); }
[data-theme="light"] .progress-bar { background: rgba(0,0,0,0.08); }
[data-theme="light"] .score-bar { background: rgba(0,0,0,0.08); }
[data-theme="light"] .prog-track { background: rgba(0,0,0,0.08); }
[data-theme="light"] .prog-bar-bg { background: rgba(0,0,0,0.08); }
[data-theme="light"] .prog-label { color: var(--t3); font-weight: 600; }

/* ── Client cards ── */
[data-theme="light"] .client-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
}
[data-theme="light"] .client-card:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.10);
}

/* ── Footer ── */
[data-theme="light"] #bm-footer {
  background: rgba(255,255,255,0.97);
  border-top: 1px solid rgba(0,0,0,0.08);
}
[data-theme="light"] .bm-footer-name { color: var(--t1); font-weight: 700; }
[data-theme="light"] .bm-footer-copy { color: var(--t4); font-weight: 500; }
[data-theme="light"] .bm-footer-link { color: var(--t3); font-weight: 600; }
[data-theme="light"] .bm-footer-link:hover {
  background: var(--orange-dim);
  color: #ea580c;
}
[data-theme="light"] .bm-footer-sep { color: rgba(0,0,0,0.15); }

/* ── Misc ── */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(249,115,22,0.45); }
[data-theme="light"] ::selection { background: rgba(249,115,22,0.18); color: #9a3412; }
[data-theme="light"] hr, [data-theme="light"] .divider { border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] a { color: #ea580c; }
[data-theme="light"] a:hover { color: #c2410c; }

/* ── Tooltips ── */
[data-theme="light"] [data-tooltip]::after {
  background: #ffffff;
  border-color: rgba(0,0,0,0.14);
  color: var(--t1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ── Toast ── */
[data-theme="light"] .toast {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.12);
  color: var(--t1);
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
[data-theme="light"] #waToast { background: #f0fdf4; border-color: #86efac; color: #15803d; }

/* ── Skeleton ── */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
}

/* ── Spinner ── */
[data-theme="light"] .spinner { border-color: rgba(0,0,0,0.10); border-top-color: #f97316; }

/* ── Empty state ── */
[data-theme="light"] .empty-state { color: var(--t3); }
[data-theme="light"] .empty-state-text { color: var(--t2); font-weight: 600; }
[data-theme="light"] .empty-state-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .loading-text { color: var(--t4); font-weight: 500; }

/* ── CEO Alert Bar ── */
[data-theme="light"] #ceo-alert-bar,
[data-theme="light"] .ceo-alert-bar {
  background: linear-gradient(90deg, #fff7ed, #fffbf7);
  border-bottom: 1.5px solid rgba(249,115,22,0.25);
  color: #ea580c;
  box-shadow: 0 2px 12px rgba(249,115,22,0.08);
}

/* ── Theme toggle ── */
[data-theme="light"] .theme-toggle-track {
  background: #f97316;
  border-color: #ea580c;
}
[data-theme="light"] .theme-toggle-thumb {
  left: 18px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
[data-theme="light"] .theme-toggle-btn {
  color: var(--t2);
  font-weight: 600;
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .theme-toggle-btn:hover {
  background: var(--orange-dim);
  border-color: var(--orange-bd);
  color: #c2410c;
}

/* ── Satisfaction page ── */
[data-theme="light"] .sat-page { background: var(--bg-base); color: var(--t1); }
[data-theme="light"] .sat-topbar { background: rgba(255,255,255,0.97); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sat-tab { color: var(--t3); font-weight: 600; }
[data-theme="light"] .sat-tab:hover { color: var(--t1); }
[data-theme="light"] .sat-tab.active { color: #ea580c; border-bottom-color: #f97316; font-weight: 700; }
[data-theme="light"] .sat-tabs { background: #ffffff; border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sat-kpi { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .sat-kpi:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .sat-kpi-value, [data-theme="light"] .sat-kpi-val { color: var(--t1); font-weight: 800; }
[data-theme="light"] .sat-kpi-label, [data-theme="light"] .sat-kpi-lbl { color: var(--t3); font-weight: 600; }
[data-theme="light"] .sat-kpi-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .sat-bell { background: var(--bg-2); border-color: rgba(0,0,0,0.10); }
[data-theme="light"] .sat-bell:hover { border-color: var(--orange-bd); box-shadow: 0 0 12px rgba(249,115,22,0.18); }
[data-theme="light"] .sat-review-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .sat-review-card:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .src-client { color: var(--t1); font-weight: 700; }
[data-theme="light"] .src-date { color: var(--t4); font-weight: 500; }
[data-theme="light"] .src-message { color: var(--t2); font-weight: 500; border-top-color: rgba(0,0,0,0.07); }
[data-theme="light"] .sat-risk-row { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .srr-name { color: var(--t1); font-weight: 700; }
[data-theme="light"] .srr-warn { color: #ea580c; font-weight: 600; }
[data-theme="light"] .sat-alert-row { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .sap-header { background: var(--bg-2); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sat-alert-panel { background: #ffffff; border-color: rgba(0,0,0,0.10); }

/* ── Portal / Client portal ── */
[data-theme="light"] .portal-topbar, [data-theme="light"] .client-topbar {
  background: rgba(255,255,255,0.97);
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .portal-hero {
  background: linear-gradient(135deg, #ffffff 0%, var(--bg-2) 100%);
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .portal-meta h1 { color: var(--t1); font-weight: 800; }
[data-theme="light"] .portal-meta p { color: var(--t3); font-weight: 500; }
[data-theme="light"] .portal-tab { color: var(--t3); font-weight: 600; }
[data-theme="light"] .portal-tab:hover { color: var(--t2); }
[data-theme="light"] .portal-tab.active {
  color: #ea580c;
  background: rgba(249,115,22,0.08);
  font-weight: 700;
}
[data-theme="light"] .pstat { background: var(--bg-2); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .pstat .lbl { color: var(--t4); font-weight: 600; }
[data-theme="light"] .portal-task-row { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .portal-task-row:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .portal-task-title { color: var(--t2); font-weight: 600; }
[data-theme="light"] .deliv-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .deliv-card:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .deliv-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .deliv-type { color: var(--t4); font-weight: 500; }
[data-theme="light"] .approval-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .approval-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .approval-notes { color: var(--t3); font-weight: 500; }
[data-theme="light"] .issue-card { background: #ffffff; }
[data-theme="light"] .issue-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .issue-desc { color: var(--t3); font-weight: 500; }
[data-theme="light"] .portal-back {
  color: var(--t3);
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.10);
  font-weight: 600;
}
[data-theme="light"] .portal-back:hover {
  color: #ea580c;
  background: var(--orange-dim);
  border-color: var(--orange-bd);
}
[data-theme="light"] .filter-pill {
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.10);
  color: var(--t3);
  font-weight: 600;
}
[data-theme="light"] .filter-pill:hover { color: var(--t2); }
[data-theme="light"] .filter-pill.active {
  background: var(--orange-dim);
  border-color: var(--orange-bd);
  color: #c2410c;
  font-weight: 700;
}

/* ── Login page ── */
[data-theme="light"] body.login-page,
[data-theme="light"] .login-body {
  background:
    radial-gradient(circle at top left, rgba(249,115,22,0.08), transparent 40%),
    radial-gradient(circle at bottom right, rgba(139,92,246,0.06), transparent 40%),
    #f7f7f9;
}
[data-theme="light"] .login-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .logo-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .toggle-btn {
  color: var(--t3);
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.10);
  font-weight: 600;
}
[data-theme="light"] .cred-row {
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.09);
}
[data-theme="light"] .cred-row:hover {
  border-color: var(--orange-bd);
  background: var(--orange-dim);
}
[data-theme="light"] .cred-info { color: var(--t1); font-weight: 600; }
[data-theme="light"] .cred-hint { color: var(--t4); font-weight: 500; }
[data-theme="light"] .demo-title { color: var(--t2); font-weight: 700; }

/* ── Feedback ── */
[data-theme="light"] .feedback-section { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .feedback-section-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .feedback-section-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .feedback-textarea {
  background: var(--bg-2);
  border: 1.5px solid rgba(0,0,0,0.12);
  color: var(--t1);
  font-weight: 500;
}
[data-theme="light"] .feedback-textarea:focus {
  border-color: #f97316;
  background: #fffcf9;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
}
[data-theme="light"] .feedback-textarea::placeholder { color: #aaa; font-weight: 400; }
[data-theme="light"] .feedback-history-title { color: var(--t3); font-weight: 700; }
[data-theme="light"] .feedback-history-item { background: var(--bg-2); border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .feedback-history-item:hover { border-color: rgba(249,115,22,0.45); }
[data-theme="light"] .feedback-history-text p { color: var(--t2); font-weight: 500; }
[data-theme="light"] .feedback-history-date { color: var(--t4); font-weight: 500; }
[data-theme="light"] .rating-btn { color: rgba(0,0,0,0.20); }

/* ── Content calendar ── */
[data-theme="light"] .upload-drop-zone {
  border: 2px dashed rgba(249,115,22,0.35);
  background: #fffcf9;
}
[data-theme="light"] .upload-drop-zone.dz-active {
  border-color: #f97316;
  background: var(--orange-dim);
}
[data-theme="light"] .udz-text { color: var(--t2); font-weight: 600; }
[data-theme="light"] .udz-sub { color: var(--t4); font-weight: 500; }
[data-theme="light"] .calendar-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .calendar-card:hover { border-color: rgba(249,115,22,0.45); box-shadow: 0 4px 16px rgba(249,115,22,0.08); }
[data-theme="light"] .calendar-title { color: var(--t1); font-weight: 700; }
[data-theme="light"] .calendar-desc { color: var(--t3); font-weight: 500; }
[data-theme="light"] .calendar-actions button,
[data-theme="light"] .calendar-actions a {
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.10);
  color: var(--t3);
  font-weight: 600;
}
[data-theme="light"] .calendar-actions button:hover,
[data-theme="light"] .calendar-actions a:hover {
  background: var(--orange-dim);
  border-color: var(--orange-bd);
  color: #ea580c;
}
[data-theme="light"] .cal-thumb-placeholder { color: var(--t4); }
[data-theme="light"] .cal-thumb-wrap { background: var(--bg-2); }

/* ── Attendance & Staff ── */
[data-theme="light"] .attendance-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .attendance-card:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.10);
}
[data-theme="light"] .staff-card { background: #ffffff; border-color: rgba(0,0,0,0.09); }
[data-theme="light"] .staff-card:hover {
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 4px 20px rgba(249,115,22,0.10);
}
[data-theme="light"] .att-tabs-wrap { background: var(--bg-2); border-color: rgba(0,0,0,0.09); }

/* ── Salary cards ── */
[data-theme="light"] .salary-card {
  background: #fffcf9;
  border: 1px solid rgba(249,115,22,0.12);
}
[data-theme="light"] .salary-card:hover { box-shadow: 0 4px 20px rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.35); }
[data-theme="light"] .salary-card-label { color: var(--t3); font-weight: 600; }

/* ── Report page ── */
[data-theme="light"] .rpt-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .rpt-sub { color: var(--t3); font-weight: 500; }
[data-theme="light"] .rpt-label { color: var(--t2); font-weight: 650; }
[data-theme="light"] .rpt-select { background: #ffffff; border-color: rgba(0,0,0,0.12); color: var(--t1); font-weight: 500; }
[data-theme="light"] .rpt-period-btn {
  background: var(--bg-2);
  border-color: rgba(0,0,0,0.12);
  color: var(--t3);
  font-weight: 600;
}
[data-theme="light"] .rpt-period-btn.active,
[data-theme="light"] .rpt-period-btn:hover {
  background: var(--orange-dim);
  border-color: var(--orange-bd);
  color: #c2410c;
  font-weight: 700;
}
[data-theme="light"] .rpt-loading { color: var(--t3); }
[data-theme="light"] .rpt-err { color: #ef4444; }
[data-theme="light"] .rpt-meta-name { color: var(--t1); font-weight: 800; }
[data-theme="light"] .rpt-meta-period { color: var(--t3); font-weight: 600; }
[data-theme="light"] .rpt-meta-gen { color: var(--t4); font-weight: 500; }
[data-theme="light"] .rpt-sum-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.09) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
[data-theme="light"] .rpt-sum-label { color: var(--t3); font-weight: 600; }
[data-theme="light"] .rpt-sum-bar { background: rgba(0,0,0,0.08); }
[data-theme="light"] .rpt-sum-pct { color: var(--t2); font-weight: 700; }
[data-theme="light"] .rpt-sec-title { color: var(--t1); font-weight: 800; }
[data-theme="light"] .rpt-empty { color: var(--t3); font-weight: 500; }

/* ── Service chip ── */
[data-theme="light"] .service-chip {
  background: rgba(249,115,22,0.08);
  border-color: rgba(249,115,22,0.25);
  color: #c2410c;
  font-weight: 600;
}

/* ── Misc ── */
[data-theme="light"] .tb-bell-dot { border-color: #ffffff; }
[data-theme="light"] .value, [data-theme="light"] .code { color: #ea580c; font-weight: 700; }
[data-theme="light"] .nav-badge { box-shadow: 0 2px 8px rgba(249,115,22,0.25); }
[data-theme="light"] .sec-label { color: var(--t3); border-bottom-color: rgba(0,0,0,0.08); }


/* Theme toggle button */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  background: var(--b1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--t2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s var(--ease-smooth);
  margin-bottom: 8px;
}
.theme-toggle-btn:hover {
  background: var(--purple-dim);
  border-color: var(--purple-bd);
  color: var(--t1);
}
.theme-toggle-track {
  width: 36px; height: 20px;
  background: var(--bg-4);
  border: 1.5px solid var(--border-default);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.theme-toggle-thumb {
  width: 14px; height: 14px;
  background: var(--t3);
  border-radius: 50%;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 2px;
  transition: left 0.2s var(--ease-snap), background 0.2s;
}



/* Active/Inactive toggle in client chip */
.acs-status-toggle {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.acs-toggle-btn {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-ui);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.acs-toggle-btn.active-btn {
  background: rgba(34,197,94,0.15);
  border-color: rgba(34,197,94,0.4);
  color: #22c55e;
}
.acs-toggle-btn.active-btn.selected {
  background: rgba(34,197,94,0.28);
  border-color: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.3);
}
.acs-toggle-btn.inactive-btn {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
}
.acs-toggle-btn.inactive-btn.selected {
  background: rgba(239,68,68,0.25);
  border-color: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.3);
}

/* ══════════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { height:100%; font-size:13px; scroll-behavior:smooth; }

body {
  height:100%;
  overflow:hidden;
  font-family: var(--font-ui);
  background: var(--bg-base);
  color: var(--t1);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

body.portal-page {
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:100vh;
}

::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--purple-500), var(--orange-500));
  border-radius:99px;
}
::selection { background: var(--purple-dim); color: var(--purple-200); }

/* ══════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════ */
@keyframes fadeUp     { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn     { from{opacity:0;} to{opacity:1;} }
@keyframes slideInLeft  { from{opacity:0;transform:translateX(-20px);} to{opacity:1;transform:translateX(0);} }
@keyframes slideInRight { from{opacity:0;transform:translateX(20px);}  to{opacity:1;transform:translateX(0);} }
@keyframes scaleIn    { from{opacity:0;transform:scale(0.88);} to{opacity:1;transform:scale(1);} }
@keyframes countUp    { from{opacity:0;transform:translateY(8px) scale(0.9);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes pulse      { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.85);} }
@keyframes pulseRing  { 0%{box-shadow:0 0 0 0 currentColor;} 70%{box-shadow:0 0 0 6px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }
@keyframes shimmer    { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes spin       { to{transform:rotate(360deg);} }
@keyframes blinkCritical { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
@keyframes progressFill  { from{width:0%;} }
@keyframes orb        { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(12px,-8px) scale(1.08);} 66%{transform:translate(-8px,10px) scale(0.94);} 100%{transform:translate(0,0) scale(1);} }
@keyframes floatY     { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
@keyframes page-enter { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes glow-pulse { 0%,100%{box-shadow:0 0 12px var(--purple-glow);} 50%{box-shadow:0 0 28px var(--purple-glow),0 0 50px rgba(139,92,246,0.15);} }
@keyframes bmSpin     { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
@keyframes previewFadeIn { from{opacity:0;transform:scale(0.97);} to{opacity:1;transform:scale(1);} }

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════════ */
#app {
  display:flex;
  width:100%; height:100vh; max-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(139,92,246,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 100%, rgba(249,115,22,0.07) 0%, transparent 60%),
    var(--bg-base);
  position:relative;
}

/* ── Sidebar ── */
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  height:100vh; max-height:100vh;
  background: var(--bg-glass);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-right:1px solid var(--border-subtle);
  display:flex; flex-direction:column;
  flex-shrink:0;
  position:relative; z-index:30;
  overflow:hidden;
  transition:transform 0.3s var(--ease-snap);
}

#sidebar::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(139,92,246,0.12), transparent 60%),
    linear-gradient(180deg, rgba(139,92,246,0.04) 0%, transparent 50%);
  pointer-events:none;
}

/* ── Main column ── */
#main {
  flex:1 1 0; min-width:0; width:0;
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}

/* ── Topbar ── */
#topbar {
  display:none;
  height:0;
  min-height:0;
}

#topbar::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--purple-bd) 30%, var(--orange-bd) 70%, transparent 100%);
}

#topbar .tb-date { margin-right:auto; }

#bm-refresh-btn:hover  { background: var(--purple-dim) !important; border-color: var(--purple-bd) !important; }
#bm-refresh-btn.spinning { animation:bmSpin 0.6s ease; }

/* ── Content ── */
#content {
  flex:1 1 0; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  position: relative;
  -webkit-overflow-scrolling:touch;
}

.page-wrap {
  padding:18px 20px;
  display:flex; flex-direction:column;
  gap:16px; width:100%; max-width:100%;
  box-sizing:border-box;
}
.page-enter { animation:page-enter 0.35s var(--ease-snap); }

/* ══════════════════════════════════════════════════════════════════════
   SITE FOOTER
   ══════════════════════════════════════════════════════════════════════ */
#bm-footer {
  flex-shrink: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-subtle);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  transition: transform 0.3s var(--ease-snap), opacity 0.3s ease;
}
/* Scrolled down inside #content → footer slides out of view */
#bm-footer.footer-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
#bm-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--purple-bd) 30%, var(--orange-bd) 70%, transparent 100%);
}
.bm-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
#staff-modal-overlay {
  z-index: 9999 !important;
}
.bm-footer-logo {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--orange-bd) 100%);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
  font-family: var(--font-display);
  flex-shrink: 0;
}
.bm-footer-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: 0.3px;
}
.bm-footer-copy {
  font-size: 10px;
  color: var(--t3);
  margin-left: 4px;
}
.bm-footer-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bm-footer-link {
  font-size: 11px;
  color: var(--t3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  transition: background .15s, color .15s;
  font-family: var(--font-ui);
  font-weight: 600;
  border: none;
  background: none;
  white-space: nowrap;
}
.bm-footer-link:hover {
  background: var(--s3);
  color: var(--t1);
}
.bm-footer-sep {
  color: var(--border-subtle);
  font-size: 10px;
  user-select: none;
}
@media (max-width: 600px) {
  #bm-footer {
    padding: 10px 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .bm-footer-links { gap: 2px; }
  .bm-footer-link  { font-size: 10px; padding: 3px 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   SIDEBAR INTERNALS
   ══════════════════════════════════════════════════════════════════════ */
.sb-logo {
  padding:18px 16px 16px;
  border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:12px;
  position:relative; z-index:1; flex-shrink:0;
}
.sb-logo::after {
  content:'';
  position:absolute;
  bottom:0; left:16px; right:16px; height:1px;
  background:linear-gradient(90deg, transparent, var(--purple-bd), transparent);
}
.sb-logo img {
  width:40px; height:40px;
  object-fit:contain; border-radius:var(--r-md);
  filter:drop-shadow(0 0 12px var(--purple-glow));
  animation:floatY 4s ease-in-out infinite;
}
.sb-logo-mark {
  width:36px; height:36px; flex-shrink:0;
  border-radius:10px;
  background:linear-gradient(135deg, var(--purple-400), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px; color:#fff;
  box-shadow:0 0 20px var(--purple-glow);
  animation:floatY 4s ease-in-out infinite;
}
.sb-logo-text { overflow:hidden; }
.sb-logo-name {
  font-family:var(--font-display);
  font-size:16px; font-weight:800;
  background:linear-gradient(135deg, var(--purple-300), var(--orange-400));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; letter-spacing:0.3px; line-height:1;
}
.sb-logo-tag {
  font-family:var(--font-mono);
  font-size:9.5px; color:var(--t4); letter-spacing:0.5px;
}

/* Role pill */
.sb-role-pill {
  margin:10px 10px 6px;
  padding:8px 12px; border-radius:var(--r-md);
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600;
  border:1px solid transparent;
  transition:all 0.2s; position:relative; z-index:1; flex-shrink:0;
}
.sb-role-pill.rp-ceo     { background:var(--orange-dim); border-color:var(--orange-bd); color:var(--orange-400); }
.sb-role-pill.rp-manager { background:var(--purple-dim); border-color:var(--purple-bd); color:var(--purple-300); }
.sb-role-pill.rp-staff   { background:var(--purple-dim); border-color:var(--border-subtle); color:var(--purple-300); }

/* Pulse dot */
.pulse-dot { width:7px; height:7px; border-radius:50%; animation:pulse 2.2s ease-in-out infinite; flex-shrink:0; }
.pd-amber  { background:var(--orange-400); }
.pd-blue   { background:var(--purple-400); }
.pd-violet { background:var(--purple-300); }

/* Nav */
#nav { flex:1 1 0; min-height:0; overflow-y:auto; overflow-x:hidden; padding:10px 10px; }
#nav::-webkit-scrollbar { width:2px; }
#nav::-webkit-scrollbar-thumb { background:var(--purple-bd); }

.nav-section {
  padding:14px 8px 5px;
  font-size:9.5px; font-family:var(--font-mono);
  letter-spacing:1.4px; text-transform:uppercase; color:var(--t4);
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-md);
  margin:1px 0; cursor:pointer; color:var(--t3);
  font-size:12.5px; font-weight:500;
  transition:all 0.2s var(--ease-smooth);
  position:relative; min-height:40px;
  border:1px solid transparent;
  font-family:var(--font-ui); user-select:none;
}
.nav-item:hover { background:var(--purple-dim); color:var(--t1); border-color:var(--border-subtle); }
.nav-item.active {
  background:linear-gradient(135deg, rgba(139,92,246,0.20), rgba(249,115,22,0.10));
  color:var(--t1); border-color:var(--purple-bd);
  box-shadow:0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06);
}
.nav-item.active::before {
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:60%;
  background:linear-gradient(180deg, var(--purple-400), var(--orange-500));
  border-radius:0 3px 3px 0;
}
.nav-icon  { font-size:15px; width:20px; text-align:center; flex-shrink:0; opacity:0.85; display:inline-flex; align-items:center; justify-content:center; }
.nav-icon svg { display:block; flex-shrink:0; }
.sb-title-icon { display:inline-flex; align-items:center; justify-content:center; }
.sb-title-icon svg { display:block; }
.nav-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:0.1px; }
.nav-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-full);
  font-size:9px; font-weight:800;
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  color:#fff; box-shadow:0 2px 8px var(--purple-glow);
  animation:glow-pulse 2.5s ease-in-out infinite;
}
.nb-red   { background:var(--accent-danger) !important; }
.nb-amber { background:var(--orange-400) !important; color:#fff !important; }
.nb-blue  { background:var(--purple-400) !important; }

/* Sidebar bottom */
.sb-bottom { padding:10px; border-top:1px solid var(--border-subtle); flex-shrink:0; }
.sb-switch-btn {
  width:100%; padding:9px 12px;
  background:transparent; border:1px solid var(--border-subtle);
  border-radius:var(--r-md); color:var(--t3);
  font-family:var(--font-ui); font-size:11.5px; font-weight:500;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer; transition:all 0.2s var(--ease-smooth);
  text-decoration:none; margin-bottom:2px;
}
.sb-switch-btn:hover { border-color:var(--orange-bd); color:var(--t1); background:var(--orange-dim); }

.sb-user {
  display:flex; align-items:center; gap:9px;
  padding:10px 12px; border-top:1px solid var(--border-subtle);
  position:relative; z-index:1; flex-shrink:0;
}
.sb-user-av {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 0 14px var(--purple-glow);
}
.sb-user-section {
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--border-subtle); flex-shrink:0;
}
.sb-avatar {
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#fff; flex-shrink:0;
  box-shadow:0 0 14px var(--purple-glow); font-family:var(--font-ui); letter-spacing:0.5px;
}
.sb-user-name  { font-size:12px; font-weight:600; color:var(--t1); }
.sb-user-clock { font-size:10px; color:var(--t3); font-family:var(--font-mono); letter-spacing:0.3px; }

/* Mobile overlay */
.sidebar-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(4px);
  z-index:45; opacity:0; transition:opacity 0.3s ease;
}
.sidebar-overlay.active { display:block; opacity:1; }

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR ELEMENTS
   ══════════════════════════════════════════════════════════════════════ */
.tb-title {
  font-family:var(--font-display);
  font-size:14.5px; font-weight:800;
  flex:1; letter-spacing:-0.3px; color:var(--t1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-page-title {
  font-size:14px; font-weight:700; color:var(--t1);
  letter-spacing:0.2px; font-family:var(--font-ui);
}
.tb-date { font-size:11px; color:var(--t4); font-family:var(--font-mono); white-space:nowrap; }
.tb-bell {
  width:34px; height:34px;
  background:var(--bg-4); border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; font-size:14px;
  transition:all 0.2s var(--ease-smooth); flex-shrink:0;
}
.tb-bell:hover { border-color:var(--purple-bd); background:var(--purple-dim); box-shadow:0 0 12px var(--purple-glow); }
.tb-bell-dot {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px;
  background:var(--accent-danger); border-radius:50%;
  border:1.5px solid var(--bg-2); animation:pulse 2s infinite;
}
.tb-icon-btn {
  width:34px; height:34px; border-radius:var(--r-md);
  border:1px solid var(--border-subtle); background:var(--b1);
  color:var(--t3); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s var(--ease-smooth); font-size:14px; position:relative;
}
.tb-icon-btn:hover { border-color:var(--purple-bd); color:var(--t1); background:var(--purple-dim); box-shadow:0 0 12px var(--purple-glow); }
.tb-avatar {
  width:32px; height:32px; border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff; cursor:pointer;
  box-shadow:0 0 10px var(--purple-glow); font-family:var(--font-ui);
}

/* Hamburger */
.hamburger {
  display:none;
  width:38px; height:38px; flex-shrink:0; cursor:pointer;
  background:var(--bg-4); border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px; transition:background 0.15s;
}
.hamburger:hover { background:var(--bg-5); }
.hamburger span {
  display:block; width:18px; height:2px;
  background:var(--t1); border-radius:2px;
  transition:all 0.3s var(--ease-snap); transform-origin:center;
}
.hamburger.active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Spinner */
.spinner {
  width:20px; height:20px;
  border:2px solid var(--border-subtle); border-top-color:var(--purple-400);
  border-radius:50%; animation:spin 0.6s linear infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   GRID UTILITIES
   ══════════════════════════════════════════════════════════════════════ */
.g2   { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.g3   { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.g4   { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.g5   { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
.g2-3 { display:grid; grid-template-columns:2fr 3fr; gap:12px; }
.g3-2 { display:grid; grid-template-columns:3fr 2fr; gap:12px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }

/* Typography utils */
.display { font-family:var(--font-display); }
.mono    { font-family:var(--font-mono); }
.f10{font-size:10px;} .f11{font-size:11px;} .f12{font-size:12px;}
.f13{font-size:13px;} .f14{font-size:14px;} .f20{font-size:20px;}
.fw5{font-weight:500;} .fw6{font-weight:600;} .fw7{font-weight:700;} .fw8{font-weight:800;}
.flex{display:flex;} .flex-center{display:flex;align-items:center;}
.gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.mb-3{margin-bottom:12px;} .mb-4{margin-bottom:16px;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
a { color:var(--purple-300); text-decoration:none; transition:color 0.15s; }
a:hover { color:var(--purple-200); }
hr, .divider { border:none; border-top:1px solid var(--border-subtle); margin:14px 0; }

/* ══════════════════════════════════════════════════════════════════════
   PILLS / BADGES
   ══════════════════════════════════════════════════════════════════════ */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:var(--r-full);
  font-size:10px; font-weight:700; letter-spacing:0.5px;
  text-transform:uppercase; font-family:var(--font-ui); white-space:nowrap;
}
.pill-g, .pill-s  { background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.pill-r, .pill-d  { background:var(--s-danger-bg);  color:var(--accent-danger);  border:1px solid var(--s-danger-bd); }
.pill-a, .pill-o  { background:var(--orange-dim);   color:var(--orange-400);     border:1px solid var(--orange-bd); }
.pill-b, .pill-i  { background:var(--purple-dim);   color:var(--purple-300);     border:1px solid var(--purple-bd); }
.pill-v, .pill-p  { background:var(--purple-dim);   color:var(--purple-300);     border:1px solid var(--purple-bd); }
.pill-c           { background:var(--s-info-bg);    color:var(--accent-info);    border:1px solid var(--s-info-bd); }
.pill-grey        { background:var(--b2); color:var(--t3); border:1px solid var(--border-subtle); }

/* Delta */
.delta { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:var(--r-xs); font-size:10px; font-weight:700; }
.delta-up { background:var(--s-success-bg); color:var(--accent-success); }
.delta-dn { background:var(--s-danger-bg);  color:var(--accent-danger); }
.delta-fl { background:var(--orange-dim);   color:var(--orange-400); }

/* ══════════════════════════════════════════════════════════════════════
   PROGRESS BARS
   ══════════════════════════════════════════════════════════════════════ */
.prog    { height:4px; background:var(--b2); border-radius:var(--r-full); overflow:hidden; }
.prog-lg { height:6px; }
.prog-fill {
  height:100%; border-radius:var(--r-full);
  animation:progressFill 0.8s var(--ease-snap);
  transition:width 0.6s var(--ease-snap);
}
.pf-g { background:linear-gradient(90deg, #16a34a, var(--accent-success)); }
.pf-r { background:linear-gradient(90deg, #dc2626, var(--accent-danger)); }
.pf-a { background:linear-gradient(90deg, var(--orange-500), var(--orange-400)); }
.pf-b { background:linear-gradient(90deg, var(--purple-600), var(--purple-400)); }
.pf-v { background:linear-gradient(90deg, var(--purple-600), var(--purple-300)); }

.progress-bar    { height:5px; background:var(--bg-4); border-radius:var(--r-full); overflow:hidden; }
.progress-fill   { height:100%; border-radius:var(--r-full); background:linear-gradient(90deg, var(--purple-500), var(--orange-500)); transition:width 0.6s var(--ease-smooth); }

/* Delivery tracker */
.prog-track { height:6px; background:var(--b2); border-radius:var(--r-full); overflow:hidden; min-width:80px; }
.prog-track-fill { height:100%; border-radius:var(--r-full); transition:width 0.7s var(--ease-snap); }
.ptf-0    { background:var(--t4); width:0%; }
.ptf-low  { background:linear-gradient(90deg, #dc2626, var(--accent-danger)); }
.ptf-mid  { background:linear-gradient(90deg, var(--orange-500), var(--orange-400)); }
.ptf-hi   { background:linear-gradient(90deg, var(--purple-600), var(--purple-400)); }
.ptf-done { background:linear-gradient(90deg, #16a34a, var(--accent-success)); }

/* Score bars */
.score-bar-wrap { display:flex; align-items:center; gap:10px; }
.score-bar { flex:1; height:6px; background:var(--bg-4); border-radius:var(--r-full); overflow:hidden; }
.score-bar-fill { height:100%; border-radius:var(--r-full); background:linear-gradient(90deg, var(--purple-500), var(--orange-400)); transition:width 0.8s var(--ease-smooth); }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 14px; border-radius:var(--r-md); border:1px solid transparent;
  font-family:var(--font-ui); font-size:12px; font-weight:600;
  cursor:pointer; transition:all 0.2s var(--ease-smooth);
  white-space:nowrap; text-decoration:none; letter-spacing:0.2px; user-select:none;
}
.btn:active { transform:scale(0.97); }

.btn-primary, .btn-p {
  background:linear-gradient(135deg, var(--purple-500), var(--purple-600));
  color:#fff; border-color:var(--purple-bd);
  box-shadow:0 2px 10px rgba(124,58,237,0.30);
}
.btn-primary:hover, .btn-p:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(124,58,237,0.45);
  background:linear-gradient(135deg, var(--purple-400), var(--purple-500));
}

.btn-secondary, .btn-o {
  background:var(--b1); color:var(--t2);
  border-color:var(--b3);
  border-radius:10px;
  padding:10px;
}
.btn-secondary:hover, .btn-o:hover {
  background:var(--b2); color:var(--t1);
  border-color:var(--b4,var(--b3));
}

.btn-outline, .btn-b {
  background:var(--purple-dim); color:var(--purple-300); border-color:var(--purple-bd);
}
.btn-outline:hover, .btn-b:hover {
  background:linear-gradient(135deg, var(--purple-500), var(--purple-600));
  color:#fff; box-shadow:0 0 14px var(--purple-glow);
}

.btn-ghost {
  background:var(--b1); color:var(--t3); border-color:var(--border-subtle);
}
.btn-ghost:hover { background:var(--b2); color:var(--t1); border-color:var(--border-default); }

.btn-danger, .btn-r {
  background:var(--s-danger-bg); color:var(--accent-danger); border-color:var(--s-danger-bd);
}
.btn-danger:hover, .btn-r:hover { background:var(--accent-danger); color:#fff; box-shadow:0 0 14px rgba(239,68,68,0.35); }

.btn-success, .btn-g {
  background:var(--s-success-bg); color:var(--accent-success); border-color:var(--s-success-bd);
}
.btn-success:hover, .btn-g:hover { background:var(--accent-success); color:#fff; }

.btn-a { background:var(--orange-dim); color:var(--orange-400); border:1px solid var(--orange-bd); }
.btn-a:hover { background:var(--orange-500); color:#fff; box-shadow:var(--shadow-glow-orange); }

.btn-wa { background:#128c7e; color:#fff; border:none; }
.btn-wa:hover { background:#16a085; }

.btn-block { width:100%; }

/* ══════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════ */
.card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); padding:18px;
  box-shadow:var(--shadow-card);
  transition:transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
  position:relative; overflow:visible; min-width:0;
}
.card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(139,92,246,0.03) 0%, transparent 50%, rgba(249,115,22,0.02) 100%);
  pointer-events:none; border-radius:inherit;
}
.card:hover { border-color:var(--purple-bd); box-shadow:var(--shadow-card-hover), 0 0 24px var(--purple-glow); transform:translateY(-2px); }
.card.accent-orange:hover { border-color:var(--orange-bd); box-shadow:var(--shadow-card-hover), 0 0 24px var(--orange-glow); }

.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:8px; flex-wrap:wrap; }
.card-title  { font-size:13px; font-weight:700; color:var(--t2); font-family:var(--font-ui); letter-spacing:0.2px; display:flex; align-items:center; gap:7px; }

/* Stat card */
.stat-card {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); padding:18px 20px;
  position:relative; overflow:hidden;
  transition:transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth);
  cursor:default;
}
.stat-card::after {
  content:''; position:absolute; top:-30px; right:-30px;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,92,246,0.10) 0%, transparent 70%); pointer-events:none;
}
.stat-card:hover { border-color:var(--purple-bd); box-shadow:var(--shadow-card-hover), 0 0 28px var(--purple-glow); transform:translateY(-3px); }

/* KPI grid */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-value {
  font-size:28px; font-weight:800; font-family:var(--font-ui);
  background:linear-gradient(135deg, var(--t1) 40%, var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  line-height:1; animation:countUp 0.6s var(--ease-spring) both;
}
.kpi-label { font-size:11px; font-weight:600; color:var(--t4); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.kpi-delta { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:var(--r-full); margin-top:6px; display:inline-flex; align-items:center; gap:3px; font-family:var(--font-mono); }
.kpi-delta.up   { background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.kpi-delta.down { background:var(--s-danger-bg);  color:var(--accent-danger);  border:1px solid var(--s-danger-bd); }

/* Section label */
.sec-label {
  display:flex; align-items:center; gap:8px;
  font-size:10px; font-family:var(--font-mono);
  letter-spacing:1.2px; text-transform:uppercase; color:var(--t3);
  padding-bottom:8px; border-bottom:1px solid var(--b1); flex-wrap:wrap;
}
.sec-label > span { display:inline-flex; align-items:center; }
.sec-label > span svg { display:block; }
.must-view {
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  background:var(--s-danger-bg); border:1px solid var(--s-danger-bd);
  border-radius:var(--r-xs); color:var(--accent-danger); font-size:9px; font-weight:700;
  animation:blinkCritical 1.6s infinite;
}

/* Section header */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.section-title  { font-size:18px; font-weight:800; color:var(--t1); font-family:var(--font-ui); letter-spacing:0.2px; }
.section-subtitle { font-size:12px; color:var(--t4); font-family:var(--font-mono); letter-spacing:0.5px; }
.section-title-bar { display:inline-block; height:3px; border-radius:var(--r-full); background:linear-gradient(90deg, var(--purple-400), var(--orange-500)); margin-top:4px; min-width:40px; }

/* ══════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════ */
.form-input,
.form-group select, .form-group input, .form-group textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
select, textarea {
  width:100%; padding:9px 13px;
  background:var(--bg-3); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); color:var(--t1);
  font-family:var(--font-ui); font-size:12.5px;
  outline:none; transition:all 0.2s var(--ease-smooth); appearance:none;
}
.form-input:focus, .form-group select:focus, .form-group input:focus,
.form-group textarea:focus, select:focus, textarea:focus {
  border-color:var(--purple-400); box-shadow:0 0 0 3px rgba(139,92,246,0.14); background:var(--bg-4);
}
.form-input::placeholder, input::placeholder, textarea::placeholder { color:var(--t4); }
.form-input option, .form-group select option { background:var(--bg-3); }

/* ── Password field eye-icon toggle ── */
.pw-field-wrap { position:relative; width:100%; }
.pw-field-wrap .form-input { padding-right:38px; }
.pw-eye-btn {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  color:var(--t4); border-radius:var(--r-sm); transition:color .15s, background .15s;
}
.pw-eye-btn:hover { color:var(--t1); background:var(--s3); }
.pw-eye-btn:focus-visible { outline:2px solid var(--purple-400); outline-offset:1px; }

select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b5cf6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}

label, .form-label {
  display:block; font-size:11px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:0.9px; margin-bottom:6px; font-family:var(--font-ui);
}
.form-group { margin-bottom:14px; }
.form-row { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:16px; }
.form-row .form-group { flex:1; min-width:140px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.form-actions .btn-secondary,
.form-actions .btn-primary,
.form-actions button {
  border-radius: var(--r-md) !important;
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  min-width: 110px;
}

/* ══════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════ */
.tbl { width:100%; border-collapse:collapse; font-size:12px; font-family:var(--font-ui); }
.tbl thead tr { background:var(--bg-3); border-bottom:1px solid var(--border-default); }
.tbl th {
  padding:10px 14px; text-align:left;
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:1px; color:var(--t4); white-space:nowrap;
}
.tbl td { padding:10px 14px; border-bottom:1px solid var(--border-subtle); color:var(--t2); vertical-align:middle; }
.tbl tbody tr { transition:background 0.15s ease; }
.tbl tbody tr:hover { background:var(--purple-dim); }
.tbl tbody tr:last-child td { border-bottom:none; }
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; border-radius:var(--r-sm); }

/* Overdue row tints */
.overdue-critical td { background:rgba(239,68,68,0.04) !important; }
.overdue-warn     td { background:rgba(249,115,22,0.04) !important; }

/* ══════════════════════════════════════════════════════════════════════
   METRIC CARDS (mc-*)
   ══════════════════════════════════════════════════════════════════════ */
.mc {
  background:var(--bg-card); border:1px solid var(--border-subtle);
  border-radius:var(--r-xl); padding:16px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-card);
  transition:transform 0.2s var(--ease-smooth), border-color 0.2s; min-width:0;
}
.mc:hover { transform:translateY(-2px); border-color:var(--purple-bd); box-shadow:var(--shadow-card-hover), 0 0 20px var(--purple-glow); }
.mc[onclick], .mc[role="button"] { cursor:pointer; }
.mc[onclick]:active, .mc[role="button"]:active { transform:translateY(0) scale(0.98); }
.mc::after {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.mc-g::after { background:linear-gradient(90deg, #16a34a, var(--accent-success)); box-shadow:0 2px 10px rgba(34,197,94,0.25); }
.mc-r::after { background:linear-gradient(90deg, #dc2626, var(--accent-danger));  box-shadow:0 2px 10px rgba(239,68,68,0.25); }
.mc-a::after { background:linear-gradient(90deg, var(--orange-500), var(--orange-400)); box-shadow:0 2px 10px var(--orange-glow); }
.mc-b::after { background:linear-gradient(90deg, var(--purple-600), var(--purple-400)); box-shadow:0 2px 10px var(--purple-glow); }
.mc-v::after { background:linear-gradient(90deg, var(--purple-700), var(--purple-300)); box-shadow:0 2px 10px var(--purple-glow); }
.mc-label { font-size:10px; color:var(--t3); font-family:var(--font-mono); letter-spacing:0.6px; text-transform:uppercase; margin-bottom:7px; }
.mc-value { font-family:var(--font-display); font-size:26px; font-weight:900; letter-spacing:-1.2px; line-height:1; animation:countUp 0.5s var(--ease-snap) backwards; }
.mcv-g { color:var(--accent-success); }
.mcv-r { color:var(--accent-danger); }
.mcv-a { color:var(--orange-400); }
.mcv-b { color:var(--purple-300); }
.mcv-v { color:var(--purple-300); }
.mc-sub { font-size:11px; color:var(--t3); margin-top:6px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.mc-critical-badge {
  position:absolute; top:10px; right:10px;
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  background:var(--s-danger-bg); border:1px solid var(--s-danger-bd);
  border-radius:var(--r-xs); color:var(--accent-danger);
  font-size:9px; font-weight:700; font-family:var(--font-mono); animation:blinkCritical 1.6s infinite;
}

/* ══════════════════════════════════════════════════════════════════════
   ALERT CARDS (ac-*)
   ══════════════════════════════════════════════════════════════════════ */
.ac {
  border-radius:var(--r-md); padding:12px 14px; border-left:3px solid;
  display:flex; gap:10px; align-items:flex-start; transition:transform 0.15s var(--ease-smooth);
}
.ac:hover { transform:translateX(2px); }
.ac-r { background:var(--s-danger-bg);  border-left-color:var(--accent-danger); }
.ac-a { background:var(--orange-dim);   border-left-color:var(--orange-400); }
.ac-b { background:var(--purple-dim);   border-left-color:var(--purple-400); }
.ac-g { background:var(--s-success-bg); border-left-color:var(--accent-success); }
.ac-title   { font-size:13px; font-weight:700; margin-bottom:3px; font-family:var(--font-display); }
.ac-desc    { font-size:11px; color:var(--t2); line-height:1.55; }
.ac-actions { margin-left:auto; display:flex; flex-direction:column; gap:5px; align-items:flex-end; flex-shrink:0; }

/* Alert items */
.alert-item { padding:12px 16px; border-bottom:1px solid var(--border-subtle); transition:background 0.15s ease; }
.alert-item:hover { background:var(--b1); }
.alert-item:last-child { border-bottom:none; }
.alert-item.unread { border-left:3px solid var(--accent-danger); }

/* Dots */
.dot   { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-g { background:var(--accent-success); }
.dot-r { background:var(--accent-danger); }
.dot-a { background:var(--orange-400); }
.dot-b { background:var(--purple-400); }

/* ══════════════════════════════════════════════════════════════════════
   RING CHART
   ══════════════════════════════════════════════════════════════════════ */
.ring-wrap     { display:flex; align-items:center; gap:14px; }
.ring-svg-wrap { position:relative; width:64px; height:64px; flex-shrink:0; }
.ring-svg-wrap svg { transform:rotate(-90deg); display:block; }
.ring-center   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.ring-main-val { font-family:var(--font-display); font-size:22px; font-weight:900; }

/* Sparklines */
.sparkline { margin-top:10px; display:flex; align-items:flex-end; gap:3px; height:38px; }
.spark-bar { flex:1; border-radius:2px 2px 0 0; }

/* Bar chart */
.bar-chart { display:flex; align-items:flex-end; gap:5px; height:72px; margin-top:10px; }
.bc-col    { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.bc-bar    { width:100%; border-radius:3px 3px 0 0; transition:height 0.5s var(--ease-spring); min-height:4px; }
.bc-lbl    { font-size:9px; color:var(--t3); font-family:var(--font-mono); }

/* Stat boxes */
.stat-box       { text-align:center; padding:12px 8px; border-radius:var(--r-md); border:1px solid var(--b2); transition:transform 0.15s var(--ease-spring); min-width:0; }
.stat-box:hover { transform:scale(1.04); }
.stat-box-g     { background:var(--s-success-bg); border-color:var(--s-success-bd); }
.stat-box-r     { background:var(--s-danger-bg);  border-color:var(--s-danger-bd); }
.stat-box-a     { background:var(--orange-dim);   border-color:var(--orange-bd); }
.stat-box-b     { background:var(--purple-dim);   border-color:var(--purple-bd); }
.stat-box-num   { font-family:var(--font-display); font-size:22px; font-weight:900; line-height:1; }
.stat-box-lbl   { font-size:10px; color:var(--t3); margin-top:3px; }

/* Delay cards */
.delay-card     { padding:10px 12px; border-radius:var(--r-md); margin-bottom:8px; border:1px solid transparent; transition:transform 0.15s var(--ease-smooth); }
.delay-card:hover { transform:translateX(2px); }
.delay-card-r   { background:var(--s-danger-bg); border-color:var(--s-danger-bd); }
.delay-card-a   { background:var(--orange-dim);  border-color:var(--orange-bd); }

/* Avatar */
.av    { border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.av-sm { width:24px; height:24px; font-size:9px; }
.av-md { width:32px; height:32px; font-size:11px; }
.av-lg { width:42px; height:42px; font-size:14px; }

/* ══════════════════════════════════════════════════════════════════════
   CLIENT CARD & CHIPS
   ══════════════════════════════════════════════════════════════════════ */
.client-card {
  background:var(--bg-3); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:16px;
  transition:all 0.2s var(--ease-smooth); box-shadow:var(--shadow-card);
  position:relative; cursor:pointer; min-width:0;
}
.client-card:hover { transform:translateY(-2px); border-color:var(--purple-bd); box-shadow:var(--shadow-card-hover), 0 0 20px var(--purple-glow); }
.client-card.at-risk       { border-color:var(--orange-bd); }
.client-card.at-risk:hover { box-shadow:var(--shadow-glow-orange); }

.active-clients-strip {
  background:var(--bg-3); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:14px 18px; box-shadow:var(--shadow-card); min-width:0;
}
.acs-header   { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.acs-title    { font-family:var(--font-display); font-size:13px; font-weight:800; }
.acs-scroll   { display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none; }
.acs-scroll::-webkit-scrollbar { display:none; }
.acs-client-chip {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--bg-4); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); flex-shrink:0; cursor:pointer;
  transition:all 0.15s var(--ease-smooth); min-width:160px;
}
.acs-client-chip:hover { border-color:var(--purple-bd); transform:translateY(-1px); }
.acs-client-chip.chip-at-risk { border-color:var(--orange-bd); }
.acs-client-chip.chip-inactive { border-color:var(--s-danger-bd) !important; border-style:dashed !important; }
.acs-chip-av   { width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
.acs-chip-name { font-size:12px; font-weight:700; font-family:var(--font-ui); letter-spacing:0.2px; }
.acs-chip-pkg  { font-size:10px; color:var(--t3); margin-top:1px; }

/* ══════════════════════════════════════════════════════════════════════
   TEAM CARDS
   ══════════════════════════════════════════════════════════════════════ */
.team-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--b1); transition:background 0.12s;
}
.team-row:last-child { border:none; }
.team-row:hover { background:rgba(139,92,246,0.04); margin:0 -4px; padding:8px 4px; border-radius:var(--r-sm); }

.team-member-card {
  background:var(--bg-4); border:1px solid var(--border-subtle);
  border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:border-color 0.2s, box-shadow 0.2s; position:relative; overflow:hidden; min-width:0;
}
.team-member-card:hover          { border-color:var(--purple-bd); box-shadow:var(--shadow-card), 0 0 18px var(--purple-glow); }
.team-member-card.tmc-delayed    { border-color:var(--s-danger-bd); background:linear-gradient(135deg, var(--bg-4) 0%, rgba(239,68,68,0.04) 100%); }
.team-member-card.tmc-top        { border-color:var(--s-success-bd); background:linear-gradient(135deg, var(--bg-4) 0%, rgba(34,197,94,0.04) 100%); }
.tmc-header { display:flex; align-items:center; gap:10px; }
.tmc-info   { flex:1; min-width:0; }
.tmc-name   { font-family:var(--font-display); font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tmc-role   { font-size:10.5px; color:var(--t3); margin-top:1px; }
.tmc-stats       { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tmc-stat        { text-align:center; padding:6px 4px; background:var(--bg-5); border-radius:var(--r-sm); border:1px solid var(--b1); }
.tmc-stat-num    { font-family:var(--font-display); font-size:18px; font-weight:800; line-height:1; }
.tmc-stat-label  { font-size:9px; color:var(--t3); margin-top:2px; text-transform:uppercase; letter-spacing:0.5px; }
.tmc-progress-wrap  { display:flex; flex-direction:column; gap:4px; }
.tmc-progress-label { display:flex; justify-content:space-between; font-size:10px; color:var(--t3); }
.tmc-delay-banner {
  padding:6px 10px; background:var(--s-danger-bg); border:1px solid var(--s-danger-bd);
  border-radius:var(--r-sm); font-size:10.5px; color:var(--accent-danger);
  cursor:pointer; display:flex; align-items:center; gap:6px;
}
.tmc-delay-reason {
  display:none; padding:8px 10px;
  background:rgba(239,68,68,0.05); border:1px solid var(--s-danger-bd);
  border-radius:var(--r-sm); font-size:11px; color:var(--t2);
  animation:slideDown 0.2s var(--ease-snap);
}
.tmc-delay-reason.visible { display:block; }

/* Modern team management panel */
.team-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:28px; }
.team-stat-card {
  background:var(--bg-3); border:1px solid var(--border-subtle);
  border-radius:20px; padding:16px 12px; text-align:center; transition:all 0.2s;
}
.team-stat-card:hover { border-color:var(--purple-bd); transform:translateY(-2px); }
.team-stat-icon  { font-size:24px; margin-bottom:8px; opacity:0.8; }
.team-stat-value { font-family:var(--font-display); font-size:32px; font-weight:800; letter-spacing:-1px; line-height:1.2; }
.team-stat-label { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:0.6px; margin-top:6px; }
.team-stat-sub   { font-size:10px; color:var(--t4); margin-top:4px; }

.team-grid-modern { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-bottom:32px; }
.member-card-modern {
  background:var(--bg-glass); backdrop-filter:blur(12px);
  border:1px solid var(--border-subtle); border-radius:24px; padding:18px;
  transition:all 0.2s ease; display:flex; flex-direction:column; gap:14px;
}
.member-card-modern:hover { border-color:var(--purple-bd); transform:translateY(-3px); box-shadow:0 0 24px var(--purple-glow); }
.member-header    { display:flex; align-items:center; gap:14px; }
.member-avatar    { width:52px; height:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; flex-shrink:0; }
.member-info      { flex:1; }
.member-name      { font-family:var(--font-display); font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.member-role      { font-size:11px; color:var(--t3); margin-top:2px; }
.rank-medal       { background:linear-gradient(135deg, var(--orange-400), var(--orange-600)); color:#fff; font-size:10px; font-weight:800; padding:2px 8px; border-radius:40px; }
.member-stats-row { display:flex; justify-content:space-between; gap:12px; background:var(--bg-4); border-radius:16px; padding:8px; }
.member-stat-item { flex:1; text-align:center; }
.member-stat-number { font-size:20px; font-family:var(--font-display); font-weight:800; }
.member-stat-label  { font-size:9px; color:var(--t3); text-transform:uppercase; margin-top:3px; }
.progress-modern    { margin:6px 0; }
.progress-header    { display:flex; justify-content:space-between; font-size:10px; color:var(--t3); margin-bottom:5px; }
.progress-bar-bg    { height:5px; background:var(--bg-5); border-radius:10px; overflow:hidden; }
.progress-bar-fill  { height:100%; border-radius:10px; background:linear-gradient(90deg, var(--purple-400), var(--accent-success)); transition:width 0.6s cubic-bezier(0.22,1,0.36,1); }
.member-footer      { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.status-pill        { display:inline-flex; padding:3px 12px; border-radius:30px; font-size:10px; font-weight:700; }
.status-pill.green  { background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.status-pill.red    { background:var(--s-danger-bg);  color:var(--accent-danger);  border:1px solid var(--s-danger-bd); }
.status-pill.amber  { background:var(--orange-dim);   color:var(--orange-400);     border:1px solid var(--orange-bd); }

.table-modern { background:var(--bg-3); border-radius:24px; border:1px solid var(--border-subtle); overflow-x:auto; margin-top:20px; }
.table-modern table { width:100%; border-collapse:collapse; min-width:680px; }
.table-modern th { padding:14px 18px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--t3); border-bottom:1px solid var(--border-subtle); text-align:left; }
.table-modern td { padding:12px 18px; border-bottom:1px solid var(--b1); font-size:13px; vertical-align:middle; color:var(--t2); }
.table-modern tr:hover td { background:var(--purple-dim); }
.prog-table { width:80px; display:inline-block; margin-right:8px; }

/* Deliverable list */
.dl-item  { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--b1); }
.dl-item:last-child { border:none; }
.dl-icon  { width:36px; height:36px; border-radius:var(--r-md); background:var(--bg-4); border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.dl-name  { font-size:12.5px; font-weight:600; margin-bottom:2px; font-family:var(--font-display); }
.dl-meta  { font-size:10.5px; color:var(--t3); }

/* WA Toast */
#waToast {
  position:fixed; bottom:20px; right:20px;
  background:#0a3d33; border:1px solid #1a5e50; color:#25d366;
  border-radius:var(--r-lg); padding:14px 18px;
  font-size:12.5px; z-index:9990; max-width:260px;
  box-shadow:var(--shadow-float);
  transform:translateY(20px) scale(0.96); opacity:0;
  transition:all 0.3s var(--ease-spring); pointer-events:none;
}
#waToast.show { transform:translateY(0) scale(1); opacity:1; }

/* ══════════════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.80); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  z-index:10000; padding:16px; box-sizing:border-box; overflow-y:auto;
}
.task-modal, .client-modal {
  background:var(--bg-3); border-radius:var(--r-xl);
  width:100%; max-width:550px; max-height:90vh;
  overflow-y:auto; padding:24px;
  border:1px solid var(--border-default); box-shadow:var(--shadow-float);
  position:relative; animation:scaleIn 0.25s var(--ease-spring) both;
}
.task-modal-header, .client-modal-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border-subtle);
}
.task-modal-title, .client-modal-title { font-family:var(--font-display); font-size:18px; font-weight:800; margin:0; }
.modal-close-btn { background:none; border:none; font-size:20px; cursor:pointer; color:var(--t3); padding:0 8px; }
.modal-close-btn:hover { color:var(--accent-danger); }

.client-detail-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.80);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  padding:16px; backdrop-filter:blur(4px); animation:fadeIn 0.2s ease;
}
.client-detail-panel {
  background:var(--bg-2); border:1px solid var(--border-default);
  border-radius:var(--r-2xl); width:100%; max-width:880px; max-height:92vh;
  overflow-y:auto; box-shadow:var(--shadow-float);
  display:flex; flex-direction:column; animation:scaleIn 0.25s var(--ease-snap);
}
.cdp-header {
  padding:20px 24px 16px; border-bottom:1px solid var(--border-subtle);
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  position:sticky; top:0; background:var(--bg-2); z-index:1; flex-wrap:wrap;
}
.cdp-body { padding:20px 24px; display:flex; flex-direction:column; gap:16px; }

.service-chip {
  display:inline-flex; align-items:center; gap:5px; padding:5px 12px;
  background:var(--purple-dim); border:1px solid var(--purple-bd);
  border-radius:var(--r-full); font-size:11.5px; font-weight:600; color:var(--purple-300);
}

/* ══════════════════════════════════════════════════════════════════════
   CEO ALERT BAR
   ══════════════════════════════════════════════════════════════════════ */
#ceo-alert-bar, .ceo-alert-bar {
  background:linear-gradient(90deg, var(--bg-1), var(--bg-2));
  border-bottom:1px solid var(--orange-bd);
  padding:6px 20px; font-size:11.5px; color:var(--orange-400);
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono);
  box-shadow:0 2px 12px rgba(249,115,22,0.12);
}
@media (max-width:480px) {
  .ceo-alert-bar    { padding:0 8px; }
  .ceo-alert-inner  { gap:6px; }
  .ceo-pill         { font-size:11px; padding:5px 10px; gap:5px; }
  .ceo-pill-icon    { font-size:13px; }
  .ceo-modal        { width:96vw !important; max-height:92vh; border-radius:14px; }
  .ceo-modal-head   { padding:14px 16px 10px; }
  .ceo-form-row     { grid-template-columns:1fr !important; }
  .ceo-stat-card    { min-width:70px; padding:10px 8px; }
  .ceo-lead-card    { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (min-width:481px) and (max-width:768px) {
  .ceo-pill         { font-size:12px; padding:6px 12px; }
  .ceo-modal        { width:90vw !important; }
  .ceo-form-row     { grid-template-columns:1fr 1fr; }
}
@media (min-width:769px) and (max-width:1024px) {
  .ceo-modal        { width:78vw !important; }
}
@media (min-width:1025px) {
  .ceo-alert-inner  { flex-wrap:nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   EMPTY STATES / LOADING
   ══════════════════════════════════════════════════════════════════════ */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 20px; color:var(--t4); text-align:center; gap:8px; }
.empty-state-icon { font-size:32px; opacity:0.6; }
.empty-state-text { font-size:13px; font-weight:600; color:var(--t3); }
.empty-state-sub  { font-size:11px; color:var(--t4); font-family:var(--font-mono); }
.loading-text { font-size:12px; color:var(--t4); font-family:var(--font-mono); padding:20px; text-align:center; }
.skeleton { background:linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%); background-size:200% 100%; animation:shimmer 1.5s ease infinite; border-radius:var(--r-sm); }

/* Tooltips */
[data-tooltip] { position:relative; cursor:help; }
[data-tooltip]::after {
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--bg-4); border:1px solid var(--border-default); color:var(--t1);
  padding:5px 10px; border-radius:var(--r-sm); font-size:11px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 0.15s ease; z-index:1000; font-family:var(--font-ui);
}
[data-tooltip]:hover::after { opacity:1; }

/* Toast */
.toast { background:var(--bg-3); border:1px solid var(--border-default); border-radius:var(--r-lg); padding:12px 16px; box-shadow:var(--shadow-float); font-size:13px; font-family:var(--font-ui); animation:slideInRight 0.25s var(--ease-snap) both; display:flex; align-items:center; gap:10px; }
.toast-success { border-color:var(--s-success-bd); }
.toast-error   { border-color:var(--s-danger-bd); }
.toast-warning { border-color:var(--orange-bd); }

/* Stars */
.stars      { color:var(--orange-400); letter-spacing:2px; font-size:13px; }
.stars .empty { color:var(--bg-5); }

/* Score colours */
.score-excellent { color:var(--accent-success); }
.score-good      { color:var(--purple-300); }
.score-average   { color:var(--orange-400); }
.score-poor      { color:var(--accent-danger); }

/* Role accents */
.ceo-accent     { color:var(--orange-400); }
.manager-accent { color:var(--purple-300); }
.staff-accent   { color:var(--grey-300); }
.client-accent  { color:var(--accent-info); }

/* Performance score */
.value, .code { font-family:var(--font-mono); font-size:0.95em; color:var(--purple-200); }

/* ══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════════════════════════════════════════ */
body.login-page, .login-body {
  background:
    radial-gradient(circle at top left, rgba(139,92,246,0.18), transparent 40%),
    radial-gradient(circle at bottom right, rgba(249,115,22,0.16), transparent 40%),
    #07060e;
}
.login-wrapper { width:100%; max-width:480px; }
.login-card {
  position:relative; background:rgba(18,14,30,0.94); backdrop-filter:blur(20px);
  border:1px solid var(--border-default); border-radius:var(--r-2xl);
  padding:40px 32px; box-shadow:var(--shadow-float), 0 0 50px var(--purple-glow); overflow:hidden;
}
.login-card::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:200px; height:200px;
  background:radial-gradient(circle, rgba(139,92,246,0.25), transparent 70%);
  border-radius:50%; filter:blur(20px); pointer-events:none;
}
.login-card::after {
  content:''; position:absolute; bottom:-100px; left:-100px;
  width:220px; height:220px;
  background:radial-gradient(circle, rgba(249,115,22,0.20), transparent 70%);
  border-radius:50%; filter:blur(25px); pointer-events:none;
}
.logo-title {
  font-family:var(--font-display); font-size:32px; font-weight:900; letter-spacing:1.5px;
  background:linear-gradient(90deg, var(--orange-400), var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-sub { color:var(--t4); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-family:var(--font-mono); }
.toggle-btn {
  flex:1; padding:13px; border-radius:var(--r-lg);
  font-size:13px; font-weight:700; cursor:pointer; color:var(--t3);
  background:var(--b1); transition:all 0.25s ease;
  border:1px solid var(--border-subtle); font-family:var(--font-ui);
}
.toggle-btn.active { color:#fff; background:linear-gradient(135deg, var(--purple-500), var(--orange-500)); box-shadow:0 0 20px var(--purple-glow); border-color:var(--purple-bd); }
.login-btn {
  width:100%; height:52px; border:none; border-radius:var(--r-lg); margin-top:10px;
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  color:white; font-size:14px; font-weight:800; letter-spacing:0.8px;
  cursor:pointer; transition:all 0.3s ease; font-family:var(--font-ui);
  box-shadow:0 4px 20px var(--purple-glow);
}
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--purple-glow); }
.error-box {
  background:var(--s-danger-bg); border:1px solid var(--s-danger-bd); color:#fca5a5;
  padding:12px 16px; border-radius:var(--r-md); margin-bottom:18px; font-size:12.5px;
}
.cred-row {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--r-lg); margin-bottom:10px;
  background:var(--b1); border:1px solid var(--border-subtle);
  cursor:pointer; transition:all 0.2s ease;
}
.cred-row:hover { transform:translateY(-2px); border-color:var(--purple-bd); background:var(--purple-dim); }
.cred-role { min-width:72px; text-align:center; padding:5px 10px; border-radius:var(--r-full); font-size:9px; font-weight:800; letter-spacing:1.2px; color:#fff; }
.cred-role.ceo     { background:linear-gradient(135deg, var(--orange-500), var(--orange-600)); }
.cred-role.manager { background:linear-gradient(135deg, var(--purple-500), var(--purple-600)); }
.cred-role.staff   { background:linear-gradient(135deg, var(--grey-600), var(--grey-700)); }
.cred-info { flex:1; color:var(--t1); font-size:12.5px; font-weight:600; }
.cred-hint { color:var(--t4); font-size:10.5px; font-family:var(--font-mono); }
.demo-title { color:var(--t2); font-size:12px; margin-bottom:12px; text-align:center; letter-spacing:1px; font-weight:700; text-transform:uppercase; }

/* ══════════════════════════════════════════════════════════════════════
   SATISFACTION PAGE (inline styles)
   ══════════════════════════════════════════════════════════════════════ */
.sat-page { background:var(--bg-base); min-height:100vh; font-family:var(--font-ui); color:var(--t1); overflow-x:hidden; }
.sat-topbar {
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; padding:14px 24px;
  position:sticky; top:0; z-index:100;
  background:var(--bg-glass); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-subtle);
}
.sat-topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--purple-bd) 35%, var(--orange-bd) 65%, transparent 100%);
}
.sat-page-title {
  font-size:18px; font-weight:800; letter-spacing:0.3px;
  background:linear-gradient(90deg, var(--orange-400), var(--purple-300));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.btn-back-dash {
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px;
  border-radius:var(--r-full); background:var(--bg-3); border:1px solid var(--border-subtle);
  color:var(--t2); text-decoration:none; font-size:11.5px; font-weight:700; transition:all 0.2s ease;
}
.btn-back-dash:hover { border-color:var(--orange-bd); color:var(--orange-400); box-shadow:0 0 10px var(--orange-glow); }
.sat-bell {
  position:relative; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); cursor:pointer; transition:all 0.2s ease; font-size:15px;
}
.sat-bell:hover { border-color:var(--orange-bd); box-shadow:0 0 12px var(--orange-glow); }
.sat-bell-count {
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:var(--r-full); background:var(--accent-danger); color:#fff;
  font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 8px rgba(239,68,68,0.5);
}
.sat-user-av {
  width:34px; height:34px; border-radius:var(--r-md);
  background:linear-gradient(135deg, var(--purple-500), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; color:#fff; box-shadow:0 0 10px var(--purple-glow);
}
.sat-alert-panel {
  position:fixed; top:var(--topbar-h, 62px); right:20px;
  width:340px; max-height:60vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid var(--border-default);
  border-radius:var(--r-xl); box-shadow:var(--shadow-float); z-index:200;
  animation:slideDown 0.2s var(--ease-snap) both;
}
.sap-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border-subtle);
  position:sticky; top:0; background:var(--bg-2);
}
.sap-title { font-size:13px; font-weight:800; color:var(--accent-danger); }
.sat-tabs {
  display:flex; gap:4px; padding:10px 20px 0;
  border-bottom:1px solid var(--border-subtle); background:var(--bg-1);
  flex-wrap:wrap; overflow-x:auto; scrollbar-width:none;
}
.sat-tabs::-webkit-scrollbar { display:none; }
.sat-tab {
  padding:9px 16px; border:none; background:none; color:var(--t3);
  font-size:12.5px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent;
  transition:all 0.2s ease; white-space:nowrap; font-family:var(--font-ui); letter-spacing:0.2px;
}
.sat-tab:hover { color:var(--t1); }
.sat-tab.active { color:var(--purple-300); border-bottom-color:var(--purple-400); }
.sat-panel { display:none; }
.sat-panel.active { display:block; animation:fadeUp 0.3s ease; }
.sat-wrap { max-width:1200px; margin:0 auto; padding:18px 20px; display:flex; flex-direction:column; gap:16px; }
.sat-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:18px; }
.sat-kpi {
  background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl);
  padding:16px; transition:all 0.25s var(--ease-smooth); animation:fadeUp 0.4s var(--ease-smooth) both;
  position:relative; overflow:hidden;
}
.sat-kpi::before { content:''; position:absolute; top:-20px; right:-20px; width:70px; height:70px; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%); pointer-events:none; }
.sat-kpi:hover { border-color:var(--purple-bd); box-shadow:0 0 20px var(--purple-glow); transform:translateY(-2px); }
.sat-kpi-value, .sat-kpi-val { font-size:26px; font-weight:800; font-family:var(--font-ui); color:var(--t1); line-height:1; }
.sat-kpi-label, .sat-kpi-lbl { font-size:10.5px; color:var(--t4); text-transform:uppercase; letter-spacing:1px; margin-top:6px; font-weight:600; }
.sat-kpi-sub    { margin-top:4px; font-size:10px; color:var(--t4); }
.sat-kpi-icon   { font-size:24px; margin-bottom:8px; opacity:0.8; }
.sat-kpi-loading, .sat-kpi-alert { border-color:rgba(239,68,68,0.3); background:rgba(239,68,68,0.06); }
.sat-kpi-loading { color:var(--t4); font-size:12px; padding:14px; text-align:center; font-family:var(--font-mono); }
.sat-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.sat-chart-wrap { padding:10px 4px 4px; min-height:180px; }

/* Risk row */
.sat-risk-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 10px; border-bottom:1px solid var(--border-subtle); }
.srr-name    { font-weight:800; color:var(--t1); }
.srr-warn    { font-size:11px; color:var(--orange-400); margin-top:3px; }
.srr-score   { font-size:20px; font-weight:900; }
.score-low   { color:var(--accent-danger); }
.score-mid   { color:var(--orange-400); }

/* Review card */
.sat-review-card { background:var(--bg-2); border:1px solid var(--border-subtle); border-radius:var(--r-xl); padding:18px; margin-bottom:14px; transition:.25s ease; }
.sat-review-card:hover { border-color:var(--purple-bd); box-shadow:0 0 20px var(--purple-glow); }
.review-low { border-left:3px solid var(--accent-danger); }
.src-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.src-client  { font-weight:900; font-size:15px; color:var(--t1); }
.src-date    { font-size:10px; color:var(--t4); margin-top:4px; }
.src-score   { font-size:26px; font-weight:900; background:linear-gradient(90deg, var(--orange-400), var(--purple-300)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.src-message  { margin-top:10px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:13px; line-height:1.6; color:var(--t2); }
.src-complaint{ margin-top:10px; padding:8px 12px; border-radius:var(--r-md); background:var(--s-danger-bg); color:var(--accent-danger); font-size:11px; border:1px solid var(--s-danger-bd); }
.src-actions  { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:14px; }

/* Alert row */
.sat-alert-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border-subtle); }
.alert-read    { opacity:.55; }

/* ══════════════════════════════════════════════════════════════════════
   CLIENT PORTAL
   ══════════════════════════════════════════════════════════════════════ */
.portal-page {
  background:
    radial-gradient(ellipse 60% 40% at 5% 0%, rgba(139,92,246,0.09), transparent 50%),
    radial-gradient(ellipse 40% 40% at 95% 100%, rgba(249,115,22,0.08), transparent 50%),
    var(--bg-base);
}
.portal-topbar, .client-topbar {
  background:var(--bg-glass); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-subtle);
  padding:0 20px; height:56px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:100;
}
.portal-hero {
  background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-1) 100%);
  border-bottom:1px solid var(--border-subtle); padding:28px 32px 0; position:relative; overflow:hidden;
}
.portal-hero::before {
  content:''; position:absolute; top:-60px; right:-60px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%); pointer-events:none;
}
.client-avatar-lg { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; letter-spacing:-0.5px; flex-shrink:0; color:#fff; }
.portal-header-row { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.portal-meta h1 { font-size:26px; font-weight:700; color:var(--t1); margin:0 0 4px; }
.portal-meta p  { font-size:13px; color:var(--t3); margin:0; }
.portal-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:0.4px; margin-left:10px; vertical-align:middle; }
.portal-badge.g { background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.portal-badge.r { background:var(--s-danger-bg);  color:var(--accent-danger);  border:1px solid var(--s-danger-bd); }
.portal-badge.a { background:var(--orange-dim);   color:var(--orange-400);     border:1px solid var(--orange-bd); }

.portal-tabs { display:flex; gap:2px; border-bottom:none; margin-top:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.portal-tabs::-webkit-scrollbar { display:none; }
.portal-tab { padding:10px 20px; border-radius:10px 10px 0 0; font-size:13px; font-weight:600; color:var(--t3); cursor:pointer; border:none; background:transparent; transition:all 0.2s; position:relative; white-space:nowrap; }
.portal-tab:hover { color:var(--t2); }
.portal-tab.active { color:var(--purple-300); background:rgba(139,92,246,0.10); }
.portal-tab .tab-count { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; font-size:10px; font-weight:700; background:var(--purple-dim); color:var(--purple-300); margin-left:6px; }
.portal-tab.active .tab-count { background:var(--purple-400); color:#fff; }

.portal-panel { display:none; padding:28px 32px; }
.portal-panel.active { display:block; animation:fadeUp 0.3s var(--ease-snap); }

.portal-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:28px; }
.pstat { background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:14px; padding:16px 18px; text-align:center; }
.pstat .num { font-size:28px; font-weight:700; font-family:var(--font-mono); }
.pstat .lbl { font-size:11px; color:var(--t4); margin-top:4px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.pstat.blue   .num { color:var(--purple-300); }
.pstat.green  .num { color:var(--accent-success); }
.pstat.yellow .num { color:var(--orange-400); }
.pstat.red    .num { color:var(--accent-danger); }

.portal-task-row { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:12px; background:var(--bg-3); border:1px solid var(--border-subtle); margin-bottom:10px; transition:all 0.2s; animation:fadeUp 0.3s ease forwards; }
.portal-task-row:hover { border-color:var(--purple-bd); transform:translateX(3px); }
.portal-task-title { flex:1; font-size:14px; font-weight:500; color:var(--t2); }
.portal-task-title.overdue { color:var(--accent-danger); }

.deliv-card { background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:14px; padding:18px 20px; margin-bottom:12px; transition:all 0.2s; }
.deliv-card:hover { border-color:var(--purple-bd); }
.deliv-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.deliv-title  { font-size:15px; font-weight:600; color:var(--t1); }
.deliv-type   { font-size:11px; color:var(--t4); margin-top:3px; }
.deliv-prog   { margin-top:14px; }
.prog-bar-bg  { height:6px; background:var(--bg-4); border-radius:99px; overflow:hidden; }
.prog-bar-fill{ height:100%; border-radius:99px; transition:width 1s ease; }
.prog-label   { display:flex; justify-content:space-between; font-size:11px; color:var(--t4); margin-top:5px; }

.approval-card  { background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:14px; padding:18px 20px; margin-bottom:12px; }
.approval-title { font-size:14px; font-weight:600; color:var(--t1); }
.approval-notes { font-size:12px; color:var(--t4); margin-top:6px; }
.approval-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; flex-wrap:wrap; gap:8px; }

.issue-card         { background:var(--bg-3); border-left:3px solid var(--accent-danger); border-radius:0 12px 12px 0; padding:14px 18px; margin-bottom:10px; }
.issue-card.critical{ border-color:var(--accent-danger); }
.issue-card.high    { border-color:var(--orange-400); }
.issue-card.medium  { border-color:var(--orange-300); }
.issue-card.low     { border-color:var(--accent-success); }
.issue-title { font-size:14px; font-weight:600; color:var(--t1); }
.issue-desc  { font-size:12px; color:var(--t4); margin-top:4px; }

.portal-back { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--t3); text-decoration:none; padding:8px 14px; border-radius:10px; background:var(--b1); border:1px solid var(--border-subtle); transition:all 0.2s; margin-bottom:20px; }
.portal-back:hover { color:var(--purple-300); background:var(--purple-dim); border-color:var(--purple-bd); }

.portal-logout-btn { display:inline-block; margin-top:12px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--accent-danger); background:var(--s-danger-bg); border:1px solid var(--s-danger-bd); border-radius:20px; text-decoration:none; transition:all 0.2s; text-align:center; }
.portal-logout-btn:hover { background:rgba(239,68,68,0.20); color:#ff8a8a; }

.progress-ring-circle { transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); transform:rotate(-90deg); transform-origin:50% 50%; }

.filter-pill { padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; background:var(--b1); border:1px solid var(--border-subtle); color:var(--t3); transition:all 0.2s; }
.filter-pill:hover { color:var(--t2); }
.filter-pill.active { background:var(--purple-dim); border-color:var(--purple-bd); color:var(--purple-300); }

.btn-danger-outline { padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; background:var(--s-danger-bg); border:1px solid var(--s-danger-bd); color:var(--accent-danger); cursor:pointer; transition:all 0.2s; }
.btn-danger-outline:hover { background:rgba(239,68,68,0.18); }

.resp-grid-1 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* ══════════════════════════════════════════════════════════════════════
   CONTENT CALENDAR & UPLOAD
   ══════════════════════════════════════════════════════════════════════ */
.upload-drop-zone { border:2px dashed var(--purple-bd); border-radius:16px; background:var(--bg-3); padding:28px 20px; text-align:center; transition:all 0.25s ease; cursor:pointer; }
.upload-drop-zone.dz-active { border-color:var(--purple-400); background:var(--purple-dim); transform:scale(0.98); }
.udz-icon { font-size:38px; margin-bottom:8px; }
.udz-text { font-size:13px; font-weight:500; color:var(--t3); }
.udz-sub  { font-size:11px; color:var(--t4); margin:6px 0; }
.udz-browse-btn { display:inline-block; margin-top:8px; padding:6px 16px; background:var(--purple-dim); border:1px solid var(--purple-bd); border-radius:30px; font-size:12px; font-weight:600; color:var(--purple-300); cursor:pointer; }
.udz-filename { font-size:11px; color:var(--purple-300); margin-top:10px; word-break:break-all; }

.calendar-card { background:var(--bg-2); border:1px solid var(--border-subtle); border-radius:16px; padding:16px; transition:all 0.2s ease; }
.calendar-card:hover { border-color:var(--purple-bd); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.calendar-title  { font-size:14px; font-weight:700; color:var(--t1); margin-bottom:4px; }
.calendar-meta   { font-size:11px; color:var(--purple-300); margin-bottom:8px; }
.calendar-desc   { font-size:11px; color:var(--t3); margin-bottom:12px; line-height:1.4; }
.calendar-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.calendar-actions button, .calendar-actions a { background:var(--b1); border:1px solid var(--border-subtle); border-radius:24px; padding:5px 12px; font-size:11px; font-weight:600; color:var(--t3); cursor:pointer; transition:all 0.2s; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.calendar-actions button:hover, .calendar-actions a:hover { background:var(--purple-dim); border-color:var(--purple-bd); color:var(--purple-300); }
.calendar-actions .delete-btn:hover { background:var(--s-danger-bg); border-color:var(--s-danger-bd); color:var(--accent-danger); }

.preview-modal .task-modal { max-width:90vw; width:auto; max-height:90vh; }
.preview-iframe { width:100%; height:70vh; border:none; border-radius:8px; }
.preview-img    { max-width:100%; max-height:70vh; border-radius:8px; }

/* ══════════════════════════════════════════════════════════════════════
   FEEDBACK & RATINGS
   ══════════════════════════════════════════════════════════════════════ */
.feedback-section { background:var(--bg-2); border:1px solid var(--border-subtle); border-radius:20px; padding:28px 24px; margin-top:24px; }
.feedback-section-title { font-size:15px; font-weight:700; color:var(--t1); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.feedback-section-sub   { font-size:12px; color:var(--t4); margin-bottom:22px; }

.rating-row { display:flex; gap:4px; flex-wrap:nowrap; margin-bottom:20px; }
.rating-btn { background:none; border:none; cursor:pointer; font-size:30px; line-height:1; padding:2px 3px; color:var(--bg-5); transition:transform 0.15s ease, color 0.15s ease, filter 0.15s ease; outline:none; -webkit-tap-highlight-color:transparent; }
.rating-btn:hover, .rating-btn.hovered { color:var(--orange-400); transform:scale(1.22); }
.rating-btn.selected { color:var(--orange-400); filter:drop-shadow(0 0 5px rgba(249,115,22,0.55)); transform:scale(1.15); }

.feedback-textarea { width:100%; box-sizing:border-box; background:var(--bg-3); border:1.5px solid var(--border-subtle); border-radius:14px; padding:14px 16px; color:var(--t1); font-size:13px; font-family:inherit; line-height:1.6; resize:vertical; min-height:96px; transition:border-color 0.2s ease; outline:none; margin-bottom:14px; }
.feedback-textarea:focus { border-color:var(--purple-400); background:var(--bg-4); }
.feedback-textarea::placeholder { color:var(--t4); }

.feedback-submit-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; background:var(--purple-500); border:none; border-radius:30px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all 0.18s ease; }
.feedback-submit-btn:hover:not(:disabled) { background:var(--purple-400); transform:translateY(-1px); box-shadow:0 4px 16px var(--purple-glow); }
.feedback-submit-btn:disabled { opacity:0.55; cursor:not-allowed; }
.feedback-submit-btn .btn-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; }

.feedback-history-title { font-size:12px; font-weight:700; color:var(--t4); letter-spacing:0.08em; text-transform:uppercase; margin:24px 0 12px; }
.feedback-history-list  { display:flex; flex-direction:column; gap:10px; }
.feedback-history-item  { background:var(--bg-3); border:1px solid var(--border-subtle); border-radius:14px; padding:14px 16px; display:flex; gap:14px; align-items:flex-start; transition:border-color 0.2s; }
.feedback-history-item:hover { border-color:var(--purple-bd); }
.feedback-rating-badge  { flex-shrink:0; width:54px; min-height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; }
.fb-badge-red       { background:var(--s-danger-bg);  color:var(--accent-danger);  border:1px solid var(--s-danger-bd); }
.fb-badge-orange    { background:var(--orange-dim);   color:var(--orange-400);     border:1px solid var(--orange-bd); }
.fb-badge-lightgreen{ background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.fb-badge-green     { background:var(--s-success-bg); color:var(--accent-success); border:1px solid var(--s-success-bd); }
.feedback-history-text  { flex:1; min-width:0; }
.feedback-history-text p{ font-size:13px; color:var(--t3); margin:0 0 6px; line-height:1.5; }
.feedback-history-date  { font-size:10px; color:var(--t4); }

/* Image preview */
.cal-thumb-wrap { width:100%; height:140px; overflow:hidden; border-radius:12px; margin-bottom:12px; background:var(--bg-3); position:relative; cursor:pointer; }
.cal-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.35s ease; display:block; }
.cal-thumb-wrap:hover img { transform:scale(1.06); }
.cal-thumb-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); transition:background 0.25s ease; display:flex; align-items:center; justify-content:center; border-radius:12px; }
.cal-thumb-wrap:hover .cal-thumb-overlay { background:rgba(0,0,0,0.35); }
.cal-thumb-overlay-icon { font-size:28px; opacity:0; transform:scale(0.8); transition:opacity 0.2s ease, transform 0.2s ease; }
.cal-thumb-wrap:hover .cal-thumb-overlay-icon { opacity:1; transform:scale(1); }
.cal-thumb-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--t4); font-size:32px; }
.cal-thumb-placeholder span { font-size:11px; color:var(--t4); }

.preview-modal-body { display:flex; align-items:center; justify-content:center; padding:8px 0 4px; min-height:220px; }
.preview-img-enhanced { max-width:100%; max-height:72vh; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.6); display:block; animation:previewFadeIn 0.25s ease; }
.preview-iframe-enhanced { width:75vw; max-width:900px; height:72vh; border:none; border-radius:12px; background:#fff; animation:previewFadeIn 0.25s ease; }
.preview-no-file { text-align:center; padding:32px 20px; color:var(--t4); }
.preview-no-file .no-file-icon { font-size:48px; margin-bottom:12px; }
.preview-no-file p { font-size:13px; margin-bottom:14px; }

/* Attendance / staff cards */
.attendance-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl); padding:16px; transition:all 0.25s ease; }
.attendance-card:hover { border-color:var(--purple-bd); box-shadow:0 0 20px var(--purple-glow); transform:translateY(-2px); }
.attendance-row td { font-family:var(--font-mono); font-size:11.5px; }

.staff-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl); padding:16px; transition:all 0.25s ease; }
.staff-card:hover { border-color:var(--orange-bd); box-shadow:0 0 20px var(--orange-glow); transform:translateY(-2px); }

canvas { max-width:100%; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 1280px+
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:1280px) {
  :root { --sidebar-w:256px; }
  .g4 { grid-template-columns:repeat(4,1fr); }
  .g3 { grid-template-columns:repeat(3,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024–1279px
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1279px) and (min-width:1024px) {
  :root { --sidebar-w:220px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .kpi-grid { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — 768–1023px (tablet)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px) and (min-width:768px) {
  :root { --sidebar-w:220px; }
  .g4   { grid-template-columns:repeat(2,1fr); }
  .g2-3 { grid-template-columns:1fr; }
  .g3-2 { grid-template-columns:1fr; }
  .sat-grid-2 { grid-template-columns:1fr; }
  .page-wrap { padding:14px 16px; }
  .mc { padding:13px; }
  .resp-grid-1 { grid-template-columns:1fr; }
  .portal-hero  { padding:20px 20px 0; }
  .portal-panel { padding:20px; }
}

/* Tablet portrait (768–900px) — use hamburger like mobile */
@media (max-width:900px) and (min-width:768px) {
  .hamburger { display:flex !important; }

  #topbar {
    display:flex !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 16px;
    gap:10px;
    align-items:center;
    background:var(--bg-glass);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-subtle);
    position:sticky;
    top:0;
    z-index:100;
  }

  #sidebar {
    position:fixed; top:0; left:0;
    height:100dvh; max-height:100dvh;
    width:280px; z-index:150;
    transform:translateX(-100%);
    box-shadow:4px 0 32px rgba(0,0,0,0.5);
  }
  #sidebar.open { transform:translateX(0); }

  #main { width:100% !important; flex:1 1 100% !important; margin-left:0 !important; }

  .sb-logo-text, .rp-label, .nav-label,
  .nav-badge, .sb-user-name, .sb-user-clock { display:block !important; }
  .sb-role-pill  { justify-content:flex-start; }
  .sb-user       { justify-content:flex-start; }
  .sb-switch-btn { justify-content:space-between; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — <768px (mobile)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:767px) {
  .hamburger { display:flex !important; }

  /* Show topbar on mobile to hold the hamburger */
  #topbar {
    display:flex !important;
    height:var(--topbar-h, 52px) !important;
    min-height:52px !important;
    padding:0 12px;
    gap:8px;
    align-items:center;
    background:var(--bg-glass);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border-subtle);
    position:sticky;
    top:0;
    z-index:100;
  }

  :root { --topbar-h: 52px; }

  #sidebar {
    position:fixed; top:0; left:0;
    height:100dvh; max-height:100dvh;
    width:270px; z-index:150;
    transform:translateX(-100%);
    box-shadow:4px 0 32px rgba(0,0,0,0.6);
  }
  #sidebar.open { transform:translateX(0); }

  .sb-logo-text, .rp-label, .nav-label,
  .nav-badge, .sb-user-name, .sb-user-clock { display:block !important; }
  .sb-role-pill  { justify-content:flex-start; }
  .sb-user       { justify-content:flex-start; }
  .nav-item      { justify-content:flex-start; padding:10px 12px; min-height:44px; font-size:13px; }
  .sb-switch-btn { justify-content:space-between; }

  #main { width:100% !important; flex:1 1 100% !important; margin-left:0 !important; }

  .tb-title { font-size:13px; }
  .tb-date  { display:none; }

  .g4, .g3, .g2, .g2-3, .g3-2 { grid-template-columns:1fr !important; }
  .resp-grid-1  { grid-template-columns:1fr !important; }
  .g4.stat-grid { grid-template-columns:repeat(2,1fr) !important; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .sat-grid-2 { grid-template-columns:1fr; }

  .page-wrap { padding:10px 12px; gap:12px; }
  .card { padding:12px; }
  .mc   { padding:12px; }
  .mc-value { font-size:22px; }

  .tbl { min-width:480px; }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  .ac { flex-wrap:wrap; }
  .ac-actions { margin-left:0; flex-direction:row; flex-wrap:wrap; }
  .ring-wrap { flex-direction:column; align-items:flex-start; }

  .task-modal, .client-modal { width:100%; max-width:100%; padding:16px; }
  .form-row { flex-direction:column; gap:0; }
  .form-row .form-group { min-width:100%; }

  .client-detail-overlay { padding:0; align-items:flex-end; }
  .client-detail-panel   { max-width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:95vh; }
  .cdp-header { padding:16px; }
  .cdp-body   { padding:14px 16px; }

  .portal-hero  { padding:16px 16px 0; }
  .portal-panel { padding:16px; }
  .portal-stats { grid-template-columns:repeat(2,1fr); }
  .portal-header-row { flex-wrap:wrap; gap:12px; }
  .portal-tab   { font-size:11px; padding:8px 12px; }

  .acs-scroll { gap:8px; }
  .acs-client-chip { min-width:140px; }
  .team-member-card { padding:12px; }
  .tmc-stat-num { font-size:16px; }
  .prog-track { min-width:60px; }

  .sat-topbar { padding:12px 16px; }
  .sat-page-title { font-size:15px; }
  .sat-tabs { padding:8px 14px 0; gap:2px; }
  .sat-tab { padding:7px 12px; font-size:12px; }
  .sat-wrap { padding:14px; }
  .sat-kpi-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .sat-alert-panel { right:12px; left:12px; width:auto; top:60px; }

  .login-card { padding:28px 22px; border-radius:var(--r-2xl); }
  .logo-title { font-size:26px; }

  .team-grid-modern { grid-template-columns:1fr; }
  .team-stats-row   { grid-template-columns:repeat(2,1fr); }

  .preview-iframe-enhanced { width:92vw; height:60vh; }
  .preview-img-enhanced    { max-height:60vh; }
  .feedback-section { padding:18px 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤480px (small mobile)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  :root { --topbar-h:52px; }
  html { font-size:11.5px; }

  #content { padding:10px; }
  .mc-value     { font-size:20px; }
  .card-title   { font-size:12px; }
  .stat-box-num { font-size:18px; }
  .btn          { padding:6px 12px; font-size:11.5px; }
  .page-wrap    { padding:8px 10px; gap:10px; }
  .g4, .g3      { grid-template-columns:repeat(2,1fr) !important; }
  #sidebar      { width:80vw; }
  .tbl th, .tbl td { font-size:11px; padding:6px 7px; }
  .nav-section  { padding:8px 12px 2px; }
  .task-modal-title, .client-modal-title { font-size:15px; }

  .kpi-grid     { grid-template-columns:repeat(2,1fr); gap:10px; }
  .sat-kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .sat-topbar   { gap:8px; padding:10px 12px; }
  .sat-page-title { font-size:13px; }
  .sat-tab      { padding:6px 10px; font-size:11.5px; }
  .sat-kpi-value, .sat-kpi-val { font-size:22px; }
  .sat-alert-panel { left:10px; right:10px; width:auto; }
  .sat-wrap { padding:10px; }

  .portal-stats { grid-template-columns:repeat(2,1fr); }
  .acs-client-chip { min-width:130px; }

  .section-title { font-size:15px; }
  .modal, .modal-box { border-radius:var(--r-xl); }

  .rating-btn { font-size:24px; padding:2px; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤375px
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:375px) {
  body { font-size:12px; }
  .tb-title   { font-size:12px; }
  .card-title { font-size:11px; }
  .mc-value   { font-size:18px; }
  .stat-box-num { font-size:16px; }
  .btn        { padding:4px 8px; font-size:10px; }
  .tbl th, .tbl td { font-size:10px; padding:5px 6px; }
  .ring-svg-wrap { width:52px; height:52px; }
  .ring-main-val { font-size:18px; }
  .portal-meta h1 { font-size:20px; }
  .rating-btn { font-size:20px; padding:1px; }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — ≤320px
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:320px) {
  .page-wrap { padding:6px 8px; }
  .card      { padding:10px; }
  .task-modal, .client-modal { padding:12px; }
  .task-modal-title, .client-modal-title { font-size:14px; }
  .btn        { padding:5px 10px; font-size:10px; }
  .tbl th, .tbl td { font-size:9px; padding:4px 5px; }
  .stat-box-num { font-size:14px; }
  .mc-value   { font-size:16px; }
  #sidebar    { width:90vw; }
  .portal-tab { font-size:10px; padding:6px 10px; }
  .g4, .g3   { grid-template-columns:1fr !important; }
}

@media (max-width:640px) {
  .rating-row { gap:6px; }
  .preview-iframe-enhanced { width:92vw; height:60vh; }
  .preview-img-enhanced    { max-height:60vh; }
}
@media (max-width:400px) {
  .rating-btn { width:30px; height:30px; font-size:11px; border-radius:8px; }
}
/* ══════════════════════════════════════════════════════════════════════
   SALARY + DAILY REPORT + DOWNLOAD MODULE — Brand Maker CRM
   ══════════════════════════════════════════════════════════════════════ */

/* ── Salary Cards ── */
.salary-card {
  background: rgba(139,92,246,.07);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.salary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #f97316);
}
.salary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(139,92,246,.2);
}
.salary-card-icon  { font-size: 20px; margin-bottom: 6px; }
.salary-card-val   {
  font-size: 22px; font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: -1px; line-height: 1;
}
.salary-card-label {
  font-size: 9px; color: var(--t4);
  margin-top: 4px; text-transform: uppercase;
  letter-spacing: .6px; font-family: var(--font-mono);
}

/* ── Salary Table ── */
.salary-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; font-family: var(--font-ui);
  min-width: 620px;
}
.salary-table thead { background: rgba(139,92,246,.1); }
.salary-table th {
  padding: 10px 14px; text-align: left;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--t4); border-bottom: 1px solid rgba(139,92,246,.2);
  white-space: nowrap; font-family: var(--font-mono);
}
.salary-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(139,92,246,.08);
  vertical-align: middle;
}
.salary-table tbody tr {
  transition: background .12s;
}
.salary-table tbody tr:hover td {
  background: rgba(139,92,246,.05);
}
.salary-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid rgba(139,92,246,.15);
}
.salary-table-wrap::-webkit-scrollbar { height: 4px; }
.salary-table-wrap::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8b5cf6, #f97316);
  border-radius: 99px;
}

/* ── Report Modal ── */
.report-modal-backdrop {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn .2s ease;
}
.report-modal {
  background: var(--s2, #0c1024);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 20px;
  width: 100%; max-width: 520px;
  padding: 28px;
  box-shadow: 0 0 60px rgba(139,92,246,.25), 0 24px 80px rgba(0,0,0,.6);
  animation: bm-slideUp .3s cubic-bezier(.34,1.56,.64,1);
}
.report-modal-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 900;
  background: linear-gradient(135deg, #a78bfa, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.report-textarea {
  width: 100%; padding: 10px 14px;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.2);
  border-radius: 10px;
  color: var(--t1, #f5f0ff);
  font-size: 12.5px; outline: none;
  resize: vertical; font-family: inherit;
  box-sizing: border-box;
  transition: border-color .15s;
}
.report-textarea:focus { border-color: rgba(139,92,246,.5); }

/* ── Download Buttons ── */
.download-btn {
  width: 100%; padding: 10px;
  border-radius: var(--r-full, 99px);
  font-size: 12px; font-weight: 800;
  cursor: pointer; border: none;
  font-family: var(--font-display);
  transition: opacity .15s, transform .1s;
}
.download-btn:hover  { opacity: .88; transform: translateY(-1px); }
.download-btn:active { transform: scale(.97); }
.download-btn-daily   { background: linear-gradient(135deg,#8b5cf6,#f97316); color:#fff; box-shadow:0 4px 16px rgba(139,92,246,.35); }
.download-btn-weekly  { background: linear-gradient(135deg,#f97316,#fb923c); color:#fff; box-shadow:0 4px 16px rgba(249,115,22,.35); }
.download-btn-monthly { background: linear-gradient(135deg,#059669,#34d399); color:#fff; box-shadow:0 4px 16px rgba(52,211,153,.35); }

/* ── Mobile scroll for tables ── */
.mobile-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-scroll::-webkit-scrollbar { height: 3px; }
.mobile-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8b5cf6, #f97316);
  border-radius: 99px;
}

/* ── Attendance tab nav scrollable on mobile ── */
.att-tabs-wrap {
  display: flex; gap: 6px;
  padding: 5px;
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.att-tabs-wrap::-webkit-scrollbar { display: none; }

/* ── Salary status badges ── */
.s-badge-paid    { background:rgba(52,211,153,.1); color:#34d399; border:1px solid rgba(52,211,153,.25); }
.s-badge-pending { background:rgba(139,92,246,.1); color:#a78bfa; border:1px solid rgba(139,92,246,.25); }
.s-badge-hold    { background:rgba(251,146,60,.1); color:#fb923c; border:1px solid rgba(251,146,60,.25); }
.s-badge {
  padding: 2px 10px; border-radius: 20px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  font-family: var(--font-mono);
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Salary / Report module
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Salary cards stacked */
  .salary-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Report modal full width */
  .report-modal {
    max-width: 100%;
    border-radius: 16px;
    padding: 20px;
  }
  /* Download cards stacked */
  .download-cards-grid {
    grid-template-columns: 1fr !important;
  }
  /* Tables scroll */
  .salary-table-wrap,
  .mobile-scroll {
    overflow-x: auto;
  }
  /* Att tab buttons scrollable */
  .att-tabs-wrap {
    flex-wrap: nowrap;
  }
}
@media (max-width: 480px) {
  .salary-cards-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .salary-card-val  { font-size: 18px; }
  .download-btn     { font-size: 11px; padding: 9px; }
  .report-modal     { padding: 16px; }
  .report-modal-title { font-size: 14px; }
}
/* ══════════════════════════════════════════════════════════════════════
   REPORT PAGE STYLES
   ══════════════════════════════════════════════════════════════════════ */
.rpt-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.rpt-title  { font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--t1); }
.rpt-sub    { font-size: 12px; color: var(--t3); margin-top: 2px; }
.rpt-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.rpt-controls {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
  padding: 14px 18px; margin-bottom: 16px;
}
.rpt-ctrl-group { display: flex; flex-direction: column; gap: 5px; }
.rpt-label { font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.rpt-select {
  font-family: var(--font-ui); font-size: 12px; color: var(--t1);
  background: var(--s2); border: 1px solid var(--b2); border-radius: var(--r-sm);
  padding: 7px 10px; min-width: 180px; cursor: pointer;
}
.rpt-period-btns { display: flex; gap: 4px; }
.rpt-period-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 7px 16px; border-radius: var(--r-full);
  border: 1px solid var(--b2); background: var(--s2); color: var(--t3);
  cursor: pointer; transition: all .15s;
}
.rpt-period-btn.active,
.rpt-period-btn:hover { background: var(--purple-dim); border-color: var(--purple-bd); color: var(--purple); }

.rpt-gen-btn {
  font-family: var(--font-ui); font-size: 13px; font-weight: 800;
  padding: 9px 22px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--purple), var(--orange-bd));
  color: #7c3aed !important; border: none; cursor: pointer;
  box-shadow: 0 2px 12px rgba(139,92,246,.35); transition: opacity .15s;
  align-self: flex-end;
}
.rpt-gen-btn:hover { opacity: .85; }

/* Download buttons */
.rpt-dl-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 8px 16px; border-radius: var(--r-full); border: 1px solid;
  cursor: pointer; transition: all .15s;
}
.rpt-dl-excel { background: #16a34a22; border-color: #16a34a66; color: #16a34a; }
.rpt-dl-excel:hover { background: #16a34a33; }
.rpt-dl-pdf   { background: #dc262622; border-color: #dc262666; color: #dc2626; }
.rpt-dl-pdf:hover   { background: #dc262633; }

/* Loading + error */
.rpt-loading { display: flex; align-items: center; gap: 10px; padding: 30px; color: var(--t3); font-size: 13px; }
.rpt-err     { padding: 16px; color: #ef4444; font-size: 13px; }

/* Result container — gives gaps between meta, summary, sections */
#rpt-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Meta banner */
.rpt-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 18px; margin-bottom: 16px; }
.rpt-meta-name   { font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--t1); }
.rpt-meta-period { font-size: 12px; color: var(--t3); margin-top: 2px; }
.rpt-meta-gen    { font-size: 11px; color: var(--t3); }

/* Summary row */
.rpt-summary-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 16px; }
@media(max-width:700px){ .rpt-summary-row { grid-template-columns: repeat(2,1fr); } }
.rpt-sum-card { padding: 16px 18px; border: 1px solid var(--b3); border-radius: var(--r2); background: var(--s2); }
.rpt-sum-label{ font-size: 11px; color: var(--t3); margin-bottom: 4px; }
.rpt-sum-num  { font-family: var(--font-display); font-size: 26px; font-weight: 900; }
.rpt-sum-num span { font-size: 15px; color: var(--t3); }
.rpt-sum-bar  { height: 4px; background: var(--s3); border-radius: 2px; margin: 6px 0; }
.rpt-sum-fill { height: 4px; border-radius: 2px; transition: width .5s var(--ease-snap); }
.rpt-sum-pct  { font-size: 10px; color: var(--t3); }

/* Sections */
.rpt-section { padding: 16px 18px; }
.rpt-sec-title { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--t1); margin-bottom: 12px; }
.rpt-empty { font-size: 12px; color: var(--t3); font-style: italic; padding: 8px 0; }

/* Tables */
.rpt-tbl-wrap { overflow-x: auto; }
.rpt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.rpt-tbl th { background: var(--s3); color: var(--t2); font-size: 10px; font-weight: 800;
              padding: 7px 10px; text-align: left; text-transform: uppercase; letter-spacing: .4px;
              font-family: var(--font-ui); border-bottom: 1px solid var(--b2); }
.rpt-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--border-subtle); color: var(--t2); vertical-align: middle; }
.rpt-tbl tr:last-child td { border-bottom: none; }
.rpt-tbl tr:hover td { background: var(--s2); }

/* Badges */
.rpt-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; font-family: var(--font-ui);
  text-transform: capitalize; white-space: nowrap;
}

/* Priority */
.rpt-pri { font-size: 10px; font-weight: 800; text-transform: uppercase; font-family: var(--font-ui); }
.rpt-pri-critical{ color: #ef4444; }
.rpt-pri-high    { color: #f97316; }
.rpt-pri-medium  { color: #f59e0b; }
.rpt-pri-low     { color: #22c55e; }

/* ══════════════════════════════════════════════════════════════════════
   REPORT PAGE — RESPONSIVE FIXES
   Mobile  : ≤ 767px
   Tablet  : 768px – 1023px
   Laptop  : 1024px – 1279px
   Desktop : ≥ 1280px
   ══════════════════════════════════════════════════════════════════════ */

/* ── Desktop baseline (≥ 1280px) ── */
@media (min-width: 1280px) {
  .rpt-controls { padding: 16px 22px; gap: 20px; }
  .rpt-select   { min-width: 220px; }
  .rpt-summary-row { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .rpt-sum-num  { font-size: 30px; }
}

/* ── Laptop (1024–1279px) ── */
@media (max-width: 1279px) and (min-width: 1024px) {
  .rpt-controls    { padding: 14px 18px; gap: 16px; }
  .rpt-select      { min-width: 180px; }
  .rpt-summary-row { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .rpt-sum-num     { font-size: 26px; }
  .rpt-header      { padding: 0; }
  .rpt-title       { font-size: 18px; }
}

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Header */
  .rpt-header     { flex-direction: row; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .rpt-title      { font-size: 17px; }
  .rpt-actions    { flex-wrap: wrap; gap: 6px; }
  .rpt-dl-btn     { font-size: 11px; padding: 7px 12px; }

  /* Controls */
  .rpt-controls   { flex-wrap: wrap; gap: 12px; padding: 12px 14px; }
  .rpt-ctrl-group { width: auto; flex-grow: 1; }
  .rpt-select     { min-width: 160px; width: 100%; }
  .rpt-period-btns { flex-wrap: nowrap; }
  .rpt-period-btn { padding: 7px 12px; font-size: 11.5px; }
  .rpt-gen-btn    { width: 100%; margin-top: 4px; padding: 10px 18px; font-size: 13px; align-self: stretch; }

  /* Summary cards — 2×2 grid on tablet */
  .rpt-summary-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rpt-sum-num     { font-size: 24px; }
  .rpt-sum-card    { padding: 12px 14px; }

  /* Meta banner */
  .rpt-meta        { flex-direction: row; align-items: center; }

  /* Tables — horizontal scroll */
  .rpt-tbl-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rpt-tbl         { min-width: 520px; }
  .rpt-tbl th,
  .rpt-tbl td      { padding: 7px 9px; font-size: 11.5px; }

  /* Section padding */
  .rpt-section     { padding: 14px 16px; }
  .rpt-sec-title   { font-size: 13px; }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {
  /* Header: stack title and buttons */
  .rpt-header    { flex-direction: column; gap: 10px; }
  .rpt-title     { font-size: 16px; }
  .rpt-sub       { font-size: 11px; }
  .rpt-actions   { width: 100%; gap: 6px; }
  .rpt-dl-btn    { flex: 1 1 0; text-align: center; font-size: 11px; padding: 8px 10px; }

  /* Controls block: stack everything */
  .rpt-controls  { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
  .rpt-ctrl-group { width: 100%; }
  .rpt-select    { width: 100%; min-width: unset; font-size: 13px; padding: 9px 10px; }
  .rpt-period-btns { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
  .rpt-period-btn  { text-align: center; padding: 9px 6px; font-size: 12px; }
  .rpt-gen-btn   { width: 100%; font-size: 13px; padding: 11px 18px; align-self: stretch; border-radius: var(--r-full); }

  /* Summary — 2 cols on mobile */
  .rpt-summary-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rpt-sum-card    { padding: 10px 12px; }
  .rpt-sum-num     { font-size: 22px; }
  .rpt-sum-label   { font-size: 10px; }

  /* Meta banner: stack */
  .rpt-meta        { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; }
  .rpt-meta-name   { font-size: 14px; }
  .rpt-meta-gen    { font-size: 10px; }

  /* Tables: horizontal scroll, compact */
  .rpt-tbl-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); }
  .rpt-tbl         { min-width: 480px; font-size: 11.5px; }
  .rpt-tbl th      { font-size: 9.5px; padding: 6px 8px; }
  .rpt-tbl td      { padding: 6px 8px; font-size: 11.5px; }

  /* Sections */
  .rpt-section     { padding: 12px; }
  .rpt-sec-title   { font-size: 13px; margin-bottom: 10px; }
  .rpt-empty       { font-size: 11.5px; }

  /* Badges compact */
  .rpt-badge       { font-size: 9.5px; padding: 2px 7px; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .rpt-title       { font-size: 14px; }
  .rpt-sub         { font-size: 10px; }
  .rpt-summary-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .rpt-sum-card    { padding: 8px 10px; }
  .rpt-sum-num     { font-size: 20px; }
  .rpt-section     { padding: 10px; }
  .rpt-tbl         { min-width: 420px; font-size: 11px; }
  .rpt-tbl th      { font-size: 9px; padding: 5px 7px; }
  .rpt-tbl td      { padding: 5px 7px; font-size: 11px; }
  .rpt-dl-btn      { font-size: 10.5px; padding: 7px 8px; }
  .rpt-gen-btn     { font-size: 12px; }
  .rpt-period-btn  { font-size: 11px; padding: 8px 4px; }
  .rpt-controls    { padding: 10px; gap: 8px; }
}

/* ── Prevent overflow on all report page children ── */
#report-page,
#report-page .page-wrap { overflow-x: hidden; }
#report-page .rpt-tbl-wrap { display: block; width: 100%; }

/* ── Client Report Summary Row Fix ── */
.rpt-summary-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}
.rpt-sum-card {
  padding: 16px 18px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-card) !important;
}
@media(max-width:700px){
  .rpt-summary-row { grid-template-columns: repeat(2,1fr) !important; }
}