/* ===========================================================================
   dna.css — ChatMaestro mockup reskin token + component layer.

   REPLACES the warm-beige / black-border host.css look with the ai-starter
   ("Demo AI-Native CRM") Mantine ENTERPRISE DNA. Sources of truth faithfully
   reproduced here:
     - theme.ts ............ enterprise color ramp, system font, radius sm (4px),
                             heading weight 600, clamp() heading sizes.
     - AppShellLayout.tsx .. 64px header, ~236px section-grouped nav rail,
                             right-aligned version pill, account menu.
     - print.css ........... the DataTable pixel spec: confined horizontal
                             ScrollArea, gray-1 header shading, 4/6px density,
                             single-line truncation, gray-5 outer border, sticky
                             edge columns with SUBTLE 1px+soft-shadow dividers,
                             transparent-at-rest resize handles, visible drag
                             grips, bold+underline clickable values, gray-7
                             toolbar input borders.
     - CLAUDE.md ........... button / badge / actions-column / responsive rules.

   This is the reusable golden layer for the 40-screen rollout: a screen loads
   ONLY tabler-icons.min.css + this file (never host.css), then uses these
   classes. Borders are SOFT gray (never pure black); accent is navy #1c4f8c.
   =========================================================================== */

:root {
  /* Enterprise primary ramp (theme.ts `enterprise` tuple) --------------- */
  --ent-0:#eef4fb; --ent-1:#d8e4f1; --ent-2:#aec7e2; --ent-3:#82a8d3;
  --ent-4:#5e8dc6; --ent-5:#477dc0; --ent-6:#3973bd; --ent-7:#2a62a8;
  --ent-8:#1c4f8c;  /* light primary (primaryShade.light = 8) */
  --ent-9:#10437d;  /* hover / pressed */

  /* Mantine gray scale (soft borders live here — NEVER pure black) ------ */
  --gray-0:#f8f9fa; --gray-1:#f1f3f5; --gray-2:#e9ecef; --gray-3:#dee2e6;
  --gray-4:#ced4da; --gray-5:#adb5bd; --gray-6:#868e96; --gray-7:#495057;
  --gray-8:#343a40; --gray-9:#212529;

  /* Blue (interaction accents used by resize handle + clickable hover) -- */
  --blue-0:#e7f5ff; --blue-5:#339af0; --blue-6:#228be6; --blue-7:#1c7ed6;

  /* Semantic surfaces / text ------------------------------------------- */
  --text:#212529;            /* gray-9 body text */
  --dim:#868e96;             /* gray-6 dimmed */
  --dim-2:#adb5bd;           /* gray-5 extra-dim / disabled */
  --border:#dee2e6;          /* gray-3 — default soft border */
  --border-strong:#ced4da;   /* gray-4 — control outlines */
  --table-border:#adb5bd;    /* gray-5 — table outer + sticky divider */
  --input-border:#495057;    /* gray-7 — toolbar inputs read as enabled */
  --bg:#ffffff;
  --bg-subtle:#f8f9fa;       /* gray-0 striping */
  --bg-head:#f1f3f5;         /* gray-1 header shading */
  --bg-tray:#e9ecef;         /* gray-2 tinted nav tray */

  /* Semantic badge pairs (Mantine `variant=light`: pale bg + saturated text) */
  --teal-bg:#e6fcf5;   --teal-tx:#0b7285;
  --gray-bg:#f1f3f5;   --gray-tx:#495057;
  --blue-bg:#e7f5ff;   --blue-tx:#1971c2;
  --orange-bg:#fff4e6; --orange-tx:#e8590c;
  --red-bg:#ffe3e3;    --red-tx:#c92a2a;
  --yellow-bg:#fff9db; --yellow-tx:#e67700;

  /* Row-action icon accents */
  --amber:#e8940c; --red:#e03131; --red-border:#ffc9c9;

  --radius:4px;              /* defaultRadius: "sm" */
  --radius-lg:8px;           /* tray / card corners */
  --font:Helvetica,Arial,sans-serif;
  --mono:Menlo,Consolas,"Courier New",monospace;

  --hdr-h:64px;
  --nav-w:236px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* A DIALOG screen is framed by the viewer as a modal over a dimmed base; its body must be TRANSPARENT
   so the card floats on the viewer's dark scrim instead of showing a white halo around itself. */
body:has(.dna-dlg-wrap){ background:transparent; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ===========================================================================
   APP SHELL — full-height (100dvh) enterprise chrome
   =========================================================================== */
.dna-app{ display:flex; flex-direction:column; height:100dvh; min-height:0; background:var(--bg); }

/* --- header (64px): brand left · version pill + actions + account RIGHT --- */
.dna-hdr{
  height:var(--hdr-h); flex:none; display:flex; align-items:center; gap:12px;
  padding:0 16px; background:var(--bg); border-bottom:1px solid var(--border);
}
.dna-burger{ display:none; width:34px;height:34px;border:0;background:none;color:var(--gray-7);
  font-size:20px; cursor:pointer; align-items:center; justify-content:center; border-radius:var(--radius); }
.dna-burger:hover{ background:var(--gray-0); }
.dna-logo{ width:40px;height:40px;flex:none;display:block; }
.dna-brand{ font-size:clamp(18px,1.8vw,26px); font-weight:800; line-height:1; letter-spacing:-.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dna-hdr-sp{ flex:1; }
.dna-ver{ font-size:11px; color:var(--dim); cursor:help; white-space:nowrap; }  /* right-aligned pill */
.dna-hact{ width:34px;height:34px;flex:none; border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--gray-7); font-size:16px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.dna-hact:hover{ background:var(--gray-0); }
.dna-hact.red{ border-color:var(--red-border); color:var(--red-tx); }   /* bug = "stop & report" */
.dna-acct{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 6px; border-radius:var(--radius); }
.dna-acct:hover{ background:var(--gray-0); }
.dna-av{ width:28px;height:28px;flex:none;border-radius:50%; background:var(--ent-0); color:var(--ent-8);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.dna-acct .nm{ font-size:14px; font-weight:500; }

/* --- body: nav rail + main --- */
/* overflow:hidden clips the off-canvas nav + closed drawer (both translated
   off-screen) so they never create a page-level horizontal scrollbar. */
.dna-body{ flex:1; display:flex; min-height:0; position:relative; overflow:hidden; }
.dna-nav{ width:var(--nav-w); flex:none; border-right:1px solid var(--border); background:var(--bg);
  display:flex; flex-direction:column; min-height:0; }
.dna-navscroll{ flex:1; overflow:auto; padding:8px; }
.dna-tray{ border-radius:var(--radius-lg); padding:4px 4px 6px; margin-bottom:2px; }
.dna-tray.tint{ background:var(--bg-tray); }             /* alternating tinted trays */
.dna-ngrp{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--dim); padding:6px 8px 4px; }
.dna-ni{ display:flex; align-items:center; gap:11px; padding:6px 10px; border-radius:var(--radius);
  color:var(--gray-7); font-size:14px; cursor:pointer; margin-bottom:2px; }
.dna-ni i{ font-size:16px; width:17px; text-align:center; color:var(--dim); flex:none; }
.dna-ni:hover{ background:var(--gray-0); }
.dna-ni.on{ background:var(--ent-8); color:#fff; font-weight:500; }       /* variant="filled" active */
.dna-ni.on i{ color:#fff; }
.dna-ni .nbadge{ margin-left:auto; font-size:10px; font-weight:700; background:var(--gray-2);
  color:var(--gray-7); border-radius:999px; padding:0 6px; }
.dna-ni.on .nbadge{ background:rgba(255,255,255,.25); color:#fff; }
.dna-scrim{ display:none; }

/* --- main content column --- */
.dna-main{ flex:1; display:flex; flex-direction:column; min-width:0; background:var(--bg); }

/* ===========================================================================
   SCREEN HEADER (ScreenHeader.tsx) + buttons
   =========================================================================== */
.dna-sh{ display:flex; align-items:center; gap:11px; padding:12px 20px; border-bottom:1px solid var(--border); flex:none; }
.dna-sh h1{ margin:0; font-size:clamp(18px,1.2vw+.6rem,21px); font-weight:600; letter-spacing:-.3px; }
.dna-sh .subi{ font-size:13px; color:var(--dim); }
.dna-sh-sp{ flex:1; }

.dbtn{ height:36px; padding:0 14px; border-radius:var(--radius); font-size:14px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid transparent;
  background:none; white-space:nowrap; }
.dbtn i{ font-size:16px; }
.dbtn.pri{ background:var(--ent-8); color:#fff; }               /* primary CTA — solid navy */
.dbtn.pri:hover{ background:var(--ent-9); }
.dbtn.def{ background:var(--bg); color:var(--text); border-color:var(--border-strong); }  /* variant="default" */
.dbtn.def:hover{ background:var(--gray-0); }
.dbtn.danger{ background:var(--red-bg); color:var(--red-tx); border-color:var(--red-border); }
.dbtn.sm{ height:30px; padding:0 11px; font-size:13px; }
.dbtn i.only{ margin:0; }

/* ===========================================================================
   DATATABLE — reproduces print.css exactly in intent
   =========================================================================== */
.dna-content{ flex:1; padding:16px 20px; min-height:0; overflow:auto; display:flex; }
.dna-card{ border:1px solid var(--table-border); border-radius:var(--radius); background:var(--bg);
  overflow:hidden; display:flex; flex-direction:column; max-height:100%; width:100%; align-self:flex-start; }

/* toolbar: left cluster (select · bulk · search · filters · clear) | right (columns · download · print) */
.dna-tbar{ display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid var(--border); flex:none; }
.dna-tbar-sp{ flex:1; }
.dna-cbx{ width:16px;height:16px;flex:none; border:1.5px solid var(--gray-5); border-radius:3px; background:var(--bg);
  color:transparent; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.dna-cbx.on{ background:var(--ent-8); border-color:var(--ent-8); color:#fff; }
.dna-cbx.ind{ background:var(--ent-8); border-color:var(--ent-8); color:#fff; }

.dna-srch{ position:relative; width:240px; }
.dna-srch i{ position:absolute; left:9px; top:50%; transform:translateY(-50%); font-size:15px; color:var(--dim); }
/* toolbar inputs get a SOLID gray-7 border so they read as enabled (print.css) */
.dna-inp{ height:32px; border:1px solid var(--input-border); border-radius:var(--radius); font-size:13px;
  padding:0 10px; color:var(--text); background:var(--bg); font-family:inherit; }
.dna-inp:focus{ outline:none; border-color:var(--blue-5); box-shadow:0 0 0 2px rgba(51,154,240,.2); }
.dna-srch .dna-inp{ width:100%; padding-left:29px; }
.dna-sel{ height:32px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--input-border);
  border-radius:var(--radius); font-size:13px; padding:0 9px; background:var(--bg); color:var(--text); cursor:pointer; white-space:nowrap; }
.dna-sel i{ font-size:14px; color:var(--dim); }
.dna-sel .lbl{ color:var(--dim); }

/* toolbar icon buttons (clear-search funnel, columns eye, download, print, refresh) */
.dna-ticon{ width:34px;height:34px;flex:none; border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--gray-7); font-size:16px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; }
.dna-ticon:hover{ background:var(--gray-0); }
.dna-ticon.dis{ color:var(--dim-2); border-color:var(--border); cursor:default; background:var(--bg); opacity:.7; }
.dna-ticon.trash.dis{ color:var(--dim-2); }                 /* bulk trash: grey+disabled at 0 selected */
.dna-ticon.trash.on{ color:#fff; background:var(--red); border-color:var(--red); }  /* red+enabled at 1+ */

/* confined horizontal scroll region — the scrollbar belongs to THIS viewport,
   not the page. Only middle columns scroll; sticky edges stay put. */
.dna-scroll{ overflow-x:auto; overflow-y:auto; flex:1; min-height:0; }
.dna-scroll::-webkit-scrollbar{ height:11px; width:11px; }
.dna-scroll::-webkit-scrollbar-track{ background:var(--gray-1); }
.dna-scroll::-webkit-scrollbar-thumb{ background:var(--gray-4); border-radius:6px; border:3px solid var(--gray-1); }
.dna-scroll{ scrollbar-color:var(--gray-4) var(--gray-1); scrollbar-width:thin; }

table.dna-t{ border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:13px; }
.dna-t th,.dna-t td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border);
  white-space:nowrap; text-align:left; }
.dna-t th{ background:var(--bg-head); color:var(--gray-7); font-size:12px; font-weight:600;
  padding:6px 12px; position:relative; }                    /* thead lightly shaded gray-1; th 6px */
.dna-t td{ padding:4px 12px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; background:var(--bg); }  /* td 4px */
.dna-t td>*{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }  /* single-line truncation */
.dna-t th.r,.dna-t td.r{ text-align:right; }
.dna-t tbody tr:nth-child(even) td{ background:var(--bg-subtle); }   /* striped="even" */
.dna-t tbody tr:hover td{ background:var(--ent-0); }                 /* highlightOnHover */
.dna-t th:last-child,.dna-t td:last-child{ border-right:0; }

/* header inner: label + sort icon + ALWAYS-visible drag grip (right of sort) */
.dna-thc{ display:inline-flex; align-items:center; gap:5px; }
.dna-t th.r .dna-thc{ justify-content:flex-end; width:100%; }
.dna-srt{ font-size:12px; color:var(--dim-2); display:inline-flex; cursor:pointer; }
.dna-srt.on{ color:var(--gray-7); }
.dna-grip{ font-size:12px; color:var(--dim-2); cursor:grab; display:inline-flex; opacity:.4; transition:opacity .12s; }
.dna-t th:hover .dna-grip{ opacity:.85; }
.dna-grip:active{ cursor:grabbing; }
/* resize handle — transparent at rest, blue tint on hover (print.css) */
.dna-rz{ position:absolute; right:-2px; top:0; height:100%; width:14px; cursor:col-resize;
  opacity:0; background:var(--blue-5); z-index:5; }
.dna-rz:hover,.dna-t th:hover .dna-rz{ opacity:.6; }

/* sticky edge columns — background paints over scrolling content beneath.
   NB: the base `.dna-t th{position:relative}` (for resize handles) out-specifies
   a bare `.dna-stick`, so the header rule below must restate position:sticky. */
.dna-stick{ position:sticky; z-index:2; background:var(--bg); }
.dna-t thead th.dna-stick{ position:sticky; z-index:3; background:var(--bg-head); }
.dna-sl0{ left:0; }
/* the LAST sticky-left column: SUBTLE 1px divider + soft shadow (NOT a thick line) */
.dna-sl-last{
  box-shadow:4px 0 6px -2px rgba(0,0,0,.18), inset -1px 0 0 0 var(--table-border);
  border-right:1px solid var(--table-border) !important;
}
.dna-sr{ right:0; box-shadow:-4px 0 6px -2px rgba(0,0,0,.18), inset 1px 0 0 0 var(--table-border); }
/* sticky cells mirror the row striping explicitly (striping is transparent through sticky) */
.dna-t tbody tr:nth-child(even) .dna-stick{ background:var(--bg-subtle); }
.dna-t tbody tr:hover .dna-stick{ background:var(--ent-0); }

/* clickable cell values: bold + underline; hover → blue (print.css) */
.dna-clv{ font-weight:600; text-decoration:underline; text-decoration-color:var(--border-strong);
  text-underline-offset:2px; cursor:pointer; }
.dna-clv:hover{ text-decoration-color:var(--blue-6); color:var(--blue-7); }

/* cell content helpers */
.dna-en{ font-weight:500; }
.dna-sub{ font-size:11.5px; color:var(--dim); }
.dna-mono{ font-family:var(--mono); font-size:11.5px; color:var(--gray-7); }
.dna-tag{ display:inline-flex; font-size:11px; border-radius:var(--radius); padding:1px 7px;
  background:var(--gray-2); color:var(--gray-7); font-family:var(--mono); }
.dna-na{ color:var(--dim-2); }

/* row actions — INLINE, LEFT-aligned (never a "…" menu, except under sm) */
.dna-acts{ display:flex; gap:9px; align-items:center; justify-content:flex-start; }
.dna-ric{ font-size:16px; color:var(--gray-6); cursor:pointer; display:inline-flex; }
.dna-ric:hover{ color:var(--gray-8); }
.dna-ric.edit{ color:var(--amber); }
.dna-ric.rows{ color:var(--ent-6); }
.dna-ric.clone{ color:var(--blue-6); }   /* clone / duplicate a row to head-start a new one (ti-copy) */
.dna-ric.del{ color:var(--red); }
.dna-ric.dis{ color:var(--dim-2); cursor:not-allowed; opacity:.5; }
.dna-acts-of{ display:none; font-size:18px; color:var(--gray-7); cursor:pointer; padding:2px 6px; border-radius:var(--radius); }
.dna-acts-of:hover{ background:var(--gray-1); }

/* badges — Mantine semantic light pairs; enum values UPPERCASE */
.bdg{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.03em;
  border-radius:var(--radius); padding:2px 7px; text-transform:uppercase; }
.bdg.teal{ background:var(--teal-bg); color:var(--teal-tx); }
.bdg.gray{ background:var(--gray-bg); color:var(--gray-tx); }
.bdg.blue{ background:var(--blue-bg); color:var(--blue-tx); }
.bdg.orange{ background:var(--orange-bg); color:var(--orange-tx); }
.bdg.red{ background:var(--red-bg); color:var(--red-tx); }
.bdg .dot{ width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px; }

/* footer: showing X–Y of N · rows-per-page · pager with page numbers */
.dna-tfoot{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-top:1px solid var(--border); flex:none; flex-wrap:wrap; }
.dna-fmeta{ font-size:12.5px; color:var(--dim); }
.dna-rpp{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--dim); }
.dna-stepper{ display:inline-flex; align-items:center; gap:6px; height:28px; border:1px solid var(--border-strong);
  border-radius:var(--radius); padding:0 6px 0 9px; color:var(--text); font-size:13px; cursor:pointer; }
.dna-stepper .stk{ display:flex; flex-direction:column; line-height:.7; color:var(--dim); font-size:9px; }
.dna-pg{ display:inline-flex; align-items:center; gap:4px; }
.dna-pgn{ min-width:26px; height:26px; padding:0 6px; border-radius:var(--radius); display:inline-flex;
  align-items:center; justify-content:center; font-size:12.5px; color:var(--gray-7); cursor:pointer; }
.dna-pgn:hover{ background:var(--gray-1); }
.dna-pgn.arw{ color:var(--dim-2); }
.dna-pgn.on{ background:var(--ent-8); color:#fff; font-weight:600; }

/* ===========================================================================
   RIGHT DRAWER (master-detail Runs drawer)
   =========================================================================== */
.dna-drawer-overlay{ position:absolute; inset:0; background:rgba(20,25,35,.35); z-index:60;
  opacity:0; pointer-events:none; transition:opacity .18s ease; }
.dna-drawer-overlay.open{ opacity:1; pointer-events:auto; }
.dna-drawer{ position:absolute; top:0; right:0; bottom:0; width:min(560px,94%); background:var(--bg);
  border-left:1px solid var(--border); box-shadow:-8px 0 24px -8px rgba(0,0,0,.25); z-index:61;
  transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column; }
.dna-drawer.open{ transform:none; }
.dna-drawer-hd{ flex:none; display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.dna-drawer-hd .ti-list-details{ color:var(--ent-6); font-size:18px; }
.dna-drawer-ttl{ font-size:15px; font-weight:600; letter-spacing:-.2px; }
.dna-drawer-ttl small{ display:block; font-size:11.5px; font-weight:400; color:var(--dim); letter-spacing:0; }
.dna-drawer-x{ width:30px;height:30px;border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--gray-7); font-size:16px; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; }
.dna-drawer-x:hover{ background:var(--gray-0); }
.dna-drawer-body{ flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 16px; gap:10px; overflow:hidden; }

/* ===========================================================================
   MASTER-DETAIL SPLIT — a list on top, the selected row's sub-list below,
   parted by a divider the user drags up or down. Used where a record's detail
   is itself a growing list (experiment→runs, cohort→members). Single records
   open a modal instead; this is only for the has-a-sub-list case.
   =========================================================================== */
.dna-content.split-host{ padding:12px 20px; overflow:hidden; display:block; }
.dna-split{ display:flex; flex-direction:column; height:100%; min-height:0; }
.dna-split-top{ flex:1 1 auto; min-height:120px; display:flex; flex-direction:column; }
.dna-split-top > .dna-card{ flex:1; min-height:0; }
/* the divider: a full-width handle with a centered grip; row-resize cursor signals draggability */
.dna-split-bar{ flex:none; height:14px; margin:6px 0; cursor:row-resize; position:relative;
  display:flex; align-items:center; justify-content:center; border-radius:var(--radius);
  background:var(--gray-1); border:1px solid var(--border); }
.dna-split-bar:hover{ background:var(--gray-2); border-color:var(--border-strong); }
.dna-split-bar.dragging{ background:var(--ent-1); border-color:var(--ent-6); }
.dna-split-bar .grip{ width:38px; height:4px; border-radius:2px; background:var(--border-strong); }
.dna-split-bar:hover .grip{ background:var(--gray-6); }
.dna-split-bot{ flex:none; height:290px; min-height:96px; display:flex; flex-direction:column; }
.dna-split-hd{ flex:none; display:flex; align-items:center; gap:9px; padding:2px 2px 9px; }
.dna-split-hd .tt{ font-size:14px; font-weight:600; letter-spacing:-.2px; color:var(--text);
  display:flex; align-items:center; gap:8px; }
.dna-split-hd .tt i{ color:var(--ent-6); font-size:17px; }
.dna-split-hd .tt small{ font-size:12px; font-weight:400; color:var(--dim); letter-spacing:0; }
.dna-split-bot > .dna-card{ flex:1; min-height:0; }
/* empty state before a row is picked */
.dna-split-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--dim); font-size:13px; border:1px dashed var(--border-strong); border-radius:var(--radius);
  background:var(--gray-0); }
.dna-split-empty i{ font-size:26px; color:var(--gray-5); }
/* the selected master row */
.dna-t tbody tr.is-picked td{ background:var(--ent-1); }
.dna-t tbody tr.is-picked .dna-stick{ background:var(--ent-1); }

/* ===========================================================================
   TOAST (transient confirmation — nothing is "dead")
   =========================================================================== */
.dna-toast-wrap{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:80;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.dna-toast{ background:var(--bg); border:1px solid var(--border-strong); border-left:3px solid var(--ent-8);
  border-radius:var(--radius); box-shadow:0 6px 20px -6px rgba(0,0,0,.3); padding:9px 14px; font-size:13px;
  color:var(--text); display:flex; align-items:center; gap:8px; max-width:520px;
  animation:dna-toast-in .16s ease; }
.dna-toast i{ color:var(--ent-6); font-size:16px; }
@keyframes dna-toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* small inline dropdown (row-actions overflow under sm, header account menu) */
.dna-menu{ position:absolute; z-index:70; background:var(--bg); border:1px solid var(--border-strong);
  border-radius:var(--radius); box-shadow:0 8px 24px -8px rgba(0,0,0,.28); padding:4px; min-width:170px; display:none; }
.dna-menu.open{ display:block; }
.dna-menu .mi{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius);
  font-size:13px; color:var(--text); cursor:pointer; }
.dna-menu .mi:hover{ background:var(--gray-0); }
.dna-menu .mi i{ font-size:15px; color:var(--gray-6); width:16px; text-align:center; }
.dna-menu .mi.del{ color:var(--red-tx); }
.dna-menu .mi.dis{ color:var(--dim-2); cursor:not-allowed; }
.dna-menu .msep{ height:1px; background:var(--border); margin:4px 2px; }

/* ===========================================================================
   RESPONSIVE — laptop/desktop first, then tablet (<=1024) and phone (<=768).
   Mirrors ai-starter's `useIsMobile()` sm (48em/768px) breakpoint behaviour.
   =========================================================================== */
@media (max-width:1024px){
  .dna-content{ padding:12px 14px; }
  .dna-sh{ padding:12px 14px; }
  .dna-hdr{ padding:0 12px; }
}
@media (max-width:768px){
  :root{ --nav-w:230px; }
  .dna-burger{ display:inline-flex; }
  /* nav rail becomes an off-canvas overlay toggled by the burger */
  .dna-nav{ position:absolute; top:0; bottom:0; left:0; z-index:65; transform:translateX(-100%);
    transition:transform .2s ease; box-shadow:8px 0 24px -8px rgba(0,0,0,.25); }
  .dna-body.nav-open .dna-nav{ transform:none; }
  .dna-scrim{ display:block; position:absolute; inset:0; background:rgba(20,25,35,.35); z-index:64;
    opacity:0; pointer-events:none; transition:opacity .18s; }
  .dna-body.nav-open .dna-scrim{ opacity:1; pointer-events:auto; }
  /* progressively hide header items into the account menu (per ai-starter) */
  .dna-brand{ display:none; }
  .hide-sm{ display:none !important; }
  /* row actions collapse to a "…" overflow menu (documented DataTable exception) */
  .dna-acts{ display:none; }
  .dna-acts-of{ display:inline-flex; }
  .dna-srch{ width:150px; }
}
@media (max-width:520px){
  .dna-sh .subi{ display:none; }
  .dna-import-lbl{ display:none; }             /* Import shrinks to an icon */
  .dbtn.import{ padding:0 10px; }
  .dna-fmeta{ width:100%; }
}

/* ===========================================================================
   COMPONENT LIBRARY EXTENSION — added for the full-DNA rollout so every screen
   (forms, dialogs, detail/read views, chat, tabs) draws from ONE consistent set,
   built on the same tokens as the AppShell + DataTable above. ai-starter / Mantine
   conventions: soft-grey borders, navy #1c4f8c accent, radius sm.
   =========================================================================== */

/* --- page content that is NOT the flex DataTable card (forms, detail, chat) --- */
.dna-content.block{ display:block; }
.dna-pad{ padding:18px 22px; }
.dna-crumb{ font-size:12px; color:var(--dim); margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.dna-crumb i{ font-size:13px; }
.dna-2col{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; }
.dna-row{ display:flex; gap:12px; align-items:center; }
.dna-grow{ flex:1; min-width:0; }

/* --- forms: labels, inputs, hints --- */
.dna-field{ margin-bottom:15px; }
.dna-field:last-child{ margin-bottom:0; }
.dna-label{ display:block; font-size:12.5px; font-weight:600; color:var(--gray-8); margin:0 0 5px; }
.dna-label .opt{ font-weight:400; color:var(--dim); }
.dna-hint{ font-size:11.5px; color:var(--dim); margin-top:4px; line-height:1.45; }
.dna-fi{ width:100%; font-family:inherit; font-size:13px; color:var(--text); background:var(--bg);
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:0 11px; height:36px; box-sizing:border-box; }
textarea.dna-fi{ height:auto; min-height:64px; padding:9px 11px; line-height:1.5; resize:vertical; }
select.dna-fi{ cursor:pointer; }
.dna-fi:focus{ outline:none; border-color:var(--blue-5); box-shadow:0 0 0 2px rgba(51,154,240,.2); }
.dna-fi::placeholder{ color:var(--dim-2); }

/* --- switch (toggle), static checkbox + radio --- */
.dna-switch{ width:34px; height:20px; border-radius:999px; position:relative; display:inline-block; vertical-align:middle;
  flex:none; cursor:pointer; background:var(--gray-4); transition:background .15s; }
.dna-switch i{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
.dna-switch.on{ background:var(--ent-8); }  .dna-switch.on i{ left:16px; }
.dna-cb{ width:16px;height:16px;border:1.5px solid var(--gray-5);border-radius:3px;flex:none;display:inline-flex;
  align-items:center;justify-content:center;color:#fff;font-size:11px; }
.dna-cb.on{ background:var(--ent-8); border-color:var(--ent-8); }
.dna-rb{ width:16px;height:16px;border-radius:50%;border:1.5px solid var(--gray-5);flex:none; box-sizing:border-box; }
.dna-rb.on{ border:5px solid var(--ent-8); }
.dna-gate{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.dna-gate:last-child{ border-bottom:0; }
.dna-gate .gl{ flex:1; font-size:13px; color:var(--text); }

/* --- segmented control --- */
.dna-seg{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius); overflow:hidden; }
.dna-seg span,.dna-seg button{ font-size:12.5px; padding:7px 13px; cursor:pointer; color:var(--gray-7); background:var(--bg);
  border:0; border-right:1px solid var(--border); display:inline-flex; align-items:center; gap:6px; font-family:inherit; }
.dna-seg span:last-child,.dna-seg button:last-child{ border-right:0; }
.dna-seg .on,.dna-seg .is-active{ background:var(--ent-8); color:#fff; font-weight:500; }

/* --- selectable option cards (radio cards) --- */
.dna-optcards{ display:grid; gap:9px; }
.dna-optcard{ border:1px solid var(--border-strong); border-radius:var(--radius); padding:9px 11px; cursor:pointer; background:var(--bg); }
.dna-optcard.on{ border:1.5px solid var(--ent-8); background:var(--ent-0); }
.dna-optcard .oct{ font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px; }
.dna-optcard.on .oct{ color:var(--ent-8); }
.dna-optcard .ocd{ font-size:11.5px; color:var(--dim); line-height:1.4; margin-top:4px; }

/* --- tabs (use with nav-bridge's [data-tabs]/[data-tab]/[data-tabpanels]/[data-panel]) ---
   DNA CONVENTION: tabs carry EXPLICIT, visible borders (Mantine `variant="outline"`) — each tab is a
   bordered box with rounded top corners sitting on the strip's baseline; the ACTIVE tab connects into
   the panel below (its white bottom edge breaks the baseline). Never an invisible / underline-only
   strip — the tab shapes must always read as tabs. */
.dna-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-strong); }
.dna-tabs .tab{ padding:8px 15px; font-size:13px; font-weight:500; color:var(--gray-7);
  background:var(--gray-0); border:1px solid var(--border-strong); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; margin-bottom:-1px; }
.dna-tabs .tab i{ font-size:16px; }
.dna-tabs .tab:hover{ background:var(--gray-1); color:var(--text); }
.dna-tabs .tab.is-active{ background:var(--bg); color:var(--ent-8); font-weight:600;
  border-color:var(--border-strong); border-bottom:1px solid var(--bg); }
[data-tabpanels]>[data-panel]{ padding-top:16px; }

/* --- dialog card (overlay screens) --- */
.dna-dlg-wrap{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:18px; background:transparent; }
.dna-dlg{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 12px 40px -8px rgba(0,0,0,.3); display:flex; flex-direction:column; max-height:100%; }
.dna-dlg-h{ flex:none; padding:13px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px; }
.dna-dlg-h .di{ font-size:18px; color:var(--ent-6); }
.dna-dlg-h .dt{ font-size:15px; font-weight:600; letter-spacing:-.2px; }
.dna-dlg-x{ margin-left:auto; width:28px;height:28px;border:1px solid var(--border-strong); border-radius:var(--radius);
  background:var(--bg); color:var(--gray-7); font-size:16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.dna-dlg-x:hover{ background:var(--gray-0); }
.dna-dlg-b{ flex:1; overflow:auto; padding:16px; }
.dna-dlg-f{ flex:none; padding:12px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; justify-content:flex-end; }

/* --- detail / read: sub-headings, key-value lists, meta grid, section cards --- */
.dna-h4{ font-size:12.5px; font-weight:700; margin:0 0 10px; color:var(--gray-8); display:flex; align-items:center; gap:7px; }
.dna-h4 i{ font-size:16px; color:var(--dim); }
.dna-dl{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.dna-dl .kv{ display:flex; padding:8px 12px; font-size:12.5px; border-bottom:1px solid var(--border); }
.dna-dl .kv:last-child{ border-bottom:0; }
.dna-dl .kv .k{ width:150px; flex:none; color:var(--dim); font-weight:500; }
.dna-dl .kv .v{ color:var(--text); min-width:0; }
.dna-meta{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 18px; }
.dna-sec-card{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); overflow:hidden; }
.dna-sec-hd{ padding:9px 13px; background:var(--bg-head); border-bottom:1px solid var(--border); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:7px; }
.dna-sec-b{ padding:13px; }

/* --- alert / note --- */
.dna-note{ border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; font-size:12.5px; line-height:1.55; display:flex; gap:9px; }
.dna-note i{ flex:none; font-size:16px; margin-top:1px; }
.dna-note.info{ background:var(--ent-0); border-color:var(--ent-1); color:var(--ent-9); }   .dna-note.info i{ color:var(--ent-6); }
.dna-note.warn{ background:var(--yellow-bg); border-color:#ffe066; color:var(--yellow-tx); }  .dna-note.warn i{ color:var(--orange-tx); }
.dna-note.ok{ background:var(--teal-bg); border-color:#96f2d7; color:var(--teal-tx); }        .dna-note.ok i{ color:var(--teal-tx); }
.dna-note.neutral{ background:var(--gray-0); border-color:var(--border); color:var(--gray-7); } .dna-note.neutral i{ color:var(--gray-6); }

/* --- stat tile --- */
.dna-stat{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); padding:11px 13px; display:flex; align-items:flex-start; gap:10px; }
.dna-stat .si{ width:34px;height:34px;flex:none;border-radius:var(--radius); background:var(--ent-0); color:var(--ent-8); display:flex; align-items:center; justify-content:center; font-size:18px; }
.dna-stat .sn{ font-size:20px; font-weight:700; line-height:1.1; }
.dna-stat .sl{ font-size:11.5px; color:var(--dim); margin-top:2px; }

/* --- chat (enrollee view + messaging) --- */
.dna-chat{ display:flex; flex-direction:column; gap:12px; padding:16px; overflow:auto; flex:1; min-height:0; }
.dna-msg{ max-width:74%; padding:9px 13px; border-radius:12px; font-size:13px; line-height:1.5; }
.dna-msg.bot{ align-self:flex-start; background:var(--gray-1); color:var(--text); border-bottom-left-radius:3px; }
.dna-msg.user{ align-self:flex-end; background:var(--ent-8); color:#fff; border-bottom-right-radius:3px; }
.dna-composer{ flex:none; display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--bg); }

/* --- soft pill tag --- */
.dna-pill{ display:inline-flex; align-items:center; gap:4px; font-size:11px; border-radius:999px; padding:2px 9px; background:var(--gray-1); color:var(--gray-7); font-weight:500; }

/* ===========================================================================
   HOVER TOOLTIP — styled (white on near-black), replaces native title tooltips.
   Populated by nav-bridge.js from data-tt (ex-title) / data-tip / truncated text.
   =========================================================================== */
.dna-tt{ position:fixed; z-index:99999; max-width:340px; padding:6px 9px; border-radius:6px;
  background:#1a1d21; color:#fff; font-size:12px; line-height:1.45; font-weight:400;
  box-shadow:0 6px 20px rgba(0,0,0,.32); pointer-events:none; white-space:normal;
  opacity:0; transition:opacity .09s ease; }
.dna-tt.on{ opacity:1; }

/* always show the horizontal scrollbar when a table actually overflows (no more guessing) */
.dna-scroll.has-xscroll{ overflow-x:scroll; }
.dna-scroll.has-xscroll::-webkit-scrollbar{ height:12px; }

/* pure-UI widgets read as clickable (nav-bridge makes them respond) */
.dna-switch,.dna-cb,.dna-rb,.dna-optcard,.dna-seg span{ cursor:pointer; }

/* ===========================================================================
   OWNERSHIP BAR — admin-only "Owner + Transfer" strip inside an edit modal.
   Sits between the dialog header and body. The transfer control is admin-only.
   =========================================================================== */
.dna-ownbar{ display:flex; align-items:center; gap:9px; padding:8px 14px; background:var(--gray-0);
  border-bottom:1px solid var(--border); font-size:12.5px; color:var(--gray-7); flex:none; }
.dna-ownbar > i{ color:var(--dim); font-size:15px; }
.dna-ownbar .adm{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background:var(--orange-bg); color:var(--orange-tx); border-radius:999px; padding:1px 7px; display:inline-flex; align-items:center; gap:3px; }

/* admin-only row action (e.g. Transfer ownership) — orange tint distinguishes it from owner actions */
.dna-ric.adm{ color:var(--orange-tx); }
.dna-ric.adm:hover{ color:var(--orange-tx); background:var(--orange-bg); }