/*
 * tha — the softwarekey admin design system ("softwarekey admin" design language).
 *
 * Moved out of components/admin_shell.php, where it was ~1,800 lines of inline
 * <style> sent with every admin page and never cached. Plain CSS (no build
 * step): public/assets/css/app.css is a precompiled Tailwind build, so the
 * component layer lives here under the `tha-` prefix.
 *
 * Shared by every layout. Element rules are scoped to body.tha (the admin
 * <body>), so loading this file on customer/public pages only adds the .tha-*
 * component classes and never restyles their existing markup.
 */
:root{
  --tha-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --tha-accent:#2563EB; --tha-accent-dark:#1D4ED8;
  --tha-ground:#EEF1F6; --tha-surface:#FFFFFF;
  --tha-ink:#0F172A; --tha-ink-2:#334155; --tha-muted:#5B6778;
  --tha-line:#E2E8F0;--tha-line-ctl:#E3E9F1;--tha-ctl-bg:#FFFFFF; --tha-line-soft:#F1F5F9;
  --tha-active-bg:#EFF6FF; --tha-active-ink:#1D4ED8;
  --tha-pill-bg:#F1F5F9; --tha-pill-ink:#334155;
  --tha-topbar:#111827;
  --tha-rail:80px; --tha-pane:256px; --tha-top-h:56px;
}
.dark{
  --tha-ground:#070C18; --tha-surface:#0F172A;
  --tha-ink:#E8EEF8; --tha-ink-2:#CBD5E1; --tha-muted:#94A3B8;
  --tha-line:rgba(148,163,184,.16); --tha-line-soft:rgba(148,163,184,.10);
  --tha-active-bg:rgba(37,99,235,.20); --tha-active-ink:#BFDBFE;
  /* v2.50.0 - link ink on a dark surface. Views were each picking their own
     near-identical blue (#93B4F5 here, #93B4FF there); this is the one. */
  --tha-link-dark:#93B4FF;
  --tha-pill-bg:rgba(148,163,184,.16); --tha-pill-ink:#CBD5E1;
  --tha-topbar:#0A101F;
}
body.tha{font-family:var(--tha-font);background:var(--tha-ground);color:var(--tha-ink)}
.tha-shell{display:flex;min-height:100vh;flex-direction:column}
.tha-body{display:flex;flex:1;min-height:0}
.tha-main{flex:1 1 0;min-width:0;padding:28px 32px 48px}
@media (max-width:1023px){.tha-main{padding:20px 16px 40px}}

/* ── Top bar ─────────────────────────────────────────────────────── */
.tha-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  min-height:56px;padding:8px 16px;background:var(--tha-topbar);color:#CBD5E1}
.tha-top-brand{display:flex;align-items:center;gap:8px;min-width:0}
.tha-top-brand b{font-size:18px;font-weight:600;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.tha-chip{border-radius:4px;background:rgba(59,130,246,.15);padding:2px 6px;font-size:11px;
  font-weight:600;color:#93C5FD;box-shadow:inset 0 0 0 1px rgba(96,165,250,.3)}
.tha-search{flex:1 1 280px;max-width:580px;margin:0 auto;display:flex;align-items:center;gap:10px;
  height:40px;padding:0 10px 0 14px;border-radius:999px;cursor:text;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);background:rgba(255,255,255,.05);
  color:#94A3B8;font-size:14px;text-align:left;border:0}
.tha-search:hover{background:rgba(255,255,255,.09)}
.tha-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-kbd{font:600 11px var(--tha-font);color:#9CA3AF;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);border-radius:4px;padding:2px 6px}
.tha-top-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.tha-live{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:0 8px}
.tha-live i{width:7px;height:7px;border-radius:4px;background:#4ADE80;display:block}
.tha-ico{position:relative;display:grid;place-content:center;width:36px;height:36px;border:0;
  border-radius:999px;background:transparent;color:#CBD5E1;cursor:pointer}
.tha-ico:hover{background:rgba(255,255,255,.08);color:#fff}
.tha-dot{position:absolute;top:2px;right:0;min-width:17px;height:16px;padding:0 3px;box-sizing:border-box;
  border-radius:8px;color:#fff;font:700 10px/16px var(--tha-font);text-align:center}
.tha-user{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px;border:0;border-radius:999px;
  background:transparent;color:#F3F4F6;font:600 14px var(--tha-font);cursor:pointer}
.tha-user:hover{background:rgba(255,255,255,.08)}
.tha-av{width:30px;height:30px;border-radius:15px;background:var(--tha-accent);color:#fff;
  display:grid;place-content:center;font-size:12px;font-weight:700;flex:none}
.tha-burger{display:none}
@media (max-width:1023px){
  .tha-burger{display:grid}
  .tha-search .tha-kbd{display:none}
}

/* ── Sidebar: icon rail + item pane ──────────────────────────────── */
.tha-side{display:flex;flex:none;background:var(--tha-surface);align-self:stretch}
.tha-rail{width:var(--tha-rail);flex:none;box-sizing:border-box;padding:12px 8px;
  border-right:1px solid var(--tha-line);display:flex;flex-direction:column;gap:6px;
  /* v2.24.1 - the rail sat in normal flow and stretched to the full row height,
     which starts 56px below the top of the viewport. Its height was still 100vh,
     so the bottom-pinned System icon landed 56px under the fold and never came
     back into view (the rail does not scroll with the page). Pin it instead. */
  position:sticky;top:var(--tha-top-h);align-self:flex-start;
  height:calc(100vh - var(--tha-top-h));overflow-y:auto;scrollbar-width:none}
.tha-rail::-webkit-scrollbar{width:0}
.tha-rail a{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:8px 0;
  border-radius:8px;color:var(--tha-muted);text-decoration:none;text-align:center}
.tha-rail a:hover{background:var(--tha-line-soft);color:var(--tha-ink-2)}
/* v2.17.2 - pin the System group to the bottom of the rail */
.tha-rail a.tha-rail-end{margin-top:auto}
.tha-rail a span{font-size:11px;line-height:1.2;font-weight:500}
.tha-rail a.on{color:var(--tha-active-ink);background:var(--tha-active-bg);
  box-shadow:-12px 0 0 -8px var(--tha-accent);font-weight:600}
.tha-rail a.on span{font-weight:600}
/* v2.24.1 - same off-by-topbar as .tha-rail above: top:0 / 100vh pushed the
   pane's own footer below the fold. Offset both by the topbar height. */
.tha-pane{width:var(--tha-pane);flex:none;box-sizing:border-box;border-right:1px solid var(--tha-line);
  display:flex;flex-direction:column;align-self:flex-start;
  height:calc(100vh - var(--tha-top-h));position:sticky;top:var(--tha-top-h)}
.tha-pane-h{padding:16px 20px 12px}
.tha-pane-h .t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--tha-ink)}
.tha-pane-h .d{font-size:12px;line-height:1.35;color:var(--tha-muted);margin-top:4px}
.tha-filter{padding:0 12px 10px;border-bottom:1px solid var(--tha-line-soft)}
.tha-filter label{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;
  border:1px solid var(--tha-line);background:var(--tha-ground);color:var(--tha-muted);font-size:13px}
.tha-filter input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:13px var(--tha-font);color:var(--tha-ink)}
.tha-nav{list-style:none;margin:0;padding:8px 12px 12px;display:flex;flex-direction:column;gap:2px;
  flex:1;overflow-y:auto;scrollbar-width:thin}
.tha-nav .h{padding:10px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tha-muted)}
.tha-nav a{display:flex;align-items:center;gap:12px;min-height:38px;padding:6px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--tha-ink-2);text-decoration:none}
.tha-nav a:hover{background:var(--tha-line-soft);color:var(--tha-ink)}
.tha-nav a.on{color:var(--tha-active-ink);background:var(--tha-active-bg);
  box-shadow:-16px 0 0 -12px var(--tha-accent)}
.tha-nav a svg{flex:none}
.tha-nav a .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-count{min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;
  background:var(--tha-pill-bg);color:var(--tha-pill-ink);font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.tha-count.new{background:#DCFCE7;color:#15803D;font-size:10px}
.dark .tha-count.new{background:rgba(16,185,129,.18);color:#6EE7B7}
.tha-pin{flex:none;border:0;background:transparent;padding:0;color:#CBD5E1;cursor:pointer;opacity:0}
.tha-nav a:hover .tha-pin,.tha-pin.on{opacity:1}
.tha-pin.on{color:#F59E0B}
.tha-pane-f{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--tha-line-soft)}
.tha-pane-f .av{width:32px;height:32px;border-radius:6px;background:#DBEAFE;color:#1D4ED8;display:grid;
  place-content:center;font-size:11px;font-weight:700;flex:none}
.dark .tha-pane-f .av{background:rgba(37,99,235,.25);color:#BFDBFE}
.tha-pane-f .n{font-size:13px;font-weight:600;color:var(--tha-ink)}
.tha-pane-f .r{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tha-muted)}
.tha-pane-f .r i{width:6px;height:6px;border-radius:3px;background:#10B981;display:block}
.tha-empty{padding:18px 12px;text-align:center;font-size:12px;color:var(--tha-muted)}

/* ── Page header ─────────────────────────────────────────────────── */
.tha-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:20px}
.tha-head h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--tha-ink)}
.tha-head p{margin:6px 0 0;font-size:14px;color:var(--tha-muted)}
.tha-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--tha-muted);text-decoration:none;margin-bottom:10px}
.tha-back:hover{color:var(--tha-accent)}
.tha-dhead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--tha-line)}
.tha-dhead h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--tha-ink)}
.tha-dhead>div>p{margin:5px 0 0;font-size:13.5px;color:var(--tha-muted)}
.tha-dhead-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tha-popitem{display:block;width:100%;padding:8px 12px;text-align:left;font-size:13px;font-weight:500;
  color:var(--tha-ink-2);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tha-popitem:hover{background:var(--tha-line-soft);color:var(--tha-ink)}
.tha-popitem.on{background:var(--tha-active-bg);color:var(--tha-active-ink);font-weight:600}
.tha-lbl{display:block;font-size:12.5px;font-weight:600;color:var(--tha-ink-2)}
.tha-lbl .req{color:#DC2626}
.tha-panel{border:1px solid var(--tha-line);border-radius:8px;background:var(--tha-surface);overflow:hidden}
.tha-pad{padding:18px}
.tha-popover{margin-top:8px;width:288px;padding:14px;text-align:left;border:1px solid var(--tha-line);
  border-radius:8px;background:var(--tha-surface);box-shadow:0 16px 36px rgba(15,23,42,.16)}
.tha-popover--wide{width:320px}
.tha-backrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:13px;color:var(--tha-muted)}
.tha-backrow a{color:var(--tha-muted);text-decoration:none;font-weight:500}
.tha-backrow a:hover{color:var(--tha-accent)}
.tha-thumb{border:1px solid var(--tha-line);border-radius:6px;background:var(--tha-line-soft);overflow:hidden}
.tha-pick{display:block;width:100%;padding:12px;text-align:left;border:1px solid var(--tha-line);
  border-radius:8px;background:var(--tha-surface);cursor:pointer;transition:border-color .15s,background .15s}
.tha-pick:hover{border-color:var(--tha-accent);background:var(--tha-line-soft)}

/* ── Mobile drawer ───────────────────────────────────────────────── */
@media (max-width:1023px){
  .tha-side{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 10px 40px rgba(15,23,42,.25)}
  .tha-side.open{transform:none}
  /* v2.24.1 - in the fixed drawer there is no topbar above the sidebar */
  .tha-rail,.tha-pane{position:static;align-self:stretch;height:auto;max-height:100vh}
  .tha-scrim{position:fixed;inset:0;z-index:45;background:rgba(15,23,42,.5)}
}

.tha-i{width:18px;height:18px}
.tha-row{position:relative}
.tha-row > a{padding-right:34px}
.tha-pin{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  display:grid;place-content:center;border-radius:4px}
.tha-pin:hover{color:#F59E0B;background:var(--tha-line-soft)}
.tha-row:hover .tha-pin,.tha-pin.on{opacity:1}
.tha-pin:focus-visible{opacity:1}

/* The centre pill is the existing global-search trigger, restyled for the dark bar. */
.tha-searchwrap{flex:1 1 280px;max-width:580px;margin:0 auto;min-width:0}
.tha-top .gs-trigger{width:100%;height:40px;justify-content:flex-start;gap:10px;padding:0 10px 0 14px;
  border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:#94A3B8}
.tha-top .gs-trigger:hover{border:0;background:rgba(255,255,255,.09);color:#CBD5E1}
.tha-top .gs-trigger-label{display:block;flex:1 1 auto;text-align:left;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-top .gs-trigger-kbd{display:inline-block;font:600 11px var(--tha-font);color:#9CA3AF;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);border-radius:4px;padding:2px 6px}
.dark .tha-top .gs-trigger{border:0;background:rgba(255,255,255,.05)}
.tha-uname{white-space:nowrap}
@media (max-width:1279px){.tha-live-hide{display:none}}
@media (max-width:767px){.tha-uname{display:none}.tha-top .gs-trigger-kbd{display:none}}
@media (max-width:420px){.tha-top-brand b{display:none}}

/* ── Page components, from the design canvas ─────────────────────────
   Shared by every migrated page. Still plain CSS, not Tailwind: app.css
   is a prebuilt stylesheet. */

/* The existing .card is used by ~every admin page; retuning it here brings
   pages that have NOT been migrated yet most of the way to the new look. */
body.tha .card{border-radius:8px;background:var(--tha-surface);
  box-shadow:none;--tw-ring-shadow:0 0 #0000;border:1px solid var(--tha-line)}
body.tha .card-header{padding:13px 16px;border-bottom:1px solid var(--tha-line)}

/* Buttons */
.tha-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:8px;
  font:600 14px var(--tha-font);cursor:pointer;white-space:nowrap;box-sizing:border-box;
  border:1px solid var(--tha-line);background:var(--tha-surface);color:var(--tha-ink);text-decoration:none}
.tha-btn:hover{background:var(--tha-ground);color:var(--tha-ink)}
.tha-btn--primary{border:0;background:var(--tha-accent);color:#fff}
.tha-btn--primary:hover{background:var(--tha-accent-dark);color:#fff}
.tha-btn--danger{border:0;background:#DC2626;color:#fff}
.tha-btn--danger:hover{background:#B91C1C;color:#fff}
.tha-btn--sm{height:34px;padding:0 10px;font-size:13px}
/* v2.19.0 - full-width button (centres its label) and the disabled state */
.tha-btn--block{width:100%;justify-content:center}
.tha-btn:disabled,.tha-btn[aria-disabled="true"]{cursor:not-allowed;
  border-color:var(--tha-line);background:var(--tha-line-soft);color:var(--tha-disabled-ink)}
/* v2.45.0 - white on #7FA2EE is 2.6:1, so a disabled primary read as a pale
   ghost with near-invisible text. Keep the tint, darken the label. */
.tha-btn--primary:disabled,.tha-btn--primary[aria-disabled="true"]{
  background:var(--tha-sel-bg);color:var(--tha-disabled-ink);
  box-shadow:inset 0 0 0 1px var(--tha-line-ctl)}
.dark .tha-btn--primary:disabled,.dark .tha-btn--primary[aria-disabled="true"]{
  background:rgba(37,99,235,.22);color:#C7D2FE;box-shadow:none}
.tha-actions{display:flex;flex-wrap:wrap;gap:8px}

/* v2.18.0 - square tinted icon action button (row action clusters) */
.tha-iacts{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.tha-iacts form{display:inline;margin:0}
.tha-iact{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  flex:0 0 auto;border:0;border-radius:8px;background:var(--tha-line-soft);color:var(--tha-ink-2);
  cursor:pointer;text-decoration:none;transition:background-color .12s,color .12s}
.tha-iact:hover{background:#E2E8F0;color:var(--tha-ink)}
.tha-iact svg{width:15px;height:15px}
.tha-iact.off{opacity:.4;pointer-events:none}
.tha-iact--sky{background:#EFF6FF;color:#2563EB}
.tha-iact--sky:hover{background:#DBEAFE;color:#1D4ED8}
.tha-iact--emerald{background:#ECFDF5;color:#059669}
.tha-iact--emerald:hover{background:#D1FAE5;color:#047857}
.tha-iact--violet{background:#F5F3FF;color:#7C3AED}
.tha-iact--violet:hover{background:#EDE9FE;color:#6D28D9}
.tha-iact--amber{background:#FFFBEB;color:#D97706}
.tha-iact--amber:hover{background:#FEF3C7;color:#B45309}
.tha-iact--rose{background:#FFF1F2;color:#E11D48}
.tha-iact--rose:hover{background:#FFE4E6;color:#BE123C}

/* v2.18.0 - modal overlay + dialog */
.tha-ovl{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.55);backdrop-filter:blur(2px)}
.tha-dlg{width:100%;max-width:560px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  overflow:hidden;border:1px solid var(--tha-line);border-radius:12px;background:var(--tha-surface);
  box-shadow:0 24px 60px rgba(15,23,42,.28)}
.tha-dlg-h{padding:16px 20px;border-bottom:1px solid var(--tha-line)}
.tha-dlg-h h3{margin:0;font-size:15px;font-weight:600;color:var(--tha-ink)}
.tha-dlg-h p{margin:4px 0 0;font-size:12px;color:var(--tha-muted)}
.tha-dlg-b{flex:1;min-height:0;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.tha-dlg-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 20px;border-top:1px solid var(--tha-line);background:var(--tha-ground)}

/* v2.18.0 - progress bar */
.tha-barhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:6px;font-size:12px;color:var(--tha-muted)}
.tha-barhead b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-bar{height:8px;border-radius:999px;background:var(--tha-line-soft);overflow:hidden}
.tha-bar i{display:block;height:100%;border-radius:999px;background:var(--tha-accent);transition:width .25s ease}
.tha-bar i.ok{background:#059669}
.tha-bar i.bad{background:#E11D48}

/* v2.18.0 - small counter tiles inside a dialog */
.tha-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tha-mini{padding:10px 8px;border:1px solid var(--tha-line);border-radius:8px;text-align:center}
.tha-mini b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-mini b.ok{color:#059669}
.tha-mini b.info{color:var(--tha-accent)}
.tha-mini b.bad{color:#E11D48}
.tha-mini b.nil{color:var(--tha-muted)}
.tha-mini span{display:block;margin-top:2px;font-size:11.5px;color:var(--tha-muted)}

/* v2.18.0 - CLI-style live log */
.tha-loghead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:6px;font-size:12px;font-weight:500;color:var(--tha-muted)}
.tha-loghead button{border:0;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--tha-muted);text-decoration:underline}
.tha-loghead button:hover{color:var(--tha-ink)}
.tha-log{height:220px;overflow-y:auto;overflow-x:hidden;padding:10px 12px;border-radius:8px;
  background:#0B1120;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;line-height:1.7;color:#6EE7B7}
.tha-log div{overflow-wrap:anywhere}
.tha-log .ts{color:#64748B;margin-right:6px}
.tha-log .ln-error{color:#FDA4AF}
.tha-log .ln-warn{color:#FCD34D}
.tha-log .ln-info{color:#93C5FD}
.tha-log .ln-ok{color:#6EE7B7}
.tha-log .idle{color:#64748B;font-style:italic}

/* v2.18.0 - inline red notice inside a dialog */
.tha-err{padding:10px 12px;border:1px solid #FECACA;border-radius:8px;
  background:#FEF2F2;font-size:13px;color:#B91C1C}
.dark .tha-iact:hover{background:rgba(148,163,184,.22)}
.dark .tha-iact--sky{background:rgba(37,99,235,.18);color:#93C5FD}
.dark .tha-iact--sky:hover{background:rgba(37,99,235,.3);color:#BFDBFE}
.dark .tha-iact--emerald{background:rgba(16,185,129,.16);color:#6EE7B7}
.dark .tha-iact--emerald:hover{background:rgba(16,185,129,.28);color:#A7F3D0}
.dark .tha-iact--violet{background:rgba(139,92,246,.18);color:#C4B5FD}
.dark .tha-iact--violet:hover{background:rgba(139,92,246,.3);color:#DDD6FE}
.dark .tha-iact--amber{background:rgba(245,158,11,.18);color:#FCD34D}
.dark .tha-iact--amber:hover{background:rgba(245,158,11,.3);color:#FDE68A}
.dark .tha-iact--rose{background:rgba(244,63,94,.18);color:#FDA4AF}
.dark .tha-iact--rose:hover{background:rgba(244,63,94,.3);color:#FECDD3}
.dark .tha-mini b.ok{color:#6EE7B7}
.dark .tha-mini b.info{color:#93C5FD}
.dark .tha-mini b.bad{color:#FDA4AF}
.dark .tha-bar i.ok{background:#10B981}
.dark .tha-bar i.bad{background:#F43F5E}
.dark .tha-err{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.14);color:#FCA5A5}

/* v2.18.0 - form layout primitives (stacked fields, 2-up grid, inline row) */
.tha-stack{display:flex;flex-direction:column;gap:18px}
.tha-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.tha-grid2{grid-template-columns:minmax(0,1fr)}}
.tha-inline{display:flex;align-items:center;gap:8px}
.tha-inline > .tha-in{flex:1;min-width:0}
.tha-inline form{margin:0}

/* v2.18.0 - bordered checkbox card (sync-type toggles) */
.tha-checkcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:700px){.tha-checkcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tha-checkcard{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  border:1px solid var(--tha-line);border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--tha-ink-2);transition:border-color .12s}
.tha-checkcard:hover{border-color:var(--tha-accent)}
.tha-checkcard input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--tha-accent)}

/* v2.18.0 - grey instruction callout */
.tha-note{padding:14px 16px;border:1px solid var(--tha-line);border-radius:8px;background:var(--tha-ground)}
.tha-note ol,.tha-note ul{margin:8px 0 0;padding-left:20px;
  font-size:12.5px;line-height:1.75;color:var(--tha-ink-2)}
/* app.css preflight sets list-style:none on ol/ul, so restore the markers */
.tha-note ol{list-style:decimal}
.tha-note ul{list-style:disc}
.tha-note li::marker{color:var(--tha-muted)}
.tha-note code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}

/* v2.18.0 - monospace variant for key/URL inputs, and the copied flash */
.tha-in--mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.tha-btn[data-copied="1"]{border-color:#A7F3D0;background:#ECFDF5;color:#047857}
.dark .tha-btn[data-copied="1"]{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.16);color:#6EE7B7}

/* v2.19.0 - workflow stepper */
.tha-steps{display:flex;align-items:flex-start;padding:20px 16px}
.tha-stepg{display:flex;align-items:flex-start}
.tha-stepg.grow{flex:1}
.tha-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:92px}
.tha-stepdot{display:grid;place-content:center;width:34px;height:34px;border-radius:999px;
  font-size:13px;font-weight:700;background:var(--tha-line-soft);color:var(--tha-muted)}
.tha-stepdot.done{background:#059669;color:#fff}
.tha-stepdot.current{background:var(--tha-accent);color:#fff;box-shadow:0 0 0 4px var(--tha-active-bg)}
.tha-step span{font-size:12px;font-weight:500;text-align:center;color:var(--tha-ink-2)}
.tha-step.pending span{color:var(--tha-muted)}
.tha-stepbar{flex:1;height:2px;margin:16px 4px 0;border-radius:999px;background:var(--tha-line)}
.tha-stepbar.on{background:#6EE7B7}
.dark .tha-stepdot.current{box-shadow:0 0 0 4px rgba(37,99,235,.25)}
.dark .tha-stepbar.on{background:#059669}

/* v2.19.0 - two-column detail layout (main + action rail) */
.tha-cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1100px){.tha-cols{grid-template-columns:minmax(0,1fr)}}

/* v2.19.0 - click-to-copy mono chip */
.tha-copy{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;
  border:1px solid var(--tha-line);background:var(--tha-line-soft);cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--tha-ink-2)}
.tha-copy:hover{background:var(--tha-active-bg);border-color:var(--tha-accent);color:var(--tha-accent)}
.tha-copy svg{width:12px;height:12px;flex:0 0 auto;opacity:.6}
.tha-copy .yes{font-weight:600;color:#059669}
.tha-copys{display:flex;flex-wrap:wrap;gap:6px}

/* v2.19.0 - table footer totals */
.tha-table tfoot td{padding:8px 16px;border-top:1px solid var(--tha-line-soft);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--tha-ink-2)}
.tha-table tfoot tr:last-child td{border-top:1px solid var(--tha-line);
  padding:14px 16px;font-size:15px;font-weight:700;color:var(--tha-ink)}

/* v2.19.0 - summary rows (label left, value or control right) */
.tha-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:13.5px;color:var(--tha-muted)}
.tha-sum b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--tha-ink-2)}
.tha-sum--total{margin-top:10px;padding-top:12px;border-top:1px solid var(--tha-line);
  font-size:15px;font-weight:700;color:var(--tha-ink)}
.tha-sum--total b{font-size:15px;color:var(--tha-accent)}

/* v2.19.0 - currency prefix sitting inside a number input */
.tha-pfx{position:relative;display:inline-block}
.tha-pfx > span{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:12px;color:var(--tha-muted)}
.tha-pfx > input{padding-left:34px;text-align:right;font-variant-numeric:tabular-nums}

/* v2.19.0 - small ghost icon button for a row-level toggle */
.tha-xbtn{display:inline-grid;place-content:center;width:28px;height:28px;border:0;border-radius:6px;
  background:transparent;cursor:pointer;color:var(--tha-muted)}
.tha-xbtn:hover{background:#FFF1F2;color:#E11D48}
.tha-xbtn.undo{color:#059669}
.tha-xbtn.undo:hover{background:#ECFDF5;color:#047857}
.tha-xbtn svg{width:15px;height:15px}
.dark .tha-xbtn:hover{background:rgba(244,63,94,.16);color:#FDA4AF}
.dark .tha-xbtn.undo:hover{background:rgba(16,185,129,.16);color:#6EE7B7}

/* v2.19.0 - row marked for deletion */
.tha-table tbody tr.gone td{opacity:.45}
.tha-table tbody tr.gone .strike{text-decoration:line-through}

/* v2.19.0 - full-width segmented control (mode switchers) */
.tha-seg--full{display:flex;width:100%}
.tha-seg--full button{flex:1;padding:7px 12px;font-size:13.5px}

/* v2.19.0 - absolutely-positioned search/picker dropdown */
.tha-droproot{position:relative}
.tha-drop{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;
  max-height:288px;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--tha-line);border-radius:8px;background:var(--tha-surface);
  box-shadow:0 16px 40px rgba(15,23,42,.16)}
.tha-drop-s{padding:8px;border-bottom:1px solid var(--tha-line)}
.tha-drop-s .tha-in{width:100%}
.tha-drop ul{flex:1;min-height:0;overflow-y:auto;margin:0;padding:4px 0;list-style:none}
.tha-drop-i{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;border:0;background:none;cursor:pointer;text-align:left}
.tha-drop-i:hover{background:var(--tha-line-soft)}
.tha-drop-i .nm{display:block;font-size:13.5px;font-weight:500;color:var(--tha-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-drop-i .sb{display:block;font-size:11.5px;color:var(--tha-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-drop-i .rt{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--tha-ink-2)}
.tha-drop-i .id{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--tha-muted)}
.tha-drop-m{padding:8px 12px;text-align:center;font-size:12px;color:var(--tha-muted)}
/* trigger that looks like a select but is a button */
/* v2.22.0 - this was display:flex, but Chrome wraps a <button>'s children in an
   anonymous content box with auto margins, which centred the label however the
   button's own justify-content was set. display:block puts it back on the left.
   (Both callers render a single <span>.) Fixes admin/orders/create too. */
.tha-pick-btn{display:block;width:100%;
  min-height:38px;padding:9px 12px;border-radius:8px;border:1px solid var(--tha-line);
  background:var(--tha-surface);cursor:pointer;font:14px var(--tha-font);color:var(--tha-ink);text-align:left}
.tha-pick-btn.empty{color:var(--tha-muted)}
.tha-pick-btn > *{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v2.19.0 - file dropzone */
.tha-dz{margin-top:12px;padding:26px 16px;border:2px dashed var(--tha-line);border-radius:10px;
  text-align:center;transition:border-color .15s,background-color .15s}
.tha-dz.over{border-color:#7C3AED;background:#F5F3FF}
.dark .tha-dz.over{border-color:#8B5CF6;background:rgba(139,92,246,.12)}
.tha-dz p{margin:0;font-size:13.5px;color:var(--tha-ink-2)}
.tha-dz .sub{margin-top:4px;font-size:11.5px;color:var(--tha-muted)}
.tha-dz .busy{font-weight:600;color:#7C3AED}
.tha-dz button{border:0;background:none;padding:0;cursor:pointer;
  font:600 13.5px var(--tha-font);color:#7C3AED;text-decoration:underline}

/* v2.19.0 - amber warning callout */
.tha-warn{padding:10px 14px;border:1px solid #FDE68A;border-radius:8px;
  background:#FFFBEB;font-size:13px;color:#92400E}
.tha-warn a{color:inherit;font-weight:600}
.dark .tha-warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12);color:#FCD34D}

/* v2.19.0 - OCR review grid */
.tha-ocr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
@media (max-width:900px){.tha-ocr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tha-ocr{grid-template-columns:minmax(0,1fr)}}
.tha-ocr-r{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--tha-line-soft);font-size:12px}
.tha-ocr-r > span:first-child{flex:0 0 auto;color:var(--tha-muted)}
.tha-ocr-v{display:flex;min-width:0;align-items:center;gap:6px}
.tha-ocr-v > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:500;color:var(--tha-ink-2)}
.tha-ocr-v > span:first-child.nil{font-style:italic;color:var(--tha-muted)}
.tha-conf{flex:0 0 auto;padding:1px 6px;border-radius:4px;
  font-size:9.5px;font-weight:700;text-transform:uppercase}

/* v2.19.0 - empty state inside a table body */
.tha-tempty td{padding:44px 16px;text-align:center}
.tha-tempty svg{display:block;margin:0 auto;width:40px;height:40px;color:var(--tha-line)}
.tha-tempty p{margin:8px 0 0;font-size:13.5px;font-weight:500;color:var(--tha-muted)}
.tha-tempty p.sub{margin-top:2px;font-size:12px;font-weight:400}

/* v2.20.0 - selectable mono key chip (licence stock pickers) */
.tha-keychips{display:flex;flex-wrap:wrap;gap:6px}
.tha-keychip{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:6px;cursor:pointer;
  border:1px solid var(--tha-line);background:var(--tha-surface);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--tha-ink-2)}
.tha-keychip:hover{border-color:var(--tha-accent);background:var(--tha-active-bg)}
.tha-keychip input{width:14px;height:14px;flex:0 0 auto;accent-color:var(--tha-accent)}
.tha-keychip:has(input:checked){border-color:var(--tha-accent);background:var(--tha-active-bg);color:var(--tha-accent)}

/* v2.20.0 - two-up action button row */
.tha-btnrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:640px){.tha-btnrow{grid-template-columns:minmax(0,1fr)}}
.tha-btn--go{border:0;background:#059669;color:#fff}
.tha-btn--go:hover{background:#047857;color:#fff}

/* v2.20.0 - keyboard key hint */
.tha-kbd2{display:inline-block;padding:1px 5px;border:1px solid var(--tha-line);border-bottom-width:2px;
  border-radius:4px;background:var(--tha-line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--tha-ink-2)}

/* KPI strip */
.tha-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:20px}
.tha-kpi{padding:18px 16px 16px;border-radius:8px;background:var(--tha-surface);
  border:1px solid var(--tha-line);display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
a.tha-kpi:hover{border-color:#CBD5E1}
.dark a.tha-kpi:hover{border-color:rgba(148,163,184,.3)}
.tha-kpi-t{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--tha-ink)}
.tha-kpi-i{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;
  justify-content:center;flex:none}
.tha-kpi-n{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-kpi-c{font-size:13px;color:var(--tha-muted)}
/* Icon tints */
.tin-blue{background:#DBEAFE;color:#1D4ED8}      .dark .tin-blue{background:rgba(37,99,235,.22);color:#BFDBFE}
.tin-green{background:#DCFCE7;color:#15803D}     .dark .tin-green{background:rgba(16,185,129,.18);color:#6EE7B7}
.tin-amber{background:#FEF3C7;color:#B45309}     .dark .tin-amber{background:rgba(245,158,11,.18);color:#FCD34D}
.tin-red{background:#FEE2E2;color:#B91C1C}       .dark .tin-red{background:rgba(239,68,68,.18);color:#FCA5A5}
.tin-violet{background:#EDE9FE;color:#6D28D9}    .dark .tin-violet{background:rgba(139,92,246,.2);color:#C4B5FD}
.tin-slate{background:#F1F5F9;color:#475569}     .dark .tin-slate{background:rgba(148,163,184,.18);color:#CBD5E1}

/* Section card: tabs → filters → table → footer */
.tha-sec{border-radius:8px;background:var(--tha-surface);border:1px solid var(--tha-line);overflow:hidden}
.tha-tabs{display:flex;flex-wrap:wrap;padding:0 16px;border-bottom:1px solid var(--tha-line)}
.tha-tab{height:44px;display:inline-flex;align-items:center;padding:0 2px;margin-right:18px;border:0;
  background:transparent;cursor:pointer;font:500 14px var(--tha-font);color:var(--tha-muted);text-decoration:none}
.tha-tab:hover{color:var(--tha-ink)}
.tha-tab.on{font-weight:600;color:var(--tha-active-ink);box-shadow:inset 0 -2px 0 var(--tha-accent)}
.tha-tab-n{margin-left:6px;padding:0 6px;border-radius:999px;background:var(--tha-pill-bg);
  color:var(--tha-pill-ink);font-size:11.5px;font-weight:600}
.tha-tab.on .tha-tab-n{background:#DBEAFE;color:#1D4ED8}
.dark .tha-tab.on .tha-tab-n{background:rgba(37,99,235,.3);color:#BFDBFE}

.tha-filters{display:flex;flex-wrap:wrap;gap:10px;padding:14px 16px;border-bottom:1px solid var(--tha-line)}
.tha-field{flex:1 1 260px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:8px;
  border:1px solid var(--tha-line);background:var(--tha-surface);color:var(--tha-muted)}
.tha-field input{flex:1;min-width:0;border:0;outline:0;font:14px var(--tha-font);background:transparent;color:var(--tha-ink)}
.tha-sel,body.tha .tha-filters select,body.tha .tha-filters input[type=date]{height:38px;padding:0 10px;border-radius:8px;
  border:1px solid var(--tha-line-ctl);background:var(--tha-surface);font:14px var(--tha-font);color:var(--tha-ink)}

/* Form controls. `.tha-field` above is the filter-bar search WRAPPER (a flex
   box holding an icon plus a bare input). When it lands on a real control, and
   for the `.tha-in` / `.tha-ta` classes used by form pages, style it as a
   control so typed text is ink rather than muted grey. */
.tha-in,.tha-ta,.tha-sel,
input.tha-field,textarea.tha-field,select.tha-field{
  display:block;height:auto;min-height:38px;padding:9px 12px;border-radius:8px;
  border:1px solid var(--tha-line-ctl);background:var(--tha-surface);
  font:14px var(--tha-font);color:var(--tha-ink)}
.tha-sel{min-height:38px}
/* v2.21.0 - legacy `.input` was `w-full`; match it so converted forms keep
   filling their column. Filter bars and inline rows size to content. */
.tha-in,.tha-ta,.tha-sel{width:100%}
.tha-filters .tha-in,.tha-filters .tha-sel,.tha-filters .tha-ta,
.tha-inline .tha-in,.tha-inline .tha-sel,
.tha-copys .tha-in,.tha-in--sm{width:auto}
.tha-in:focus,.tha-ta:focus,.tha-sel:focus,
input.tha-field:focus,textarea.tha-field:focus,select.tha-field:focus{
  outline:0;border-color:var(--tha-accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.tha-in::placeholder,.tha-ta::placeholder{color:var(--tha-muted)}
.tha-in:disabled,.tha-ta:disabled{background:var(--tha-line-soft);color:var(--tha-muted)}
.tha-ta{min-height:96px;line-height:1.55;resize:vertical}
.tha-in--sm{min-height:32px;padding:5px 10px;font-size:13px}

/* Field hint text, dashed empty state, card footer. */
.tha-hint{margin-top:5px;font-size:12px;line-height:1.5;color:var(--tha-muted)}
.tha-dashed{padding:32px 16px;border:1px dashed var(--tha-line);border-radius:8px;
  text-align:center;font-size:13.5px;color:var(--tha-muted)}
.dark .tha-dashed{border-color:rgba(148,163,184,.3)}
.tha-cardfoot{display:flex;align-items:center;gap:8px;padding:14px 16px;
  border-top:1px solid var(--tha-line);background:var(--tha-ground)}

/* Settings page: left-hand section nav (one row per settings area). */
.tha-snav{display:flex;align-items:flex-start;gap:12px;padding:8px;border-radius:6px;
  text-decoration:none;transition:background .15s}
.tha-snav:hover{background:var(--tha-line-soft)}
.tha-snav.on{background:var(--tha-active-bg)}
/* v2.16.0 — clickable placeholder token */
.tha-ph{border:1px solid var(--tha-line);border-radius:6px;background:var(--tha-line-soft);
  padding:2px 6px;cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;color:var(--tha-ink-2)}
.tha-ph:hover{background:var(--tha-active-bg);border-color:var(--tha-accent);color:var(--tha-accent)}
/* v2.16.0 — segmented control (Preview/HTML, Visual/HTML, Desktop/Mobile) */
.tha-seg{display:inline-flex;padding:2px;border-radius:8px;background:var(--tha-line-soft);
  border:1px solid var(--tha-line)}
.tha-seg button{border:0;background:transparent;padding:5px 12px;border-radius:6px;cursor:pointer;
  font:500 12.5px var(--tha-font);color:var(--tha-muted)}
.tha-seg button:hover{color:var(--tha-ink)}
.tha-seg button.tha-on{background:var(--tha-accent) !important;color:#fff !important}
/* v2.16.0 — dropdown panel + item (filter dropdowns) */
.tha-ddp{border:1px solid var(--tha-line);border-radius:8px;background:var(--tha-surface);
  padding:4px 0;box-shadow:0 10px 24px rgba(15,23,42,.12)}
.tha-ddi{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 12px;font-size:13.5px;color:var(--tha-ink-2);text-decoration:none}
.tha-ddi:hover{background:var(--tha-line-soft)}
/* v2.15.0 — detail definition list, checkbox row, mono code badge */
.tha-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;margin:0;font-size:13.5px}
.tha-dl dt{color:var(--tha-muted)}
.tha-dl dd{margin:0;text-align:right;font-weight:500;color:var(--tha-ink-2)}
.tha-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tha-ink-2)}
.tha-check input{width:15px;height:15px;accent-color:var(--tha-accent)}
/* Every admin checkbox and radio uses the theme accent. */
body.tha input[type=checkbox],body.tha input[type=radio]{accent-color:var(--tha-accent)}
.tha-code{display:inline-block;padding:6px 12px;border-radius:8px;background:var(--tha-active-bg);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:700;
  color:var(--tha-accent)}
/* v2.15.0 — inline removable tag (rule chips) */
.tha-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  border:1px solid var(--tha-line);background:var(--tha-line-soft);
  padding:4px 10px;font-size:12px;color:var(--tha-ink-2);white-space:nowrap}
.tha-tag strong{font-weight:600;color:var(--tha-ink)}
/* v2.25.0 - attribute-value chip: a colour swatch and the axis name, inside
   the existing .tha-tag shell (variants table) */
.tha-tag .sw{width:9px;height:9px;border-radius:999px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.12)}
.tha-tag .ax{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--tha-muted)}
.tha-x{border:0;background:none;padding:0 0 0 2px;font-size:14px;line-height:1;
  cursor:pointer;color:var(--tha-muted)}
.tha-x:hover{color:#DC2626}
.tha-snav-l{display:block;font-size:13.5px;font-weight:600;color:var(--tha-ink-2)}
.tha-snav.on .tha-snav-l{color:var(--tha-active-ink)}
.tha-snav-d{display:block;margin-top:1px;font-size:12px;color:var(--tha-muted)}

/* Selected / filled accent states. These exist as classes because the views
   that need them build the class list inside a PHP or Alpine ternary, where an
   inline style cannot reach, and an arbitrary Tailwind colour would be a no-op
   against the prebuilt app.css. */
.tha-on{background:var(--tha-accent) !important;color:#fff !important}
.tha-fill{background:var(--tha-accent)}

/* Typographic scale + inline link, for views that wrote these longhand. */
.tha-h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--tha-ink)}
.tha-h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--tha-ink)}
.tha-h3{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--tha-ink)}
.tha-stat{margin-top:4px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-link{font-size:13.5px;font-weight:500;color:var(--tha-accent);text-decoration:none}
.tha-link:hover{text-decoration:underline}
.tha-flash--error{border-color:#FECACA;background:#FEE2E2;color:#B91C1C}
.dark .tha-flash--error{border-color:rgba(239,68,68,.3);background:rgba(239,68,68,.14);color:#FCA5A5}

/* Dashboard: chart cards, donut legend and the recent-orders feed. */
.tha-ldot{width:9px;height:9px;border-radius:999px;display:inline-block;flex:0 0 auto}
.tha-dash-empty{margin:0;padding:40px 16px;text-align:center;font-size:14px;color:var(--tha-muted)}
.tha-legend{margin:0;padding:0 16px 16px;list-style:none;display:flex;flex-direction:column;gap:7px}
.tha-legend li{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--tha-ink-2)}
.tha-legend li>span:first-child{display:inline-flex;align-items:center;gap:8px}
.tha-legend-n{font-weight:600;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-feed{margin:0;padding:0;list-style:none}
.tha-feed li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--tha-line-soft)}
.tha-feed li:last-child{border-bottom:0}
.tha-feed-main{min-width:0}
.tha-feed-top{display:flex;align-items:center;gap:8px}
.tha-feed-ref{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;font-weight:600;color:var(--tha-ink-2)}
.tha-feed-sub{margin-top:2px;font-size:12.5px;color:var(--tha-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-feed-amt{flex:0 0 auto;text-align:right}
.tha-feed-total{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-feed-meta{margin-top:2px;font-size:11px;color:var(--tha-muted)}
/* the two-column chart rows stack below the pane-plus-content breakpoint */
@media (max-width:1100px){.tha-dash-row{grid-template-columns:minmax(0,1fr) !important}}

/* Card head / body — the legacy `.card-header` / `.card-body` pair, restyled
   in place so the two nested divs keep their original structure. */
.tha-cardhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--tha-line)}
.tha-cardhead h3{margin:0;font-size:14px;font-weight:600;color:var(--tha-ink)}
.tha-cardbody{padding:18px}

/* Inline flash / notice bar */
.tha-flash{padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:500;
  border:1px solid #BBF7D0;background:#DCFCE7;color:#15803D}
.dark .tha-flash{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.14);color:#6EE7B7}

.tha-tablewrap{overflow-x:auto}
.tha-table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--tha-ink)}
.tha-table thead tr{text-align:left;color:var(--tha-muted);font-size:12px;background:var(--tha-ground)}
.tha-table th{padding:10px 16px;font-weight:600;white-space:nowrap;text-align:left}
.tha-table tbody tr{border-top:1px solid var(--tha-line)}
.tha-table tbody tr:hover{background:var(--tha-line-soft)}
.tha-table td{padding:12px 16px;vertical-align:middle}
.tha-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tha-table th.num{text-align:right}
.tha-table .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;color:var(--tha-muted);white-space:nowrap}
.tha-table .dim{color:var(--tha-muted);white-space:nowrap}
.tha-t1{font-weight:600}
/* v2.39.0 - a wide table (products) summed past the content width and scrolled
   sideways. --fixed divides the available width between the columns instead of
   letting the longest cell set it; --tight trims the 16px cell padding that a
   nine-column row cannot afford. Long text ellipsises rather than pushing. */
.tha-table--fixed{table-layout:fixed}
.tha-table--fixed th,.tha-table--fixed td{overflow:hidden}
.tha-table--fixed td .tha-t1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-table--tight th,.tha-table--tight td{padding-left:10px;padding-right:10px}
.tha-t2{font-size:12px;color:var(--tha-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tha-empty-row td{padding:40px 16px;text-align:center;color:var(--tha-muted);font-size:14px}

/* Status pills */
.tha-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.tha-pill--blue{background:#E0F2FE;color:#0369A1}   .dark .tha-pill--blue{background:rgba(14,165,233,.2);color:#7DD3FC}
.tha-pill--green{background:#DCFCE7;color:#15803D}  .dark .tha-pill--green{background:rgba(16,185,129,.2);color:#6EE7B7}
.tha-pill--amber{background:#FEF3C7;color:#B45309}  .dark .tha-pill--amber{background:rgba(245,158,11,.2);color:#FCD34D}
.tha-pill--red{background:#FEE2E2;color:#B91C1C}    .dark .tha-pill--red{background:rgba(239,68,68,.2);color:#FCA5A5}
.tha-pill--violet{background:#EDE9FE;color:#6D28D9} .dark .tha-pill--violet{background:rgba(139,92,246,.22);color:#C4B5FD}
.tha-pill--slate{background:#F1F5F9;color:#475569}  .dark .tha-pill--slate{background:rgba(148,163,184,.18);color:#CBD5E1}

/* Table footer + pagination */
.tha-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-top:1px solid var(--tha-line);font-size:13px;color:var(--tha-muted)}
.tha-foot .pagination,.tha-foot ul{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.tha-foot a,.tha-foot .page-item > *{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 8px;border-radius:6px;border:1px solid var(--tha-line);
  background:var(--tha-surface);color:var(--tha-ink);font:600 13px var(--tha-font);text-decoration:none}
.tha-foot a:hover{background:var(--tha-ground);color:var(--tha-ink)}
.tha-foot .active > *,.tha-foot .page-item.active > *{background:var(--tha-ink);color:var(--tha-surface);border-color:var(--tha-ink)}
.tha-foot .disabled > *{opacity:.45}

/* v2.21.0 - two-column form grid (customer forms) */
.tha-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tha-fgrid > .span2{grid-column:1 / -1}
@media (max-width:760px){.tha-fgrid{grid-template-columns:minmax(0,1fr)}
  .tha-fgrid > .span2{grid-column:auto}}

/* v2.21.0 - "(optional)" suffix inside a label, and the required marker */
.tha-lbl-opt{font-size:12px;font-weight:400;color:var(--tha-muted)}
.tha-req{color:#E11D48}
.dark .tha-req{color:#FB7185}

/* v2.21.0 - borderless text button that reads as a link */
.tha-linkbtn{border:0;background:none;padding:0;cursor:pointer;
  font:500 13.5px var(--tha-font);color:var(--tha-accent)}
.tha-linkbtn:hover{text-decoration:underline}

/* v2.21.0 - three-up card row (customer profile + addresses) */
.tha-cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:1000px){.tha-cols3{grid-template-columns:minmax(0,1fr)}}

/* v2.21.0 - two-column definition list inside a card */
.tha-dl2{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;padding:16px;font-size:13.5px}
.tha-dl2 dt{color:var(--tha-muted)}
.tha-dl2 dd{margin:0;font-weight:500;color:var(--tha-ink)}

/* v2.21.0 - postal address block */
.tha-addr{padding:16px;font-size:13.5px;line-height:1.65;color:var(--tha-ink-2)}
.tha-addr--empty{color:var(--tha-muted)}
.tha-addr-nm{font-weight:600;color:var(--tha-ink)}
.tha-addr-co{color:var(--tha-muted)}
.tha-addr-c{margin-top:8px;padding-top:8px;border-top:1px solid var(--tha-line-soft);
  font-size:12px;color:var(--tha-muted)}

/* v2.21.0 - tab strip with a search box on the right */
.tha-tabrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:4px 16px;border-bottom:1px solid var(--tha-line)}
.tha-tabrow > .tha-tabs{flex:1 1 auto;border-bottom:0;padding:0}
.tha-tabsearch{position:relative;flex:0 0 auto;width:100%;margin-bottom:8px}
@media (min-width:640px){.tha-tabsearch{width:256px}}
.tha-tabsearch .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none;color:var(--tha-muted)}
.tha-tabsearch input{padding-left:34px}

/* v2.22.0 - detail-page action bar (buttons left, public link right) */
.tha-actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}

/* v2.22.0 - left-aligned dropdown item (icon + label) and its separator */
.tha-ddi--l{justify-content:flex-start;gap:10px;width:100%;border:0;background:none;
  cursor:pointer;text-align:left;font:13.5px var(--tha-font)}
.tha-ddi--l svg{width:16px;height:16px;flex:none;color:var(--tha-muted)}
.tha-ddi--l.off{color:var(--tha-muted);cursor:not-allowed}
.tha-ddp-sep{height:1px;margin:4px 0;background:var(--tha-line-soft)}

/* v2.22.0 - compact figure strip (invoice subtotal / tax / total / due) */
.tha-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:24px;margin-bottom:16px}
.tha-fig{padding:14px 16px;border:1px solid var(--tha-line);border-radius:10px;background:var(--tha-surface)}
.tha-fig .k{font-size:12px;color:var(--tha-muted)}
.tha-fig .v{margin-top:3px;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tha-ink)}
.tha-fig .v.neg{color:#E11D48}
.dark .tha-fig .v.neg{color:#FB7185}

/* v2.22.0 - table that sits flush inside a card body (no outer gutter) */
.tha-table--flush th:first-child,.tha-table--flush td:first-child{padding-left:0}
.tha-table--flush th:last-child,.tha-table--flush td:last-child{padding-right:0}
.tha-table th.ctr,.tha-table td.ctr{text-align:center}
.tha-table .neg{color:#E11D48}
.dark .tha-table .neg{color:#FB7185}
.tha-table .warnish{font-weight:600;color:#B45309}
.dark .tha-table .warnish{color:#FCD34D}

/* v2.22.0 - tinted panel callout (payment received / bank receipt / empty) */
.tha-callout{padding:16px;border:1px solid var(--tha-line);border-radius:10px;background:var(--tha-surface)}
.tha-callout h3{margin:0;font-size:15px;font-weight:600;color:var(--tha-ink)}
.tha-callout-ico{display:grid;place-content:center;flex:none;width:36px;height:36px;border-radius:999px;
  background:var(--tha-line-soft);color:var(--tha-muted)}
.tha-callout--ok{border-color:#A7F3D0;background:#ECFDF5}
.tha-callout--ok .tha-callout-ico{background:#D1FAE5;color:#047857}
.dark .tha-callout--ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.1)}
.dark .tha-callout--ok .tha-callout-ico{background:rgba(16,185,129,.22);color:#6EE7B7}
.tha-callout--warn{border-color:#FDE68A;background:#FFFBEB}
.tha-callout--warn .tha-callout-ico{background:#FEF3C7;color:#B45309}
.dark .tha-callout--warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.dark .tha-callout--warn .tha-callout-ico{background:rgba(245,158,11,.22);color:#FCD34D}
.tha-callout--dash{border-style:dashed;background:var(--tha-ground)}
.dark .tha-callout--dash{border-color:rgba(148,163,184,.3)}

/* v2.22.0 - responsive grid of dt/dd pairs inside a callout */
.tha-dlgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 24px;margin:0;font-size:13.5px}
.tha-dlgrid dt{font-size:12px;color:var(--tha-muted)}
.tha-dlgrid dd{margin:1px 0 0;font-weight:600;color:var(--tha-ink)}
.tha-dlgrid dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  font-weight:400;color:var(--tha-ink-2);overflow:hidden;text-overflow:ellipsis}

/* v2.22.0 - selectable payment-method card */
.tha-pmcard{display:flex;align-items:center;gap:12px;padding:12px;cursor:pointer;
  border:2px solid var(--tha-line);border-radius:12px;transition:border-color .12s,background .12s}
.tha-pmcard:hover{border-color:var(--tha-accent)}
.tha-pmcard.on{border-color:#10B981;background:#ECFDF5}
.dark .tha-pmcard.on{border-color:#10B981;background:rgba(16,185,129,.12)}
.tha-pmcard .ico{display:flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:8px;background:var(--tha-line-soft);font-size:18px}
.tha-pmcard .txt{flex:1;min-width:0}
.tha-pmcard .nm{display:block;font-size:13.5px;font-weight:600;color:var(--tha-ink)}
.tha-pmcard .sb{display:block;font-size:12px;color:var(--tha-muted)}
.tha-pmcard .tick{display:flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border:2px solid var(--tha-line);border-radius:6px;transition:all .12s}
.tha-pmcard.on .tick{border-color:#10B981;background:#10B981;color:#fff}

/* v2.22.0 - extra button tones + embedded document frame */
.tha-btn--dark{border:0;background:var(--tha-ink);color:var(--tha-surface)}
.tha-btn--dark:hover{background:var(--tha-ink-2);color:var(--tha-surface)}
.tha-btn--warn{border:0;background:#F59E0B;color:#fff}
.tha-btn--warn:hover{background:#D97706;color:#fff}
.tha-frame{width:100%;height:24rem;border:1px solid var(--tha-line);border-radius:10px;background:var(--tha-surface)}

/* v2.23.0 - three-up responsive grid (share toolbar, quote meta rows) */
.tha-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.tha-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tha-grid3{grid-template-columns:minmax(0,1fr)}}

/* v2.23.0 - inline "Label: value" lifecycle list */
.tha-lifecycle{margin:0;font-size:12px;color:var(--tha-muted)}
.tha-lifecycle dt{display:inline}
.tha-lifecycle dd{display:inline;margin:0 0 0 4px;color:var(--tha-ink-2)}

/* v2.23.0 - right-aligned totals block under a line-item table */
.tha-totalsbar{display:flex;justify-content:flex-end;padding:12px 16px;
  border-top:1px solid var(--tha-line);background:var(--tha-ground)}
.tha-totals{width:100%;max-width:20rem;margin:0}
.tha-totals dt,.tha-totals dd{margin:0}
.tha-totals .tha-sum{padding:2px 0}

/* v2.23.0 - preformatted note body that still wraps */
.tha-pre{margin:0;white-space:pre-wrap;font-size:13.5px;line-height:1.6;color:var(--tha-ink-2)}

/* v2.23.0 - divided list of rows (email history) */
.tha-rows > .tha-lrow + .tha-lrow{border-top:1px solid var(--tha-line-soft)}
.tha-lrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  padding:12px 16px;font-size:13.5px;color:var(--tha-ink-2)}

/* v2.23.0 - busy spinner inside a button */
.tha-spin{animation:tha-spin 1s linear infinite}
@keyframes tha-spin{to{transform:rotate(360deg)}}

/* v2.24.0 - monospaced run of text (refund code, account no., order ref) */
.tha-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* v2.24.0 - wide content column beside a narrower action rail */
.tha-sidegrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1024px){.tha-sidegrid{grid-template-columns:minmax(0,1fr)}}

/* v2.24.0 - uppercase micro-heading above a small block of facts */
.tha-eyebrow{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tha-muted)}
.tha-eyebrow--ok{color:#047857}
.dark .tha-eyebrow--ok{color:#6EE7B7}

/* v2.24.0 - stacked "Label: value" lines inside a card */
.tha-kvs .tha-cardbody{font-size:13.5px;line-height:1.7;color:var(--tha-ink-2)}
.tha-kvs .k{color:var(--tha-muted)}

/* v2.24.0 - two-column grid of dt/dd pairs, each pair in its own wrapper */
.tha-kvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0}
@media (max-width:620px){.tha-kvgrid{grid-template-columns:minmax(0,1fr)}}
.tha-kvgrid dt{font-size:11.5px;color:var(--tha-muted)}
.tha-kvgrid dd{margin:1px 0 0;font-size:13.5px;font-weight:500;color:var(--tha-ink)}

/* v2.24.0 - vertical activity timeline (Tailwind preflight strips the list
   marker, so the dots are drawn explicitly) */
.tha-tl{position:relative;margin:0;padding:0 0 0 20px;list-style:none;
  border-left:1px solid var(--tha-line)}
.tha-tl > li{position:relative}
.tha-tl > li + li{margin-top:14px}
.tha-tl .dot{position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:999px;
  background:var(--tha-accent)}
.tha-tl .bd{font-size:13.5px;color:var(--tha-ink-2)}
.tha-tl .mt{margin-top:2px;font-size:11.5px;color:var(--tha-muted)}
.tha-tl-empty{font-size:13.5px;color:var(--tha-muted)}

/* v2.24.0 - wrapping row of small buttons (file attachments) */
.tha-chips{display:flex;flex-wrap:wrap;gap:8px}

/* v2.24.0 - column of full-width buttons / fields */
.tha-vstack{display:flex;flex-direction:column;gap:8px}

/* v2.24.0 - outlined danger button (destructive but not the primary action) */
.tha-btn--odanger{border-color:#FDA4AF;color:#E11D48}
.tha-btn--odanger:hover{background:#FFF1F2;color:#BE123C}
.dark .tha-btn--odanger{border-color:rgba(244,63,94,.45);color:#FB7185}
.dark .tha-btn--odanger:hover{background:rgba(244,63,94,.12);color:#FDA4AF}

/* v2.24.0 - hairline separator inside a card body */
.tha-sep{height:1px;margin:4px 0;background:var(--tha-line-soft)}

/* v2.24.0 - file input styled to match the other controls */
.tha-file{display:block;width:100%;font:12px var(--tha-font);color:var(--tha-muted)}
.tha-file::file-selector-button{margin-right:10px;padding:6px 10px;border:1px solid var(--tha-line);
  border-radius:8px;background:var(--tha-ground);cursor:pointer;
  font:500 12px var(--tha-font);color:var(--tha-ink-2)}
.tha-file::file-selector-button:hover{background:var(--tha-line-soft)}


/* v2.26.0 - analytics: a section head may carry an <h2>, and a grey sub-label
   after the title ("Google Search Console - 28d") */
.tha-cardhead h2{margin:0;font-size:15px;font-weight:600;color:var(--tha-ink)}
.tha-cardhead h2 .sub,.tha-cardhead h3 .sub{margin-left:6px;font-size:12px;font-weight:400;color:var(--tha-muted)}

/* v2.26.0 - delta line under a figure ("+12% vs prev 30d") */
.tha-fig .d{margin-top:4px;font-size:12px;font-weight:600}
.tha-fig .d span{font-weight:400;color:var(--tha-muted)}
.tha-fig .d.up{color:#047857}    .dark .tha-fig .d.up{color:#6EE7B7}
.tha-fig .d.down{color:#E11D48}  .dark .tha-fig .d.down{color:#FB7185}
.tha-fig .d.flat{color:var(--tha-muted)}
.tha-table .tha-upc{color:#047857}
.dark .tha-table .tha-upc{color:#6EE7B7}
.tha-dash-empty.tha-warnish{color:#B45309}
.dark .tha-dash-empty.tha-warnish{color:#FCD34D}

/* v2.26.0 - a mini tile may carry a caption above its number */
.tha-mini .k{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tha-muted)}
.tha-mini .k + b{margin-top:2px}

/* v2.26.0 - segmented control built from links, and one that wraps when the
   range list is long */
.tha-seg a{border:0;background:transparent;padding:5px 12px;border-radius:6px;
  font:500 12.5px var(--tha-font);color:var(--tha-muted);text-decoration:none}
.tha-seg a:hover{color:var(--tha-ink)}
.tha-seg a.tha-on{background:var(--tha-accent);color:#fff}
.tha-seg--wrap{display:inline-flex;flex-wrap:wrap;gap:2px}

/* v2.26.0 - score ring (SEO health), driven by --ring and --deg */
.tha-ring{display:grid;place-content:center;flex:none;width:80px;height:80px;border-radius:999px;
  background:conic-gradient(var(--ring) var(--deg), var(--tha-line-soft) 0)}
.tha-ring .in{display:grid;place-content:center;width:56px;height:56px;border-radius:999px;
  background:var(--tha-surface);font-size:18px;font-weight:700;color:var(--tha-ink)}

/* v2.26.0 - stacked bar rows (traffic-source breakdowns) */
.tha-bars{display:flex;flex-direction:column;gap:10px}
.tha-barhead .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v2.26.0 - sparkline area chart and its end-date captions */
.tha-spark{display:block;width:100%;height:12rem}
.tha-sparkx{display:flex;justify-content:space-between;margin-top:4px;
  font-size:10.5px;color:var(--tha-muted)}

/* v2.26.0 - "Live" badge with a pulsing dot (real-time panel) */
.tha-livetag{display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:#059669}
.dark .tha-livetag{color:#6EE7B7}
.tha-livetag i{position:relative;width:8px;height:8px;border-radius:999px;background:currentColor}
.tha-livetag i::after{content:"";position:absolute;inset:0;border-radius:999px;
  background:currentColor;animation:tha-ping 1.6s cubic-bezier(0,0,.2,1) infinite}
@keyframes tha-ping{75%,100%{transform:scale(2.2);opacity:0}}

/* v2.26.0 - oversized figure (real-time active-visitor count) */
.tha-bignum{font-size:36px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tha-ink)}

/* v2.26.0 - one real-time "page / count" row */
.tha-rtrow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:3px 0;font-size:12px}
.tha-rtrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tha-ink-2)}
.tha-rtrow .n{flex:none;font-weight:600;color:var(--tha-ink)}

/* v2.26.0 - truncating cell text (page paths) */
.tha-trunc{display:block;max-width:20rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.tha-trunc{color:var(--tha-ink);text-decoration:none}
a.tha-trunc:hover{color:var(--tha-accent)}


/* v2.27.0 - reports: larger figure tiles, with the extra value tones the
   report KPIs use and an optional sub-caption under the number */
.tha-figs--lg .v{font-size:24px}
.tha-fig .v.ok{color:#047857}    .dark .tha-fig .v.ok{color:#6EE7B7}
.tha-fig .v.info{color:#0369A1}  .dark .tha-fig .v.info{color:#7DD3FC}
.tha-fig .v.alt{color:#6D28D9}   .dark .tha-fig .v.alt{color:#C4B5FD}
.tha-fig .v.warn{color:#B45309}  .dark .tha-fig .v.warn{color:#FCD34D}
.tha-fig .v.mut{color:var(--tha-ink-2)}
.tha-fig .s{margin-top:3px;font-size:11.5px;color:var(--tha-muted)}

/* v2.27.0 - a card whose body is a chart: the heading and the canvas sit
   directly inside it, so the padding lives on the card */
.tha-chartcard{display:flex;flex-direction:column;padding:18px}
.tha-chart-h{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--tha-ink)}
.tha-chart{position:relative;flex:1;min-height:var(--h,16rem)}

/* v2.27.0 - "good" and "bad" numeric table cells (reports) */
.tha-table .ok{color:#047857}
.dark .tha-table .ok{color:#6EE7B7}


/* v2.27.0 - every <select> in the admin was still drawing the operating
   system's own double-arrow widget, because nothing ever set appearance:none.
   Give them one chevron, drawn by us, in both themes - and cover the legacy
   `.select` class too, so the pages that have not been migrated yet pick the
   same control up without being edited. */
:root{--tha-cal:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");--tha-chev:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E")}
.dark{--tha-cal:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E");--tha-chev:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394A3B8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E")}
.tha-sel,
select.tha-field,
body.tha .tha-filters select,
body.tha select.select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:34px;
  background-image:var(--tha-chev);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px 18px}
/* Firefox still paints a focus ring inside the control; suppress it so our
   own ring is the only one. */
.tha-sel:-moz-focusring,body.tha select.select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--tha-ink)}
.tha-sel::-ms-expand,body.tha select.select::-ms-expand{display:none}
/* A select has no placeholder, so an empty value should still read as muted. */
.tha-sel option{color:var(--tha-ink);background:var(--tha-surface)}

/* v2.27.0 - the legacy `.select` on not-yet-migrated pages gets the shell's
   border, radius, height and focus ring as well, so the two vocabularies look
   the same while the migration finishes. */
body.tha select.select{min-height:38px;border-radius:8px;
  border:1px solid var(--tha-line-ctl);background-color:var(--tha-surface);
  font:14px var(--tha-font);color:var(--tha-ink)}
body.tha select.select:focus{outline:0;border-color:var(--tha-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}


/* v2.28.0 - activity log row: category icon, title and meta line */
.tha-logrow{display:flex;align-items:flex-start;gap:12px}
.tha-logico{display:grid;place-content:center;flex:none;width:32px;height:32px;margin-top:1px;
  border-radius:9px}
.tha-logico svg{width:16px;height:16px}
.tha-logtitle{display:block;font-size:13.5px;font-weight:500;color:var(--tha-ink);text-decoration:none}
.tha-logtitle:hover{color:var(--tha-accent)}
.tha-logmeta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:3px;
  font-size:11px;color:var(--tha-muted)}
.tha-logmeta code{padding:1px 5px;border-radius:4px;background:var(--tha-line-soft);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--tha-ink-2)}
.tha-logmeta .tha-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis}
/* the category chip reuses the icon tints, flattened to a small uppercase pill */
.tha-logcat{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

/* v2.28.0 - shared pagination partial (13 index pages) */
.tha-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:16px;font-size:13px}
.tha-pager .n{color:var(--tha-muted)}


/* v2.28.0 - app.css ships `a:is(.dark *){color:#818CF8;background:#0F172A}`
   (specificity 0,1,1), which outranks every single-class shell rule, so any
   anchor styled as a button or an in-table link turned indigo in dark mode.
   Re-assert the shell colours at matching specificity. */
.dark a.tha-btn{background:var(--tha-surface);color:var(--tha-ink)}
.dark a.tha-btn:hover{background:var(--tha-ground);color:var(--tha-ink)}
.dark a.tha-btn--primary{background:var(--tha-accent);color:#fff}
.dark a.tha-btn--primary:hover{background:var(--tha-accent-dark);color:#fff}
.dark a.tha-btn--danger{background:#DC2626;color:#fff}
.dark a.tha-btn--odanger{background:transparent;color:#FB7185}
.dark a.tha-link{background:transparent;color:var(--tha-accent)}
.dark a.tha-logtitle{background:transparent;color:var(--tha-ink)}
.dark a.tha-logtitle:hover{color:var(--tha-accent)}
.dark a.tha-trunc{background:transparent;color:var(--tha-ink)}
.dark a.tha-trunc:hover{color:var(--tha-accent)}


/* ---- v2.29.0  light-mode contrast + state polish --------------------------
   Measured against WCAG 2.2 AA on the three light backgrounds the admin uses
   (#FFFFFF surface, #F8FAFC ground, #F1F5F9 soft). Only the values below moved;
   the palette itself was already the intended one. */
:root{
  /* disabled text still has to be readable - 4.6:1 on the soft background */
  --tha-disabled-ink:#6B7687;
  --tha-accent-soft:#7FA2EE;
  /* selected row / card lift, so panels read against the #F8FAFC ground
     without leaning on a 1.2:1 hairline alone */
  --tha-sel-bg:#EFF6FF;
  --tha-lift:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06)}
.dark{
  --tha-line-ctl:rgba(148,163,184,.26);--tha-ctl-bg:rgba(15,23,42,.25);
  --tha-disabled-ink:#8A97AA;
  --tha-accent-soft:#3B5FA8;
  --tha-sel-bg:rgba(37,99,235,.14);
  --tha-lift:0 1px 2px rgba(0,0,0,.28)}

/* cards and panels: a soft lift instead of a heavier border */
.tha-sec,.tha-panel,.tha-kpi{box-shadow:var(--tha-lift)}

/* table row states - hover already existed; selected and keyboard focus did not */
.tha-table tbody tr.sel,.tha-table tbody tr[aria-selected="true"]{background:var(--tha-sel-bg)}
.tha-table tbody tr.sel:hover{background:var(--tha-sel-bg)}
.tha-table--zebra tbody tr:nth-child(even){background:var(--tha-ground)}
.tha-table--zebra tbody tr:nth-child(even):hover{background:var(--tha-line-soft)}

/* keyboard focus was invisible on buttons, icon actions, tabs and links */
.tha-btn:focus-visible,.tha-iact:focus-visible,.tha-link:focus-visible,
.tha-tab:focus-visible,.tha-logtitle:focus-visible,.tha-linkbtn:focus-visible{
  outline:2px solid var(--tha-accent);outline-offset:2px}

/* placeholder text sits on the surface, so it may use the muted token, but it
   must not be lighter than it */
.tha-in::placeholder,.tha-ta::placeholder,.tha-field input::placeholder{
  color:var(--tha-muted);opacity:1}

/* control borders darken on hover so the hit area is obvious before focus */
.tha-in:hover:not(:disabled),.tha-ta:hover:not(:disabled),
.tha-sel:hover:not(:disabled){border-color:var(--tha-ink-2)}

/* ---- v2.30.0  form controls: filled, not outlined ------------------------
   v2.29.0 raised every control border to 3:1 (#848FA0) for WCAG 2.2 SC 1.4.11.
   It passed the check but read as a hard outline around every field. A filled
   control carries the same information - the field is told apart from the card
   by its own surface - so the border drops back to a soft hairline and the
   fill does the work. The boundary still has a visible edge at rest, and
   hover / focus escalate it. */
.tha-in,.tha-ta,.tha-sel,
input.tha-field,textarea.tha-field,select.tha-field,
body.tha select.select,
body.tha .tha-filters select,body.tha .tha-filters input[type=date]{
  border-color:var(--tha-line-ctl);
  background-color:var(--tha-ctl-bg);
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
.tha-field{border-color:var(--tha-line-ctl);background:var(--tha-ctl-bg)}

/* hover lifts the field off the card; focus is the only state that uses accent */
.tha-in:hover:not(:disabled),.tha-ta:hover:not(:disabled),
.tha-sel:hover:not(:disabled),body.tha select.select:hover:not(:disabled),
.tha-field:hover{border-color:#C6D0DC;background-color:var(--tha-surface)}
.dark .tha-in:hover:not(:disabled),.dark .tha-ta:hover:not(:disabled),
.dark .tha-sel:hover:not(:disabled),.dark .tha-field:hover{
  border-color:rgba(148,163,184,.42);background-color:rgba(148,163,184,.12)}

/* the hover rule above carries :not(:disabled), so focus has to match that
   specificity or a hovered+focused field keeps the hover border. */
.tha-in:focus:not(:disabled),.tha-ta:focus:not(:disabled),.tha-sel:focus:not(:disabled),
input.tha-field:focus:not(:disabled),textarea.tha-field:focus:not(:disabled),
select.tha-field:focus:not(:disabled),body.tha select.select:focus:not(:disabled),
.tha-field:focus-within:not(:disabled){
  background-color:var(--tha-surface);
  border-color:var(--tha-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}

/* v2.30.0 - form rhythm: labels sit closer to their control, rows share one
   gap, and every control is the same height so a two-column row lines up. */
.tha-in,.tha-ta,.tha-sel,
input.tha-field,select.tha-field{min-height:40px}
.tha-sel{height:40px}
.tha-lbl{margin-bottom:6px;letter-spacing:.005em}
.tha-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
@media (max-width:720px){.tha-fgrid{grid-template-columns:minmax(0,1fr)}}
.tha-fgrid--full{grid-column:1/-1}
.tha-frow + .tha-frow{margin-top:16px}

/* ---- v2.31.0  last four views -------------------------------------------- */

/* inline result text beside a form action (Download Center connection test) */
.tha-ok{color:#047857}   .dark .tha-ok{color:#6EE7B7}
.tha-bad{color:#E11D48}  .dark .tha-bad{color:#FB7185}

/* Tailwind preflight strips list markers, so draw them back for prose bullets */
.tha-bullets{margin:8px 0 0;padding:0 0 0 18px;list-style:disc;
  font-size:12.5px;line-height:1.7;color:var(--tha-muted)}
.tha-bullets li{margin:0}
.tha-bullets b{color:var(--tha-ink-2)}

/* fixed-width sidebar + flexible body (Cron Log file picker) */
.tha-splitgrid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){.tha-splitgrid{grid-template-columns:minmax(0,1fr)}}

/* the file picker list itself */
.tha-filelist{margin:0;padding:0;list-style:none;max-height:70vh;overflow-y:auto}
.tha-filelist > li + li{border-top:1px solid var(--tha-line-soft)}
.tha-filelist-empty{padding:16px;font-size:13px;color:var(--tha-muted)}
.tha-fileitem{display:block;padding:11px 16px;text-decoration:none;
  border-left:2px solid transparent;transition:background-color .12s ease}
.tha-fileitem:hover{background:var(--tha-line-soft)}
.tha-fileitem .r{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tha-fileitem .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:500;color:var(--tha-ink-2)}
.tha-fileitem .sz{flex:none;font-size:11px;color:var(--tha-muted)}
.tha-fileitem .mt{margin-top:2px;font-size:11px;color:var(--tha-muted)}
.tha-fileitem--on{background:var(--tha-active-bg);border-left-color:var(--tha-accent)}
.tha-fileitem--on .nm{color:var(--tha-active-ink)}
.dark a.tha-fileitem{background:transparent}
.dark a.tha-fileitem:hover{background:rgba(148,163,184,.1)}
.dark a.tha-fileitem--on{background:var(--tha-active-bg)}

/* raw log output - always the dark terminal slab, in either theme */
.tha-logpre{margin:0;max-height:70vh;height:100%;overflow:auto;padding:16px;
  background:#0B1220;color:#E2E8F0;white-space:pre-wrap;word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.65}

/* muted variant of the inline link-button (Languages row actions) */
.tha-linkbtn--mut{color:var(--tha-muted)}
.tha-linkbtn--mut:hover{color:var(--tha-ink-2)}

/* ---- v2.32.0  form controls: white, soft, rounded ------------------------
   Follows the reference the author supplied: a white field, a very light
   hairline and a rounder, taller box. This drops the v2.30.0 grey fill. */
.tha-in,.tha-ta,.tha-sel,
input.tha-field,textarea.tha-field,select.tha-field,
body.tha select.select,
body.tha .tha-filters select,body.tha .tha-filters input[type=date],
.tha-field{
  border-radius:10px;
  border-color:var(--tha-line-ctl);
  background-color:var(--tha-ctl-bg)}
.tha-in,.tha-ta,.tha-sel,
input.tha-field,select.tha-field,.tha-field{min-height:44px}
.tha-sel{height:44px}
.tha-in--sm{min-height:38px;height:auto;border-radius:9px}

/* hover only deepens the hairline now that the rest state is already white */
.tha-in:hover:not(:disabled),.tha-ta:hover:not(:disabled),
.tha-sel:hover:not(:disabled),body.tha select.select:hover:not(:disabled),
.tha-field:hover{border-color:#CBD5E1;background-color:var(--tha-ctl-bg)}
.dark .tha-in:hover:not(:disabled),.dark .tha-ta:hover:not(:disabled),
.dark .tha-sel:hover:not(:disabled),.dark .tha-field:hover{
  border-color:rgba(148,163,184,.42);background-color:var(--tha-ctl-bg)}

/* ---- v2.34.0  one dropdown, everywhere ----------------------------------
   Selects were still arriving in three shapes: , the legacy
   , and in a few un-migrated views a bare <select> with no
   class at all, which fell through to the browser's own widget. Style the
   ELEMENT so every dropdown in the admin is the same box, whatever markup
   the view happens to use. Multi-selects and list boxes keep their own
   intrinsic height. */
body.tha select:not([multiple]):not([size]){
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  box-sizing:border-box;
  width:auto;height:44px;min-height:44px;
  padding:9px 34px 9px 12px;
  border:1px solid var(--tha-line-ctl);
  border-radius:10px;
  background-color:var(--tha-ctl-bg);
  background-image:var(--tha-chev);
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px 18px;
  font:14px var(--tha-font);
  color:var(--tha-ink);
  line-height:normal;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
/* Width comes from the layout, not from the element — but it has to be stated
   at the same specificity as the base rule above. `:not([multiple]):not([size])`
   counts both attribute selectors, so (0,3,2) was quietly beating the (0,2,2)
   layout rules and every select in a form grid rendered shrink-to-fit, next to
   full-width text inputs. */
body.tha select.tha-sel:not([multiple]):not([size]),
body.tha select.select:not([multiple]):not([size]),
body.tha .tha-fgrid select:not([multiple]):not([size]),
body.tha .tha-frow select:not([multiple]):not([size]){width:100%}
body.tha .tha-filters select:not([multiple]):not([size]),
body.tha .tha-inline select:not([multiple]):not([size]){width:auto}
body.tha select:not([multiple]):not([size]):hover:not(:disabled){border-color:#CBD5E1}
.dark body.tha select:not([multiple]):not([size]):hover:not(:disabled){border-color:rgba(148,163,184,.42)}
body.tha select:not([multiple]):not([size]):focus:not(:disabled){
  outline:0;background-color:var(--tha-surface);
  border-color:var(--tha-accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
body.tha select:not([multiple]):not([size]):disabled{
  background-color:var(--tha-line-soft);color:var(--tha-disabled-ink);cursor:not-allowed}
body.tha select option{color:var(--tha-ink);background:var(--tha-surface)}

/* date inputs sit beside selects in filter bars, so they match too */
body.tha .tha-filters input[type=date],body.tha .tha-filters .tha-in{
  min-height:44px;border-radius:10px}

/* v2.34.0 - several filter bars use an Alpine combobox: a <button class="select">
   that draws its own chevron. The element rule above cannot reach it, so it was
   still 36px / 6px radius next to a 44px native select. Same box, no background
   chevron (it has its own icon inside). */
body.tha button.select,body.tha .tha-pick-btn{
  box-sizing:border-box;
  min-height:44px;height:44px;
  padding:9px 12px;
  border:1px solid var(--tha-line-ctl);
  border-radius:10px;
  background-color:var(--tha-ctl-bg);
  background-image:none;
  font:14px var(--tha-font);
  color:var(--tha-ink);
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
body.tha button.select:hover:not(:disabled),
body.tha .tha-pick-btn:hover:not(:disabled){border-color:#CBD5E1}
.dark body.tha button.select:hover:not(:disabled){border-color:rgba(148,163,184,.42)}
body.tha button.select:focus-visible,body.tha .tha-pick-btn:focus-visible{
  outline:0;border-color:var(--tha-accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
/* legacy text input in the same bars */
body.tha input.input:not([type=checkbox]):not([type=radio]){
  box-sizing:border-box;min-height:44px;border-radius:10px;
  border:1px solid var(--tha-line-ctl);background-color:var(--tha-ctl-bg);
  font:14px var(--tha-font);color:var(--tha-ink)}
body.tha input.input:focus{outline:0;border-color:var(--tha-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}

/* v2.34.0 - a 40px button beside a 44px control reads as a misalignment */
body.tha .tha-filters .tha-btn,body.tha .tha-filters button[type=submit]{height:44px}

/* v2.34.0 - the page ground was #F8FAFC, a half-step off white, so white cards
   barely separated from it. Deepened to #EEF1F6. Controls keep a white fill
   (--tha-ctl-bg), so fields now read against the page as well as the card.
   Table headers share --tha-ground and pick up the same tint. */
body.tha .tha-main,body.tha{background:var(--tha-ground)}
.tha-table thead tr{background:var(--tha-line-soft)}
.tha-btn:hover{background:var(--tha-line-soft)}

/* v2.35.0 - "or" divider between two alternative actions in a dialog */
.tha-orsep{display:flex;align-items:center;gap:8px;margin:10px 0;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--tha-muted)}
.tha-orsep .ln{flex:1;height:1px;background:var(--tha-line)}

/* ---- v2.36.0  filter bar: dropdowns and date pickers --------------------
   The leads filter row showed the problem: seven selects each sized to their
   own longest option, so the row read as a ragged set of unrelated boxes, and
   two date inputs that kept the browser's bare dd/mm/yyyy spinner with no
   icon and no visible affordance. */

/* one predictable width band for filter dropdowns, instead of shrink-to-fit */
body.tha .tha-filters select:not([multiple]):not([size]),
body.tha .tha-filters button.select,
body.tha .tha-sel--filter{
  flex:0 0 auto;width:13rem;min-width:13rem;max-width:13rem;
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
body.tha .tha-filters button.select{justify-content:space-between}

/* date inputs: same box as every other control, with a calendar affordance
   and a readable value instead of the pale tri-colour spinner */
body.tha input[type=date],body.tha input[type=datetime-local],body.tha input[type=month]{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  min-width:11rem;height:44px;min-height:44px;
  padding:9px 36px 9px 12px;
  border:1px solid var(--tha-line-ctl);border-radius:10px;
  background-color:var(--tha-ctl-bg);
  background-image:var(--tha-cal);
  background-repeat:no-repeat;background-position:right 11px center;background-size:17px 17px;
  font:14px var(--tha-font);color:var(--tha-ink);
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
body.tha input[type=date]:hover:not(:disabled){border-color:#CBD5E1}
body.tha input[type=date]:focus:not(:disabled){
  outline:0;border-color:var(--tha-accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
/* the native parts: hide the duplicate indicator, tidy the segments */
body.tha input[type=date]::-webkit-calendar-picker-indicator{
  position:absolute;right:0;width:36px;height:100%;margin:0;padding:0;
  opacity:0;cursor:pointer}
body.tha input[type=date]{position:relative}
body.tha input[type=date]::-webkit-datetime-edit{color:var(--tha-ink)}
body.tha input[type=date]::-webkit-datetime-edit-text{padding:0 2px;color:var(--tha-muted)}
body.tha input[type=date]::-webkit-datetime-edit-day-field,
body.tha input[type=date]::-webkit-datetime-edit-month-field,
body.tha input[type=date]::-webkit-datetime-edit-year-field{color:var(--tha-ink)}
body.tha input[type=date]:in-range::-webkit-datetime-edit-year-field,
body.tha input[type=date]:in-range::-webkit-datetime-edit-month-field,
body.tha input[type=date]:in-range::-webkit-datetime-edit-day-field{color:var(--tha-ink)}
/* an empty date field should read as a placeholder, not as a live value */
body.tha input[type=date]:not(:focus):invalid::-webkit-datetime-edit{color:var(--tha-muted)}

/* the row itself: even gaps, aligned baselines, no orphan on its own line */
body.tha .tha-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* v2.36.0 - an older rule scoped `.tha-filters input[type=date]` (0,3,2)
   outranks the element rule above (0,2,2), so the calendar glyph and padding
   never landed inside a filter bar. Restate at matching specificity. */
body.tha .tha-filters input[type=date],
body.tha .tha-filters input[type=datetime-local],
body.tha .tha-inline input[type=date]{
  padding:9px 36px 9px 12px;
  background-image:var(--tha-cal);
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:17px 17px;
  border-radius:10px;min-height:44px;height:44px}

/* v2.37.0 - width modifiers for the tha_select() component, so a view asks for
   a role ("filter", "full") instead of inventing an inline max-width. An
   inline style beats the stylesheet, which is exactly how two dropdowns in the
   same filter bar ended up different widths. */
body.tha .tha-sel--full{width:100%;max-width:none;min-width:0;flex:1 1 auto}

/* v2.42.0 — date picker. The native <input type=date> popup is drawn by the
   browser and cannot be styled, so a readable calendar means our own. The
   original input stays in the DOM as a hidden field: its name, value, x-model
   and @change keep working, and no view had to change. */
body.tha .tha-dp{position:relative;display:inline-flex}
body.tha .tha-dp-btn{display:inline-flex;align-items:center;gap:8px;justify-content:space-between;
  box-sizing:border-box;min-height:44px;height:44px;padding:9px 12px;
  border:1px solid var(--tha-line-ctl);border-radius:10px;background:var(--tha-ctl-bg);
  font:14px var(--tha-font);color:var(--tha-ink);cursor:pointer;text-align:left;
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease}
body.tha .tha-dp-btn:hover:not(:disabled){border-color:#CBD5E1}
body.tha .tha-dp-btn[aria-expanded="true"],body.tha .tha-dp-btn:focus-visible{
  outline:none;border-color:var(--tha-accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
body.tha .tha-dp-btn .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.tha .tha-dp-btn .v.ph{color:var(--tha-muted)}
body.tha .tha-dp-btn svg{width:17px;height:17px;flex:none;color:var(--tha-muted)}
body.tha .tha-filters .tha-dp{flex:0 0 auto}
body.tha .tha-filters .tha-dp,body.tha .tha-filters .tha-dp .tha-dp-btn,
body.tha .tha-dp--filter,body.tha .tha-dp--filter .tha-dp-btn{width:13rem;min-width:13rem;max-width:13rem}
body.tha .tha-dp--full,body.tha .tha-dp--full .tha-dp-btn{width:100%;min-width:0;max-width:none}

body.tha .tha-dp-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:268px;padding:12px;
  border:1px solid var(--tha-line);border-radius:14px;background:var(--tha-surface);
  box-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06)}
.dark body.tha .tha-dp-pop,.dark .tha-dp-pop{box-shadow:0 12px 32px rgba(0,0,0,.5)}
body.tha .tha-dp-pop.up{top:auto;bottom:calc(100% + 6px)}
body.tha .tha-dp-pop.right{left:auto;right:0}
body.tha .tha-dp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
body.tha .tha-dp-title{flex:1;padding:5px 8px;border:0;border-radius:8px;background:transparent;
  font:600 14px var(--tha-font);color:var(--tha-ink);cursor:pointer;text-align:center}
body.tha .tha-dp-title:hover{background:var(--tha-line-soft)}
body.tha .tha-dp-nav{display:grid;place-content:center;width:30px;height:30px;flex:none;
  border:0;border-radius:8px;background:transparent;color:var(--tha-ink-2);cursor:pointer}
body.tha .tha-dp-nav:hover{background:var(--tha-line-soft)}
body.tha .tha-dp-nav svg{width:16px;height:16px}
body.tha .tha-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
body.tha .tha-dp-dow{padding:4px 0;font-size:11px;font-weight:600;color:var(--tha-muted);text-align:center}
body.tha .tha-dp-day{height:34px;border:0;border-radius:9px;background:transparent;
  font:14px var(--tha-font);color:var(--tha-ink);cursor:pointer}
body.tha .tha-dp-day:hover:not(:disabled){background:var(--tha-line-soft)}
body.tha .tha-dp-day.out{color:var(--tha-muted);opacity:.55}
body.tha .tha-dp-day.today{box-shadow:inset 0 0 0 1px var(--tha-accent-soft);font-weight:600}
body.tha .tha-dp-day.on,body.tha .tha-dp-day.on:hover{background:var(--tha-accent);color:#fff;font-weight:600}
body.tha .tha-dp-day:disabled{color:var(--tha-disabled-ink);opacity:.4;cursor:not-allowed}
body.tha .tha-dp-day:focus-visible{outline:2px solid var(--tha-accent);outline-offset:-2px}
body.tha .tha-dp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
body.tha .tha-dp-months button{height:40px;border:0;border-radius:9px;background:transparent;
  font:14px var(--tha-font);color:var(--tha-ink);cursor:pointer}
body.tha .tha-dp-months button:hover{background:var(--tha-line-soft)}
body.tha .tha-dp-months button.on{background:var(--tha-accent);color:#fff;font-weight:600}
body.tha .tha-dp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--tha-line-soft)}
body.tha .tha-dp-foot button{border:0;background:transparent;padding:4px 6px;border-radius:7px;
  font:600 12.5px var(--tha-font);color:var(--tha-accent);cursor:pointer}
body.tha .tha-dp-foot button:hover{background:var(--tha-sel-bg)}
body.tha .tha-dp-foot .clr{color:var(--tha-muted)}

/* v2.46.0 — the country combobox is absolutely positioned inside a card, and
   every card clips (overflow:hidden gives it its rounded corners), so the
   open list was cut off at the card edge. Un-clip only while one is open. */
.tha-sec:has(.tha-cs-open),.tha-panel:has(.tha-cs-open),
.tha-cardbody:has(.tha-cs-open),.tha-fgrid:has(.tha-cs-open){overflow:visible}
.tha-cs-pop{position:absolute;z-index:40;left:0;top:calc(100% + 5px);width:100%;
  border:1px solid var(--tha-line);border-radius:12px;background:var(--tha-surface);
  box-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);overflow:hidden}
.dark .tha-cs-pop{box-shadow:0 12px 32px rgba(0,0,0,.5)}
.tha-cs-search{padding:8px;border-bottom:1px solid var(--tha-line-soft)}
.tha-cs-list{max-height:260px;overflow-y:auto;padding:4px 0}
.tha-cs-group{padding:8px 12px 4px;font-size:10px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tha-muted)}
.tha-cs-opt{display:flex;width:100%;align-items:center;gap:8px;padding:7px 12px;border:0;
  background:transparent;font:14px var(--tha-font);color:var(--tha-ink);text-align:left;cursor:pointer}
.tha-cs-opt.on{background:var(--tha-sel-bg);color:var(--tha-accent);font-weight:600}
.tha-cs-opt svg{width:15px;height:15px;flex:none;color:var(--tha-accent)}
.tha-cs-opt .sp{width:15px;flex:none}
.tha-cs-none{padding:14px 12px;text-align:center;font-size:12.5px;color:var(--tha-muted)}
.tha-cs-clear{display:flex;width:100%;align-items:center;gap:7px;padding:9px 12px;border:0;
  border-top:1px solid var(--tha-line-soft);background:transparent;
  font:13px var(--tha-font);color:var(--tha-muted);text-align:left;cursor:pointer}
.tha-cs-clear:hover{background:var(--tha-line-soft);color:var(--tha-ink-2)}

/* Accent switch. The one on the customer form was emerald, which reads as a
   status colour rather than "this control is on". */
.tha-switch{position:relative;display:inline-flex;flex:none;width:44px;height:24px;padding:0;
  border:0;border-radius:999px;background:var(--tha-line);cursor:pointer;
  transition:background-color .15s ease}
.tha-switch[aria-checked="true"]{background:var(--tha-accent)}
.tha-switch:focus-visible{outline:2px solid var(--tha-accent);outline-offset:2px}
.tha-switch .kn{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);transition:transform .15s ease}
.tha-switch[aria-checked="true"] .kn{transform:translateX(20px)}
.tha-switchrow{display:flex;align-items:center;gap:10px;margin-top:6px}
.tha-switchrow .lb{font-size:13.5px;color:var(--tha-ink-2)}

/* v2.46.0 - shared breadcrumb trail. Pages were each inventing their own
   (.tk-crumbs and friends); this is the one the shell owns. */
.tha-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px;
  font-size:12.5px;color:var(--tha-muted)}
.tha-crumbs span[aria-current]{color:var(--tha-ink-2);font-weight:500}
.tha-crumbs a{color:var(--tha-muted);text-decoration:none}
.tha-crumbs a:hover{color:var(--tha-accent);text-decoration:underline}
.dark .tha-crumbs a{color:var(--tha-muted);background:transparent}
.dark .tha-crumbs a:hover{color:var(--tha-link-dark);background:transparent}

/* v2.47.0 - wizard shell. A form long enough to need tabs is really a sequence,
   so it gets a step rail instead: the rail says where you are and what is left,
   the card holds only the current step. Full page width, not the 768px column. */
.tha-wiz{display:grid;gap:18px;align-items:start}
.tha-sitepill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--tha-active-bg);color:var(--tha-active-ink);white-space:nowrap;vertical-align:middle}
.tha-sitepill i{width:7px;height:7px;border-radius:50%;background:var(--tha-accent)}
.tha-sitepill em{font-style:normal;font-weight:500;opacity:.75;font-family:ui-monospace,Menlo,monospace;font-size:11px}
@media(min-width:1024px){.tha-wiz{grid-template-columns:260px minmax(0,1fr)}}
.tha-wizrail{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid var(--tha-line);
  border-radius:14px;background:var(--tha-surface);box-shadow:var(--tha-lift)}
@media(max-width:1023px){.tha-wizrail{flex-direction:row;gap:6px;overflow-x:auto;padding:10px}}
.tha-stp{display:flex;align-items:flex-start;gap:11px;width:100%;padding:10px 11px;border:0;border-radius:10px;
  background:transparent;text-align:left;cursor:pointer;font:inherit}
.tha-stp:hover{background:var(--tha-line-soft)}
.tha-stp.on{background:var(--tha-sel-bg)}
.tha-stp .n{display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--tha-line);color:var(--tha-muted);
  font-size:12px;font-weight:700;line-height:1}
.tha-stp.on .n{background:var(--tha-accent);color:#fff}
.tha-stp.done .n{background:#16A34A;color:#fff}
.tha-stp .tx{min-width:0}
.tha-stp .t{display:block;font-size:13.5px;font-weight:600;color:var(--tha-ink-2);white-space:nowrap}
.tha-stp.on .t{color:var(--tha-accent)}
.tha-stp .d{display:block;margin-top:2px;font-size:11.5px;color:var(--tha-muted)}
@media(max-width:1023px){.tha-stp .d{display:none}}
.dark .tha-stp.on{background:rgba(37,99,235,.18)}
.dark .tha-stp .n{background:#263349}
.tha-wizfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-top:1px solid var(--tha-line);background:var(--tha-line-soft)}
.dark .tha-wizfoot{background:rgba(148,163,184,.06)}
.tha-wizfoot .r{display:flex;align-items:center;gap:10px}
.tha-stepno{font-size:12.5px;color:var(--tha-muted)}

/* ── v2.53.0  button colours, re-asserted ───────────────────────────────────
   Two inverse failures were showing on the same build: a primary <a> rendered
   white-on-white ("New invoice"), and a disabled primary <button> rendered
   grey-on-blue ("Create Order"). Both come from the variant rules sitting at
   (0,1,0)-(0,1,1), where they lose to app.css element rules and to the shell's
   own .tha-btn:hover, depending on element type and state.

   The fix is specificity, not !important: name the element and scope to
   body.tha so every rule below is (0,2,1) or higher, and order them
   base -> variant -> hover -> disabled so the cascade resolves the way the
   design intends. Both <a> and <button> are listed because an anchor cannot
   be :disabled and a button is not matched by the a: rules. */
body.tha a.tha-btn,body.tha button.tha-btn{
  background:var(--tha-surface);color:var(--tha-ink);border-color:var(--tha-line)}
body.tha a.tha-btn:hover,body.tha button.tha-btn:hover:not(:disabled){
  background:var(--tha-ground);color:var(--tha-ink)}

body.tha a.tha-btn--primary,body.tha button.tha-btn--primary{
  border-color:transparent;background:var(--tha-accent);color:#fff}
body.tha a.tha-btn--primary:hover,body.tha button.tha-btn--primary:hover:not(:disabled){
  background:var(--tha-accent-dark);color:#fff}

body.tha a.tha-btn--danger,body.tha button.tha-btn--danger{
  border-color:transparent;background:#DC2626;color:#fff}
body.tha a.tha-btn--danger:hover,body.tha button.tha-btn--danger:hover:not(:disabled){
  background:#B91C1C;color:#fff}

body.tha a.tha-btn--odanger,body.tha button.tha-btn--odanger{
  background:var(--tha-surface);border-color:#FDA4AF;color:#E11D48}
body.tha a.tha-btn--odanger:hover,body.tha button.tha-btn--odanger:hover:not(:disabled){
  background:#FFF1F2;border-color:#FB7185;color:#BE123C}

body.tha a.tha-btn--dark,body.tha button.tha-btn--dark{
  border-color:transparent;background:#0F172A;color:#fff}
body.tha a.tha-btn--dark:hover,body.tha button.tha-btn--dark:hover:not(:disabled){
  background:#1E293B;color:#fff}

/* Disabled last, and with :hover covered, so nothing paints the live fill back
   under the cursor. White on the accent tint is 2.6:1, hence the darker label. */
body.tha button.tha-btn:disabled,body.tha .tha-btn[aria-disabled="true"]{
  cursor:not-allowed;border-color:var(--tha-line);
  background:var(--tha-line-soft);color:var(--tha-disabled-ink);box-shadow:none}
body.tha button.tha-btn--primary:disabled,body.tha .tha-btn--primary[aria-disabled="true"],
body.tha button.tha-btn--primary:disabled:hover,body.tha .tha-btn--primary[aria-disabled="true"]:hover{
  background:var(--tha-sel-bg);color:var(--tha-disabled-ink);
  box-shadow:inset 0 0 0 1px var(--tha-line-ctl)}
body.tha button.tha-btn--danger:disabled,body.tha button.tha-btn--danger:disabled:hover{
  background:var(--tha-line-soft);color:var(--tha-disabled-ink);box-shadow:none}

.dark body.tha button.tha-btn:disabled,.dark body.tha .tha-btn[aria-disabled="true"]{
  background:rgba(148,163,184,.14);color:var(--tha-disabled-ink)}
.dark body.tha button.tha-btn--primary:disabled,.dark body.tha .tha-btn--primary[aria-disabled="true"],
.dark body.tha button.tha-btn--primary:disabled:hover{
  background:rgba(37,99,235,.22);color:#C7D2FE;box-shadow:none}
.dark body.tha a.tha-btn--odanger,.dark body.tha button.tha-btn--odanger{
  background:transparent;border-color:#9F1239;color:#FB7185}
.dark body.tha a.tha-btn--odanger:hover,.dark body.tha button.tha-btn--odanger:hover:not(:disabled){
  background:rgba(225,29,72,.12);color:#FDA4AF}

/* Focus ring: keyboard users had nothing on a primary, whose own border is
   transparent, so the default outline fell on an invisible edge. */
body.tha .tha-btn:focus-visible{outline:2px solid var(--tha-accent);outline-offset:2px}
body.tha .tha-btn--primary:focus-visible{outline-color:var(--tha-accent-dark)}

/* ── v2.54.0  search dropdown ───────────────────────────────────────────────
   The product and customer pickers rendered as a flat white slab that hung off
   the bottom of its card with nothing tying it to the field it belongs to, and
   the last visible row was sliced through the middle of its text so the list
   looked broken rather than scrollable. */

/* An open popup must not be clipped by the card it lives in. Mirrors the
   .tha-cs-open rule the country combobox already uses. */
.tha-sec:has(.tha-dropopen),.tha-panel:has(.tha-dropopen),
.tha-cardbody:has(.tha-dropopen),.tha-tablewrap:has(.tha-dropopen){overflow:visible}

body.tha .tha-drop{
  margin-top:6px;border-radius:10px;border-color:var(--tha-line-ctl);
  /* Two shadows: a tight one to read as a lifted edge against the white card,
     and a wide soft one so the panel separates from the page behind it where
     it overhangs the card. One shadow could not do both. */
  box-shadow:0 1px 2px rgba(15,23,42,.08),0 12px 32px rgba(15,23,42,.18);
  /* A whole number of 44px rows plus the list's own padding, so the list ends
     on a row boundary instead of bisecting one. */
  max-height:min(360px,60vh)}
.dark body.tha .tha-drop{
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.5)}

/* Contain the scroll so flicking through a long product list does not start
   scrolling the page the moment the list bottoms out. */
body.tha .tha-drop ul{padding:6px;overscroll-behavior:contain;scroll-padding:6px 0}
body.tha .tha-drop li + li{border-top:1px solid var(--tha-line-soft)}

body.tha .tha-drop-i{
  min-height:44px;padding:8px 10px;border-radius:7px;gap:16px}
body.tha .tha-drop-i:hover{background:var(--tha-line-soft)}
/* Keyboard focus needs its own, stronger state: hover follows the mouse and the
   two are often on different rows at once. */
body.tha .tha-drop-i.on,body.tha .tha-drop-i:focus-visible{
  outline:0;background:var(--tha-sel-bg);box-shadow:inset 0 0 0 1px var(--tha-accent-soft)}
body.tha .tha-drop-i.on .nm{color:var(--tha-accent)}
.dark body.tha .tha-drop-i.on .nm{color:var(--tha-active-ink)}
body.tha .tha-drop-i .rt{font-variant-numeric:tabular-nums}

/* Count strip, so a capped list says so rather than silently hiding matches. */
.tha-drop-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 12px;border-bottom:1px solid var(--tha-line-soft);background:var(--tha-ground);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tha-muted)}
.tha-drop-h .k{font-weight:500;letter-spacing:0;text-transform:none}
.tha-drop-h kbd{padding:1px 5px;border:1px solid var(--tha-line);border-radius:4px;
  background:var(--tha-surface);font:inherit;font-size:10px;color:var(--tha-ink-2)}
/* The select-like trigger: its label kept coming out centred on live even
   though .tha-pick-btn sets text-align:left — a <button> is text-align:center
   by UA default and that single class is easy to outrank. Name the element and
   scope to body.tha so it cannot lose, and give it the same chevron and 44px
   control height as a real select so the two read as one control family. */
/* display:block, NOT flex. On a <button> Chrome wraps the children in an
   anonymous content box, and app.css gives buttons justify-content:center,
   so as a flex container the wrapper centres and the child never grows —
   measured at 135px inside a 1190px button. That is the centred
   "- select customer -" label. Block layout plus padding does the job. */
body.tha button.tha-pick-btn{
  display:block;min-height:44px;text-align:left;padding:11px 12px;line-height:20px;
  border-color:var(--tha-line-ctl);background:var(--tha-ctl-bg);
  background-image:var(--tha-chev);background-repeat:no-repeat;
  background-position:right 12px center;padding-right:38px}
body.tha button.tha-pick-btn > *{display:block;min-width:0;text-align:left}
body.tha button.tha-pick-btn:hover{border-color:#C6D0DC;background-color:var(--tha-surface)}
body.tha button.tha-pick-btn:focus-visible{outline:0;border-color:var(--tha-accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.dark body.tha button.tha-pick-btn:hover{border-color:rgba(148,163,184,.4)}

/* ── v2.56.0  customer picker modal ─────────────────────────────────────────
   A two-pane dialog: a searchable list on the left, a preview of the
   highlighted customer on the right. The preview is the point — picking the
   wrong Perera out of four is the failure this screen exists to prevent, and
   an email address alone does not tell them apart.

   Below 900px the preview pane is dropped rather than stacked. On a phone a
   second pane under a scrolling list is read by nobody and costs the list its
   height; the agent taps a row and confirms from the selected card instead. */
.tha-dlg--wide{max-width:980px}
.tha-pickwrap{display:grid;grid-template-columns:1fr 320px;gap:0;min-height:0;flex:1}
.tha-pickwrap > *{min-width:0;min-height:0}
.tha-pickmain{display:flex;flex-direction:column;min-height:0}
.tha-pickprev{display:flex;flex-direction:column;min-height:0;overflow-y:auto;
  border-left:1px solid var(--tha-line);background:var(--tha-ground);padding:16px}
@media (max-width:900px){
  .tha-pickwrap{grid-template-columns:1fr}
  .tha-pickprev{display:none}
}

/* Search row sits above the scroll area, so it stays put while the list moves. */
.tha-pickbar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--tha-line)}
.tha-pickbar .tha-in{flex:1}

.tha-picktabs{display:flex;gap:2px;padding:8px 16px 0}
.tha-picktab{appearance:none;border:0;background:none;cursor:pointer;
  padding:7px 12px;border-radius:8px 8px 0 0;font:inherit;font-size:13px;font-weight:500;
  color:var(--tha-muted);border-bottom:2px solid transparent}
.tha-picktab:hover{color:var(--tha-ink)}
.tha-picktab[aria-selected="true"]{color:var(--tha-accent);border-bottom-color:var(--tha-accent);
  background:var(--tha-ground)}
.dark .tha-picktab[aria-selected="true"]{color:var(--tha-active-ink);border-bottom-color:var(--tha-accent-soft)}

.tha-picklist{flex:1;min-height:0;overflow-y:auto;padding:6px;overscroll-behavior:contain;
  scroll-padding:6px 0}

/* One customer row. A button, not a div: keyboard and screen readers get the
   same affordance the mouse does, for free. */
.tha-pickrow{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;
  width:100%;appearance:none;cursor:pointer;text-align:left;font:inherit;
  padding:9px 10px;border:1px solid transparent;border-radius:9px;background:none;color:var(--tha-ink)}
.tha-pickrow + .tha-pickrow{margin-top:1px}
.tha-pickrow:hover{background:var(--tha-ground)}
.tha-pickrow.on,.tha-pickrow:focus-visible{outline:0;background:var(--tha-sel-bg);
  border-color:var(--tha-accent-soft)}
.dark .tha-pickrow.on,.dark .tha-pickrow:focus-visible{background:rgba(37,99,235,.18)}
.tha-pickrow[aria-selected="true"]{border-color:var(--tha-accent)}

.tha-pickav{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:999px;background:var(--tha-line-soft);color:var(--tha-ink-2);
  font-size:12px;font-weight:600;letter-spacing:.02em}
.tha-pickrow.on .tha-pickav{background:var(--tha-accent);color:#fff}

.tha-pickid{min-width:0}
.tha-pickid .nm{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tha-pickid .sub{margin-top:1px;font-size:12px;color:var(--tha-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tha-pickid .sub .sep{opacity:.5;margin:0 5px}

.tha-pickmeta{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tha-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Favourite star. Transparent until hovered or set, so twelve rows of grey
   stars don't compete with the names. */
.tha-pickstar{appearance:none;border:0;background:none;cursor:pointer;padding:3px;
  border-radius:6px;line-height:0;color:var(--tha-line-ctl)}
.tha-pickstar:hover{background:var(--tha-line-soft);color:var(--tha-ink-2)}
.tha-pickstar.on{color:#F59E0B}
.tha-pickstar:focus-visible{outline:2px solid var(--tha-accent);outline-offset:1px}

/* Loading skeleton. Same geometry as a real row so the list does not jump when
   the data lands. */
.tha-pickskel{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;
  padding:9px 10px}
.tha-pickskel + .tha-pickskel{margin-top:1px}
.tha-pickskel i{display:block;border-radius:999px;background:var(--tha-line-soft);
  animation:tha-pulse 1.3s ease-in-out infinite}
.tha-pickskel i:first-child{width:36px;height:36px}
.tha-pickskel div{display:grid;gap:5px}
.tha-pickskel div i:first-child{width:45%;height:10px;border-radius:4px}
.tha-pickskel div i:last-child{width:70%;height:9px;border-radius:4px}
@keyframes tha-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.tha-pickskel i{animation:none}}

.tha-pickempty{padding:28px 20px;text-align:center;color:var(--tha-muted);font-size:13px}
.tha-pickempty strong{display:block;margin-bottom:4px;color:var(--tha-ink);font-size:13.5px}

/* Preview pane */
.tha-pickprev h4{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--tha-ink)}
.tha-pickprev .pemail{margin:0 0 12px;font-size:12px;color:var(--tha-muted);word-break:break-all}
.tha-pickprev section{margin-top:14px}
.tha-pickprev section > h5{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tha-muted)}
.tha-pickprev ul{margin:0;padding:0;list-style:none;font-size:12.5px}
.tha-pickprev li{padding:5px 0;border-top:1px solid var(--tha-line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tha-pickprev li:first-child{border-top:0}
.tha-pickprev li .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tha-pickprev li .v{flex:none;color:var(--tha-muted);font-variant-numeric:tabular-nums}

.tha-pickstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.tha-pickstat.warn{border-color:#FCD34D;background:#FFFBEB}.tha-pickstat.warn .n{color:#B45309}
.dark .tha-pickstat.warn{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.tha-picknew{margin:0 16px 12px;padding:14px;border:1px solid var(--tha-line);border-radius:12px;background:var(--tha-card,#fff);box-shadow:0 4px 14px rgba(15,23,42,.06)}
.tha-picknew-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.tha-picknew-h strong{display:block;font-size:14px;color:var(--tha-ink)}.tha-picknew-h span{font-size:12px;color:var(--tha-muted)}
.tha-picknew-x{border:0;background:none;font-size:20px;line-height:1;color:var(--tha-muted);cursor:pointer}
.tha-picknew-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tha-picknew-g label{display:grid;gap:4px;margin:0}
.tha-picknew-g label>span{font-size:12px;font-weight:600;color:var(--tha-ink-2,#334155)}.tha-picknew-g em{color:#DC2626;font-style:normal}
.tha-picknew-g .tha-in.bad{border-color:#F87171}
.tha-picknew-f{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-top:12px}
.tha-picknew-err{margin-right:auto;font-size:12.5px;color:#B91C1C}
.tha-pickstat{padding:8px 10px;border:1px solid var(--tha-line);border-radius:9px;
  background:var(--tha-surface)}
.tha-pickstat .n{font-size:18px;font-weight:600;color:var(--tha-ink);font-variant-numeric:tabular-nums}
.tha-pickstat .l{font-size:11px;color:var(--tha-muted)}

/* The selected-customer card the form shows once the modal closes. */
.tha-pickcard{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;
  padding:11px 12px;border:1px solid var(--tha-line-ctl);border-radius:10px;
  background:var(--tha-ctl-bg)}
.tha-pickcard .tha-pickav{width:40px;height:40px;font-size:13px}
.tha-pickcard .acts{display:flex;align-items:center;gap:6px}
.tha-pickcard .lnks{margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11.5px}
.dark body.tha a.tha-picklnk{background:none}
body.tha a.tha-picklnk{color:var(--tha-accent);text-decoration:none;background:none}
body.tha a.tha-picklnk:hover{text-decoration:underline;background:none}
.dark body.tha a.tha-picklnk{color:var(--tha-link-dark)}

.tha-dd{position:fixed;z-index:9999;min-width:180px;max-width:min(440px,calc(100vw - 16px));background:var(--tha-surface,#fff);color:var(--tha-ink,#0F172A);
  border:1px solid var(--tha-line,#E2E8F0);border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.06);padding:6px;
  display:flex;flex-direction:column;font:inherit;font-size:13.5px;animation:tha-dd-in .12s ease-out}
@keyframes tha-dd-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tha-dd.up{animation-name:tha-dd-up}@keyframes tha-dd-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tha-dd-s{margin:0 0 6px;padding:7px 10px;border:1px solid var(--tha-line,#E2E8F0);border-radius:8px;background:var(--tha-ctl-bg,#fff);color:inherit;font:inherit;font-size:13px;outline:none}
.tha-dd-s:focus{border-color:var(--tha-accent,#2563EB);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.tha-dd-l{overflow:auto;overscroll-behavior:contain;max-height:300px}
.tha-dd-o{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}
.tha-dd-o .ck{width:16px;flex:none;color:var(--tha-accent,#2563EB);opacity:0}
.tha-dd-o.sel{font-weight:600;color:var(--tha-accent,#2563EB)}.tha-dd-o.sel .ck{opacity:1}
.tha-dd-o.hi{background:rgba(37,99,235,.08)}
.tha-dd-o.dis{opacity:.45;cursor:default}
.tha-dd-o .tx{overflow:hidden;text-overflow:ellipsis}
.tha-dd-g{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tha-muted,#5B6778)}
.tha-dd-e{padding:10px;color:var(--tha-muted,#5B6778);font-size:13px}
html.dark .tha-dd,.dark .tha-dd{box-shadow:0 16px 40px rgba(0,0,0,.5)}
html.dark .tha-dd-o.hi,.dark .tha-dd-o.hi{background:rgba(99,102,241,.18)}

/* Sidebar "Filter menu": the dark-mode form reset (input[type=text]:is(.dark *),
   specificity 0,2,1) painted the field's own navy box inside the rounded filter.
   Keep it transparent so only the label draws the control. */
body.tha .tha-filter input[type=text]{background:transparent;border:0;box-shadow:none;padding:0;height:auto;min-height:0;color:var(--tha-ink)}
body.tha .tha-filter input[type=text]::placeholder{color:var(--tha-muted);opacity:1}
body.tha .tha-filter label:focus-within{border-color:var(--tha-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--tha-accent) 20%,transparent)}