:root {
  --ink: #15191f; --ink-2: #222831; --ink-line: #323a46; --ink-text: #c9d0da; --ink-muted: #8591a1;
  --bg: #f4f2ee; --surface: #fff; --line: #e2ded6; --line-2: #efece6;
  --text: #1b1f26; --muted: #646c78;
  --accent: #d9481f; --accent-dark: #b83a16; --accent-soft: #fdebe4;
  --ok: #1d7a4d; --ok-soft: #e3f3ea; --warn: #8a5a00; --warn-soft: #fbf0d3; --bad: #b3261e; --bad-soft: #fbe6e4; --info-soft: #e6eef8;
  --radius: 8px; --shadow: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 1px rgba(20, 24, 31, .04);
  /* Used by some panels: always set, so nothing falls back to a light-only colour in the dark theme. */
  --bg-2: rgba(0, 0, 0, .04); --card: var(--surface); --panel: var(--surface); --ok-bg: var(--ok-soft); --bad-bg: var(--bad-soft);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.55rem; letter-spacing: -.015em; font-weight: 680; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; margin-bottom: .7rem; }
h3 .badge { text-transform: none; letter-spacing: 0; margin-left: .5rem; }
h3.section { margin: 1.6rem 0 .6rem; }
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--muted); font-size: .85em; }
code, .mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .9em; font-variant-numeric: tabular-nums; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.right { text-align: right; } .center { text-align: center; } .nowrap { white-space: nowrap; }
.spacer { flex: 1; }
.hint { color: var(--muted); font-size: .92rem; max-width: 75ch; }

/* Controls */
button, .button, input, select, textarea { font: inherit; color: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; white-space: nowrap;
  padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-weight: 550; text-decoration: none; color: var(--text);
}
button:hover, .button:hover { border-color: #c9c3b8; text-decoration: none; }
button:disabled { opacity: .55; cursor: default; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled), .button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
button.ghost { border-color: transparent; background: none; }
button.danger-text { color: var(--bad); }
button.block { width: 100%; margin-top: 1rem; padding: .65rem; }
button.linkish { border: 0; background: none; padding: 0; color: inherit; font-weight: inherit; text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid #cfc9be; border-radius: 6px; background: #fff; min-height: 2.35rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input:disabled, select:disabled, fieldset:disabled input { background: var(--line-2); color: var(--muted); }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; min-height: 0; accent-color: var(--accent); flex: none; margin: .15rem 0 0; }
textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field > span, .label { font-size: .82rem; font-weight: 600; color: #3d444f; display: block; }
.formgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem 1rem; }
.check { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.checks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .4rem; }
.formactions { display: flex; gap: .6rem; align-items: center; margin-top: 1.1rem; flex-wrap: wrap; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 1rem; }
.segmented button { border: 0; border-radius: 0; }
.segmented button.on { background: var(--ink); color: #fff; }
.search { max-width: 34rem; }

/* Shell */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--ink); color: var(--ink-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 650; color: #fff; padding: 1.1rem 1.1rem 1rem; line-height: 1.2; font-size: .95rem; }
.mark { width: 12px; height: 22px; background: var(--accent); transform: skewX(-14deg); border-radius: 2px; flex: none; }
.side nav { display: flex; flex-direction: column; padding: .4rem .6rem; gap: 1px; flex: 1; overflow: auto; }
.side nav a { display: flex; align-items: center; justify-content: space-between; padding: .52rem .7rem; border-radius: 6px; color: var(--ink-text); font-weight: 520; border-left: 3px solid transparent; }
.side nav a:hover { background: var(--ink-2); text-decoration: none; color: #fff; }
.side nav a.on { background: var(--ink-2); color: #fff; border-left-color: var(--accent); }
.soon { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); border: 1px solid var(--ink-line); border-radius: 99px; padding: .05rem .45rem; }
.who { border-top: 1px solid var(--ink-line); padding: .9rem 1.1rem 1.1rem; font-size: .88rem; display: flex; flex-direction: column; gap: .1rem; }
.who strong { color: #fff; } .who span { color: var(--ink-muted); }
.who div { display: flex; gap: 1rem; margin-top: .5rem; } .who a, .who button { color: var(--ink-text); font-size: .88rem; text-decoration: underline; }
.main { min-width: 0; }
main { padding: 1.6rem 2rem 4rem; max-width: 1280px; }
.demobar { background: var(--warn-soft); color: var(--warn); font-size: .86rem; font-weight: 600; padding: .45rem 2rem; border-bottom: 1px solid #ecdcae; }
.menubtn { display: none; margin: .8rem 1rem 0; }

.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.pagehead p { color: var(--muted); margin-top: .2rem; }
.pagehead .actions { display: flex; gap: .5rem; }
.pagehead.sub { align-items: center; }
.back { display: inline-block; font-size: .9rem; margin-bottom: .6rem; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; overflow-x: auto; }
.tabs a { padding: .55rem .85rem; color: var(--muted); font-weight: 560; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { display: flex; gap: .6rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }
.toolbar .search { flex: 1 1 18rem; }

/* Surfaces */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin-bottom: 1rem; }
.card.flush { padding: 0; overflow: hidden; }
.card.scroll { overflow-x: auto; }
.card.narrow { max-width: 46rem; }
.card.planned { border-style: dashed; box-shadow: none; background: transparent; color: var(--muted); }
.card > p + p, .card > p + .uploadrow { margin-top: .7rem; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; align-items: start; }
.cols .card { margin-bottom: 0; } .cols { margin-bottom: 1rem; }
.empty { padding: 2.2rem 1rem; text-align: center; color: var(--muted); }
.roadmap h2 { margin: .9rem 0 .5rem; font-size: 1.3rem; max-width: 38ch; line-height: 1.3; }
.roadmap h3 { margin-top: 1.3rem; } .roadmap ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.roadmap p { color: var(--muted); max-width: 70ch; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; display: flex; flex-direction: column; color: var(--text); }
a.stat:hover { border-color: var(--accent); text-decoration: none; }
.stat b { font-size: 2rem; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-weight: 560; } .stat small { margin-top: .3rem; }
.stat.bad b { color: var(--bad); }

/* Tables */
table.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; padding: .65rem .9rem; background: #faf9f6; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid th.num { text-align: right; }
.grid td { padding: .62rem .9rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid.rows tbody tr { cursor: pointer; }
.grid.rows tbody tr:hover, .grid.rows tbody tr:focus-visible { background: #fbf7f1; }
.grid td button { padding: .25rem .6rem; font-size: .88rem; }
.matrix th:not(:first-child) { text-align: center; white-space: normal; min-width: 5.5rem; }
.tick { color: var(--ok); } .dash { color: #c5bfb3; }
.maptable select { min-width: 13rem; } .maptable td { vertical-align: middle; }
.sample { color: var(--muted); font-size: .88rem; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recon { max-width: 30rem; margin-bottom: .9rem; } .recon td { padding: .4rem 0; } .recon .total td { font-weight: 650; border-top: 2px solid var(--text); }
.msgs div { font-size: .87rem; } .msgs .error { color: var(--bad); } .msgs .warning { color: var(--warn); } .msgs .info { color: var(--muted); }
.pager { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; padding: .6rem .9rem; border-top: 1px solid var(--line-2); color: var(--muted); font-size: .88rem; }
.pager button { padding: .3rem .7rem; }
.filterbar { display: flex; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.chip { border-radius: 99px; padding: .25rem .8rem; font-size: .86rem; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.badge { display: inline-block; font-size: .74rem; font-weight: 620; padding: .1rem .5rem; border-radius: 99px; background: var(--line-2); color: #4a515c; white-space: nowrap; vertical-align: middle; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); } .badge.muted { color: var(--muted); }

.alert { border-radius: 6px; padding: .7rem .9rem; margin-bottom: .9rem; border: 1px solid; }
.alert ul { margin: .35rem 0 0; padding-left: 1.2rem; } .alert p { margin-top: .3rem; } .alert button { margin-top: .6rem; }
.alert.error { background: var(--bad-soft); border-color: #efc1bd; color: #7d1a15; }
.alert.warn { background: var(--warn-soft); border-color: #ecdcae; color: #5f3f00; }
.alert.info { background: var(--info-soft); border-color: #c9d9ee; color: #24476f; }

dl { margin: 0; }
.kv { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .42rem 0; border-bottom: 1px solid var(--line-2); }
.kv:last-child { border-bottom: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.notes { white-space: pre-wrap; } .card h3:not(:first-child) { margin-top: 1.2rem; }
.history, .activity, .progress { list-style: none; margin: 0; padding: 0; }
.history li { padding: .6rem 0; border-bottom: 1px solid var(--line-2); } .history li:last-child { border: 0; }
.history li > div { display: flex; flex-direction: column; } .history span { color: var(--muted); font-size: .85rem; }
.history dl { margin-top: .35rem; font-size: .88rem; } .history dl div { display: flex; gap: .5rem; } .history dt { color: var(--muted); min-width: 8rem; } .history dd { margin: 0; } .history s { color: var(--muted); }
.activity li { display: flex; flex-direction: column; padding: .5rem 0; border-bottom: 1px solid var(--line-2); }
.activity { margin-bottom: .8rem; }
.progress li { display: flex; justify-content: space-between; align-items: center; padding: .42rem 0; border-bottom: 1px solid var(--line-2); }
.progress + .hint { margin-top: .8rem; }

.uploadrow { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 .8rem; }
.uploadrow .field { width: 14rem; } .uploadrow button { margin-top: 1.35rem; }
.radios { display: grid; gap: .5rem; }
.radio { display: flex; gap: .7rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.radio.on { border-color: var(--accent); background: var(--accent-soft); }
.radio span { display: flex; flex-direction: column; }
.steps { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; counter-reset: s; font-size: .86rem; }
.steps li { counter-increment: s; padding: .3rem .8rem; border-radius: 99px; background: var(--line-2); color: var(--muted); font-weight: 600; }
.steps li::before { content: counter(s) ". "; }
.steps li.on { background: var(--ink); color: #fff; } .steps li.done { background: var(--ok-soft); color: var(--ok); }

/* Modal + toast */
.overlay { position: fixed; inset: 0; background: rgba(20, 24, 31, .5); display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1rem; overflow-y: auto; z-index: 20; }
.modal { background: var(--surface); border-radius: 10px; width: 100%; max-width: 34rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.modal.wide { max-width: 46rem; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.modal .body { padding: 1.2rem 1.3rem; } .modal .body > p { margin-bottom: .8rem; }
.modal footer { display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.3rem; border-top: 1px solid var(--line); background: #faf9f6; border-radius: 0 0 10px 10px; }
.toasts { position: fixed; bottom: 1.2rem; right: 1.2rem; display: flex; flex-direction: column; gap: .5rem; z-index: 30; }
.toast { background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); max-width: 24rem; border-left: 4px solid var(--ok); }
.toast.error { border-left-color: var(--bad); }

/* Sign-in */
.authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--ink); }
.authcard { background: var(--surface); border-radius: 12px; padding: 2rem; width: 100%; max-width: 30rem; }
.authcard .brand { color: var(--text); padding: 0 0 1.4rem; }
.authcard h1 { margin-bottom: .3rem; } .authcard > .hint { margin-bottom: 1.2rem; }
.authcard form { display: grid; gap: .85rem; margin-top: 1rem; }
.authcard .formactions button { width: 100%; padding: .65rem; }
.version { color: var(--muted); font-size: .8rem; margin-top: 1.4rem; text-align: center; }
.demologins { margin-top: 1.5rem; padding: 1rem; background: var(--warn-soft); border-radius: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.demologins strong, .demologins p { grid-column: 1 / -1; color: #5f3f00; } .demologins p { font-size: .88rem; }
.demologins button { flex-direction: column; align-items: flex-start; gap: 0; padding: .45rem .7rem; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 15; width: 250px; transform: translateX(-100%); transition: transform .15s; }
  .menu-open .side { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4); }
  .menubtn { display: inline-flex; }
  main { padding: 1rem 1rem 3rem; }
  .demobar { padding: .45rem 1rem; }
  .formgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formgrid > * { grid-column: span 2 !important; }
  .card.flush { overflow-x: auto; }
  .kv { grid-template-columns: 7rem 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.filterbar.bare { padding: 0; border: 0; margin-bottom: .8rem; }
select.auto { width: auto; }
.actions-cell { white-space: nowrap; } .actions-cell button + button { margin-left: .35rem; }

.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #b9b3a8; margin: 0 .15rem; }
.dot.ok { background: var(--ok); } .dot.warn { background: #d99a00; }
ol.plain { margin: .8rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; max-width: 80ch; }
small.err { color: var(--bad); }
textarea.mono { font-size: .85rem; word-break: break-all; }

/* Sales + accounts */
.salegrid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.salegrid .card { margin-bottom: 1rem; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); }
.cardhead h3 { margin: 0; }
.grid.lines td { vertical-align: middle; padding: .4rem .5rem; } .grid.lines th { padding: .55rem .5rem; }
.grid.lines td:first-child, .grid.lines th:first-child { padding-left: .9rem; }
.grid.lines input, .grid.lines select { min-height: 2.1rem; padding: .3rem .45rem; }
input.narrow { width: 4.5rem; } input.price { width: 7rem; } input.num { text-align: right; }
.addbar { display: flex; gap: .4rem; flex-wrap: wrap; padding: .7rem .9rem; border-top: 1px solid var(--line-2); background: #faf9f6; }
.addbar button { padding: .35rem .7rem; font-size: .9rem; }
.notesbox { padding: .8rem .9rem; border-top: 1px solid var(--line-2); }
.totals > div { display: flex; justify-content: space-between; padding: .3rem 0; font-variant-numeric: tabular-nums; }
.totals .grand { font-weight: 680; font-size: 1.15rem; border-top: 2px solid var(--text); margin-top: .3rem; padding-top: .5rem; }
.totals .due { font-weight: 650; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .5rem; }
.totals .formactions button { flex: 1; }
.grid.mini td { padding: .3rem 0; border-bottom: 1px solid var(--line-2); } .grid.mini .total td, .grid .total td { font-weight: 650; border-top: 2px solid var(--text); }
.grid.jl td { padding: .25rem .5rem; font-size: .88rem; } .grid.jl td:first-child { width: 5rem; }
.journal { border-top: 1px solid var(--line-2); padding: .7rem 0 .3rem; } .jhead { font-size: .9rem; margin-bottom: .3rem; }
details.card > summary { cursor: pointer; list-style-position: inside; } details.card > summary h3 { display: inline; }
td.clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert.okbox { background: var(--ok-soft); border-color: #bfe0cd; color: #14573a; }
label.inline { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-weight: 600; font-size: .9rem; } label.inline input { width: auto; }
.errtext { color: var(--bad); font-weight: 600; }
.pagehead .actions { align-items: center; flex-wrap: wrap; }
/* Printable document */
main.bare { padding: 0; max-width: none; }
.printpage { background: #e9e6df; min-height: 100vh; padding: 1.2rem; }
.printbar { max-width: 50rem; margin: 0 auto 1rem; display: flex; justify-content: space-between; }
.sheet { background: #fff; max-width: 50rem; margin: 0 auto; padding: 2.5rem; box-shadow: var(--shadow); font-size: .95rem; }
.sheet header { display: flex; justify-content: space-between; gap: 2rem; border-bottom: 2px solid var(--text); padding-bottom: 1rem; }
.sheet h1 { font-size: 1.4rem; } .sheet .docno { text-align: right; } .sheet .docno h2 { text-transform: uppercase; letter-spacing: .06em; }
.sheet .to { margin: 1.4rem 0; } .sheet table { width: 100%; border-collapse: collapse; }
.sheet th { text-align: left; border-bottom: 1px solid var(--text); padding: .4rem .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; } .sheet th.num { text-align: right; }
.sheet td { padding: .45rem .3rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.sums { margin: 1rem 0 0 auto; max-width: 24rem; } .sums div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .3rem; font-variant-numeric: tabular-nums; } .sums .grand { font-weight: 700; border-top: 1px solid var(--text); }
.sheet .notes { margin-top: 1.5rem; } .sheet .fine { margin-top: 1.5rem; color: var(--muted); font-size: .85rem; } .warnline { color: var(--bad); margin-top: .8rem; font-weight: 600; }
.contract h3 { margin: 1.3rem 0 .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--text); padding-bottom: .2rem; }
.pairs { display: grid; grid-template-columns: 8rem 1fr 8rem 1fr; gap: .3rem .8rem; margin: 0; } .pairs dt { color: var(--muted); } .pairs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.blank { display: inline-block; width: 100%; max-width: 14rem; border-bottom: 1px solid var(--muted); height: 1.1em; }
.terms { white-space: pre-wrap; font-size: .82rem; line-height: 1.45; }
.signs { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 3rem; break-inside: avoid; } .signs span { display: block; border-bottom: 1px solid var(--text); height: 2.5rem; margin-bottom: .3rem; }
@media (max-width: 600px) { .pairs { grid-template-columns: 7rem 1fr; } }
@media print { .printbar, .toasts { display: none !important; } .printpage { background: #fff; padding: 0; } .sheet { box-shadow: none; max-width: none; padding: 0; } html, body { background: #fff; } }
@media (max-width: 1000px) { .salegrid { grid-template-columns: 1fr; } }

/* Leads */
.score { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3rem; height: 1.7rem; border-radius: 99px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; padding: 0 .5rem; background: var(--line-2); color: #4a515c; }
.score.hot { background: var(--accent); color: #fff; } .score.warm { background: var(--warn-soft); color: var(--warn); }
.score.big { min-width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
.urgent { color: var(--bad); }
.board { display: grid; grid-template-columns: repeat(5, minmax(11rem, 1fr)); gap: .7rem; overflow-x: auto; align-items: start; padding-bottom: .5rem; }
.board .col { background: #ebe8e1; border-radius: var(--radius); padding: .6rem; min-height: 8rem; }
.board .col.droppable { outline: 2px dashed #c9c3b8; }
.board h3 { display: flex; justify-content: space-between; margin: .1rem .2rem .6rem; }
.leadcard { display: flex; flex-direction: column; gap: .15rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .55rem .65rem; margin-bottom: .5rem; color: var(--text); cursor: grab; }
.leadcard:hover { border-color: var(--accent); text-decoration: none; } .leadcard > div { display: flex; justify-content: space-between; gap: .4rem; align-items: center; }
.coach { border-left: 4px solid #c9c3b8; } .coach.hot { border-left-color: var(--accent); } .coach.warm { border-left-color: #d99a00; }
.coachhead { display: flex; justify-content: space-between; gap: 1rem; } .coachhead h2 { font-size: 1.35rem; margin-bottom: .2rem; } .coachhead p { color: var(--muted); }
.bigscore { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.say { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.found input, .found select { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); }
.logbox .segmented.wrap { flex-wrap: wrap; } .logbox .formactions { margin-top: .7rem; }
.original { white-space: pre-wrap; font: inherit; font-size: .9rem; color: var(--muted); margin: .7rem 0 0; }
.matchrow { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .45rem 0; border-top: 1px solid rgba(0,0,0,.08); margin-top: .45rem; }
a.button.primary-link { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 860px) { .board { grid-template-columns: repeat(5, 13rem); } }

.salegrid aside .kv { grid-template-columns: 5.5rem 1fr; }

.addbar select.auto { min-height: 2rem; padding: .25rem .5rem; font-size: .9rem; }
.cardhead .button { padding: .3rem .7rem; font-size: .9rem; }

.grid.lines select[aria-label="GST code"] { min-width: 4.8rem; }

.delivery .field { margin-bottom: .5rem; } .delivery .actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); gap: 1px; }
.calendar .dow { background: var(--panel, #fff); padding: .4rem .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.calendar .day { background: #fff; min-height: 6.5rem; padding: .3rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.calendar .day.out { background: #f6f4ef; } .calendar .day.out .n { color: var(--muted); }
.calendar .day .n { font-size: .8rem; font-weight: 600; align-self: flex-end; padding: 0 .25rem; }
.calendar .day.today .n { background: var(--text); color: #fff; border-radius: 999px; }
.calendar .day a { display: flex; flex-direction: column; font-size: .76rem; line-height: 1.25; padding: .25rem .35rem; border-radius: 5px; text-decoration: none; color: inherit; border-left: 3px solid var(--warn); background: var(--warn-soft); overflow: hidden; }
.calendar .day a.paid { border-left-color: #2f7d4f; background: #e6f3ea; } .calendar .day a span, .calendar .day a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 800px) { .calendar { grid-template-columns: 1fr; } .calendar .dow, .calendar .day.out { display: none; } .calendar .day { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; } .calendar .day .n { align-self: center; } .calendar .day a { flex: 1 1 100%; } }

.calendar .day.over { outline: 2px dashed var(--text); outline-offset: -3px; background: var(--warn-soft); } .calendar .day a[draggable] { cursor: grab; }
.sheet .bank { margin-top: 1.5rem; border: 1px solid var(--text); padding: .8rem 1rem; break-inside: avoid; } .sheet .bank h3 { margin: 0 0 .5rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }

/* Parts, order book, point of sale, workshop */
.lowqty { color: var(--bad); font-weight: 650; }
.warntext { color: var(--warn); font-weight: 600; }
td.neg { color: var(--bad); }
tr.struck td { color: var(--muted); text-decoration: line-through; }
.stat.warnstat { border-color: #ecdcae; }
.inlineform { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .inlineform .field { margin: 0; flex: 1 1 8rem; }
.rowform { display: inline-flex; gap: .35rem; align-items: center; justify-content: flex-end; } .rowform button { padding: .3rem .65rem; font-size: .88rem; }
td.right { text-align: right; white-space: nowrap; }
.addbar input { min-height: 2rem; padding: .25rem .5rem; font-size: .9rem; }
.addbar input.mono { width: 11rem; }
.scanbar { display: flex; gap: .5rem; padding: .8rem .9rem; border-bottom: 1px solid var(--line-2); background: #faf9f6; flex-wrap: wrap; }
.scanbar input.mono { flex: 1 1 14rem; font-size: 1.05rem; }
.actions.stack { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; } .actions.stack button { width: 100%; }
.alert.info .ghost { float: right; }
.jobs tr td:first-child { border-left: 4px solid transparent; }
.jobs tr.s-booked td:first-child { border-left-color: #98a2b3; } .jobs tr.s-booked_parts td:first-child { border-left-color: #e3a008; }
.jobs tr.s-received td:first-child { border-left-color: #7a5af8; } .jobs tr.s-in_progress td:first-child { border-left-color: #12b76a; }
.jobs tr.s-completed td:first-child, .jobs tr.s-invoiced td:first-child { border-left-color: var(--ink); }
.statussel { min-height: 1.9rem; padding: .15rem .4rem; font-size: .86rem; }
.badge.info { background: #eeeafe; color: #5b3fd6; } .badge.done { background: var(--ink); color: #fff; }
.statussel { min-width: 9.5rem; }
.addbar input { width: auto; } .addbar input.narrow { width: 4.5rem; } .addbar input:not(.mono):not(.narrow) { flex: 1 1 14rem; }
.grid.lines select { min-width: 6.8rem; }

/* Workshop v2 */
.jobs tr.waiting td { background: #fdecec; } .jobs tr.waiting:hover td { background: #fbdcdc; }
.jobs tr.waiting td:first-child { border-left-color: var(--bad) !important; }
tr.waiting td { background: #fdf1f1; }
.partsflag { display: block; color: var(--bad); font-weight: 650; white-space: normal; }
.chip.chipbad:not(.on) { border-color: var(--bad); color: var(--bad); }
.oktext { color: var(--ok); } .badtext { color: var(--bad); font-weight: 600; }
.filterbar.inline { margin: 0; }
.clockstrip { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.clockcard { display: flex; gap: .5rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: .4rem .7rem; font-size: .9rem; }
.clockcard.on { background: var(--ok-soft); } .clockcard .ghost { padding: .15rem .5rem; font-size: .82rem; }
.clockline { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .35rem 0; }
.clockline select { flex: 1 1 8rem; } .clockline button { padding: .3rem .7rem; font-size: .88rem; margin-left: .3rem; }
.segmented.tight { margin-bottom: 0; } .calrange { margin-left: .4rem; }
.unscheduled { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; padding: .6rem; border: 1px dashed var(--line); border-radius: 8px; margin-bottom: .8rem; background: #faf9f6; }
.unscheduled > span { width: 100%; font-size: .85rem; color: var(--muted); } .unscheduled .jobchip { width: 13rem; }
.wkweek { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.wkday { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-height: 16rem; padding: .4rem; display: flex; flex-direction: column; gap: .35rem; }
.wkday.today { border-color: var(--ink); } .wkday:has(.jobchip) { } 
.wkhead { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-2); }
.wkhead small { color: var(--muted); font-size: .76rem; }
.capbar { height: 5px; background: var(--line-2); border-radius: 3px; overflow: hidden; } .capbar span { display: block; height: 100%; background: var(--ok); }
.capbar.over span { background: var(--bad); }
.jobchip { display: flex; flex-direction: column; gap: 1px; font-size: .76rem; line-height: 1.25; padding: .3rem .4rem; border-radius: 5px; background: #f1f4f9; border: 1px solid #dfe5ee; border-left: 4px solid #98a2b3; color: inherit; text-decoration: none; overflow: hidden; cursor: grab; }
.jobchip:hover { background: #e7ecf4; } .jobchip strong { font-size: .78rem; }
.jobchip.waiting { background: #fdecec; border-color: #f3c0c0; } .jobchip.waiting small { color: var(--bad); font-weight: 600; }
.jobchip.s-invoiced, .jobchip.s-completed { opacity: .6; cursor: default; }
.clip1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addslot { margin-top: auto; font-size: .8rem; padding: .2rem; }
.timegrid { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: auto; background: var(--surface); max-height: 75vh; }
.tg-corner, .tg-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--line); }
.tg-head { padding: .4rem; border-left: 1px solid var(--line-2); border-top: 3px solid transparent; font-size: .85rem; }
.tg-anytime { display: flex; flex-direction: column; gap: .2rem; margin-top: .3rem; }
.tg-times div { font-size: .72rem; color: var(--muted); text-align: right; padding-right: .4rem; transform: translateY(-.45rem); }
.tg-col { position: relative; border-left: 1px solid var(--line-2); }
.tg-slot { border-top: 1px dotted #ece9e2; } .tg-slot.hour { border-top: 1px solid var(--line-2); } .tg-slot.over { background: var(--warn-soft); }
.swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: middle; }
.clickrow { cursor: pointer; } .subrow td { background: #faf9f6; font-size: .9rem; cursor: pointer; }
@media (max-width: 900px) { .wkweek { grid-template-columns: 1fr; } .wkday { min-height: 0; } }
input.etainput { width: 9.5rem; min-height: 1.9rem; padding: .15rem .4rem; font-size: .86rem; }
.cardhead > span { display: flex; align-items: center; gap: .6rem; } .cardhead .button { padding: .25rem .6rem; font-size: .85rem; }
.previewbox { max-height: 22rem; overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin: .5rem 0 1rem; }
.previewbox .grid td, .previewbox .grid th { padding: .3rem .5rem; font-size: .85rem; }
ul.problems { max-height: 14rem; overflow: auto; color: var(--bad); }
.jobchip, .jobchip:hover, .jobchip * { text-decoration: none; }
.tg-times div:first-child { transform: none; }
.segmented.tight { flex-wrap: wrap; max-width: 100%; } .segmented.tight button { white-space: nowrap; }
@media (max-width: 700px) { .calrange { width: 100%; margin: 0; } .timegrid { max-width: calc(100vw - 2rem); } }
.tabs { overflow-x: auto; max-width: 100%; scrollbar-width: thin; } .tabs a { white-space: nowrap; }
@media (max-width: 900px) { .wkweek { grid-template-columns: minmax(0, 1fr); } } .wkday, .jobchip { min-width: 0; }
.choicegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; margin-top: 1rem; }
.choicegrid button { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .8rem .9rem; height: auto; }
.choicegrid button small { color: var(--muted); font-weight: 400; }
.choicegrid button, .choicegrid button * { white-space: normal; overflow-wrap: anywhere; }
.avail { border: 1px solid var(--line); border-radius: 8px; padding: .6rem; background: #faf9f6; }
.availhead { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; } .availhead small { color: var(--muted); }
.availgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.availday { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .2rem; font-size: .78rem; border-radius: 6px; min-height: 0; line-height: 1.15; }
.availday strong { font-size: 1rem; } .availday small { font-size: .7rem; white-space: nowrap; }
.availday .bar { display: block; width: 80%; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; font-style: normal; } .availday .bar b { display: block; height: 100%; background: currentColor; }
.availday.free { color: var(--ok); background: var(--ok-soft); border-color: #bfe3cc; }
.availday.tight { color: var(--warn); background: var(--warn-soft); border-color: #ecdcae; }
.availday.full { color: var(--bad); background: var(--bad-soft); border-color: #f0c2c2; }
.availday.closed { color: var(--muted); background: #f1efea; }
.availday.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.availday:disabled { opacity: .45; }
.hoursrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; } .hoursrow label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; } .hoursrow input { text-align: center; }
.availhead small { flex: 1 1 12rem; } .availhead button { flex: 0 0 auto; }
.leavetag { color: #7a4d00; background: #fdf0d5; border-radius: 4px; padding: 0 .3rem; font-size: .72rem; font-weight: 600; display: inline-block; }
.tg-col.off { background: repeating-linear-gradient(135deg, #f3f1ec, #f3f1ec 6px, #ebe8e1 6px, #ebe8e1 12px); }
.leavebox { border-top: 1px solid var(--line-2); padding-top: .8rem; margin-top: .4rem; }
.leavelist { list-style: none; padding: 0; margin: 0 0 .6rem; } .leavelist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--line-2); font-size: .9rem; }
.leaveadd { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; } .leaveadd label { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; color: var(--muted); }
.leaveadd label.check { flex-direction: row; align-items: center; color: var(--text); } .leaveadd input[type=date] { width: 10rem; }
.muted { color: var(--muted); }
.dayfilter { gap: .4rem; } .dayfilter input[type=date] { width: 11rem; }
.unsavedbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--warn-soft); border: 1px solid #ecdcae; color: var(--warn); font-weight: 600; padding: .5rem .8rem; border-radius: 8px; margin-bottom: .8rem; }
ul.plain { padding-left: 1.1rem; margin: .4rem 0; } ul.plain li { margin: .2rem 0; }
.jobchip.flash { outline: 3px solid var(--accent, #d9480f); outline-offset: 1px; animation: flashy 1.2s ease-in-out 3; } @keyframes flashy { 50% { outline-color: transparent; } }
.modal footer { flex-wrap: wrap; } .modal.wide .grid select { min-width: 13rem; }
.descrow { display: flex; gap: .25rem; align-items: center; } .descrow input { flex: 1; } .costbtn { padding: .2rem .45rem; font-weight: 700; }
small.oncost { display: block; color: var(--muted); font-size: .76rem; margin-top: .15rem; }
.radiorow { display: flex; flex-direction: column; gap: .3rem; } .radiorow label { display: flex; gap: .4rem; align-items: baseline; } .radiorow small { color: var(--muted); }

/* Workshop TV */
body.tvmode { background: #0d1117; }
.tv { min-height: 100vh; background: #0d1117; color: #e6edf3; display: flex; flex-direction: column; padding: 1.2vh 1.2vw; gap: 1.2vh; font-size: 1.6vh; }
.tvhead { display: flex; align-items: baseline; gap: 2vw; font-size: 2.6vh; } .tvhead strong { font-size: 3.2vh; } .tvclock { margin-left: auto; font-size: 4vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.tvwarn { color: #f0b429; font-size: 2vh; }
.tvgrid { flex: 1; display: grid; gap: 1.2vh 1.2vw; grid-auto-rows: 1fr; }
.tvcard { background: #161b22; border-radius: 1vh; border-top: .8vh solid #30363d; padding: 1.6vh 1.4vw; display: flex; flex-direction: column; gap: .8vh; overflow: hidden; }
.tvname { display: flex; justify-content: space-between; align-items: baseline; font-size: 3.4vh; font-weight: 700; } .tvname small { font-size: 1.8vh; color: #8b949e; font-weight: 400; }
.tvjob { font-size: 2.4vh; } .tvdesc { font-size: 2vh; color: #c9d1d9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvbig { font-size: 11vh; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; margin-top: auto; }
.tvbig.idle { font-size: 4vh; color: #8b949e; font-weight: 600; margin: auto 0; }
.tvbar { height: 1.6vh; background: #30363d; border-radius: 1vh; overflow: hidden; } .tvbar span { display: block; height: 100%; }
.tvnums { display: flex; justify-content: space-between; font-size: 2vh; color: #c9d1d9; }
.tvnext { font-size: 1.7vh; color: #8b949e; border-top: 1px solid #30363d; padding-top: .6vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvcard.ok .tvbig { color: #3fb950; } .tvcard.ok .tvbar span { background: #3fb950; }
.tvcard.near .tvbig { color: #f0b429; } .tvcard.near .tvbar span { background: #f0b429; }
.tvcard.over { background: #2a1215; } .tvcard.over .tvbig { color: #ff5c5c; } .tvcard.over .tvbar span { background: #ff5c5c; }
.tvcard.noest .tvbig { color: #c9d1d9; }
.tvfoot { display: flex; gap: 2vw; font-size: 1.7vh; color: #8b949e; align-items: center; } .tvfoot a { margin-left: auto; color: #58a6ff; }
.tvfoot .k::before { content: ''; display: inline-block; width: 1.4vh; height: 1.4vh; border-radius: 50%; margin-right: .5vw; vertical-align: middle; }
.tvfoot .k.ok::before { background: #3fb950; } .tvfoot .k.near::before { background: #f0b429; } .tvfoot .k.over::before { background: #ff5c5c; }
.tvmsg { font-size: 3vh; color: #8b949e; margin: auto; }

/* Model picker and used bikes */
.pickedmodel { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1px solid var(--line); border-radius: 6px; padding: .5rem .7rem; background: var(--bg, #faf9f6); min-width: 0; }
.pickedmodel > div { min-width: 0; overflow-wrap: anywhere; }
.modelpicker input[type=search] { width: 100%; }
.previewbox.short { max-height: 15rem; margin: .4rem 0 0; }
.previewbox .rows tr { cursor: pointer; }

/* Delivery folder cover: landscape A4, like the paper original */
.printpage.landscape .printbar { max-width: 72rem; }
.sheet.folder { max-width: 72rem; padding: 1.4rem; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #111; }
.fc-title { background: #2b2b2b; color: #fff; padding: .55rem .8rem; font-size: 13px; letter-spacing: .03em; border-bottom: 3px solid #3a9d4a; display: flex; gap: .6rem; align-items: baseline; }
.fc-title strong { font-size: 17px; }
.fc-title span { opacity: .6; }
.fc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid #bbb; border-top: 0; margin-top: .4rem; }
.fc-cell { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: .25rem .4rem; min-height: 2.6rem; min-width: 0; }
.fc-cell.w2 { grid-column: span 2; } .fc-cell.w3 { grid-column: span 3; } .fc-cell.w4 { grid-column: span 4; } .fc-cell.shade { background: #efefef; }
.fc-cell label { display: block; font-size: 8px; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.fc-cell > div { font-size: 12px; font-weight: 600; margin-top: .15rem; overflow-wrap: anywhere; }
.fc-ticks { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-weight: 400; }
.fc-stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: .5rem; border: 1px solid #bbb; }
.fc-stage { background: #e8f0e8; border-right: 1px solid #fff; min-width: 0; }
.fc-stage:nth-child(even) { background: #f1f1f1; }
.fc-stage h4 { background: #2b2b2b; color: #fff; text-align: center; padding: .3rem; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; margin: 0; }
.fc-stage ul { list-style: none; margin: 0; padding: .4rem .4rem 0; }
.fc-stage li { margin-bottom: .45rem; line-height: 1.25; }
.fc-sign { margin: .3rem .4rem .5rem; font-size: 9px; color: #555; font-weight: 700; border-bottom: 1px solid #777; padding-bottom: .9rem; }
.fc-fine { font-style: italic; color: #666; font-size: 8.5px; margin: .4rem 0; }
.fc-notes h4 { background: #2b2b2b; color: #fff; padding: .25rem .5rem; font-size: 10px; margin: 0; }
.fc-notes div { height: 3.2rem; border-bottom: 1px solid #999; }
@media print {
  @page { size: A4 landscape; margin: 8mm; }
  .sheet.folder { padding: 0; max-width: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 760px) {
  .fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-cell.w2, .fc-cell.w3, .fc-cell.w4 { grid-column: span 2; }
  .fc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Deals with several vehicles: each bike with its items and total */
.grid.lines tbody.vgroup { border-top: 2px solid var(--line); }
.grid.lines tbody.vgroup tr.vline td { background: var(--info-soft); }
.grid.lines tr.ghead td, table.grouped tr.ghead td { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: .8rem; border-bottom: 0; }
.grid.lines tr.vsub td { font-weight: 700; border-top: 1px solid var(--text); }
.grid.lines tr.vsub td:first-child { text-align: right; }
.grid.lines tr.vadd td { padding-top: 0; border-bottom: 0; }
.addbar.slim { padding: .2rem 0 .6rem; margin: 0; border: 0; gap: .35rem; flex-wrap: wrap; align-items: center; }
.addbar.slim button { padding: .25rem .55rem; font-size: .82rem; }
.addbar small { color: var(--muted); }
select.forbike { margin-top: .3rem; width: auto; font-size: .8rem; padding: .15rem .3rem; }
.tradeins { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.tradeins .cardhead { padding-left: 0; padding-right: 0; }
/* Printed */
table.grouped { width: 100%; border-collapse: collapse; }
table.grouped tbody.vgroup tr.vline td { font-weight: 600; }
table.grouped tr.sub td:first-child { padding-left: 1.4rem; }
table.grouped tr.vsub td { font-weight: 700; border-top: 1px solid var(--text); border-bottom: 2px solid var(--text); }
table.grouped tr.vsub td:first-child { text-align: right; }
table.grouped tr.vsub small { font-weight: 400; color: var(--muted); }
.tradesum div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem .3rem; }
.sums .tradesum { display: block; padding: 0; }
.sums div > span:last-child { white-space: nowrap; }
.tradeins td.num strong { white-space: nowrap; }
/* Contract: each vehicle's price, accessories and total under its details */
table.vitems { width: 100%; border-collapse: collapse; margin-top: .5rem; }
table.vitems td { padding: .3rem .3rem; border-bottom: 1px solid var(--line); }
table.vitems tr.vline td { font-weight: 600; }
table.vitems tr.sub td:first-child { padding-left: 1.4rem; }
table.vitems tr.vsub td { font-weight: 700; border-top: 1px solid var(--text); border-bottom: 2px solid var(--text); }
table.vitems tr.vsub td:first-child { text-align: right; }
table.vitems tr.vsub small { font-weight: 400; color: var(--muted); }
/* Contract: each vehicle's price, accessories and total under its details */
table.vitems { width: 100%; border-collapse: collapse; margin-top: .5rem; }
table.vitems td { padding: .3rem .3rem; border-bottom: 1px solid var(--line); }
table.vitems tr.vline td { font-weight: 600; }
table.vitems tr.sub td:first-child { padding-left: 1.4rem; }
table.vitems tr.vsub td { font-weight: 700; border-top: 1px solid var(--text); border-bottom: 2px solid var(--text); }
table.vitems tr.vsub td:first-child { text-align: right; }
table.vitems tr.vsub small { font-weight: 400; color: var(--muted); }
.statutory { font-size: .85rem; line-height: 1.45; } .statutory p { margin: 0 0 .45rem; }
.contract .decl { font-size: .8rem; margin: .5rem 0 0; color: var(--text); }
@media print { .noprint { display: none !important; } }
/* TV: technicians are clickable; a technician's station */
a.tvcard { color: inherit; text-decoration: none; cursor: pointer; } a.tvcard:hover { outline: .3vh solid #58a6ff; }
.tvback { color: #58a6ff; font-size: 2.4vh; text-decoration: none; }
.station .stgrid { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.2vh 1.2vw; min-height: 0; }
.stnow .tvbig.huge { font-size: 22vh; }
.tvbar.big { height: 3vh; } .tvnums.big { font-size: 2.8vh; }
.tvdesc.wrap { white-space: normal; font-size: 2.4vh; }
.stday { border-top: 1px solid #30363d; padding-top: 1vh; margin-top: 1vh; }
.stdayhead { display: flex; justify-content: space-between; font-size: 2vh; color: #c9d1d9; gap: 1vw; flex-wrap: wrap; } .stdayhead b.good { color: #3fb950; } .stdayhead b.near { color: #f0b429; } .stdayhead b.bad { color: #ff5c5c; }
.stdaybar { position: relative; height: 3vh; margin-top: .8vh; }
.stdaybar span { position: absolute; left: 0; border-radius: .6vh; }
.stdaybar .avail { top: 0; height: 3vh; background: #21262d; } .stdaybar .booked { top: 0; height: 3vh; background: #30363d; } .stdaybar .clocked { top: .8vh; height: 1.4vh; background: #58a6ff; }
.stlist h4, .stweek h5 { font-size: 2.2vh; color: #8b949e; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .6vh; }
.stlist ul { list-style: none; margin: 0; padding: 0; overflow: auto; }
.stlist li { display: grid; grid-template-columns: 9vw minmax(0, 1fr) 11vw; gap: 1vw; padding: 1vh .5vw; border-bottom: 1px solid #30363d; font-size: 2.1vh; align-items: start; }
.stlist li small { display: block; color: #8b949e; font-size: 1.6vh; margin-top: .3vh; }
.stlist li .s { text-align: right; } .stlist li.on { background: #1f2d3d; border-left: .6vh solid #58a6ff; } .stlist li.done { opacity: .5; } .stlist li.parts .s { color: #ff5c5c; }
.tvmsg.small { font-size: 2.2vh; }
.stweek { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2vw; }
.stdaycol { background: #161b22; border-radius: 1vh; padding: 1vh .8vw; font-size: 1.7vh; min-height: 12vh; overflow: hidden; }
.stdaycol h5 { display: flex; justify-content: space-between; color: #e6edf3; } .stdaycol h5 small { color: #8b949e; text-transform: none; letter-spacing: 0; font-weight: 400; }
.stdaycol p { margin: .3vh 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9d1d9; }
.stdaycol.over h5 small { color: #ff5c5c; } .stdaycol.leave { opacity: .5; }
.tvfoot .hint { color: #6e7681; }
@media (max-width: 900px) { .station .stgrid { grid-template-columns: 1fr; } .stweek { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stlist li { grid-template-columns: 5rem minmax(0, 1fr); } .stlist li .s { grid-column: 2; text-align: left; } .stnow .tvbig.huge { font-size: 14vh; } }
/* Bank reconciliation */
.recsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.recsum > div { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.recsum span { font-size: .78rem; color: var(--muted); } .recsum b { font-size: 1.15rem; font-variant-numeric: tabular-nums; } .recsum small { color: var(--muted); }
span.in { color: #1a7f37; font-variant-numeric: tabular-nums; } span.out { color: #b42318; font-variant-numeric: tabular-nums; }
.recline { display: flex; gap: 1rem; align-items: baseline; padding: .6rem .8rem; background: var(--info-soft); border-radius: 6px; margin-bottom: .8rem; flex-wrap: wrap; } .recline strong { flex: 1; min-width: 10rem; }
tr.exact td { background: #eaf7ee; }
.splitrow { display: grid; grid-template-columns: minmax(0, 2fr) 7rem minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: .4rem; margin-bottom: .4rem; }
ul.changes li { padding: .25rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) { .splitrow { grid-template-columns: 1fr 1fr; } }
.aging { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem 1rem; } .aging div { display: flex; flex-direction: column; } .aging span { font-size: .78rem; color: var(--muted); } .aging b { font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .aging { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Dark theme
   Chosen per screen (Light / Dark / Match this device) and remembered in that browser.
   Printed documents (invoices, contracts, folder covers, statements) always stay black on white. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #0b0e13; --ink-2: #1a1f27; --ink-line: #2a313c; --ink-text: #c9d0da; --ink-muted: #7d8898;
  --bg: #12161c; --surface: #1a1f27; --line: #2c333e; --line-2: #232a33;
  --text: #e3e7ed; --muted: #97a1b0;
  --accent: #e8643b; --accent-dark: #ff8a63; --accent-soft: #3a2119;
  --ok: #4cc38a; --ok-soft: #15291f; --warn: #e3b341; --warn-soft: #2e2512; --bad: #ff6b61; --bad-soft: #351a19; --info-soft: #172435;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --bg-2: rgba(255, 255, 255, .05);
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #11151b; border-color: #38404c; color: var(--text); }
html[data-theme="dark"] input:disabled, html[data-theme="dark"] select:disabled, html[data-theme="dark"] textarea:disabled { background: #1d232c; color: var(--muted); }
html[data-theme="dark"] button:hover, html[data-theme="dark"] .button:hover { border-color: #4a5462; }
html[data-theme="dark"] .field > span, html[data-theme="dark"] .label { color: #b6bfcc; }
html[data-theme="dark"] .grid th, html[data-theme="dark"] .modal footer, html[data-theme="dark"] .addbar, html[data-theme="dark"] .scanbar,
html[data-theme="dark"] .unscheduled, html[data-theme="dark"] .subrow td, html[data-theme="dark"] .avail { background: #161b22; }
html[data-theme="dark"] .grid.rows tbody tr:hover, html[data-theme="dark"] .grid.rows tbody tr:focus-visible { background: #20262f; }
html[data-theme="dark"] .badge, html[data-theme="dark"] .score { color: #c4ccd8; }
html[data-theme="dark"] .badge.info { background: #262046; color: #b5a6ff; }
html[data-theme="dark"] .alert.error { border-color: #5a2a27; color: #ffb4ad; }
html[data-theme="dark"] .alert.warn, html[data-theme="dark"] .unsavedbar { border-color: #5a4720; color: #f0cf7a; }
html[data-theme="dark"] .alert.info { border-color: #2a4466; color: #a9c8ef; }
html[data-theme="dark"] .alert.okbox { border-color: #23523a; color: #8fe0b5; }
html[data-theme="dark"] .demobar { border-bottom-color: #5a4720; }
html[data-theme="dark"] .board .col { background: #161b22; }
html[data-theme="dark"] .calendar .day { background: var(--surface); } html[data-theme="dark"] .calendar .day.out { background: #151a21; }
html[data-theme="dark"] .calendar .day a.paid { background: #15291f; border-left-color: #4cc38a; }
html[data-theme="dark"] .calendar .day.today .n { background: var(--text); color: var(--bg); }
html[data-theme="dark"] .jobs tr.waiting td, html[data-theme="dark"] tr.waiting td { background: #2c1718; }
html[data-theme="dark"] .jobs tr.waiting:hover td { background: #3a1d1e; }
html[data-theme="dark"] .jobchip { background: #1f2733; border-color: #2f3a49; }
html[data-theme="dark"] .jobchip:hover { background: #263040; }
html[data-theme="dark"] .jobchip.waiting { background: #2c1718; border-color: #5a2a27; }
html[data-theme="dark"] .availday.closed { background: #1d232c; }
html[data-theme="dark"] .availday.free { border-color: #23523a; } html[data-theme="dark"] .availday.tight { border-color: #5a4720; } html[data-theme="dark"] .availday.full { border-color: #5a2a27; }
html[data-theme="dark"] .leavetag { background: #2e2512; color: #f0cf7a; }
html[data-theme="dark"] tr.exact td { background: #15291f; }
html[data-theme="dark"] span.in { color: #4cc38a; } html[data-theme="dark"] span.out { color: #ff7b72; }
html[data-theme="dark"] .grid.lines tbody.vgroup tr.vline td { background: #172435; }
html[data-theme="dark"] .pickedmodel { background: #161b22; }
html[data-theme="dark"] .segmented button.on, html[data-theme="dark"] .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
html[data-theme="dark"] .recsum > div { background: var(--surface); }
html[data-theme="dark"] .modal { background: var(--surface); }
html[data-theme="dark"] .toast { background: #2a313c; }
/* Documents to print keep their paper colours. */
html[data-theme="dark"] .printpage {
  color-scheme: light;
  --bg: #f4f2ee; --surface: #fff; --line: #e2ded6; --line-2: #efece6; --text: #1b1f26; --muted: #646c78;
  --accent: #d9481f; --accent-dark: #b83a16; --ok: #1d7a4d; --bad: #b3261e; --warn: #8a5a00; --info-soft: #e6eef8;
  background: #3a3f47; color: var(--text);
}
html[data-theme="dark"] .printpage .badge { color: #4a515c; }
html[data-theme="dark"] .printpage input, html[data-theme="dark"] .printpage select { background: #fff; color: #1b1f26; border-color: #cfc9be; }
@media print { html[data-theme="dark"] .printpage { background: #fff; } html[data-theme="dark"], html[data-theme="dark"] body { background: #fff; } }

/* Theme switch in the sidebar */
.themeswitch { display: flex; gap: .2rem; margin-top: .6rem; }
.themeswitch button { flex: 1; padding: .25rem .3rem; font-size: .75rem; background: transparent; border-color: var(--ink-line); color: var(--ink-muted); }
.themeswitch button.on { background: var(--ink-2); color: #fff; border-color: var(--ink-muted); }

/* ---------------------------------------------------------------- Problem reports */
.feedbackbtn { width: 100%; margin-top: .6rem; font-size: .8rem; padding: .35rem .5rem; background: transparent; border-color: var(--ink-line); color: var(--ink-text); }
.feedbackbtn:hover { background: var(--ink-2); color: #fff; }
.attachlist { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.attachlist li { display: flex; align-items: center; gap: .6rem; padding: .35rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.attachlist img, .attachlist video, .attachlist .fileicon { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--line-2); flex: none; }
.attachlist .fileicon { display: grid; place-items: center; font-size: .65rem; font-weight: 700; color: var(--muted); }
.attachlist span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachlist small { display: block; color: var(--muted); }
.recbar { position: fixed; z-index: 200; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .55rem 1rem; border-radius: 99px; background: #1b1f26; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: .9rem; }
.recbar .dot { width: .7rem; height: .7rem; border-radius: 50%; background: #ff4d3d; animation: recblink 1s infinite; }
@keyframes recblink { 50% { opacity: .3; } }
.pre { white-space: pre-wrap; }

/* ---------------------------------------------------------------- Stock photos and listings */
.cardhead { display: flex; align-items: center; gap: .8rem; justify-content: space-between; margin-bottom: .6rem; }
.cardhead h3 { margin: 0; } .cardhead h3 small { font-weight: 500; color: var(--muted); margin-left: .4rem; }
section.card + section.card { margin-top: 1rem; }
.cols + section.card { margin-top: 1rem; }
.mediagrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; }
.mediagrid li { position: relative; }
.mediagrid .thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line-2); position: relative; }
.mediagrid .thumb img, .mediagrid .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mediagrid li.cover .thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.mediagrid .play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.8rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.covertag { position: absolute; top: .35rem; left: .35rem; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 650; padding: .1rem .45rem; border-radius: 99px; }
.mediaacts { display: flex; gap: .2rem; justify-content: center; margin-top: .25rem; }
.mediaacts button { padding: .1rem .45rem; font-size: .78rem; }
.mediaview img, .mediaview video { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 6px; background: #000; }
.withthumb { display: flex; gap: .7rem; align-items: center; }
.rowthumb { width: 64px; height: 48px; flex: none; object-fit: cover; border-radius: 5px; background: var(--line-2); display: inline-block; }
.thumbcell { width: 84px; } .thumbcell img { width: 72px; height: 54px; object-fit: cover; border-radius: 5px; display: block; }
.nothumb { display: grid; place-items: center; width: 72px; height: 54px; border-radius: 5px; background: var(--line-2); color: var(--muted); font-size: .68rem; text-align: center; }
.sitegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.site h3 { margin-top: 0; display: flex; gap: .5rem; align-items: center; }
.site .row { margin-top: .6rem; }
.sectionhead { margin: 1.2rem 0 .6rem; }
.row { display: flex; gap: .5rem; align-items: center; } .row.wrap { flex-wrap: wrap; }
.card .check { margin: .35rem 0; } .check input[type=checkbox] { width: auto; }
html[data-theme="dark"] .recbar { background: #2a313c; }
.grid tr.totalrow td { border-top: 2px solid var(--line); background: var(--line-2); }
.photoname { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .3rem; font-size: .82rem; } .photoname small { width: 100%; color: var(--muted); }

/* ---------------------------------------------------------------- Supplier transactions (C9-style) */
.txnbal { display: grid; grid-template-columns: 2fr repeat(5, minmax(0, 1fr)); gap: .5rem; padding: 0 1rem 1rem; }
.txnbal > div { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; background: var(--surface); }
.txnbal span { display: block; font-size: .75rem; color: var(--muted); }
.txnbal b { font-size: 1.05rem; } .txnbal .big b { font-size: 1.5rem; } .txnbal small { display: block; color: var(--muted); font-size: .75rem; }
@media (max-width: 900px) { .txnbal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.txnlist td { vertical-align: top; } .txnlist td small { color: var(--muted); }
.grid tr.done td { color: var(--muted); }
input.search.small { width: 12rem; padding: .3rem .5rem; }
.selectedtotal { display: flex; justify-content: flex-end; gap: 1rem; align-items: baseline; padding: .6rem .2rem; font-size: 1.05rem; }
.selectedtotal b { font-size: 1.3rem; }
.txntypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem; margin-bottom: 1rem; }
.txntypes button { text-align: left; padding: .5rem .7rem; display: flex; flex-direction: column; gap: .15rem; height: auto; }
.txntypes button small { color: var(--muted); font-size: .75rem; line-height: 1.3; }
.txntypes button.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.methodbtns { display: flex; flex-wrap: wrap; gap: .35rem; }
.methodbtns button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.balanceband, .confirmband { margin-top: 1rem; padding: .7rem 1rem; border-radius: 8px; background: var(--info-soft); font-size: 1.1rem; font-weight: 600; text-align: center; }
.confirmband { background: var(--ok-soft); margin: 0 0 1rem; }
.balanceband small { font-weight: 400; color: var(--muted); }
.menubtns { display: grid; gap: .4rem; margin-top: 1rem; }
.menubtns button { padding: .7rem; font-size: 1rem; }
.bankpick { margin-bottom: .6rem; }
.txntypes button { white-space: normal; }
.txnlist td:nth-child(-n+2), .billpick td:nth-child(2), .billpick td:nth-child(3) { white-space: nowrap; }
.tablewrap { overflow-x: auto; max-width: 100%; } .billpick { font-size: .9rem; }
.modal.wide:has(.txntypes), .modal.wide:has(.billpick) { max-width: 66rem; }
.bigamount { font-size: 1.4rem; font-weight: 650; } button.small { padding: .2rem .6rem; font-size: .82rem; } .radiorow label { display: block; margin: .35rem 0; }

/* ---------------------------------------------------------------- Part labels (Dymo) */
.labelpage { background: #fff; color: #000; min-height: 100vh; }
.labelbar { position: sticky; top: 0; z-index: 2; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .7rem 1rem; background: #f4f2ee; border-bottom: 1px solid #ddd; color: #1b1f26; }
.labelopts { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; flex: 1; font-size: .85rem; }
.labelopts label { display: flex; gap: .3rem; align-items: center; } .labelopts select, .labelopts input { width: auto; }
.labelhelp { padding: 1rem; max-width: 60rem; color: #1b1f26; }
.labelsheet { display: flex; flex-wrap: wrap; gap: 6mm; padding: 1rem; }
.labelpagebox { position: relative; overflow: hidden; outline: 1px dashed #bbb; background: #fff; }
.dlabel { position: absolute; top: 0; left: 0; transform-origin: top left; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; font-family: Arial, Helvetica, sans-serif; color: #000; line-height: 1.12; overflow: hidden; }
.dl-top { display: flex; justify-content: space-between; gap: 1mm; align-items: baseline; white-space: nowrap; }
.dl-no { font-family: 'Consolas', 'Courier New', monospace; font-size: 1.05em; overflow: hidden; text-overflow: ellipsis; }
.dl-price { font-size: 1.35em; }
.dl-desc { font-size: .9em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dl-bar svg { display: block; }
.dl-foot { display: flex; justify-content: space-between; gap: 1mm; font-size: .75em; white-space: nowrap; overflow: hidden; }
.labelask { display: inline-flex; gap: .3rem; align-items: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media print {
  .noprint, .side, .menubtn, .demobar, .toasts { display: none !important; }
  .labelpage { min-height: 0; }
  .labelsheet { display: block; padding: 0; gap: 0; }
  .labelpagebox { outline: none; page-break-after: always; break-after: page; }
  .labelpagebox:last-child { page-break-after: auto; break-after: auto; }
}
html[data-theme="dark"] .labelpage, html[data-theme="dark"] .labelbar, html[data-theme="dark"] .labelhelp { color-scheme: light; }
html[data-theme="dark"] .labelpage { --bg: #f4f2ee; --surface: #fff; --line: #e2ded6; --line-2: #efece6; --text: #1b1f26; --muted: #646c78; --accent: #d9481f; --accent-dark: #b83a16; background: #fff; color: #1b1f26; }
html[data-theme="dark"] .labelpage input, html[data-theme="dark"] .labelpage select { background: #fff; color: #1b1f26; border-color: #cfc9be; }
html[data-theme="dark"] .labelpage .grid th { background: #f7f5f1; }
/* Order book: unsent orders, receive summary, back orders */
.cardhead .actions { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.card.unsent { border-left: 4px solid var(--bad); }
.received-stock { margin: .8rem 0; font-size: 1.05rem; }
.cardless { margin: 1rem 0; } .cardless h3 { margin-bottom: .5rem; }
tr.waiting td { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.modal footer a.button { text-decoration: none; }
@media print { .filterbar, .pagehead .actions { display: none !important; } }
.cancelask { margin-top: .35rem; } .cancelask .row { display: flex; gap: .35rem; margin-top: .3rem; flex-wrap: wrap; } .cancelask button { padding: .25rem .55rem; font-size: .85rem; }
/* Jobs whose parts have all arrived */
.countbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1; margin-left: .35rem; }
.card.arrivedcard { border-left: 4px solid var(--ok); }
.partsflag.arrived { color: var(--ok); font-weight: 600; font-size: .85em; display: block; }
/* Cash tills */
.tillbar label.inline { display: inline-flex; gap: .5rem; align-items: center; font-weight: 560; }
.tillpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.tillcard { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.tillcard:hover { text-decoration: none; border-color: var(--muted); }
.tillcard.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.tillcard small { color: var(--muted); }
.tillgrid th[scope], .tillgrid tbody th { text-align: left; font-weight: 650; }
.tillgrid input.money { max-width: 8rem; margin-left: auto; display: block; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
@media (max-width: 1000px) { .cols3 { grid-template-columns: 1fr; } }
.denoms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem; margin-top: .7rem; }
.denoms label { display: grid; grid-template-columns: 5.2rem 4.5rem 1fr; align-items: center; gap: .4rem; }
.denoms label span { text-align: right; font-variant-numeric: tabular-nums; }
.denoms label small { color: var(--muted); font-variant-numeric: tabular-nums; }
.counted { margin-top: .8rem; font-size: 1.1rem; }
.grid.compact td, .grid.compact th { padding: .35rem .5rem; }
.tillstatus { margin: 1rem 0 2rem; padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.tillstatus > strong { display: block; font-size: 1.35rem; margin-bottom: .6rem; }
.tillstatus.ok { border-color: var(--ok); } .tillstatus.ok > strong { color: var(--ok); }
.tillstatus.bad { border-color: var(--bad); } .tillstatus.bad > strong { color: var(--bad); }
.tillstatus .row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tillresult.ok { border-left: 4px solid var(--ok); } .tillresult.bad { border-left: 4px solid var(--bad); }
.tillverdict { font-size: 1.2rem; font-weight: 650; margin: .3rem 0 .8rem; }
.side .who .mytill { display: block; font-size: .8rem; color: var(--ink-text); opacity: .8; }
.tillprint { max-width: 190mm; margin: 0 auto; padding: 1rem; } .tillprint h1 { font-size: 1.4rem; } .tillprint .sign { margin-top: 2rem; }
.cashup .toolbar input[type=date] { width: auto; flex: 0 0 auto; }
.cols3 { grid-template-columns: 1.5fr 1fr 1fr; }
@media (max-width: 1000px) { .cols3 { grid-template-columns: 1fr; } }
.denoms label { grid-template-columns: 3.6rem 3.8rem 1fr; }
.denoms label:last-child { grid-column: 1 / -1; grid-template-columns: 3.6rem 7rem 1fr; }
.tillgrid tbody th { background: transparent; color: var(--text); text-transform: none; letter-spacing: 0; font-size: .95rem; }
/* Test rides */
.facts { display: grid; grid-template-columns: 7rem 1fr; gap: .3rem .8rem; margin: 0 0 .8rem; } .facts dt { color: var(--muted); } .facts dd { margin: 0; }
.licphoto { max-width: 100%; max-height: 16rem; border-radius: 6px; border: 1px solid var(--line); }
.sigview { width: 18rem; height: 6rem; color: #13213a; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-right: 1rem; }
.row.spread { justify-content: space-between; }
.formactions { display: flex; gap: .6rem; justify-content: flex-end; margin: 1rem 0 2rem; }
.signpage { max-width: 860px; margin: 0 auto; padding: 1.2rem 1rem 3rem; font-size: 1.05rem; background: var(--surface); color: var(--text); min-height: 100vh; }
.signhead { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--text); margin-bottom: 1rem; }
.signhead h1 { margin: 0; font-size: 1.7rem; } .signhead p { margin: .2rem 0 .6rem; color: var(--muted); }
.signfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 760px) { .signfacts { grid-template-columns: 1fr; } }
.signfacts > div { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.signfacts span { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .signfacts small { color: var(--muted); }
.signterms { border: 1px solid var(--line); border-radius: 8px; padding: .4rem 1rem; max-height: 46vh; overflow-y: auto; font-size: .98rem; line-height: 1.5; margin-bottom: 1rem; }
.check.big { font-size: 1.05rem; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; } .check.big input { width: 1.4rem; height: 1.4rem; }
.signname { margin: 1rem 0; } .signname label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; } .signname input { font-size: 1.15rem; max-width: 26rem; }
.sigpad { position: relative; border: 2px dashed var(--muted); border-radius: 10px; background: #fff; touch-action: none; overflow: hidden; }
.sigpad canvas { display: block; touch-action: none; cursor: crosshair; }
.sigline { position: absolute; left: 1rem; bottom: 2.2rem; right: 1rem; border-bottom: 1px solid #b9b9b9; color: #9a9a9a; font-size: .85rem; pointer-events: none; padding-bottom: .1rem; }
.signactions { display: flex; justify-content: space-between; margin-top: 1rem; gap: 1rem; } button.big { font-size: 1.15rem; padding: .8rem 1.6rem; }
.signdone { text-align: center; padding: 4rem 1rem; } .signdone h1 { font-size: 2.2rem; }
.row.wrap { flex-wrap: wrap; }
.dealparts { border-top: 1px solid var(--line); padding: .8rem 1rem; } .dealparts .row { margin-bottom: .4rem; }
.ppsr .row { gap: .5rem; align-items: center; } .ppsr.compact { margin-top: .3rem; } .ppsr.compact button { padding: .2rem .5rem; font-size: .8rem; }
.dealppsr { display: flex; gap: .5rem; align-items: center; padding: .4rem 1rem; border-top: 1px solid var(--line); } .dealppsr .ppsr { flex: 1; margin: 0; }
/* QA pass (0.32.1): wide tables scroll inside their card instead of being cut off; the side menu fits a 768px-tall screen */
.card.flush { overflow-x: auto; }
.grid.lines .descrow input { min-width: 11rem; }
@media (min-width: 901px) and (max-height: 860px) {
  .side .brand { padding-top: .7rem; padding-bottom: .7rem; }
  .side nav a { padding: .36rem .7rem; }
  .who { padding: .6rem 1rem .7rem; }
  .who div { margin-top: .3rem; }
  .themeswitch { margin-top: .35rem; }
}
.side nav { scrollbar-width: thin; scrollbar-color: var(--ink-line) transparent; }
.tillgrid tbody th { background: transparent; border-bottom: 1px solid var(--line-2); }
.tradeins .ppsr.compact .row { flex-wrap: wrap; gap: .4rem; } .tradeins .ppsr.compact .spacer { display: none; }
/* 0.33: side menu in groups */
.side nav .navgroup { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted, #8b93a1); padding: .7rem .8rem .15rem; font-weight: 650; }
@media (min-width: 901px) and (max-height: 860px) { .side nav .navgroup { padding: .45rem .8rem .05rem; } .side nav a { padding: .3rem .7rem; } }
.tillnote { margin: .2rem 0 .6rem; padding: .35rem .6rem; border-radius: 6px; background: var(--line-2); color: var(--text); font-size: .88rem; }
.tillnote.warn { background: var(--warn-soft); color: var(--warn); }
.tillnote.muted { color: var(--muted); }
.formfoot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.msglog { list-style: none; margin: 0; padding: 0; } .msglog li { padding: .5rem 0; border-bottom: 1px solid var(--line-2, #eee); } .msglog li:last-child { border-bottom: 0; }
.msglog pre { white-space: pre-wrap; font-family: inherit; font-size: .88rem; margin: .3rem 0 0; padding: .5rem; background: var(--bg-2, rgba(0,0,0,.04)); border-radius: 6px; }
details.tmpl { border: 1px solid var(--line-2, #e5e7eb); border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; } details.tmpl summary { cursor: pointer; font-weight: 600; }
label.check.inline { display: inline-flex; margin: 0 .8rem 0 0; vertical-align: middle; }
tr.muted td { opacity: .6; }
@media (min-width: 901px) and (max-height: 860px) {
  .side nav { padding-top: .1rem; }
  .side nav a { padding: .24rem .7rem; font-size: .94rem; }
  .side nav .navgroup { padding: .35rem .8rem 0; font-size: .62rem; }
  .side .brand { padding-top: .55rem; padding-bottom: .55rem; }
  .who { padding: .45rem 1rem .55rem; font-size: .9rem; }
  .who .feedbackbtn, .who button.feedback { margin-top: .3rem; }
}
.devicecode .bigcode { font: 700 2rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; margin: .5rem 0; }
/* ---- Cash tender, change screen, 80 mm docket (0.34) ---- */
.tender { display: grid; gap: .6rem; margin-top: .6rem; }
.tender-due { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; } .tender-due b { font-size: 1.9rem; } .tender-due small { color: var(--muted, #6b7280); }
.tender-in { display: grid; gap: .25rem; font-weight: 600; } .tender-in input { font-size: 1.6rem; padding: .45rem .7rem; max-width: 14rem; }
.tender-quick { display: flex; gap: .4rem; flex-wrap: wrap; } .tender-quick button { min-width: 4.5rem; font-size: 1rem; }
.tender-change { display: flex; align-items: baseline; gap: .8rem; padding: .5rem .8rem; border-radius: 8px; background: var(--ok-bg, #e7f6ee); }
.tender-change b { font-size: 2.2rem; } .tender-change.short { background: var(--bad-bg, #fde8e8); }
.changescreen { position: fixed; inset: 0; background: rgba(10, 14, 20, .72); display: grid; place-items: center; z-index: 200; }
.changebox { background: var(--card, #fff); border-radius: 14px; padding: 2rem 3rem; text-align: center; min-width: min(34rem, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.changebox .label { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted, #6b7280); }
.changebox .amount { font-size: clamp(3.5rem, 12vw, 6.5rem); font-weight: 800; line-height: 1.1; margin: .3rem 0 .6rem; }
.changebox .detail { color: var(--muted, #6b7280); margin-bottom: 1.4rem; }
.changebox .buttons { display: flex; gap: .8rem; justify-content: center; } .changebox .buttons button { font-size: 1.1rem; padding: .7rem 1.6rem; }
.docket { width: 72mm; font: 12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #000; background: #fff; padding: 2mm; }
.docket .d-head { text-align: center; } .docket .d-head b { font-size: 15px; }
.docket .d-title { text-align: center; font-weight: 700; margin: 2mm 0 1mm; letter-spacing: .05em; }
.docket .d-row { display: flex; justify-content: space-between; gap: 2mm; } .docket .d-total { font-weight: 700; font-size: 15px; }
.docket .d-rule { border-top: 1px dashed #000; margin: 1.5mm 0; } .docket .d-line { margin-bottom: 1mm; }
.docket .d-small { font-size: 10px; } .docket .d-center, .docket .d-foot { text-align: center; } .docket .d-foot { margin: 1mm 0; }
.docketpage .docket { margin: 1rem auto; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.docket-print { position: absolute; left: -10000px; top: 0; }

@media print {
  body.printing-docket > *:not(.docket-print) { display: none !important; }
  body.printing-docket .docket-print { position: static; }
  .docket { box-shadow: none !important; margin: 0 !important; }
  .docketpage .printbar { display: none; }
}
/* ---- Finance calculator and A5 repayment card (0.35) ---- */
.fincalc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
@media (max-width: 1000px) { .fincalc { grid-template-columns: 1fr; } }
.finunit { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .8rem; } .finunit img, .finunit .nophoto { width: 9rem; height: 6.5rem; object-fit: cover; border-radius: 8px; background: var(--line-2, #eee); display: grid; place-items: center; color: var(--muted, #888); font-size: .8rem; flex: none; }
.slider { margin: 1rem 0 .4rem; } .slider label { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; } .slider b { font-size: 1.15rem; }
.slider input[type=range] { width: 100%; accent-color: var(--accent); margin: .4rem 0 0; }
.slider .ticks { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted, #888); }
.slider .ratebox { width: 6rem; padding: .2rem .4rem; }
.finresult .weekly { display: flex; align-items: baseline; gap: .5rem; } .finresult .weekly span { font-size: 3.2rem; font-weight: 800; line-height: 1; } .finresult .weekly small { font-size: 1.1rem; color: var(--muted, #666); }
.finresult .rates { display: flex; gap: 1.5rem; margin: .8rem 0; } .finresult .rates div { display: grid; } .finresult .rates b { font-size: 1.35rem; } .finresult .rates small { color: var(--muted, #666); }
.finresult .pairs dd { text-align: right; font-variant-numeric: tabular-nums; }
.stockpick { display: grid; gap: .3rem; margin-top: .6rem; max-height: 60vh; overflow: auto; }
.stockpickrow { display: grid; grid-template-columns: 5rem 1fr auto; gap: .8rem; align-items: center; text-align: left; padding: .4rem .6rem; }
.stockpickrow img, .stockpickrow .nophoto { width: 5rem; height: 3.5rem; object-fit: cover; border-radius: 6px; background: var(--line-2, #eee); display: grid; place-items: center; font-size: .7rem; color: var(--muted, #888); }
tr.clickable { cursor: pointer; }
.finsum { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; } .finsum td { padding: .3rem 0; border-bottom: 1px solid var(--line-2, #eee); } .finsum td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Repayment card: A4 landscape, folded to A5 (left = back, right = front) */
.foldsheet { width: 297mm; height: 210mm; margin: 1rem auto; display: grid; grid-template-columns: 1fr 1fr; background: #fff; color: #111; box-shadow: 0 2px 16px rgba(0,0,0,.18); position: relative; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.foldsheet::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: .3mm dashed #bbb; }
.fold-panel { position: relative; overflow: hidden; height: 210mm; box-sizing: border-box; }
.fold-back { padding: 9mm 9mm 8mm; font-size: 8.6pt; line-height: 1.28; display: flex; flex-direction: column; }
.fold-back h2 { font-size: 15pt; margin: 0 0 1mm; } .fold-back .fb-veh { margin: 0 0 3mm; color: #444; }
.fold-back .fc-table { width: 100%; border-collapse: collapse; margin-bottom: 3mm; } .fold-back .fc-table td { padding: .55mm 0; border-bottom: .3mm solid #ddd; } .fold-back .fc-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fold-back .fc-strong td { font-weight: 700; }
.fold-back .fc-fine { font-size: 6.5pt; line-height: 1.22; color: #222; } .fold-back .fc-fine p { margin: 0 0 1.2mm; }
.fold-back .fb-cta { margin-top: auto; background: #ffd400; color: #111; border-radius: 2mm; padding: 3mm 4mm; font-size: 10pt; } .fold-back .fb-cta small { display: block; font-size: 7pt; opacity: .8; margin-top: .5mm; }
.fold-front { display: flex; flex-direction: column; background: #fff; color: #111; }
.ff-brand { display: flex; justify-content: space-between; align-items: baseline; padding: 4mm 7mm 3mm; font-size: 11pt; letter-spacing: .02em; border-bottom: .6mm solid #111; } .ff-brand span { font-size: 9pt; }
.ff-photo { position: relative; height: 80mm; background: #eee; } .ff-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ff-nophoto { height: 100%; display: grid; place-items: center; text-align: center; padding: 0 10mm; font-size: 20pt; font-weight: 800; color: #111; background: #f2f2f2; }
.ff-badge { position: absolute; left: 6mm; bottom: 4mm; background: #111; color: #fff; font-weight: 700; font-size: 9pt; padding: 1mm 3mm; border-radius: 1mm; text-transform: uppercase; letter-spacing: .06em; }
.ff-body { padding: 4mm 0 0; flex: 1; display: flex; flex-direction: column; }
.ff-model { font-size: 19pt; font-weight: 800; line-height: 1.05; padding: 0 7mm; } .ff-sub { font-size: 8.5pt; color: #444; margin-top: 1mm; padding: 0 7mm; }
.ff-band { background: #ffd400; color: #111; margin-top: 4mm; padding: 3mm 7mm 3.5mm; }
.ff-headline { font-size: 12pt; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.ff-price { font-size: 54pt; font-weight: 900; line-height: .95; letter-spacing: -.02em; display: flex; align-items: flex-start; }
.ff-price .ff-dollar { font-size: 26pt; margin-top: 2.5mm; margin-right: .8mm; } .ff-price .ff-cents { font-size: 24pt; margin-top: 2.5mm; }
.ff-price .ff-per { font-size: 11pt; font-weight: 700; align-self: flex-end; margin: 0 0 2.5mm 2.5mm; letter-spacing: 0; }
.ff-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 4mm; margin: 0 7mm; padding: 3mm 0; border-bottom: .3mm solid #ccc; }
.ff-terms div { display: grid; } .ff-terms b { font-size: 12.5pt; } .ff-terms small { font-size: 7.5pt; color: #444; }
.ff-cash { margin: 2.5mm 7mm 0; font-size: 9pt; color: #333; }
.ff-foot { padding: 3mm 7mm 4mm; font-size: 6.8pt; color: #444; }
@media print { .foldsheet { margin: 0; box-shadow: none; } .foldsheet::after { border-left-color: #ccc; } }
@media screen and (max-width: 1240px) { .foldsheet { zoom: .75; } }
/* ---- Reports (0.36) ---- */
.reportgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.report .card.flush { margin-bottom: 1rem; }
.stat small.delta { margin-top: .2rem; }
.stat.warn b { color: var(--warn, #b45309); }
.agebands .barcell { width: 35%; } .agebands .bar { display: block; height: .7rem; border-radius: 99px; background: var(--accent); }
.agebands .bar.age0 { background: #1f9d6b; } .agebands .bar.age1 { background: #6fb43f; } .agebands .bar.age2 { background: #e0b100; } .agebands .bar.age3 { background: #e07b1f; } .agebands .bar.age4 { background: #d04a2a; } .agebands .bar.age5 { background: #9b1c1c; }
.agebands tr.on td { background: var(--accent-soft, rgba(224,83,31,.08)); }
.deptpl tr.subrow td { font-size: .86rem; color: var(--muted, #555); background: var(--bg-2, rgba(0,0,0,.02)); }
table.grid tr.total td { font-weight: 700; border-top: 2px solid var(--line, #ddd); }
.builder { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr; } }
.builderside .savedlist { list-style: none; padding: 0; margin: 0 0 .8rem; } .builderside .savedlist li { padding: .3rem 0; border-bottom: 1px solid var(--line-2, #eee); display: grid; }
.builderside .savedlist a.on { font-weight: 700; } .builderside .savedlist small { color: var(--muted, #777); }
.colpick { display: flex; flex-wrap: wrap; gap: .35rem; } .colpick .chip { cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; } .colpick .chip input { margin: 0; }
.filterrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .4rem; } .filterrow select, .filterrow input { width: auto; min-width: 9rem; }
.enumpick { display: inline-flex; flex-wrap: wrap; gap: .2rem .6rem; }
.totalpick { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .4rem; } .totalpick select { width: auto; }
.printonly { display: none; }
@media print {
  .report .toolbar, .builderside, .builder > div > .card:first-child, .tabs, .pagehead button { display: none !important; }
  .builder { display: block; } .printonly { display: block; font-size: 14pt; }
  .report .stats { grid-template-columns: repeat(4, 1fr); } .report table.grid { font-size: 9pt; }
  .report tr.clickable { cursor: default; }
}
.report .toolbar.wrap { flex-wrap: wrap; gap: .5rem; } .daterange { display: inline-flex; align-items: center; gap: .4rem; } .daterange input { width: auto; }
/* Commissions (0.37) */
.commwrap { overflow-x: auto; margin: 0 -.2rem; } .commlines td, .commlines th { vertical-align: top; padding-left: .25rem; padding-right: .25rem; } .commlines select, .commlines input { width: 100%; min-width: 0; }
.commlines td:nth-child(1) { width: 14rem; } .commlines td:nth-child(2) { width: 8.5rem; } .commlines td:nth-child(3) { min-width: 12rem; } .commlines td:nth-child(4) { width: 7rem; } .commlines td:nth-child(5) { width: 7rem; } .commlines td:nth-child(6) { width: 2rem; }
.dealpick { position: relative; display: block; margin-top: .25rem; } .dealhits { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: 6px; display: grid; box-shadow: var(--shadow); }
.dealhits button { text-align: left; border: 0; border-radius: 0; background: transparent; padding: .35rem .6rem; } .dealhits button:hover { background: var(--bg-2, #f4f4f4); }
.dealtag { display: inline-flex; gap: .4rem; align-items: center; margin-top: .25rem; font-size: .85rem; background: var(--bg-2, #f2f2f2); padding: .15rem .5rem; border-radius: 99px; }
.modal.wide:has(.commlines) { max-width: 70rem; } .modal.wide .commlines select { min-width: 0; }

/* Year-end archive viewer */
.archivebanner { background: var(--warn-soft); border: 1px solid var(--warn, #c9a400); border-radius: 8px; padding: .55rem .8rem; margin-bottom: .9rem; font-size: .92rem; }
.archivebanner a { margin-left: .4rem; }
.actions-cell .button, .actions-cell a + a, .actions-cell a + button { margin-left: .35rem; }
table.grid tr.section td { background: var(--bg-2, rgba(0,0,0,.03)); font-size: .88rem; }
@media print { .archivebanner { border: 1px solid #000; background: none; } }

/* Updates and price files from the provider */
.notices { display: grid; gap: .4rem; margin-bottom: 1rem; }
.notice { display: block; padding: .6rem .9rem; border-radius: 8px; border: 1px solid var(--line, #ddd); background: var(--info-soft); color: inherit; text-decoration: none; font-weight: 550; }
.notice.update { background: var(--ok-soft); }
.notice:hover { filter: brightness(.97); }
.releasenotes { white-space: pre-wrap; background: var(--bg-2, rgba(0,0,0,.03)); border-radius: 8px; padding: .7rem .9rem; margin: .4rem 0 .8rem; }
.updatecard { border-color: var(--ok); }
.hint.pad { padding: .6rem 1rem; }

/* Salespeople's commission */
p.salesperson { margin: -.6rem 0 .9rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; }
p.salesperson select { min-height: 2rem; padding: .2rem .5rem; }
.commrun h2 { margin: .4rem 0 .2rem; }
.mycomm h4 { display: flex; gap: .5rem; align-items: center; margin: .8rem 0 .3rem; }
.mycomm h4 .right { margin-left: auto; }
@media print { .commperson { break-inside: avoid; page-break-after: always; } .commperson:last-of-type { page-break-after: auto; } }

/* Settings → Folder covers: the layout editor */
.fcl-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .8rem; margin-top: .6rem; }
.fcl-stage { border: 1px solid var(--line); border-radius: 8px; padding: .6rem; background: var(--bg); }
.fcl-stagehead { display: flex; gap: .2rem; align-items: center; margin-bottom: .4rem; }
.fcl-stagehead input { font-weight: 700; flex: 1; min-width: 0; }
.fcl-label { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: .5rem 0 .25rem; }
.fcl-lines { display: flex; flex-direction: column; gap: .25rem; }
.fcl-line { display: flex; gap: .1rem; align-items: center; }
.fcl-line input { flex: 1; min-width: 0; padding: .3rem .45rem; }
.fcl-line button, .fcl-stagehead button { padding: .2rem .25rem; min-width: 1.5rem; }
.fcl-add { align-self: flex-start; padding: .2rem .3rem; font-size: .88rem; }
.fcl-addstage { border: 2px dashed var(--line); border-radius: 8px; min-height: 6rem; background: none; color: var(--muted); font-weight: 600; }
.fcl-preview { overflow-x: auto; background: #e9e9e9; padding: 1rem; border-radius: 6px; }
.fcl-preview .sheet.folder { min-width: 60rem; box-shadow: var(--shadow); }

/* Health warnings on every page */
.healthbar { font-size: .88rem; padding: .5rem 2rem; border-bottom: 1px solid; }
.healthbar.error { background: var(--bad-soft, #fbe9e7); color: var(--bad); border-color: #efc4bd; }
.healthbar.warn { background: var(--warn-soft); color: var(--warn); border-color: #ecdcae; }
.healthbar a { color: inherit; font-weight: 700; margin-left: .3rem; }

/* Dark theme: main buttons on a deeper orange so white text stays easy to read (links keep the brighter orange). */
html[data-theme="dark"] button.primary, html[data-theme="dark"] .button.primary, html[data-theme="dark"] a.button.primary-link, html[data-theme="dark"] .score.hot { background: #c4501f; border-color: #c4501f; color: #fff; }
html[data-theme="dark"] button.primary:hover:not(:disabled), html[data-theme="dark"] .button.primary:hover { background: #b83a16; border-color: #b83a16; }

/* Service templates: make › category › model tree, and adding parts by typing */
.tpltree { padding: 0 1rem 1rem; }
.tplmake { border-top: 1px solid var(--line); }
.tplhead { display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: .6rem .2rem; font-size: 1rem; }
.tplhead small { color: var(--muted); }
.tplcat { margin: 0 0 .6rem 1.2rem; }
.tplcatname { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: .3rem 0; }
.tplmodel { margin: 0 0 .5rem .6rem; border-left: 2px solid var(--line); padding-left: .7rem; }
.tplmodelname { font-weight: 700; margin: .2rem 0; }
.quickpart { margin-top: .8rem; }
.quickpart .row { display: flex; gap: .5rem; }
.quickpart .row input:first-child { flex: 1; }
.quickhits { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; margin-top: .3rem; overflow: hidden; }
.quickhits button { text-align: left; border: 0; border-radius: 0; background: var(--surface); padding: .45rem .7rem; }
.quickhits button.on, .quickhits button:hover { background: var(--bg-2); }
.quickhits small { color: var(--muted); margin-left: .4rem; }

.tpllines td:nth-child(2) { min-width: 20rem; } .tpllines td:first-child { width: 8rem; }

/* Vehicle quote: the contract layout, unmistakably a quote */
.sheet.contract.quote { position: relative; overflow: hidden; }
.quotemark { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 9rem; font-weight: 900; letter-spacing: .2em; color: rgba(217, 72, 31, .08); pointer-events: none; white-space: nowrap; z-index: 0; }
.sheet.contract.quote > *:not(.quotemark) { position: relative; z-index: 1; }
.quotehead { font-size: 1.6rem !important; letter-spacing: .12em !important; color: #b83a16; }
.quotenote { border: 2px solid #d9481f; border-radius: 6px; padding: .5rem .8rem; font-weight: 600; margin: 1rem 0; }
@media print { .quotemark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.itemparts { display: flex; flex-direction: column; gap: .3rem; }
.partrow { display: grid; grid-template-columns: 10rem 4rem 1fr auto; gap: .4rem; align-items: center; }
.partrow small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chartgrid td.num { font-weight: 700; text-align: center; }
.chartgrid .sym-replace { color: var(--accent-dark); } .chartgrid .sym-lubricate { color: var(--ok); }
/* Template editor: a wider dialog, the lines table scrolls inside it rather than spilling out */
.modal.wide:has(.tplines) { max-width: 62rem; }
.tplines { overflow-x: auto; }
.tplines .grid select { min-width: 7rem; }
.tplines .grid td:nth-child(2) { min-width: 14rem; }

/* Importing a service schedule: the manual and the import side by side */
.workspace { position: fixed; inset: 1.5vh 1.5vw; z-index: 25; background: var(--surface); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }
.workspace > header { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.2rem; border-bottom: 1px solid var(--line); }
.workspace > header h2 { font-size: 1.1rem; margin: 0; } .workspace > header small { color: var(--muted); font-weight: 400; }
.workspace > footer { display: flex; gap: .6rem; align-items: center; justify-content: flex-end; padding: .7rem 1.2rem; border-top: 1px solid var(--line); }
.workspace > footer .hint { margin-right: auto; }
.splitpanes { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.splitpanes .pane { overflow: auto; padding: 1rem 1.2rem; min-height: 0; display: flex; flex-direction: column; }
.splitpanes .pane:first-child { border-right: 1px solid var(--line); background: var(--bg); }
.manualframe { flex: 1; width: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.chartwrap { overflow: auto; }
.chartgrid th.num { cursor: pointer; }
.chartgrid .colon { background: var(--accent-soft); }
.chartgrid tr.rowdue td:first-child { font-weight: 600; }
.rowhot, .rowhot td { background: var(--info-soft) !important; }
.panehead { margin: 1.2rem 0 .4rem; display: flex; gap: .5rem; align-items: center; }
.duebox { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; }
.duebox h4 { margin: .6rem 0 .3rem; } .duebox .duelabel { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: .5rem; }
.duebox li { padding: .15rem .3rem; border-radius: 4px; } .duebox p.small { font-size: .88rem; margin: .2rem 0; }
@media (max-width: 1000px) { .splitpanes { grid-template-columns: 1fr; } .splitpanes .pane:first-child { border-right: 0; border-bottom: 1px solid var(--line); max-height: 45vh; } }
.splitpanes .pane > .segmented { flex-shrink: 0; align-self: flex-start; align-items: center; margin-bottom: .6rem; }
.splitpanes .pane > .segmented a { padding: 0 .7rem; }
.chartwrap { flex: 1; min-height: 0; }
.chartwrap thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }

/* Importing a pay run */
.paytotals { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: 1rem 0 .5rem; }
.paytotals > div { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; display: flex; flex-direction: column; }
.paytotals span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.paytotals b { font-size: 1.15rem; } .paytotals small { color: var(--muted); }
.payrollimport select { max-width: 100%; }
.modal.wide:has(.payrollimport) { max-width: 70rem; }

/* Demo trial sign-ins portal */
.demoadmin { max-width: 78rem; margin: 0 auto; padding: 1.5rem; }
.demoadmin > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.demoadmin h1 { font-size: 1.4rem; margin: 0; }
.demoadmin .card { margin-bottom: 1rem; }
.demoadmin .card.narrow { max-width: 28rem; }
.demoadmin details.card > summary { cursor: pointer; font-weight: 600; }
.inline-input { display: flex; gap: .4rem; } .inline-input input { flex: 1; }