/* SME VAT Recovery — Midnight Indigo theme, light + dark.
   Colours are driven by semantic tokens; legacy variable names (--ink, --panel, …)
   are kept as aliases so existing inline styles and the auth pages keep working. */

:root {
  color-scheme: light;
  --bg:#eef1f7;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --text:#141a24;
  --muted:#5c6675;
  --border:#dde3ec;
  --border-strong:#c7d0dd;
  --accent:#3d5afe;
  --accent-2:#2f49d6;
  --accent-weak:#e9edff;
  --on-accent:#ffffff;
  --chrome:#ffffff;
  --chrome-text:#141a24;
  --chrome-muted:#5c6675;
  --chrome-border:#e3e8f1;
  --ok:#1e874b;   --ok-weak:#e3f6ec;
  --warn:#b7791f; --warn-weak:#fbf1dc;
  --danger:#c73a2b; --danger-weak:#fbe6e3;
  --ring:rgba(61,90,254,.32);
  --shadow-sm:0 1px 2px rgba(20,26,36,.06), 0 1px 3px rgba(20,26,36,.07);
  --shadow-md:0 6px 18px rgba(20,26,36,.10);
  --radius:10px;
  /* legacy aliases */
  --ink:#0d1117; --paper:var(--bg); --panel:var(--surface); --line:var(--border);
  --green:var(--accent); --lime:var(--accent); --amber:var(--warn);
  --red:var(--danger); --blue:var(--accent);
}

/* Dark tokens: applied when the OS prefers dark (unless the user forced light),
   or when the user explicitly selects dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark;
    --bg:#0d1117; --surface:#161b22; --surface-2:#1b212b; --text:#e6edf3;
    --muted:#8b949e; --border:#252c37; --border-strong:#323b48;
    --accent:#5b8cff; --accent-2:#7aa2ff; --accent-weak:#182135; --on-accent:#0b1020;
    --chrome:#0b0e14; --chrome-text:#e6edf3; --chrome-muted:#8b949e; --chrome-border:#1b222d;
    --ok:#4cc38a; --ok-weak:#12271c; --warn:#e0b155; --warn-weak:#2a2314;
    --danger:#f0857a; --danger-weak:#2c1815; --ring:rgba(91,140,255,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 8px 24px rgba(0,0,0,.5);
    --ink:#0b0e14; }
}
:root[data-theme="dark"] { color-scheme: dark;
  --bg:#0d1117; --surface:#161b22; --surface-2:#1b212b; --text:#e6edf3;
  --muted:#8b949e; --border:#252c37; --border-strong:#323b48;
  --accent:#5b8cff; --accent-2:#7aa2ff; --accent-weak:#182135; --on-accent:#0b1020;
  --chrome:#0b0e14; --chrome-text:#e6edf3; --chrome-muted:#8b949e; --chrome-border:#1b222d;
  --ok:#4cc38a; --ok-weak:#12271c; --warn:#e0b155; --warn-weak:#2a2314;
  --danger:#f0857a; --danger-weak:#2c1815; --ring:rgba(91,140,255,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 8px 24px rgba(0,0,0,.5);
  --ink:#0b0e14; }

* { box-sizing:border-box; }
/* Reserve the scrollbar gutter so switching tabs/views never shifts the layout
   horizontally (the "whole header moves" effect). */
html { scrollbar-gutter:stable; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2 { margin:.2rem 0; font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:clamp(26px,3.4vw,40px); }
h2 { font-size:20px; }
small { color:var(--muted); }
a { color:var(--accent); }

/* ---- Header (chrome) ---- */
header {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 4vw; background:var(--chrome); color:var(--chrome-text);
  border-bottom:1px solid var(--chrome-border);
}
header h1 { color:var(--chrome-text); }
header p { margin:6px 0 0; color:var(--chrome-muted); max-width:70ch; font-size:13px; }
.eyebrow { font-size:11px; letter-spacing:.16em; font-weight:700; color:var(--accent); text-transform:uppercase; }

/* ---- Global nav ---- */
nav#globalnav {
  display:flex; flex-wrap:wrap; gap:2px; padding:0 4vw;
  background:var(--chrome); border-bottom:1px solid var(--chrome-border);
  position:sticky; top:0; z-index:20;
}
nav#globalnav .nav-link {
  display:inline-block; padding:13px 16px; color:var(--chrome-muted); text-decoration:none;
  font-weight:500; font-size:13.5px; border-bottom:2px solid transparent; transition:color .12s;
}
nav#globalnav .nav-link:hover { color:var(--chrome-text); }
nav#globalnav .nav-link.active { color:var(--accent); border-bottom-color:var(--accent); }

main { padding:26px 3vw 72px; }
/* Keep long-form prose readable even though the app spans the full width. */
main > .notice, main > p { max-width:120ch; }

/* ---- Identity chip + theme toggle ---- */
.identity { display:flex; align-items:center; gap:10px; }
.identity .userchip { display:flex; align-items:center; gap:10px; }
.identity .userchip .who { color:var(--chrome-muted); font-size:12.5px; }
.identity .userchip .who em { color:var(--accent); font-style:normal; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:8px; border:1px solid var(--chrome-border); background:var(--surface-2);
  color:var(--chrome-text); cursor:pointer; font-size:16px; line-height:1; padding:0;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); filter:none; }
.identity .userchip button.quiet {
  background:var(--surface-2); border:1px solid var(--chrome-border); color:var(--chrome-muted);
  padding:8px 12px; border-radius:8px; font-size:13px; cursor:pointer; font-weight:500;
}
.identity .userchip button.quiet:hover { color:var(--danger); border-color:var(--danger); filter:none; }

/* ---- Buttons ---- */
button, input, select, textarea { font:inherit; }
button {
  border:0; border-radius:8px; padding:9px 15px; background:var(--accent); color:var(--on-accent);
  cursor:pointer; font-weight:600; font-size:13.5px; transition:filter .12s,background .12s;
}
button:hover { filter:brightness(1.08); }
button:disabled { opacity:.5; cursor:not-allowed; filter:none; }
button.quiet { background:transparent; color:var(--muted); font-weight:500; }
button.quiet:hover { background:var(--surface-2); filter:none; }

input, select, textarea {
  display:block; width:100%; margin-top:5px; padding:9px 11px; color:var(--text);
  border:1px solid var(--border-strong); border-radius:8px; background:var(--surface);
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
label { font-size:13px; }

/* ---- Toolbar / filters ---- */
.toolbar, .filters { display:flex; align-items:end; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.toolbar select { min-width:280px; }
.filters label { min-width:200px; }

/* ---- Pills / status chips ---- */
.pill { padding:7px 13px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--surface); font-size:12.5px; }
.pill.ok { background:var(--ok-weak); color:var(--ok); border-color:transparent; }

/* ---- Cards ---- */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,270px)); gap:16px; margin-bottom:22px; }
.card, .panel, .notice { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card {
  position:relative; overflow:hidden; padding:18px 18px 20px;
  box-shadow:var(--shadow-sm); transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.85; }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.card .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.09em; font-weight:600; }
.card .value { font:30px/1.05 Georgia,serif; margin-top:12px; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.card.negative { }
.card.negative::before { background:var(--danger); }
.card.negative .value { color:var(--danger); }
.panel { margin-bottom:16px; box-shadow:var(--shadow-sm); }
.notice { border-left:4px solid var(--warn); background:var(--warn-weak); color:var(--text); }

/* ---- In-page segmented tabs (was the reconciliation subnav) ---- */
.subnav {
  display:inline-flex; gap:3px; padding:4px; margin:0 0 18px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:12px;
}
.subnav .tab {
  background:transparent; color:var(--muted); border-radius:8px; padding:8px 15px; font-weight:600; font-size:13px;
}
.subnav .tab:hover { background:transparent; color:var(--text); filter:none; }
.subnav .tab.active { background:var(--surface); color:var(--accent); box-shadow:var(--shadow-sm); }

/* ---- Status grid ---- */
.status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-top:15px; }
.status { display:flex; justify-content:space-between; padding:11px 12px; border-left:4px solid var(--accent); background:var(--surface-2); border-radius:6px; }
.status.exact { border-color:var(--ok); }
.status.review { border-color:var(--warn); }

/* ---- Tables ---- */
.table-wrap { padding:0; overflow:auto; border-radius:var(--radius); }
table { border-collapse:collapse; width:100%; min-width:900px; }
th, td { text-align:left; border-bottom:1px solid var(--border); padding:11px 13px; white-space:nowrap; }
th { background:var(--surface-2); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; position:sticky; top:0; }
th[data-sort] { cursor:pointer; }
th[data-sort]:hover { color:var(--accent); }
tbody tr:hover td { background:var(--surface-2); }
td.wrap { white-space:normal; }
.money { font-variant-numeric:tabular-nums; }

/* ---- Tags ---- */
.tag { display:inline-block; border-radius:999px; padding:3px 9px; background:var(--surface-2); border:1px solid var(--border); font-size:12px; color:var(--text); }
.tag.matched_exact { background:var(--ok-weak); color:var(--ok); border-color:transparent; }
.tag.amount_mismatch, .tag.vat_mismatch { background:var(--warn-weak); color:var(--warn); border-color:transparent; }
.tag.duplicate_in_portal, .tag.refund_or_void_candidate { background:var(--danger-weak); color:var(--danger); border-color:transparent; }

/* ---- Pager ---- */
.pager { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:12px; }

/* ---- Dialog ---- */
dialog { width:min(720px,92vw); border:1px solid var(--border); border-radius:14px; padding:0; background:var(--surface); color:var(--text); box-shadow:var(--shadow-md); }
dialog::backdrop { background:rgba(6,10,20,.55); backdrop-filter:blur(2px); }
.dialog-head { display:flex; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
dialog form>label, dialog .actions { display:block; margin:14px 20px; }
.context { margin:16px 20px; padding:12px; background:var(--surface-2); border-radius:8px; }
.actions { display:flex !important; gap:12px; align-items:center; }

/* ---- View toggling ---- */
.view { display:none; }
.view.active { display:block; }

@media (max-width:820px) {
  header { flex-direction:column; align-items:flex-start; gap:16px; }
  .identity { width:100%; justify-content:space-between; }
  .cards { grid-template-columns:1fr 1fr; }
  .toolbar, .filters { flex-direction:column; align-items:stretch; }
  .toolbar select, .filters label { width:100%; min-width:0; }
}

/* ---- Store picker (custom multi-select) ---- */
.storepick { position:relative; display:inline-block; min-width:210px; }
.sp-trigger { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; padding:9px 12px; font-weight:500; }
.sp-trigger:hover { border-color:var(--accent); filter:none; }
.sp-trigger.open { border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
.sp-caret { color:var(--muted); font-size:11px; }
.sp-panel { position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:min(320px,90vw); background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-md); padding:10px; }
.sp-search { width:100%; margin:0 0 8px; }
.sp-all { display:flex; align-items:center; gap:8px; padding:4px 6px 9px; border-bottom:1px solid var(--border); margin:0 0 6px; font-weight:600; font-size:13px; }
.sp-all input, .sp-item input { width:auto; margin:0; }
.sp-list { max-height:244px; overflow:auto; display:grid; gap:2px; }
.sp-item { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; cursor:pointer; font-size:13px; }
.sp-item:hover { background:var(--surface-2); }
.sp-empty { color:var(--muted); padding:8px; }