/* FoundersCore — design tokens & base styles
   Aesthetic refresh (Sora everywhere · one 5-hue status language · borders
   over shadows · radius scale 4/6/8/10/12). Values come verbatim from the
   design_handoff_aesthetic_refresh README — change them there first. */
:root {
  /* Brand — the customer portal's navy and gold, so the staff app, both
     portals and the mobile app read as one product. */
  --navy-900: #0B1B30;                /* rail gradient top / header */
  --navy-850: #0C1F38;                /* rail gradient bottom */
  --navy-800: #0E2440;                /* ink / dark pill */
  --navy-700: #1A3557;                /* dark pill hover */
  --navy-600: #2C4A6B;                /* avatar chip */
  --navy-500: #3D5876;
  /* Navy as a FILL (pill, avatar, selected chip, bubble) under white or gold
     text. Same as --navy-800 here; dark mode keeps it navy while --navy-800
     flips to a light ink. Inline JSX fills use this, never --navy-800. */
  --navy-fill:   #0E2440;
  --navy-fill-2: #1A3557;
  --rail-gradient: linear-gradient(180deg, #0B1B30, #0C1F38);
  --logo-gradient: linear-gradient(135deg, #FFC907, #F0BB00);
  /* Historical name, kept so the ~200 existing var(--yellow) references
     restyle rather than needing a rename. It is now literally yellow again. */
  --yellow:   #FFC907;
  --yellow-2: #F0BB00;                /* hover */
  --yellow-soft: #FBF3DC;
  /* Gold is a LIGHT accent, which changes two rules that a blue accent let us
     ignore:
       • on a gold FILL, ink — never white (#fff on #FFC907 is 1.54:1).
       • gold as TEXT only survives on navy; on a light surface use --gold-text
         (#96700A), which is the same hue carried to a readable lightness. */
  --on-accent: #16283E;
  --gold-text: #96700A;
  --gold-text-2: #7A5B08;

  /* Neutrals */
  --bg:        #f4f6f9;               /* app canvas */
  --bg-2:      #f4f6f9;
  --card:      #FFFFFF;
  --line:      #e3e8ef;               /* card border */
  --line-2:    #eef1f6;               /* inner hairline */
  --line-3:    #f2f5f9;               /* row hairline */
  --thead:     #fafbfd;               /* table header / footer tint */
  --hover:     #f8fafc;               /* row hover */
  --track:     #eaeef4;               /* tab-rail track */
  --ink:       #0d1b2e;               /* headings */
  --text:      #223349;               /* body */
  --text-2:    #3a4a5e;               /* secondary */
  --muted:     #67768a;
  --muted-2:   #8a97a8;               /* faint */
  --faint:     #8a97a8;
  --disabled:  #c3ccd8;               /* affordance glyphs */
  --zero:      #9aa6b5;               /* zero-value money */

  /* Status — the one status language. Every pill/dot/tag derives from these
     5 hues (+ type-tag hues). Dots/accents: */
  --status-pending:  oklch(0.55 0.03 250);   /* slate */
  --status-inflight: oklch(0.55 0.16 255);   /* blue */
  --status-missed:   oklch(0.55 0.19 25);    /* red */
  --status-action:   oklch(0.68 0.14 70);    /* amber */
  --status-ready:    oklch(0.55 0.14 155);   /* green */

  /* Semantic (legacy names, remapped to the tinted-pill recipe:
     text oklch(0.42–0.5 0.12 H) · bg oklch(0.96–0.97 0.02–0.03 H) ·
     border oklch(0.9 0.05 H)) */
  --success:    oklch(0.42 0.12 155);
  --success-bg: oklch(0.965 0.025 155);
  --success-bd: oklch(0.9 0.05 155);
  --success-dot: oklch(0.55 0.14 155);
  --warn:       oklch(0.5 0.12 75);
  --warn-bg:    oklch(0.97 0.03 85);
  --warn-bd:    oklch(0.9 0.06 85);
  --warn-dot:   oklch(0.68 0.14 70);
  --danger:     oklch(0.45 0.12 25);
  --danger-bg:  oklch(0.965 0.02 25);
  --danger-bd:  oklch(0.9 0.05 25);
  --danger-dot: oklch(0.55 0.19 25);
  --info:       oklch(0.45 0.12 255);
  --info-bg:    oklch(0.96 0.02 255);
  --info-bd:    oklch(0.9 0.05 255);
  --info-dot:   oklch(0.55 0.16 255);
  --neutral:    oklch(0.42 0.03 250);
  --neutral-bg: oklch(0.96 0.005 250);
  --neutral-bd: oklch(0.9 0.012 250);

  /* Money */
  --money-pos: oklch(0.48 0.13 155);
  --money-neg: oklch(0.5 0.19 25);
  --money-zero: #9aa6b5;

  /* Charts — one palette for every chart in the app (Reports, Finances).
     Validated with the dataviz six checks on #FFFFFF: lightness band, chroma
     floor, CVD separation (all pairs, worst ΔE 12.0), normal-vision floor
     (18.0) and 3:1 contrast. Slot 1 is money earned (revenue, issued,
     collected), slot 2 money spent (cost, expenses), slot 3 a third series.
     Status meaning (late, paid) never borrows these — it wears the status
     tokens above. */
  --chart-1: #7B6BE6;
  --chart-2: #008A9E;
  --chart-3: #E0682F;
  --chart-muted: #C3CCD8;            /* de-emphasis: prior period, "Other" */
  --chart-grid: #EEF1F6;             /* hairline gridlines */
  --chart-axis: #E3E8EF;             /* baseline */
  --chart-wash: 0.12;                /* area fill opacity */

  /* Radius scale: 4 tags/kbd · 6 buttons/inputs/controls · 8 inner tiles ·
     10 cards · 12 hero/modals. Full-round only for status pills + avatars. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 12px;

  /* Type — Sora only, figures included. No monospace anywhere. */
  --font-sans: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Borders over shadows. Shadows exist ONLY for: primary buttons, modals,
     the active tab pill. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 70px rgba(10, 20, 36, 0.4);
  --shadow-pop: 0 24px 70px rgba(10, 20, 36, 0.4);
  --shadow-btn: 0 1px 2px rgba(37, 99, 235, 0.4);
  --shadow-tab: 0 1px 3px rgba(13, 27, 46, 0.3);
}

/* ===== Dark theme =====
   Set as html[data-theme="dark"] by the pre-paint script in index.html
   (mirroring teammates.ui_prefs.theme — see lib/api.js FCApplyTheme). Same
   navy family as the brand rail, one step of lightness per surface. Portal
   pages never set the attribute, so they stay light. */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Neutrals */
  --bg:        #0B1622;
  --bg-2:      #182635;               /* raised chip / bubble / ghost hover */
  --card:      #101D2C;
  --line:      #24344A;
  --line-2:    #1D2C3F;
  --line-3:    #192737;
  --thead:     #14202F;
  --hover:     #182839;
  --track:     #1D2C3F;
  --ink:       #EAF0F8;
  --text:      #D3DDE9;
  --text-2:    #AEBDCE;
  --muted:     #7E90A5;
  --muted-2:   #63758B;
  --faint:     #63758B;
  --disabled:  #3E5066;
  --zero:      #6B7E93;

  /* Navy is dual-role. Inline JSX uses --navy-800/-500 as TEXT/icon color
     (~300 sites), so they flip light here; the handful of CSS rules that use
     navy as a FILL are re-pointed at --navy-fill in the overrides below.
     --navy-600/-700/-900 keep their dark values (avatar chips, gradients). */
  --navy-800: #C7D6E9;
  --navy-500: #8FA6C2;
  --navy-fill:   #223C59;             /* dark pill / active tab / job chip */
  --navy-fill-2: #2B4A6D;             /* its hover */

  /* Gold: fills unchanged (--yellow + --on-accent ink still pass); pale
     tint and on-light text lightnesses swap for the dark canvas. */
  --yellow-soft: #33301C;
  --gold-text:   #E7C14C;
  --gold-text-2: #D9B23B;

  /* Status pills — same 5 hues, inverted recipe:
     text oklch(0.8 0.1 H) · bg oklch(0.3 0.05 H) · border oklch(0.42 0.07 H).
     Dots keep their mid-lightness values (they read on both canvases). */
  --success:    oklch(0.8 0.11 155);
  --success-bg: oklch(0.3 0.05 155);
  --success-bd: oklch(0.42 0.07 155);
  --warn:       oklch(0.84 0.1 85);
  --warn-bg:    oklch(0.3 0.05 85);
  --warn-bd:    oklch(0.42 0.07 85);
  --danger:     oklch(0.8 0.1 25);
  --danger-bg:  oklch(0.3 0.05 25);
  --danger-bd:  oklch(0.44 0.08 25);
  --info:       oklch(0.8 0.09 255);
  --info-bg:    oklch(0.31 0.05 255);
  --info-bd:    oklch(0.44 0.07 255);
  --neutral:    oklch(0.82 0.02 250);
  --neutral-bg: oklch(0.3 0.015 250);
  --neutral-bd: oklch(0.42 0.02 250);

  /* Money */
  --money-pos: oklch(0.78 0.12 155);
  --money-neg: oklch(0.74 0.15 25);
  --money-zero: #6B7E93;

  /* Charts — the same three hues stepped for the dark card (#101D2C): all
     checks pass (worst all-pairs CVD ΔE 9.0, normal-vision 16.5, ≥3:1). */
  --chart-1: #8F84EC;
  --chart-2: #1C9EB0;
  --chart-3: #D95926;
  --chart-muted: #3E5066;
  --chart-grid: #1D2C3F;
  --chart-axis: #24344A;
  --chart-wash: 0.18;

  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* Dark-mode fills: every rule where navy-800 is a BACKGROUND (white/yellow
   text on it) keeps a navy pill via --navy-fill, since --navy-800 itself is
   now a light text color. */
html[data-theme="dark"] .topbar .copilot-cta { background: var(--navy-fill); }
html[data-theme="dark"] .topbar .copilot-cta:hover { background: var(--navy-fill-2); }
html[data-theme="dark"] .btn.dark { background: var(--navy-fill); border-color: var(--navy-fill); }
html[data-theme="dark"] .btn.dark:hover { background: var(--navy-fill-2); }
html[data-theme="dark"] .portal-tab-strip .portal-tab.active { background: var(--navy-fill); }
html[data-theme="dark"] .copilot .head .av { background: linear-gradient(135deg, var(--navy-fill), var(--navy-fill-2)); }
html[data-theme="dark"] .copilot .bubble.me { background: var(--navy-fill); }
html[data-theme="dark"] .job-chip,
html[data-theme="dark"] .job-chip.maint { background: var(--navy-fill); }
html[data-theme="dark"] .chat .channels .ch.active { background: var(--navy-fill); }
html[data-theme="dark"] .timeline .t-item .ico.ai { background: var(--navy-fill); }
html[data-theme="dark"] .approve-bar { background: var(--navy-fill); }
html[data-theme="dark"] .tabs .tab.active { background: var(--navy-fill); }
html[data-theme="dark"] .bars .bar { background: linear-gradient(180deg, var(--navy-fill-2), var(--navy-fill)); }
html[data-theme="dark"] .allocation-activity-mark { background: var(--navy-fill-2); }
html[data-theme="dark"] .branch-allocation-lock input { accent-color: var(--yellow); }
html[data-theme="dark"] .ph { background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--line-2) 8px 16px); }
html[data-theme="dark"] .sig-area.signed { background: var(--card); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2B3B4F; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3A4D66; }

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* app shell scrolls internally */
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #D5DAE2; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #B7BFCD; }
::-webkit-scrollbar-track { background: transparent; }

/* App layout */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w, 248px) 1fr;
  height: 100vh;
  background: var(--bg);
}

.app.collapsed { --sidebar-w: 72px; }
.app.copilot-open { grid-template-columns: var(--sidebar-w, 248px) 1fr 380px; }

/* Sidebar — the classic FoundersCore rail (pre-refresh geometry), on the
   refreshed navy + blue palette. */
.sidebar {
  background: var(--navy-900);
  color: #DDE3F0;
  padding: 18px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.04);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 18px;
}
.sidebar .brand img { width: 36px; height: 36px; border-radius: 8px; background: white; padding: 2px; object-fit: contain; }
.sidebar .brand .logo-tile {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--logo-gradient);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: #fff; letter-spacing: -0.5px;
}
.sidebar .brand .name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: #fff;
}
.sidebar .brand .sub {
  font-size: 11px;
  color: #5b8cff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-section {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: #6B7795;
  text-transform: uppercase;
  padding: 14px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #B8C2D7;
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  position: relative;
  white-space: nowrap;
  /* Nav items are real <a href> so cmd+click / middle-click open a new tab.
     These three undo the anchor defaults a <button> never had. */
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.nav-item .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.nav-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-item.active {
  background: rgba(91, 140, 255, 0.16);
  color: #fff;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #5b8cff;
}
.nav-item .badge {
  margin-left: auto;
  background: var(--yellow);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
}
.sidebar .footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background: var(--navy-900);
  flex-shrink: 0;
}
.sidebar .footer .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--logo-gradient);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.app.collapsed .nav-item span.label,
.app.collapsed .brand .name,
.app.collapsed .brand .sub,
.app.collapsed .nav-section,
.app.collapsed .footer .who { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 12px 0; }
.app.collapsed .brand { justify-content: center; padding: 6px 0 16px; }

.sidebar .footer .who { display: flex; flex-direction: column; min-width: 0; }
.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  /* Layouts inside answer to the MAIN column's width, not the viewport — so
     opening Ezra (which takes a real column) makes pages re-proportion or
     stack instead of squishing (Josh, 2026-09-07). */
  container-type: inline-size;
  container-name: main;
}
/* Grid children may shrink below their content — long titles ellipsize
   instead of forcing a neighbour column down to a sliver. */
.grid > * { min-width: 0; }
/* Two-up card layouts (dashboard Messages | To do): Messages gives a little
   when Ezra is open ("I'd rather just make messaging a little smaller" —
   Josh, 2026-09-07); stacked only when the main column is truly narrow. */
.two-up { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
@container main (max-width: 1040px) { .two-up { grid-template-columns: minmax(0, 1fr); } }
/* Home: To do is exactly as tall as Messages beside it (Josh, 2026-09-29).
   The To do card sits absolutely in its grid cell, so a hundred to-dos never
   set the row's height — Messages does — and the list scrolls inside under a
   header (and search box) that stays put. Messages keeps a floor so a quiet
   inbox doesn't squeeze the list to a sliver. Stacked (narrow main column,
   phone) the list gets its own capped height instead. */
.dash-pair { align-items: stretch; }
.dash-pair > .dash-msgs { display: flex; flex-direction: column; min-height: 360px; }
.dash-todo-slot { position: relative; min-height: 0; }
.fc-todo-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dash-todo-slot > .fc-todo-card { position: absolute; inset: 0; }
.fc-todo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
@container main (max-width: 1040px) {
  .dash-pair > .dash-msgs { min-height: 0; }
  .dash-todo-slot > .fc-todo-card { position: static; max-height: min(520px, 70vh); }
}
@container main (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
/* Messages: channel rail | stream | thread. The stream is minmax(0, …) so its
   header's buttons can't hold it wider than the window — they pushed the
   360px thread off the right edge on laptops (ST-344, Alyssa 2026-09-25).
   When the three columns don't fit (small laptop, or Ezra open), the thread
   slides over the stream instead of squeezing it to a sliver. */
.msg-shell { grid-template-columns: 260px minmax(0, 1fr) 0; }
.msg-shell.thread-open { grid-template-columns: 260px minmax(0, 1fr) 360px; }
@container main (max-width: 1060px) {
  .msg-shell.thread-open { grid-template-columns: 260px minmax(0, 1fr) 0; }
  .msg-shell.thread-open > .msg-thread {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
    width: 360px; max-width: calc(100% - 260px);
    box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16);
  }
}
/* The stream's header answers to the stream's own width: labels drop to
   icons (each button keeps its tooltip), then the actions wrap under the
   title rather than overflow. */
/* Reports → Slack archive: channel rail | stream | thread. On narrow windows
   the rail slims and the thread slides over the stream. */
@container main (max-width: 1000px) {
  .sa-shell { grid-template-columns: 180px minmax(0, 1fr) !important; }
  .sa-shell > .sa-thread {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6;
    width: 360px; max-width: calc(100% - 180px);
    box-shadow: -10px 0 28px rgba(15, 23, 42, 0.16);
  }
}
.msg-main { container: msgmain / inline-size; }
/* The thread header (Josh, 2026-09-25: "the top banner thing is dated and
   wack"): one calm line — a tile, the title with its pills, who can see it
   and who started it; the two resolves and quiet icons on the right. It
   answers to the stream's own width: labels drop to icons (tooltips stay),
   then the "started by" line goes. */
.msg-hdr { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 11px 16px 11px 20px; border-bottom: 1px solid var(--line-2); background: var(--card); }
.msg-hdr-tile { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-2); color: var(--navy-800); }
.msg-hdr-main { flex: 1 1 auto; min-width: 0; }
.msg-hdr-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 650; line-height: 1.3; color: var(--text); letter-spacing: -0.005em; }
.msg-hdr-title .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.msg-hdr-title a.t:hover { text-decoration: underline; }
.msg-hdr-rec { flex: none; font-size: 13px; font-weight: 600; color: var(--info); text-decoration: none; white-space: nowrap; }
.msg-hdr-rec:hover { text-decoration: underline; }
.msg-hdr-open { flex: none; font-size: 12px; font-weight: 400; color: var(--muted); text-decoration: none; }
.msg-hdr-open:hover { color: var(--text); }
.msg-hdr-sub { display: flex; align-items: center; gap: 7px; min-width: 0; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.msg-hdr-sub .dot { opacity: 0.55; flex: none; }
.msg-hdr-sub .ctx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.msg-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.msg-pill.customer { background: var(--info-bg); color: var(--info); }
.msg-rec-convos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.msg-rec-convo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-bg); color: var(--warn); font: inherit; text-align: left; cursor: pointer; }
.msg-rec-convo:hover { border-color: var(--warn); }
.msg-rec-convo .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.msg-rec-convo .k { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.msg-rec-convo .v { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Back from a customer's conversation to the record room's team thread. */
.msg-hdr-back { flex: none; height: 32px; display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 0 10px 0 6px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.msg-hdr-back:hover { background: var(--bg-2); color: var(--text); }
.msg-pill.resolved { background: var(--success-bg); color: var(--success); }
.msg-pill.brought, .msg-pill.outside { background: var(--warn-bg); color: var(--warn); }
.msg-hdr-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.msg-resolve-group { display: inline-flex; margin-right: 4px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--card); }
.msg-resolve-group button, .msg-hdr-btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.msg-resolve-group button + button { border-left: 1px solid var(--line); }
.msg-resolve-group button:hover, .msg-hdr-btn:hover { background: var(--bg-2); color: var(--text); }
.msg-resolve-group button.everybody { color: var(--success); }
.msg-hdr-btn { margin-right: 4px; border: 1px solid var(--line); border-radius: 9px; }
.msg-icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.msg-icon-btn:hover { background: var(--bg-2); color: var(--text); }
.msg-icon-btn.on { color: var(--status-action); }
.msg-hdr-search { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.msg-hdr-search input { width: 170px; border: none; outline: none; background: transparent; font: inherit; font-size: 12.5px; color: var(--text); }
.msg-hdr-search-x { display: inline-flex; padding: 2px; border: none; background: none; color: var(--muted); cursor: pointer; }
/* Who can see this: an avatar stack and a count; the list opens under it. */
.msg-seers-wrap { position: relative; display: inline-flex; flex: none; }
.msg-seers { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: transparent; font: inherit; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.msg-seers:hover { color: var(--text); }
.msg-seers .stack { display: inline-flex; flex: none; }
.msg-seers .stack span { width: 20px; height: 20px; margin-left: -6px; border: 2px solid var(--card); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-700); color: #fff; font-size: 8px; font-weight: 700; }
.msg-seers .stack span:first-child { margin-left: 0; }
.msg-seers .stack span.brought { background: var(--status-action); }
.msg-seers-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 340px; max-height: 420px; overflow-y: auto; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); white-space: normal; }
.msg-seer-head { padding: 6px 8px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.msg-seer-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 8px; }
.msg-seer-row:hover { background: var(--bg-2); }
.msg-seer-av { width: 26px; height: 26px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--navy-700); color: #fff; font-size: 10px; font-weight: 700; }
.msg-seer-av.brought { background: var(--status-action); }
.msg-seer-av.customer { background: var(--yellow); color: #0E2440; }
.msg-seer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); }
.msg-seer-why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
/* The red ×: takes someone brought in out of the thread. */
.msg-seer-x { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--danger-bd); border-radius: 50%; background: var(--danger-bg); color: var(--danger); cursor: pointer; }
.msg-seer-x:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.msg-seer-x:disabled { opacity: 0.5; cursor: default; }
.msg-seer-note { margin: 6px 8px 4px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.msg-hdr-label .lbl-short { display: none; }
@container msgmain (max-width: 900px) {
  .msg-hdr-label .lbl-long { display: none; }
  .msg-hdr-label .lbl-short { display: inline; }
  .msg-resolve-group button, .msg-hdr-btn { padding: 0 10px; }
  .msg-hdr-search input { width: 110px; }
}
@container msgmain (max-width: 560px) {
  .msg-hdr-sub .ctx, .msg-hdr-sub .dot { display: none; }
  .msg-hdr { padding-left: 14px; }
  .msg-hdr-tile { display: none; }
}
@container msgmain (max-width: 440px) {
  .msg-hdr-label { display: none; }
}
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  min-height: 56px;
  height: 56px;
}
.topbar .crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}
.topbar .crumbs .cur { color: var(--ink); font-weight: 600; }
.topbar .search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 0 12px;
  height: 34px;
  border-radius: 6px;
  width: 360px;
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s;
  white-space: nowrap;
}
.topbar .search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; text-align: left; }
.topbar .search:hover { border-color: var(--disabled); }
.topbar .search kbd {
  margin-left: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 5px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--faint);
}
.topbar .icon-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-500);
}
.topbar .icon-btn:hover { border-color: var(--disabled); }
.topbar .icon-btn .dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--card);
}
.topbar .copilot-cta {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px;
  height: 34px;
  background: var(--navy-800);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.topbar .copilot-cta:hover { background: var(--navy-700); }
.topbar .copilot-cta .spark { color: #fff; }

.content {
  flex: 1;
  overflow: auto;
  padding: 28px;
}
.content.tight { padding: 0; }

/* Both portals (customer + subcontractor) run outside the app shell, so they
   need page-level scroll. The main FoundersCore app keeps body overflow hidden
   and scrolls .content. */
/* iOS Safari ignores overflow-x on body alone — the viewport still pans
   sideways when anything overflows. Clip at the html element too, and use
   `clip` (not `hidden`) so no phantom scroll container is created. */
html:has(body.contact-portal-page), html:has(body.sub-portal-page) { overflow-x: clip; }
body.contact-portal-page,
body.sub-portal-page {
  overflow-y: auto;
  overflow-x: clip;
  min-height: 100vh;
  font-family: 'Sora', system-ui, sans-serif;
  /* ---- Customer-portal palette (navy + gold) -----------------------------
     The redesigned portal draws its own surfaces from the token table in
     contactportal.jsx, but the pieces it keeps — detail modals, the schedule
     views, the chat threads — style themselves from these variables. Pointing
     them at the same palette is what makes the two halves read as one portal
     instead of a redesign bolted onto the old blue one. Scoped to this body
     class, so the staff app keeps its own colors. */
  --accent: #96700A;                 /* gold text / links */
  --accent-2: #7A5B08;               /* link hover */
  --accent-soft: #FBF3DC;
  --yellow: #0E2440;                 /* "your own" chat bubbles are navy here */
  --yellow-2: #1A3557;
  --on-accent: #FFFFFF;              /* readable text on portal navy buttons */
  --navy-900: #0B1B30;
  --navy-800: #0E2440;
  --bg: #F4F6F9;
  --bg-2: #F4F6F9;
  --card: #FFFFFF;
  --line: #E3E9F0;
  --line-2: #EEF2F6;
  --text: #16283E;
  --text-2: #44576D;
  --muted: #5B6B7F;
  --success: #137A3D;
  --success-bg: #E6F6EC;
  --success-soft: #E6F6EC;
  --warn: #96700A;
  --warn-bg: #FBF3DC;
  --danger: #B3261E;
  --danger-bg: #FCEAE8;
  --info: #1D4ED8;
  --info-bg: #EAF1FE;
}
body.contact-portal-page #root,
body.sub-portal-page #root {
  height: auto;
  min-height: 100vh;
}
/* Motion for the redesigned portal: cards ease up as they land, sheets rise
   from the bottom edge, toasts fade up from the nav bar. */
@keyframes fcPortalFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fcPortalSheetUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
/* Sub portal "Build with AI" typing dots (web/sub-invoice-builder.jsx). */
@keyframes sibDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes fcPortalToastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
body.contact-portal-page ::placeholder,
body.sub-portal-page ::placeholder { color: #9AA6B5; }
/* The strips of stat cards and tab pills scroll sideways on a narrow screen
   without a scrollbar cutting across the row. */
/* The sub portal's thread title opens the job card — underline on hover. */
body.sub-portal-page .sp-thread-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.fc-portal-strip { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.fc-portal-strip::-webkit-scrollbar { display: none; }
/* The survey prompt renders nothing most of the time; don't leave its margin
   sitting in the layout as an unexplained gap. */
.fc-portal-survey:empty { display: none; }
body.contact-portal-page .portal-shell,
body.sub-portal-page .portal-shell {
  min-height: 100vh;
  overflow-x: hidden;
}
body.contact-portal-page .portal-main,
body.sub-portal-page .portal-main {
  min-height: 0;
}
/* Shared by BOTH portals: wide tables scroll inside their own card instead of
   widening the page and dragging it out of frame. */
.portal-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The property/unit tab strip is one swipeable row of pills: no wrapping and
   no visible scrollbar — a half-visible pill at the edge reads as "more tabs
   this way". */
.portal-tab-strip {
  display: flex;
  gap: 6px;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;
}
.portal-tab-strip::-webkit-scrollbar { display: none; }
.portal-tab-strip .portal-tab {
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.portal-tab-strip .portal-tab.active {
  background: var(--navy-800);
  color: #fff;
}
.portal-tab-strip .portal-tab:not(.active):hover {
  background: var(--bg-2);
  color: var(--text);
}
body.contact-portal-page .portal-table-scroll,
body.sub-portal-page .portal-table-scroll {
  overflow-y: auto;
}
body.contact-portal-page .portal-table-scroll .tbl {
  min-width: 760px;
}
body.contact-portal-page .portal-modal-card,
body.sub-portal-page .portal-modal-card {
  max-height: min(860px, calc(100vh - 72px));
}
body.contact-portal-page .portal-modal-body,
body.sub-portal-page .portal-modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- Portal visual refresh (scoped to the two portals, so the staff app is
   untouched). Softer borders, gentler shadows, larger radii, calmer
   typography. Both portals share it so they read as one product. ---- */
body.contact-portal-page,
body.sub-portal-page { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.contact-portal-page .card,
body.sub-portal-page .card {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: none;
}
body.contact-portal-page .card-pad,
body.sub-portal-page .card-pad { padding: 18px; }
body.contact-portal-page .kpi,
body.sub-portal-page .kpi {
  border-color: var(--line);
  border-radius: 10px;
  padding: 16px;
  box-shadow: none;
}
body.contact-portal-page .kpi .label,
body.sub-portal-page .kpi .label { font-size: 8.5px; letter-spacing: 1.1px; }
body.contact-portal-page .btn,
body.sub-portal-page .btn { border-radius: 6px; }
body.contact-portal-page .btn.sm,
body.sub-portal-page .btn.sm { border-radius: 6px; }
/* Roomier, lighter table cells read less like a spreadsheet. */
body.contact-portal-page .tbl th,
body.sub-portal-page .tbl th { font-size: 9px; letter-spacing: 1.1px; padding: 9px 14px; }
body.contact-portal-page .tbl td,
body.sub-portal-page .tbl td { padding: 13px 14px; }
body.contact-portal-page .tbl th, body.contact-portal-page .tbl td,
body.sub-portal-page .tbl th, body.sub-portal-page .tbl td { border-color: var(--line-2); }
body.contact-portal-page h1,
body.sub-portal-page h1 { letter-spacing: -0.025em; }

/* Two columns on desktop, one stacked column on a phone. Used by the portal
   detail modals (past/future visits, totals + payments, visit who/when) so
   content never gets squeezed into unreadably narrow columns. */
.portal-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Phone widths: tighten card padding so cards aren't mostly whitespace. (Grid
   column counts are handled inline via auto-fit, so cards wrap on narrow
   screens instead of squeezing their contents off-screen.) */
@media (max-width: 640px) {
  body.contact-portal-page .card-pad,
  body.sub-portal-page .card-pad { padding: 15px; }
  .portal-two-col { grid-template-columns: 1fr; }
}

/* Common UI */
.h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; margin: 0; color: var(--ink); }
.h2 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.2px; margin: 0; color: var(--ink); }
.h3 { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--ink); }
.muted { color: var(--muted); }
/* No monospace anywhere — Sora carries figures too. */
.mono { font-family: var(--font-sans); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
}
.card-pad { padding: 20px; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-2);
}
.card-head h2 { font-size: 13.5px; font-weight: 600; margin: 0; color: var(--ink); }
.card-head .meta { color: var(--faint); font-size: 11px; }
.card-head .sub { color: var(--faint); font-size: 11px; margin-top: 2px; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: all .12s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--disabled); }
.btn.primary {
  background: var(--yellow); color: var(--on-accent); border-color: var(--yellow);
  box-shadow: var(--shadow-btn);
}
.btn.primary:hover { background: var(--yellow-2); border-color: var(--yellow-2); }
.btn.accent {
  background: var(--yellow); color: var(--on-accent); border-color: var(--yellow);
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn.accent:hover { background: var(--yellow-2); border-color: var(--yellow-2); }
.btn.dark { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.btn.dark:hover { background: var(--navy-700); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn.ghost:hover { background: var(--bg-2); color: var(--text); border-color: transparent; }
.btn.sm { padding: 0 10px; height: 28px; font-size: 11.5px; font-weight: 500; border-radius: 6px; }
.btn.icon { padding: 0; width: 34px; justify-content: center; }
.btn.sm.icon { width: 28px; }
/* Visit popover action buttons: uniform auto-fit grid → center each button. */
.visit-action-grid .btn { justify-content: center; }

/* Status pill: h 22, r 11, 6px round dot + 10.5px/500 label, tinted recipe. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px;
  height: 22px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 500;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bd);
  color: var(--neutral);
  white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--status-pending); }
.badge.success { background: var(--success-bg); color: var(--success); border-color: var(--success-bd); }
.badge.success .dot { background: var(--success-dot); }
.badge.warn    { background: var(--warn-bg);    color: var(--warn);    border-color: var(--warn-bd); }
.badge.warn .dot { background: var(--warn-dot); }
.badge.danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-bd); }
.badge.danger .dot { background: var(--danger-dot); }
.badge.info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info-bd); }
.badge.info .dot { background: var(--info-dot); }
.badge.navy    { background: var(--neutral-bg); color: var(--neutral); border-color: var(--neutral-bd); }
/* A pill that's also a button (AP job chips, Approve / Approved) — same
   geometry as the status pills beside it; the outline on hover says clickable. */
button.badge { cursor: pointer; font-family: inherit; }
button.badge:not(:disabled):hover { border-color: currentColor; }
button.badge.accent { background: var(--yellow); color: var(--on-accent); border-color: var(--yellow); font-weight: 600; }
button.badge.accent:hover { background: var(--yellow-2); border-color: var(--yellow-2); }
.badge.yellow  { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }

/* Grids used across modules */
.grid { display: grid; gap: 18px; }
.row  { display: flex; gap: 18px; }
.row.tight { gap: 12px; }
.col  { display: flex; flex-direction: column; gap: 12px; }

/* Tables — header row #fafbfd with 9px/600 eyebrow labels, 11px 20px cells,
   #f2f5f9 row hairlines, #f8fafc hover. Money columns right-aligned. */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  text-align: left;
  padding: 11px 20px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line-3);
}
.tbl th {
  color: var(--faint); font-weight: 600; font-size: 9px;
  text-transform: uppercase; letter-spacing: 1.1px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--line-2);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.row-link:hover { background: var(--hover); cursor: pointer; }
/* Watch star under a record number (web/record-marks.jsx): invisible until the
   row is hovered, a small gold star once it's on. */
.fc-watch-star {
  display: inline-block; border: none; background: none; padding: 0; margin: 2px 0 0;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  color: var(--faint); opacity: 0; transition: opacity 120ms, color 120ms;
}
.tbl tr.row-link:hover .fc-watch-star, .fc-watch-star:focus-visible { opacity: 0.75; }
.fc-watch-star:hover { color: oklch(0.72 0.15 80); }
.fc-watch-star.on { opacity: 1; color: oklch(0.72 0.15 80); }
/* The lists that gained Viewed / Change (Josh, 2026-09-24: "the viewed and
   changed are cut off"): those two columns and the trailing chevron sit
   tight, and the title column takes a share of the width instead of holding
   its full length — it ellipsizes before the table runs off the card, and
   widens again when there's room. */
.tbl th.fc-mark-col, .tbl td.fc-mark-col { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.tbl th.fc-chev-col, .tbl td.fc-chev-col { padding-left: 4px; padding-right: 12px; }
.tbl td.fc-flex-title { width: 16%; }
.tbl td.fc-flex-title > div { width: 0; min-width: 100%; }

/* In-app dropdown (web/data.jsx FCSelectMenu) — opens below its trigger. */
.fc-select-trigger {
  width: 100%; height: 34px; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--text); font: inherit; font-size: 12.5px;
  font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.fc-select-trigger:hover { border-color: var(--disabled); }
.fc-select-trigger.open, .fc-select-trigger:focus-visible { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,201,7,0.28); outline: none; }
.fc-select-trigger.active { border-color: var(--navy-800); }
.fc-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-select-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 70;
  max-height: 320px; overflow-y: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-pop, 0 16px 48px rgba(15,23,42,0.18));
}
.fc-select-group {
  padding: 8px 10px 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}
.fc-select-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px;
  border-radius: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.fc-select-opt.hl { background: var(--bg-2); color: var(--text); }
.fc-select-opt.on { color: var(--navy-800); font-weight: 600; }
.fc-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fc-select-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.fc-select-check { width: 14px; display: inline-flex; justify-content: center; color: var(--navy-800); }
.fc-select-dot { width: 7px; height: 7px; border-radius: 2.5px; flex-shrink: 0; }

/* Range calendar (web/data.jsx FCRangeCalendar). */
.fc-cal { border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; background: var(--card); }
.fc-cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.fc-cal-nav { width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.fc-cal-nav:hover { background: var(--bg-2); color: var(--text); }
.fc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.fc-cal-dow { text-align: center; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--faint); padding: 4px 0; }
.fc-cal-day {
  height: 30px; border: none; background: transparent; font: inherit; font-size: 12px;
  color: var(--text); cursor: pointer; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.fc-cal-day:hover { background: var(--bg-2); }
.fc-cal-day.out { color: var(--disabled); }
.fc-cal-day.today { box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.fc-cal-day.in { background: var(--bg-2); border-radius: 0; }
.fc-cal-day.edge { background: var(--navy-fill); color: #fff; font-weight: 600; }
.fc-cal-day.start { border-radius: 6px 0 0 6px; }
.fc-cal-day.end { border-radius: 0 6px 6px 0; }
.fc-cal-day.start.end { border-radius: 6px; }
.fc-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted); min-height: 28px; }
/* The last row you opened stays marked until you open another (Jobber habit). */
.tbl tr[data-visited="1"] { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--accent); }
.tbl tr[data-visited="1"]:hover { background: var(--warn-bg); }
.tbl .num { font-family: var(--font-sans); text-align: right; }

/* Finance → Branch Allocations. This page has a wide editable matrix and a
   long audit trail, so it needs more deliberate inset spacing than a standard
   report table. */
.branch-allocation-summary-body {
  padding: 18px 20px 20px;
}
.branch-allocation-head-badge {
  margin-left: auto;
}
.branch-allocation-table-wrap {
  overflow-x: auto;
  padding: 6px 16px 16px;
  scrollbar-gutter: stable;
}
.branch-allocation-table {
  width: 100%;
}
.branch-allocation-table th {
  white-space: nowrap;
  padding-top: 11px;
  padding-bottom: 11px;
}
.branch-allocation-table td {
  vertical-align: middle;
  padding-top: 13px;
  padding-bottom: 13px;
  transition: background .12s ease;
}
.branch-allocation-table tbody tr:hover td {
  background: var(--hover);
}
.branch-allocation-employee {
  min-width: 220px;
}
.branch-allocation-employee-name {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}
.branch-allocation-employee-meta {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 3px;
}
.branch-allocation-percent-sign {
  color: var(--muted);
  font-size: 12px;
}
.branch-allocation-lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}
.branch-allocation-lock input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--navy-800);
}
.branch-allocation-total {
  min-width: 76px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
}
.branch-allocation-save {
  min-width: 72px;
  text-align: right;
}
.branch-allocation-card-note {
  border-top: 1px solid var(--line-2);
  padding: 13px 20px 16px;
  font-size: 12px;
}
.allocation-activity-list {
  max-height: 590px;
  overflow-y: auto;
  padding: 2px 20px 10px;
  scrollbar-gutter: stable;
}
.allocation-activity-row {
  display: grid;
  grid-template-columns: 8px minmax(240px, 1fr) minmax(280px, auto);
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-3);
}
.allocation-activity-row:last-child {
  border-bottom: 0;
}
.allocation-activity-mark {
  align-self: stretch;
  width: 3px;
  min-height: 32px;
  margin: 2px auto;
  border-radius: 99px;
  background: var(--navy-800);
  opacity: .72;
}
.allocation-activity-title {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}
.allocation-activity-meta {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  margin-top: 3px;
}
.allocation-activity-shares {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 620px;
}
.allocation-share-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
}
.allocation-share-pill strong {
  color: var(--text-2);
  font-size: 11px;
  font-weight: 650;
}
.allocation-activity-empty {
  color: var(--faint);
  font-size: 11.5px;
}

@media (max-width: 900px) {
  .allocation-activity-row {
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: start;
    gap: 5px 12px;
    padding: 14px 0;
  }
  .allocation-activity-mark {
    grid-row: 1 / span 2;
  }
  .allocation-activity-shares {
    grid-column: 2;
    justify-content: flex-start;
    max-width: none;
    margin-top: 4px;
  }
}

@media (max-width: 640px) {
  .branch-allocation-summary-body {
    padding: 15px;
  }
  .branch-allocation-table-wrap {
    padding: 4px 10px 12px;
  }
  .allocation-activity-list {
    padding: 2px 15px 8px;
  }
}

/* Avatars — full-round, navy chip */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 12px; font-weight: 600;
  background: var(--navy-600); color: #9db8e8;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar.lg { width: 44px; height: 44px; font-size: 14px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--card); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* KPI cards — stat tile: eyebrow label → figure → faint sub-line */
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi .label { font-size: 8.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 1.1px; }
.kpi .value { font-size: 23px; font-weight: 600; letter-spacing: -0.5px; margin-top: 6px; font-family: var(--font-sans); color: var(--ink); }
.kpi .trend { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; margin-top: 6px; color: var(--faint); }
.kpi .trend.up { color: var(--success); }
.kpi .trend.down { color: var(--danger); }
.kpi .sparkline { position: absolute; right: 14px; bottom: 14px; opacity: 0.9; }

/* Forms */
/* min-width:0 lets a .field shrink inside a grid/flex row — without it, date &
   number inputs keep their large intrinsic width and overflow the container. */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.input, .select, .textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 3px rgba(255,201,7,0.28);
}
.textarea { resize: vertical; min-height: 80px; font-family: inherit; }
/* Stripe's card boxes (Collect payments → Credit card) wear the app's input
   look. The iframe can't take :focus, so Stripe's own state classes do it. */
.fc-stripe-field { min-height: 38px; }
.fc-stripe-field.StripeElement--focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,201,7,0.28); }
.fc-stripe-field.StripeElement--invalid { border-color: var(--danger); }

/* Card picker (the Role selector in the teammate form). Fixed column counts per
   breakpoint rather than auto-fit: the cards carry a label + a blurb, and
   auto-fit inside an 820px modal drops straight from 4 columns to 1 on a phone.
   minmax(0,1fr) keeps a long label ("Customer experience coordinator") from
   pushing its column wider than its share. */
.pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 860px) { .pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pay type / wage / effective-period row. Stacks on a phone — at 360px the
   three columns leave the wage input about 80px wide. The pay-type column is
   max-content: at 0.8fr it came out 154px in the edit dialog, the three
   buttons need ~240px, and the External button rendered invisibly UNDER the
   wage field — looked missing, couldn't be clicked. */
.pay-row { display: grid; grid-template-columns: max-content 1fr 2fr; gap: 14px; }
@media (max-width: 560px) { .pay-row { grid-template-columns: minmax(0, 1fr); } }

/* Input with a prefix/suffix affix ($, /hr, etc.). The BORDER + focus ring live
   on the wrapper; the inner input is borderless so there's no box-in-a-box. */
.input-affix {
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card);
  transition: border-color .12s, box-shadow .12s;
}
.input-affix:focus-within { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,201,7,0.28); }
.input-affix > input { flex: 1; min-width: 0; border: none; background: transparent; padding: 9px 0; font: inherit; font-size: 12.5px; color: var(--text); outline: none; }
.input-affix > .affix { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* No native number spinner in a currency-style affix field — type the value. */
.input-affix > input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.input-affix > input[type=number]::-webkit-outer-spin-button,
.input-affix > input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Cmd K modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 20, 36, 0.44);
  backdrop-filter: blur(3px);
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  /* 4vh top + 4vh bottom so modals up to 92vh tall fit on screen without
     clipping their footers. The previous 12vh top combined with modals'
     maxHeight: 92vh pushed the footer 4vh below the viewport. */
  padding: 4vh 16px;
  overflow-y: auto;
}

/* Google Places autocomplete dropdown — Google appends .pac-container to
   <body> with z-index: 1000. Some of our modals run hotter than that, so
   force the dropdown above anything we throw at it. */
.pac-container {
  z-index: 10000 !important;
}
.cmdk {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(640px, 92vw);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.cmdk .input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cmdk input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--text);
}
.cmdk .results { max-height: 50vh; overflow: auto; padding: 8px; }
.cmdk .group-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 12px 4px; }
.cmdk .result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
}
.cmdk .result:hover, .cmdk .result.sel { background: var(--bg-2); }
.cmdk .result .kbd { margin-left: auto; font-family: var(--font-sans); font-size: 11px; color: var(--muted); }
.cmdk .result .ico { color: var(--muted); display: flex; }

/* Copilot drawer */
.copilot {
  background: var(--card);
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.copilot .head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.copilot .head .av {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
.copilot .body {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
/* Everything in the conversation fits the drawer's width and grows down,
   never sideways (Josh, 2026-09-28: "the side to side slide on the ai chats
   feels busy. it needs to fit vertically"). A flex item's automatic minimum
   width is its longest unbreakable run — an ID, a link, a wide table — which
   pushed the whole thread wider than the drawer. */
.copilot .body > * { min-width: 0; max-width: 100%; }
.copilot .compose {
  border-top: 1px solid var(--line-2);
  padding: 14px;
}
.copilot .bubble {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--bg-2);
  color: var(--text);
}
.copilot .bubble.me {
  background: var(--navy-800);
  color: #E8ECF6;
  align-self: flex-end;
  max-width: 80%;
}
.copilot .bubble.ai { background: var(--bg-2); }
.copilot .bubble.ai .src { font-size: 11px; color: var(--muted); margin-top: 8px; }
.copilot .suggest {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.copilot .suggest button {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 12px;
  padding: 6px 11px;
  color: var(--text-2);
}
.copilot .suggest button:hover { background: var(--bg-2); color: var(--text); }
.copilot .compose .input-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 8px 8px 14px;
  display: flex; align-items: end; gap: 6px;
}
.copilot .compose textarea {
  flex: 1; border: none; outline: none; resize: none; background: transparent;
  font-size: 13.5px; padding: 6px 0; min-height: 24px;
  font-family: inherit;
}

/* Schedule */
.schedule {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.schedule .hd, .schedule .rw {
  display: grid;
  grid-template-columns: 160px repeat(7, 1fr);
}
.schedule .hd {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.schedule .hd > div {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--line-2);
}
.schedule .hd > div:last-child { border-right: none; }
.schedule .hd .day-num { font-size: 16px; color: var(--text); font-weight: 600; letter-spacing: 0; text-transform: none; }
.schedule .rw {
  border-bottom: 1px solid var(--line-2);
  min-height: 90px;
}
.schedule .rw:last-child { border-bottom: none; }
.schedule .crew-cell {
  padding: 14px;
  border-right: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
}
.schedule .crew-cell .name { font-weight: 600; font-size: 13.5px; }
.schedule .crew-cell .sub { font-size: 12px; color: var(--muted); }
.schedule .day-cell {
  border-right: 1px solid var(--line-2);
  padding: 6px;
  display: flex; flex-direction: column; gap: 5px;
  min-height: 90px;
}
.schedule .day-cell:last-child { border-right: none; }
.schedule .day-cell.drag-over { background: var(--yellow-soft); }
.job-chip {
  background: var(--navy-800);
  color: white;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
  border-left: 3px solid var(--yellow);
  cursor: grab;
  display: flex; flex-direction: column; gap: 2px;
}
.job-chip:active { cursor: grabbing; }
.job-chip .who { color: rgba(255,255,255,0.7); font-size: 10.5px; }
.job-chip.water  { background: #194b6e; border-left-color: #46BCE6; }
.job-chip.fire   { background: #6b2e16; border-left-color: #FF8C42; }
.job-chip.mold   { background: #2c5a3a; border-left-color: #4FCB81; }
.job-chip.recon  { background: #4b3e6e; border-left-color: #B084EB; }
.job-chip.maint  { background: var(--navy-800); border-left-color: var(--yellow); }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.kanban-col {
  background: var(--bg-2);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 200px;
}
.kanban-col .col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px; }
.kanban-col .col-head .count {
  background: var(--card); color: var(--muted); padding: 2px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500; margin-left: auto;
}
.kanban-card {
  background: var(--card);
  border-radius: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.kanban-card .title { font-weight: 600; font-size: 13.5px; margin: 6px 0 4px; }
.kanban-card .meta { font-size: 12px; color: var(--muted); }
.kanban-card .row { margin-top: 10px; align-items: center; justify-content: space-between; }

/* Chat */
.chat { display: grid; grid-template-columns: 240px 1fr 280px; height: 100%; }
.chat .channels {
  background: var(--card); border-right: 1px solid var(--line);
  padding: 12px; display: flex; flex-direction: column; gap: 2px; overflow: auto;
}
.chat .channels .ch-section { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 10px 4px; }
.chat .channels .ch {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.chat .channels .ch:hover { background: var(--bg-2); color: var(--text); }
.chat .channels .ch.active { background: var(--navy-800); color: white; }
.chat .channels .ch .unread { margin-left: auto; background: var(--yellow); color: var(--navy-900); font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; }
.chat .panel { display: flex; flex-direction: column; min-width: 0; }
.chat .panel .hd {
  padding: 14px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px;
}
.chat .stream { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.chat .msg { display: flex; gap: 12px; }
.chat .msg .body { flex: 1; min-width: 0; }
.chat .msg .who { font-weight: 600; font-size: 13.5px; }
.chat .msg .ts  { font-size: 11.5px; color: var(--muted); margin-left: 8px; }
.chat .msg .txt { font-size: 13.5px; line-height: 1.55; margin-top: 2px; }
.chat .msg .attach {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: var(--bg);
}
.chat .compose {
  border-top: 1px solid var(--line);
  padding: 12px 22px 18px;
}
.chat .compose .wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card);
}
.chat .compose textarea {
  border: none; outline: none; resize: none; min-height: 44px;
  font-size: 13.5px; background: transparent;
  font-family: inherit;
}
.chat .compose .actions { display: flex; align-items: center; gap: 6px; }
.chat .info {
  background: var(--card); border-left: 1px solid var(--line);
  padding: 18px; display: flex; flex-direction: column; gap: 18px; overflow: auto;
}

/* Detail panes */
.split { display: grid; grid-template-columns: 1fr 380px; gap: 18px; }
.split .side { display: flex; flex-direction: column; gap: 14px; }

.timeline { display: flex; flex-direction: column; gap: 14px; position: relative; }
.timeline .t-item { display: flex; gap: 12px; }
.timeline .t-item .ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.timeline .t-item .ico.ai { background: var(--navy-800); color: var(--yellow); }
.timeline .t-item .ico.green { background: var(--success-bg); color: var(--success); }
.timeline .t-item .ico.yel { background: var(--yellow-soft); color: #1d4ed8; }
.timeline .t-item .info .who { font-weight: 600; font-size: 13px; }
.timeline .t-item .info .what { font-size: 13px; color: var(--text-2); }
.timeline .t-item .info .ts { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Image placeholders */
.ph {
  background: repeating-linear-gradient(135deg, #EEF1F6 0 8px, #E4E8F0 8px 16px);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
}

/* Empty / overlay */
.empty {
  padding: 60px 28px;
  text-align: center;
  color: var(--muted);
}

/* AI accent — Ezra hero surface: deep navy + two radial glows */
.ai-bg {
  background:
    radial-gradient(90% 160% at 88% -30%, rgba(34,211,238,0.28), transparent 60%),
    radial-gradient(70% 130% at 8% 120%, rgba(37,99,235,0.35), transparent 55%),
    #0a1628;
  color: white;
}

.notif-pop {
  position: absolute;
  top: 56px;
  right: 28px;
  width: 380px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 50;
  overflow: hidden;
}
.notif-pop .head { padding: 14px 16px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; }
.notif-pop .list { max-height: 70vh; overflow: auto; }
.notif-pop .n {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-2); align-items: flex-start;
}
.notif-pop .n:last-child { border-bottom: none; }
.notif-pop .n .ico {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Document signing */
.doc-pane {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 44px;
  line-height: 1.55;
  font-size: 13.5px;
  color: var(--text-2);
}
.doc-pane h2.doc-title { font-family: var(--font-sans); font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.doc-pane h3.doc-sec { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-800); margin: 22px 0 6px; }
.sig-field {
  margin-top: 30px;
  border-top: 1px dashed var(--muted-2);
  padding-top: 10px;
  display: flex; align-items: center; gap: 14px;
}
.sig-field .label { font-size: 12px; color: var(--muted); }
.sig-area {
  min-width: 220px; height: 56px; border: 2px dashed var(--yellow); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow-soft);
  color: #1d4ed8; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.sig-area.signed {
  background: white;
  border-style: solid;
  border-color: var(--success);
  color: var(--text);
  font-family: "Caveat", "Brush Script MT", cursive;
  font-size: 28px;
  font-weight: 400;
}

/* Approve bar */
.approve-bar {
  background: var(--navy-800);
  color: white;
  padding: 14px 22px;
  border-radius: 12px;
  display: flex; align-items: center; gap: 14px;
}
.approve-bar .who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.approve-bar .actions { margin-left: auto; display: flex; gap: 8px; }

/* utility */
.spacer { flex: 1; }
.divider { height: 1px; background: var(--line-2); margin: 6px 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 99px;
  background: var(--bg-2); font-size: 11.5px; color: var(--text-2);
}

/* Tabs — pill rail: #eaeef4 track r 8 pad 4; active tab is a dark pill with
   the only non-button/modal shadow in the system. */
.tabs {
  display: inline-flex; gap: 4px; border-bottom: none;
  background: var(--track); border-radius: 8px; padding: 4px;
  align-self: flex-start;
}
.tabs .tab {
  height: 30px; display: inline-flex; align-items: center;
  padding: 0 13px; font-size: 12px; font-weight: 500; color: var(--navy-500);
  background: transparent; border: none; border-radius: 6px; margin-bottom: 0;
  white-space: nowrap;
}
.tabs .tab.active {
  color: #fff; background: var(--navy-800); border-bottom-color: transparent;
  font-weight: 600; box-shadow: var(--shadow-tab);
}
.tabs .tab:hover:not(.active) { color: var(--text); }

/* Equipment cards */
.eq-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; display: flex; gap: 14px; align-items: center;
}
.eq-card .img {
  width: 64px; height: 64px; border-radius: 10px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
  color: var(--navy-800);
}

/* charts */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 8px 0; }
.bars .bar {
  flex: 1; background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
  border-radius: 6px 6px 2px 2px;
  position: relative;
}
.bars .bar.accent { background: linear-gradient(180deg, var(--yellow), var(--yellow-2)); }
.bars .bar .lbl { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }

.ring {
  --p: 0.65;
  --c: var(--navy-800);
  --bg: var(--bg-2);
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), var(--bg) 0);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ring::after {
  content: ""; position: absolute; inset: 12px; background: var(--card); border-radius: 50%;
}
.ring .v { position: relative; z-index: 1; font-size: 22px; font-weight: 600; font-family: var(--font-sans); font-feature-settings: "tnum"; }

/* Marketing */
.brand-tone { background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); color: white; }

/* Sub-portal tab strip — horizontally scrollable on a phone, no visible scrollbar */
.fc-tabstrip::-webkit-scrollbar { display: none; }

/* Skeleton loading — shimmer placeholders shown while a list/detail is fetching.
   Reads as "loading" instead of an empty state. Respects reduced-motion. */
.skln {
  display: inline-block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line-2) 25%, var(--line) 37%, var(--line-2) 63%);
  background-size: 400% 100%;
  animation: skln-shimmer 1.4s ease infinite;
}
@keyframes skln-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skln { animation: none; } }

/* Dark-surface variant (messaging's navy channel rail). */
.skln.dark {
  background: linear-gradient(90deg, rgba(255,255,255,0.07) 25%, rgba(255,255,255,0.16) 37%, rgba(255,255,255,0.07) 63%);
  background-size: 400% 100%;
}

/* Full-page list tables — the app scrolls .content, so lists that drop their
   fixed-height inner scrollbox now flow down the page with a single scrollbar.
   Pin the column headers so they stay visible while scrolling (Jobber-style).
   box-shadow draws the header divider because a border on a sticky, collapsed
   cell drops out while pinned. */
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--line-2);
}

/* Small inline spinner for "loading more" (infinite scroll). */
.fc-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px;
  border: 2px solid var(--line-2); border-top-color: var(--navy-800); border-radius: 50%;
  animation: fc-spin 0.7s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fc-spin { animation: none; } }

/* Copilot drawer: a search hit jumped to in the transcript. */
.copilot .bubble.flash { animation: fc-flash 1.6s ease-out 1; }
@keyframes fc-flash { 0% { box-shadow: 0 0 0 3px var(--yellow); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Copilot: a subtle flag on assistant replies — opens a Help & support ticket. */
.copilot .bubble.ai { position: relative; }
.copilot .bubble.ai .flag { position: absolute; top: 4px; right: 6px; border: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 4px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.copilot .bubble.ai:hover .flag, .copilot .bubble.ai .flag:focus { opacity: .7; }
.copilot .bubble.ai .flag:hover { opacity: 1; color: var(--danger); }


/* Ezra voice — the Tesla-style indicator under the composer: five bars that
   breathe while listening, dance while Ezra speaks, tick while it checks. */
.copilot .voice-status { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.copilot .voice-orb { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.copilot .voice-orb i { display: block; width: 4px; height: 6px; border-radius: 99px; background: var(--danger-dot); transition: background 200ms; animation: fc-voice-breathe 1.6s ease-in-out infinite; }
.copilot .voice-orb i:nth-child(2) { animation-delay: .15s } .copilot .voice-orb i:nth-child(3) { animation-delay: .3s }
.copilot .voice-orb i:nth-child(4) { animation-delay: .45s } .copilot .voice-orb i:nth-child(5) { animation-delay: .6s }
.copilot .voice-status.speaking .voice-orb i { background: var(--yellow); animation: fc-voice-dance .55s ease-in-out infinite alternate; }
.copilot .voice-status.thinking .voice-orb i { background: var(--muted); animation: fc-voice-tick 1s linear infinite; }
.copilot .voice-status.connecting .voice-orb i { background: var(--line); }
@keyframes fc-voice-breathe { 0%,100% { height: 6px; opacity: .55 } 50% { height: 14px; opacity: 1 } }
@keyframes fc-voice-dance { from { height: 5px } to { height: 20px } }
@keyframes fc-voice-tick { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }
/* Assistant chats that feel like a conversation (Josh, 2026-09-28): replies
   in light markdown, a live "working" bubble with each step and a Stop, what
   it did under every answer, queued messages, pictures that open. */
.copilot .bubble .md { white-space: normal; }
.copilot .md > :first-child { margin-top: 0; }
.copilot .md > :last-child { margin-bottom: 0; }
.copilot .md-p { margin: 0 0 8px; }
.copilot .md-list { margin: 0 0 8px; padding-left: 20px; }
.copilot .md-list li { margin: 2px 0; }
.copilot .md-h { font-weight: 700; margin: 10px 0 4px; }
.copilot .md a { color: var(--accent); text-decoration: underline; }
.copilot .md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: rgba(15, 23, 42, .06); padding: 1px 4px; border-radius: 4px; }
.copilot .md-pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: rgba(15, 23, 42, .06); padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; }
/* Tables fit the bubble: columns share the width and their text wraps. */
.copilot .md-table-wrap { margin: 0 0 8px; max-width: 100%; }
.copilot .md-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.copilot .md-table th, .copilot .md-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; }
.copilot .bubble img, .copilot .bubble video { max-width: 100%; height: auto; }
/* A table wider than three columns reads as stacked cards (shell.jsx FCMarkdown). */
.copilot .md-cards { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.copilot .md-card { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12px; background: var(--card); }
.copilot .md-card-title { font-weight: 600; margin-bottom: 3px; overflow-wrap: anywhere; }
.copilot .md-card-row { display: flex; gap: 8px; line-height: 1.45; }
.copilot .md-card-k { flex: 0 0 38%; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.copilot .md-card-v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.copilot .md-table th { background: rgba(15, 23, 42, .04); font-weight: 600; }
html[data-theme="dark"] .copilot .md-code, html[data-theme="dark"] .copilot .md-pre, html[data-theme="dark"] .copilot .md-table th { background: rgba(255, 255, 255, .08); }
.copilot .bubble.working { white-space: normal; }
.copilot .work-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.copilot .work-dots { display: inline-flex; gap: 3px; }
.copilot .work-dots i { display: block; width: 5px; height: 5px; border-radius: 99px; background: var(--muted); animation: sibDot 1.2s ease-in-out infinite; }
.copilot .work-dots i:nth-child(2) { animation-delay: .15s; }
.copilot .work-dots i:nth-child(3) { animation-delay: .3s; }
.copilot .work-stop { margin-left: auto; border: 1px solid var(--line); background: var(--card); color: var(--text-2); border-radius: 99px; font-size: 11.5px; padding: 2px 10px; cursor: pointer; }
.copilot .work-stop:hover { border-color: var(--danger-dot); color: var(--danger); }
.copilot .steps { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.copilot .steps li { position: relative; padding: 2px 0 2px 18px; line-height: 1.4; }
.copilot .steps li::before { content: "✓"; position: absolute; left: 2px; top: 2px; font-size: 11px; color: var(--success-dot); }
.copilot .steps li.running::before { content: ""; left: 2px; top: 6px; width: 7px; height: 7px; border: 2px solid var(--muted-2); border-top-color: transparent; border-radius: 99px; animation: fc-spin .8s linear infinite; }
.copilot .steps li.error::before { content: "✕"; color: var(--danger-dot); }
.copilot .steps li.say, .copilot .steps li.more { padding-left: 0; font-style: italic; }
.copilot .steps li.say::before, .copilot .steps li.more::before { content: none; }
.copilot .worked { margin-top: 6px; }
.copilot .worked > button { border: 0; background: transparent; padding: 0; color: var(--muted); font-size: 11.5px; cursor: pointer; }
.copilot .worked > button:hover { color: var(--text-2); text-decoration: underline; }
.copilot .queued-note { align-self: flex-end; font-size: 10.5px; color: var(--muted); margin-top: -12px; }
.copilot .chat-pic { border: 0; padding: 0; background: transparent; cursor: zoom-in; line-height: 0; border-radius: 8px; }

/* ---- easter eggs (shell.jsx useEasterEggs) ------------------------------
   Confetti burst (birthday, Konami) and the "Founders 1999" look: bevelled
   grey chrome, system-ish serif, navy title bars — for this tab only. */
.fc-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 99999; overflow: hidden; }
.fc-confetti i { position: absolute; top: -20px; display: block; border-radius: 2px; opacity: 0; animation: fc-confetti-fall 3s ease-out forwards; }
@keyframes fc-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 105vh, 0) rotate(var(--spin, 720deg)); opacity: 0; }
}
html[data-fc-retro] { --bg: #c0c0c0; --card: #dcdcdc; --line: #7a7a7a; --line-2: #9a9a9a; --text: #000; --muted: #333; --accent: #000080; --navy-fill: #000080; --radius: 0px; --radius-lg: 0px; }
html[data-fc-retro] body { font-family: "Times New Roman", Times, serif; background: var(--bg) !important; color: #000; }
html[data-fc-retro] .card, html[data-fc-retro] .panel, html[data-fc-retro] .modal, html[data-fc-retro] .copilot { border-radius: 0 !important; border: 2px outset #f0f0f0 !important; background: #dcdcdc !important; box-shadow: none !important; }
html[data-fc-retro] .btn, html[data-fc-retro] button.btn { border-radius: 0 !important; border: 2px outset #f0f0f0 !important; background: #c0c0c0 !important; color: #000 !important; font-family: "Times New Roman", Times, serif; text-shadow: none; }
html[data-fc-retro] .btn:active { border-style: inset !important; }
html[data-fc-retro] .btn.primary { background: #000080 !important; color: #fff !important; }
html[data-fc-retro] .input, html[data-fc-retro] input, html[data-fc-retro] textarea, html[data-fc-retro] select { border-radius: 0 !important; border: 2px inset #f0f0f0 !important; background: #fff !important; color: #000 !important; }
html[data-fc-retro] .sidebar, html[data-fc-retro] .topbar { background: #000080 !important; color: #fff !important; border-radius: 0 !important; }
html[data-fc-retro] h1, html[data-fc-retro] h2, html[data-fc-retro] h3 { font-family: "Times New Roman", Times, serif; text-decoration: underline; }
html[data-fc-retro] a { color: #0000ee; text-decoration: underline; }
html[data-fc-retro] * { transition: none !important; }
html[data-fc-retro] .avatar { border-radius: 0 !important; }

/* Account picker rows inside the Invoices packet modals (PO requests / statement) */
.inv-pick-row:hover, .inv-pick-row:focus-visible { background: var(--bg-2) !important; outline: none; }
.inv-pick-row:first-child { border-top: none !important; }

/* ===== Data and Reports (web/reports.jsx) ==================================
   Tiles, stat tiles, chart cards and the report table. Colors are tokens
   only, so dark mode is the token swap above. */
.rpt-section-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; }
.rpt-section-h h2 { font-size: 10px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); margin: 0; }
.rpt-section-h span { font-size: 12px; color: var(--muted); }
.rpt-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rpt-tiles.data { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container main (max-width: 1100px) { .rpt-tiles, .rpt-tiles.data { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container main (max-width: 640px) { .rpt-tiles, .rpt-tiles.data { grid-template-columns: minmax(0, 1fr); } }
.rpt-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  text-align: left; font: inherit; color: inherit; cursor: pointer; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
  transition: border-color .12s;
}
.rpt-tile:hover, .rpt-tile:focus-visible { border-color: var(--disabled); outline: none; }
.rpt-tile .top { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 22px; }
.rpt-tile .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--bg-2); color: var(--navy-800); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rpt-tile .t { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-tile .d { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.rpt-tile .n { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg-2); padding: 2px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.rpt-tile .pin { position: absolute; top: 12px; right: 10px; width: 24px; height: 24px; border: none; background: transparent; border-radius: 6px; color: var(--disabled); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.rpt-tile .pin:hover { background: var(--bg-2); color: var(--muted); }
.rpt-tile .pin.on { color: oklch(0.72 0.15 80); }
.rpt-tile .pin.on svg path { fill: currentColor; }

.rpt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rpt-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px 12px; min-width: 0; container-type: inline-size; }
.rpt-kpi .l { font-size: 9px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 5px; }
.rpt-kpi .v { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; color: var(--ink); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-kpi .s { font-size: 11px; color: var(--muted); margin-top: 5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 16px; }
/* A narrow tile (two across on a phone) keeps an eight-figure total whole. */
@container (max-width: 175px) { .rpt-kpi .v { font-size: 18px; letter-spacing: -0.3px; } }
.rpt-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 600; padding: 0 6px; height: 17px; border-radius: 99px; border: 1px solid; font-variant-numeric: tabular-nums; }
.rpt-delta.good { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); }
.rpt-delta.bad { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }
.rpt-delta.flat { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-bd); }

.rpt-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rpt-grid-2.one { grid-template-columns: minmax(0, 1fr); }
@container main (max-width: 980px) { .rpt-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.rpt-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; min-width: 0; position: relative; }
.rpt-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; flex-wrap: wrap; }
.rpt-card-head h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0; }
.rpt-card-head .sub { font-size: 11px; color: var(--muted); }
.rpt-card-head .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rpt-card-body { padding: 10px 16px 14px; }
.rpt-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.rpt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.rpt-legend i.line { height: 2px; width: 14px; border-radius: 1px; }
.rpt-chart { position: relative; }
.rpt-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rpt-chart:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 6px; }
.rpt-tip {
  position: absolute; pointer-events: none; z-index: 6; top: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; box-shadow: var(--shadow-pop); font-size: 11.5px; min-width: 150px; white-space: nowrap;
}
.rpt-tip .h { font-size: 10.5px; color: var(--muted); margin-bottom: 5px; }
.rpt-tip .r { display: flex; align-items: center; gap: 8px; line-height: 1.7; color: var(--text-2); }
.rpt-tip .r b { color: var(--ink); font-weight: 600; margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.rpt-tip .r i { width: 12px; height: 2px; border-radius: 1px; display: inline-block; flex-shrink: 0; }
.rpt-hbar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(40px, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; }
.rpt-hbar .lab { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text); }
.rpt-hbar .lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-hbar .lab em { font-style: normal; color: var(--muted); font-size: 11px; flex-shrink: 0; }
.rpt-hbar .track { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.rpt-hbar .fill { height: 100%; border-radius: 4px; background: var(--chart-1); min-width: 2px; }
.rpt-hbar .val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.rpt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.rpt-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rpt-filters .fc-select-trigger { width: auto; min-width: 140px; max-width: 240px; height: 32px; }
.rpt-seg { display: inline-flex; background: var(--track); border-radius: 8px; padding: 2px; gap: 2px; }
.rpt-seg button { border: none; background: transparent; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--text-2); padding: 0 10px; height: 28px; border-radius: 6px; cursor: pointer; }
.rpt-seg button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-tab); }
.rpt-pop { position: absolute; top: calc(100% + 6px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); }
.rpt-preset { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: transparent; border-radius: 6px; font: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; text-align: left; }
.rpt-preset:hover { background: var(--bg-2); color: var(--text); }
.rpt-preset.on { color: var(--ink); font-weight: 600; }
.rpt-preset .ck { width: 16px; display: inline-flex; justify-content: center; color: var(--navy-800); }

.rpt-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.5; padding: 10px 14px; border-radius: 10px; background: var(--info-bg); border: 1px solid var(--info-bd); }
.rpt-note svg { flex-shrink: 0; color: var(--info); margin-top: 1px; }
.rpt-table-tools { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.rpt-table-wrap { overflow: auto; max-height: min(760px, 74vh); }
.rpt-table-wrap .tbl td, .rpt-table-wrap .tbl th { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
.rpt-table-wrap .tbl td.wrap { white-space: normal; min-width: 220px; max-width: 420px; }
.rpt-table-wrap .tbl tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--thead); font-weight: 600; color: var(--ink); box-shadow: inset 0 1px 0 var(--line); }
.rpt-table-wrap .tbl td.money-neg { color: var(--money-neg); }
.rpt-table-wrap .tbl td.money-zero { color: var(--money-zero); }
.rpt-table-wrap .tbl tr.grp td { background: var(--hover); }
.rpt-link { color: var(--info); font-weight: 600; text-decoration: none; }
.rpt-link:hover { text-decoration: underline; }
.rpt-pager { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.rpt-stale { opacity: 0.55; transition: opacity .15s; }

@media print {
  @page { margin: 12mm; }
  html[data-theme="dark"] {
    --bg: #fff; --bg-2: #f4f6f9; --card: #fff; --line: #e3e8ef; --line-2: #eef1f6; --line-3: #f2f5f9; --thead: #fafbfd;
    --ink: #0d1b2e; --text: #223349; --text-2: #3a4a5e; --muted: #67768a; --faint: #8a97a8; --navy-800: #0E2440;
    --chart-1: #7B6BE6; --chart-2: #008A9E; --chart-3: #E0682F; --chart-grid: #EEF1F6; --chart-axis: #E3E8EF;
  }
  html, body, #root { height: auto !important; overflow: visible !important; background: #fff !important; }
  .app { display: block !important; height: auto !important; }
  .sidebar, .topbar, .copilot, .rpt-no-print { display: none !important; }
  .main, .content { overflow: visible !important; height: auto !important; padding: 0 !important; display: block !important; }
  .rpt-table-wrap { max-height: none !important; overflow: visible !important; }
  .rpt-card, .rpt-kpi, .rpt-kpis { break-inside: avoid; }
  .rpt-table-wrap .tbl thead th, .rpt-table-wrap .tbl tfoot td { position: static !important; }
}