/* iSIBAYA shared stylesheet.
   Lifted verbatim out of the single-file app on 15 Sep 2026, when iSIBAYA became a
   parent shell with modules. Nothing in here was module specific, which is why it
   could be lifted without editing a single rule. */
/* OCHRE theme. Ochre is an accent only - it never carries body text, because
   #d89a24 on white is about 2.4:1 and fails WCAG AA. Text is charcoal. */
:root{
  --ink:#1f1f1f; --muted:#6f7570; --line:#e6e2dd; --bg:#ffffff; --card:#fff;
  --accent:#d89a24; --accent-soft:#fff7ec; --warn:#a8601a; --warn-soft:#fff7ec;
  --bad:#a8322a; --bad-soft:#fbeceb;
  --r-sm:6px; --r-md:12px; --r-lg:16px; --r-xl:24px;
  --shadow:0 1px 2px rgba(31,31,31,.04), 0 8px 24px rgba(31,31,31,.06);
}
*{box-sizing:border-box}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--accent)}
body{margin:0;font:400 15px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
header{background:var(--card);border-bottom:1px solid var(--line);padding:20px 32px;position:sticky;top:0;z-index:20}
header h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px;display:flex;align-items:center;gap:12px}
header .sub{color:var(--muted);font-size:13px;margin-top:2px;margin-left:44px}
.mark{width:32px;height:32px;flex:0 0 32px}
/* Home, beside the iSIBAYA name on every page (Scott, 22 Oct 2026). */
.homeLink{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:8px;color:var(--muted);background:#fff;margin-left:2px}
.homeLink:hover{color:var(--ink);border-color:var(--ink)}
.homeLink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.steps{display:flex;gap:8px;margin-top:16px;margin-left:44px;flex-wrap:wrap;align-items:center}
.step{font-size:13px;font-weight:500;padding:7px 14px;border-radius:99px;background:#fff;color:var(--muted);border:1px solid var(--line)}
.step.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.step.done{background:var(--accent-soft);color:#8a6414;border-color:#eedcbf}
main{max-width:1180px;margin:0 auto;padding:32px}
#admin{max-width:none}
/* Option cards sit in an even grid: equal widths, no ragged stack (16 Oct 2026). */
.picklist{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px;margin-top:16px}
.picklist .pickcard{min-width:0}
/* Home sizes its card to the choices on it, so 1 or 2 options do not float in a wide empty box. */
#modules{max-width:calc(var(--cols,3) * 320px + (var(--cols,3) - 1) * 16px + 50px);margin-left:auto;margin-right:auto}
@media (max-width:640px){ .picklist{grid-template-columns:1fr} #modules{max-width:none} }
.bizback{display:inline-block;margin-top:18px;font-size:14px}
.pickcard{position:relative;flex:1 1 260px;min-height:128px;padding:24px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(31,31,31,.04);transition:.15s}
.pickcard:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
.pickcard:disabled{opacity:1;cursor:not-allowed;background:#fff}
.pickhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.picktitle{font-size:18px;font-weight:600;letter-spacing:-.1px;display:flex;align-items:center;gap:10px}
.pickcard:disabled .picktitle{color:var(--muted)}
.picksub{font-size:14px;font-weight:400;color:var(--muted)}
.pickarrow{position:absolute;right:24px;bottom:20px;color:var(--accent);font-size:18px}
.dot{width:8px;height:8px;border-radius:99px;background:var(--accent);display:inline-block}
.badge{font-size:11px;font-weight:500;letter-spacing:.4px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;background:#fff;white-space:nowrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;margin-bottom:24px;box-shadow:var(--shadow)}
h2{font-size:20px;font-weight:600;letter-spacing:-.2px;margin:0 0 6px}
.hint{color:var(--muted);font-size:14px;margin:0 0 20px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600;letter-spacing:.2px}
select,input,button{font:inherit;padding:12px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
select,input{width:100%}
input:invalid{border-color:var(--bad);background:var(--bad-soft)}
button{cursor:pointer;background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;border-radius:8px}
button:hover{filter:brightness(.95)}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.ghost{background:#fff;color:var(--ink);border-color:var(--line);font-weight:500}
button:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.row>div{flex:1;min-width:170px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--accent);background:var(--accent-soft)}
th.sort::after{content:"\2195";opacity:.25;margin-left:5px;font-size:10px}
th.sort[data-on="asc"]{color:var(--accent)}
th.sort[data-on="asc"]::after{content:"\2191";opacity:1}
th.sort[data-on="desc"]{color:var(--accent)}
th.sort[data-on="desc"]::after{content:"\2193";opacity:1}
td{padding:8px 10px;border-bottom:1px solid #eef3f0;vertical-align:middle}
tr:hover td{background:#fafcfb}
.scroll{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.tag{font-size:11px;padding:2px 7px;border-radius:5px;background:var(--bg);color:var(--muted);white-space:nowrap}
.tag.route{background:var(--accent-soft);color:var(--accent)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.pend{background:#fdf3e7;color:#a8601a;border:1px solid #eedcbf;font-weight:700}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.right{text-align:right}
.msg{padding:11px 13px;border-radius:8px;font-size:13px;margin-bottom:12px;display:none}
.msg.err{background:var(--bad-soft);color:var(--bad);border:1px solid #f0cfcc;display:block}
.msg.ok{background:var(--accent-soft);color:var(--accent);border:1px solid #bfded1;display:block}
.hidden{display:none}
.count{font-size:13px;color:var(--muted);margin:10px 0}
.terms td{padding:6px 8px}
.terms input,.terms select{padding:6px 8px;font-size:13px}
.landed{font-size:11px;color:var(--muted);margin-top:3px}
.challenge{font-size:12px;margin-top:5px;line-height:1.45;border-radius:6px}
.challenge:not(:empty){padding:7px 10px;background:var(--warn-soft);color:var(--warn);
  border:1px solid #eedcbf}
.challenge.ok:not(:empty){background:var(--accent-soft);color:#8a6414;border-color:#eedcbf}
.challenge b{font-weight:700}
.challenge .ack{font-size:11px;font-weight:600;padding:4px 10px;margin-left:4px;
  background:var(--warn);border-color:var(--warn);color:#fff;border-radius:99px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.note{font-size:12px;color:var(--muted)}
/* Data Quality: one product per card, nothing squeezed, barcode readable at a glance */
.qcard{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:#fff}
.qcard:hover{border-color:#bfded1}
.qtop{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.qtop .grow{flex:1;min-width:260px}
.qid{display:flex;gap:10px;flex-wrap:wrap}
.qid > div{flex:0 0 auto}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.qcard label{margin-bottom:3px}
.qcard input,.qcard select{padding:7px 9px;font-size:13px}
.qbig{font-size:14px;font-weight:600;letter-spacing:.4px}
.qflags{display:flex;gap:18px;align-items:center;padding-top:20px}
.qflags label{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--ink);font-weight:500;margin:0;text-transform:none;letter-spacing:0}
.qflags input{width:auto}
.qact{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:12px;padding-top:11px;border-top:1px solid #eef3f0;flex-wrap:wrap}
/* sub-department chips - pick one or several, short code leads */
.msel{position:relative}
.mselbtn{width:100%;text-align:left;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 34px 12px 20px;font-weight:400;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mselbtn:hover{filter:none}
.msel::after{content:"";position:absolute;right:14px;top:50%;margin-top:-2px;pointer-events:none;
  border:5px solid transparent;border-top-color:#1f1f1f}
.mselpanel{position:absolute;z-index:40;top:calc(100% + 4px);left:0;min-width:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:6px;max-height:260px;overflow:auto}
.mselpanel label{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;
  font-weight:400;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0;margin:0;cursor:pointer;white-space:nowrap}
.mselpanel label:hover{background:var(--accent-soft)}
.mselpanel input{width:auto;padding:0;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.chip{font-size:12px;padding:5px 11px;border-radius:99px;cursor:pointer;user-select:none;
  background:var(--bg);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip .c{font-weight:700;letter-spacing:.4px}
.chip .n{opacity:.75;margin-left:6px}
.chip.clear{background:#fff}
.quick{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  padding:12px 14px;border:1px dashed var(--line);border-radius:10px;margin-top:14px;background:#fafcfb}
.quick .grow{flex:1;min-width:240px}

/* ---- PRINT ----------------------------------------------------------------
   Cmd-P on the register gives a PDF. No library: a stylesheet is the whole
   feature.

   @page IS DELIBERATELY OUTSIDE @media print. Inside the media block Chrome
   ignored it and printed portrait US Letter - 6 pages for 35 rows, and slow
   with it (13 Aug 2026).

   FEWER COLUMNS ON PAPER. The screen shows 14; a printed page cannot hold
   them legibly, and forcing it is what made Chrome reflow for minutes.
   Category, Size, Pack and Stores are dropped - Category and Size are usually
   what you filtered BY, and the filter is printed at the top of the sheet. */
/* `size: landscape` ALONE, not `A4 landscape`. Chrome silently drops the
   whole declaration when a paper name is combined with an orientation - two
   attempts printed portrait US Letter regardless (13 Aug 2026). Orientation
   on its own is honoured, and the paper size then follows the printer, which
   is what you want anyway. */
@page{ size: landscape; margin: 10mm; }

@media print{
  /* Sticky must be off or Chrome's pagination spins: header and th are
     position:sticky for the screen, and a sticky thead repeated across pages
     never settles. */
  header, th{ position:static !important; }
  header .steps, .noprint, button, nav{ display:none !important; }
  /* Strip the other screens outright. They are already .hidden, but this is a
     single-file app: every screen lives in the same DOM, and Data Quality
     alone carries a thousand rows. display:none stops layout, not style
     resolution, and Chrome still walks the lot before it can paginate one
     table - which is where the minute of "Loading preview" was going.
     If print is still slow with these gone, the cost is elsewhere and the
     real answer is a standalone print page, not more CSS (13 Aug 2026). */
  #step1, #step2, #step3, #done, #admin, #deals, #work, #suppliers,
  #chooser, #notbuilt, #login, #setpw{ display:none !important; }
  body{ background:#fff; }
  .card{ border:none; box-shadow:none; padding:0; margin:0; }
  .scroll{ overflow:visible !important; max-height:none !important; border:none !important; }

  /* The screen sets pixel widths on every th so columns line up while
     scrolling. Those totals exceed the page, so Chrome had to scale and
     reflow every row. Let print lay the table out itself. */
  #regTable{ width:100% !important; table-layout:fixed; font-size:8pt; }
  #regTable th, #regTable td{ width:auto !important; padding:3px 5px !important; }
  /* Break long values, but never headings - that gave "REFEREN CE". */
  #regTable td{ word-break:break-word; overflow-wrap:anywhere; }
  #regTable th{ word-break:normal; overflow-wrap:normal; hyphens:none; }
  /* 4 Category, 7 Size, 9 Pack, 14 Stores */
  #regTable th:nth-child(4),  #regTable td:nth-child(4),
  #regTable th:nth-child(7),  #regTable td:nth-child(7),
  #regTable th:nth-child(9),  #regTable td:nth-child(9),
  #regTable th:nth-child(14), #regTable td:nth-child(14){ display:none; }

  thead{ display:table-header-group; }
  tr{ break-inside:avoid; }
  .printonly{ display:block !important; }
}
.printonly{ display:none; }

/* store chooser (Control Desk #13): one compact labelled dropdown, shared by Stock and Focus */
.storechooser{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted);font-weight:500}
.storechooser select{width:auto;min-width:200px;max-width:100%;padding:6px 30px 6px 10px;font-size:13.5px;color:var(--ink);
  font-weight:600;border-radius:8px;cursor:pointer}
.storechooser select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:640px){ .storechooser{display:flex;width:100%} .storechooser select{flex:1;min-width:0;min-height:40px} }