:root{
  --bg:#e9ebed; --surface:rgba(249,250,250,.75); --surface-solid:#f7f8f8; --surface-2:#e3e5e7;
  --ink:#2b2d2f; --ink-soft:#5f6366; --ink-faint:#888c8f;
  --line:rgba(0,0,0,.07); --line-strong:rgba(0,0,0,.13);
  --accent:#0a84ff; --accent-ink:#ffffff; --accent-soft:rgba(10,132,255,.12);
  --pill-info-ink:#0a84ff;
  --input-bg:rgba(10,132,255,.05); --input-border:rgba(10,132,255,.28); --input-glow:rgba(10,132,255,.16);
  --copper:#ff9f0a; --copper-soft:rgba(255,159,10,.14);
  --ok:#28a745; --ok-soft:rgba(40,167,69,.12);
  --warn:#c8790a; --warn-soft:rgba(255,159,10,.16);
  --crit:#ff3b30; --crit-soft:rgba(255,59,48,.12);
  --overdue-edge:rgba(255,59,48,.06); --overdue-ink:#c8790a; --overdue-ink-link:#a8650a;
  --row-glint:rgba(255,255,255,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.18), 0 4px 14px -4px rgba(0,0,0,.08);
  --blur:saturate(180%) blur(20px);
  --font-body: -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display: -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: "SF Mono",SFMono-Regular,Consolas,"Cascadia Mono",Menlo,monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:rgba(28,28,30,.72); --surface-solid:#1c1c1e; --surface-2:#2c2c2e;
    --ink:#f5f5f7; --ink-soft:#98989d; --ink-faint:#6e6e73;
    --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.18);
    --accent:#4da6ff; --accent-ink:#ffffff; --accent-soft:rgba(77,166,255,.22);
    --pill-info-ink:#a9d6ff;
    --input-bg:rgba(77,166,255,.10); --input-border:rgba(77,166,255,.4); --input-glow:rgba(77,166,255,.3);
    --copper:#ff9f0a; --copper-soft:rgba(255,159,10,.18);
    --ok:#32d74b; --ok-soft:rgba(50,215,75,.16);
    --warn:#ffb340; --warn-soft:rgba(255,159,10,.2);
    --crit:#ff453a; --crit-soft:rgba(255,69,58,.18);
    --overdue-edge:rgba(255,69,58,.08); --overdue-ink:#d99a3d; --overdue-ink-link:#e0ab5c;
    --row-glint:rgba(255,255,255,.05);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 24px 60px -12px rgba(0,0,0,.6), 0 4px 16px -4px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:rgba(28,28,30,.72); --surface-solid:#1c1c1e; --surface-2:#2c2c2e;
  --ink:#f5f5f7; --ink-soft:#98989d; --ink-faint:#6e6e73;
  --line:rgba(255,255,255,.11); --line-strong:rgba(255,255,255,.18);
  --accent:#4da6ff; --accent-ink:#ffffff; --accent-soft:rgba(77,166,255,.22);
  --pill-info-ink:#a9d6ff;
  --input-bg:rgba(77,166,255,.10); --input-border:rgba(77,166,255,.4); --input-glow:rgba(77,166,255,.3);
  --copper:#ff9f0a; --copper-soft:rgba(255,159,10,.18);
  --ok:#32d74b; --ok-soft:rgba(50,215,75,.16);
  --warn:#ffb340; --warn-soft:rgba(255,159,10,.2);
  --crit:#ff453a; --crit-soft:rgba(255,69,58,.18);
  --overdue-edge:rgba(255,69,58,.08); --overdue-ink:#d99a3d; --overdue-ink-link:#e0ab5c;
  --row-glint:rgba(255,255,255,.05);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 24px 60px -12px rgba(0,0,0,.6), 0 4px 16px -4px rgba(0,0,0,.4);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#e9ebed; --surface:rgba(249,250,250,.75); --surface-solid:#f7f8f8; --surface-2:#e3e5e7;
  --ink:#2b2d2f; --ink-soft:#5f6366; --ink-faint:#888c8f;
  --line:rgba(0,0,0,.07); --line-strong:rgba(0,0,0,.13);
  --accent:#0a84ff; --accent-ink:#ffffff; --accent-soft:rgba(10,132,255,.12);
  --pill-info-ink:#0a84ff;
  --input-bg:rgba(10,132,255,.05); --input-border:rgba(10,132,255,.28); --input-glow:rgba(10,132,255,.16);
  --copper:#ff9f0a; --copper-soft:rgba(255,159,10,.14);
  --ok:#28a745; --ok-soft:rgba(40,167,69,.12);
  --warn:#c8790a; --warn-soft:rgba(255,159,10,.16);
  --crit:#ff3b30; --crit-soft:rgba(255,59,48,.12);
  --overdue-edge:rgba(255,59,48,.06); --overdue-ink:#c8790a; --overdue-ink-link:#a8650a;
  --row-glint:rgba(255,255,255,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 20px 50px -12px rgba(0,0,0,.18);
  color-scheme: light;
}
:root[data-theme="rimage"]{
  /* Rimage brand theme — plum pulled directly from the logo (#5b3a63),
     on a warm off-white ground instead of the app's usual cool grey, so it
     reads as a distinct brand identity rather than "light theme, recolored". */
  --bg:#f4eef3; --surface:rgba(255,252,254,.8); --surface-solid:#fbf7fa; --surface-2:#ece2e9;
  --ink:#2c2230; --ink-soft:#63566a; --ink-faint:#94879a;
  --line:rgba(91,58,99,.12); --line-strong:rgba(91,58,99,.2);
  --accent:#5b3a63; --accent-ink:#ffffff; --accent-soft:rgba(91,58,99,.12);
  --pill-info-ink:#5b3a63;
  --input-bg:rgba(91,58,99,.05); --input-border:rgba(91,58,99,.28); --input-glow:rgba(91,58,99,.16);
  --copper:#ff9f0a; --copper-soft:rgba(255,159,10,.14);
  --ok:#28a745; --ok-soft:rgba(40,167,69,.12);
  --warn:#c8790a; --warn-soft:rgba(255,159,10,.16);
  --crit:#ff3b30; --crit-soft:rgba(255,59,48,.12);
  --overdue-edge:rgba(255,59,48,.06); --overdue-ink:#c8790a; --overdue-ink-link:#a8650a;
  --row-glint:rgba(255,255,255,.6);
  --shadow-sm:0 1px 2px rgba(91,58,99,.06), 0 1px 1px rgba(91,58,99,.04);
  --shadow-lg:0 20px 50px -12px rgba(91,58,99,.18), 0 4px 14px -4px rgba(91,58,99,.1);
  color-scheme: light;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
a{color:var(--accent);text-decoration:none;transition:opacity .15s ease;}
a:hover{opacity:.75;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0 0 6px;letter-spacing:-.01em;}
h1{font-size:26px;font-weight:700;} h2{font-size:19px;font-weight:650;}
h3{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
h4{font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600;border-top:1px solid var(--line);padding-top:16px;}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}

.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}
.nav{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-right:1px solid var(--line);color:var(--ink);padding:22px 18px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  transition:background-color .25s ease, border-color .25s ease;
}
.nav .brand{display:flex;flex-direction:column;gap:9px;}
.brand-logo{
  display:inline-flex;align-items:center;width:fit-content;
  background:#ffffff;border-radius:8px;padding:9px 14px;box-shadow:var(--shadow-sm);
}
.brand-logo img{display:block;height:15px;width:auto;}
.brand-sub{
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.01em;
}
.nav .area-tag{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid transparent;
  border-radius:100px;padding:4px 10px;display:inline-block;width:fit-content;margin:10px 0 22px;
}
.nav nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav nav a{color:var(--ink-soft);padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;transition:background-color .15s ease,color .15s ease;}
.nav nav a:hover{background:var(--surface-2);color:var(--ink);opacity:1;}
.nav nav a.active{background:var(--accent);color:var(--accent-ink);}
.nav-foot{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px;font-size:13px;}
.nav-foot .me{color:var(--ink);font-weight:600;margin-bottom:2px;}
.nav-foot a{color:var(--ink-faint);}
.nav-foot a:hover{color:var(--ink);}

.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink-soft);border-radius:100px;padding:6px 6px;cursor:pointer;font-size:12px;font-weight:600;
  width:fit-content;transition:background-color .15s ease;
}
.theme-toggle:hover{background:var(--line);}
.theme-toggle .icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;}

.theme-select{
  display:block;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:100px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:600;
  width:fit-content;font-family:var(--font-body);transition:background-color .15s ease, border-color .15s ease;
  -webkit-appearance:none;appearance:none;
}
.theme-select:hover{background:var(--line);}
.theme-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.content{padding:34px 42px;max-width:1760px;}

.toast-container{position:fixed;top:22px;right:22px;z-index:1000;display:flex;flex-direction:column;gap:10px;max-width:360px;}
.toast{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-size:13.5px;
  box-shadow:var(--shadow-lg);display:flex;align-items:flex-start;gap:10px;
  animation:toast-in .35s cubic-bezier(.2,.9,.3,1.2);
}
.toast.success{border-left:3px solid var(--ok);}
.toast.error{border-left:3px solid var(--crit);}
.toast .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none;}
.toast.success .dot{background:var(--ok);}
.toast.error .dot{background:var(--crit);}
.toast .msg{color:var(--ink);flex:1;}
.toast .close{cursor:pointer;color:var(--ink-faint);font-size:15px;line-height:1;background:none;border:none;padding:0;}
.toast.leaving{animation:toast-out .25s ease forwards;}
@keyframes toast-in{from{opacity:0;transform:translateX(24px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toast-out{to{opacity:0;transform:translateX(24px) scale(.96);}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap;}
.page-head p{color:var(--ink-soft);margin:4px 0 0;max-width:60ch;}

.btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:none;
  padding:9px 18px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08);transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{opacity:.92;box-shadow:0 4px 14px -4px var(--accent);}
.btn:active{transform:scale(.97);}
.btn.secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.btn.secondary:hover{background:var(--line);opacity:1;box-shadow:none;}
.btn.small{padding:5px 12px;font-size:12.5px;}
.btn.danger{background:var(--crit);}
.btn.danger:hover{box-shadow:0 4px 14px -4px var(--crit);}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:28px;}
.stat-card{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.stat-card .num{font-family:var(--font-mono);font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;}
.stat-card .lbl{font-size:12.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.stat-card.warn .num{color:var(--warn);}
.stat-card.crit .num{color:var(--crit);}
.stat-card.ok .num{color:var(--ok);}

.tblwrap{overflow-x:auto;border:1px solid var(--input-border);border-radius:16px;background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow-sm);}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:13.5px;}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--input-border);vertical-align:top;}
.nowrap{white-space:nowrap;}
thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);background:var(--input-bg);font-weight:600;border-bottom:1px solid var(--input-border);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{
  position:relative;
  transition:background-color .16s ease, transform .2s cubic-bezier(.22,.85,.3,1.1), box-shadow .2s ease, filter .2s ease;
}
/* Lens hover: the row visually magnifies under the cursor — scale-up +
   lift + a glass-like glint — instead of a flat color swap. */
tbody tr:hover{
  background:radial-gradient(140% 220% at 28% 0%, var(--row-glint), transparent 55%), var(--accent-soft);
  transform:scale(1.03) translateY(-3px);
  box-shadow:0 14px 26px -12px var(--input-glow), 0 5px 12px -6px rgba(0,0,0,.2), 0 0 0 1.5px var(--input-border), 0 0 0 4px var(--accent-soft);
  filter:saturate(1.08) brightness(1.02);
  z-index:2;
}
tbody tr.row-overdue{background:radial-gradient(ellipse at center, transparent 0%, var(--overdue-edge) 100%);}
tbody tr.row-overdue:hover{
  background:radial-gradient(140% 220% at 28% 0%, var(--row-glint), transparent 55%), radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, var(--overdue-edge) 100%);
  transform:scale(1.03) translateY(-3px);
  box-shadow:0 14px 26px -12px var(--input-glow), 0 5px 12px -6px rgba(0,0,0,.2), 0 0 0 1.5px var(--input-border), 0 0 0 4px var(--accent-soft);
  filter:saturate(1.08) brightness(1.02);
  z-index:2;
}
tbody tr.row-overdue td{color:var(--overdue-ink);}
tbody tr.team-row-inactive{display:none;}
tbody tr.row-overdue td a{color:var(--overdue-ink-link);}
@media (prefers-reduced-motion: reduce){
  tbody tr:hover, tbody tr.row-overdue:hover{transform:none;}
}
td.num,th.num{font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
.idcode{font-family:var(--font-mono);font-weight:600;color:var(--accent);}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;padding:3px 9px;border-radius:100px;font-weight:600;white-space:nowrap;}
.pill.ok{background:var(--ok-soft);color:var(--ok);}
.pill.warn{background:var(--warn-soft);color:var(--warn);}
.pill.crit{background:var(--crit-soft);color:var(--crit);}
.pill.info{background:var(--accent-soft);color:var(--pill-info-ink);}
.pill.neutral{background:var(--surface-2);color:var(--ink-faint);}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:end;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.03em;font-weight:600;}
input,select,textarea{
  font-family:var(--font-body);font-size:14px;padding:9px 12px;border:1px solid var(--input-border);
  border-radius:10px;background:var(--input-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.03), 0 0 0 1px transparent;
}
input::placeholder,textarea::placeholder{color:var(--ink-faint);}
/* The dropdown popup is native browser/OS chrome — backdrop-filter and
   transparency don't reach it, and color-scheme alone isn't reliably
   respected across browsers, so option colors are set explicitly. */
select{color-scheme:inherit;}
select option{background:var(--surface-solid);color:var(--ink);}
select option:checked,select option:hover{background:var(--accent);color:var(--accent-ink);}
input:hover,select:hover,textarea:hover{border-color:var(--accent);}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--input-glow);outline:none;background:var(--accent-soft);}
input[readonly],select:disabled{opacity:.6;}
textarea{resize:vertical;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;max-width:720px;}
.form-grid .full{grid-column:1/-1;}
.form-card{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:18px;padding:24px 26px;margin-bottom:20px;box-shadow:var(--shadow-sm);
}

/* Animated toggle switch — replaces a plain Yes/No select for binary flags. */
.toggle-switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;width:fit-content;}
.toggle-switch input{position:absolute;opacity:0;width:1px;height:1px;}
.toggle-track{
  width:52px;height:28px;border-radius:100px;background:var(--input-bg);border:1px solid var(--input-border);
  display:inline-block;position:relative;flex:none;transition:background-color .25s ease,border-color .25s ease;
}
.toggle-thumb{
  position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:var(--ink-faint);
  box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .2s ease;
}
.toggle-switch input:checked + .toggle-track{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px -2px var(--input-glow);}
.toggle-switch input:checked + .toggle-track .toggle-thumb{transform:translateX(24px);background:#fff;}
.toggle-switch input:focus-visible + .toggle-track{outline:2px solid var(--accent);outline-offset:2px;}
.toggle-label{font-size:13.5px;font-weight:600;color:var(--ink-soft);transition:color .2s ease;}
.toggle-switch input:checked ~ .toggle-label{color:var(--accent);}

/* Quantity stepper — replaces a bare number input. */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--input-border);border-radius:10px;overflow:hidden;background:var(--input-bg);backdrop-filter:blur(12px);width:fit-content;}
.stepper button{
  width:36px;height:38px;border:none;background:transparent;color:var(--accent);font-size:17px;line-height:1;
  cursor:pointer;transition:background-color .15s ease, transform .1s ease;
}
.stepper button:hover{background:var(--accent-soft);}
.stepper button:active{transform:scale(.82);}
.stepper input{border:none !important;width:84px;text-align:center;background:transparent !important;box-shadow:none !important;}

/* Live chip preview for the product-configuration pickers. */
.config-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:34px;align-items:center;}
.config-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:100px;font-size:12.5px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--input-border);
  animation:chip-in .32s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes chip-in{from{opacity:0;transform:scale(.75) translateY(5px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.config-chip{animation:none;} .toggle-thumb{transition:none;}}

.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-card{
  background:var(--surface);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:22px;padding:38px 36px;width:340px;box-shadow:var(--shadow-lg);
}
.login-logo-wrap{display:flex;justify-content:center;margin-bottom:22px;}
.login-logo{background:#ffffff;border-radius:10px;padding:14px 22px;box-shadow:var(--shadow-sm);}
.login-logo img{display:block;height:22px;width:auto;}
.login-card h1{margin-bottom:4px;text-align:center;font-size:19px;}
.login-card p{color:var(--ink-soft);font-size:13.5px;margin:0 0 20px;}
.login-card .field{margin-bottom:14px;}
.login-card input{width:100%;}
.login-card .btn{width:100%;justify-content:center;margin-top:6px;}

.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);}
.timeline li{padding:8px 0 8px 16px;margin-left:-1px;font-size:13.5px;}
.timeline .when{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);}

.section{margin-bottom:30px;}
.muted{color:var(--ink-faint);}
.empty{padding:30px;text-align:center;color:var(--ink-faint);font-size:14px;}

details > summary{list-style:none;}
details > summary::-webkit-details-marker{display:none;}