/* ═══════════════════════════════════════════════════════════════════
   SONGLINE ADMIN — v2 design system
   Drop-in replacement for server/templates/admin/assets/app.css
   Aligned to marketing visual language (paper + Fraunces + ink)
   Date: 17 May 2026 · Spec author: design

   What's new vs v1:
   - Marketing tokens canonical (paper / ink / rule). Legacy --bg / --text /
     --border kept as ALIASES so unmigrated inline styles still work.
   - Inter body, Fraunces for h1–h3, JetBrains Mono for labels/codes.
   - Tables get desktop overflow-x:auto + fade affordance. Fixes the
     silent column-clipping bug (stress-test finding 01).
   - Banner library extracted (.banner / .banner-warning / .banner-error /
     .banner-info / .banner-success / .banner-neutral). Replaces ~40+
     inline-hex hand-rolled banners across app.js + pages/*.js.
   - Unified chat surface for Sunny + Inbox under .chat-*. Sunny-specific
     additions (.sunny-input, .sunny-draft-*) layer on top.
   - .topbar + .filter-bar are real shared components.
   - Sidebar accent (--sidebar-accent) preserves per-agency primaryColor.
   - Dark sidebar variant (body.dark-side) retained.
   - Mobile responsive preserved + tightened.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. RESET + TOKENS ═══ */

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

:root{
  /* Brand */
  --teal:#00C9A7; --teal-deep:#00A88B; --teal-soft:#E7FAF5; --teal-ring:#B9EEDF;
  --coral:#FF6B4A; --coral-deep:#E85633; --coral-soft:#FFE3DA;
  --sun:#FFB830; --sun-deep:#DFA215; --sun-soft:#FFF3D2; --sun-ring:#F3DFA0;
  --mint:#3E9D6F; --mint-deep:#1B6B40; --mint-soft:#E2F4EA; --mint-ring:#BCE0CC;
  --purple:#845EC2; --purple-soft:#ECE4F8; --purple-ring:#D4C5EC;
  --sky:#1AB9D8; --sky-soft:#E0F4FC; --sky-ring:#BCDDE9;
  --indigo:#5B6EE8;

  /* Surfaces — warm paper canvas */
  --paper:#F6F5F2; --paper-2:#EFECE4; --paper-3:#E7E3D6;
  --cream:#FFF7F0; --sand:#FFF9EE;
  --card:#FFFFFF;
  --rule:#E6E2D6; --rule-2:#F0EEE7;

  /* Ink — warm blacks */
  --ink:#0E0E0C; --ink-2:#2A2A28; --ink-3:#6A6760; --ink-4:#9A978F;

  /* Per-agency accent (overridden at runtime via JS) */
  --primary:#00C9A7;
  --primary-deep:#00A88B;
  --primary-soft:#E7FAF5;
  --primary-ring:#B9EEDF;
  --sidebar-accent:var(--primary);

  /* Sidebar nav spacing — separate tokens so groups read as clusters
     against tighter within-group rhythm. Visibly larger gap between groups. */
  --nav-item-gap:1px;     /* between items in the same group */
  --nav-group-gap:18px;   /* between groups (in addition to label height) */
  --nav-label-mb:6px;     /* under the group label, before its first item */

  /* Legacy aliases — kept so old inline styles still resolve to the right values */
  --bg:var(--paper);
  --text:var(--ink);
  --textLight:var(--ink-3);
  --border:var(--rule);
  --tealDark:var(--teal-deep);

  /* Radii + shadow scale */
  --r-sm:7px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:18px;
  --shadow-card:0 1px 0 rgba(14,14,12,0.02), 0 4px 14px -8px rgba(14,14,12,0.08);
  --shadow-hover:0 2px 0 rgba(14,14,12,0.02), 0 18px 36px -22px rgba(14,14,12,0.16);
  --shadow-modal:0 24px 60px -28px rgba(14,14,12,0.30), 0 8px 20px -10px rgba(14,14,12,0.12);
}

/* ═══ 2. BASE TYPOGRAPHY ═══ */

html,body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}

h1,h2,h3,h4,h5,h6{margin:0;font-weight:500;color:var(--ink);letter-spacing:-0.02em}
h1{font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:32px; line-height:1.1; letter-spacing:-0.025em}
h2{font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:22px; letter-spacing:-0.02em}
h3{font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:18px; letter-spacing:-0.015em}
h4{font-size:14px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-3); font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:500}

em{font-style:italic; color:var(--ink-3); font-weight:400}

.serif{font-family:"Fraunces", Georgia, serif; font-weight:500; letter-spacing:-0.02em}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace; letter-spacing:0.04em}
.eyebrow{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}

/* ═══ 3. FORM CONTROLS (base) ═══ */

button{cursor:pointer;border:none;font-family:inherit;font-size:14px}
input,select,textarea{
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
  padding:9px 12px 10px;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  outline:none;
  width:100%;
  transition:border-color 0.15s, box-shadow 0.15s;
}
select{padding:7px 12px 9px; min-height:38px}
input[type="radio"], input[type="checkbox"]{width:auto; padding:0; border:none; border-radius:0}
input::placeholder, textarea::placeholder{color:var(--ink-4)}
input:focus, select:focus, textarea:focus{
  border-color:var(--ink-2);
  box-shadow:0 0 0 3px rgba(14,14,12,0.05);
}
textarea{resize:vertical; min-height:64px}

/* Old .filter-ctrl override — kept as compatibility shim */
.filter-ctrl{width:auto !important; padding:6px 10px !important; font-size:13px !important}

/* Fee picker / occupation picker — searchable combobox used in payment
   modals + task editors. CSS got dropped in the May 2026 v2 redesign and
   the dropdown started rendering as a permanently-visible block list with
   no selection affordance; restored here. */
.fee-picker, .occ-picker{position:relative}
.fee-picker .fee-dd, .occ-picker .occ-dd{
  display:none;
  position:absolute;
  top:calc(100% + 4px); left:0; right:0;
  z-index:50;
  max-height:280px;
  overflow-y:auto;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  box-shadow:0 6px 24px rgba(14,14,12,0.08);
  padding:4px 0;
}
.fee-picker.open .fee-dd, .occ-picker.open .occ-dd{display:block}
.fee-dd > div, .occ-dd > div{
  padding:8px 12px;
  cursor:pointer;
  font-size:13px;
  line-height:1.35;
  transition:background-color 0.1s;
}
.fee-dd > div:hover, .occ-dd > div:hover{background:var(--paper-2)}
.fee-dd > div.selected, .occ-dd > div.selected{
  background:var(--teal-soft);
  font-weight:600;
}
.fee-dd > div.selected::before, .occ-dd > div.selected::before{
  content:"✓ ";
  color:var(--teal-deep);
  font-weight:700;
}

/* ═══ 4. SHELL — .app, .sidebar, .main, .mobile-header ═══ */

.app{display:flex; height:100vh; overflow:hidden}

.main{
  flex:1; min-width:0;
  padding:0;
  overflow-y:auto;
  height:100%;
  background:var(--page-bg, var(--paper));     /* per-agency tinted bg if set */
}

/* ═══ 5. SIDEBAR ═══ */

.sidebar{
  width:248px;
  flex-shrink:0;
  background:var(--sidebar-bg, var(--paper-2));   /* tinted per-agency, or cream default */
  color:var(--sidebar-fg, var(--ink));
  border-right:1px solid var(--sidebar-rule, var(--rule));
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
  transition:width 0.2s ease;
}

.sidebar .logo{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  white-space:nowrap;
}
.sidebar .logo .brand-row{
  display:flex; align-items:center; gap:10px; min-width:0; flex:1;
}
.sidebar .logo .brand-mark{
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  overflow:hidden;
}
.sidebar .logo .brand-mark img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
.sidebar .logo .brand-mark svg{
  width:100%; height:100%;
}
.sidebar .logo h2{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:17px;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.1;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar .logo .logo-sub{
  display:block;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:2px;
}

.sidebar-toggle-btn{
  width:28px; height:28px;
  background:var(--card);
  border:1px solid var(--rule);
  color:var(--ink-3);
  font-size:14px;
  font-weight:500;
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:all 0.15s;
}
.sidebar-toggle-btn:hover{color:var(--ink); border-color:var(--ink-2); background:var(--card)}

.sidebar-agency-name{
  font-family:"Fraunces", Georgia, serif;
  font-size:15px; font-weight:500;
  letter-spacing:-0.015em;
  color:var(--ink);
  padding:10px 18px 8px;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar.collapsed .sidebar-agency-name{display:none}

.sidebar-user{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  margin:10px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  white-space:nowrap;
}
.sidebar-user-avatar{
  width:30px; height:30px; flex-shrink:0;
  border-radius:50%;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600;
  font-family:"Inter", sans-serif;
}
.sidebar-user-info{flex:1; min-width:0; overflow:hidden; line-height:1.2}
.sidebar-user-name{
  font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis;
}
.sidebar-user-role{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-3);
  margin-top:2px;
}
.sidebar-signout-btn{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px; letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:transparent;
  border:1px solid var(--rule);
  padding:4px 8px;
  border-radius:5px;
  flex-shrink:0; white-space:nowrap;
  transition:all 0.15s;
}
.sidebar-signout-btn:hover{color:var(--ink); border-color:var(--ink-2)}

.sidebar-lang-selector{
  display:inline-flex; gap:2px;
  margin:0 10px 12px;
  padding:3px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
}
.sidebar-lang-btn{
  flex:1;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px; font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase;
  background:transparent;
  border:0;
  padding:5px 10px;
  border-radius:5px;
  color:var(--ink-3);
  transition:all 0.15s;
}
.sidebar-lang-btn:hover{color:var(--ink)}
.sidebar-lang-btn.active{background:var(--ink); color:#fff}
.sidebar.collapsed .sidebar-lang-selector{display:none}

.sidebar nav{flex:1; overflow-y:auto; padding:6px 8px 16px; display:flex; flex-direction:column}
.sidebar nav .nav-group{
  display:flex; flex-direction:column;
  gap:var(--nav-item-gap);
  margin-bottom:var(--nav-group-gap);
}
.sidebar nav .nav-group:last-child{margin-bottom:0}
.sidebar nav .nav-group-label{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-4);
  padding:0 12px;
  margin-bottom:var(--nav-label-mb);
  user-select:none;
  pointer-events:none;       /* spec — non-interactive, static text */
}
.sidebar nav a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:13.5px;
  font-weight:500;
  line-height:1.2;
  position:relative;
  transition:background 0.12s, color 0.12s;
}
.sidebar nav a svg{width:16px; height:16px; flex-shrink:0; opacity:0.85}
.sidebar nav a .nav-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar nav a .count{
  margin-left:auto; flex-shrink:0;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px;
  color:var(--ink-3);
  background:var(--card);
  border:1px solid var(--rule);
  padding:1px 6px; border-radius:999px;
  font-weight:500; letter-spacing:0.04em;
}
.sidebar nav a:hover{background:var(--card); color:var(--ink)}
.sidebar nav a.active{
  background:var(--card);
  color:var(--ink);
  font-weight:600;
  box-shadow:inset 0 0 0 1px var(--rule);
}
.sidebar nav a.active::before{
  content:"";
  position:absolute;
  left:-8px; top:6px; bottom:6px;
  width:3px;
  background:var(--sidebar-accent);
  border-radius:0 3px 3px 0;
}
.sidebar.collapsed nav a{padding:10px 0; justify-content:center; gap:0}
.sidebar.collapsed nav a.active::before{left:0; top:6px; bottom:6px}
.sidebar.collapsed nav a .nav-label,
.sidebar.collapsed nav a .count{display:none}
/* Collapsed state — group labels disappear; replace with a hairline rule
   between groups so the clustering rhythm survives the icons-only view. */
.sidebar.collapsed nav .nav-group-label{display:none}
.sidebar.collapsed nav .nav-group{
  margin-bottom:8px;
  padding-bottom:8px;
  border-bottom:1px solid var(--rule-2);
}
.sidebar.collapsed nav .nav-group:last-child{border-bottom:0; padding-bottom:0}
.sidebar.collapsed .sidebar-user{padding:10px 0; margin:10px 6px; justify-content:center}
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .sidebar-signout-btn{display:none}

.sidebar-footer{
  padding:10px 12px 14px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sidebar-footer-meta{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px;
  color:var(--ink-4);
  letter-spacing:0.06em;
  line-height:1.6;
  padding:0 6px;
  display:flex;
  flex-direction:column;
}
.sidebar-footer-version{color:var(--ink-3); font-weight:500}

/* Per-agent sidebar theme toggle — matches the language selector style */
.sidebar-theme-toggle{
  display:flex; gap:2px;
  padding:3px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
}
.sidebar-theme-toggle button{
  flex:1;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-family:"Inter", sans-serif;
  font-size:11.5px; font-weight:500;
  background:transparent;
  border:0;
  padding:5px 6px;
  border-radius:5px;
  color:var(--ink-3);
  transition:all 0.15s;
  min-width:0;
}
.sidebar-theme-toggle button:hover{color:var(--ink)}
.sidebar-theme-toggle button.on{background:var(--ink); color:#FFF}
.sidebar.collapsed .sidebar-theme-toggle{display:none}
.sidebar.collapsed .sidebar-footer{display:none}
.sidebar.collapsed{width:60px}
/* When collapsed, the logo block stacks vertically: brand-mark on top
   (centered, click to navigate to dashboard), toggle button below (click
   to expand the sidebar). Without the column layout the 32px brand-mark +
   28px toggle button + gap would overflow the 60px sidebar width and the
   brand-mark would silently disappear. */
.sidebar.collapsed .logo{padding:14px 0 12px; flex-direction:column; align-items:center; gap:10px; justify-content:flex-start}
.sidebar.collapsed .logo .brand-row{justify-content:center; flex:none; min-width:0}
.sidebar.collapsed .logo .brand-mark{width:36px; height:36px}
.sidebar.collapsed .logo h2,
.sidebar.collapsed .logo .logo-sub,
.sidebar.collapsed .logo .brand-row > div:not(.brand-mark){display:none}

/* ═══ 6. DARK SIDEBAR (per-agency variant) ═══ */

body.dark-side{
  --sidebar-bg:#15140F;
  --sidebar-fg:#F6F5F2;
  --sidebar-rule:#26241D;
}
body.dark-side .sidebar .logo h2,
body.dark-side .sidebar-agency-name{color:#F6F5F2}
body.dark-side .sidebar .logo .logo-sub,
body.dark-side .sidebar-user-role,
body.dark-side .sidebar-signout-btn{color:#86847B}
body.dark-side .sidebar-toggle-btn{background:#22201A; border-color:#2E2C24; color:#86847B}
body.dark-side .sidebar-toggle-btn:hover{color:#FFF; border-color:#5A584C; background:#22201A}
body.dark-side .sidebar-user{background:#22201A; border-color:#2E2C24}
body.dark-side .sidebar-user-avatar{background:#F6F5F2; color:#15140F}
body.dark-side .sidebar-user-name{color:#F6F5F2}
body.dark-side .sidebar-signout-btn{border-color:#2E2C24}
body.dark-side .sidebar-signout-btn:hover{color:#FFF; border-color:#5A584C}
body.dark-side .sidebar-lang-selector{background:#22201A; border-color:#2E2C24}
body.dark-side .sidebar-lang-btn{color:#86847B}
body.dark-side .sidebar-lang-btn.active{background:#F6F5F2; color:#15140F}
body.dark-side .sidebar nav a{color:#C5C2B6}
body.dark-side .sidebar nav a:hover{background:#22201A; color:#FFF}
body.dark-side .sidebar nav a.active{background:#22201A; color:#FFF; box-shadow:inset 0 0 0 1px #2E2C24}
body.dark-side .sidebar nav a .count{background:#15140F; border-color:#2E2C24; color:#86847B}
body.dark-side .sidebar nav .nav-group-label{color:#5A584C}
body.dark-side .sidebar.collapsed nav .nav-group{border-bottom-color:#2E2C24}
body.dark-side .sidebar-footer-version{color:#86847B}
body.dark-side .sidebar-theme-toggle{background:#22201A; border-color:#2E2C24}
body.dark-side .sidebar-theme-toggle button{color:#86847B}
body.dark-side .sidebar-theme-toggle button:hover{color:#FFF}
body.dark-side .sidebar-theme-toggle button.on{background:#F6F5F2; color:#15140F}

/* AGENCY-TINTED SIDEBAR (existing admin's behavior — sidebar bg derived
   from agent.primaryColor, darkened). The JS sets --sidebar-bg /
   --sidebar-fg / --sidebar-rule on :root or body. Same rules as dark-side
   for text/contrast — apply via body.tinted-side. */
body.tinted-side .sidebar .logo h2,
body.tinted-side .sidebar-agency-name{color:rgba(255,255,255,0.95)}
body.tinted-side .sidebar .logo .logo-sub,
body.tinted-side .sidebar-user-role,
body.tinted-side .sidebar-signout-btn,
body.tinted-side .sidebar-footer{color:rgba(255,255,255,0.55)}
body.tinted-side .sidebar-toggle-btn{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.7)}
body.tinted-side .sidebar-toggle-btn:hover{color:#FFF; border-color:rgba(255,255,255,0.4); background:rgba(255,255,255,0.18)}
body.tinted-side .sidebar-user{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14)}
body.tinted-side .sidebar-user-avatar{background:rgba(255,255,255,0.95); color:#0E0E0C}
body.tinted-side .sidebar-user-name{color:#FFF}
body.tinted-side .sidebar-signout-btn{border-color:rgba(255,255,255,0.20)}
body.tinted-side .sidebar-signout-btn:hover{color:#FFF; border-color:rgba(255,255,255,0.5); background:rgba(255,255,255,0.10)}
body.tinted-side .sidebar-lang-selector{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14)}
body.tinted-side .sidebar-lang-btn{color:rgba(255,255,255,0.6)}
body.tinted-side .sidebar-lang-btn.active{background:rgba(255,255,255,0.95); color:#0E0E0C}
body.tinted-side .sidebar nav a{color:rgba(255,255,255,0.75)}
body.tinted-side .sidebar nav a:hover{background:rgba(255,255,255,0.10); color:#FFF}
body.tinted-side .sidebar nav a.active{background:rgba(255,255,255,0.16); color:#FFF; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.20)}
body.tinted-side .sidebar nav a.active::before{background:rgba(255,255,255,0.85)}
body.tinted-side .sidebar nav a .count{background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.85)}
body.tinted-side .sidebar nav .nav-group-label{color:rgba(255,255,255,0.45)}
body.tinted-side .sidebar.collapsed nav .nav-group{border-bottom-color:rgba(255,255,255,0.12)}
body.tinted-side .sidebar-footer-version{color:rgba(255,255,255,0.65)}
body.tinted-side .sidebar-theme-toggle{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.14)}
body.tinted-side .sidebar-theme-toggle button{color:rgba(255,255,255,0.6)}
body.tinted-side .sidebar-theme-toggle button:hover{color:#FFF}
body.tinted-side .sidebar-theme-toggle button.on{background:rgba(255,255,255,0.95); color:#0E0E0C}

/* ═══ 7. MOBILE HEADER ═══ */

.mobile-header{
  display:none;
  align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--paper-2);
  border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:100;
}
.mobile-header h2{
  font-family:"Fraunces", Georgia, serif;
  font-size:16px; font-weight:500;
  color:var(--ink);
  flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-header .agent-chip{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px;
  color:var(--ink-3);
  letter-spacing:0.06em;
}
.hamburger{
  display:none;
  width:36px; height:36px;
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  color:var(--ink-2);
  font-size:16px;
  line-height:1;
  flex-shrink:0;
}
.hamburger:hover{border-color:var(--ink-2)}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(14,14,12,0.4); z-index:150}

/* ═══ 8. TOPBAR ═══ */

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  /* Horizontal padding bumped from 32px → 40px so the topbar (and its h1)
     doesn't sit flush with the sidebar on the left or the viewport on the
     right. Pages using .page-body match — see rule below. */
  padding:32px 40px 26px;
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  flex-wrap:wrap;
}
.topbar .topbar-titles{display:flex; flex-direction:column; gap:8px; min-width:0; flex:1}
.topbar h1{
  font-size:32px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.025em;
  overflow-wrap:break-word;
}
.topbar h1.large{font-size:40px}
.topbar h1 em{font-style:italic; color:var(--ink-3); font-weight:400}

/* Crumb — shared across any topbar / hero context */
.crumb{
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.crumb > *{white-space:nowrap}        /* finding 03 */
.crumb .sep{color:var(--ink-4)}
.crumb a{color:var(--ink-3); transition:color 0.15s}
.crumb a:hover{color:var(--ink)}
.topbar .topbar-meta{
  display:flex; align-items:center; gap:14px;
  flex-wrap:wrap;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-3);
}
.topbar .topbar-meta > span{white-space:nowrap}   /* finding 11 */
.topbar .topbar-meta .dot{
  display:inline-block; width:6px; height:6px;
  border-radius:50%;
  background:var(--sidebar-accent);
  margin-right:5px;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:0.4}}
.topbar .topbar-actions{display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap}

.agent-name{font-size:13px; color:var(--ink-3)}

/* Page body — content under topbar. Horizontal padding matches .topbar
   (40px) so left + right gutters are consistent above + below the divider. */
.page-body{padding:28px 40px 64px}

/* ═══ 9. BUTTONS ═══ */

.btn-primary, .btn-secondary, .btn-danger, .btn-ink, .btn-coral{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 16px;
  border-radius:var(--r-sm);
  font-family:"Inter", sans-serif;
  font-size:13.5px;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
  text-decoration:none;
  white-space:nowrap;
}
.btn-primary svg, .btn-secondary svg, .btn-danger svg, .btn-ink svg, .btn-coral svg{
  width:14px; height:14px;
}

.btn-primary{
  background:var(--primary-deep);
  color:#FFF;
  border-color:var(--primary-deep);
}
.btn-primary:hover{background:var(--primary); border-color:var(--primary)}
.btn-primary:active{transform:translateY(1px)}

.btn-secondary{
  background:var(--card);
  color:var(--ink-2);
  border-color:var(--rule);
}
.btn-secondary:hover{border-color:var(--ink-2); color:var(--ink)}
.btn-secondary:active{transform:translateY(1px)}

.btn-ink{
  background:var(--ink);
  color:#FFF;
  border-color:var(--ink);
}
.btn-ink:hover{background:#000}

.btn-danger{
  background:#FFE9E3;
  color:#B13F1F;
  border-color:#F3C2B3;
}
.btn-danger:hover{background:#FCD8CC; border-color:#E8553A}

.btn-coral{
  background:var(--card);
  color:var(--coral-deep);
  border-color:var(--coral-soft);
}
.btn-coral:hover{background:var(--coral-soft); border-color:var(--coral-deep)}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-ink:disabled,
.btn-coral:disabled{opacity:0.4; cursor:not-allowed; pointer-events:none; transform:none}

.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:6px}
.btn-tiny{
  padding:4px 9px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:5px;
}

/* Icon-only button (used inline in tables, kanban headers) */
.iconbtn{
  width:28px; height:28px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  color:var(--ink-3);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:all 0.15s;
}
.iconbtn:hover{color:var(--ink); border-color:var(--ink-2)}
.iconbtn.danger:hover{color:#B13F1F; border-color:#E8553A; background:#FFE9E3}
.iconbtn svg{width:13px; height:13px}

/* ═══ 10. CARDS ═══ */

.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:22px 24px;
  margin-bottom:14px;
}
.card-title{
  font-family:"Fraunces", Georgia, serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 0 14px;
}
.card-title.with-action{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.card .card-eyebrow{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:6px;
}
.card .card-foot{
  margin-top:14px; padding-top:14px;
  border-top:1px dashed var(--rule);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}

.stat-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
}
.stat-card .value{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:30px;
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1;
}
.stat-card .label{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:2px;
}
.stat-card .delta{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-3);
  margin-top:6px;
  letter-spacing:0.04em;
}
.stat-card.accent .value{color:var(--primary-deep)}

/* ═══ 11. BADGES + PILLS ═══ */

.badge, .pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-family:"Inter", sans-serif;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:-0.005em;
  border:1px solid transparent;
  background:var(--paper-2);
  color:var(--ink-2);
  white-space:nowrap;     /* finding 09: pills never wrap */
}
.badge-green,  .pill-mint     {background:var(--mint-soft);   border-color:var(--mint-ring);   color:var(--mint-deep)}
.badge-yellow, .pill-warning  {background:var(--sun-soft);    border-color:var(--sun-ring);    color:#8A6500}
.badge-orange, .pill-orange   {background:#FFE8D8;            border-color:#F3C8A6;            color:#9A4F12}
.badge-red,    .pill-error    {background:#FFE9E3;            border-color:#F3C2B3;            color:#B13F1F}
.badge-blue,   .pill-info     {background:var(--sky-soft);    border-color:var(--sky-ring);    color:#0E6B95}
.badge-purple, .pill-purple   {background:var(--purple-soft); border-color:var(--purple-ring); color:#574087}
.badge-gray,   .pill-muted    {background:var(--paper-2);     border-color:var(--rule);        color:var(--ink-3)}
.badge-amber                  {background:var(--sun-soft);    border-color:var(--sun-ring);    color:#8A6500}
.pill-primary                 {background:var(--primary-soft); border-color:var(--primary-ring); color:var(--primary-deep)}

/* AU state pills */
.pill-state{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:10.5px; letter-spacing:0.06em; padding:2px 8px}
.pill-state.NSW{background:var(--sky-soft); border-color:var(--sky-ring); color:#0E6B95}
.pill-state.VIC{background:var(--purple-soft); border-color:var(--purple-ring); color:#574087}
.pill-state.QLD{background:#FDE9E3; border-color:#F3C2B3; color:#A13B1F}
.pill-state.WA{background:var(--sun-soft); border-color:var(--sun-ring); color:#8A6500}
.pill-state.SA{background:var(--mint-soft); border-color:var(--mint-ring); color:var(--mint-deep)}
.pill-state.NT{background:#FBE1EE; border-color:#ECC5D9; color:#9A2E6E}
.pill-state.ACT{background:var(--paper-2); border-color:var(--rule); color:var(--ink-2)}
.pill-state.TAS{background:var(--sky-soft); border-color:var(--sky-ring); color:#0E6B95}

/* Tag — table cell tag (less round than pill) */
.tag{
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 9px; border-radius:6px;
  font-family:"Inter", sans-serif;
  font-size:11.5px; font-weight:500;
  background:var(--paper); border:1px solid var(--rule);
  color:var(--ink-2);
  white-space:nowrap;
}

/* ═══ 12. BANNERS (replaces ~40 inline hex banner blocks) ═══ */

.banner{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px 14px 22px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  position:relative;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
  margin-bottom:10px;
}
.banner::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--ink-4);
}
.banner .ico{
  width:28px; height:28px; flex-shrink:0;
  border-radius:var(--r-sm);
  background:var(--paper-2); border:1px solid var(--rule); color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
}
.banner .ico svg{width:14px; height:14px}
.banner .banner-body{flex:1; min-width:0}
.banner .banner-body .b-title{font-weight:600; color:var(--ink); display:block; line-height:1.3; margin-bottom:2px}
.banner .banner-actions{display:flex; gap:6px; align-items:center; flex-shrink:0}
.banner .b-meta{font-family:"JetBrains Mono", ui-monospace, monospace; font-size:11px; color:var(--ink-3); letter-spacing:0.04em}

.banner-warning::before{background:var(--sun)}
.banner-warning .ico{background:var(--sun-soft); border-color:var(--sun-ring); color:#8A6500}

.banner-error::before{background:var(--coral)}
.banner-error .ico{background:#FFE9E3; border-color:#F3C2B3; color:#B13F1F}

.banner-success::before{background:var(--mint)}
.banner-success .ico{background:var(--mint-soft); border-color:var(--mint-ring); color:var(--mint-deep)}

.banner-info::before{background:var(--primary)}
.banner-info .ico{background:var(--primary-soft); border-color:var(--primary-ring); color:var(--primary-deep)}

.banner-neutral::before{background:var(--ink-4)}
.banner-neutral .ico{background:var(--paper-2); border-color:var(--rule); color:var(--ink-2)}

/* Chevron rotates when banner is open. The expandable content lives inside
   .banner-body .banner-detail (hidden by default, revealed when .is-open). */
.banner .banner-actions .iconbtn svg{transition:transform 0.18s ease}
.banner.is-open .banner-actions .iconbtn svg{transform:rotate(90deg)}
.banner .banner-detail{display:none; margin-top:10px}
.banner.is-open .banner-detail{display:block}
/* When the banner content is always-visible (no .banner-detail) the click
   just rotates the chevron — useful for short summary banners. */

/* Banner — pinnable variant with a corner ribbon (used on client-detail follow-up cards) */
.banner-pinned{padding-right:60px}
.banner-pinned::after{
  content:"PINNED";
  position:absolute; top:10px; right:12px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px; letter-spacing:0.08em; font-weight:600;
  color:var(--sun-deep);
  background:var(--sun-soft);
  border:1px solid var(--sun-ring);
  padding:2px 7px; border-radius:5px;
}

/* Helper (a quieter banner — full-width info row, no surface, used for filter explanations) */
.helper{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:var(--primary-soft);
  border:1px dashed var(--primary-ring);
  border-radius:var(--r-md);
  font-size:12.5px;
  color:var(--primary-deep);
}
.helper svg{width:14px; height:14px; flex-shrink:0}
.helper.subtle{background:var(--card); border-color:var(--rule); border-style:solid; color:var(--ink-3)}
.helper.subtle a{color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}

/* ═══ 13. TABLES ═══ */
/*  Finding 01 — tables get desktop overflow-x:auto. .card.has-table wraps a
    table that may overflow. Without this, columns silently clip below ~1400px. */

.table-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  margin-bottom:14px;
  overflow:hidden;        /* clip the corners */
  position:relative;
}
.table-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-color:var(--ink-4) transparent;
}
.table-scroll::-webkit-scrollbar{height:10px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--ink-4); border-radius:5px}
.table-scroll::-webkit-scrollbar-track{background:transparent}

/* Right-edge fade — hint that more columns exist offscreen.
   Disappears once user scrolls to end (JS toggles .scrolled-end). */
.table-card::after{
  content:"";
  position:absolute; top:0; right:0; bottom:10px; width:32px;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--card));
  pointer-events:none;
  opacity:0;
  transition:opacity 0.18s;
}
.table-card.is-scrollable:not(.scrolled-end)::after{opacity:1}

table{width:100%; border-collapse:collapse; min-width:920px}
table.is-wide{min-width:1280px}        /* EOI tracker etc. */
table.is-extra-wide{min-width:1480px}  /* Audit log etc. */
th{
  text-align:left;
  padding:12px 18px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  font-weight:500;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.1em;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
th.right{text-align:right}
td{
  padding:14px 18px;
  border-bottom:1px solid var(--rule-2);
  color:var(--ink-2);
  font-size:13.5px;
  vertical-align:middle;
}
td.right{text-align:right}
tr:last-child td{border-bottom:0}
tr:hover td{background:var(--sand)}
td .who{font-weight:600; color:var(--ink); line-height:1.2}
td .who .email{
  display:block;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11.5px;
  color:var(--ink-3);
  font-weight:400;
  margin-top:2px;
}
td .num{font-family:"JetBrains Mono", ui-monospace, monospace; letter-spacing:0.04em}
td .pts{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--ink);
}
td .pts.high{color:var(--mint-deep)}
td .date{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:12px;
  color:var(--ink-2);
  letter-spacing:0.04em;
  white-space:nowrap;       /* finding 14: dates don't break mid-word */
}
td .em{color:var(--ink-4); font-family:"JetBrains Mono", ui-monospace, monospace}
td .actions-cell{display:flex; gap:4px; justify-content:flex-end}

/* Table action-key strip (the row above the EOI table showing shortcut hints) */
.table-actions-key{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:10px 18px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.table-actions-key .k{display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.table-actions-key svg{width:11px; height:11px}

/* ═══ 14. FILTER BAR (extracted shared component) ═══ */

.filter-bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  margin-bottom:14px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  flex-wrap:wrap;
}
.filter-bar .select-like{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  font-size:13px;
  color:var(--ink-2);
  font-weight:500;
  cursor:pointer;
  transition:border-color 0.15s, color 0.15s;
}
.filter-bar .select-like:hover{border-color:var(--ink-3); color:var(--ink)}
.filter-bar .select-like svg{width:13px; height:13px; color:var(--ink-3)}

.filter-bar .search{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:7px 12px;
  flex:1;
  min-width:160px;
  max-width:300px;
}
.filter-bar .search svg{width:13px; height:13px; color:var(--ink-4); flex-shrink:0}
.filter-bar .search input{
  border:0; background:transparent; padding:0;
  font-size:13px; color:var(--ink); outline:none;
  flex:1; min-width:0;
}
.filter-bar .search input::placeholder{color:var(--ink-4)}

.filter-bar .seg{
  display:inline-flex; gap:0;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:2px;
}
.filter-bar .seg button{
  font-family:"Inter", sans-serif;
  font-size:12.5px; font-weight:500;
  background:transparent; border:0; color:var(--ink-3);
  padding:6px 12px; border-radius:5px;
  display:inline-flex; align-items:center; gap:6px;
  transition:all 0.15s;
}
.filter-bar .seg button:hover{color:var(--ink)}
.filter-bar .seg button.on{background:var(--ink); color:#FFF}
.filter-bar .seg button.on.primary{background:var(--primary-deep)}

.filter-bar .count-pill{
  margin-left:auto;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:0.04em;
  display:inline-flex; align-items:center; gap:10px;
}
.filter-bar .count-pill b{color:var(--ink); font-weight:500}

/* ═══ 15. GRID + FIELD helpers ═══ */

.grid{display:grid; gap:14px}
.grid-2{grid-template-columns:repeat(2, 1fr)}
.grid-3{grid-template-columns:repeat(3, 1fr)}
.grid-4{grid-template-columns:repeat(4, 1fr)}
.grid-5{grid-template-columns:repeat(5, 1fr)}

.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.field label, .form-label{
  font-size:12px;
  font-weight:500;
  color:var(--ink-2);
  font-family:"Inter", sans-serif;
}

.actions{display:flex; gap:8px; justify-content:flex-end; align-items:center; margin-top:14px}
.actions.left{justify-content:flex-start}

/* ═══ 16. MODALS ═══ */

.modal-overlay{
  position:fixed; inset:0;
  background:rgba(14,14,12,0.5);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
  padding:20px;
}
.modal{
  background:var(--card);
  border-radius:var(--r-xl);
  padding:28px 32px;
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-modal);
}
.modal.wide{max-width:720px}
.modal h2{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:22px;
  letter-spacing:-0.02em;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.modal .field label{display:block; font-size:12px; font-weight:500; color:var(--ink-3); margin-bottom:5px; letter-spacing:0.01em}
.modal .actions{margin-top:22px; padding-top:18px; border-top:1px dashed var(--rule)}

/* Modal Pattern E — multi-step wizard step strip. Used by showWizard()
   to show the user where they are in a 2–5 step flow. Matches the look
   of the .wizard-steps strip on the bulk-import page but scoped to live
   inside a modal at a more compact size. */
.modal .wiz-strip{display:flex; align-items:center; gap:0; padding:10px 12px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm); margin-bottom:16px; overflow-x:auto}
.modal .wiz-step{display:flex; align-items:center; gap:8px; flex-shrink:0; padding:2px 8px; color:var(--ink-3); font-size:12px; white-space:nowrap}
.modal .wiz-step .n{width:20px; height:20px; border-radius:50%; background:var(--paper-2); border:1px solid var(--rule); color:var(--ink-3); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:600; font-family:"JetBrains Mono",ui-monospace,monospace; flex-shrink:0}
.modal .wiz-step.complete .n{background:var(--mint-deep); border-color:var(--mint-deep); color:#FFF}
.modal .wiz-step.active{color:var(--ink); font-weight:600}
.modal .wiz-step.active .n{background:var(--primary-deep); border-color:var(--primary-deep); color:#FFF}
.modal .wiz-div{width:28px; height:1px; background:var(--rule); flex-shrink:0}
.modal .wiz-div.done{background:var(--mint-deep)}

/* Modal Pattern F — OAuth callback. Used after Stripe / Xero / Microsoft
   Teams redirect-back to confirm connection status with a check / warn icon
   + identity line + per-integration follow-up CTA. .oauth-state.warn flips
   the colour scheme for error / partial-connection states. */
.oauth-state{display:flex; align-items:flex-start; gap:14px; padding:14px 16px; background:var(--mint-soft); border:1px solid var(--mint-ring); border-radius:var(--r-md); margin-bottom:16px}
.oauth-state svg{width:22px; height:22px; flex-shrink:0; color:var(--mint-deep); margin-top:1px}
.oauth-state > div{flex:1; min-width:0; font-size:13.5px; color:var(--ink); line-height:1.5}
.oauth-state.warn{background:var(--sun-soft); border-color:var(--sun-ring)}
.oauth-state.warn svg{color:#8A6500}
.oauth-state.error{background:#FFE9E3; border-color:#F3C2B3}
.oauth-state.error svg{color:var(--coral-deep)}

/* ═══ 17. STAGE CARDS (templates + client-detail timeline) ═══ */

.stage-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:0;
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color 0.15s;
}
.stage-card.active{border-color:var(--primary-ring); box-shadow:0 0 0 3px var(--primary-soft)}
.stage-card .stage-header{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  cursor:pointer;
  user-select:none;
}
.stage-card .stage-num-badge{
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%;
  background:var(--ink-4); color:#FFF;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  font-family:"Inter", sans-serif;
}
.stage-card.active .stage-num-badge{background:var(--primary-deep)}
.stage-card.complete .stage-num-badge{background:var(--mint-deep)}
.stage-card .stage-title{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:18px;
  letter-spacing:-0.015em;
  color:var(--ink);
  flex:1; min-width:0;
}
.stage-card .stage-desc{
  font-size:13px;
  color:var(--ink-3);
  padding:0 18px 12px;
}
.stage-card .stage-meta{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-3);
  letter-spacing:0.04em;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.stage-card .stage-body{
  border-top:1px solid var(--rule-2);
  padding:8px 18px 14px;
  display:none;
}
.stage-card.expanded .stage-body{display:block}

/* Task item — used inside .stage-body. STATUS LIVES IN THE TYPE PILL
   (option C — picked over filled-circle indicators which read as checkboxes).
   Completed tasks get a small ✓ glyph + strikethrough on the title. */
.task-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  border-radius:var(--r-sm);
  font-size:13.5px;
  color:var(--ink-2);
  margin-bottom:5px;
  background:var(--paper);
  border:1px solid var(--rule-2);
  transition:background 0.12s, border-color 0.12s;
}
.task-item:hover{background:var(--card); border-color:var(--rule)}
.task-item .drag-handle{
  color:var(--ink-4);
  font-size:14px;
  user-select:none;
  cursor:grab;
  flex-shrink:0;
}
.task-item .task-title{
  flex:1; min-width:0;
  font-weight:600; color:var(--ink); line-height:1.3;
  display:flex; align-items:center; gap:7px;
}
.task-item .task-title .done-glyph{
  color:var(--mint-deep);
  flex-shrink:0;
  width:13px; height:13px;
}
.task-item .task-title .task-desc{
  display:block;
  font-size:12px; color:var(--ink-3);
  font-weight:400;
  margin-top:2px;
}
.task-item.is-done .task-title{
  color:var(--ink-3);
  text-decoration:line-through;
  text-decoration-color:var(--ink-4);
}
.task-item.is-done .task-title .done-glyph{text-decoration:none}
.task-item.is-done .task-title .task-desc{text-decoration:none; color:var(--ink-4)}

.task-item .task-type{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:6px;
  font-family:"Inter", sans-serif;
  font-size:11px; font-weight:500;
  border:1px solid transparent;
  white-space:nowrap;
}
/* Open / pending pills — use the type's natural colour */
.task-item .task-type.t-info   {background:var(--paper-2); border-color:var(--rule); color:var(--ink-3)}
.task-item .task-type.t-form   {background:var(--purple-soft); border-color:var(--purple-ring); color:#574087}
.task-item .task-type.t-payment{background:var(--sun-soft); border-color:var(--sun-ring); color:#8A6500}
.task-item .task-type.t-meeting{background:var(--sky-soft); border-color:var(--sky-ring); color:#0E6B95}
.task-item .task-type.t-esign  {background:var(--primary-soft); border-color:var(--primary-ring); color:var(--primary-deep)}
.task-item .task-type.t-action {background:var(--mint-soft); border-color:var(--mint-ring); color:var(--mint-deep)}
/* Locked — task not yet released to the client. Neutral grey + a lock glyph so
   it reads clearly as "locked", never confused with an open/active task. */
.task-item .task-type.t-locked {background:var(--paper-2); border-color:var(--rule); color:var(--ink-3); font-weight:600}
.task-item .task-type.t-locked::before{content:"🔒"; font-size:10px}
/* Locked row (admin view): the client can't act on this yet. Faint tint + a
   left accent + muted (still legible) title so agents can scan locked vs open. */
.task-item.is-locked{background:var(--paper-2); box-shadow:inset 3px 0 0 var(--ink-4)}
.task-item.is-locked .task-title > strong{color:var(--ink-3)}
/* "Done" variants — mint takeover when status is complete, regardless of type */
.task-item.is-done .task-type.t-info,
.task-item.is-done .task-type.t-action,
.task-item.is-done .task-type.t-payment,
.task-item.is-done .task-type.t-meeting,
.task-item.is-done .task-type.t-esign{
  background:var(--mint-soft);
  border-color:var(--mint-ring);
  color:var(--mint-deep);
}
/* Form · Submitted retains purple — agents read "submitted" as its own state worth preserving */
.task-item.is-done .task-type.t-form{
  background:var(--purple-soft);
  border-color:var(--purple-ring);
  color:#574087;
}

.task-item .task-actions{
  margin-left:auto;
  display:flex; gap:4px;
  opacity:0;
  transition:opacity 0.15s;
}
.task-item:hover .task-actions{opacity:1}

.drag-handle{
  cursor:grab;
  color:var(--ink-4);
  font-size:14px;
  user-select:none;
  padding:0 2px;
  flex-shrink:0;
}
.drag-handle:active{cursor:grabbing}

/* ═══ 18. LIFECYCLE KANBAN (dashboard swimlane view) ═══ */

.kb-board{
  display:flex; gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  align-items:flex-start;
}
.kb-col{
  min-width:220px; max-width:220px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  overflow:hidden;
  flex-shrink:0;
}
.kb-col-hdr{
  padding:11px 14px;
  display:flex; align-items:center; gap:8px;
  background:var(--card);
  border-bottom:1px solid var(--rule);
  font-size:12.5px; font-weight:600;
  color:var(--ink);
}
.kb-col-hdr .count{
  margin-left:auto;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-3);
}
.kb-cards{
  padding:8px;
  display:flex; flex-direction:column; gap:6px;
  max-height:calc(100vh - 280px); overflow-y:auto;
}
.kb-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:11px 13px;
  cursor:pointer;
  transition:border-color 0.15s, box-shadow 0.15s, transform 0.06s;
  font-size:13px;
}
.kb-card:hover{
  border-color:var(--ink-3);
  box-shadow:0 4px 12px -6px rgba(14,14,12,0.12);
  transform:translateY(-1px);
}
.kb-card .kb-client-name{font-weight:600; color:var(--ink)}
.kb-card .kb-meta{
  margin-top:4px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  color:var(--ink-3);
  letter-spacing:0.04em;
}

/* ═══ 19. TEAM BOARDS — dual identity (paper + dark) ═══ */
/*  Default is the PAPER variant — feels like the rest of the admin.
    body.tb-dark switches to the dark "mission control" identity. */

.tb-main{padding:0 !important; overflow-x:hidden}
.tb-page{
  background:var(--paper);
  padding:32px 36px 56px;
  min-height:100%;
}
.tb-page .topbar{padding:0 0 24px; border-bottom:1px solid var(--rule); margin-bottom:24px; background:transparent}

.tb-col{
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  position:relative;
  min-width:260px; max-width:260px;
  flex-shrink:0;
  overflow:hidden;
}
.tb-col::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
}
.tb-col:nth-child(4n+1)::before{background:var(--teal)}
.tb-col:nth-child(4n+2)::before{background:var(--sun)}
.tb-col:nth-child(4n+3)::before{background:var(--purple)}
.tb-col:nth-child(4n+4)::before{background:var(--coral)}
.tb-col .kb-col-hdr{
  background:transparent;
  border-bottom:1px solid var(--rule);
  padding:14px 14px 10px;
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:14.5px;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.tb-col .tb-col-count{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  color:var(--ink-3);
  font-weight:500;
}
.tb-col-done{background:var(--mint-soft); border-color:var(--mint-ring)}
.tb-col-done::before{background:var(--mint-deep) !important; height:4px !important}
.tb-col-done-pill{
  display:inline-block;
  background:var(--mint-deep); color:#FFF;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9px; font-weight:600; letter-spacing:0.08em;
  padding:2px 6px; border-radius:4px;
  margin-left:6px; text-transform:uppercase;
}
.tb-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:11px 13px;
  margin-bottom:8px;
  font-size:13px;
  cursor:pointer;
  position:relative;
  transition:border-color 0.15s, box-shadow 0.15s, transform 0.06s;
  overflow-wrap:anywhere;
}
.tb-card:hover{border-color:var(--primary); box-shadow:0 6px 14px -8px rgba(14,14,12,0.18); transform:translateY(-1px)}
.tb-card.drag-over-top{box-shadow:0 -3px 0 0 var(--primary), 0 1px 2px rgba(14,14,12,0.1)}
.tb-card.drag-over-bottom{box-shadow:0 3px 0 0 var(--primary), 0 1px 2px rgba(14,14,12,0.1)}

/* Quick-archive button — hidden until card hover. Top-right corner.
   Click is captured so the underlying card.onclick (open editor) doesn't fire. */
.tb-card-archive{
  position:absolute;
  top:4px; right:4px;
  width:22px; height:22px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:rgba(255,255,255,0.92);
  color:var(--ink-3);
  border-radius:6px;
  font-size:12px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.12s, background-color 0.12s, color 0.12s;
}
.tb-card:hover .tb-card-archive{opacity:1}
.tb-card-archive:hover{background:var(--ink); color:#fff}

.tb-add-card{
  width:100%;
  padding:9px 13px;
  background:transparent;
  border:1px dashed var(--rule);
  border-radius:var(--r-sm);
  color:var(--ink-3);
  font-size:12.5px;
  text-align:left;
  transition:all 0.15s;
}
.tb-add-card:hover{background:var(--card); color:var(--ink); border-color:var(--ink-3)}

/* Boards-list tiles */
.team-board-tile{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  padding:28px 20px 18px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.team-board-tile::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
}
.team-board-tile:nth-child(6n+1)::before{background:var(--teal)}
.team-board-tile:nth-child(6n+2)::before{background:var(--coral)}
.team-board-tile:nth-child(6n+3)::before{background:var(--purple)}
.team-board-tile:nth-child(6n+4)::before{background:var(--sun)}
.team-board-tile:nth-child(6n+5)::before{background:var(--sky)}
.team-board-tile:nth-child(6n+6)::before{background:var(--mint)}
.team-board-tile:hover{
  border-color:var(--ink-3);
  box-shadow:var(--shadow-hover);
  transform:translateY(-2px);
}
.team-board-add-tile{
  background:var(--paper-2);
  border:2px dashed var(--rule);
  color:var(--ink-3);
}
.team-board-add-tile:hover{border-color:var(--ink-3); color:var(--ink); background:var(--card)}
.team-board-add-tile::before{display:none}

/* DARK variant — alternative mission-control aesthetic */
body.tb-dark .tb-page{
  background:linear-gradient(160deg, #1F1E1A 0%, #15140F 60%, #0E0E0C 100%);
}
body.tb-dark .tb-page h1{color:#F6F5F2}
body.tb-dark .tb-page .topbar{border-bottom-color:#26241D}
body.tb-dark .tb-col{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
  backdrop-filter:blur(8px);
}
body.tb-dark .tb-col .kb-col-hdr{color:#F6F5F2; border-bottom-color:rgba(255,255,255,0.12)}
body.tb-dark .tb-col .tb-col-count{color:rgba(246,245,242,0.6)}
body.tb-dark .tb-card{background:#FFF; border-color:rgba(255,255,255,0.5)}
body.tb-dark .tb-add-card{color:rgba(246,245,242,0.55); border-color:rgba(255,255,255,0.2)}
body.tb-dark .tb-add-card:hover{background:rgba(255,255,255,0.06); color:#FFF; border-color:rgba(255,255,255,0.35)}
body.tb-dark .team-board-tile{background:#FFF; border:0}
body.tb-dark .team-board-add-tile{background:rgba(255,255,255,0.06); border:2px dashed rgba(255,255,255,0.3); color:rgba(246,245,242,0.85)}

/* ═══ 20. CHAT (used for Inbox client/agent threads) ═══ */
/*  Note: Sunny uses .sunny-transcript (below) — NOT chat bubbles.
    The current Sunny page renders flowing transcript-style text so
    inline tables / charts / draft cards can lay out at full content
    width. Chat bubbles are kept for Inbox (real human conversation
    between agent and client mediated by Sunny). */

.chat-thread{
  display:flex; flex-direction:column; gap:6px;
  padding:18px 4px;
  max-height:520px; overflow-y:auto;
}
.bubble-row{display:flex; flex-direction:column; gap:3px}
.bubble-row.right{align-items:flex-end}
.bubble-row.left{align-items:flex-start}
.chat-sender{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
  padding:0 4px;
}
.chat-bubble{
  max-width:72%;
  padding:11px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}
.chat-bubble.client{background:var(--paper-2); border:1px solid var(--rule); color:var(--ink); border-bottom-left-radius:4px}
.chat-bubble.sunny{background:var(--sun-soft); border:1px solid var(--sun-ring); color:#5A4500; border-bottom-left-radius:4px}
.chat-bubble.agent{background:var(--mint-soft); border:1px solid var(--mint-ring); color:var(--mint-deep); border-bottom-right-radius:4px}
.chat-bubble.user{background:var(--ink); color:#FFF; border-bottom-right-radius:4px}
.chat-bubble.assistant{background:var(--card); border:1px solid var(--rule); color:var(--ink-2); border-bottom-left-radius:4px}
.chat-time{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px; color:var(--ink-4);
  letter-spacing:0.04em;
  padding:0 4px;
}

/* Sunny — TRANSCRIPT style (not chat bubbles). Each turn is a flowing
   paragraph on the page surface, with rich content (pie charts, client
   tables, email-draft cards) rendering inline at full content width. */

.sunny-page{
  display:flex; flex-direction:column;
  max-width:880px;
  margin:0 auto;
  padding:8px 4px 20px;
}
.sunny-messages{
  flex:1;
  display:flex; flex-direction:column;
  gap:28px;
  padding:24px 0 32px;
  min-height:0;
}
.sunny-turn{
  display:flex; flex-direction:column;
  gap:8px;
  font-size:14.5px;
  line-height:1.65;
}
.sunny-turn.from-user{align-items:flex-end}
.sunny-turn .speaker{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.sunny-turn.from-user .speaker{color:var(--primary-deep)}
.sunny-turn .text{
  max-width:100%;
  color:var(--ink);
  white-space:pre-wrap;
  word-break:break-word;
}
.sunny-turn.from-user .text{
  text-align:right;
  max-width:80%;
  color:var(--ink-2);
}
/* When the assistant emits a rich block (chart, table, draft card),
   it lays out full-width below the text on the same turn. */
.sunny-turn .rich{margin-top:6px; width:100%}

.sunny-composer{
  position:sticky; bottom:0;
  background:linear-gradient(to top, var(--paper) 75%, transparent);
  padding:18px 0 14px;
  display:flex; gap:10px; align-items:flex-end;
}
.sunny-input{
  flex:1;
  border:1px solid var(--rule);
  background:var(--card);
  border-radius:var(--r-md);
  padding:11px 14px;
  font-size:14px;
  resize:none;
  min-height:44px;
  max-height:140px;
  outline:none;
  box-shadow:var(--shadow-card);
  transition:border-color 0.15s, box-shadow 0.15s;
}
.sunny-input:focus{border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(14,14,12,0.05)}

.sunny-thinking{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:transparent;
  font-size:13px; color:var(--ink-3);
  font-style:italic;
  width:fit-content;
}
.sunny-thinking span{
  width:5px; height:5px;
  background:var(--ink-4);
  border-radius:50%;
  animation:sunnyDot 1.2s infinite;
}
.sunny-thinking span:nth-child(2){animation-delay:0.2s}
.sunny-thinking span:nth-child(3){animation-delay:0.4s}
@keyframes sunnyDot{0%,80%,100%{opacity:0.3;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)}}

/* Rich blocks Sunny can render inline */
.sunny-draft-card{
  background:var(--card);
  border:1px solid var(--primary-ring);
  border-radius:var(--r-md);
  padding:16px 18px;
  width:100%;
}
.sunny-draft-label{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--primary-deep);
  margin-bottom:10px;
}
.sunny-draft-field, .sunny-draft-row{font-size:13px; margin-bottom:5px; color:var(--ink-2); word-break:break-word}
.sunny-draft-field strong, .sunny-draft-row strong{color:var(--ink); margin-right:4px}
.sunny-draft-body{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:11px 13px;
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  margin:8px 0;
  max-height:200px;
  overflow-y:auto;
  color:var(--ink-2);
}
.sunny-draft-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}

.sunny-client-table{
  width:100%; border-collapse:collapse;
  font-size:13px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.sunny-client-table th{padding:9px 12px; background:var(--paper)}
.sunny-client-table td{padding:8px 12px; border-bottom:1px solid var(--rule-2)}
.sunny-client-table tr:last-child td{border-bottom:0}

/* Sunny chart placeholder — pairs an inline chart svg/canvas with a legend.
   The chart itself renders via a charting lib (the page injects an <svg>);
   .sunny-chart is the wrapper that gives it consistent layout + spacing. */
.sunny-chart{
  display:flex; gap:32px; align-items:center;
  padding:8px 0 16px;
  flex-wrap:wrap;
}
.sunny-chart .chart-art{flex-shrink:0}
.sunny-chart .chart-legend{
  display:flex; flex-direction:column; gap:6px;
  font-size:13px;
  color:var(--ink-2);
}
.sunny-chart .chart-legend .lk{
  display:inline-flex; align-items:center; gap:8px;
}
.sunny-chart .chart-legend .lk .sw{width:10px; height:10px; border-radius:2px; flex-shrink:0}
.sunny-chart .chart-title{
  font-weight:600; color:var(--ink);
  margin-bottom:6px;
}

/* ═══ 21. INBOX list rows ═══ */

.inbox-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px;
  border-bottom:1px solid var(--rule-2);
  cursor:pointer;
  transition:background 0.12s;
}
.inbox-row:hover{background:var(--sand)}
.inbox-row:last-child{border-bottom:0}
.inbox-row .who-block{min-width:0; flex:1}
.inbox-row .client-name{font-weight:600; font-size:14.5px; color:var(--ink)}
.inbox-row .last-msg{
  font-size:13px; color:var(--ink-3);
  margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:520px;
}
.inbox-row .meta{
  text-align:right; flex-shrink:0;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; color:var(--ink-3);
  letter-spacing:0.04em;
}
.inbox-badge{
  display:inline-block;
  background:var(--coral); color:#FFF;
  border-radius:10px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px; font-weight:600;
  padding:2px 7px;
  margin-left:6px;
  letter-spacing:0.04em;
}

/* ═══ 22. TABS ═══ */

.tabs{
  display:flex; gap:0;
  border-bottom:1px solid var(--rule);
  margin-bottom:18px;
}
.tabs button{
  padding:10px 18px;
  background:transparent;
  color:var(--ink-3);
  font-family:"Inter", sans-serif;
  font-size:13.5px;
  font-weight:500;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color 0.15s, border-color 0.15s;
}
.tabs button.active{color:var(--ink); border-bottom-color:var(--sidebar-accent); font-weight:600}
.tabs button:hover:not(.active){color:var(--ink)}
.tabs button .count{
  margin-left:6px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10.5px;
  color:var(--ink-4);
  letter-spacing:0.04em;
}

/* ═══ 23. EMPTY / LOADING / TOAST ═══ */

.empty-state{
  text-align:center;
  padding:64px 24px;
  color:var(--ink-3);
}
.empty-state h3{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  font-size:20px;
  color:var(--ink);
  margin-bottom:8px;
}
.empty-state p{font-size:14px; line-height:1.6; max-width:48ch; margin:0 auto}

.loading-spinner{
  display:flex; align-items:center; justify-content:center;
  padding:60px 20px;
}
.loading-spinner::after{
  content:"";
  width:28px; height:28px;
  border:2px solid var(--rule);
  border-top-color:var(--primary-deep);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{
  position:fixed; bottom:32px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--ink);
  color:#FFF;
  padding:12px 20px;
  border-radius:var(--r-md);
  font-size:14px;
  font-weight:500;
  box-shadow:var(--shadow-modal);
  z-index:999;
  opacity:0;
  transition:opacity 0.2s, transform 0.2s;
  pointer-events:none;
  max-width:400px;
  text-align:center;
}
.toast.toast-error{background:var(--coral-deep)}
.toast.toast-success{background:var(--mint-deep)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}

/* ═══ 24. PROGRESS BAR ═══ */

.progress-bar{
  height:6px;
  background:var(--rule);
  border-radius:3px;
  overflow:hidden;
}
.progress-bar .fill{
  height:100%;
  background:var(--primary-deep);
  border-radius:3px;
  transition:width 0.3s;
}

/* ═══ 25. APPLICATION DATA / accordion ═══ */

.appd-section{
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  margin-bottom:8px;
  overflow:hidden;
}
.appd-section > summary{
  background:var(--paper);
  padding:11px 16px;
  cursor:pointer;
  font-family:"Inter", sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  display:flex; align-items:center; justify-content:space-between;
  list-style:none;
  user-select:none;
}
.appd-section > summary::-webkit-details-marker{display:none}
.appd-section > summary::after{
  content:"";
  width:7px; height:7px;
  border-right:1.5px solid var(--ink-3);
  border-bottom:1.5px solid var(--ink-3);
  transform:rotate(45deg);
  transition:transform 0.15s;
  margin-left:8px;
}
details.appd-section[open] > summary::after{transform:rotate(-135deg)}
.appd-section-body{padding:14px 16px; line-height:1.6; background:var(--card)}
.appd-section-body ul, .appd-section-body ol{padding-left:22px; margin:4px 0 8px}
.appd-section-body li{margin-bottom:3px}

/* ═══ 26. TOGGLE SWITCH ═══ */

.toggle-switch{
  position:relative; display:inline-block;
  width:38px; height:22px;
  flex-shrink:0;
}
.toggle-switch input{opacity:0; width:0; height:0}
.toggle-slider{
  position:absolute; cursor:pointer; inset:0;
  background:var(--ink-4);
  border-radius:22px;
  transition:0.18s;
}
.toggle-slider::before{
  content:"";
  position:absolute;
  width:16px; height:16px;
  left:3px; bottom:3px;
  background:#FFF;
  border-radius:50%;
  transition:0.18s;
}
.toggle-switch input:checked + .toggle-slider{background:var(--primary-deep)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(16px)}

/* ═══ 27. UTILITY ═══ */

.flex{display:flex}
.flex-between{display:flex; align-items:center; justify-content:space-between}
.flex-col{display:flex; flex-direction:column}
.gap-4{gap:4px} .gap-6{gap:6px} .gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px}
.mt-4{margin-top:4px} .mt-8{margin-top:8px} .mt-12{margin-top:12px} .mt-16{margin-top:16px} .mt-24{margin-top:24px}
.mb-4{margin-bottom:4px} .mb-8{margin-bottom:8px} .mb-12{margin-bottom:12px} .mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}
.text-xs{font-size:11.5px}
.text-sm{font-size:13px}
.text-light{color:var(--ink-3)}
.text-muted{color:var(--ink-4)}
.text-mono{font-family:"JetBrains Mono", ui-monospace, monospace; letter-spacing:0.04em}
.hidden{display:none}
.center{text-align:center}
.right{text-align:right}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Tooltip (vanilla — uses #sg-tooltip from index.html) */
#sg-tooltip{
  position:fixed;
  z-index:9999;
  background:var(--ink);
  color:#F9FAFB;
  font-size:12.5px;
  line-height:1.5;
  padding:8px 12px;
  border-radius:var(--r-sm);
  max-width:320px;
  white-space:pre-wrap;
  pointer-events:none;
  box-shadow:0 4px 16px rgba(14,14,12,0.25);
  display:none;
}

/* ═══ 28. RESPONSIVE — mobile ═══ */

@media (max-width: 900px) {
  html, body{height:auto; min-height:100%; overflow-x:hidden}
  .app{flex-direction:column; height:auto; min-height:100vh; overflow:visible}
  .sidebar{
    position:fixed; top:0; bottom:0; left:0;
    transform:translateX(-100%);
    transition:transform 0.25s ease;
    z-index:200;
    width:260px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay.open{display:block}
  .hamburger{display:flex; align-items:center; justify-content:center; min-height:44px; min-width:44px}
  .mobile-header{display:flex}
  .main{padding:0; flex:0 1 auto; height:auto; overflow:visible}
  .topbar{padding:20px 18px 16px}
  .topbar h1{font-size:24px}
  .topbar h1.large{font-size:28px}
  .page-body{padding:18px 18px 48px}
  .grid-2, .grid-3, .grid-4, .grid-5{grid-template-columns:1fr}
  .modal-overlay{align-items:flex-start; overflow-y:auto; padding:12px}
  .modal{padding:22px 20px; border-radius:var(--r-md); max-height:none}
  .modal .actions{flex-wrap:wrap}
  .modal .actions button{flex:1; min-height:44px}
  .btn-primary, .btn-secondary, .btn-danger{min-height:42px}
  input, select, textarea{font-size:16px; padding:11px 14px}
  .inbox-row .last-msg{max-width:150px}
  .chat-bubble{max-width:88%}
  .chat-thread{max-height:340px}
  .stat-card .value{font-size:24px}
}
/* ═══ 29. ADMIN LOGIN SURFACE ═══ */
/*  Paper background + faint horizon watermark + centred card. Identical to
    the v1 implementation that already shipped (see PORT_BRIEF.md §3 and
    marketing/design/login-mockups/admin-login.html). Living here in the
    drop-in admin.css so a single file owns the whole admin visual system —
    no separate login.css to deploy. */

.login-page{min-height:100vh;background:var(--paper);color:var(--ink);font-family:"Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.5;display:flex;flex-direction:column;position:relative;overflow:hidden}
.login-page .horizon{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.login-page .horizon svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:140%;height:auto}
.login-page .horizon path{stroke:#d9d4c2;stroke-width:1.5;fill:none}
.login-page .horizon .dot-teal{fill:#00c9a7;opacity:0.55}
.login-page .horizon .dot-coral{fill:#ff6b4a;opacity:0.5}
.login-page .horizon .dot-ink{fill:#0e0e0c;opacity:0.25}

.login-page .brand-bar{position:relative;z-index:2;padding:28px 36px;display:flex;justify-content:space-between;align-items:center}
.login-page .brand-mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:"Fraunces",serif;font-weight:500;font-size:22px;letter-spacing:-0.02em}
.login-page .brand-back{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;color:var(--ink-3);text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color 0.18s}
.login-page .brand-back:hover{color:var(--ink)}
.login-page .brand-back .arr{font-size:11px;color:var(--ink-4)}

.login-page main{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:24px 24px 80px}

.login-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:40px 36px 32px;box-shadow:0 1px 0 rgba(14,14,12,0.02),0 20px 40px -24px rgba(14,14,12,0.10);text-align:left}
.login-card .card-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--rule-2)}
.login-card .card-head .wordmark{display:inline-flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-weight:500;font-size:28px;letter-spacing:-0.02em;color:var(--ink)}
.login-card .card-head .audience{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.14em;color:var(--ink-3);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
.login-card .card-head .audience::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal)}

.login-card .welcome{font-family:"Fraunces",serif;font-size:22px;font-weight:500;letter-spacing:-0.02em;line-height:1.2;color:var(--ink);margin-bottom:6px}
.login-card .welcome em{font-style:italic;font-weight:400;color:var(--ink-3)}
.login-card .welcome-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:28px;line-height:1.5}

.login-card form{display:flex;flex-direction:column;gap:18px}
.login-card .field{display:flex;flex-direction:column;gap:6px;margin-bottom:0}
.login-card .field label{font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:0.02em;font-family:"Inter",sans-serif}
.login-card .field-row{position:relative}
.login-card .field input{width:100%;padding:12px 14px;border:1px solid var(--rule);background:var(--paper);border-radius:9px;font-size:14.5px;font-family:"Inter",sans-serif;color:var(--ink);transition:border-color 0.18s,background 0.18s,box-shadow 0.18s;outline:none}
.login-card .field input::placeholder{color:var(--ink-4)}
.login-card .field input:focus{border-color:var(--ink);background:var(--card);box-shadow:none}
.login-card .field .toggle-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;transition:color 0.18s}
.login-card .field .toggle-eye:hover{color:var(--ink)}
.login-card .field .help-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:-2px}
.login-card .field .help-row a{font-size:12px;color:var(--teal-deep);text-decoration:none;transition:color 0.18s;font-family:"Inter",sans-serif}
.login-card .field .help-row a:hover{color:var(--ink)}

.login-card .submit{margin-top:8px;width:100%;padding:14px 16px;background:var(--teal);color:var(--ink);border:0;border-radius:10px;font-family:"Inter",sans-serif;font-size:14.5px;font-weight:600;cursor:pointer;transition:background 0.18s,color 0.18s;display:inline-flex;justify-content:center;align-items:center;gap:8px}
.login-card .submit:hover{background:var(--teal-deep);color:#fff}
.login-card .submit:disabled{opacity:0.7;cursor:default}
.login-card .submit .arr{transition:transform 0.18s}
.login-card .submit:hover .arr{transform:translateX(2px)}

.login-card .card-foot{margin-top:24px;padding-top:20px;border-top:1px dashed var(--rule);text-align:center}
.login-card .card-foot a{font-size:12.5px;color:var(--ink-3);text-decoration:none;font-family:"Inter",sans-serif;transition:color 0.18s}
.login-card .card-foot a:hover{color:var(--ink)}

.login-card .error{color:var(--coral-deep);font-size:13px;margin-top:8px;font-family:"Inter",sans-serif}
.login-card .success{color:var(--teal-deep);font-size:13px;margin-top:8px;font-family:"Inter",sans-serif}

.login-page .login-meta{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:20px 36px 24px;flex-wrap:wrap;gap:8px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:0.1em;color:var(--ink-4);text-transform:uppercase}
.login-page .login-meta .data-strip{display:inline-flex;align-items:center;gap:6px}
.login-page .login-meta .data-strip::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.login-page .login-meta nav{display:inline-flex;gap:14px}
.login-page .login-meta nav a{color:var(--ink-4);text-decoration:none;transition:color 0.18s}
.login-page .login-meta nav a:hover{color:var(--ink-2)}

@media (max-width:600px){
  .login-page .brand-bar{padding:20px 18px}
  .login-page main{padding:8px 16px 40px}
  .login-card{padding:32px 24px 24px}
  .login-page .login-meta{padding:16px 18px 20px;font-size:9.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   v2.0.50 — agent notes rich text rendering
   Inside the notes log: Quill-produced HTML (bold/italic/lists/links/
   blockquote/code). Server sanitizes on save (sanitize-html allowlist);
   the styles below normalise the resting render so the formatting
   reads consistently inside the bubble's typography.
   ═══════════════════════════════════════════════════════════════════ */
.agent-note-content{font-family:"Inter",sans-serif}
.agent-note-content p{margin:0 0 6px}
.agent-note-content p:last-child{margin-bottom:0}
.agent-note-content ul,.agent-note-content ol{margin:6px 0 6px 22px;padding:0}
.agent-note-content li{margin:2px 0}
.agent-note-content a{color:var(--teal-deep,#0d7f6f);text-decoration:underline}
.agent-note-content a:hover{color:var(--teal,#15c4ac)}
.agent-note-content blockquote{margin:6px 0;padding:6px 12px;border-left:3px solid var(--rule,#e5e7eb);color:var(--ink-2,#4b5563);font-style:italic}
.agent-note-content code{background:var(--paper-2,#f3f4f6);padding:1px 6px;border-radius:4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px}
.agent-note-content pre{background:var(--paper-2,#f3f4f6);padding:8px 10px;border-radius:6px;overflow-x:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;margin:6px 0}
.agent-note-content h1,.agent-note-content h2,.agent-note-content h3,.agent-note-content h4{margin:8px 0 4px;font-weight:700}
.agent-note-content h1{font-size:18px}
.agent-note-content h2{font-size:16px}
.agent-note-content h3{font-size:14.5px}

/* Quill editor surface — tighter than Quill's defaults to fit the
   notes card without dominating the visual hierarchy. */
#agent-notes-editor-wrap .ql-toolbar.ql-snow{border:0;border-bottom:1px solid var(--border);padding:4px 6px}
#agent-notes-editor-wrap .ql-container.ql-snow{border:0;font-family:"Inter",sans-serif;font-size:14px}
#agent-notes-editor-wrap .ql-editor{min-height:120px;padding:10px 12px}
#agent-notes-editor-wrap .ql-editor.ql-blank::before{font-style:normal;color:var(--ink-4,#9ca3af);left:12px}

/* ═══════════════════════════════════════════════════════════════════
   end of admin.css
   ═══════════════════════════════════════════════════════════════════ */