/* ============================================================================
   Niva UI — design system
   Extracted from the /leads reference implementation.
   Framework-agnostic: plain CSS + class names. Works with Jinja, React, Vue.

   Load order:
     1. this file
     2. your page-specific styles (should be small — if a page needs a lot of
        its own CSS, a component is probably missing from here)

   Rule: pages never hardcode a hex value, a font size, or a radius.
   Everything comes from the tokens below.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------ */
:root{
  /* surfaces */
  --paper:#F2F4F2;          /* app background */
  --surface:#FFFFFF;        /* cards, rows, menus */
  --surface-hover:#F7F9F7;  /* row hover */
  --surface-sunk:#EDF0EE;   /* segmented controls, modal footers */

  /* text */
  --ink:#1C2523;            /* primary */
  --ink-2:#5C6B65;          /* secondary, labels */
  --ink-3:#8A968F;          /* tertiary, placeholders, meta */

  /* lines */
  --line:#E2E7E3;           /* default border */
  --line-2:#D2D9D4;         /* hover / stronger border */

  /* brand */
  --accent:#2F6F5E;         /* primary actions, active filters, focus */
  --accent-soft:#E6F0EC;    /* accent background wash */
  --focus:#2F6F5E;

  /* status tones — semantic per entity, see DESIGN-SPEC.md for mappings */
  --t-amber:#B4740E;  --t-amber-bg:#FBF2E1;
  --t-blue:#2563A8;   --t-blue-bg:#E8F0F9;
  --t-violet:#6D4AA8; --t-violet-bg:#EEE9F7;
  --t-green:#2F6F5E;  --t-green-bg:#E4F0EC;
  --t-deep:#1F5C3D;   --t-deep-bg:#E1F0E6;
  --t-grey:#6F7A74;   --t-grey-bg:#ECEFED;
  --t-red:#B4453C;    --t-red-bg:#FAE9E7;

  /* elevation */
  --shadow:0 1px 2px rgba(28,37,35,.05), 0 8px 24px rgba(28,37,35,.09);

  /* geometry */
  --r-sm:6px; --r-md:7px; --r-lg:10px; --r-xl:12px;
  --row-h:56px;             /* comfortable table row */

  /* type */
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-title:21px; --fs-h2:19px; --fs-h3:16px;
  --fs-body:14px; --fs-cell:13.5px; --fs-ui:13px;
  --fs-meta:12.5px; --fs-micro:11.5px; --fs-tag:10.5px;

  /* motion */
  --dur-fast:.1s; --dur:.14s; --dur-slow:.22s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121615; --surface:#191E1D; --surface-hover:#1F2524; --surface-sunk:#141918;
    --ink:#E6EBE8; --ink-2:#98A6A0; --ink-3:#6E7B76;
    --line:#252D2B; --line-2:#303A37;
    --accent:#6BBFA4; --accent-soft:#1B2A26; --focus:#6BBFA4;
    --t-amber:#E0A33E;  --t-amber-bg:#2B2416;
    --t-blue:#72AEEA;   --t-blue-bg:#16222E;
    --t-violet:#AE93E4; --t-violet-bg:#221C31;
    --t-green:#6BBFA4;  --t-green-bg:#152825;
    --t-deep:#63C08C;   --t-deep-bg:#14261C;
    --t-grey:#909C96;   --t-grey-bg:#202624;
    --t-red:#E58076;    --t-red-bg:#2D1B19;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#121615; --surface:#191E1D; --surface-hover:#1F2524; --surface-sunk:#141918;
  --ink:#E6EBE8; --ink-2:#98A6A0; --ink-3:#6E7B76;
  --line:#252D2B; --line-2:#303A37;
  --accent:#6BBFA4; --accent-soft:#1B2A26; --focus:#6BBFA4;
  --t-amber:#E0A33E;  --t-amber-bg:#2B2416;
  --t-blue:#72AEEA;   --t-blue-bg:#16222E;
  --t-violet:#AE93E4; --t-violet-bg:#221C31;
  --t-green:#6BBFA4;  --t-green-bg:#152825;
  --t-deep:#63C08C;   --t-deep-bg:#14261C;
  --t-grey:#909C96;   --t-grey-bg:#202624;
  --t-red:#E58076;    --t-red-bg:#2D1B19;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
}


/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}

.page{max-width:1240px;margin:0 auto;padding:28px 20px 72px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.rule{height:1px;background:var(--line)}
.spacer{flex:1 1 auto;min-width:0}

.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:var(--fs-title);font-weight:600;letter-spacing:-.015em;margin:0}
.page-head .sub{color:var(--ink-2);font-size:var(--fs-ui);margin-top:2px}
.head-tools{display:flex;gap:8px;align-items:center}

.sect{
  display:flex;align-items:baseline;gap:8px;
  margin:22px 0 12px;font-size:var(--fs-meta);color:var(--ink-3);font-weight:500;
}
.sect .n{color:var(--ink-3);font-weight:400;font-variant-numeric:tabular-nums}


/* ---------------------------------------------------------------------------
   3. BUTTONS
   ------------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:var(--fs-ui);cursor:pointer;
  border-radius:var(--r-sm);padding:6px 10px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
}
.btn:hover{background:var(--surface-hover);color:var(--ink);border-color:var(--line-2)}
.btn--primary{
  border-color:transparent;background:var(--accent);color:#fff;
  font-weight:500;padding:7px 12px;
}
:root[data-theme="dark"] .btn--primary{color:#0F1614}
.btn--primary:hover{filter:brightness(1.06);background:var(--accent);color:#fff}
:root[data-theme="dark"] .btn--primary:hover{color:#0F1614}
.btn--danger{color:var(--t-red)}
.btn:disabled{opacity:.45;cursor:default}

/* icon-only button, e.g. row actions */
.btn-icon{
  width:28px;height:28px;display:grid;place-items:center;flex:none;
  border:0;background:transparent;color:var(--ink-2);border-radius:var(--r-sm);cursor:pointer;
}
.btn-icon:hover{background:var(--surface-sunk);color:var(--ink)}
.btn-icon--wa:hover{color:#1FA855;background:var(--t-green-bg)}
.btn-icon--boxed{border:1px solid var(--line);background:var(--surface)}
.btn-icon--boxed:hover{border-color:var(--line-2)}
.btn-icon--lg{width:32px;height:32px}


/* ---------------------------------------------------------------------------
   4. FORM CONTROLS
   ------------------------------------------------------------------------ */
.field{margin-top:16px}
.field[hidden]{display:none}
.label{display:block;font-size:var(--fs-meta);color:var(--ink-2);margin-bottom:6px}

.input,.textarea,.date{
  font:inherit;font-size:var(--fs-ui);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:7px 10px;width:100%;
}
.textarea{min-height:92px;resize:vertical;font-size:var(--fs-cell);padding:9px 10px;border-radius:8px}
.date{width:auto}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus,.date:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);
}

/* search with leading icon */
.search{position:relative;flex:0 1 210px}
.search .input{padding-left:30px;border-radius:var(--r-md)}
.search svg{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ink-3)}

/* checkbox */
.check{
  appearance:none;width:15px;height:15px;margin:0;display:block;position:relative;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:4px;background:var(--surface);
}
.check:hover{border-color:var(--ink-3)}
.check:checked,.check:indeterminate{background:var(--accent);border-color:var(--accent)}
.check:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(43deg);
}
.check:indeterminate::after{content:"";position:absolute;left:2.5px;top:5.5px;width:8px;height:1.8px;background:#fff}
:root[data-theme="dark"] .check:checked::after{border-color:#111715}

/* segmented control — use for 2–3 mutually exclusive choices */
.seg{display:inline-flex;background:var(--surface-sunk);border-radius:var(--r-md);padding:2px;gap:2px}
.seg button{
  font:inherit;font-size:var(--fs-meta);color:var(--ink-2);
  background:transparent;border:0;padding:5px 10px;border-radius:5px;cursor:pointer;
}
.seg button[aria-pressed="true"]{
  background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.hint{font-size:var(--fs-micro);color:var(--ink-3);margin:7px 0 0}


/* ---------------------------------------------------------------------------
   5. STATUS PILLS + AVATARS
   Map entity statuses onto tones. See DESIGN-SPEC.md §Status tones.
   ------------------------------------------------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 9px 2px 8px;border-radius:20px;
  font-size:var(--fs-meta);font-weight:500;line-height:20px;
}
.dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.pill .dot{background:currentColor}
.t-amber {color:var(--t-amber); background:var(--t-amber-bg)}
.t-blue  {color:var(--t-blue);  background:var(--t-blue-bg)}
.t-violet{color:var(--t-violet);background:var(--t-violet-bg)}
.t-green {color:var(--t-green); background:var(--t-green-bg)}
.t-deep  {color:var(--t-deep);  background:var(--t-deep-bg)}
.t-grey  {color:var(--t-grey);  background:var(--t-grey-bg)}
.t-red   {color:var(--t-red);   background:var(--t-red-bg)}

/* small inline label — NOT a status. Use for metadata badges only. */
.tag{
  font-size:var(--fs-tag);font-weight:500;line-height:16px;
  padding:0 6px;border-radius:4px;color:var(--t-blue);background:var(--t-blue-bg);
}
.tag--quiet{color:var(--ink-3);background:var(--surface-sunk)}

.avatar{
  width:22px;height:22px;min-width:22px;max-width:22px;min-height:22px;max-height:22px;
  border-radius:50%;flex:none;align-self:center;display:grid;place-items:center;
  font-size:var(--fs-tag);font-weight:600;color:#fff;
}
:root[data-theme="dark"] .avatar{color:#111715}
/* Never render a placeholder avatar for an empty value — show muted text. */
.empty-value{color:var(--ink-3)}


/* ---------------------------------------------------------------------------
   6. QUIET PICKER
   The core pattern: an editable value inside dense content. Reads as data,
   behaves as a control. Chrome only on hover / focus / open.
   ------------------------------------------------------------------------ */
.pick{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font:inherit;font-size:var(--fs-ui);color:var(--ink);text-align:left;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r-md);
  padding:5px 7px;margin-left:-7px;
  transition:background var(--dur-fast),border-color var(--dur-fast);
}
.pick:hover{background:var(--surface);border-color:var(--line-2)}
.pick[aria-expanded="true"]{
  background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);
}
.pick .label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .caret{opacity:0;flex:none;color:var(--ink-3);margin-left:auto;transition:opacity var(--dur-fast)}
.pick:hover .caret,.pick[aria-expanded="true"] .caret,.pick:focus-visible .caret{opacity:1}
/* inside a table row, reveal affordance on row hover */
tbody tr:hover .pick{border-color:var(--line)}
tbody tr:hover .pick .caret{opacity:1}
/* standalone (outside dense rows), keep a permanent border */
.pick--boxed{margin-left:0;border-color:var(--line);background:var(--surface)}
.pick--boxed .caret{opacity:1}


/* ---------------------------------------------------------------------------
   7. FILTER BAR
   ------------------------------------------------------------------------ */
.bar{
  position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px;margin-bottom:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.fbtn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  font:inherit;font-size:var(--fs-ui);color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:7px 9px 7px 11px;
}
.fbtn:hover{border-color:var(--line-2);color:var(--ink)}
.fbtn .caret{opacity:1;color:var(--ink-3);flex:none;margin-left:2px}
/* active filter is unmistakable */
.fbtn.is-on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);font-weight:500}
.fbtn.is-on .caret{color:var(--accent)}
.fbtn[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.clear-filters{
  border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  font:inherit;font-size:var(--fs-meta);padding:6px 4px;
  text-decoration:underline;text-underline-offset:3px;
}
.clear-filters:hover{color:var(--ink)}
.clear-filters[hidden]{display:none}

/* bulk action bar — overlays the filter bar while rows are selected */
.bulk{
  position:absolute;inset:0;z-index:5;display:none;align-items:center;gap:10px;padding:8px 10px;
  background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--r-lg);
}
.bulk.is-on{display:flex}
.bulk .count{font-weight:500;font-size:var(--fs-ui);color:var(--accent);font-variant-numeric:tabular-nums}
.bulk .btn{background:var(--surface)}


/* ---------------------------------------------------------------------------
   8. TABLE
   ------------------------------------------------------------------------ */
.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table thead th{
  position:sticky;top:0;z-index:3;background:var(--surface);text-align:left;
  font-weight:500;font-size:12px;color:var(--ink-3);white-space:nowrap;
  padding:10px 12px;border-bottom:1px solid var(--line);
}
.table thead th:first-child,.table tbody td:first-child{padding-left:14px}
.table tbody td{
  border-bottom:1px solid var(--line);padding:0 12px;height:var(--row-h);vertical-align:middle;
}
.table tbody tr{background:var(--surface)}
.table tbody tr:hover{background:var(--surface-hover)}
.table tbody tr.is-selected{background:var(--accent-soft)}
.table tbody tr:last-child td{border-bottom:0}

/* primary cell: opens the record */
.cell-name{display:flex;align-items:center;gap:8px;min-width:0}
.link-name{
  font:inherit;font-weight:500;letter-spacing:-.005em;color:var(--ink);
  background:transparent;border:0;padding:0;cursor:pointer;text-align:left;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.link-name:hover{text-decoration:underline;text-underline-offset:2px}

/* two-line cell: primary value + muted secondary */
.cell-stack{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:1px}
.cell-stack .primary{font-size:var(--fs-cell);white-space:nowrap;font-variant-numeric:tabular-nums}
.cell-stack .secondary{
  font-size:var(--fs-micro);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.num{font-variant-numeric:tabular-nums}
.meta{font-size:var(--fs-micro);color:var(--ink-3);display:flex;align-items:center;gap:5px}
.due{font-size:var(--fs-meta);white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.due--late{color:var(--t-red);font-weight:500}
.due--soon{color:var(--t-amber);font-weight:500}
.due--none{color:var(--ink-3)}
.alert-dot{width:5px;height:5px;border-radius:50%;background:var(--t-red);flex:none}

/* row actions, revealed on hover; always visible on touch */
.row-actions{display:flex;align-items:center;gap:2px;justify-content:flex-end;opacity:0;transition:opacity var(--dur-fast)}
tbody tr:hover .row-actions,tbody tr:focus-within .row-actions{opacity:1}
@media (hover:none){.row-actions{opacity:1}}

.empty-state{padding:56px 20px;text-align:center;color:var(--ink-2)}
.empty-state b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}

/* ---------------------------------------------------------------------------
   9. POPOVER MENU
   ------------------------------------------------------------------------ */
.menu{
  position:fixed;z-index:60;min-width:216px;max-height:min(360px,70vh);overflow:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:9px;
  box-shadow:var(--shadow);padding:5px;
}
.menu[hidden]{display:none}
.menu-item{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-size:var(--fs-ui);color:var(--ink);
  background:transparent;border:0;border-radius:var(--r-sm);padding:7px 8px;
}
.menu-item:hover{background:var(--surface-hover)}
.menu-item[aria-selected="true"]{background:var(--accent-soft)}
.menu-item .tick{color:var(--accent);opacity:0;flex:none;margin-left:6px}
.menu-item[aria-selected="true"] .tick{opacity:1}
.menu-item--action{color:var(--accent);font-weight:500}
.menu-item--danger{color:var(--t-red)}
.menu-item--action .tick,.menu-item--danger .tick{display:none}
.menu-count{margin-left:auto;font-size:var(--fs-micro);color:var(--ink-3);font-variant-numeric:tabular-nums;padding-left:10px}
.menu-sep{height:1px;background:var(--line);margin:5px 4px}


/* ---------------------------------------------------------------------------
   10. DRAWER (record detail)
   ------------------------------------------------------------------------ */
.scrim{
  position:fixed;inset:0;z-index:50;background:rgba(18,22,21,.34);
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.scrim.is-on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:55;width:min(540px,100%);
  display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.drawer.is-on{transform:none}
.drawer-head{padding:18px 20px 16px;border-bottom:1px solid var(--line);flex:none}
.drawer-head .top{display:flex;align-items:flex-start;gap:12px}
.drawer-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.015em;margin:0;flex:1 1 auto;min-width:0}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:0 20px 32px}
.drawer-body .rule{margin:24px -20px 0}
.btn-close{
  width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
}
.btn-close:hover{background:var(--surface-sunk);color:var(--ink)}

/* contact line: value + inline actions */
.contact-line{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:var(--fs-cell);color:var(--ink-2)}
/* inline editable controls under the title */
.control-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

/* fact grid — 2 label/value pairs per row, collapses to 1 on mobile */
.facts{
  display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 14px;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-meta);
}
.facts dt{color:var(--ink-3);white-space:nowrap}
.facts dd{margin:0;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facts dd.wide{grid-column:2 / -1}


/* ---------------------------------------------------------------------------
   11. TIMELINE + NOTES
   ------------------------------------------------------------------------ */
.timeline-head{
  display:grid;grid-template-columns:1fr 76px 74px;gap:12px;
  padding:0 0 7px 24px;margin-bottom:12px;border-bottom:1px solid var(--line);
  font-size:var(--fs-micro);color:var(--ink-3);
}
.timeline{position:relative;margin:0;padding:0 0 0 24px;list-style:none}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:8px;width:1.5px;background:var(--line)}
.tl-item{
  position:relative;display:grid;grid-template-columns:1fr 76px 74px;gap:0 12px;
  align-items:start;padding-bottom:16px;
}
.tl-item::before{
  content:"";position:absolute;left:-23px;top:3px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line-2);
}
.tl-item--action::before{background:var(--accent);border-color:var(--accent)}  /* human entry */
.tl-item--origin::before{background:var(--ink-3);border-color:var(--ink-3)}    /* record created */
.tl-title{font-size:var(--fs-ui);font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-sub{font-size:var(--fs-meta);color:var(--ink-2);margin-top:2px;line-height:1.5}
.tl-text{font-size:var(--fs-cell);color:var(--ink);line-height:1.5;margin-top:4px;white-space:pre-wrap}
.tl-date,.tl-by{font-size:12px;color:var(--ink-3);padding-top:1px;font-variant-numeric:tabular-nums}
.tl-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-inline{
  border:0;background:transparent;padding:0;margin-top:5px;cursor:pointer;display:inline-block;
  font:inherit;font-size:var(--fs-micro);color:var(--accent);
  text-decoration:underline;text-underline-offset:2px;
}
.chip{
  display:inline-flex;align-items:center;gap:5px;margin-top:7px;
  font-size:var(--fs-micro);color:var(--ink-2);background:var(--surface-sunk);
  border-radius:20px;padding:2px 9px;font-variant-numeric:tabular-nums;
}
.note{
  border:1px solid var(--line);border-left:2.5px solid var(--t-amber);
  border-radius:8px;padding:10px 12px;margin-bottom:8px;background:var(--surface);
}
.note p{margin:0;font-size:var(--fs-cell);line-height:1.5;color:var(--ink);white-space:pre-wrap}
.note .by{margin-top:5px;font-size:var(--fs-micro);color:var(--ink-3)}
.none{font-size:var(--fs-ui);color:var(--ink-3);margin:0 0 4px}


/* ---------------------------------------------------------------------------
   12. MODAL
   ------------------------------------------------------------------------ */
.modal{
  position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);
  width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity var(--dur),transform var(--dur);
}
.modal.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal-head{padding:18px 20px 12px;display:flex;align-items:flex-start;gap:12px}
.modal-head h2{margin:0;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.01em}
.modal-head .sub{font-size:var(--fs-meta);color:var(--ink-3);margin-top:3px}
.modal-body{padding:0 20px 18px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;
  border-top:1px solid var(--line);background:var(--surface-sunk);border-radius:0 0 11px 11px;
}
/* show prior value when editing an auditable record */
.was{
  border-left:2px solid var(--line-2);padding:2px 0 2px 11px;margin:0 0 16px;
  font-size:var(--fs-ui);color:var(--ink-3);white-space:pre-wrap;
}


/* ---------------------------------------------------------------------------
   13. PAGINATION
   ------------------------------------------------------------------------ */
.foot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 4px 0;color:var(--ink-3);font-size:var(--fs-meta);
}
.foot .left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.per-page{display:inline-flex;align-items:center;gap:6px;color:var(--ink-3)}
.per-page select{
  font:inherit;font-size:var(--fs-meta);color:var(--ink-2);cursor:pointer;appearance:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 22px 3px 7px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.pager{display:flex;align-items:center;gap:3px}
.pager[hidden]{display:none}
.pg{
  min-width:28px;height:28px;padding:0 7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-size:var(--fs-meta);font-variant-numeric:tabular-nums;color:var(--ink-2);
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
}
.pg:hover:not(:disabled){background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.pg[aria-current="page"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
.pg:disabled{opacity:.35;cursor:default}
.pg-gap{min-width:16px;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center}
.kbd{
  font-family:inherit;font-size:var(--fs-micro);padding:1px 5px;border-radius:4px;
  border:1px solid var(--line-2);border-bottom-width:2px;color:var(--ink-2);background:var(--surface);
}
.keyhints{width:100%;padding:2px 4px 0;color:var(--ink-3);font-size:12px}


/* ---------------------------------------------------------------------------
   14. RESPONSIVE — single breakpoint at 900px.
   Tables become cards; the drawer becomes a full sheet; bulk bar docks bottom.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  .page{padding:16px 12px 60px}
  .page-head{gap:12px}
  .head-tools{width:100%}
  .head-tools .btn{flex:1 1 auto;justify-content:center}

  .bar{gap:8px}
  .filters{width:100%}
  .fbtn{flex:1 1 auto;justify-content:space-between}
  .search{flex:1 1 100%}

  .table,.table thead,.table tbody,.table tr,.table td{display:block;width:100%}
  .table thead{display:none}
  .table tbody tr{
    border-bottom:1px solid var(--line);padding:12px 14px;display:grid;
    grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center;
  }
  .table tbody td{border:0;height:auto;padding:0}
  .table colgroup{display:none}
  .row-actions{opacity:1}
  .btn-icon{width:34px;height:34px}
  .pick{border-color:var(--line)}
  .pick .caret{opacity:1}

  .bulk{
    position:fixed;inset:auto 0 0 0;border-radius:var(--r-xl) var(--r-xl) 0 0;
    flex-wrap:wrap;padding:12px;z-index:40;box-shadow:var(--shadow);
  }
  .bulk .spacer{display:none}
  .bulk .btn{flex:1 1 auto;justify-content:center}

  .drawer{width:100%;border-left:0;display:block;overflow-y:auto}
  .drawer-head{padding:14px 16px 14px}
  .drawer-body{overflow:visible;padding:0 16px 48px}
  .drawer-body .rule{margin-left:-16px;margin-right:-16px}
  .facts{grid-template-columns:auto 1fr}
  .facts dd{grid-column:2 / -1}

  .timeline-head{display:none}
  .tl-item{display:block;padding-bottom:18px}
  .tl-date,.tl-by{display:inline;font-size:var(--fs-micro)}
  .tl-date{margin-top:6px;display:inline-block}
  .tl-by::before{content:"·";margin:0 5px}

  .modal{width:calc(100vw - 20px)}
  .foot{flex-direction:column;align-items:stretch;gap:12px}
  .foot .left{justify-content:space-between;width:100%}
  .pager{justify-content:center}
  .keyhints{display:none}
}

/* Production primitives shared by every server-rendered page. */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-14:56px;
  --control-h:36px; --touch-h:34px; --sidebar-w:216px; --topbar-h:68px;
  --overlay:rgba(18,22,21,.34); --on-accent:#fff; --fs-label:12px;
  --dialog-w:520px; --dialog-wide:760px; --page-max:1440px;
}
:root[data-theme="dark"] { color-scheme:dark; --on-accent:#0F1614; }
:root[data-theme="light"] { color-scheme:light; }
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--on-accent:#0F1614}}
[hidden] { display:none !important; }
body { min-height:100vh; }
a { color:var(--accent); text-underline-offset:3px; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { font-size:var(--fs-title); font-weight:600; letter-spacing:-.015em; }
h2 { font-size:var(--fs-h2); font-weight:600; }
h3 { font-size:var(--fs-h3); font-weight:500; }
h4 { font-size:var(--fs-body); font-weight:500; }
small { font-size:var(--fs-micro); }
button,input,select,textarea { font:inherit; }
button,.button,a.btn { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:var(--fs-ui);font-weight:500;cursor:pointer;text-decoration:none; }
button:hover,.button:hover { filter:brightness(1.05); }
button:disabled { opacity:.45;cursor:not-allowed; }
button:is(.outline,.ghost,.btn),.button.outline,a.ghost { background:var(--surface);color:var(--ink-2);border-color:var(--line); }
button:is(.outline,.ghost,.btn):hover { background:var(--surface-hover);border-color:var(--line-2);filter:none; }
button.btn-icon { padding:var(--space-1);background:transparent;color:var(--ink-2);border:0; }
button svg,.button svg { width:18px;height:18px;flex:none; }
button.danger,[data-variant="danger"] { color:var(--t-red); }
label { display:block;font-size:var(--fs-meta);color:var(--ink-2); }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea {
  display:block;width:100%;min-width:0;min-height:var(--control-h);margin-top:var(--space-1);padding:7px var(--space-3);
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-ui);
}
input::placeholder,textarea::placeholder { color:var(--ink-3); }
input:focus,select:focus,textarea:focus { border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:1px; }
input[readonly],input:disabled,select:disabled { background:var(--surface-sunk); }
textarea { resize:vertical;min-height:96px; }
input[type="checkbox"],input[type="radio"] { width:16px;height:16px;flex:none;accent-color:var(--accent);margin:0; }
label.ck,.ck,label:has(> input[type="checkbox"]),label:has(> input[type="radio"]) { display:flex;align-items:flex-start;gap:var(--space-2); }
.ck input { margin-top:2px; }
.ck strong,.ck small { display:block; }
fieldset { min-width:0;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--space-4);margin:0; }
legend { padding-inline:var(--space-2);font-size:var(--fs-meta);color:var(--ink-2); }
.form label+label { margin-top:var(--space-4); }
.muted,.hint,.sub { color:var(--ink-2); }
.mono { font-family:var(--font);font-variant-numeric:tabular-nums; }
.badge { display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2);border:0;border-radius:20px;font-size:var(--fs-meta);line-height:20px;font-weight:500;white-space:nowrap;background:var(--surface-sunk);color:var(--ink-2); }
.badge[class*="status-active"] { background:var(--t-green-bg);color:var(--t-green); }
.badge[class*="status-invited"],.badge[class*="status-pending"] { background:var(--t-amber-bg);color:var(--t-amber); }
.badge[class*="status-rejected"] { background:var(--t-red-bg);color:var(--t-red); }
.badge.closed { background:var(--t-grey-bg);color:var(--t-grey); }
.badge.tiny { font-size:var(--fs-micro); }
.callout,[role="alert"]:not(dialog),.auth-notice,.auth-message { padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-ui);margin-bottom:var(--space-4); }
[role="alert"][data-variant="danger"],.callout[data-variant="danger"] { border-color:var(--t-red);background:var(--t-red-bg);color:var(--t-red); }
[role="status"].callout,.auth-notice { background:var(--accent-soft);color:var(--accent); }
.empty,.empty-state { padding:var(--space-12) var(--space-5);text-align:center;color:var(--ink-2); }
.empty-state p { margin:var(--space-2) 0 0; }
.table-wrap { width:100%;overflow:auto; }
table { width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--fs-ui); }
thead th { padding:var(--space-3);text-align:left;font-size:var(--fs-label);color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line);background:var(--surface);white-space:nowrap; }
tbody td { height:var(--row-h);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-hover); }
tbody tr:focus-within { background:var(--surface-hover); }
td a:not(.button):not([role="menuitem"]) { text-decoration:none; }
td a:hover { text-decoration:underline; }
td strong { font-weight:500;color:var(--ink); }
.footnote { margin:0;padding:var(--space-3) var(--space-4);font-size:var(--fs-meta);color:var(--ink-3);border-top:1px solid var(--line); }
[popover] { position:fixed;inset:auto;margin:0;min-width:216px;max-width:calc(100vw - 16px);max-height:70vh;overflow:auto;padding:var(--space-1);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow);background:var(--surface);color:var(--ink); }
[popover] [role^="menuitem"] { display:flex;width:100%;justify-content:flex-start;min-height:var(--control-h);text-align:left;padding:var(--space-2);border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font-weight:400;text-decoration:none; }
[popover] [role^="menuitem"]:hover,[popover] [role^="menuitem"]:focus { background:var(--surface-hover); }
[popover] .danger,[popover] .lead-menu-danger { color:var(--t-red); }
[role="separator"],.lead-menu-divider { height:1px;background:var(--line);margin:var(--space-1) 0; }
[data-menu] { display:inline-flex;min-width:0; }
[role="tablist"] { display:flex;gap:var(--space-1);overflow-x:auto;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line); }
[role="tab"] { white-space:nowrap;flex:none;background:transparent;color:var(--ink-2);border:0;font-size:var(--fs-meta);padding:var(--space-2); }
[role="tab"] span:first-child { display:none; }
[role="tab"][aria-selected="true"] { color:var(--accent);background:var(--accent-soft); }
[role="tabpanel"] { padding:var(--space-5); }
[role="tabpanel"] > *+* { margin-top:var(--space-4); }
dialog { width:min(var(--dialog-w),calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow-y:auto; }
dialog::backdrop { background:var(--overlay); }
dialog[open] { animation:dialog-in var(--dur) var(--ease-out); }
@keyframes dialog-in { from { opacity:0;transform:translateY(6px) scale(.98); } to { opacity:1;transform:none; } }
dialog form { margin:0; }
dialog form > header,dialog > header { display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5);border-bottom:1px solid var(--line); }
dialog header h2,dialog header h3 { margin:0;font-size:var(--fs-h3); }
dialog header p { margin:var(--space-1) 0 0;color:var(--ink-2);font-size:var(--fs-meta); }
dialog form > section,dialog form > .lead-action-dialog-body,dialog form > .bulk-upload-body { padding:var(--space-5); }
dialog form > footer,dialog > footer { display:flex;justify-content:flex-end;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-top:1px solid var(--line);background:var(--surface-sunk); }
dialog .ghost[aria-label^="Close"],dialog .ghost[aria-label^="Cancel"] { min-width:var(--control-h);padding:var(--space-2);background:transparent;border:0; }
dialog label+label,dialog label+.ck { margin-top:var(--space-4); }
dialog .lead-action-dialog-grid label+label { margin-top:0; }
.drawer.open { transform:none;overflow-y:auto;display:block;box-shadow:var(--shadow); }
.drawer-head { display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-5);background:var(--surface); }
.drawer-head h2 { margin:0;font-size:var(--fs-h2); }
.drawer-head p { margin:var(--space-1) 0 0; }
.drawer-head .ghost { display:grid;place-items:center;width:32px;height:32px;flex:none;border:0;text-decoration:none;background:transparent;color:var(--ink-2); }
.drawer-head .ghost svg { width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6; }
.drawer .facts { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:0;padding:var(--space-5);border-top:0; }
.facts > div > span:first-child { display:block;color:var(--ink-3);font-size:var(--fs-meta);margin-bottom:var(--space-1); }
.facts .span2 { grid-column:1 / -1; }
.drawer form { display:grid;gap:var(--space-3); }
.drawer form label+label { margin-top:0; }
.drawer > section:not(.facts),.drawer > .callout { margin:0 var(--space-5);padding-block:var(--space-5);border-top:1px solid var(--line); }
.drawer h3 { font-size:var(--fs-body); }
.plain { list-style:none;padding:0;margin:0; }
.plain > li+li { margin-top:var(--space-4); }
.plain small { display:block; }
.skip-link,.ui-announcement,.lead-visually-hidden { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.skip-link:focus { position:fixed;top:var(--space-2);left:var(--space-2);width:auto;height:auto;clip-path:none;z-index:1000;padding:var(--space-3);background:var(--surface); }
@media(max-width:900px){
  button,.button,input,select { min-height:var(--touch-h); }
  table:not([data-keep-table]),table:not([data-keep-table]) tbody { display:block; }
  table:not([data-keep-table]) thead { display:none; }
  table:not([data-keep-table]) tbody tr { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-3);padding:var(--space-4);border-bottom:1px solid var(--line); }
  table:not([data-keep-table]) td { display:block;height:auto;padding:0;border:0;min-width:0;overflow-wrap:anywhere; }
  table:not([data-keep-table]) td:first-child { grid-column:1/-1;font-size:var(--fs-body); }
  table:not([data-keep-table]) td[data-label]::before { content:attr(data-label);display:block;font-size:var(--fs-micro);color:var(--ink-3);margin-bottom:var(--space-1); }
  table:not([data-keep-table]) td:first-child::before { display:none; }
  .drawer { width:100%; }
  dialog { max-height:calc(100dvh - 24px);width:calc(100vw - 24px); }
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select { height:var(--control-h); }
textarea { padding:var(--space-2) var(--space-3); }