/* ===== Design tokens — Light (default) ===== */
:root{
  --bg:#eef1f5;
  --bg-subtle:#e5e9ef;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --text-primary:#1a2230;
  --text-secondary:#5b6675;
  --text-tertiary:#8793a3;
  --border:#dde2e9;
  --border-strong:#c7ceda;
  --input-bg:#ffffff;
  --input-border:#c7ceda;
  --table-header-bg:#f3f6f9;
  --table-header-text:#5b6675;
  --hover-bg:#f1f4f8;
  --success:#157347;
  --success-bg:#e3f6ec;
  --warning:#8a5a00;
  --warning-bg:#fdf1d6;
  --danger:#b3261e;
  --danger-bg:#fbe7e5;
  --status-neutral-bg:#eef1f5;
  --status-neutral-text:#5b6675;
  --button-secondary-bg:var(--surface);
  --button-secondary-text:var(--text-primary);
  --button-secondary-border:var(--border-strong);
  --shadow-sm:0 1px 2px rgba(20,30,45,.06);
  --shadow-md:0 6px 20px rgba(20,30,45,.08);
  --shadow-lg:0 20px 48px rgba(20,30,45,.14);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  /* fixed "chrome" tones — the top nav stays a consistent neutral slate in
     both themes so customer accent colour never has to carry the whole bar */
  --chrome-bg:#121722;
  --chrome-surface:#1a2130;
  --chrome-text:#eef2f7;
  --chrome-text-muted:#9aa7ba;
  --chrome-border:#262f3e;
}

/* ===== Design tokens — Dark ===== */
@media (prefers-color-scheme: dark){
  :root[data-theme="system"]{
    --bg:#0f141b;
    --bg-subtle:#131a22;
    --surface:#1a222c;
    --surface-raised:#212b37;
    --text-primary:#eef2f7;
    --text-secondary:#a9b4c2;
    --text-tertiary:#7c8797;
    --border:#2a3441;
    --border-strong:#3c4a5c;
    --input-bg:#161d26;
    --input-border:#3c4a5c;
    --table-header-bg:#212b37;
    --table-header-text:#a9b4c2;
    --hover-bg:#212b37;
    --success:#3ddc84;
    --success-bg:#123625;
    --warning:#ffcc66;
    --warning-bg:#3a2e12;
    --danger:#ff7a7a;
    --danger-bg:#3a1616;
    --status-neutral-bg:#232d3a;
    --status-neutral-text:#a9b4c2;
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 8px 24px rgba(0,0,0,.4);
    --shadow-lg:0 24px 56px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0f141b;
  --bg-subtle:#131a22;
  --surface:#1a222c;
  --surface-raised:#212b37;
  --text-primary:#eef2f7;
  --text-secondary:#a9b4c2;
  --text-tertiary:#7c8797;
  --border:#2a3441;
  --border-strong:#3c4a5c;
  --input-bg:#161d26;
  --input-border:#3c4a5c;
  --table-header-bg:#212b37;
  --table-header-text:#a9b4c2;
  --hover-bg:#212b37;
  --success:#3ddc84;
  --success-bg:#123625;
  --warning:#ffcc66;
  --warning-bg:#3a2e12;
  --danger:#ff7a7a;
  --danger-bg:#3a1616;
  --status-neutral-bg:#232d3a;
  --status-neutral-text:#a9b4c2;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 24px 56px rgba(0,0,0,.5);
}

/* Accent-derived tones. Accent/accent2/contrast values are injected inline
   per-instance (base.html). Never use --accent as bare text on a surface —
   only as a background (paired with its computed contrast colour), a
   border/underline, or through these mixed tints, so an arbitrary customer
   colour can't make anything unreadable. */
:root{
  --accent-hover:color-mix(in srgb, var(--accent), black 12%);
  --accent2-hover:color-mix(in srgb, var(--accent2), black 12%);
  --accent-soft:color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-ring:color-mix(in srgb, var(--accent) 35%, transparent);
  --chrome-accent-pill:color-mix(in srgb, var(--accent) 38%, black);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text-primary);font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;max-width:100vw;overflow-x:hidden}
img{max-width:100%}
h1,h2,h3{font-weight:650;letter-spacing:-.01em;color:var(--text-primary)}
a{color:inherit}
::selection{background:var(--accent-soft)}

/* ===== Top chrome / nav ===== */
.topbar{background:var(--chrome-bg);color:var(--chrome-text);padding:12px 22px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;border-bottom:1px solid var(--chrome-border);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .mark{width:36px;height:36px;border-radius:9px;background:var(--chrome-surface);border:1px solid var(--chrome-border);color:var(--chrome-text);display:grid;place-items:center;font-weight:700;font-size:13px;overflow:hidden;flex:none}
.brand .mark img{width:100%;height:100%;object-fit:contain}
.brand strong{display:block;font-size:15px;font-weight:650;color:var(--chrome-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{display:block;color:var(--chrome-text-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.topbar nav a{color:var(--chrome-text-muted);text-decoration:none;font-size:13.5px;font-weight:560;padding:7px 12px;border-radius:8px;transition:background .12s,color .12s}
.topbar nav a:hover{color:var(--chrome-text);background:var(--chrome-surface)}
.topbar nav a.active{color:var(--chrome-text);background:var(--chrome-accent-pill)}
.adminlink{background:var(--chrome-surface);border:1px solid var(--chrome-border)}

main{max-width:1320px;margin:auto;padding:26px 22px 60px}

/* ===== Hero (compact, belongs to the same system as every other page) ===== */
.hero{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius-lg);padding:24px 28px;min-height:150px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 20px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.hero-identity{display:flex;align-items:center;gap:18px;min-width:0}
.hero-logo{display:inline-flex;align-items:center;justify-content:center;max-width:180px;min-width:64px;height:64px;padding:6px 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-raised);flex:none;overflow:hidden}
.hero-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.hero-logo strong{font-size:20px;font-weight:700;color:var(--text-secondary)}
.hero h1{margin:2px 0 2px;font-size:22px}
.hero p{margin:0;color:var(--text-secondary);font-size:13.5px}
.userpill{background:var(--bg-subtle);border:1px solid var(--border);color:var(--text-secondary);padding:8px 13px;border-radius:999px;font-size:13px;white-space:nowrap}

/* ===== Stat strip (real counts today; drop future KPI tiles in unchanged) ===== */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:2px}
.stat-tile strong{display:block;font-size:26px;font-weight:700;line-height:1.2}
.stat-tile span{display:block;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}

/* ===== Module cards ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.modulecard{background:var(--surface);color:inherit;text-decoration:none;border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s,border-color .12s;position:relative}
.modulecard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.modulecard strong{display:block;font-size:15.5px;font-weight:650}
.modulecard .count{display:inline-block;margin-top:10px;font-size:12px;color:var(--text-secondary);background:var(--bg-subtle);padding:3px 9px;border-radius:999px}

/* ===== Panels / cards / auth ===== */
.panel,.authcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-sm)}
.panel h2{font-size:16px;margin-top:0}
.panel h3{font-size:13.5px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin:18px 0 10px}
.authcard{max-width:420px;margin:64px auto;text-align:center;position:relative;overflow:hidden}
.authcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent)}
.authcard h1{margin-top:4px;font-size:20px}
.authcard p{color:var(--text-secondary);font-size:13.5px}
.authcard label{display:block;margin:14px 0;text-align:left;font-size:13px;color:var(--text-secondary);font-weight:600}
.authlogo{display:block;max-height:52px;margin:0 auto 14px;object-fit:contain}
.smalllink{display:block;margin-top:18px;color:var(--text-secondary);font-size:13px;text-decoration:none}
.smalllink:hover{color:var(--text-primary);text-decoration:underline}

.pagehead{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap}
.pagehead h1{font-size:22px;margin:3px 0 2px}
.pagehead p{margin:0;color:var(--text-secondary);font-size:13.5px}
.eyebrow{text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:1.1px;color:var(--text-tertiary)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== Buttons — accent used only as background, paired with computed
   contrast text; secondary buttons always use neutral tokens, never
   raw accent as a bare foreground colour ===== */
.btn,button{background:var(--accent);color:var(--accent-contrast);border:0;border-radius:var(--radius-sm);padding:9px 14px;text-decoration:none;font-weight:650;font-size:13.5px;cursor:pointer;transition:background .12s,box-shadow .12s;line-height:1.3}
.btn:hover,button:hover{background:var(--accent-hover)}
.secondary{background:var(--button-secondary-bg);color:var(--button-secondary-text);border:1px solid var(--button-secondary-border)}
.secondary:hover{background:var(--hover-bg)}
.toggle{padding:6px 11px;font-size:12px}
.toggle.on{background:var(--success);color:#fff}
.toggle.on:hover{filter:brightness(.92)}
.toggle.off{background:var(--text-tertiary);color:#fff}
.toggle.off:hover{filter:brightness(.92)}

/* ===== Forms ===== */
label{color:var(--text-secondary);font-size:12.5px;font-weight:600}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--input-border);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--text-primary);font:inherit;margin-top:5px}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
a:focus-visible,button:focus-visible,.modulecard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.pwfield{position:relative;margin-top:5px}
.pwfield input{margin-top:0;padding-right:38px}
.pwtoggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;padding:6px;margin:0;width:auto;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);border-radius:6px}
.pwtoggle:hover{color:var(--text-primary);background:var(--hover-bg)}
.pwtoggle svg{width:18px;height:18px;display:block;pointer-events:none}
.wide{grid-column:1/-1}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.inline input,.inline select{min-width:180px;flex:1}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px}
.filters input,.filters select{margin:0}
.filters input[name="q"]{flex:2;min-width:200px}
.filters select{flex:1;min-width:140px}
.filters button{flex:none}

/* ===== Tables ===== */
.tablewrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow-x:auto;overflow-y:auto;max-height:min(70vh,640px);box-shadow:var(--shadow-sm);scrollbar-width:auto;scrollbar-color:var(--text-tertiary) var(--surface)}
.tablewrap::-webkit-scrollbar{height:18px;width:18px}
.tablewrap::-webkit-scrollbar-track{background:var(--surface)}
.tablewrap::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:8px;border:4px solid var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong)}
.tablewrap::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}
table{width:max-content;min-width:100%;border-collapse:collapse}
th{background:var(--table-header-bg);color:var(--table-header-text);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:650;position:sticky;top:0;z-index:2}
.sort-link{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;cursor:pointer}
.sort-link:hover{color:var(--text-primary)}
.sort-arrow{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-tertiary);opacity:.4;flex:none}
.sort-arrow.dir-asc{border-top:none;border-bottom:5px solid var(--text-tertiary)}
.sort-link.active .sort-arrow{opacity:1;border-top-color:var(--accent);border-bottom-color:var(--accent)}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;min-width:130px;max-width:240px;overflow:hidden;text-overflow:ellipsis}
tbody tr:last-child td{border-bottom:0}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--hover-bg)}
td.currency{text-align:right;font-variant-numeric:tabular-nums}
th.chevron-col,td.chevron-col{width:32px;min-width:32px;max-width:32px;padding-left:6px;padding-right:10px;text-align:center;color:var(--text-tertiary);overflow:visible}
th.check-col,td.check-col{width:32px;min-width:32px;max-width:32px;overflow:visible}
th.check-col input,td.check-col input{width:auto;margin:0}
.drag-handle{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--text-tertiary);box-shadow:0 6px 0 var(--text-tertiary),0 12px 0 var(--text-tertiary),8px 0 0 var(--text-tertiary),8px 6px 0 var(--text-tertiary),8px 12px 0 var(--text-tertiary);margin:6px 14px 6px 4px;cursor:grab;opacity:.55}
.drag-handle:hover{opacity:1}
#fieldsBody tr{cursor:default}
#fieldsBody tr.dragging{opacity:.4;background:var(--hover-bg)}
tbody tr:hover td.chevron-col{color:var(--text-secondary)}
.tablewrap table th:first-child,.tablewrap table td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}
.tablewrap table th:first-child{background:var(--table-header-bg);z-index:3}
tbody tr:hover td:first-child{background:var(--hover-bg)}
.status{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;background:var(--status-neutral-bg);color:var(--status-neutral-text);padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:650}
.empty{text-align:center;color:var(--text-secondary);padding:44px 20px}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{background:var(--bg-subtle);color:var(--text-secondary);padding:6px 11px;border-radius:999px;font-size:12.5px}
.flash{background:var(--warning-bg);border:1px solid var(--warning);color:var(--warning);padding:11px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13.5px;font-weight:600}

.adminstats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.adminstats div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm)}
.adminstats strong{font-size:26px;display:block}
.adminstats span{color:var(--text-secondary);font-size:12.5px}
.moduleconfig{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.moduleconfig>div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 13px;gap:10px;background:var(--surface)}
.moduleconfig span{display:flex;flex-direction:column}
.moduleconfig small{color:var(--text-tertiary)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.log{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--border)}
.log:last-child{border-bottom:0}
.log b{font-size:13.5px}
.log span{color:var(--text-secondary);font-size:12.5px}
.log small{grid-column:1/-1;color:var(--text-tertiary)}
.mapping{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:18px}
.warning{margin:15px 0;padding:12px 14px;background:var(--warning-bg);color:var(--warning);border-left:3px solid var(--warning);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13.5px}
.checks{display:flex;gap:15px;flex-wrap:wrap}
.checks label{display:flex;align-items:center;gap:6px;color:var(--text-primary);font-weight:500}
.checks input{width:auto;margin:0}
fieldset{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px}
legend{color:var(--text-secondary);font-size:12.5px;font-weight:600}
footer{text-align:center;color:var(--text-tertiary);padding:24px 10px 40px;font-size:12px}

/* ===== Record detail modal (reusable across every module) ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(8,12,18,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px;z-index:200;overflow:auto}
.modal-overlay[hidden]{display:none}
.modal-panel{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:720px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--border);flex:none}
.modal-header h2{margin:0;font-size:16px}
.modal-close{background:none;border:0;color:var(--text-secondary);font-size:22px;line-height:1;padding:4px 9px;border-radius:var(--radius-sm);cursor:pointer}
.modal-close:hover{color:var(--text-primary);background:var(--hover-bg)}
.modal-body{padding:20px 22px;overflow:auto}
.modal-loading{color:var(--text-secondary);margin:0}
.detail-section{margin-bottom:22px}
.detail-section:last-child{margin-bottom:0}
.detail-section h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 20px}
.detail-field{min-width:0}
.detail-field.wide{grid-column:1/-1}
.detail-field label{display:block;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.detail-field .value{font-size:14px;color:var(--text-primary);word-break:break-word}
.detail-field.long .value{white-space:pre-wrap;line-height:1.55}
.detail-actions{display:flex;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:600px){.modal-overlay{padding:0}.modal-panel{max-width:100%;max-height:100vh;border-radius:0}}

details.panel summary{list-style:none}
details.panel summary::-webkit-details-marker{display:none}
details.panel summary{color:var(--text-secondary)}
details.panel[open] summary{color:var(--text-primary);margin-bottom:6px}

/* ===== Responsive ===== */
@media(max-width:1150px){
  .brand span{display:none}
  .topbar nav a{padding:7px 9px;font-size:13px}
}
@media(max-width:900px){
  .twocol{grid-template-columns:1fr}
}
@media(max-width:800px){
  .topbar{flex-direction:column;align-items:stretch;gap:10px}
  .topbar nav{width:100%}
  .pagehead{align-items:flex-start;flex-direction:column}
  .formgrid{grid-template-columns:1fr}
  .wide{grid-column:auto}
  .adminstats{grid-template-columns:1fr 1fr 1fr}
  main{padding:18px 14px}
  .hero{flex-direction:column;align-items:flex-start;min-height:0;padding:18px 20px}
  .hero-logo{max-width:140px;height:52px}
  .filters{flex-direction:column;align-items:stretch}
  .filters input[name="q"],.filters select{flex:none;width:100%}
}
@media(max-width:480px){
  .adminstats{grid-template-columns:1fr}
  .stats-row{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr}
  th,td{padding:9px 10px;font-size:13px}
}