/* ============================================================================
   Stainless Steel System — one stylesheet for the whole system.
   Colours and layout follow the reference screenshot: dark navy sidebar,
   white cards on a light ground, blue for anything you can act on.
   ========================================================================== */

:root{
  /* the sidebar */
  --nav:          #16213e;
  --nav-2:        #1d2b4d;      /* hover */
  --nav-on:       #24365f;      /* the module you are in */
  --nav-text:     #b9c2d6;
  --nav-text-on:  #ffffff;
  --nav-rule:     #26324f;

  /* the page */
  --ground:       #f4f6f9;
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --rule:         #e2e8f0;
  --rule-soft:    #eef2f7;

  --ink:          #16213e;
  --ink-mid:      #4a5678;
  --ink-soft:     #8a95ad;

  --blue:         #1d4ed8;      /* primary button */
  --blue-hover:   #1a44bd;
  --link:         #2563eb;
  --blue-soft:    #eff4ff;

  --green:        #157f4a;
  --green-soft:   #e7f6ee;
  --amber:        #b26a00;
  --amber-soft:   #fdf3e3;
  --red:          #c0362c;
  --red-soft:     #fdeceb;
  --grey-pill:    #eef1f6;

  --sidebar-w:    236px;
  --shadow:       0 1px 2px rgba(22,33,62,.06), 0 1px 3px rgba(22,33,62,.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; line-height:1.25; letter-spacing:-0.01em}
p{margin:0}
button,input,select,textarea{font-family:inherit; font-size:inherit}
button{cursor:pointer}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--link); outline-offset:2px; border-radius:4px}

/* ------------------------------------------------------------------ layout */
.app{display:flex; min-height:100vh}

.sidebar{
  flex:0 0 var(--sidebar-w); width:var(--sidebar-w);
  background:var(--nav); color:var(--nav-text);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{padding:18px 18px 16px; border-bottom:1px solid var(--nav-rule)}
.brand b{display:block; color:#fff; font-size:15px; font-weight:700; letter-spacing:-0.01em}
.brand span{display:block; color:#7f8db0; font-size:11.5px; margin-top:2px}

.nav{flex:1; overflow-y:auto; padding:10px 8px 8px}
.nav::-webkit-scrollbar{width:8px}
.nav::-webkit-scrollbar-thumb{background:#2a3757; border-radius:4px}
.nav-group{margin:10px 10px 5px; font-size:10px; font-weight:700; letter-spacing:.1em;
           text-transform:uppercase; color:#6b7899}
.nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:7px; padding:8px 10px; margin-bottom:1px;
  color:var(--nav-text); font-size:13.5px; line-height:1.35;
}
.nav button:hover{background:var(--nav-2); color:#e8edf7}
.nav button.on{background:var(--nav-on); color:var(--nav-text-on); font-weight:600}
.nav button .ic{width:17px; text-align:center; flex:0 0 17px; opacity:.9; font-size:13px}
.nav button .badge{
  margin-left:auto; background:#2c3c66; color:#c9d4ea; border-radius:9px;
  padding:0 6px; font-size:10.5px; min-width:18px; text-align:center;
  font-family:ui-monospace,monospace;
}
.nav button.on .badge{background:#3d5288; color:#fff}
.nav button .badge.alert{background:#7a2f2c; color:#ffd9d6}

.who{border-top:1px solid var(--nav-rule); padding:13px 18px 15px}
.who b{display:block; color:#fff; font-size:13px; font-weight:600}
.who span{display:block; color:#7f8db0; font-size:11.5px; margin-top:1px}
.who button{
  margin-top:8px; background:none; border:0; padding:0;
  color:#8fa3cf; font-size:11.5px; text-decoration:underline;
}
.who button:hover{color:#cfe0ff}

.main{flex:1; min-width:0; display:flex; flex-direction:column}

/* module header: title, description, actions, then the tabs */
.mhead{background:var(--surface); border-bottom:1px solid var(--rule); padding:20px 26px 0}
.mhead .row{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap}
.mhead h1{font-size:21px; font-weight:700; color:var(--ink)}
.mhead .sub{color:var(--ink-soft); font-size:13px; margin-top:3px}
.mhead .acts{margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; padding-top:2px}

.tabs{display:flex; gap:2px; margin-top:16px; overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 13px; color:var(--ink-soft); font-size:13.5px; font-weight:500;
  white-space:nowrap; display:flex; align-items:center; gap:7px;
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}
.tabs .badge{background:var(--grey-pill); color:var(--ink-mid); border-radius:9px;
             padding:0 6px; font-size:10.5px; min-width:18px; text-align:center;
             font-family:ui-monospace,monospace}
.tabs button[aria-selected="true"] .badge{background:var(--blue-soft); color:var(--blue)}

.view{padding:22px 26px 60px; flex:1}

/* ------------------------------------------------------------------- cards */
.card{background:var(--surface); border:1px solid var(--rule); border-radius:9px; box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.chead{padding:13px 17px; border-bottom:1px solid var(--rule); display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.chead h3{font-size:14.5px; font-weight:600; color:var(--ink)}
.chead .sp{margin-left:auto; display:flex; align-items:center; gap:10px}
.cbody{padding:17px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}

/* ----------------------------------------------------------------- buttons */
.btn{
  background:var(--blue); color:#fff; border:1px solid transparent; border-radius:7px;
  padding:8px 15px; font-size:13.5px; font-weight:600; white-space:nowrap;
}
.btn:hover{background:var(--blue-hover)}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--rule); font-weight:500}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:5px 11px; font-size:12.5px; border-radius:6px}
.btn.danger{background:var(--red-soft); color:var(--red); border-color:transparent; font-weight:500}
.btn.danger:hover{background:#fbdcda}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ------------------------------------------------------- search and filters */
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.search{
  flex:1 1 260px; max-width:340px; background:var(--surface);
  border:1px solid var(--rule); border-radius:7px; padding:8px 12px; color:var(--ink);
}
.search::placeholder{color:var(--ink-soft)}
.search:focus{outline:none; border-color:var(--link)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  background:var(--surface); border:1px solid var(--rule); border-radius:7px;
  padding:6px 13px; color:var(--ink-mid); font-size:13px; font-weight:500;
}
.chip:hover{border-color:#c9d4e6}
.chip.on{border-color:var(--blue); color:var(--blue); background:var(--blue-soft); font-weight:600}
.count{margin-left:auto; color:var(--ink-soft); font-size:12.5px; white-space:nowrap}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13.5px}
thead th{
  text-align:left; padding:10px 14px; background:var(--surface-2);
  border-bottom:1px solid var(--rule); color:var(--ink-soft);
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap; position:relative;
}
thead th.sortable{cursor:pointer; user-select:none}
thead th.sortable:hover{color:var(--ink-mid)}
thead th .ar{opacity:.4; margin-left:4px; font-size:9px}
thead th.sorted .ar{opacity:1; color:var(--link)}
tbody td{padding:11px 14px; border-bottom:1px solid var(--rule-soft); color:var(--ink-mid); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
td.k, th.k{color:var(--ink); font-weight:500}
td.n, th.n{text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; white-space:nowrap}
td.act{text-align:right; white-space:nowrap}
.rowlink{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--link); cursor:pointer}
.rowlink:hover{text-decoration:underline}

/* status as coloured text, as in the reference — not pills */
.st{font-weight:600; font-size:13px; white-space:nowrap}
.st-draft{color:var(--ink-soft)}
.st-sent{color:var(--amber)}
.st-partial{color:var(--link)}
.st-done{color:var(--green)}
.st-late{color:var(--red)}
/* where a pill genuinely reads better (a site, a brand) */
.pill{display:inline-block; border-radius:5px; padding:2px 8px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pill-site{background:var(--grey-pill); color:var(--ink-mid)}
.pill-blue{background:var(--blue-soft); color:var(--blue)}
.pill-green{background:var(--green-soft); color:var(--green)}
.pill-amber{background:var(--amber-soft); color:var(--amber)}
.pill-red{background:var(--red-soft); color:var(--red)}

/* ------------------------------------------------------------------- forms */
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
label.f{display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:600;
        letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
label.f input, label.f select, label.f textarea{
  background:var(--surface); border:1px solid var(--rule); border-radius:7px;
  padding:8px 11px; color:var(--ink); font-size:14px; font-weight:400;
  text-transform:none; letter-spacing:0; width:100%; line-height:1.45;
}
label.f input:focus, label.f select:focus, label.f textarea:focus{outline:none; border-color:var(--link)}
label.f .hint{font-size:11.5px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-soft); min-height:15px}
label.f.wide{grid-column:1/-1}

/* ------------------------------------------------------------------- stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:9px; padding:15px 17px; box-shadow:var(--shadow)}
.stat dt{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px}
.stat dd{margin:0; font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.stat dd small{display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:2px; letter-spacing:0}

/* -------------------------------------------------------- empty and notice */
.empty{padding:52px 24px; text-align:center; color:var(--ink-soft)}
.empty b{display:block; color:var(--ink); font-size:15px; font-weight:600; margin-bottom:5px}
.empty p{max-width:44ch; margin:0 auto; font-size:13.5px}
.note{background:var(--blue-soft); border:1px solid #d7e3fb; border-radius:8px;
      padding:11px 14px; font-size:13px; color:var(--ink-mid)}
.note b{color:var(--ink)}
.note.warn{background:var(--amber-soft); border-color:#f2e0bf}
.note.howto{display:none !important}   /* working instructions: taken off every screen */
/* an explanation folds to its first line; Read more opens it */
.note.fold{position:relative; padding-right:104px}
.note.fold:not(.open) .foldin{max-height:1.5em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.note.fold:not(.open) .foldin *{white-space:nowrap}
.note.fold:not(.open) .foldin br{display:none}
.note.fold:not(.open) .foldin > p,.note.fold:not(.open) .foldin > div{overflow:hidden; text-overflow:ellipsis}
.foldbtn{position:absolute; top:9px; right:10px; border:0; background:transparent; color:var(--blue);
         font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; padding:2px 4px}
.foldbtn:hover{text-decoration:underline}
@media print{.foldbtn{display:none} .note.fold .foldin{max-height:none; white-space:normal}}

/* the placeholder each unbuilt module shows */
.soon{background:var(--surface); border:1px solid var(--rule); border-radius:9px;
      padding:44px 30px; box-shadow:var(--shadow)}
.soon .tag{display:inline-block; background:var(--grey-pill); color:var(--ink-soft);
           font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
           padding:3px 9px; border-radius:5px; margin-bottom:14px}
.soon h2{font-size:19px; font-weight:700; margin-bottom:8px}
.soon p{color:var(--ink-mid); font-size:14px; max-width:62ch; margin-bottom:16px}
.soon ul{margin:0; padding-left:20px; color:var(--ink-mid); font-size:13.5px}
.soon li{margin-bottom:6px}
.soon .q{margin-top:20px; padding-top:16px; border-top:1px solid var(--rule-soft)}
.soon .q b{display:block; font-size:12.5px; color:var(--ink); margin-bottom:7px}

/* ------------------------------------------------------------------- toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
       background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px;
       font-size:13.5px; z-index:80; box-shadow:0 10px 30px -8px rgba(22,33,62,.5); max-width:88vw; text-align:center}
.toast[hidden]{display:none!important}

/* -------------------------------------------------------------- responsive */
@media(max-width:900px){
  .app{flex-direction:column}
  .sidebar{position:static; height:auto; width:100%; flex:none}
  .nav{display:flex; overflow-x:auto; padding:8px}
  .nav-group{display:none}
  .nav button{width:auto; white-space:nowrap}
  .who{display:flex; align-items:center; gap:12px}
  .who button{margin:0 0 0 auto}
  .mhead{padding:16px 16px 0}
  .view{padding:16px}
}

/* ------------------------------------------------------------------- print
   The order sheet. It is built into the page but hidden on screen; when you
   print, the system disappears and only the sheet is left. On a Mac the print
   dialog has "Save as PDF" at the bottom left — that is your shareable file.
   -------------------------------------------------------------------------- */
#printsheet{display:none}

@media print{
  @page{ size:A4; margin:14mm; }
  body{background:#fff; color:#000; font-size:11pt}
  .app, .toast{display:none!important}
  #printsheet{display:block!important}
  #printsheet, #printsheet *{color:#000!important}   /* ink on paper, nothing grey */

  .ps-head{display:flex; justify-content:space-between; align-items:flex-start;
           border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:14px}
  .ps-head h1{font-size:17pt; font-weight:700; letter-spacing:-0.01em}
  .ps-head .sub{font-size:9pt; margin-top:2px}
  .ps-head .rt{text-align:right}
  .ps-head .no{font-size:14pt; font-weight:700; font-family:ui-monospace,monospace}

  .ps-to{display:flex; gap:26px; margin-bottom:14px}
  .ps-to > div{flex:1}
  .ps-lab{font-size:8pt; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px}
  .ps-to b{font-size:12pt}

  #printsheet table{width:100%; border-collapse:collapse; font-size:10pt; margin-bottom:12px}
  #printsheet th{background:#eee!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;
                 border:1px solid #000; padding:5px 7px; text-align:left;
                 font-size:8pt; text-transform:uppercase; letter-spacing:.05em}
  #printsheet td{border:1px solid #000; padding:5px 7px; vertical-align:top}
  #printsheet td.n, #printsheet th.n{text-align:right; font-family:ui-monospace,monospace}
  #printsheet tfoot td{font-weight:700; background:#f4f4f4!important;
                       -webkit-print-color-adjust:exact; print-color-adjust:exact}

  .ps-note{font-size:9.5pt; margin-bottom:12px}
  .ps-foot{margin-top:18px; padding-top:8px; border-top:1px solid #000;
           display:flex; justify-content:space-between; font-size:9pt}
  .ps-foot .sign{margin-top:34px; border-top:1px solid #000; width:170px; padding-top:3px; text-align:center}
  .ps-small{font-size:8pt; margin-top:10px}
  #printsheet tr{page-break-inside:avoid}
  /* several sheets printed in one go, each on its own page */
  .ps-page{page-break-after:always; break-after:page}
  .ps-page:last-child{page-break-after:auto; break-after:auto}
  .ps-sec{font-size:12pt; font-weight:700; margin:14px 0 6px}
}

/* --------------------------------------------------------------- split bar
   A line is rarely in one state. This bar shows all four parts of it at once:
   grey what nobody has touched, amber what is being made, blue what is made
   and waiting, green what has gone.
   -------------------------------------------------------------------------- */
.bar{display:flex; height:7px; border-radius:4px; overflow:hidden; background:var(--rule-soft); min-width:70px}
.bar i{display:block; height:100%}
.bar .b-none{background:#c6cedd}
.bar .b-doing{background:#e0a33a}
.bar .b-ready{background:var(--link)}
.bar .b-sent{background:var(--green)}
.bar-lab{font-size:11.5px; color:var(--ink-soft); margin-top:4px; white-space:nowrap}
td.dim{color:#c3cbda}
td.hot{background:var(--blue-soft)}

/* ----------------------------------------------------------- filter buttons
   One button per filter. Press it and a short list drops down; pick a value
   and the button shows it. Far lighter than a row of chips once a list has
   more than three or four choices in it.
   -------------------------------------------------------------------------- */
.filt{position:relative}
.filt-btn{
  background:var(--surface); border:1px solid var(--rule); border-radius:7px;
  padding:8px 12px; color:var(--ink-mid); font-size:13.5px; font-weight:500;
  display:flex; align-items:center; gap:8px; white-space:nowrap; max-width:230px;
}
.filt-btn span{overflow:hidden; text-overflow:ellipsis}
.filt-btn i{font-style:normal; font-size:9px; opacity:.45; flex:0 0 auto}
.filt-btn:hover{border-color:#c9d4e6}
.filt-btn.on{border-color:var(--blue); color:var(--blue); background:var(--blue-soft); font-weight:600}
.filt-btn.on i{opacity:.8}

.filt-menu{
  position:absolute; top:calc(100% + 5px); left:0; z-index:60;
  background:var(--surface); border:1px solid var(--rule); border-radius:9px;
  box-shadow:0 14px 32px -12px rgba(22,33,62,.35); min-width:210px; max-width:300px; padding:5px;
}
.filt-menu[hidden]{display:none}
.filt-find{
  width:100%; border:1px solid var(--rule); border-radius:6px;
  padding:6px 9px; margin-bottom:5px; font-size:13px; color:var(--ink);
}
.filt-find:focus{outline:none; border-color:var(--link)}
.filt-list{max-height:252px; overflow-y:auto}
.filt-list button{
  display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:6px; padding:7px 10px; font-size:13.5px; color:var(--ink-mid);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.filt-list button:hover{background:var(--surface-2); color:var(--ink)}
.filt-list button.on{background:var(--blue-soft); color:var(--blue); font-weight:600}
.filt-list button[hidden]{display:none}
.filt-none{padding:8px 10px; color:var(--ink-soft); font-size:13px}

/* A dropdown that lives inside a table cell — the brand and the finish on a
   product row. It should read as part of the row, not as a form control, so
   it carries no border until you go near it. */
.cellsel{
  width:100%; border:1px solid transparent; background:transparent;
  border-radius:6px; padding:4px 6px; font-size:13.5px; color:var(--ink);
  font-family:inherit; cursor:pointer;
}
.cellsel:hover{border-color:var(--rule); background:var(--surface-2)}
.cellsel:focus{outline:none; border-color:var(--link); background:var(--surface)}
/* The size range reads as text until you click it, then it is a box. */
.szcell{border-bottom:1px dashed var(--rule); cursor:text}
.szcell:hover{border-bottom-color:var(--link); color:var(--link)}
.szedit{
  border:1px solid var(--link); border-radius:6px; padding:4px 7px;
  font-size:13.5px; color:var(--ink); font-family:inherit;
}
.szedit:focus{outline:none}
/* A head that has not been confirmed yet — the system's own guess off the name. */
.cellsel.guessed{color:var(--ink-soft); font-style:italic}

/* The finish switches on an order line: plain, or any combination of the three. */
.fins{display:inline-flex; gap:4px}
.finbtn{
  border:1px solid var(--rule); background:var(--surface); color:var(--ink-soft);
  border-radius:6px; padding:2px 7px; font-size:11.5px; font-family:inherit; cursor:pointer;
}
.finbtn:hover{border-color:var(--link); color:var(--link)}
.finbtn.on{background:var(--blue-soft); border-color:var(--link); color:var(--blue); font-weight:600}