/* =============================================================================
   AdvEntRetail Web Office — design tokens
   Deep plum chrome with a bronze accent on warm paper. Hue tokens colour-code
   each functional area, matching the Item Entry layout.
   ============================================================================= */
:root{
  --canvas:#F2EFEC; --surface:#FFFFFF; --surface-2:#FBF9F7; --surface-3:#F2EEEA;
  --rule:#E7E1DB; --rule-2:#D2C9C1;
  --ink:#231D24; --ink-2:#5C5259; --ink-3:#8D8289;

  --chrome:#241C2B; --chrome-2:#332741; --chrome-3:#40324F;
  --chrome-ink:#F3EDF4; --chrome-ink-2:#B0A2BC; --chrome-ink-3:#7E7089;
  --chrome-rule:rgba(255,255,255,.10); --chrome-rule-2:rgba(255,255,255,.18);

  --brand:#A0682B; --brand-2:#8A5722; --brand-ink:#FFFFFF;
  --brand-tint:#F7EDDF; --brand-line:#DCBF95; --brand-on-dark:#E0AD62;

  --good:#33755A; --good-tint:#E0EFE7;
  --bad:#B8443C;  --bad-tint:#F7E3E1;

  --shadow-1:0 1px 2px rgba(35,29,36,.05), 0 1px 1px rgba(35,29,36,.04);
  --shadow-2:0 2px 4px rgba(35,29,36,.05), 0 12px 28px -14px rgba(35,29,36,.28);
  --shadow-3:0 24px 60px -30px rgba(35,29,36,.5);

  --r-card:12px; --r-ctl:7px;
  --h-tint:var(--surface-2); --h-tint-2:var(--surface-3);
  --h-accent:var(--brand); --h-line:var(--rule); --h-ink:var(--brand-2);
  color-scheme:light;
}

/* one identity per functional area */
[data-hue="bronze"]{--h-tint:#FAF3E9;--h-tint-2:#F3E7D5;--h-accent:#A0682B;--h-line:#E5D0B2;--h-ink:#815223}
[data-hue="amber"] {--h-tint:#FBF4E4;--h-tint-2:#F5E9CD;--h-accent:#96701B;--h-line:#E1CD9B;--h-ink:#775714}
[data-hue="indigo"]{--h-tint:#EFF1F9;--h-tint-2:#E3E8F5;--h-accent:#4A5A9E;--h-line:#C4CDE8;--h-ink:#3A4880}
[data-hue="teal"]  {--h-tint:#EBF4F3;--h-tint-2:#DBEBE9;--h-accent:#2F7E78;--h-line:#B4D6D2;--h-ink:#24625E}
[data-hue="plum"]  {--h-tint:#F5F0F8;--h-tint-2:#EBE2F1;--h-accent:#7A4F92;--h-line:#D6C4E2;--h-ink:#603C75}
[data-hue="clay"]  {--h-tint:#FBF0EE;--h-tint-2:#F5E1DE;--h-accent:#A85448;--h-line:#E8C8C2;--h-ink:#8A4238}
[data-hue="moss"]  {--h-tint:#F1F4EC;--h-tint-2:#E6EDDE;--h-accent:#5B7A3F;--h-line:#CBDAB9;--h-ink:#47612F}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#100D16; --surface:#1C1723; --surface-2:#221C2A; --surface-3:#2A2333;
    --rule:#332B3E; --rule-2:#463C54;
    --ink:#EFE9F1; --ink-2:#B6ABBE; --ink-3:#8A7E93;
    --chrome:#180F1F; --chrome-2:#251A30; --chrome-3:#33243F;
    --brand:#E0AD62; --brand-2:#EFC489; --brand-ink:#2A1A08;
    --brand-tint:#33241A; --brand-line:#6B502C;
    --good:#63B58D; --good-tint:#173226; --bad:#E0837A; --bad-tint:#331C1A;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 34px -18px rgba(0,0,0,.8);
    --shadow-3:0 26px 64px -30px rgba(0,0,0,.9);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) [data-hue="bronze"]{--h-tint:#241B11;--h-tint-2:#2E2317;--h-accent:#E0AD62;--h-line:#513C21;--h-ink:#EEC488}
  :root:not([data-theme="light"]) [data-hue="amber"] {--h-tint:#231C0E;--h-tint-2:#2C2415;--h-accent:#D8B45C;--h-line:#4E4020;--h-ink:#E6C883}
  :root:not([data-theme="light"]) [data-hue="indigo"]{--h-tint:#161A28;--h-tint-2:#1E2333;--h-accent:#8E9EE2;--h-line:#313958;--h-ink:#A7B4EA}
  :root:not([data-theme="light"]) [data-hue="teal"]  {--h-tint:#122321;--h-tint-2:#1A2D2A;--h-accent:#5FB8AF;--h-line:#2A4A46;--h-ink:#7ECAC1}
  :root:not([data-theme="light"]) [data-hue="plum"]  {--h-tint:#1E1629;--h-tint-2:#271E34;--h-accent:#B78CD0;--h-line:#3F2F51;--h-ink:#C8A5DB}
  :root:not([data-theme="light"]) [data-hue="clay"]  {--h-tint:#251715;--h-tint-2:#301E1A;--h-accent:#E0928A;--h-line:#4D312C;--h-ink:#EBABA3}
  :root:not([data-theme="light"]) [data-hue="moss"]  {--h-tint:#19200F;--h-tint-2:#212A17;--h-accent:#93BE72;--h-line:#374A29;--h-ink:#A8CE8B}
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"Archivo","Segoe UI",system-ui,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0; text-wrap:balance}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
.mono,.num{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace; font-variant-numeric:tabular-nums}
.num{text-align:right}
:focus-visible{outline:2px solid var(--h-accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-3)}

/* ------------------------------------------------------------------- shell */
.app{min-height:100vh; display:flex; flex-direction:column}

.topbar{
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));
  color:var(--chrome-ink); padding:0 22px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-bottom:1px solid var(--chrome-rule); min-height:58px;
}
.brandmark{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.brandmark:hover{text-decoration:none}
.brandmark .glyph{
  width:34px;height:34px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#022C78,#0D47A1);color:#FFFFFF;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.brandmark .name{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.brandmark .sub{font-size:10.5px;color:var(--chrome-ink-3);letter-spacing:.06em;text-transform:uppercase}

.topnav{display:flex;gap:2px;flex-wrap:wrap;margin-left:8px}
.topnav a{
  font-size:13px;font-weight:500;color:var(--chrome-ink-2);padding:8px 12px;
  border-radius:var(--r-ctl);text-decoration:none;
}
.topnav a:hover{background:var(--chrome-3);color:var(--chrome-ink);text-decoration:none}
.topnav a.active{background:var(--chrome-3);color:var(--brand-on-dark);font-weight:600}

.topbar .spacer{flex:1}
.session{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--chrome-ink-2)}
.session b{color:var(--chrome-ink);font-weight:600}
.session .sep{color:var(--chrome-ink-3)}

.devbadge{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:100px;
  background:rgba(224,173,98,.14);color:var(--brand-on-dark);border:1px solid rgba(224,173,98,.34);
}

/* The top bar spans the width; under it the rail and the work sit side by side. min-height:0
   on the row lets a tall grid inside scroll rather than push the page. */
.shell{flex:1;display:flex;align-items:stretch;min-height:0}
.main{flex:1;padding:22px;max-width:1560px;margin:0 auto;width:100%;min-width:0}

/* ----------------------------------------------------------------- side nav */
/* One entry per section of the office, and a toggle that shrinks it to the icons. The width is
   a custom property so the collapsed state is one line rather than a second set of rules. */
.sidenav{
  --nav-w:220px;
  flex:0 0 var(--nav-w); width:var(--nav-w);
  display:flex; flex-direction:column;
  background:var(--surface); border-right:1px solid var(--rule);
  padding:12px 10px 10px;
  position:sticky; top:0; align-self:flex-start; overflow-y:auto;
  /* Full height under the top bar, so the rail's edge runs the length of the page and the
     collapse control sits at its foot rather than stopping under the last section. */
  height:calc(100vh - 58px); max-height:calc(100vh - 58px);
}
.sidenav.narrow{--nav-w:60px; padding-left:8px; padding-right:8px}
.sidenav.narrow .sidenav-label{display:none}
.sidenav.narrow .sidenav-item,
.sidenav.narrow .sidenav-toggle{justify-content:center; padding-left:0; padding-right:0}

.sidenav-list{display:flex;flex-direction:column;gap:2px;flex:1}

.sidenav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--r-ctl);
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  text-decoration:none; border:1px solid transparent; white-space:nowrap;
}
.sidenav-item:hover{background:var(--surface-3); color:var(--ink); text-decoration:none}

/* The selected section takes its own hue, so the colour of the rail entry and the colour of
   the page it opens are the same one. */
.sidenav-item.on{
  background:var(--h-tint); border-color:var(--h-line);
  color:var(--h-ink); font-weight:650;
}
.sidenav-item.on .sidenav-ico{color:var(--h-accent)}

.sidenav-ico{width:19px;height:19px;flex:none;color:var(--ink-3)}
.sidenav-item:hover .sidenav-ico{color:var(--ink-2)}

.sidenav-toggle{
  display:flex; align-items:center; gap:11px;
  margin-top:8px; padding:8px 11px;
  background:none; border:1px solid var(--rule); border-radius:var(--r-ctl);
  font:inherit; font-size:12.5px; color:var(--ink-3); cursor:pointer; white-space:nowrap;
}
.sidenav-toggle:hover{background:var(--surface-3); color:var(--ink-2)}
.sidenav-toggle svg{width:16px;height:16px;flex:none}

/* Under a phone or a narrow window the rail lies down across the top and scrolls sideways,
   rather than eating half the width. */
@media (max-width:860px){
  .shell{flex-direction:column}
  .sidenav{
    --nav-w:100%; flex:none; position:static;
    height:auto; max-height:none;
    border-right:0; border-bottom:1px solid var(--rule); padding:8px 10px;
  }
  .sidenav-list{flex-direction:row; overflow-x:auto; gap:4px}
  .sidenav-item{padding:8px 10px}
  .sidenav-toggle{display:none}
}

/* ---------------------------------------------------------------- tab strip */
.tabstrip{
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--rule); margin-bottom:18px;
}
.tabstrip-tab{
  display:flex; align-items:center; gap:8px;
  padding:9px 13px; margin-bottom:-1px;
  background:none; border:1px solid transparent; border-bottom:2px solid transparent;
  border-radius:var(--r-ctl) var(--r-ctl) 0 0;
  font:inherit; font-size:13px; font-weight:550; color:var(--ink-2);
  cursor:pointer; white-space:nowrap;
}
.tabstrip-tab:hover:not(:disabled){background:var(--surface-3); color:var(--ink)}
.tabstrip-tab:disabled{color:var(--ink-3); cursor:default}
.tabstrip-tab.on{
  color:var(--h-ink); border-bottom-color:var(--h-accent); font-weight:700;
  background:var(--h-tint);
}
.tabstrip-tab.on .tabstrip-ico{color:var(--h-accent)}
.tabstrip-ico{width:17px;height:17px;flex:none;color:var(--ink-3)}
.tabstrip-badge{
  font-size:11px;font-weight:700;padding:1px 6px;border-radius:100px;
  background:var(--h-accent);color:var(--surface);
}

.tabstrip[aria-orientation="vertical"]{
  flex-direction:column; flex-wrap:nowrap;
  border-bottom:0; border-right:1px solid var(--rule); margin-bottom:0;
}
.tabstrip[aria-orientation="vertical"] .tabstrip-tab{
  margin-bottom:0; margin-right:-1px;
  border-bottom:1px solid transparent; border-right:2px solid transparent;
  border-radius:var(--r-ctl) 0 0 var(--r-ctl);
}
.tabstrip[aria-orientation="vertical"] .tabstrip-tab.on{border-right-color:var(--h-accent)}

.areapane{min-width:0}

/* ------------------------------------------------------------------ pieces */
.pagehead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pagehead h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
.pagehead .lede{font-size:13.5px;color:var(--ink-2);margin-top:4px;max-width:70ch}
.pagehead .spacer{flex:1}

.crumb{font-size:12px;color:var(--ink-3);margin-bottom:6px}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand-2)}

.btn{
  font:inherit;font-size:13px;font-weight:600;border-radius:var(--r-ctl);
  padding:9px 16px;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
}
.btn:hover{filter:brightness(1.06);text-decoration:none}
.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}
.btn-primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));color:#fff;border-color:var(--brand);box-shadow:0 4px 12px -6px rgba(160,104,43,.8)}
.btn-quiet{background:var(--surface);color:var(--ink-2);border-color:var(--rule-2)}
.btn-quiet:hover{color:var(--ink);border-color:var(--ink-3)}
.btn-hue{background:var(--h-tint-2);color:var(--h-ink);border-color:var(--h-line)}
.btn-danger{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}

.card{background:var(--surface);border:1px solid var(--h-line);border-radius:var(--r-card);box-shadow:var(--shadow-1);overflow:hidden}
.card-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 18px;background:var(--h-tint-2);border-bottom:1px solid var(--h-line)}
.card-head h2{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--h-ink)}
.card-head .spacer{flex:1}
.card-body{padding:18px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:100px;border:1px solid transparent;white-space:nowrap}
.pill-good{background:var(--good-tint);color:var(--good);border-color:var(--good)}
.pill-bad{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}
.pill-hue{background:var(--h-tint-2);color:var(--h-ink);border-color:var(--h-line)}
.pill-quiet{background:var(--surface-3);color:var(--ink-3);border-color:var(--rule-2)}

/* ---------------------------------------------------------------- dashboard */
.dashhead{
  background:linear-gradient(140deg,var(--chrome-2),var(--chrome));
  color:var(--chrome-ink);border-radius:var(--r-card);padding:26px 28px;margin-bottom:22px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:var(--shadow-2);
}
.dashhead h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
.dashhead p{margin:6px 0 0;font-size:13.5px;color:var(--chrome-ink-2);max-width:62ch}
.dashhead .spacer{flex:1}
.stats{display:flex;gap:26px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px}
.stat dt{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--chrome-ink-3);margin:0}
.stat dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:22px;font-weight:500;color:var(--brand-on-dark)}

.groups{display:flex;flex-direction:column;gap:18px}
.group{border:1px solid var(--h-line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-1)}
.group-head{padding:13px 18px;background:var(--h-tint-2);border-bottom:1px solid var(--h-line);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.group-head h2{font-size:14px;font-weight:700;color:var(--h-ink);letter-spacing:-.005em}
.group-head .blurb{font-size:12.5px;color:var(--ink-2)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;padding:16px;background:var(--h-tint)}
.tile{
  background:var(--surface);border:1px solid var(--h-line);border-radius:10px;padding:14px 15px;
  text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:5px;
  box-shadow:var(--shadow-1);transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--h-accent)}
.tile .t{font-size:14.5px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.tile .t::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--h-accent);flex:none}
.tile .d{font-size:12px;color:var(--ink-3);line-height:1.5}
.tile .c{margin-top:auto;padding-top:8px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--h-ink);font-weight:600}

/* What is waiting on somebody. Only non-zero counts reach this row, so every card on it is
   something to act on; the figure leads because that is what is being scanned for. */
.todo{margin-bottom:22px}
.todo h2{margin-bottom:9px}
.todo-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:10px}
.todo-card{
  display:flex;align-items:baseline;gap:9px;
  background:var(--h-tint);border:1px solid var(--h-line);border-left:3px solid var(--h-accent);
  border-radius:10px;padding:11px 14px;text-decoration:none;color:var(--ink);
}
.todo-card:hover{text-decoration:none;background:var(--h-tint-2);box-shadow:var(--shadow-1)}
.todo-n{
  font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:600;color:var(--h-ink);line-height:1;
}
.todo-what{font-size:12.5px;color:var(--ink-2);line-height:1.35}

/* The sections, as the landing page shows them. These mirror the left rail exactly - same
   order, same icon, same hue - so the page teaches the menu rather than competing with it. */
.arearow{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
.areacard{
  display:flex;flex-direction:column;gap:7px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:16px 17px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.areacard:hover{
  text-decoration:none;transform:translateY(-2px);
  box-shadow:var(--shadow-2);border-color:var(--h-accent);
}
.areacard-top{display:flex;align-items:center;gap:10px}
.areacard-ico{
  width:34px;height:34px;flex:none;padding:7px;border-radius:9px;
  background:var(--h-tint);color:var(--h-accent);border:1px solid var(--h-line);
}
.areacard-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--h-ink)}
.areacard-blurb{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.areacard-foot{
  margin-top:auto;padding-top:9px;border-top:1px solid var(--rule);
  display:flex;align-items:baseline;gap:10px;
  font-size:11.5px;color:var(--ink-3);
}
.areacard-tabs{flex:1}
.areacard-n{font-size:12px;font-weight:600;color:var(--h-ink)}

/* --------------------------------------------------------------- list page */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;
  background:var(--h-tint-2);border-bottom:1px solid var(--h-line)}
.toolbar .spacer{flex:1}
.filter{display:flex;flex-direction:column;gap:3px}
.filter label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.filter select,.filter input{
  font:inherit;font-size:13px;padding:7px 10px;border-radius:var(--r-ctl);
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);min-width:170px;
}
.countchip{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--h-ink);
  background:var(--h-tint);border:1px solid var(--h-line);padding:5px 11px;border-radius:100px;white-space:nowrap}

.tablewrap{overflow-x:auto}
table.grid{border-collapse:collapse;width:100%;font-size:13px}
table.grid th{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--h-line);
  white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;z-index:2;
}
table.grid th.r{text-align:right}
table.grid th .arrow{color:var(--h-accent);margin-left:5px;font-size:10px}
table.grid th.plain{cursor:default}
table.grid tr.searchrow th{padding:0 8px 8px;background:var(--surface);border-bottom:1px solid var(--h-line);position:sticky;top:35px}
table.grid tr.searchrow input{
  font:inherit;font-size:12px;width:100%;min-width:80px;padding:5px 8px;
  border:1px solid var(--rule);border-radius:5px;background:var(--surface-2);color:var(--ink);
}
table.grid tr.searchrow input:focus{background:var(--surface);border-color:var(--h-accent)}
table.grid td{padding:10px 14px;border-bottom:1px solid var(--rule);white-space:nowrap;vertical-align:middle}
table.grid tbody tr:hover td{background:var(--h-tint)}
table.grid tbody tr.inactive td:not(.actions){opacity:.55}
table.grid td.wide{white-space:normal;min-width:240px}
table.grid td.actions{text-align:right;white-space:nowrap}

.iconbtn{
  border:1px solid transparent;background:transparent;cursor:pointer;border-radius:6px;
  width:28px;height:28px;display:inline-grid;place-items:center;color:var(--ink-3);font-size:14px;
}
.iconbtn:hover{background:var(--h-tint-2);color:var(--h-ink);border-color:var(--h-line)}
.iconbtn.danger:hover{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}

.emptystate{padding:46px 20px;text-align:center;color:var(--ink-3)}
.emptystate b{display:block;font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:5px}
.loading{padding:46px 20px;text-align:center;color:var(--ink-3);font-size:13px}
.spinner{
  width:22px;height:22px;border-radius:50%;margin:0 auto 12px;
  border:2.5px solid var(--h-line);border-top-color:var(--h-accent);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.gridfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 18px;
  background:var(--h-tint-2);border-top:1px solid var(--h-line);font-size:12.5px;color:var(--ink-2)}
.gridfoot .spacer{flex:1}
.pager{display:flex;align-items:center;gap:5px}
.pager button{font:inherit;font-size:12.5px;padding:5px 11px;border-radius:6px;cursor:pointer;
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink-2)}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager button.on{background:var(--h-accent);color:#fff;border-color:var(--h-accent);font-weight:700}

/* --------------------------------------------------------------- entry page */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px 22px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fld label .req{color:var(--bad);margin-left:3px}
.fld input[type=text],.fld input[type=number],.fld select,.fld textarea{
  font:inherit;font-size:14px;padding:9px 11px;border-radius:var(--r-ctl);
  border:1px solid var(--rule-2);background:var(--surface);color:var(--ink);width:100%;
}
.fld textarea{min-height:74px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--h-accent);outline:none;box-shadow:0 0 0 3px var(--h-tint-2)}
.fld input:disabled,.fld select:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
.fld .hint{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.fld .err{font-size:11.5px;color:var(--bad);font-weight:600}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--bad);background:var(--bad-tint)}

.switch{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border:1px solid var(--rule);
  border-radius:var(--r-ctl);background:var(--surface-2);cursor:pointer}
.switch:hover{border-color:var(--rule-2)}
.switch input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--h-accent);flex:none;cursor:pointer}
/* A switch inside a field is not a caption, whatever `.fld label` says about captions:
   without this its label and hint came out in the caption's tiny capitals, run together. */
.fld label.switch{font-size:13.5px;font-weight:500;letter-spacing:normal;text-transform:none;color:var(--ink)}
.switch .lbl{display:block;font-size:13.5px;font-weight:500;color:var(--ink)}
.switch .hint{display:block;font-size:11.5px;font-weight:400;color:var(--ink-3);margin-top:2px;line-height:1.45}

.formfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;
  background:var(--h-tint-2);border-top:1px solid var(--h-line)}
.formfoot .spacer{flex:1}

.auditbox{margin-top:18px;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2);padding:14px 16px}
.auditbox h3{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.auditgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 20px}
.auditgrid div{font-size:12.5px}
.auditgrid span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}

/* ------------------------------------------------------------------- alerts */
.alert{display:flex;align-items:flex-start;gap:11px;padding:12px 16px;border-radius:var(--r-ctl);
  font-size:13px;margin-bottom:16px;border:1px solid transparent}
.alert-good{background:var(--good-tint);color:var(--good);border-color:var(--good)}
.alert-bad{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}
.alert .spacer{flex:1}
.alert button{background:transparent;border:none;cursor:pointer;color:inherit;font-size:16px;line-height:1;opacity:.7}
.alert button:hover{opacity:1}

/* ============================================================================
   Layered dialogs (UI-40, UI-41)
   Depth 1 is a list over the dashboard, depth 2 an entry over the list, depth 3
   a confirmation over either. Each layer dims what is beneath it a little more.
   ============================================================================ */
.scrim{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.scrim:focus{outline:none}
.scrim-1{z-index:60;background:rgba(20,14,26,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scrim-2{z-index:70;background:rgba(20,14,26,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.scrim-3{z-index:80;background:rgba(20,14,26,.46)}

.dlg{
  display:flex;flex-direction:column;background:var(--surface);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.22);
  animation:dlgin .15s ease-out;max-height:calc(100vh - 48px);
}
/* A list dialog is a fixed frame, not a box that fits its rows. Sized to its content it
   jumped every time a filter narrowed the grid - from the full height to a strip of three
   rows and back - which moved the close button and the toolbar out from under the user's
   hand. The body scrolls; the frame stays where it is. */
.dlg-wide{width:min(1460px,100%);height:min(980px,calc(100vh - 48px))}
/* A page that is a workspace rather than a question: the Item Manager, where a grid, a filter
   panel and a history strip have to be on screen together (UI-42). It takes the window, and
   takes all of it - the scrim's inset is dropped for this one size, and the corners are
   squared, because a rounded card floating a few pixels inside the window edge is a dialog
   that looks like it nearly fits rather than one that owns the screen.

   100% rather than 100vw/100vh: the scrim is fixed at inset:0, so its own box is exactly the
   viewport, and a percentage of it cannot overshoot the way 100vw does beside a scrollbar. */
.scrim:has(> .dlg-full){padding:0}
.dlg-full{width:100%;height:100%;max-height:100%;border-radius:0}
.dlg-medium{width:min(940px,100%)}
.dlg-small{width:min(500px,100%)}
@keyframes dlgin{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dlg{animation:none}}

.dlg-bar{
  flex:none;display:flex;align-items:center;gap:12px;padding:0 10px 0 20px;min-height:46px;
  background:linear-gradient(180deg,var(--chrome-2),var(--chrome));
  color:var(--chrome-ink);border-bottom:1px solid var(--chrome-rule);
}
.dlg-title{font-size:14px;font-weight:700;letter-spacing:-.005em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.dlg-sub{font-size:12px;color:var(--chrome-ink-3);white-space:nowrap}
.dlg-bar .spacer{flex:1}
.dlg-x{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;
  background:transparent;border:none;cursor:pointer;color:var(--chrome-ink-2);font-size:18px;line-height:1}
.dlg-x:hover{background:#C0392B;color:#fff}

.dlg-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;background:var(--h-tint);min-height:0;
  display:flex;flex-direction:column}
/* Children keep their own height and the body scrolls; without this a flex column would
   squeeze a long table into the space left rather than letting it run on. */
.dlg-body > *{flex-shrink:0}
/* The grid footer sits on the bottom edge of the frame however few rows are showing,
   so the count and the pager are always in the same place. */
.dlg-body > .gridfoot{margin-top:auto}
.dlg-foot{flex:none;display:flex;align-items:center;gap:10px;padding:13px 20px;
  background:var(--surface-2);border-top:1px solid var(--rule)}
.dlg-foot .spacer{flex:1}

/* the entry form inside a dialog */
.formwrap{padding:20px 22px}
.formwrap .alert{margin-bottom:16px}

/* toolbar, grid header and footer stay put while the grid scrolls */
.dlg-body .toolbar{position:sticky;top:0;z-index:3}
.dlg-body .gridfoot{position:sticky;bottom:0}
.dlg-body table.grid th{top:0}
.dlg-body table.grid tr.searchrow th{top:36px}

mark{background:var(--h-tint-2);color:var(--h-ink);padding:0 2px;border-radius:2px;font-weight:600}

/* ============================================================================
   Views inside a dialog
   The reference lists are built from the grid pieces above and run edge to edge. The
   views written by hand - zones, stores, users, stock, purchasing, the setup order -
   put paragraphs, figures, plain tables and forms straight into the dialog body, and
   before this section they sat flush against its edges with no rhythm between them.
   These rules give that content the same frame the grid has, without each view having
   to remember it.
   ============================================================================ */

/* Everything that is not an edge-to-edge band is inset and spaced. */
.dlg-body > :not(.toolbar):not(.gridfoot):not(.formfoot):not(.scrim):not(.formwrap):not(.tablewrap){margin:16px 20px 0}
.dlg-body > .tablewrap{margin-top:0}
/* An entry form's button bar closes the frame the way the grid footer does. */
.dlg-body > .formfoot{margin-top:auto}
/* Room below the last block, except where a footer band already closes the frame. */
.dlg-body:not(:has(> .gridfoot, > .formfoot))::after{content:"";flex:none;height:22px}

.dlg-body > p{max-width:118ch;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.dlg-body > p.muted{color:var(--ink-2)}
.dlg-body > .alert{margin-bottom:0}

/* A plain table in a hand-written view reads as a card, like the grid does. */
/* Plain tables in a dialog are given the office's look - except inside Item Manager and Item
   Groups, which paint their own light grids and only ever got the dark theme's ground under
   their dark ink from these. */
.dlg-body > .tablewrap:has(> table:not(.grid):not(:is(.im-host, .ig-host) table)){
  margin:16px 20px 0;background:var(--surface);border:1px solid var(--h-line);
  border-radius:var(--r-card);box-shadow:var(--shadow-1)}

.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table){width:100%;border-collapse:collapse;font-size:13px;background:var(--surface)}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) th{
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:11px 14px;background:var(--surface-2);border-bottom:1px solid var(--h-line);
  white-space:nowrap;vertical-align:bottom}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) tbody tr:last-child td{border-bottom:none}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) tbody tr:hover td{background:var(--h-tint)}
/* Figures hug their column, so the names and descriptions get the width. */
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) :is(th,td).num{text-align:right;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) th.num{font-family:inherit}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td strong{font-weight:600;color:var(--ink)}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td .muted{font-size:12px;line-height:1.45;margin-top:1px}
/* The cell holding a row's buttons: to the right, on one line, and compact. */
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td:has(> .btn){text-align:right;white-space:nowrap;width:1%}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td .btn{padding:6px 12px;font-size:12.5px}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td .btn + .btn{margin-left:6px}
.dlg-body table:not(.grid):not(:is(.im-host, .ig-host) table) td .pill + .pill{margin-left:4px}
/* A message as it arrived, shown under its row. Wraps rather than widening the table. */
.dlg-body pre.payload{margin:0;padding:12px 14px;max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-all;
  font:12px/1.5 "JetBrains Mono",ui-monospace,monospace;background:var(--surface-2);border:1px solid var(--rule);border-radius:8px;color:var(--ink-2)}

/* A group of rows under a heading - a step, a section - is one card. */
.dlg-body > .group{background:var(--surface)}
.dlg-body .group .tablewrap{margin:0;border:none;border-radius:0;box-shadow:none}
.group-head h2{margin:0}
.group-head .muted{font-size:12.5px;color:var(--ink-2)}

/* Figures over a view. On the dashboard's dark band a figure is bronze text; on the
   light body of a dialog it is a tile of its own, or it disappears. */
.dlg-body .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.dlg-body .stat{background:var(--surface);border:1px solid var(--h-line);border-radius:10px;
  padding:13px 16px;box-shadow:var(--shadow-1);font-size:12.5px;color:var(--ink-2)}
.dlg-body .stat .num{display:block;text-align:left;font-size:26px;font-weight:600;line-height:1.15;color:var(--h-ink)}
.dlg-body .stat dt{color:var(--ink-3)}
.dlg-body .stat dd{color:var(--h-ink)}

/* A form card in a view: the card carries the frame, the body lays out the fields. */
.dlg-body > .card .card-head{font-size:13px;font-weight:700;color:var(--h-ink)}
.dlg-body .card-body > p{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.formfoot{justify-content:space-between}
.formfoot > div{display:flex;gap:8px}
.formfoot > .muted{font-size:12.5px;max-width:70ch}

/* A label that wraps its control: the caption above, the control below. */
/* A grid rather than a column, so a required marker stays on the caption's line and the
   control takes the full width beneath both. */
.formgrid > label:not(.switch),.toolbar > label{
  display:grid;grid-template-columns:max-content 1fr;align-items:baseline;gap:5px 3px;min-width:0;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.formgrid > label > :is(input,select,textarea,div),.toolbar > label > :is(input,select){grid-column:1/-1}
.formgrid > label .req{color:var(--bad)}
.formgrid > label.switch{flex-direction:row;align-items:center;align-self:end;min-height:40px;
  font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:normal;text-transform:none}

/* A control that carries the field class itself rather than sitting inside one. */
input.fld,select.fld,textarea.fld{
  display:block;width:100%;font:inherit;font-size:14px;font-weight:400;letter-spacing:normal;
  text-transform:none;padding:9px 11px;border-radius:var(--r-ctl);border:1px solid var(--rule-2);
  background:var(--surface);color:var(--ink)}
input.fld:focus,select.fld:focus,textarea.fld:focus{border-color:var(--h-accent);outline:none;box-shadow:0 0 0 3px var(--h-tint-2)}
input.fld:disabled,select.fld:disabled{background:var(--surface-3);color:var(--ink-3);cursor:not-allowed}
.toolbar > label input.fld,.toolbar > label select.fld{min-width:220px;padding:7px 10px;font-size:13px}
/* A toolbar is one row: a control placed in it directly keeps its own width rather than
   taking the full width a form field would. */
.toolbar > :is(input,select).fld{display:inline-block;width:auto;min-width:190px;padding:7px 10px;font-size:13px}
.toolbar > input.fld{min-width:260px}