/* ============================================================
   TalentFlow ATS — Utopia Brands Design System
   ------------------------------------------------------------
   Palette source: Utopia Brands Brand Guideline
     Primary    #004d43  deep green   ·  #1a3134  ink teal
                #ceff71  lime         ·  #eafff4  mint white
     Secondary  #25e9a5  mint         ·  #8e92ff  periwinkle
     Neutral    #ffffff  ·  #000000
   Typography
     Display / main headings ....... Belleza
     UI, body & sub-headings ....... Neue Montreal (Inter fallback)

   Theme model
     Light — white/mint surfaces, deep green as the action colour.
     Dark  — brand ink-teal surfaces, lime as the action colour.
     Because the action colour inverts between themes, ALWAYS pair
     `background: var(--primary)` with `color: var(--primary-fg)`.
     The same applies to --success/--warning/--danger/--info.
   ============================================================ */

/* ---------- Brand constants (identical in both themes) ---------- */
:root {
  --brand-green:  #004d43;
  --brand-ink:    #1a3134;
  --brand-lime:   #ceff71;
  --brand-mint:   #25e9a5;
  --brand-peri:   #8e92ff;
  --brand-tint:   #eafff4;
}

/* ============================ LIGHT ============================ */
:root {
  color-scheme: light;

  --bg: #f1f7f4;
  --bg-elev: #ffffff;
  --bg-sunken: #e8f2ec;

  --sidebar-bg: #1a3134;
  --sidebar-fg: #9fb8b4;
  --sidebar-fg-active: #ffffff;
  --sidebar-active-bg: rgba(206,255,113,.14);
  --sidebar-rail: #ceff71;

  --border: #dbe8e2;
  --border-strong: #c2d6ce;

  --text: #10231f;
  --text-2: #4a625c;
  --text-3: #54726c;

  /* Action colour — deep brand green on light surfaces */
  --primary: #004d43;
  --primary-600: #00382f;
  --primary-fg: #ffffff;
  --primary-soft: #eafff4;
  --primary-border: #b4e3d2;

  /* Signature accent — lime. Light on white, so it is a SURFACE
     colour here, never a text colour. Use --accent-ink for text. */
  --accent: #ceff71;
  --accent-fg: #1a3134;
  --accent-ink: #4f6619;
  --accent-soft: #f4ffdf;

  --success: #00734f;      --success-fg: #ffffff;  --success-soft: #d9f7ec;
  --warning: #8a5a00;      --warning-fg: #ffffff;  --warning-soft: #fff2d9;
  --danger:  #b3243a;      --danger-fg:  #ffffff;  --danger-soft:  #ffe6ea;
  --info:    #0d6580;      --info-fg:    #ffffff;  --info-soft:    #e4f4f9;
  --purple:  #4b4fd6;      --purple-fg:  #ffffff;  --purple-soft: #ecedff;
  --teal:    #00734f;      --teal-soft:   #d9f7ec;

  --shadow-sm: 0 1px 2px rgba(10,35,31,.05);
  --shadow:    0 1px 3px rgba(10,35,31,.07), 0 1px 2px rgba(10,35,31,.04);
  --shadow-md: 0 4px 12px rgba(10,35,31,.08), 0 2px 4px rgba(10,35,31,.05);
  --shadow-lg: 0 12px 32px rgba(10,35,31,.12), 0 4px 8px rgba(10,35,31,.06);

  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --sidebar-w: 262px;
  --sidebar-w-collapsed: 74px;
  --topbar-h: 64px;

  --font: 'Neue Montreal', 'PP Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Belleza', 'Neue Montreal', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Categorical chart series — brand hues darkened to hold >=3:1
     against white so lines and small marks stay legible. */
  --c1: #004d43;  --c2: #0f9d76;  --c3: #5b60e8;  --c4: #6f8f14;
  --c5: #0e7490;  --c6: #8a5a00;  --c7: #a8327d;  --c8: #3f6d64;

  /* Avatar + pipeline-stage ramps. Both invert with the theme, so the
     JS emits `var(--av-n)` / `var(--stage-n)` rather than fixed hex. */
  --avatar-fg: #ffffff;
  --av-1: #004d43; --av-2: #1a3134; --av-3: #0f5f4a; --av-4: #2f4858;
  --av-5: #4b4fd6; --av-6: #155e63; --av-7: #5b3f8f; --av-8: #8a2f4a;

  --stage-1: #0e7490; --stage-2: #5b60e8; --stage-3: #8a5a00; --stage-4: #004d43;
  --stage-5: #0f9d76; --stage-6: #6f8f14; --stage-7: #b3243a;

  --ring: 0 0 0 3px rgba(0,77,67,.20);
  /* select chevron: whole url() is tokenised so the stroke can follow the theme */
  --chev-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354726c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ============================= DARK ============================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1d1f;
  --bg-elev: #16292c;
  --bg-sunken: #1a3134;

  --sidebar-bg: #0a1618;
  --sidebar-fg: #8fa9a4;
  --sidebar-fg-active: #ffffff;
  --sidebar-active-bg: rgba(206,255,113,.12);
  --sidebar-rail: #ceff71;

  --border: #24403f;
  --border-strong: #33534f;

  --text: #e6f2ec;
  --text-2: #a3bdb6;
  --text-3: #8fada6;

  /* Action colour inverts to lime — brand's dark-surface highlight */
  --primary: #ceff71;
  --primary-600: #dcff96;
  --primary-fg: #0d2523;
  --primary-soft: rgba(206,255,113,.08);
  --primary-border: rgba(206,255,113,.32);

  --accent: #ceff71;
  --accent-fg: #12292b;
  --accent-ink: #ceff71;
  --accent-soft: rgba(206,255,113,.10);

  --success: #25e9a5;   --success-fg: #06251b;  --success-soft: rgba(37,233,165,.12);
  --warning: #f5c451;   --warning-fg: #2a1e04;  --warning-soft: rgba(245,196,81,.12);
  --danger:  #ff7a8a;   --danger-fg:  #2d0a10;  --danger-soft:  rgba(255,122,138,.12);
  --info:    #5fd3e8;   --info-fg:    #05242b;  --info-soft:    rgba(95,211,232,.12);
  --purple:  #8e92ff;   --purple-fg:  #12133a;  --purple-soft: rgba(142,146,255,.12);
  --teal:    #25e9a5;   --teal-soft:   rgba(37,233,165,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow:    0 1px 3px rgba(0,0,0,.55);
  --shadow-md: 0 4px 14px rgba(0,0,0,.6);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.65);

  /* Same series, brightened for dark surfaces — lime and mint lead. */
  --c1: #ceff71;  --c2: #25e9a5;  --c3: #8e92ff;  --c4: #a8e063;
  --c5: #5fd3e8;  --c6: #f5c451;  --c7: #ff9ec4;  --c8: #7fb3aa;

  --avatar-fg: #0d2523;
  --av-1: #ceff71; --av-2: #25e9a5; --av-3: #8e92ff; --av-4: #a8e063;
  --av-5: #5fd3e8; --av-6: #f5c451; --av-7: #ff9ec4; --av-8: #7fb3aa;

  --stage-1: #5fd3e8; --stage-2: #8e92ff; --stage-3: #f5c451; --stage-4: #ceff71;
  --stage-5: #25e9a5; --stage-6: #a8e063; --stage-7: #ff7a8a;

  --ring: 0 0 0 3px rgba(206,255,113,.28);
  --chev-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fada6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  /* iOS inflates text when a phone is rotated to landscape unless this is
     pinned; Windows/Android high-contrast modes need the adjust too. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Grey flash on tap (iOS/Android WebKit + Chromium); we provide our own
     :active feedback further down instead. */
  -webkit-tap-highlight-color: transparent;
  /* Stop the whole page rubber-banding behind fixed chrome on iOS. */
  overscroll-behavior-y: none;
}
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button {
  font-family: inherit; cursor: pointer; border: none; background: none; color: inherit;
  touch-action: manipulation;   /* removes the legacy 300ms tap delay */
}
input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg, video, canvas { max-width: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }
::selection { background: var(--brand-lime); color: var(--brand-ink); }

/* Firefox / non-WebKit scrollbars (WebKit ignores these). */
@supports (scrollbar-color: auto) {
  * { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
}

/* ============================================================
   INPUT MODALITY
   Hover styling belongs to devices that can hover. On touch, :hover
   sticks after a tap and leaves rows/buttons stuck in a hover state,
   so every hover rule is gated and touch gets :active feedback instead.
   ============================================================ */
@media (hover: none) {
  .btn:active, .icon-btn:active, .nav-item:active, .act-btn:active,
  .page-btn:active, .dropdown-link:active, .prompt-chip:active,
  .search-item:active, .k-card:active, .platform-card:active,
  .role-item:active, .inbox-item:active, .tab:active, .pill-tab:active {
    opacity: .68;
    transition: opacity .05s;
  }
}

/* Prevent iOS Safari from zooming the page when a control gains focus.
   Safari zooms whenever the focused field is under 16px, so on any coarse
   pointer the controls step up to 16px rather than shrinking the viewport. */
@media (pointer: coarse) {
  input, select, textarea,
  .form-field input, .form-field select, .form-field textarea,
  .toolbar-search input, .topbar-search input, .chat-input-bar textarea, .select {
    font-size: 16px;
  }
}

/* ============================================================
   BRAND TYPOGRAPHY
   Guideline: "main heading always in main typeface belleza /
   content & sub-heading always in neue montreal".
   Belleza is a display face — reserved for page-level and modal
   titles, hero numbers and the wordmark. Everything structural
   (labels, tables, controls) stays in the UI face for legibility.
   ============================================================ */
.page-title,
.modal-head h2,
.brand-name,
.ph-name,
.ai-hero h2,
.empty-state h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}
.page-title { font-size: 30px; line-height: 1.15; }
.modal-head h2 { font-size: 22px; }
.ph-name { font-size: 25px; }
.brand-name { font-size: 18px; font-weight: 400; letter-spacing: .2px; }

/* Metrics read as data, not prose — keep them in the UI face,
   tabular-lining so digits don't jitter as values update. */
.kpi-value, .stat-mini-val, .ats-ring .ats-num, .cell-mono, .mono,
table.data td, .k-count, .nav-badge {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FOCUS & MOTION (accessibility)
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
.sidebar :where(a, button):focus-visible { outline-color: var(--brand-lime); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* dvh tracks the visible area as mobile browser chrome collapses; the vh
   line above it is the fallback for engines without dvh support. */
#app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ================= SIDEBAR ================= */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  flex-shrink: 0;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  z-index: 60;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  height: var(--topbar-h);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.brand-logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--brand-green);
  display: grid; place-items: center;
  color: var(--brand-lime);
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
/* The global `svg` rule strokes icons; the emblem is a filled shape. */
.brand-mark { width: 22px; height: auto; fill: currentColor; stroke: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }
.brand-name { color: #fff; }
.brand-sub { color: var(--sidebar-fg); font-size: 11px; letter-spacing: .3px; }
.sidebar-collapse-btn {
  margin-left: auto; color: var(--sidebar-fg); width: 26px; height: 26px;
  border-radius: 6px; display: grid; place-items: center; transition: .15s;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-collapse-btn svg { width: 18px; height: 18px; }

.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 12px; }
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
.nav-section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-3); padding: 14px 12px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 2px;
  color: var(--sidebar-fg); font-weight: 500; font-size: 13.5px;
  transition: background .14s, color .14s; position: relative; white-space: nowrap;
}
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 1.9; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: var(--sidebar-active-bg); color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; background: var(--sidebar-rail); border-radius: 0 3px 3px 0;
}
.nav-badge {
  margin-left: auto; background: rgba(255,255,255,.12); color: #fff;
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 20px; min-width: 22px; text-align: center;
}
.nav-badge-alert { background: var(--danger); color: var(--danger-fg); }
.nav-badge-ai { background: var(--brand-lime); color: var(--brand-ink); font-weight: 700; letter-spacing: .3px; }
/* The sidebar is a dark surface in BOTH themes, so anything inside it must
   use sidebar tokens. Left on the global text/surface tokens these dropped
   to ~2:1 in light mode (the section labels and the Upgrade button). */
.sidebar .nav-section-label { color: var(--sidebar-fg); }
.sidebar .btn-ghost { color: var(--sidebar-fg); }
.sidebar .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar .btn-secondary {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.14);
}
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.usage-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px; }
.usage-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--sidebar-fg); margin-bottom: 8px; }
.usage-top span:last-child { color: #fff; font-weight: 600; }
.usage-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; margin-bottom: 12px; }
.usage-fill { height: 100%; background: linear-gradient(90deg, var(--brand-mint), var(--brand-lime)); border-radius: 20px; }

/* Collapsed sidebar */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-item span:not(.nav-badge),
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .nav-badge { display: none; }
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); position: absolute; right: 8px; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; }

/* ================= MAIN WRAP ================= */
.main-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ================= TOPBAR ================= */
.topbar {
  height: var(--topbar-h); background: var(--bg-elev); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
  position: sticky; top: 0; z-index: 50;
}
.menu-toggle { display: none; }
.topbar-search { position: relative; flex: 1; max-width: 480px; display: flex; align-items: center; }
.topbar-search > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }
.topbar-search input {
  width: 100%; padding: 9px 14px 9px 42px; border-radius: 10px;
  background: var(--bg-sunken); border: 1px solid transparent; outline: none; transition: .15s;
}
.topbar-search input:focus { background: var(--bg-elev); border-color: var(--primary); box-shadow: var(--ring); }
.search-kbd {
  position: absolute; right: 12px; font-family: var(--mono); font-size: 11px;
  color: var(--text-3); background: var(--bg-elev); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 5px; pointer-events: none;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); max-height: 420px; overflow-y: auto; display: none; z-index: 80; padding: 6px;
}
.search-results.open { display: block; }
.search-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); padding: 8px 10px 4px; }
.search-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.search-item:hover { background: var(--bg-sunken); }
.search-item .si-title { font-weight: 600; font-size: 13px; }
.search-item .si-sub { font-size: 12px; color: var(--text-3); }
.search-empty { padding: 24px; text-align: center; color: var(--text-3); font-size: 13px; }

.topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.topbar-divider { width: 1px; height: 30px; background: var(--border); margin: 0 6px; }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--text-2); transition: .15s; }
.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-sun { display: none; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
.dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--bg-elev); }
.dot-red { background: var(--danger); }
.dot-blue { background: var(--info); }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--avatar-fg); flex-shrink: 0; }
.avatar-grad { background: linear-gradient(135deg, var(--brand-green), var(--brand-mint)); color: #fff; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.profile-btn { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 30px; transition: .15s; }
.profile-btn:hover { background: var(--bg-sunken); }
.profile-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.profile-name { font-weight: 600; font-size: 13px; }
.profile-role { font-size: 11.5px; color: var(--text-3); }
.chev { width: 16px; height: 16px; color: var(--text-3); }

/* ================= DROPDOWN ================= */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: .16s; z-index: 90;
}
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-menu-wide { min-width: 340px; padding: 0; }
.dropdown-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--border); }
.dropdown-foot { padding: 10px 16px; border-top: 1px solid var(--border); text-align: center; }
.dropdown-foot a { color: var(--primary); font-weight: 600; font-size: 13px; }
.dropdown-profile { display: flex; gap: 12px; align-items: center; padding: 14px; }
.dp-name { font-weight: 600; }
.dp-email { font-size: 12px; color: var(--text-3); }
.dropdown-divider { height: 1px; background: var(--border); margin: 6px 0; }
.dropdown-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; width: 100%; text-align: left; color: var(--text); }
.dropdown-link svg { width: 17px; height: 17px; color: var(--text-3); }
.dropdown-link:hover { background: var(--bg-sunken); }
.dropdown-link.danger { color: var(--danger); }
.dropdown-link.danger svg { color: var(--danger); }
.link-btn { color: var(--primary); font-size: 12px; font-weight: 600; }
.notif-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; }
.notif-row:hover { background: var(--bg-sunken); }
.notif-row.unread { background: var(--primary-soft); }
[data-theme="dark"] .notif-row.unread { background: var(--primary-soft); }
.notif-icn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.notif-icn svg { width: 16px; height: 16px; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; }
.notif-text { font-size: 12.5px; color: var(--text-2); }
.notif-time { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.dd-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }

/* ================= CONTENT / PAGE ================= */
.content { flex: 1; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; padding: 26px 30px 60px; }
.page { animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.page-sub { color: var(--text-2); font-size: 14px; margin-top: 3px; }
.page-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.breadcrumb svg { width: 14px; height: 14px; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  transition: .15s; white-space: nowrap; border: 1px solid transparent;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: var(--bg-elev); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--bg-sunken); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--danger-fg); }
.btn-danger:hover { filter: brightness(.94); }
.btn-block { width: 100%; margin-top: 12px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.btn-icon { padding: 8px; width: 34px; height: 34px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ================= CARDS ================= */
.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); gap: 12px; }
.card-head h3 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.card-head .ch-sub { font-size: 12.5px; color: var(--text-3); font-weight: 400; }
.card-body { padding: 20px; }

.grid { display: grid; gap: 18px; }
.g-kpi { grid-template-columns: repeat(4, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.mt-18 { margin-top: 18px; }
.mb-18 { margin-bottom: 18px; }

/* KPI card */
.kpi {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: .18s;
}
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.kpi-icn { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.kpi-icn svg { width: 20px; height: 20px; }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; }
.trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; padding: 2px 7px; border-radius: 6px; font-size: 12px; }
.trend svg { width: 13px; height: 13px; }
.trend-up { color: var(--success); background: var(--success-soft); }
.trend-down { color: var(--danger); background: var(--danger-soft); }
.trend-flat { color: var(--text-2); background: var(--bg-sunken); }
.kpi-foot-text { color: var(--text-3); }
.i-indigo { background: var(--primary-soft); color: var(--primary); }
.i-green { background: var(--success-soft); color: var(--success); }
.i-amber { background: var(--warning-soft); color: var(--warning); }
.i-red { background: var(--danger-soft); color: var(--danger); }
.i-blue { background: var(--info-soft); color: var(--info); }
.i-purple { background: var(--purple-soft); color: var(--purple); }
.i-teal { background: var(--teal-soft); color: var(--teal); }

/* ================= BADGES ================= */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-plain::before { display: none; }
.b-green { color: var(--success); background: var(--success-soft); }
.b-amber { color: var(--warning); background: var(--warning-soft); }
.b-red { color: var(--danger); background: var(--danger-soft); }
.b-blue { color: var(--info); background: var(--info-soft); }
.b-purple { color: var(--purple); background: var(--purple-soft); }
.b-teal { color: var(--teal); background: var(--teal-soft); }
.b-gray { color: var(--text-2); background: var(--bg-sunken); }
.b-indigo { color: var(--primary); background: var(--primary-soft); }

/* ================= TABLES ================= */
/* Horizontal scroll is the right answer for wide data tables on phones;
   make the gesture smooth and keep it from chaining to the page. */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data thead th {
  text-align: left; padding: 12px 16px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-3);
  border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-elev); position: sticky; top: 0;
}
table.data thead th.sortable { cursor: pointer; user-select: none; }
table.data thead th.sortable:hover { color: var(--text); }
.sort-ind { display: inline-block; margin-left: 4px; opacity: .4; font-size: 10px; }
th.sorted-asc .sort-ind, th.sorted-desc .sort-ind { opacity: 1; color: var(--primary); }
table.data tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--bg-sunken); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-primary { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 12px; color: var(--text-3); }
.cell-mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.user-cell { display: flex; align-items: center; gap: 11px; }
.user-cell .avatar { width: 34px; height: 34px; font-size: 12px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.act-btn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); transition: .12s; }
.act-btn:hover { background: var(--bg-sunken); color: var(--primary); }
.act-btn.danger:hover { color: var(--danger); background: var(--danger-soft); }
.act-btn svg { width: 16px; height: 16px; }

/* Toolbar */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.toolbar-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); }
.toolbar-search input { width: 100%; padding: 8px 12px 8px 36px; border-radius: 9px; background: var(--bg-elev); border: 1px solid var(--border-strong); outline: none; }
.toolbar-search input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.toolbar .spacer { flex: 1; }
.select {
  padding: 8px 32px 8px 12px; border-radius: 9px; background: var(--bg-elev) var(--chev-url) no-repeat right 10px center;
  background-size: 15px; border: 1px solid var(--border-strong); outline: none; cursor: pointer; appearance: none; font-weight: 500;
}
.select:focus { border-color: var(--primary); box-shadow: var(--ring); }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.page-info { font-size: 13px; color: var(--text-2); }
.page-controls { display: flex; gap: 4px; align-items: center; }
.page-btn { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; }
.page-btn:hover:not(:disabled) { background: var(--bg-sunken); }
.page-btn.active { background: var(--primary); color: var(--primary-fg); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn svg { width: 16px; height: 16px; }

/* Progress */
.pbar { height: 7px; background: var(--bg-sunken); border-radius: 20px; overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 20px; background: var(--primary); transition: width .5s ease; }
.pbar-fill.green { background: var(--success); }
.pbar-fill.amber { background: var(--warning); }
.pbar-fill.red { background: var(--danger); }

/* Score chip */
.score { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.score-ring { --pct: 0; position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--sc-color) calc(var(--pct)*1%), var(--bg-sunken) 0); }
.score-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-elev); }
.score-ring span { position: relative; z-index: 1; font-size: 10px; font-weight: 700; }

/* ================= CHARTS ================= */
.chart-wrap { position: relative; width: 100%; }
/* Without an explicit width a canvas keeps its 300px intrinsic size, so
   every chart rendered at 300px regardless of its card. width:100% lets
   setup() measure the real container and size the backing store to it. */
canvas { width: 100%; max-width: 100%; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; justify-content: center; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.chart-tooltip {
  position: fixed; background: var(--text); color: var(--bg-elev); padding: 7px 11px; border-radius: 8px;
  font-size: 12px; font-weight: 600; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 200;
  box-shadow: var(--shadow-lg); white-space: nowrap;
}
[data-theme="dark"] .chart-tooltip { background: var(--brand-lime); color: var(--brand-ink); }

/* ================= MODAL ================= */
.modal-root { position: fixed; inset: 0; z-index: 300; display: none; }
.modal-root.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,22,24,.55); backdrop-filter: blur(3px); animation: fadeIn .2s; }
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.65); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative; margin: 5vh auto; max-width: 640px; width: calc(100% - 40px);
  background: var(--bg-elev); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  animation: modalIn .25s cubic-bezier(.34,1.3,.64,1); max-height: 90vh; display: flex; flex-direction: column;
}
.modal-lg { max-width: 860px; }
.modal-xl { max-width: 1040px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--border); }
.modal-head p { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.modal-close { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--text-3); }
.modal-close:hover { background: var(--bg-sunken); color: var(--text); }
.modal-body { padding: 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--border); background: var(--bg-sunken); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ================= FORMS ================= */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.col-span-2 { grid-column: 1 / -1; }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.form-field label .req { color: var(--danger); }
.form-field input, .form-field select, .form-field textarea {
  padding: 9px 12px; border-radius: 9px; background: var(--bg-elev); border: 1px solid var(--border-strong); outline: none; transition: .15s; width: 100%;
}
.form-field select { appearance: none; background: var(--bg-elev) var(--chev-url) no-repeat right 12px center; background-size: 15px; cursor: pointer; }
.form-field textarea { resize: vertical; min-height: 84px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
.form-field input.err, .form-field select.err, .form-field textarea.err { border-color: var(--danger); }
.field-error { font-size: 11.5px; color: var(--danger); display: none; }
.field-error.show { display: block; }
.form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin: 22px 0 4px; grid-column: 1/-1; }

/* Switch */
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 42px; height: 24px; border-radius: 20px; background: var(--border-strong); position: relative; transition: .2s; cursor: pointer; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: var(--shadow-sm); }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { background: var(--primary-fg); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); gap: 20px; }
.setting-row:last-child { border-bottom: none; }
.setting-info h4 { font-size: 14px; font-weight: 600; }
.setting-info p { font-size: 13px; color: var(--text-3); margin-top: 2px; }

/* ================= TABS ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; overflow-x: auto; }
.tab { padding: 11px 16px; font-weight: 600; font-size: 13.5px; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-pane { display: none; animation: fadeUp .25s; }
.tab-pane.active { display: block; }
.pill-tabs { display: inline-flex; gap: 4px; background: var(--bg-sunken); padding: 4px; border-radius: 11px; }
.pill-tab { padding: 7px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--text-2); transition: .15s; }
.pill-tab.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }

/* ================= KANBAN ================= */
.kanban { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 12px; align-items: flex-start; scroll-snap-type: x proximity; }
.kanban-col { flex: 0 0 288px; background: var(--bg-sunken); border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
.kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; position: sticky; top: 0; }
.kanban-col-head .k-dot { width: 9px; height: 9px; border-radius: 50%; }
.kanban-col-head h4 { font-size: 13.5px; font-weight: 700; }
.k-count { margin-left: auto; background: var(--bg-elev); color: var(--text-2); font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 20px; }
.kanban-cards { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; }
.kanban-cards.drag-over { background: var(--primary-soft); border-radius: 10px; outline: 2px dashed var(--primary); outline-offset: -4px; }
.k-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: 13px; cursor: grab; box-shadow: var(--shadow-sm); transition: .15s; }
.k-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.k-card.dragging { opacity: .5; transform: rotate(2deg); cursor: grabbing; }
.k-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.k-card-top .avatar { width: 32px; height: 32px; font-size: 11px; }
.kc-name { font-weight: 600; font-size: 13.5px; }
.kc-role { font-size: 12px; color: var(--text-3); }
.k-card-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.k-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--bg-sunken); color: var(--text-2); }

/* ================= MISC ================= */
.list-tight > * + * { border-top: 1px solid var(--border); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.list-row:first-child { padding-top: 0; }
.list-row .avatar { width: 38px; height: 38px; font-size: 13px; }
.lr-main { flex: 1; min-width: 0; }
.lr-title { font-weight: 600; font-size: 13.5px; }
.lr-sub { font-size: 12.5px; color: var(--text-3); }
.lr-right { text-align: right; flex-shrink: 0; }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 22px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -28px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-elev); border: 2px solid var(--primary); display: grid; place-items: center; }
.tl-dot svg { width: 11px; height: 11px; color: var(--primary); }
.tl-title { font-weight: 600; font-size: 13.5px; }
.tl-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.tl-desc { font-size: 13px; color: var(--text-2); margin-top: 5px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-3); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 14px; opacity: .5; }
.empty-state h3 { font-size: 18px; color: var(--text-2); margin-bottom: 6px; }

.avatar-stack { display: flex; }
.avatar-stack .avatar { width: 30px; height: 30px; font-size: 11px; border: 2px solid var(--bg-elev); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.more-count { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-sunken); color: var(--text-2); font-size: 11px; font-weight: 700; border: 2px solid var(--bg-elev); margin-left: -8px; }

.stat-mini { display: flex; flex-direction: column; gap: 4px; }
.stat-mini-val { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.stat-mini-lbl { font-size: 12.5px; color: var(--text-3); }

.divider { height: 1px; background: var(--border); margin: 16px 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.text-muted { color: var(--text-3); }
.fw-600 { font-weight: 600; }
.text-sm { font-size: 12.5px; }
.mono { font-family: var(--mono); }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cal-dow { background: var(--bg-elev); padding: 10px; text-align: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--text-3); letter-spacing: .5px; }
.cal-cell { background: var(--bg-elev); min-height: 108px; padding: 8px; position: relative; transition: .12s; }
.cal-cell:hover { background: var(--bg-sunken); }
.cal-cell.other { background: var(--bg-sunken); }
.cal-date { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cal-cell.today .cal-date { background: var(--primary); color: var(--primary-fg); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.cal-cell.other .cal-date { color: var(--text-3); }
.cal-event { font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 5px; margin-top: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Toast */
.toast-root { position: fixed; bottom: 24px; right: 24px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; box-shadow: var(--shadow-lg); min-width: 300px; max-width: 400px; animation: toastIn .3s cubic-bezier(.34,1.3,.64,1); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }
.toast-icn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.toast-icn svg { width: 18px; height: 18px; }
.toast-body { flex: 1; }
.toast-title { font-weight: 600; font-size: 13.5px; }
.toast-msg { font-size: 12.5px; color: var(--text-3); }
.toast-close { color: var(--text-3); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.toast-close:hover { background: var(--bg-sunken); }

/* Scrim */
.scrim { position: fixed; inset: 0; background: rgba(10,22,24,.55); z-index: 55; display: none; }
.scrim.open { display: block; }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg-elev); padding: 5px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: .15s; z-index: 100; }
[data-tip]:hover::after { opacity: 1; }
/* Hover tooltips have no dismiss gesture on touch and stick after a tap. */
@media (hover: none) { [data-tip]::after { content: none; } }
[data-theme="dark"] [data-tip]::after { background: var(--brand-lime); color: var(--brand-ink); }

/* Segmented insight bars */
.mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.mini-bar { flex: 1; background: var(--primary-soft); border-radius: 3px 3px 0 0; min-height: 4px; transition: .3s; }
.mini-bar.hl { background: var(--primary); }

/* Profile header */
.profile-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 4px; }
.profile-hero .avatar { width: 68px; height: 68px; font-size: 24px; }
.ph-role { color: var(--text-2); font-size: 14px; }
.ph-tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.info-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 24px; }
.info-item .il { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.info-item .iv { font-size: 14px; font-weight: 500; margin-top: 3px; }

/* ================= ENTERPRISE PHASE 2 ================= */

/* Split inbox layout */
.split { display: grid; grid-template-columns: 380px 1fr; gap: 0; min-height: 560px; }
.split-list { border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
.split-detail { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
.inbox-item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; position: relative; }
.inbox-item:hover { background: var(--bg-sunken); }
.inbox-item.active { background: var(--primary-soft); }
[data-theme="dark"] .inbox-item.active { background: var(--primary-soft); }
.inbox-item.unread::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.inbox-item.unread .ii-name { font-weight: 700; }
.ii-main { flex: 1; min-width: 0; }
.ii-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.ii-pos { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ii-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.ii-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
/* `--chip` is the source's own brand colour, set inline. It tints the
   background and fills the dot, while the label stays on theme text so
   11px copy keeps its contrast in both modes. */
.source-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  --chip: var(--text-3);
  color: var(--text-2);
  background: var(--bg-sunken);   /* fallback: color-mix needs Safari 16.2+ / Chrome 111+ */
  background: color-mix(in srgb, var(--chip) 14%, transparent);
}
.source-chip svg { width: 12px; height: 12px; color: var(--chip); }
.source-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--chip); }

.integration-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; background: var(--success-soft); color: var(--success); }
.integration-status.pending { background: var(--warning-soft); color: var(--warning); }
.integration-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; position: relative; }
.integration-status .pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }

.email-preview { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 12px; padding: 18px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.7; color: var(--text-2); }
.attach-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.attach-icn { width: 42px; height: 42px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); display: grid; place-items: center; }
.resume-thumb { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sunken); padding: 20px; font-family: var(--mono); font-size: 11px; color: var(--text-2); line-height: 1.8; max-height: 300px; overflow: hidden; position: relative; }
.resume-thumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--bg-sunken)); }

/* Upload dropzone */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center; transition: .18s; background: var(--bg-sunken); cursor: pointer; }
.dropzone.drag { border-color: var(--primary); background: var(--primary-soft); transform: scale(1.005); }
.dropzone .dz-icn { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; margin: 0 auto 16px; }
.dropzone .dz-icn svg { width: 30px; height: 30px; }
.dropzone h3 { font-size: 17px; margin-bottom: 6px; }
.upload-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; margin-top: 10px; background: var(--bg-elev); }
.upload-progress { height: 5px; background: var(--bg-sunken); border-radius: 20px; overflow: hidden; flex: 1; }
.upload-progress-fill { height: 100%; background: var(--primary); border-radius: 20px; transition: width .2s; }

/* ATS match ring big */
.ats-ring { --pct: 0; --c: var(--primary); position: relative; width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: conic-gradient(var(--c) calc(var(--pct)*1%), var(--bg-sunken) 0); }
.ats-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: var(--bg-elev); }
.ats-ring .ats-val { position: relative; z-index: 1; text-align: center; }
.ats-ring .ats-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.ats-ring .ats-lbl { font-size: 11px; color: var(--text-3); font-weight: 600; }
.skill-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; }
.skill-pill svg { width: 12px; height: 12px; }
.skill-matched { background: var(--success-soft); color: var(--success); }
.skill-missing { background: var(--danger-soft); color: var(--danger); }

/* Platform publish card */
.platform-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; transition: .15s; cursor: pointer; background: var(--bg-elev); }
.platform-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.platform-card.selected { border-color: var(--primary); box-shadow: var(--ring); background: var(--primary-soft); }
[data-theme="dark"] .platform-card.selected { background: var(--primary-soft); }
.platform-logo { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.platform-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); display: grid; place-items: center; margin-left: auto; flex-shrink: 0; transition: .15s; }
.platform-card.selected .platform-check { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.platform-check svg { width: 14px; height: 14px; opacity: 0; }
.platform-card.selected .platform-check svg { opacity: 1; }

/* Stepper */
.stepper { display: flex; align-items: center; margin-bottom: 24px; }
.step { display: flex; align-items: center; gap: 10px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--bg-sunken); color: var(--text-3); border: 2px solid var(--border); }
.step.active .step-num { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.step.done .step-num { background: var(--success); color: var(--success-fg); border-color: var(--success); }
.step-label { font-size: 13px; font-weight: 600; color: var(--text-3); }
.step.active .step-label, .step.done .step-label { color: var(--text); }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 14px; min-width: 20px; }
.step.done + .step-line, .step-line.done { background: var(--success); }

/* Heatmap */
.heatmap { display: grid; grid-template-columns: 40px repeat(5, 1fr); gap: 5px; }
.hm-label { font-size: 11px; color: var(--text-3); display: flex; align-items: center; }
.hm-cell { aspect-ratio: 1.4; border-radius: 5px; background: var(--bg-sunken); transition: .15s; cursor: pointer; }
.hm-cell:hover { outline: 2px solid var(--primary); }
.hm-legend { display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 10px; font-size: 11px; color: var(--text-3); }
.hm-legend .hm-box { width: 13px; height: 13px; border-radius: 3px; }

/* Leaderboard */
.leader-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.leader-row:last-child { border-bottom: none; }
.leader-rank { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--bg-sunken); color: var(--text-2); flex-shrink: 0; }
.leader-rank.gold { background: var(--accent); color: var(--accent-fg); }
.leader-rank.silver { background: var(--success-soft); color: var(--success); }
.leader-rank.bronze { background: var(--warning-soft); color: var(--warning); }

/* RBAC matrix (Microsoft admin center style) */
.rbac-layout { display: grid; grid-template-columns: 280px 1fr; gap: 18px; }
.role-list { display: flex; flex-direction: column; gap: 6px; }
.role-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 11px; cursor: pointer; border: 1px solid transparent; transition: .12s; }
.role-item:hover { background: var(--bg-sunken); }
.role-item.active { background: var(--primary-soft); border-color: var(--primary); }
[data-theme="dark"] .role-item.active { background: var(--primary-soft); }
/* Role chips use the avatar ramp, which inverts with the theme. */
.role-badge { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--avatar-fg); flex-shrink: 0; }
.rbac-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.rbac-matrix th { padding: 12px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); border-bottom: 1px solid var(--border); text-align: center; font-weight: 700; }
.rbac-matrix th:first-child { text-align: left; padding-left: 16px; }
.rbac-matrix td { padding: 10px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.rbac-matrix td:first-child { text-align: left; padding-left: 16px; font-weight: 600; }
.perm-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); display: inline-grid; place-items: center; cursor: pointer; transition: .12s; }
.perm-check.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.perm-check.on svg { width: 13px; height: 13px; }
.perm-check:not(.on) svg { display: none; }

/* AI Assistant chat */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 190px); height: calc(100dvh - 190px); }
.chat-scroll { flex: 1; overflow-y: auto; padding: 8px 4px 20px; }
.chat-msg { display: flex; gap: 12px; margin-bottom: 22px; max-width: 820px; }
.chat-msg .chat-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.chat-av.ai { background: linear-gradient(135deg, var(--brand-green), var(--brand-mint)); }
.chat-av.user { background: var(--bg-sunken); color: var(--text-2); }
.chat-bubble { padding-top: 3px; }
.chat-role { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.chat-text { font-size: 14px; line-height: 1.65; color: var(--text); }
.chat-text p { margin-bottom: 10px; }
.chat-text ul { padding-left: 20px; margin-bottom: 10px; }
.chat-text li { margin-bottom: 4px; }
.chat-typing span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); margin-right: 3px; animation: typing 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-input-bar { border: 1px solid var(--border-strong); border-radius: 16px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-end; background: var(--bg-elev); box-shadow: var(--shadow-sm); }
.chat-input-bar:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.chat-input-bar textarea { flex: 1; border: none; outline: none; resize: none; background: transparent; font-size: 14px; max-height: 140px; line-height: 1.5; padding: 6px 4px; }
.chat-send { width: 38px; height: 38px; border-radius: 10px; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; flex-shrink: 0; transition: .15s; }
.chat-send:hover { background: var(--primary-600); }
.chat-send:disabled { opacity: .4; }
.prompt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border-strong); border-radius: 11px; font-size: 13px; font-weight: 500; cursor: pointer; transition: .15s; background: var(--bg-elev); text-align: left; }
.prompt-chip:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.prompt-chip svg { width: 15px; height: 15px; color: var(--primary); }
.ai-hero { text-align: center; padding: 30px 0 24px; }
.ai-hero .ai-logo { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--brand-green), var(--brand-mint)); display: grid; place-items: center; margin: 0 auto 16px; box-shadow: 0 10px 30px rgba(0,77,67,.35); }
.ai-hero .ai-logo svg { width: 32px; height: 32px; color: var(--brand-lime); }

/* ============================================================
   BRAND HERO
   Full-bleed brand-green panel used for page-level banners. It keeps
   the same deep green in BOTH themes — it is a brand surface, not a
   theme surface — so everything inside is scoped to light-on-green.
   ============================================================ */
.brand-hero {
  background: linear-gradient(120deg, var(--brand-green), #0a6a58);
  border: none;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* Emblem-derived curve, echoing the logo's flowing edge. */
.brand-hero::after {
  content: '';
  position: absolute; right: -40px; top: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(206,255,113,.20), transparent 68%);
  pointer-events: none;
}
.brand-hero .card-body { position: relative; z-index: 1; }
.brand-hero h2, .brand-hero h3 { color: #fff; }
.brand-hero p { color: rgba(255,255,255,.86); }
.brand-hero .ai-logo { background: rgba(206,255,113,.16); box-shadow: none; }
.brand-hero .avatar { color: #fff; }
.brand-hero .ai-logo svg { color: var(--brand-lime); }
.brand-hero .topbar-search > svg { color: var(--text-3); }
.brand-hero .topbar-search input {
  background: #fff; color: #10231f; border-color: transparent;
}
.brand-hero .topbar-search input::placeholder { color: #54726c; }
.btn-on-brand { background: var(--brand-lime); color: var(--brand-ink); font-weight: 600; }
.btn-on-brand:hover { background: #dcff96; }

/* AI FAB + dock */
.ai-fab { position: fixed; bottom: 26px; right: 26px; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-green); color: var(--brand-lime); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,77,67,.45); z-index: 200; transition: .2s; }
.ai-fab:hover { transform: scale(1.08) rotate(8deg); }
/* Redundant (and overlapping the send button) on the assistant page itself. */
[data-view="aiassistant"] .ai-fab { display: none; }
.ai-fab svg { width: 26px; height: 26px; }
.ai-dock { position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw; background: var(--bg-elev); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 310; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); }
.ai-dock.open { transform: translateX(0); }
.ai-dock-inner { height: 100%; display: flex; flex-direction: column; }

/* Bulk action bar */
.bulk-bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--primary); color: var(--primary-fg); border-radius: 12px; margin-bottom: 14px; animation: fadeUp .2s; }
.bulk-bar .btn { background: rgba(255,255,255,.15); background: color-mix(in srgb, var(--primary-fg) 14%, transparent); color: var(--primary-fg); border: none; }
.bulk-bar .btn:hover { background: rgba(255,255,255,.25); background: color-mix(in srgb, var(--primary-fg) 24%, transparent); }
.checkbox { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--border-strong); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: .12s; background: var(--bg-elev); }
.checkbox.on { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.checkbox svg { width: 12px; height: 12px; opacity: 0; }
.checkbox.on svg { opacity: 1; }

/* Filter panel */
.filter-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.filter-panel .form-field label { font-size: 11.5px; }
.star-btn { color: var(--text-3); transition: .12s; }
.star-btn.on { color: var(--warning); }
.star-btn.on svg { fill: currentColor; }

/* Segmented control */
.seg { display: inline-flex; background: var(--bg-sunken); padding: 3px; border-radius: 10px; }
.seg button { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.seg button.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }

.rating-stars { display: inline-flex; gap: 3px; }
.rating-stars .rs { color: var(--border-strong); cursor: pointer; transition: .1s; }
.rating-stars .rs svg { width: 22px; height: 22px; }
.rating-stars .rs.on { color: var(--warning); }
.rating-stars .rs.on svg { fill: currentColor; }

.recc-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; margin-bottom: 18px; }
.recc-strong { background: var(--success-soft); color: var(--success); }
.recc-potential { background: var(--warning-soft); color: var(--warning); }
.recc-weak { background: var(--danger-soft); color: var(--danger); }
.recc-banner .recc-icn { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.5); display: grid; place-items: center; }
[data-theme="dark"] .recc-banner .recc-icn { background: rgba(0,0,0,.2); }

/* ============================================================
   SAFE AREAS  (iOS notch / Dynamic Island / home indicator,
   and Android gesture bars). index.html sets viewport-fit=cover,
   so the layout reaches the physical edges and these insets pull
   the actual content back into the safe region.
   ============================================================ */
.sidebar { padding-left: env(safe-area-inset-left); }
.topbar {
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
.content {
  padding-left: max(30px, env(safe-area-inset-left));
  padding-right: max(30px, env(safe-area-inset-right));
  padding-bottom: max(60px, env(safe-area-inset-bottom));
}
.ai-fab {
  right: max(26px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
}
.toast-root {
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
}
.ai-dock { padding-bottom: env(safe-area-inset-bottom); }
.modal-foot { padding-bottom: max(18px, env(safe-area-inset-bottom)); }

/* ============================================================
   TOUCH TARGETS
   Apple HIG asks for 44pt, Material for 48dp. Rather than inflate
   the visuals everywhere, controls keep their drawn size and gain
   an invisible centred hit area via ::after on coarse pointers.
   ============================================================ */
@media (pointer: coarse) {
  .act-btn, .page-btn, .icon-btn, .modal-close, .toast-close,
  .sidebar-collapse-btn, .checkbox, .perm-check, .rating-stars .rs,
  .star-btn, .link-btn {
    position: relative;
  }
  /* ::before, not ::after — .act-btn carries data-tip, whose tooltip is
     rendered through [data-tip]::after and would be clobbered. */
  .act-btn::before, .page-btn::before, .icon-btn::before, .modal-close::before,
  .toast-close::before, .sidebar-collapse-btn::before, .checkbox::before,
  .perm-check::before, .rating-stars .rs::before, .star-btn::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    /* purely a hit area — never paints, never blocks the icon */
    pointer-events: auto;
  }
  .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .btn-sm { min-height: 40px; }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
  .dropdown-link { padding-top: 12px; padding-bottom: 12px; }
  .tab { padding-top: 14px; padding-bottom: 14px; }
  .list-row, .search-item, .notif-row { min-height: 48px; }
  .form-field input, .form-field select, .form-field textarea,
  .toolbar-search input, .select { min-height: 44px; }
  .switch-track { width: 50px; height: 30px; }
  .switch-track::after { width: 24px; height: 24px; }
  .switch input:checked + .switch-track::after { transform: translateX(20px); }
}

/* ============================================================
   RESPONSIVE
   ≥1600 ultrawide · 1200 laptop · 980 tablet-landscape
   900 tablet-portrait (sidebar goes off-canvas) · 640 phone
   400 small phone · plus a landscape-phone height rule
   ============================================================ */

/* Ultrawide: stop dashboards stretching to unreadable line lengths. */
@media (min-width: 1600px) {
  .content > .page { max-width: 1560px; margin-inline: auto; }
}

@media (max-width: 1200px) {
  .g-kpi { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: 1fr; }
  .g-2-1, .g-1-2, .g-2 { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 380px; }
  .rbac-layout { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: repeat(2, 1fr); }
  .rbac-matrix { min-width: 620px; }          /* scrolls inside .table-wrap */
}
@media (max-width: 900px) {
  .sidebar {
    /* above the scrim (55) but below the AI dock (310) and modals (300),
       so an open drawer never sits on top of a dialog. */
    position: fixed; left: 0; z-index: 100;
    transform: translateX(-100%); transition: transform .25s;
    box-shadow: none;
  }
  .sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  /* The FAB floated over the scrim and stayed tappable behind the drawer. */
  .nav-open .ai-fab { display: none; }
  .menu-toggle { display: grid; }
  .search-kbd { display: none; }
  .content { padding: 20px max(16px, env(safe-area-inset-left)) 50px max(16px, env(safe-area-inset-right)); }
  .profile-meta { display: none; }
  .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .chat-wrap { height: calc(100vh - 170px); height: calc(100dvh - 170px); }
}
@media (max-width: 640px) {
  .g-kpi { grid-template-columns: 1fr; }
  .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .form-grid, .info-grid, .filter-panel { grid-template-columns: 1fr; }
  .page-title { font-size: 25px; }
  .page-head { gap: 12px; margin-bottom: 18px; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* The action cluster was eating 232px of a 375px bar, leaving search
     ~59px — too narrow to read or tap. Drop the secondary affordances
     (messages, divider, profile chevron) so search stays usable. */
  .topbar-search { max-width: none; min-width: 0; }
  #messagesDropdown, .topbar-divider, .profile-btn .chev { display: none; }
  .topbar-actions { gap: 2px; }
  .icon-btn { width: 40px; height: 40px; }
  .profile-btn { padding: 4px; }

  /* Dropdowns were 340px wide and ran off the left edge of a 320px screen.
     Anchor them to the viewport instead of the trigger. */
  .dropdown-menu, .dropdown-menu-wide {
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    left: 8px; right: 8px;
    width: auto; min-width: 0; max-width: none;
    max-height: calc(100vh - var(--topbar-h) - 24px);
    max-height: calc(100dvh - var(--topbar-h) - 24px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .dd-scroll { max-height: none; }

  /* Toast overhung the left edge at 300px min-width. */
  .toast-root { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .toast { min-width: 0; max-width: none; width: 100%; }

  /* Modals read better as near-full-height sheets on a phone. */
  .modal { margin: 0; width: 100%; max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
           position: fixed; left: 0; right: 0; bottom: 0; max-height: 94vh; max-height: 94dvh; }
  .modal-head { padding: 18px 18px 14px; }
  .modal-body { padding: 18px; }
  .modal-foot { padding: 14px 18px max(14px, env(safe-area-inset-bottom)); flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }

  /* Kanban: a 288px column left 32px of the next one visible, so the board
     didn't read as scrollable. Show a slice of the neighbour and snap. */
  .kanban { gap: 12px; scroll-padding-left: 16px; }
  .kanban-col { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; max-height: none; }
  .kanban-cards { max-height: 60vh; }

  .ai-dock { width: 100%; max-width: 100%; }
  .split-list { max-height: 320px; }
  .card-head { padding: 14px 16px; }
  .card-body, .card-pad { padding: 16px; }
  .kpi { padding: 16px; }
  .tabs { gap: 0; }
  .cal-cell { min-height: 76px; }
  .chat-msg { gap: 10px; }
  .brand-hero .card-body { padding: 22px 18px; }
  .stepper { overflow-x: auto; padding-bottom: 6px; }
  .step-label { display: none; }        /* numbers alone keep the stepper legible */
  .step-line { margin: 0 8px; }

  /* Data tables: let the row scroll sideways at a legible column width
     rather than squeezing names onto three lines. The wrapper already
     handles the horizontal gesture. */
  table.data { min-width: 720px; }
  table.data thead th { padding: 10px 12px; }
  table.data tbody td { padding: 11px 12px; }
  .user-cell .cell-primary { white-space: nowrap; }
  .user-cell .cell-sub {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px;
  }
  /* Sticky identity column keeps context while scrolling the rest. */
  table.data thead th:nth-child(2),
  table.data tbody td:nth-child(2) {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg-elev);
    box-shadow: 1px 0 0 var(--border);
  }
  table.data tbody tr:hover td:nth-child(2) { background: var(--bg-sunken); }
}

/* Small phones (iPhone SE / older Android at 320–400px). */
@media (max-width: 400px) {
  .content { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .page-title { font-size: 22px; }
  .kpi-value { font-size: 25px; }
  .sidebar { width: min(88vw, var(--sidebar-w)); }
  .toolbar-search { max-width: none; }
  .pagination { justify-content: center; }
  .page-info { width: 100%; text-align: center; }
}

/* Landscape phones: only ~375px of height, most of it chrome. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --topbar-h: 52px; }
  .content { padding-top: 14px; padding-bottom: 28px; }
  .page-head { margin-bottom: 14px; }
  .chat-wrap { height: calc(100vh - 120px); height: calc(100dvh - 120px); }
  .kanban-col { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .split-list, .split-detail { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  .modal { max-height: 96vh; max-height: 96dvh; }
  .sidebar-footer { display: none; }   /* reclaim height in the drawer */
}

/* Foldables / very short windows on desktop. */
@media (max-height: 420px) {
  .ai-fab { width: 46px; height: 46px; }
  .ai-fab svg { width: 22px; height: 22px; }
}