/* NS Label job tracker — shared styling.
   Built on the company colours: Pantone 3145 teal (#00778B) and Pantone 375
   green (#97D700) on white.

   Two notes on how they are used:
   - Pantone 375 is very bright. As text on white it fails contrast, so the
     true 375 is used for fills, bars and dark-mode text, while a darkened
     version carries it as text on light backgrounds.
   - Neither company colour can mean "danger" — green already means "fine".
     A separate red stays for overdue and rejected, because an operator must
     be able to tell those apart at a glance across a workshop. */

:root{
  --paper:#F3F6F5; --surface:#FFFFFF; --surface-2:#E7EFEE;
  --line:#CFDEDC; --line-soft:#E2ECEA;
  --ink:#0E2529; --ink-2:#3D585E; --ink-3:#69848A;

  /* Pantone 3145 */
  --accent:#00778B; --accent-soft:#D7EBEF; --accent-ink:#00505E;

  /* Pantone 375 — brand green, plus a legible text version of it */
  --brand:#97D700; --brand-soft:#EDF7D4;
  --green:#5C8500; --green-soft:#EAF6D2;

  --amber:#8A5A00; --amber-soft:#FAEDD1;
  --mag:#B4123F; --mag-soft:#FBE0E6;
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1416; --surface:#112226; --surface-2:#1A3035;
    --line:#284449; --line-soft:#1F383D;
    --ink:#E4F0EF; --ink-2:#A2BBBE; --ink-3:#759399;

    --accent:#35B6CC; --accent-soft:#06333C; --accent-ink:#9BE2EE;

    /* 375 is bright enough to read directly on a dark ground */
    --brand:#97D700; --brand-soft:#1D3306;
    --green:#97D700; --green-soft:#1D3306;

    --amber:#E5B75C; --amber-soft:#382B0C;
    --mag:#FF7D96; --mag-soft:#3D0F19;
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",sans-serif;margin:0;line-height:1.2;text-wrap:balance}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.mast{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 20px}
.mast-in{max-width:1180px;margin:0 auto;display:flex;gap:16px;align-items:baseline;justify-content:space-between;flex-wrap:wrap}
.mast h1{font-size:19px;font-weight:700}
.mast .sub{color:var(--ink-3);font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 70px}

.pill{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600;padding:3px 9px;border-radius:100px}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.p-grey{color:var(--ink-3);background:var(--surface-2)}
.p-accent{color:var(--accent-ink);background:var(--accent-soft)}
.p-amber{color:var(--amber);background:var(--amber-soft)}
.p-green{color:var(--green);background:var(--green-soft)}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:820px}
th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:var(--ink-3);padding:11px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
td{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:14px}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
.jl{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--accent)}
.sub{color:var(--ink-3);font-size:12.5px}
.num{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
.stuck{display:flex;align-items:center;gap:8px;min-width:90px}
.sbar{flex:1;height:5px;border-radius:3px;background:var(--surface-2);min-width:36px;overflow:hidden}
.sbar span{display:block;height:100%;background:currentColor;border-radius:3px}
.s-ok{color:var(--ink-3)} .s-warn{color:var(--amber)} .s-bad{color:var(--mag)}
.late{color:var(--mag);font-weight:600} .soon{color:var(--amber)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.err{padding:12px 15px;border-radius:var(--radius);background:var(--mag-soft);color:var(--mag);font-weight:600;margin-bottom:16px}