:root {
  --mbar-h: 52px;          /* the top bar on phones and tablets */
  /* Light mode: white background. */
  --bg: #ffffff; --surface: #ffffff; --ink: #1c2330; --muted: #5f6b7a; --line: #dfe3e8;
  --brand: #1f3a5f; --brand-ink: #ffffff; --accent: #2563eb;
  --bad: #b42318; --bad-bg: #fdecea; --good: #067647; --good-bg: #e7f6ec;
  --warn: #9a6700; --warn-bg: #fff4d6; --cat-bg: #f1f4f8;
  --fulfill-ink: #ffffff;
  --radius: 8px;
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 14px; color: var(--ink);
}
/* Dark mode: the user's saved choice (data-theme="dark"), or the computer's setting when they chose
   System (data-theme="system") and before sign-in (no data-theme). */
:root[data-theme="dark"] {
  --bg: #12161d; --surface: #1a2029; --ink: #e6e9ee; --muted: #9aa3b2; --line: #2b3340;
  --brand: #16283f; --accent: #6ea0ff;
  --bad: #ff8a80; --bad-bg: #3a1d1d; --good: #6fd39b; --good-bg: #183225;
  --warn: #f0c24b; --warn-bg: #3a3017; --cat-bg: #212936;
  --fulfill-ink: #0d1f15;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="system"] {
    --bg: #12161d; --surface: #1a2029; --ink: #e6e9ee; --muted: #9aa3b2; --line: #2b3340;
    --brand: #16283f; --accent: #6ea0ff;
    --bad: #ff8a80; --bad-bg: #3a1d1d; --good: #6fd39b; --good-bg: #183225;
    --warn: #f0c24b; --warn-bg: #3a3017; --cat-bg: #212936;
    --fulfill-ink: #0d1f15;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 4px 0 6px; }
h2 { font-size: 15px; margin: 0 0 12px; }
h3 { font-size: 13px; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

.top { display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 52px;
       background: var(--brand); color: var(--brand-ink); position: sticky; top: 0; z-index: 10; }
.brand { color: #fff; font-weight: 700; white-space: nowrap; }
.top nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; }
.top nav a { color: #cfd8e6; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.top nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.top nav a.on { color: #fff; background: rgba(255,255,255,.16); }
.who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfd8e6; }
.who input { width: 140px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; }
.who input.missing { border-color: #f5b400; box-shadow: 0 0 0 2px rgba(245,180,0,.4); }

main { max-width: 1400px; margin: 0 auto; padding: 18px 20px 60px; }
.crumb { margin: 0; font-size: 12px; color: var(--muted); }

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; }
.flash.ok { background: var(--good-bg); color: var(--good); }
.flash.error { background: var(--bad-bg); color: var(--bad); }

.cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 12px 16px; min-width: 130px; color: var(--ink); }
a.card:hover { border-color: var(--accent); text-decoration: none; }
.card .num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.card .lbl { color: var(--muted); font-size: 12px; text-transform: capitalize; }
.card.small .num { font-size: 20px; }
.card.bad .num { color: var(--bad); }
.card.good .num { color: var(--good); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 16px; margin-bottom: 16px; min-width: 0; }
.panel.narrow { max-width: 640px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .two { grid-template-columns: minmax(0, 1fr); } }

.bars { display: grid; gap: 6px; }
.bar { display: grid; grid-template-columns: 200px 1fr 50px; gap: 10px; align-items: center; color: var(--ink); }
.bar:hover { text-decoration: none; }
.bar:hover .bar-label { color: var(--accent); }
.bar-track { height: 14px; background: var(--cat-bg); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--bad); border-radius: 3px; }
.bar-val { text-align: right; color: var(--bad); font-weight: 600; font-variant-numeric: tabular-nums; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 12px; }
.filters.sticky { position: sticky; top: 52px; background: var(--bg); padding: 10px 0; z-index: 5; }
.spacer { flex: 1; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
input[type=search] { min-width: 240px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button, .btn { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px;
               cursor: pointer; display: inline-block; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); }
.btn:hover { text-decoration: none; filter: brightness(1.05); }
button.small { padding: 3px 10px; font-size: 12px; }
button.danger { background: var(--bad); }
button.link { background: none; color: var(--muted); padding: 0; font-size: 12px; }
button.link:hover { color: var(--bad); }
form.inline { display: inline; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; align-items: end; margin-bottom: 12px; }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.grid label.w2 { grid-column: span 2; }
.grid label.w3 { grid-column: span 3; }
.grid label.check { flex-direction: row; align-items: center; grid-column: span 2; color: var(--ink); }
.grid input, .grid select, .grid textarea { color: var(--ink); width: 100%; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } .grid label.w2, .grid label.w3 { grid-column: auto; } }

details.add { margin-top: 12px; }
details.add summary { cursor: pointer; color: var(--accent); margin-bottom: 10px; }

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel .table-wrap { border: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { position: sticky; top: 0; background: var(--surface); font-size: 12px; color: var(--muted);
           font-weight: 600; white-space: nowrap; }
.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.cat th { background: var(--cat-bg); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr.short td { background: var(--bad-bg); }
tr.short .net { color: var(--bad); font-weight: 700; }
tr.inactive td { opacity: .5; }
td.clip { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
td.actions { white-space: nowrap; text-align: right; }
td.empty { text-align: center; color: var(--muted); padding: 24px; }
tfoot th { border-top: 2px solid var(--line); }
table.compact td, table.compact th { padding: 5px 8px; font-size: 13px; }

select.status { font-size: 12px; padding: 3px 6px; font-weight: 600; }
.s-ready-to-ship { background: var(--good-bg); color: var(--good); }
.s-hold, .s-hold-mgr, .s-hold-op, .s-hold-shipping { background: var(--warn-bg); color: var(--warn); }
.s-shipped { background: var(--good-bg); color: var(--good); }
.s-cancelled { background: var(--cat-bg); color: var(--muted); }
.s-pi-pending, .s-approved { background: var(--cat-bg); color: var(--accent); }

.tag { font-size: 12px; font-weight: 600; background: var(--cat-bg); color: var(--muted); padding: 2px 8px;
       border-radius: 10px; vertical-align: middle; }

.entry-grid { columns: 3 320px; column-gap: 16px; }
.entry-grid fieldset { break-inside: avoid; background: var(--surface); border: 1px solid var(--line);
                       border-radius: var(--radius); margin: 0 0 16px; padding: 8px 12px; }
.entry-grid legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0 4px; }
.entry-row { display: grid; grid-template-columns: 1fr auto 80px; gap: 8px; align-items: center;
             padding: 3px 4px; border-radius: 4px; }
.entry-row input { width: 80px; text-align: right; }
.entry-row.hit { background: var(--warn-bg); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 8px 0; border-bottom: 1px solid var(--line); }

.top nav { scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
table.stock td:nth-child(-n+2), table.stock td:nth-child(7) { white-space: nowrap; }
/* Comments take whatever width is left, so the Stock table fits a laptop screen (full text on hover). */
table.stock td.clip { width: 100%; max-width: 0; min-width: 140px; }
@media (max-width: 1199px) { table.stock td:nth-child(7) { white-space: normal; min-width: 70px; }
                             table.stock td.clip { min-width: 60px; } }
/* Narrower still: the Stock table scrolls sideways in its own box (header then stays with the table). */
@media (max-width: 1099px) { .table-wrap.sticky-head:has(table.stock) { overflow-x: auto; }
                             .table-wrap.sticky-head:has(table.stock) thead th { top: 0; } }
.detail .table-wrap, .panel .table-wrap { border: 0; background: none; }
table td:first-child a { white-space: nowrap; }
@media (max-width: 900px) { .top .brand { display: none; } .who label { display: none; } }
@media (max-width: 1150px) {
  .top { gap: 10px; padding: 0 12px; }
  .top .brand { display: none; }
  .top nav a { padding: 8px 8px; }
}
.card .lbl.status-lbl { text-transform: none; font-size: 11px; letter-spacing: .03em; }
table.orders td { white-space: nowrap; }
.filters select { max-width: 260px; }

/* auth & roles */
.auth-box { max-width: 380px; margin: 40px auto; }
/* Sign in: the box in the middle of the window (a wrong-password message sits just above it) */
body.page-login main { min-height: 100vh; box-sizing: border-box; display: grid; align-content: center;
                       justify-items: center; padding: 24px 16px; }
body.page-login main > .flash, body.page-login .auth-box { width: 100%; max-width: 380px; box-sizing: border-box; }
body.page-login .auth-box { margin: 0; position: relative; }
/* Sign in: the Backorder Tracker logo above the box, small boxes scattered faintly behind */
body.page-login { position: relative; }
body.page-login::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: var(--line); opacity: .55;
  -webkit-mask: url("login-pattern.svg") 0 0 / 240px 240px repeat; mask: url("login-pattern.svg") 0 0 / 240px 240px repeat; }
body.page-login main { position: relative; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-mark { color: var(--accent); flex: none; }
.login-brand strong { display: block; font-size: 26px; letter-spacing: -.01em; color: var(--ink); }
.login-brand span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.stack { display: grid; gap: 12px; margin: 16px 0; }
.stack label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.stack input { color: var(--ink); }
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; display: contents; }
fieldset.plain[disabled] input, fieldset.plain[disabled] textarea, fieldset.plain[disabled] select { opacity: .75; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
td.c { text-align: center; }
.roles { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.roles label.check { display: flex; flex-direction: row; gap: 6px; align-items: center; color: var(--ink); font-size: 13px; }
.me { position: relative; margin-left: auto; font-size: 13px; }
.me summary { cursor: pointer; list-style: none; padding: 6px 10px; border-radius: 6px; color: #fff; white-space: nowrap; }
.me summary::after { content: " ▾"; color: #cfd8e6; }
.me summary:hover { background: rgba(255,255,255,.08); }
.me-menu { position: absolute; right: 0; top: 36px; background: var(--surface); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 8px; display: grid; gap: 6px; min-width: 170px;
           box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.me-menu a, .me-menu button.link { color: var(--ink); font-size: 13px; text-align: left; padding: 4px 6px; }
.grid .roles { grid-column: 1 / -1; }
.roles label.check { white-space: nowrap; grid-column: auto; }

/* multi-line order entry */
.lines-head, .line { display: grid; gap: 8px; align-items: end;
  grid-template-columns: 24px minmax(200px, 2.2fr) 72px 100px 100px 145px 125px minmax(130px, 2fr) 28px; }
.lines-head { font-size: 12px; color: var(--muted); padding: 0 0 4px; }
.line { padding: 8px 0; border-top: 1px solid var(--line); }
.line label span { display: none; }
.line input, .line select { width: 100%; }
.line-no { color: var(--muted); font-variant-numeric: tabular-nums; padding-bottom: 8px; }
.line .remove { font-size: 16px; padding-bottom: 6px; }
#add-line { margin-top: 12px; }
.form-foot { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) {
  .lines-head { display: none; }
  .line { grid-template-columns: 1fr 1fr; }
  .line label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
  .line label span { display: inline; }
  .line label:first-of-type, .line label:last-of-type { grid-column: 1 / -1; }
  .line-no { grid-column: 1 / -1; font-weight: 700; color: var(--ink); padding: 0; }
  .line-no::before { content: "Line "; }
  .line .remove { grid-column: 1 / -1; justify-self: end; padding: 0; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  /* stacked lines, three fields per row */
  .line { grid-template-columns: repeat(3, 1fr); }
}
.customer-picker { display: grid; gap: 6px; }
.customer-picker select, .customer-picker input { width: 100%; color: var(--ink); }
.remove-form { display: flex; gap: 6px; align-items: center; }
.remove-form select { font-size: 12px; padding: 3px 6px; max-width: 260px; }
.cust-name .rename-btn { margin-left: 8px; opacity: .75; }
.cust-name .rename-btn:hover, .cust-name .rename-btn:focus-visible { color: var(--accent); opacity: 1; }
.rename-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rename-form input[name=name] { flex: 1 1 220px; min-width: 0; max-width: 360px; padding: 4px 8px; }
.rename-form .rename-cancel:hover { color: var(--ink); }
button.fulfill { background: var(--good); color: var(--fulfill-ink); }
td.actions.lead { text-align: left; width: 1%; padding-right: 4px; }
tr.col-filter th { padding-top: 0; top: auto; position: static; }
tr.col-filter input { width: 100%; min-width: 120px; font-weight: normal; font-size: 13px; padding: 4px 8px; }
/* merged orders */
table.merged tr.grp td { border-top: 1px solid var(--line); }
table.merged tr.line-row td { background: var(--cat-bg); font-size: 13px; border-bottom-color: transparent; }
table.merged .toggle { font-size: 14px; width: 18px; color: var(--muted); padding: 0 4px 0 0; }
table.merged .toggle:hover { color: var(--accent); }
table.merged td.lead { white-space: nowrap; }
table.merged .products { white-space: nowrap; }
button.fulfill.ghosty { background: transparent; color: var(--good); border: 1px solid var(--good); }
table.merged td.cust, table.merged td.prod { max-width: 230px; overflow: hidden; text-overflow: ellipsis; }
table.merged td.cust a { white-space: nowrap; }
table.merged td.prod .products { display: block; overflow: hidden; text-overflow: ellipsis; }
table.merged td.clip { max-width: 220px; }
table.merged td.trim { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
table.merged td.cust, table.merged td.prod { max-width: 200px; }
table.merged td.clip { max-width: 180px; }
table.merged tr.col-filter input { min-width: 90px; }

/* in-page confirmation dialog */
#confirm-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; max-width: 460px; width: calc(100% - 32px);
               background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#confirm-dlg::backdrop { background: rgba(10, 14, 20, .55); }
#confirm-dlg h2 { margin: 0 0 10px; font-size: 16px; }
#confirm-msg { white-space: pre-line; margin: 0 0 18px; line-height: 1.5; }
#notice-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; max-width: 360px; width: calc(100% - 32px);
              background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#notice-dlg::backdrop { background: rgba(10, 14, 20, .55); }
#notice-msg { margin: 0 0 18px; font-size: 16px; font-weight: 600; }
#notice-dlg button { min-width: 80px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* fulfill dialog */
#fulfill-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; width: min(620px, calc(100% - 32px));
               background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#fulfill-dlg::backdrop { background: rgba(10, 14, 20, .55); }
#fulfill-dlg h2 { margin: 0 0 4px; font-size: 16px; }
.fulfill-table { margin: 12px 0; }
.fulfill-table input { width: 80px; text-align: right; }
.fulfill-table tr.partial td { background: var(--warn-bg); }
.fulfill-table .left { color: var(--muted); }
.fulfill-foot { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; font-size: 13px; }
.fulfill-foot label { display: flex; align-items: center; gap: 8px; color: var(--muted); }
button.fulfill:disabled { opacity: .5; cursor: not-allowed; }
.shipped-note { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.fulfill-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; }
.danger-zone { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.danger-zone h2 { color: var(--bad); }
.danger-zone p { margin: 0 0 12px; }

/* Frozen column headers: pin to the page (just under the top bar) instead of the table box.
   On narrow screens the table keeps its own horizontal scroll instead. */
@media (min-width: 900px) {
  .table-wrap.sticky-head { overflow: visible; }
  .table-wrap.sticky-head thead th { top: 52px; z-index: 4; box-shadow: inset 0 -1px 0 var(--line); }
}

/* Orders tab: header row (with the order # search) freezes like the Stock table.
   The Notes column absorbs the leftover width so the table fits the screen. */
table.merged thead th { vertical-align: bottom; }
table.merged th.col-search { min-width: 110px; }
table.merged th.col-search input { display: block; width: 100%; margin-top: 4px; font-weight: normal;
                                   font-size: 13px; padding: 4px 8px; color: var(--ink); }
table.merged td.notes-col { width: 100%; max-width: 0; }
@media (max-width: 1199px) {
  /* Too narrow to fit: keep the table's own horizontal scroll. The header then belongs to the
     table box, so it must not be offset for the page's top bar (that pushed it over the first row). */
  .table-wrap.sticky-head:has(table.merged) { overflow-x: auto; }
  .table-wrap.sticky-head:has(table.merged) thead th { top: 0; }
}
table.merged th.col-search input[type=search] { min-width: 0; max-width: 170px; }
.newtab-blocked a, .newtab-blocked button.link { color: inherit; text-decoration: underline; font-size: inherit; cursor: pointer; }

/* cancel */
button.cancel-btn { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); margin-left: 4px; }
button.cancel-btn:hover { background: var(--bad-bg); }
.btn.ghost.danger-ghost { color: var(--bad); }
#cancel-dlg { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; width: min(560px, calc(100% - 32px));
              background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#cancel-dlg::backdrop { background: rgba(10, 14, 20, .55); }
#cancel-dlg h2 { margin: 0 0 4px; font-size: 16px; }
.cancel-reason { display: grid; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.cancel-reason input { color: var(--ink); }
button.danger:disabled { opacity: .5; cursor: not-allowed; }
td.nowrap { white-space: nowrap; }

/* monthly / date range */
.h1-sub { font-weight: 500; font-size: 16px; margin-left: 6px; }
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.period-bar .filters { margin: 4px 0; }
.period-bar label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.chip { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); }
.chip:hover { border-color: var(--accent); text-decoration: none; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
p.panel.empty { text-align: center; color: var(--muted); padding: 24px; }
.rename-form { display: flex; gap: 10px; max-width: 520px; }
.rename-form input { flex: 1; }

/* settings: mode picker */
.mode-picker { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.mode-option { display: grid; justify-items: center; gap: 8px; padding: 12px; border: 2px solid var(--line);
               border-radius: 10px; cursor: pointer; min-width: 140px; font-weight: 600; }
.mode-option.on, .mode-option:has(input:checked) { border-color: var(--accent); }
.mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.mode-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-swatch { display: grid; gap: 5px; width: 116px; height: 72px; padding: 8px; border-radius: 6px; border: 1px solid #0003; }
.mode-swatch span { border-radius: 3px; }
.mode-dark { background: #12161d; }
.mode-dark span { background: #2b3340; }
.mode-light { background: #ffffff; }
.mode-light span { background: #dfe3e8; }
.mode-system { background: linear-gradient(135deg, #ffffff 50%, #12161d 50%); }
.mode-system span { background: #8d97a5; }
.mode-swatch span:first-child { background: #1f3a5f; }

/* Bold text setting: everything bold; headings, totals and emphasis a step heavier. */
:root[data-text="bold"] body, :root[data-text="bold"] body * { font-weight: 600 !important; }
:root[data-text="bold"] :is(h1, h2, h3, strong, b, th, .num, .brand, .bar-val, tr.short .net, .mode-option) { font-weight: 800 !important; }
.text-sample { display: grid; place-items: center; width: 116px; height: 72px; border-radius: 6px; border: 1px solid var(--line);
               background: var(--bg); font-size: 26px; line-height: 1; }
.text-sample small { font-size: 11px; color: var(--muted); }
:root .mode-option .text-regular, :root .mode-option .text-regular small { font-weight: 400 !important; -webkit-text-stroke: 0; }
:root .mode-option .text-bold, :root .mode-option .text-bold small { font-weight: 800 !important; -webkit-text-stroke: 0; }
/* Boldest text setting: a full step past Bold, with a hairline outline so every letter reads thicker. */
:root[data-text="boldest"] body, :root[data-text="boldest"] body * { font-weight: 700 !important; -webkit-text-stroke: .35px currentColor; }
:root[data-text="boldest"] :is(h1, h2, h3, strong, b, th, .num, .brand, .bar-val, tr.short .net, .mode-option) { font-weight: 900 !important; }
:root .mode-option .text-boldest, :root .mode-option .text-boldest small { font-weight: 900 !important; -webkit-text-stroke: .6px currentColor; }
/* Slightly narrower long-text columns so the Orders table also fits with Bold text. */
table.merged td.cust, table.merged td.prod { max-width: 180px; }
table.merged td.trim { max-width: 125px; }
/* On hand column (Orders tab): green = enough stock to ship the line, red = not enough */
td.onhand { white-space: nowrap; }
.stock-ok { color: var(--good); font-weight: 600; }
.stock-short { color: var(--bad); font-weight: 700; }
td.onhand span[class^="stock-"]:not(:only-child) { font-size: 12px; }
@media (max-width: 520px) {
  /* Fulfill / cancel dialogs on phones: tighter columns so "Left after" stays in view. */
  .fulfill-table th, .fulfill-table td { padding: 5px 4px; }
  .fulfill-table input { width: 56px; }
  .fulfill-table .muted.small { display: none; }
  #fulfill-dlg, #cancel-dlg { padding: 16px 14px; }
}
.flash.info { background: var(--cat-bg); color: var(--muted); }


/* ================= Option C: sidebar layout ================= */
body.with-side { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
/* Sidebar and page each have a fixed place in the grid. Browser extensions (Grammarly, translators, password
   managers...) can slip their own elements into the page; without this, one landing between the two pushes
   the page into the narrow sidebar column, underneath the sidebar. */
body.with-side > .side { grid-column: 1; grid-row: 1; }
body.with-side > main { grid-column: 2; grid-row: 1; }
body.with-side > main { max-width: 1500px; width: 100%; margin: 0; padding: 18px 24px 60px; min-width: 0; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
        background: var(--brand); color: #cfd8e6; padding: 14px 10px; overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; padding: 4px 8px 16px; }
.side-brand:hover { text-decoration: none; }
.side nav { display: grid; gap: 2px; }
.side a, .side .side-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
        color: #cfd8e6; font-size: 14px; background: none; width: 100%; text-align: left; }
.side a:hover, .side .side-link:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.side a.on { background: rgba(255,255,255,.16); color: #fff; }
.side .ic { flex: none; }
.side-sep { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8ea0b8; padding: 14px 10px 4px; }
.side-foot { margin-top: auto; display: grid; gap: 2px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; color: #fff; font-size: 13px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid;
          place-items: center; font-weight: 700; font-size: 12px; }
/* No top bar any more: sticky headers pin to the very top. */
body.with-side .filters.sticky { top: 0; }
@media (min-width: 900px) { body.with-side .table-wrap.sticky-head thead th { top: 0; } }
.side-top { display: flex; align-items: center; }
.side-top .side-brand { flex: 1; min-width: 0; }
/* Phones and tablets: a top bar with a menu button, and the sidebar slides out as the menu. */
.mbar, .menu-close, .side-backdrop { display: none; }
@media (max-width: 900px) {
  body.with-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }   /* top bar, then the page */
  body.with-side > .mbar { grid-column: 1; grid-row: 1; }
  body.with-side > main { grid-column: 1; grid-row: 2; }
  .mbar { display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 40; height: var(--mbar-h);
          padding: 0 4px; background: var(--brand); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .menu-btn, .mbar-inbox, .menu-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
          background: none; border: 0; border-radius: 8px; padding: 0; color: #fff; position: relative; }
  .menu-btn:hover, .mbar-inbox:hover, .menu-close:hover { background: rgba(255,255,255,.1); text-decoration: none; }
  .burger { display: grid; gap: 4px; width: 20px; }
  .burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  .mbar-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mbar-inbox .nav-count { position: absolute; top: 3px; right: 1px; margin: 0; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(300px, 86vw); height: auto;
          transform: translateX(-105%); transition: transform .2s ease; padding-top: 6px; }
  body.menu-open .side { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.45); }
  .side-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 14, 20, .55); }
  .side-backdrop[hidden] { display: none; }
  body.menu-open { overflow: hidden; }
  .menu-close { font-size: 26px; line-height: 1; color: #cfd8e6; }
  .side-brand { padding: 4px 8px; }
  .side a, .side .side-link { padding: 11px 12px; font-size: 15px; }   /* finger-sized */
  .side-foot { margin-top: 12px; }
  body.with-side .filters.sticky { top: var(--mbar-h); }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* ================= Option C: orders list + detail ================= */
.split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.olist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.olist-head { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.olist-head input { width: 100%; min-width: 0; }
.olist-scroll { max-height: calc(100vh - 230px); overflow-y: auto; }
.orow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line);
        cursor: pointer; border-left: 3px solid transparent; }
.orow:hover { background: var(--cat-bg); }
.orow.sel { background: var(--cat-bg); border-left-color: var(--accent); }
.orow .who { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .right { text-align: right; font-size: 12px; }
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
          position: sticky; top: 12px; }
.detail h2 { font-size: 18px; margin: 0; }
.detail .sub { color: var(--muted); margin: 2px 0 14px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.fact { background: var(--cat-bg); border-radius: 6px; padding: 8px 10px; }
.fact .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.fact .v { font-size: 16px; font-weight: 700; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 16px 0 4px; }
.detail .empty-pick { color: var(--muted); padding: 40px 0; text-align: center; }
/* Tablets in landscape and small laptops: a narrower list leaves the order more room. */
@media (max-width: 1200px) { .split { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); } }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } .olist-scroll { max-height: 50vh; } .detail { position: static; } }

button .ic, .btn .ic { width: 16px; height: 16px; vertical-align: -3px; }
#products { scroll-margin-top: 12px; }
/* Company logo, centred in the sidebar's free space between the menu and the footer links. */
.side-logo { margin: auto 0 0; padding: 16px 20px 14px; display: flex; justify-content: center; }   /* sits just above the Settings line */
.side-logo img { width: 100%; max-width: 132px; height: auto; background: #fff; border-radius: 10px; padding: 10px; }
body.with-side .side-foot { margin-top: 0; }
@media (max-width: 900px) { .side-logo { display: none; } }
@media (max-height: 640px) { .side-logo { display: none; } }

/* Order note history (signed, oldest first) */
.notes { margin: 0 0 14px; }
.notes .k { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.note-list { max-height: 260px; overflow-y: auto; display: grid; gap: 6px; margin-bottom: 6px; }
.note { background: var(--cat-bg); border-radius: 6px; padding: 6px 10px; }
.note.earlier { border-left: 3px solid var(--line); }
.note-head { font-size: 12px; color: var(--muted); }
.note-head strong { color: var(--ink); }
.note p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-add { display: flex; gap: 6px; align-items: flex-end; }
.note-add textarea { flex: 1; min-height: 38px; resize: vertical; font: inherit; }
.note-count { color: var(--accent); }
.shipments { margin: 0 0 14px; }
.shipments .k { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.note.shipment { border-left: 3px solid var(--good); }
.note.shipment .ship-tag { color: var(--good); text-transform: uppercase; font-size: 10px; letter-spacing: .04em; margin-left: 4px; }
.note.shipment .ship-tag.partial { color: var(--warn); }
.otd-panel { margin-bottom: 14px; }
.otd-panel h2 { margin-top: 0; }
.otd-bars { display: grid; gap: 8px; }
.otd-bar { display: grid; grid-template-columns: 140px 1fr 56px; gap: 4px 10px; align-items: center; color: var(--ink); }
.otd-bar:hover { text-decoration: none; }
.otd-bar:hover .otd-code { color: var(--accent); }
.otd-code { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otd-val { text-align: right; color: var(--bad); font-weight: 600; font-variant-numeric: tabular-nums; }
.otd-detail { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .otd-bar { grid-template-columns: 90px 1fr 48px; } }

/* Inbox, @mentions and groups */
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 10px; background: var(--bad);
             color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 16px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.tabs a { padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { font-size: 11px; background: var(--cat-bg); color: var(--muted); border-radius: 9px; padding: 1px 7px; margin-left: 4px; }
.mention { color: var(--accent); font-weight: 600; }
.mention-box { position: absolute; z-index: 1000; min-width: 220px; max-width: 340px; background: var(--surface);
               border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.3); padding: 4px; }
.mention-opt { display: flex; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mention-opt b { color: var(--accent); white-space: nowrap; }
.mention-opt span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-opt.on, .mention-opt:hover { background: var(--cat-bg); }
.compose textarea { width: 100%; resize: vertical; font: inherit; min-height: 64px; }
.form-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.form-actions button .ic { width: 16px; height: 16px; vertical-align: -3px; }
.about-order { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.about-order input { width: 150px; padding: 5px 8px; }
.about-order.ask input { outline: 2px solid var(--bad); outline-offset: -1px; }
.msg-list { display: grid; gap: 8px; }
.msg-list > p.empty { text-align: center; padding: 24px; }
.msg { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
       border-radius: var(--radius); padding: 10px 14px; }
.msg.unread { border-left-color: var(--accent); }
.msg-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.msg p { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-order { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin-top: 4px; }
.msg-order .ic { width: 14px; height: 14px; }
.msg-actions { display: flex; align-items: center; gap: 8px; }
.tag.new { background: var(--accent); color: #fff; }
.rcpt { font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); }
.rcpt.done { border-color: var(--good); color: var(--good); }
.at-input { display: flex; align-items: center; gap: 4px; }
.at-input > span { color: var(--muted); font-weight: 700; }
.groups-grid th.c, .groups-grid td.c { text-align: center; }
.group-delete { display: flex; flex-wrap: wrap; gap: 8px; }

/* Order note (whole order) on the Orders tab */
.order-note { margin: 0 0 14px; }
.order-note .k { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.order-note textarea { width: 100%; resize: vertical; min-height: 38px; font: inherit; }
.order-note p { margin: 0; white-space: pre-wrap; }
.order-note button { margin-top: 6px; }

/* Packed By / Checked By sign-offs */
.signoffs { display: flex; gap: 10px; margin-left: auto; }
.signoff { margin: 0; }
.signoff-box { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 8px 12px; border-radius: var(--radius);
               border: 1px dashed var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
               cursor: pointer; text-align: left; }
.signoff-box:hover:not(:disabled) { border-color: var(--accent); }
.signoff-box:disabled { cursor: not-allowed; opacity: .6; }
.signoff-box .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
                     border: 2px solid var(--muted); font-size: 13px; line-height: 1; }
.signoff.signed .signoff-box { border-style: solid; border-color: var(--good); cursor: default; }
.signoff.signed .tick { background: var(--good); border-color: var(--good); color: var(--fulfill-ink); }
.signoff-who { font-size: 12px; margin-top: 4px; padding-left: 2px; }
.signoff-type { display: flex; gap: 6px; min-width: 210px; padding: 4px; border: 1px dashed var(--line); border-radius: var(--radius); }
.signoff-type input { flex: 1; min-width: 0; padding: 5px 8px; }
@media (max-width: 700px) { .signoff-type { min-width: 0; } }
.signoff-who button.link { font-size: 12px; margin-left: 4px; }
/* "Order Approved" sits in the top-right of the order panel. */
.odetail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.odetail-head .sub { margin-bottom: 14px; }
.signoff.approval { margin-left: auto; }
.signoff.approval .signoff-box { min-width: 170px; }
button.fulfill:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 700px) { .signoffs { margin-left: 0; width: 100%; } .signoff { flex: 1; } .signoff-box { min-width: 0; width: 100%; } }

/* Stock page Normal | Compact switch */
.view-switch { display: flex; align-items: center; justify-content: flex-end; gap: 0; margin: -6px 0 8px; }
.view-switch .muted { margin-right: 8px; }
.view-switch button { background: var(--surface); color: var(--muted); border: 1px solid var(--line); padding: 3px 12px;
                      font-size: 12px; font-weight: 600; border-radius: 0; }
.view-switch button:first-of-type { border-radius: 6px 0 0 6px; }
.view-switch button:last-of-type { border-radius: 0 6px 6px 0; border-left: 0; }
.view-switch button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Settings > View samples: a few tall rows vs many slim ones */
.view-sample { display: grid; align-content: start; gap: 4px; width: 116px; height: 72px; padding: 8px; box-sizing: border-box;
               border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.view-sample span { display: block; height: 14px; border-radius: 3px; background: var(--line); }
.view-compact { gap: 3px; }
.view-compact span { height: 6px; }

/* Stock page, Compact view (Settings > View) */
.stock-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 7px 12px; margin: 8px 0 8px;
               background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.stock-strip a { color: var(--ink); }
.stock-strip a.muted { color: var(--muted); }
.stock-strip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.stock-strip a.muted b { color: var(--ink); font-size: 13px; }
.stock-strip .bad, .stock-strip .bad b { color: var(--bad); }
.strip-sep { width: 1px; height: 18px; background: var(--line); }
.shortlist { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 6px; font-size: 12px; }
.shortlist a { padding: 2px 7px; border-radius: 4px; background: var(--bad-bg); color: var(--bad); }
.shortlist a b { font-variant-numeric: tabular-nums; }
table.stock.dense th, table.stock.dense td { padding: 2px 8px; font-size: 12.5px; line-height: 1.4; }
table.stock.dense td.n { font-variant-numeric: tabular-nums; }
table.stock.dense tr.cat th { padding: 4px 8px; font-size: 11px; }
table.stock.dense .cat-sum { margin-left: 10px; color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
table.stock.dense .cat-sum .bad { color: var(--bad); font-weight: 700; }
table.stock.dense td.net { position: relative; }
table.stock.dense .netbar { position: absolute; right: 0; top: 3px; bottom: 3px; background: color-mix(in srgb, var(--bad) 28%, transparent); border-radius: 2px; }
table.stock.dense td.net .v { position: relative; }

/* Stock page: lead time / comments editing (Management and Admin) */
table.stock td.edit-lt select { width: 100%; min-width: 100px; padding: 2px 4px; font-size: 12px; }
table.stock td.edit-cm input { width: 100%; padding: 2px 6px; font-size: 12px; }
table.stock td.save-col, table.stock th.save-col { width: 1%; white-space: nowrap; }
table.stock tr.row-edited td { box-shadow: inset 0 -2px 0 var(--accent); }
.quick-save button:disabled { opacity: .3; cursor: default; }
#save-all:disabled { opacity: .35; cursor: default; }
/* The product's lead time / comments shown on orders */
.prod-info { font-size: 11px; color: var(--muted); max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-info-line { margin: 0 0 10px; color: var(--muted); }
.prod-info-line strong { color: var(--ink); }

/* API keys */
.key-new { border-color: var(--good); }
.key-box { display: flex; gap: 8px; max-width: 640px; }
.key-box input { flex: 1; font-family: Consolas, "Courier New", monospace; }
.api-help pre { background: var(--cat-bg); padding: 8px 10px; border-radius: 6px; overflow-x: auto; font-size: 12px; }
.api-help th { width: 80px; text-align: left; vertical-align: top; }
.api-help code { word-break: break-all; }

/* Drop Off History */
.drop-day { margin-bottom: 14px; }
.drop-day h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.drop-day h2 .muted { font-size: 13px; font-weight: 400; }
/* Same column positions on every day's table */
.drop-day table { table-layout: fixed; width: 100%; min-width: 560px; }
.drop-day th:nth-child(1) { width: 30%; } .drop-day th:nth-child(2) { width: 10%; } .drop-day th:nth-child(3) { width: 34%; }
.drop-day th:nth-child(4) { width: 14%; } .drop-day th:nth-child(5) { width: 12%; }

/* Order history */
.hist-days { max-height: 420px; overflow-y: auto; }
.hist-days thead th { position: sticky; top: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.bar-units { fill: var(--accent); }
.hist-table td.clip { max-width: 170px; }
.hist-table td:nth-child(3) { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* On time delivery: the clock on each order, and the report page */
.clock { background: var(--cat-bg); border-radius: 6px; padding: 8px 10px 9px; margin-bottom: 10px; border-left: 4px solid var(--muted); }
.clock-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.clock-head .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.clock-days { font-size: 16px; font-weight: 700; }
.clock-state { margin-left: auto; font-size: 12px; font-weight: 700; }
.clock-bar { height: 6px; border-radius: 3px; background: var(--line); margin: 6px 0 5px; overflow: hidden; }
.clock-bar span { display: block; height: 100%; background: currentColor; }
.clock-note { font-size: 12px; color: var(--muted); }
.clock-ok { border-left-color: var(--good); } .clock-ok .clock-state, .clock-ok .clock-bar { color: var(--good); }
.clock-warn { border-left-color: var(--warn); } .clock-warn .clock-state, .clock-warn .clock-bar { color: var(--warn); }
.clock-late { border-left-color: var(--bad); } .clock-late .clock-state, .clock-late .clock-bar { color: var(--bad); }
.clock-idle .clock-state, .clock-idle .clock-bar { color: var(--muted); }
.otd-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 2fr); gap: 16px; margin-bottom: 16px; }
.otd-grid .panel { margin: 0; }
@media (max-width: 800px) { .otd-grid { grid-template-columns: 1fr; } }
.otd-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 18px; margin: 6px 0; }
.otd-line strong { font-size: 22px; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.otd-good .dot, .dot.good { background: var(--good); }
.otd-bad .dot, .dot.bad { background: var(--bad); }
.pie { display: block; width: 100%; max-width: 220px; margin: 14px auto 4px; }
.slice-good { fill: var(--good); } .slice-bad { fill: var(--bad); }
.pie path, .pie circle:not(.pie-hole) { stroke: var(--surface); stroke-width: 2; }
.pie-hole { fill: var(--surface); }
.pie-pct { font-size: 28px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.pie-sub { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.bars { display: block; width: 100%; max-height: 300px; }
.bars .axis { stroke: var(--line); stroke-width: 1; }
.bar-num { font-size: 11px; fill: var(--ink); text-anchor: middle; }
.bar-label { font-size: 11px; fill: var(--muted); text-anchor: middle; }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.legend .dot { width: 10px; height: 10px; margin-left: 8px; }
.panel > p.empty { text-align: center; color: var(--muted); padding: 24px; margin: 0; }

/* Compact view (Settings > View): the same pages with less space around everything.
   :where() keeps these at the lowest priority, so special cases (switches, sign-off boxes, the Stock
   page's dense table) keep their own sizes; kept last so they win over the normal sizes. */
:where(:root[data-layout="compact"]) main { padding: 10px 14px 40px; }
:where(:root[data-layout="compact"]) h1 { font-size: 18px; margin: 2px 0 4px; }
:where(:root[data-layout="compact"]) h2 { font-size: 14px; margin-bottom: 8px; }
:where(:root[data-layout="compact"]) .panel { padding: 10px 12px; margin-bottom: 10px; }
:where(:root[data-layout="compact"]) :is(th, td) { padding: 3px 8px; font-size: 12.5px; line-height: 1.4; }
:where(:root[data-layout="compact"]) :is(input, select, textarea) { padding: 4px 7px; }
:where(:root[data-layout="compact"]) button, :where(:root[data-layout="compact"]) .btn { padding: 5px 11px; }
:where(:root[data-layout="compact"]) .filters { gap: 6px; margin: 4px 0 8px; }
:where(:root[data-layout="compact"]) .presets { margin: 2px 0 8px; }
:where(:root[data-layout="compact"]) .chip { padding: 2px 8px; }
:where(:root[data-layout="compact"]) .side a, :where(:root[data-layout="compact"]) .side .side-link { padding: 5px 10px; font-size: 13px; }
:where(:root[data-layout="compact"]) .side-sep { padding: 8px 10px 2px; }
:where(:root[data-layout="compact"]) .cards { gap: 8px; margin: 8px 0 10px; }
:where(:root[data-layout="compact"]) .card .num { font-size: 20px; }
:where(:root[data-layout="compact"]) .olist-head { padding: 6px; gap: 5px; }
:where(:root[data-layout="compact"]) .orow { padding: 5px 10px; }
:where(:root[data-layout="compact"]) .detail { padding: 12px 14px; }
:where(:root[data-layout="compact"]) .facts { gap: 6px; margin-bottom: 10px; }
:where(:root[data-layout="compact"]) .fact { padding: 5px 8px; }
:where(:root[data-layout="compact"]) .fact .v { font-size: 14px; }
:where(:root[data-layout="compact"]) .clock { padding: 5px 8px 6px; margin-bottom: 8px; }
:where(:root[data-layout="compact"]) .clock-days { font-size: 14px; }
:where(:root[data-layout="compact"]) .order-note { margin-bottom: 8px; }
:where(:root[data-layout="compact"]) .detail-actions { margin: 10px 0 2px; }
:where(:root[data-layout="compact"]) .otd-line { font-size: 15px; margin: 3px 0; }
:where(:root[data-layout="compact"]) .otd-line strong { font-size: 18px; }
:where(:root[data-layout="compact"]) .drop-day { margin-bottom: 8px; }
:where(:root[data-layout="compact"]) .grid { gap: 6px 10px; margin-bottom: 8px; }
:where(:root[data-layout="compact"]) .flash { padding: 6px 12px; margin-bottom: 8px; }

.back-list { display: none; }
@media (max-width: 1000px) {
  .back-list { display: inline-block; margin-bottom: 10px; }
  .detail, .orow { scroll-margin-top: 8px; }
}
@media (max-width: 900px) { .detail, .orow { scroll-margin-top: calc(var(--mbar-h) + 8px); } }

/* ================= Phones and tablets =================
   Kept last so these win over the page styles above. The menu itself is with the sidebar styles. */
/* Touch screens: 16px text in boxes (smaller makes iPhones zoom the page on every tap). */
@media (pointer: coarse) {
  input, select, textarea, select.status { font-size: 16px; }
}
/* Phones: use the width for content rather than margins, and stack things that sat side by side. */
@media (max-width: 600px) {
  body.with-side > main { padding: 12px 12px 48px; }
  .panel { padding: 12px; }
  .detail { padding: 14px 12px; }
  h1 { font-size: 20px; }
  .cards { gap: 8px; }
  .cards > .card { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .bar { grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 8px; }
  .note-add { flex-direction: column; align-items: stretch; }
  .note-add button { align-self: flex-end; }
  .filters { gap: 8px; }
  .filters input[type=search], .filters input[type=text] { flex: 1 1 100%; }
  body.with-side .filters.sticky { position: static; }   /* no room to keep it pinned */
  .form-foot { justify-content: space-between; }
  .msg { padding: 10px 12px; }
  .tabs a { padding: 8px 10px; }
  .fact select { max-width: 100%; }
  .note-add textarea { width: 100%; }
}
/* Customers: on a phone the rename box fits the screen and Save / Cancel go under it */
@media (max-width: 700px) { .rename-form { max-width: calc(100vw - 56px); } .rename-form input[name=name] { flex-basis: 100%; max-width: none; } }