/* =====================================================================
   The frame every screen sits in: the logo, the resource bar, the status
   card that folds into a place's header, and the parts every page shares —
   the strip that says where things stand, a list's tools and headings,
   buttons, fields, and the sheet a record opens in.

   Paper, as before: one warm ramp and no accent. The names here are the
   ones the new screens use; they point at the tokens index.html already
   carries, so the dark theme needs nothing of its own beyond the few
   values that have no older name.
   ===================================================================== */

:root{
  --ground:var(--black); --raised:var(--panel); --sunk:var(--panel-2);
  --rule:var(--line); --hair:var(--line-soft); --ink:var(--gold);
  --quiet:var(--muted); --faint:var(--muted-2);
  --track:#DCD6C9; --guide:#D6D0C4; --veil:rgba(242,238,229,.72);
  /* One line per supplier. KABO is 364 of the 396, so it is the quiet one;
     the other three are the ones you want to spot. */
  --sup-kabo:oklch(.80 .035 75); --sup-huapu:oklch(.66 .09 245);
  --sup-huahuang:oklch(.66 .09 155); --sup-derun:oklch(.66 .09 35);
  --gutter:24px; --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  --track:#2A2620; --guide:#2E2A24; --veil:rgba(11,11,11,.62);
  --sup-kabo:oklch(.50 .035 75); --sup-huapu:oklch(.62 .09 245);
  --sup-huahuang:oklch(.62 .09 155); --sup-derun:oklch(.62 .09 35);
}
@media(max-width:900px){ :root{--gutter:16px} }
@media(max-width:560px){ :root{--gutter:12px} }

.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.caps{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--quiet)}
.ic{display:block;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-bottom:0}
#stage{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;transition:opacity .16s ease}
#stage.leaving{opacity:0}
/* The screens from before the redesign keep their own scrolling panes. */
#stage.tool{display:flex;flex-direction:column;overflow:hidden}
.stage-body{padding-bottom:64px}

/* ---------- The logo, above everything ---------- */
.logo-band{flex:0 0 48px;height:48px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);background:var(--ground)}
.logo-band svg{height:12px;width:auto;display:block;fill:var(--ink)}
/* Once for the products, twice for light or dark. */
.logo-mark{display:flex;align-items:center;padding:10px 0;margin:-10px 0;background:none;border:none;color:inherit;cursor:pointer;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.logo-mark:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.logo-band .save-status{margin:0;font-size:11px;letter-spacing:.04em;white-space:nowrap;transition:color .3s}
@media(max-width:560px){
  .logo-band{flex-basis:30px;height:30px;justify-content:center;position:relative}
  .logo-band svg{height:8px;fill:var(--quiet)}
  .logo-band .save-status{position:absolute;right:var(--gutter);font-size:10px}
}

/* ---------- Resource bar ---------- */
/* The figures worth a glance at any moment: icons and numbers, the date and
   time at the far right where a line ends. It shares the page's gutter, so the
   bank figure stands over the logo. Built in resource-bar.js. */
#barWrap{flex:0 0 auto}
.rbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:32px;box-sizing:border-box;padding:0 var(--gutter);
  border-bottom:1px solid var(--rule);background:var(--ground);color:var(--ink);font-size:12.5px;white-space:nowrap}
.rb-left{display:flex;align-items:center;gap:20px;min-width:0}
.rb-item{display:flex;align-items:center;gap:7px;color:var(--ink)}
button.rb-item{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;cursor:pointer}
.rb-go{display:flex;align-items:center;gap:7px;background:none;border:none;padding:0;font:inherit;letter-spacing:inherit;color:inherit;cursor:pointer}
.rb-ic{width:15px;height:15px;flex:0 0 auto;display:block;fill:none;stroke:var(--quiet);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.rb-v{font-weight:400;font-variant-numeric:tabular-nums}
.rb-zero,.rb-zero .rb-v{color:var(--faint);font-weight:300}
.rb-zero .rb-ic{stroke:var(--faint)}
.rb-per{display:flex;gap:7px;margin-left:3px}
.rb-per button{background:none;border:none;border-bottom:1px solid transparent;padding:1px 0 2px;font-family:inherit;
  font-size:10px;letter-spacing:.06em;font-weight:500;color:var(--faint);cursor:pointer}
.rb-per button.on{color:var(--ink);border-bottom-color:var(--ink)}
.rb-sep{width:1px;height:14px;background:var(--rule)}
.rb-clock{display:flex;align-items:baseline;gap:9px}
.rb-date{color:var(--quiet)}
.rb-time{font-weight:400;font-variant-numeric:tabular-nums}
.rb-short{display:none}
.rb-in{width:96px;height:20px;padding:0 2px;background:transparent;border:none;border-bottom:1px solid var(--ink);outline:none;
  font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .rbar{height:34px;gap:10px;font-size:12px}
  .rb-left{gap:12px}
  .rb-item,.rb-go{gap:5px}
  .rb-ic{width:14px;height:14px}
  .rb-full{display:none}
  .rb-short{display:inline}
  .rb-per{margin-left:0}
  .rb-per button{display:none;font-size:9.5px}
  .rb-per button.on{display:block;color:var(--faint);border-bottom-color:transparent}
  .rb-sep{height:12px}
  .rb-clock{gap:6px}
}

/* ---------- Folding: the status card gives way to a place's header ---------- */
.fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .42s var(--ease),opacity .28s ease}
.fold>*{min-height:0;overflow:hidden}
.fold.shut{grid-template-rows:0fr;opacity:0;pointer-events:none}

/* ---------- Status card ---------- */
.status{height:104px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.st-sales{display:flex;flex-direction:column;gap:14px;min-width:0}
.st-figure{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.st-figure b{font-size:34px;line-height:1;font-weight:300;color:var(--ink)}
.st-figure span{font-size:13px;color:var(--quiet)}
.st-meter{position:relative;width:320px;max-width:100%;height:2px;background:var(--track)}
.st-meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);transition:width .6s var(--ease)}
.st-meter u{position:absolute;top:-4px;width:1px;height:10px;background:var(--quiet)}
.st-places{display:flex;gap:6px}
.st-place{width:78px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  background:none;border:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;transition:background .15s}
.st-place:hover{background:var(--tint)}
.st-place span{font-size:10.5px;letter-spacing:.04em;color:var(--quiet)}
@media(max-width:560px){
  .status{height:auto;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .st-sales{gap:12px;padding:18px var(--gutter) 16px}
  .st-figure b{font-size:28px}
  .st-meter{width:100%}
  .st-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair)}
  .st-place{width:auto;height:62px;gap:7px}
  .st-place span{font-size:10px}
}

/* ---------- A place's header: the way back, and the other places ---------- */
.place-bar{height:52px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.pb-back{display:flex;align-items:center;gap:6px;min-width:0;background:none;border:none;padding:0;font:inherit;color:var(--quiet);cursor:pointer}
.pb-back .ic{margin-left:-6px;padding:6px;box-sizing:content-box}
.pb-back b{font-size:16px;font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-back span{font-size:13px;color:var(--faint);white-space:nowrap}
.pb-keys{display:flex;align-items:center;gap:22px}
.pb-key{display:flex;padding:4px 0;border:none;border-top:2px solid transparent;border-bottom:2px solid transparent;background:none;
  color:var(--quiet);cursor:pointer}
.pb-key:hover{color:var(--ink)}
.pb-key.on{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:560px){ .place-bar{height:48px} .pb-back b{font-size:15px} .pb-keys{gap:18px} }

/* ---------- Where things stand: a count per stage, each a filter ---------- */
.pipe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:0 var(--gutter);border-bottom:1px solid var(--hair)}
.pipe-cell{display:flex;flex-direction:column;gap:8px;padding:18px 14px 14px 22px;border:none;border-left:1px solid var(--hair);
  border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font:inherit;text-align:left;cursor:pointer;min-width:0}
.pipe-cell:first-child{border-left:none;padding-left:0}
.pipe-cell:hover .caps{color:var(--ink)}
.pipe-cell.on{border-bottom-color:var(--ink)}
.pipe-cell.on .caps{color:var(--ink)}
.pipe-n{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.pipe-n b{font-size:30px;line-height:1;font-weight:200;color:var(--ink)}
.pipe-n b.zero{color:var(--faint)}
.pipe-n small{font-size:11px;color:var(--quiet);overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){
  .pipe{display:flex;overflow-x:auto;scrollbar-width:none;padding:0}
  .pipe::-webkit-scrollbar{display:none}
  .pipe-cell{flex:0 0 132px;padding:14px 14px 12px}
  .pipe-cell:first-child{padding-left:var(--gutter)}
  .pipe-n b{font-size:24px}
}

/* ---------- A list's tools and headings ---------- */
.list-tools{height:64px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter)}
.find{display:flex;align-items:center;gap:9px;width:320px;height:32px;box-sizing:border-box;border-bottom:1px solid var(--rule);color:var(--quiet)}
.find:focus-within{border-bottom-color:var(--ink)}
.find input{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;font:inherit;font-size:13px;color:var(--ink);letter-spacing:.02em}
.find input::placeholder{color:var(--faint)}
.choices{display:flex;align-items:center;gap:18px}
.choice{display:flex;align-items:baseline;gap:5px;padding:2px 0 5px;background:none;border:none;border-bottom:1px solid transparent;
  font:inherit;font-size:12.5px;color:var(--faint);cursor:pointer;white-space:nowrap}
.choice small{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.choice:hover{color:var(--quiet)}
.choice.on{color:var(--ink);font-weight:400;border-bottom-color:var(--ink)}
.keys{display:flex;align-items:center;gap:26px}
.keyb{display:flex;align-items:center;gap:8px;background:none;border:none;padding:4px 0;font:inherit;cursor:pointer;transition:opacity .15s}
.keyb i{width:2px;height:14px;display:block}
.keyb span{font-size:12px;color:var(--quiet)}
.keyb small{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.keys.filtering .keyb:not(.on){opacity:.35}
@media(max-width:1100px){ .keys{display:none} }
@media(max-width:560px){
  .list-tools{height:auto;flex-wrap:wrap;padding:10px var(--gutter) 8px;gap:10px 16px}
  .find{flex:1 1 100%;width:auto}
  .list-tools .choices{flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none}
  .list-tools .choices::-webkit-scrollbar{display:none}
  .list-tools .choices .cmd{margin-left:auto}
}

.heads{display:grid;align-items:center;column-gap:16px;height:40px;box-sizing:border-box;padding:0 var(--gutter);border-bottom:1px solid var(--rule)}
.heads>*{font-family:inherit;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--quiet);
  text-align:right;white-space:nowrap;background:none;border:none;padding:0}
.heads>:first-child{text-align:left}
.heads button{cursor:pointer}
.heads button:hover,.heads .sorted{color:var(--ink)}
.empty-note{padding:48px var(--gutter);font-size:13.5px;line-height:1.7;color:var(--quiet)}

/* ---------- Small parts ---------- */
.sku-card{display:inline-block;padding:2px 6px;font-size:9.5px;line-height:12px;letter-spacing:.04em;color:var(--quiet);
  background:var(--raised);border:1px solid var(--hair);white-space:nowrap;font-variant-numeric:tabular-nums}
.cmd{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;box-sizing:border-box;padding:0 16px;
  border:1px solid var(--rule);background:transparent;color:var(--ink);font:inherit;font-size:12.5px;letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;text-decoration:none;transition:border-color .15s,opacity .15s}
.cmd:hover{border-color:var(--ink)}
.cmd.primary{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.cmd.primary:hover{opacity:.86}
.cmd:disabled{border-color:var(--hair);color:var(--faint);background:transparent;cursor:default;opacity:1}
.cmd.small{height:30px;padding:0 12px;font-size:12px}
.icon-bt{width:34px;height:34px;flex:0 0 34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;
  padding:0;color:var(--quiet);cursor:pointer}
.icon-bt:hover{color:var(--ink)}
.icon-bt:disabled{color:var(--hair);cursor:default}
.link{background:none;border:none;border-bottom:1px solid var(--rule);padding:0;font:inherit;color:var(--ink);cursor:pointer}
.cmd:focus-visible,.icon-bt:focus-visible,.choice:focus-visible,.pipe-cell:focus-visible,.st-place:focus-visible,.pb-key:focus-visible,
.pb-back:focus-visible,.keyb:focus-visible,.link:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld{display:flex;align-items:center;gap:6px;min-height:34px;box-sizing:border-box;border-bottom:1px solid var(--rule);
  font-size:14px;color:var(--ink)}
.fld:focus-within{border-bottom-color:var(--ink)}
.fld>span{color:var(--faint);font-size:12.5px;white-space:nowrap}
.fld input,.fld select,.fld textarea{flex:1;min-width:0;background:none;border:none;outline:none;font:inherit;color:inherit;
  letter-spacing:.02em;padding:6px 0;text-align:inherit}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px}
.fld .ic{margin-left:-18px;pointer-events:none;color:var(--quiet)}
.fld textarea{resize:vertical;min-height:64px;line-height:1.6}
.fld input[type="checkbox"]{accent-color:var(--ink)}
.fld.bare{border-bottom-color:transparent;color:var(--quiet)}
.fld.right input{text-align:right}
.fld.changed{border-bottom-color:var(--quiet)}
.was{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:var(--quiet)}
.form-grid{display:grid;gap:18px 24px}
.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){ .form-grid.two{grid-template-columns:minmax(0,1fr)} }

/* ---------- How far along: squares for stages passed, an open one for now ---------- */
.pips{display:flex;gap:3px}
.pips i{width:6px;height:6px;box-sizing:border-box;border:1px solid var(--rule)}
.pips i.d{background:var(--ink);border-color:var(--ink)}
.pips i.n{border-color:var(--ink)}

.stepper{display:flex;gap:12px;margin-top:24px}
.step{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.step-mark{display:flex;align-items:center;gap:8px}
.step-mark i{width:9px;height:9px;flex:0 0 9px;box-sizing:border-box;border:1px solid var(--rule)}
.step-mark u{flex:1;height:1px;background:var(--rule)}
.step.done .step-mark i{background:var(--ink);border-color:var(--ink)}
.step.done .step-mark u{background:var(--ink)}
.step.now .step-mark i{border-color:var(--ink)}
.step b{font-size:12.5px;line-height:1.3;font-weight:300;color:var(--faint)}
.step.done b{color:var(--quiet)}
.step.now b{color:var(--ink);font-weight:400}
.step small{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.step.done small,.step.now small{color:var(--quiet)}
@media(max-width:560px){ .stepper{gap:8px;margin-top:18px} .step b{font-size:11px} .step small{font-size:10.5px} }

.stat{display:flex;flex-direction:column;gap:8px;min-width:0}
.stat-v{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.stat-v b{font-size:18px;line-height:1;font-weight:300;color:var(--quiet)}
.stat-v b.lead{font-size:22px;font-weight:400;color:var(--ink)}
.stat-v b.zero{color:var(--faint)}
.stat-v small{display:flex;align-items:center;gap:3px;font-size:10.5px;color:var(--quiet)}
.stat-v .hi{color:var(--faint)}
@media(max-width:560px){ .stat-v b{font-size:14px} .stat-v b.lead{font-size:18px} }

.sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--hair)}
.sum-row span{font-size:12.5px;color:var(--quiet)}
.sum-row b{font-size:14px;font-weight:300;color:var(--quiet);font-variant-numeric:tabular-nums}
.sum-row.big{padding:9px 0}
.sum-row.big b{font-size:22px;color:var(--ink)}

/* ---------- The sheet a record opens in ---------- */
.veil{position:fixed;left:0;right:0;top:var(--top-h,80px);bottom:0;z-index:40;background:var(--veil);opacity:0;pointer-events:none;
  transition:opacity .35s ease}
.veil.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:var(--top-h,80px);right:0;bottom:0;z-index:41;width:1000px;max-width:100vw;box-sizing:border-box;
  padding:32px 40px 56px;overflow-y:auto;overscroll-behavior:contain;background:var(--ground);border-left:1px solid var(--rule);
  box-shadow:-30px 0 60px rgba(11,11,11,.07);transform:translateX(101%);visibility:hidden;outline:none;
  transition:transform .45s var(--ease),visibility 0s linear .45s}
.drawer.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.drawer-grip{display:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.drawer-tools{display:flex;align-items:center;gap:6px}
.drawer-title{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.drawer-title b{font-size:32px;line-height:1.1;font-weight:300;color:var(--ink)}
.drawer-title small{font-size:12px;color:var(--quiet)}
.drawer-cols{display:flex;gap:48px;margin-top:30px}
.drawer-cols>.main{flex:1;min-width:0}
.drawer-cols>.side{flex:0 0 290px;display:flex;flex-direction:column}
@media(max-width:900px){ .drawer{padding:28px 24px 48px} .drawer-cols{flex-direction:column;gap:28px} .drawer-cols>.side{flex:none} }
@media(max-width:560px){
  .drawer{left:0;width:auto;top:calc(var(--top-h,64px) + 40px);padding:10px var(--gutter) 40px;border-left:none;
    border-top:1px solid var(--rule);box-shadow:0 -24px 50px rgba(11,11,11,.08);transform:translateY(101%)}
  .drawer-grip{display:block;width:36px;height:3px;margin:0 auto 14px;background:var(--rule)}
  .drawer-title b{font-size:26px}
}