/* Business Automation — application shell.
   Deliberately small and hand-written: the product's own look, not Bootstrap's. */

:root {
    /* Business Central / Fluent. Neutrals are Fluent's grey ramp, the accent is
       BC's #0078d4, and the semantic colours are Fluent's own so a red means the
       same thing here as it does in every other Dynamics screen a user has seen. */
    --ground: #f3f2f1;
    --surface: #ffffff;
    --surface-2: #faf9f8;
    --ink: #201f1e;
    --ink-2: #323130;
    --muted: #605e5c;
    --rule: #edebe9;
    --rule-strong: #d2d0ce;
    --accent: #0078d4;
    --accent-dark: #005a9e;
    --accent-soft: #deecf9;
    --oxide: #a4262c;
    --oxide-soft: #fde7e9;
    /* Approval green, kept apart from the house accent so a tick reads as a state and
       not as decoration. */
    --approved: #107c10;
    --approved-soft: #dff6dd;
    --approved-ink: #0b5a0b;
    --sidebar: #004578;
    --sidebar-ink: #dce9f5;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--ground);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

h1 { font-size: 1.6rem; font-weight: 600; margin: 0 0 .35rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 2rem 0 .75rem; }
a { color: var(--accent); text-underline-offset: .15em; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: .88em; background: var(--surface-2); padding: .06em .32em; border-radius: 2px; }
.muted { color: var(--muted); }
.lead { color: var(--ink-2); margin: 0 0 1.25rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shell --- */

.app-shell { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.sidebar { background: var(--sidebar); color: var(--sidebar-ink); padding: 1.1rem .85rem; }

.brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; }
.brand-mark {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 3px;
    background: var(--accent); color: #fff;
    font-weight: 700; font-size: .78rem; letter-spacing: .04em;
}
.brand-name { font-weight: 600; font-size: .92rem; }

.nav { display: flex; flex-direction: column; gap: .1rem; }
.nav-group {
    margin: 1.15rem 0 .3rem; padding-left: .6rem;
    font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: #a3c7e8;
}
.nav-link {
    display: block; padding: .4rem .6rem; border-radius: 3px;
    color: var(--sidebar-ink); text-decoration: none; font-size: .89rem;
}
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }

/* The three shelves inside a module. Quieter than the module heading and indented under
   it, because they are a way of finding one of thirty pages, not another thirty things. */
.nav-shelf > summary.nav-part {
    list-style: none; cursor: pointer;
    margin: .45rem 0 .1rem; padding: .18rem .6rem .18rem 1rem;
    font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    color: #8fb4d6; display: flex; align-items: center; gap: .4rem;
}
.nav-shelf > summary.nav-part::-webkit-details-marker { display: none; }
.nav-shelf > summary.nav-part::before {
    content: ""; width: .34rem; height: .34rem; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s ease;
}
.nav-shelf[open] > summary.nav-part::before { transform: rotate(45deg); }
.nav-shelf > summary.nav-part:hover { color: #fff; }
.nav-shelf .nav-link { padding-left: 1.4rem; }

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

.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem 1.6rem; background: var(--surface);
    border-bottom: 1px solid var(--rule);
}
.company-switch { display: flex; align-items: center; gap: .5rem; margin: 0; }
.company-switch label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.company-switch select {
    padding: .3rem .5rem; border: 1px solid var(--rule-strong); border-radius: 3px;
    background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem;
}
.user-box { display: flex; align-items: center; gap: .85rem; }
.user-name { font-size: .88rem; color: var(--ink-2); }
.btn-plain {
    background: none; border: 1px solid var(--rule-strong); border-radius: 3px;
    padding: .3rem .7rem; font: inherit; font-size: .84rem; color: var(--ink-2); cursor: pointer;
}
.btn-plain:hover { border-color: var(--accent); color: var(--accent); }

.content { padding: 1.6rem; max-width: 1400px; }

/* ---------------------------------------------------------------- tiles --- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.tile {
    background: var(--rc-soft, var(--surface)); border: 1px solid var(--rule);
    border-left: 4px solid var(--rc, var(--accent));
    padding: .9rem 1rem; display: grid; gap: .3rem;
}
.tile-label { font-size: .68rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.tile-value { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tile-text { font-size: 1rem; font-weight: 500; }

/* A card's figures, out of the way until asked for.

   A band of tiles across the top of a document card spends the best part of the screen on
   four numbers nobody is editing, and pushes the fields somebody came to fill in below the
   fold. The card starts at the top now; E drops the figures down the right-hand side, C
   shuts them. Dashboards keep their tiles across the top, because there the tiles are the
   page.

   It sits in the page head, beside the document number, rather than in a row of its own:
   a row of its own was still a band across the screen, only a thinner one, and the card
   is meant to start at the top. */
.factbox { position: relative; margin: .1rem 0 0; flex: 0 0 auto; }
.factbox > summary {
    list-style: none; cursor: pointer; width: max-content; margin-left: auto;
    display: flex; align-items: center; gap: .45rem;
    padding: .2rem .6rem; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.factbox > summary::-webkit-details-marker { display: none; }
.factbox > summary:hover { color: var(--accent); border-color: var(--accent); }
.factbox > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.fb-mark { font-weight: 700; font-size: .82rem; color: var(--accent); }
.factbox .fb-c, .factbox[open] .fb-e { display: none; }
.factbox[open] .fb-c { display: inline; }

/* Dropped from the toggle rather than pushed into the flow, so opening the figures never
   moves the field somebody was about to type in. */
.factbox > .tiles {
    position: absolute; z-index: 20; top: calc(100% + .3rem); right: 0;
    width: min(20rem, calc(100vw - 2rem));
    grid-template-columns: 1fr; gap: .5rem; margin: 0; padding: .6rem;
    background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius);
    box-shadow: var(--shadow-2); max-height: 72vh; overflow-y: auto;
}
.factbox > .tiles .tile { padding: .5rem .7rem; }
.factbox > .tiles .tile-value { font-size: 1.15rem; }
.factbox > .tiles .tile-text { font-size: .92rem; }

/* ---------------------------------------------------------------- table --- */

.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); }
.grid { border-collapse: collapse; width: 100%; font-size: .88rem; }
.grid th, .grid td { text-align: left; padding: .5rem .85rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.grid th {
    font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); font-weight: 500; background: var(--surface-2);
}
.grid th.num, .grid td.num { text-align: right; }
.grid tbody tr:hover { background: var(--accent-soft); }
.grid tbody tr:last-child td { border-bottom: none; }
.row-actions { text-align: right; }

.chip {
    display: inline-block; padding: .08rem .45rem; border-radius: 2px;
    background: var(--surface-2); border: 1px solid var(--rule-strong);
    font-size: .72rem; color: var(--ink-2);
}
.chip-ledger { background: var(--oxide-soft); border-color: var(--oxide); color: var(--oxide); }
.chip-system { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-ok { background: var(--approved-soft); border-color: var(--approved); color: var(--approved-ink); }
.chip-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--ink-2); }
.chip-bad { background: var(--oxide-soft); border-color: var(--oxide); color: var(--oxide); }

/* Choosing which units are moving: one block per line, so a document with four tracked
   lines reads as four questions rather than one long table nobody can keep their place in. */
.serial-line { border-top: 1px solid var(--rule); padding: .7rem 0 .2rem; }
.serial-line:first-of-type { border-top: none; }
.serial-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.serial-line textarea {
    width: 100%; max-width: 26rem; padding: .34rem .5rem; font: inherit; font-size: .89rem;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.grid tr.row-chosen { background: var(--accent-soft); }
.grid tr.row-posted td { color: var(--muted); }

/* ----------------------------------------------------------------- form --- */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

/* First / Previous / Next / Last on a card: one segmented bar, as Business Central puts it
   above a record. A step that goes nowhere stays in place, greyed. */
.record-nav {
    display: inline-flex; align-items: stretch; flex-wrap: wrap;
    border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06); overflow: hidden; font-size: .88rem;
}
.record-step {
    display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem;
    color: var(--accent); text-decoration: none; border-right: 1px solid var(--rule);
}
.record-step:hover { background: var(--accent-soft); color: var(--accent-dark); }
.record-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.record-step.is-off { color: var(--rule-strong); cursor: default; }
.record-step.is-off:hover { background: none; }
.record-nav > :last-child { border-right: none; }
.record-nav-pos {
    display: inline-flex; align-items: center; gap: .25rem; padding: .38rem .85rem;
    border-right: 1px solid var(--rule); background: var(--surface-2);
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
@media (max-width: 40rem) {
    .page-head { flex-wrap: wrap; }
    .record-step-label { display: none; }
    .record-step { padding: .4rem .7rem; font-size: 1rem; }
}
.btn-inline { width: auto; margin-top: 0; display: inline-block; text-decoration: none; padding: .45rem 1.1rem; }

/* Two fields across where there is room for them. A card of forty fields in one column
   is a page nobody reads to the bottom of, and the fields that matter are the ones that
   scrolled off. Below 70rem it falls back to one, because two columns on a phone is two
   columns of nothing. */
.form-grid { display: grid; gap: .1rem .3rem; }

@media (min-width: 70rem) {
    .form-grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }

    /* A row that needs the width keeps it: long text and notes are unreadable in half a
       card, and a checkbox beside them would be lost. */
    .form-grid > .form-row.wide { grid-column: 1 / -1; }
}
.form-row { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: start; padding: .34rem 0; border-bottom: 1px solid var(--rule); }
.form-row:last-child { border-bottom: none; }
.form-row > label { color: var(--ink-2); font-size: .87rem; padding-top: .35rem; margin: 0; }
.req { color: var(--oxide); margin-left: .15rem; }
.form-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.form-field input[type="text"], .form-field input[type="number"],
.form-field input[type="date"], .form-field input[type="datetime-local"],
.form-field select {
    width: 100%; max-width: 26rem; padding: .34rem .5rem; font: inherit; font-size: .89rem;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.form-field input[type="checkbox"] { width: 1rem; height: 1rem; margin-top: .4rem; accent-color: var(--accent); }
.form-field input:focus-visible, .form-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-field input:disabled, .form-field select:disabled { background: var(--surface-2); color: var(--muted); }
.field-error { color: var(--oxide); font-size: .78rem; }

/* A field that brings its own label — a lookup, a cost centre slot — laid out as a card
   row by the grid it sits in, rather than every page rewrapping the component.

   The alternative was a wrapper div around each one at every call site, which is the same
   markup copied a hundred times and forgotten on the hundred-and-first. This way a picker
   reads as a card field anywhere a card puts it, and goes on reading as a strip of boxes
   inside a journal form, where that is what is wanted. */
.form-grid > div:not(.form-row) {
    display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: start;
    padding: .34rem 0; border-bottom: 1px solid var(--rule);
}
.form-grid > div:not(.form-row) > label {
    grid-column: 1; color: var(--ink-2); font-size: .87rem; padding-top: .35rem; margin: 0;
}

/* Everything that is not the label belongs in the value column — the box, and the hint
   under it. Left to place itself the hint would drop back under the label. */
.form-grid > div:not(.form-row) > *:not(label) { grid-column: 2; min-width: 0; }

.form-grid > div:not(.form-row) > .lookup-row { max-width: 26rem; }
.form-grid > div:not(.form-row) > input,
.form-grid > div:not(.form-row) > select {
    width: 100%; max-width: 26rem; padding: .34rem .5rem; font: inherit; font-size: .89rem;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.form-grid > div:not(.form-row) > input:focus-visible,
.form-grid > div:not(.form-row) > select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.card-group > .head-actions { margin-top: .9rem; }

/* A posted document's header: the same rows, with the value as text rather than in a box.
   Read the same way as the card it was typed on, which is the point. */
.form-grid.read-only .form-field { padding-top: .3rem; font-size: .9rem; }
details.fast > .form-grid { padding: .35rem 1.05rem 1rem; }

.form-actions { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0 2rem; }
.alert-ok {
    background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--accent);
    padding: .55rem .8rem; font-size: .87rem; margin-bottom: 1rem;
}

/* ----------------------------------------------------------------- card --- */

.card-group { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.15rem; margin-bottom: 1rem; }
/* Bootstrap also has a .card-group, a flex row for its own cards, which laid a section's heading beside its
   fields and squeezed them into what was left. Ours is a block: the heading, then the fields under it. */
section.card-group { display: block; }
.card-group h2 { margin: 0 0 .75rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field-list { margin: 0; display: grid; gap: .1rem; }
.field-row { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid var(--rule); }
.field-row:last-child { border-bottom: none; }
.field-row dt { color: var(--ink-2); font-size: .87rem; }
.field-row dd { margin: 0; font-weight: 500; }
.tag { margin-left: .5rem; font-size: .68rem; color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- login --- */

.login-shell { min-height: 100vh; display: grid; place-items: center; background: var(--sidebar); padding: 1.5rem; }
.login-card { width: min(24rem, 100%); background: var(--surface); border-radius: 4px; padding: 1.9rem; }
.login-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; }
.login-mark {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 4px;
    background: var(--accent); color: #fff; font-weight: 700; letter-spacing: .04em;
}
.login-brand h1 { font-size: 1.12rem; margin: 0; }
.login-brand p { margin: 0; font-size: .76rem; color: var(--muted); }
.login-register { margin: 1.1rem 0 0; text-align: center; font-size: .86rem; color: var(--muted); }
.login-register a { font-weight: 600; }
.btn-link { background: none; border: 0; padding: 0; margin-top: .6rem; color: var(--accent, #0b6bcb); cursor: pointer; text-decoration: underline; }

.login-card label { display: block; margin: .85rem 0 .28rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.login-card input {
    width: 100%; padding: .5rem .65rem; font: inherit;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.login-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.btn-primary {
    width: 100%; margin-top: 1.35rem; padding: .58rem 1rem;
    background: var(--accent); color: #fff; border: none; border-radius: 3px;
    font: inherit; font-weight: 600; cursor: pointer;
}
.btn-primary:hover { background: #26493f; }

.alert-error {
    background: var(--oxide-soft); border-left: 3px solid var(--oxide);
    color: var(--oxide); padding: .6rem .8rem; font-size: .86rem; margin-top: .5rem;
}
.validation-message { display: block; color: var(--oxide); font-size: .78rem; margin-top: .25rem; }

/* Something is wrong with the setup rather than with the figures: the page still
   works, and saying so quietly is the difference between a warning people read and
   an error they learn to click past. */
.alert-warn {
    background: var(--warn-soft); border-left: 3px solid var(--warn);
    color: var(--ink-2); padding: .6rem .8rem; font-size: .86rem; margin-top: .5rem;
}

/* A field that can be typed into or scanned into: the picker and the scanner box side
   by side, because a label that will not read at a dark pump must not stop the entry. */
.scan-row { display: flex; gap: .4rem; align-items: center; }
.scan-row > select, .scan-row > input[type="text"]:first-child { flex: 1 1 auto; min-width: 0; }
.scan-box {
    flex: 0 0 13rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .82rem; border-style: dashed;
}

/* A number typed into a grid: right-aligned like the figures around it, and narrow
   enough that a column of them still reads as a column. */
.grid-num { width: 7.5rem; text-align: right; }

/* Buttons under a form, kept apart from the form itself so two forms on one page do not
   run into each other. */
.form-actions { display: flex; gap: .6rem; margin: .75rem 0; }

/* The chart of accounts reads as a structure: headings open a section, totals close
   it, and the accounts between them are the ones that hold entries. */
.grid tr.row-heading > td { font-weight: 600; color: var(--ink); background: var(--surface-2); }
.grid tr.row-total > td {
    font-weight: 600; border-top: 1px solid var(--rule-strong); background: var(--surface-2);
}

/* --------------------------------------------------------------- report --- */

.filter-bar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem;
    background: var(--surface); border: 1px solid var(--rule);
    padding: .8rem 1rem; margin-bottom: 1rem;
}
.filter-bar label { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.filter-bar input[type="text"], .filter-bar select {
    padding: .32rem .5rem; font: inherit; font-size: .88rem;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}
.filter-bar .check { display: flex; align-items: center; gap: .35rem; padding-bottom: .35rem; }
.filter-bar .check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-2); }
.filter-bar .check input { accent-color: var(--accent); }
.journal-form .check { display: flex; align-items: center; gap: .35rem; align-self: end; padding-bottom: .55rem; }
.journal-form .check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink-2); }

.wrap-cell { white-space: normal; min-width: 14rem; }
.report-grid tfoot td { font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--rule-strong); }

/* A statement is read down its structure, not across its columns: the section
   headings and the two levels of total are what carry the shape. */
.statement-head td {
    font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
    color: var(--muted); background: var(--surface-2);
    padding-top: .9rem; border-top: 1px solid var(--rule-strong);
}
.statement-subtotal td { font-weight: 600; border-top: 1px solid var(--rule-strong); }
.statement-total td {
    font-weight: 700; background: var(--surface-2);
    border-top: 2px solid var(--rule-strong); border-bottom: 2px solid var(--rule-strong);
}

/* A trial balance is read the same way: the heading carries the group's totals and the
   accounts sit under it, so the group line has to outweigh its accounts without shouting. */
.report-grid tr.group-head th {
    font-weight: 700; background: var(--surface-2);
    border-top: 2px solid var(--rule-strong); text-align: left;
}
.report-grid tr.group-head th.num { text-align: right; }
.report-grid tr.subgroup-head td { font-weight: 600; border-top: 1px solid var(--rule); }
.report-grid td.indent { padding-left: 1.6rem; }

/* Building a filter is a few small decisions, and the panel says what they add up to as
   they are made. The sentence is the part that does the work: a person reads it back and
   knows whether they have said what they meant, before anything is saved. */
.filter-wizard {
    border: 1px solid var(--rule); border-left: 3px solid var(--accent);
    background: var(--surface-2); padding: .8rem 1rem .2rem; margin: .4rem 0 1rem;
}
.filter-wizard .filter-sentence {
    margin: 0 0 .6rem; font-size: .95rem; color: var(--ink);
}
.filter-wizard label .step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem; margin-right: .3rem; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700;
}
.filter-result {
    margin: 0 0 .8rem; padding: .5rem .7rem; background: var(--surface);
    border: 1px solid var(--rule); font-size: .88rem;
}
.filter-result code {
    display: inline-block; margin: .1rem .25rem .1rem 0; padding: .05rem .3rem;
    background: var(--surface-2); border: 1px solid var(--rule);
}

/* Report charts. Marks take their colour from the theme so a chart reads in light and dark;
   the eight slice colours are one palette, chosen to stay apart from each other on both. */
:root {
    --chart-1: #2f6f8f; --chart-2: #c7772b; --chart-3: #4f8a4b; --chart-4: #8a4f8a;
    --chart-5: #b5484f; --chart-6: #5a6fb0; --chart-7: #9a8a2e; --chart-8: #3f8f86;
}
.report-svg { width: 100%; max-width: 760px; height: auto; display: block; margin: .4rem 0 1rem; }
.report-svg .axis { stroke: var(--rule-strong); stroke-width: 1; }
.report-svg .column { fill: var(--chart-1); }
.report-svg .column.negative { fill: var(--chart-5); }
.report-svg .line { fill: none; stroke: var(--chart-1); stroke-width: 2.5; }
.report-svg .dot { fill: var(--surface); stroke: var(--chart-1); stroke-width: 2; }
.report-svg .value { font-size: 10px; text-anchor: middle; fill: var(--ink); font-variant-numeric: tabular-nums; }
.report-svg .label { font-size: 10px; text-anchor: middle; fill: var(--muted); }
.report-pie { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }
.report-pie .report-svg { max-width: 240px; }
.report-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.report-legend li { display: grid; grid-template-columns: .9rem minmax(8rem, 1fr) auto 3.5rem; gap: .5rem; align-items: center; font-size: .88rem; }
.report-legend .swatch { width: .8rem; height: .8rem; display: inline-block; }
.slice-0 { fill: var(--chart-1); background: var(--chart-1); }
.slice-1 { fill: var(--chart-2); background: var(--chart-2); }
.slice-2 { fill: var(--chart-3); background: var(--chart-3); }
.slice-3 { fill: var(--chart-4); background: var(--chart-4); }
.slice-4 { fill: var(--chart-5); background: var(--chart-5); }
.slice-5 { fill: var(--chart-6); background: var(--chart-6); }
.slice-6 { fill: var(--chart-7); background: var(--chart-7); }
.slice-7 { fill: var(--chart-8); background: var(--chart-8); }
.report-svg .slice { stroke: var(--surface); stroke-width: 1.5; }

/* The step-by-step report wizard: the steps along the top, the step on the left, the report as
   it stands on the right. Below a laptop's width the preview drops under the step. */
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; padding: 0; }
.wizard-steps li { display: flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--rule); border-radius: 999px; font-size: .85rem; color: var(--muted); background: var(--surface); }
.wizard-steps li a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .35rem; }
.wizard-steps .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.wizard-steps li.done { color: var(--ink-2); border-color: var(--rule-strong); }
.wizard-steps li.on { color: var(--surface); background: var(--accent); border-color: var(--accent); }
.wizard-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (min-width: 1100px) { .wizard-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.wizard-step { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.2rem; min-width: 0; }
.wizard-step h2 { margin-top: 0; }
.wizard-preview { background: var(--surface-2); border: 1px dashed var(--rule-strong); border-radius: var(--radius); padding: .8rem 1rem; min-width: 0; }
.wizard-preview h3 { margin: 0 0 .5rem; }
.wizard-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.wizard-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; }
.wizard-type { display: grid; gap: .3rem; padding: .9rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; background: var(--surface); }
.wizard-type:hover, .wizard-type:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.wizard-type.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.wizard-type-icon { font-size: 1.4rem; line-height: 1; color: var(--accent); }
.wizard-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.wizard-columns h3 { margin: 0 0 .4rem; font-size: .95rem; }
.wizard-list { max-height: 22rem; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); padding: .4rem .6rem; margin: 0 0 .5rem; display: grid; gap: .15rem; }
.wizard-list .check { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.wizard-list-group { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: .5rem; }
.wizard-chosen { list-style: decimal inside; }
.wizard-chosen li { display: flex; gap: .3rem; align-items: center; padding: .15rem 0; border-bottom: 1px solid var(--rule); }
.wizard-chosen .grow { flex: 1; }
.btn-tiny { padding: .1rem .45rem; font-size: .8rem; }
.wizard-charts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.wizard-chart { display: flex; gap: .4rem; align-items: center; padding: .45rem .7rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.wizard-chart.on, .wizard-chart:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.small-grid { font-size: .82rem; }
.small-grid .indent { padding-left: 1.2rem; }

/* The help box every wizard step carries: what to do, an example, a tip. */
.wizard-guide { background: var(--accent-soft); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .7rem .9rem; margin: 0 0 1rem; font-size: .92rem; }
.wizard-guide-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.wizard-guide-icon { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--accent); color: var(--surface); font-weight: 700; font-size: .8rem; }
.wizard-guide-steps { margin: .2rem 0 .4rem 1.2rem; padding: 0; display: grid; gap: .15rem; }
.wizard-guide .lbl { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-dark); margin-right: .35rem; font-weight: 600; }
.wizard-guide-example, .wizard-guide-tip { margin: .3rem 0 0; }
.wizard-check { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; }
.wizard-check li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .4rem; align-items: start; padding: .35rem .5rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.wizard-check .mark { font-weight: 700; text-align: center; }
.wizard-check .ok .mark { color: var(--approved); }
.wizard-check .warn .mark { color: var(--warn); }
.wizard-check .bad .mark { color: var(--oxide); }
.wizard-check li.bad { border-color: var(--oxide); }
.wizard-preview-card input, .wizard-preview-card select { pointer-events: none; }
.wizard-kinds { display: grid; gap: .35rem; }
.wizard-kinds .check { display: flex; gap: .45rem; align-items: flex-start; }

.print-head, .doc-charges { display: none; }

/* --------------------------------------------------------------- journal --- */

.journal-form {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem;
    background: var(--surface); border: 1px solid var(--rule);
    padding: .9rem 1rem; margin-bottom: 1rem;
}
.journal-form > div { display: flex; flex-direction: column; }
.journal-form > div.grow { flex: 1 1 14rem; }
.journal-form label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.journal-form input, .journal-form select {
    padding: .34rem .5rem; font: inherit; font-size: .88rem;
    border: 1px solid var(--rule-strong); border-radius: 3px;
    background: var(--surface); color: var(--ink);
}
.journal-form input[type="number"] { width: 8rem; text-align: right; }
.journal-form select { max-width: 20rem; }

.tile-bad, .amount-bad { color: var(--oxide); }
.btn-danger { color: var(--oxide); border-color: var(--rule-strong); }
.btn-danger:hover { border-color: var(--oxide); color: var(--oxide); }
.small { font-size: .82rem; }
ul.tight { margin: .4rem 0 0; padding-left: 1.1rem; }
ul.tight li { margin-bottom: .15rem; }

.row-reversed td { color: var(--muted); text-decoration: line-through; }
.row-reversed td.wrap-cell { text-decoration: none; }
.row-opening td { background: var(--surface-2); font-weight: 600; }
.row-payment td { background: var(--accent-soft); }

/* ------------------------------------------------------------ documents --- */

.tabs { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-strong); }
.tab {
    padding: .45rem .9rem; text-decoration: none; color: var(--ink-2); font-size: .88rem;
    border: 1px solid transparent; border-bottom: none; border-radius: 3px 3px 0 0;
    position: relative; bottom: -1px;
}
.tab:hover { color: var(--accent); }
.tab-on {
    background: var(--surface); border-color: var(--rule-strong);
    color: var(--ink); font-weight: 600;
}

.doc { margin-bottom: 1.5rem; }
.doc-head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
    gap: .5rem 1rem; padding: .55rem .85rem;
    background: var(--surface-2); border: 1px solid var(--rule); border-bottom: none;
}

/* ----------------------------------------------------------- comparison --- */

.vendor-picker { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: 1rem; }
.vendor-option {
    display: flex; align-items: center; gap: .4rem; font-size: .88rem;
    background: var(--surface); border: 1px solid var(--rule-strong);
    padding: .35rem .7rem; border-radius: 3px; cursor: pointer;
}
.vendor-option:hover { border-color: var(--accent); }
.vendor-option input { accent-color: var(--accent); }

.vendor-col { min-width: 9rem; }
.quote { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.quote-lowest { background: var(--accent-soft); }
.quote-lowest strong { color: var(--accent); }
.pick { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted); cursor: pointer; }
.pick input { accent-color: var(--accent); }

.inline-quote { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.inline-quote input {
    width: 6.5rem; padding: .25rem .4rem; font: inherit; font-size: .85rem; text-align: right;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
}

/* ---------------------------------------------------------- role centre --- */

/* Each group of the role centre carries its own colour, set as --rc and --rc-soft on
   the section and inherited by everything inside it. Colour by group rather than by
   tile: the page then reads as a handful of areas of work instead of thirty identical
   rectangles, and somebody who opens it every morning learns where to look.

   Everything falls back to the company accent, so a group with no colour set still
   looks deliberate rather than unstyled. */

.rc-group { margin-bottom: 1.6rem; }

.rc-group > h2 {
    display: flex; align-items: center; gap: .5rem;
    color: var(--rc, var(--accent));
}
.rc-group > h2::before {
    content: ""; flex: none; width: .5rem; height: 1.05rem; border-radius: 2px;
    background: var(--rc, var(--accent));
}

.rc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.rc-link {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .7rem .9rem; text-decoration: none;
    background: var(--rc-soft, var(--surface)); border: 1px solid var(--rule);
    border-left: 4px solid var(--rc, var(--accent)); color: var(--ink);
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.rc-link:hover {
    border-color: var(--rc, var(--accent));
    background: var(--surface);
    transform: translateY(-1px);
}
.rc-caption { font-weight: 600; font-size: .92rem; color: var(--rc, var(--ink)); }
.rc-hint { font-size: .8rem; color: var(--muted); line-height: 1.35; }

/* Keyboard users get the same signal as a mouse, and a visible ring on top of it. */
.rc-link:focus-visible {
    outline: 2px solid var(--rc, var(--accent)); outline-offset: 2px;
    background: var(--surface);
}

.row-hidden td { opacity: .55; }
/* Not enough on the shelf to cover what is still owed. */
.row-short td { background: var(--oxide-soft); }
.tiny { width: 5rem; padding: .2rem .35rem; font: inherit; font-size: .84rem; text-align: right;
        border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink); }
.tiny.wide { width: 8rem; text-align: left; }

/* ----------------------------------------------------------- attachments --- */

.attach { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
.attach h2 { margin-top: 0; }
.attach input[type="file"] {
    padding: .3rem; font: inherit; font-size: .85rem;
    border: 1px solid var(--rule-strong); border-radius: 3px;
    background: var(--surface); color: var(--ink);
}

/* ---------------------------------------------------------------- labels --- */

.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr)); gap: 4mm; }
.label {
    display: flex; align-items: center; gap: 3mm;
    border: 1px solid var(--rule-strong); background: #fff; color: #15181B;
    padding: 3mm; break-inside: avoid;
}
.label-mark { width: 22mm; height: 22mm; flex: 0 0 22mm; }
.label-mark svg { width: 100%; height: 100%; display: block; }
.label-text { display: flex; flex-direction: column; gap: .5mm; min-width: 0; }
.label-code { font-family: "Cascadia Mono", Consolas, monospace; font-weight: 700; font-size: 3.6mm; }
.label-desc { font-size: 3mm; line-height: 1.25; overflow-wrap: anywhere; }
.label-unit { font-size: 2.6mm; color: #5C6672; }

/* One record's code, on that record's card. Not a sticker: it sits in the page's own
   colours next to the fields, and the printing happens on the label page. */
.qr-card {
    display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    border: 1px solid var(--rule); border-radius: 6px; padding: 1rem;
    background: var(--surface);
}
.qr-card-mark {
    width: 120px; height: 120px; flex: 0 0 120px;
    background: #fff; border: 1px solid var(--rule); padding: 6px;
}
.qr-card-mark svg { width: 100%; height: 100%; display: block; }
.qr-card-text { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }

/* ------------------------------------------------------------ outbox etc --- */

.head-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Status counts. Kept quieter than the tiles on a role centre: these are a check,
   not the point of the page. */
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0; }
.stat {
    display: flex; align-items: baseline; gap: .45rem;
    padding: .4rem .8rem; background: var(--surface); border: 1px solid var(--rule);
}
.stat-num { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-warn { border-color: var(--oxide); background: var(--oxide-soft); }
.stat-warn .stat-num, .stat-warn .stat-lbl { color: var(--oxide); }

.filter-row { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.filter-row .chip { text-decoration: none; padding: .18rem .6rem; }
.filter-row .chip:hover { border-color: var(--accent); }
.chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Explanatory panel. Sits below the working part of a page, never above it. */
.note {
    margin-top: 1.6rem; padding: .85rem 1rem;
    background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
}
.note .lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.note p { margin: .3rem 0 0; font-size: .87rem; color: var(--ink-2); max-width: 68ch; }

/* ------------------------------------------------------------- rich text --- */

.rt { border: 1px solid var(--rule-strong); background: var(--surface); border-radius: 3px; }
.rt-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .15rem;
    padding: .3rem .4rem; border-bottom: 1px solid var(--rule); background: var(--surface-2);
}
.rt-btn {
    min-width: 1.9rem; padding: .2rem .45rem; font: inherit; font-size: .82rem; line-height: 1.2;
    background: var(--surface); color: var(--ink-2);
    border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer;
}
.rt-btn:hover { border-color: var(--accent); color: var(--accent); }
.rt-btn.rt-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rt-sep { width: 1px; align-self: stretch; margin: .1rem .25rem; background: var(--rule-strong); }

.rt-editor {
    min-height: 11rem; max-height: 30rem; overflow-y: auto;
    padding: .7rem .9rem; font-size: .9rem; line-height: 1.5; color: var(--ink);
}
.rt-editor:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Terms print and read as a document, so give them document spacing wherever they
   appear — in the editor and in the read-only view alike. */
.rt-editor h3, .terms-view h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.rt-editor h4, .terms-view h4 { font-size: .9rem; margin: .9rem 0 .25rem; color: var(--ink-2); }
.rt-editor p, .terms-view p { margin: .4rem 0; }
.rt-editor ul, .rt-editor ol, .terms-view ul, .terms-view ol { margin: .4rem 0 .4rem 1.4rem; padding: 0; }
.rt-editor li, .terms-view li { margin: .15rem 0; }
.rt-editor hr, .terms-view hr { border: none; border-top: 1px solid var(--rule); margin: .8rem 0; }
.rt-editor table, .terms-view table { border-collapse: collapse; margin: .5rem 0; }
.rt-editor td, .rt-editor th, .terms-view td, .terms-view th {
    border: 1px solid var(--rule-strong); padding: .3rem .5rem;
}
.rt-editor > :first-child, .terms-view > :first-child { margin-top: 0; }

.terms-view {
    padding: .9rem 1.1rem; font-size: .9rem; line-height: 1.5;
    background: var(--surface); border: 1px solid var(--rule);
    max-height: 32rem; overflow-y: auto;
}

/* -------------------------------------------------------------- fast tab --- */

/* A collapsible group on a card. <details> rather than scripted panels: it opens and
   closes without JavaScript, keyboard and screen readers already understand it, and
   the browser prints every group open. */
.fast {
    background: var(--surface); border: 1px solid var(--rule);
    border-bottom: none; padding: 0;
}
.fast:last-of-type { border-bottom: 1px solid var(--rule); }
.fast > summary {
    padding: .55rem .9rem; cursor: pointer; list-style: none;
    font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-2); background: var(--surface-2);
    border-bottom: 1px solid transparent;
}
.fast > summary::-webkit-details-marker { display: none; }
.fast > summary::before { content: "▸ "; color: var(--muted); }
.fast[open] > summary::before { content: "▾ "; }
.fast[open] > summary { border-bottom-color: var(--rule); }
.fast > summary:hover { color: var(--accent); }
.fast .journal-form { margin: 0; padding: .8rem .9rem; }
.fast .journal-form + .journal-form { padding-top: 0; }
.fast .table-wrap { border: none; }
.fast input[readonly], .fast select:disabled {
    background: var(--surface-2); color: var(--ink-2); cursor: default;
}

@media print { .fast > summary { display: none; } .fast { border: none; } }

/* -------------------------------------------------------------- document --- */

/* A printed document — the purchase order as the vendor receives it. */
.doc { background: var(--surface); border: 1px solid var(--rule); padding: 1.6rem 1.8rem; max-width: 60rem; }
.doc-head { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start;
            border-bottom: 2px solid var(--ink); padding-bottom: .9rem; }
.doc-company { font-size: 1.3rem; margin: 0 0 .2rem; }
.doc-address { margin: 0; font-size: .84rem; color: var(--ink-2); }
.doc-title { text-align: right; flex-shrink: 0; }
.doc-title h2 { margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.doc-meta { font-size: .84rem; margin-left: auto; }
.doc-meta th { text-align: right; padding: .1rem .6rem .1rem 0; color: var(--muted); font-weight: 500; }
.doc-meta td { text-align: right; padding: .1rem 0; font-variant-numeric: tabular-nums; }

.doc-parties { display: flex; gap: 3rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.doc-parties p { margin: .1rem 0; font-size: .86rem; }
.doc-party { font-weight: 600; }
.doc-label { display: block; font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
             color: var(--muted); margin-bottom: .2rem; }

.doc-lines { margin: 1.2rem 0; }
.doc-lines tfoot th { background: var(--surface-2); border-top: 2px solid var(--rule-strong);
                      font-weight: 600; color: var(--ink); text-transform: none;
                      letter-spacing: 0; font-size: .88rem; }
.doc-remarks { font-size: .86rem; margin: .8rem 0; }

.doc-terms { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.doc-terms h3 { font-size: .95rem; margin: 0 0 .5rem; }
.terms-print { border: none; padding: 0; max-height: none; overflow: visible; }

.doc-sign { display: flex; justify-content: space-between; align-items: flex-end;
            margin-top: 2.5rem; padding-top: 1rem; }
.doc-sign p { margin: .1rem 0; font-size: .86rem; }
.doc-sign-for { text-align: right; }
.doc-sign-line { width: 13rem; border-bottom: 1px solid var(--ink); margin: 2.5rem 0 .3rem auto; }

/* ------------------------------------------------------------- approved --- */

/* The mark that says a document is signed off. Deliberately the strongest green on the
   page: a reader should see "approved" without reading a word. */
.approved-mark {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .22rem .7rem .22rem .5rem;
    background: var(--approved-soft); border: 1px solid var(--approved);
    border-radius: 999px; color: var(--approved-ink);
    font-size: .8rem; line-height: 1.3; vertical-align: middle;
}
.approved-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; flex-shrink: 0;
    background: var(--approved); color: #fff; border-radius: 50%;
    font-size: .72rem; font-weight: 700; line-height: 1;
}
.approved-text { display: inline-flex; align-items: baseline; gap: .35rem; }
.approved-text strong { font-weight: 700; letter-spacing: .01em; }
.approved-by { font-size: .72rem; opacity: .8; }

.approved-mark-lg { padding: .4rem 1rem .4rem .7rem; font-size: .95rem; }
.approved-mark-lg .approved-tick { width: 1.6rem; height: 1.6rem; font-size: 1rem; }

/* On a printed document the tick has to survive a mono printer, so it keeps its ink. */
@media print {
    .approved-mark { border-color: #000; background: none; color: #000; }
    .approved-tick { background: #000 !important; -webkit-print-color-adjust: exact;
                     print-color-adjust: exact; }
}

/* ------------------------------------------------- issued document layout --- */

/* The purchase order, RFQ and comparative statement as CSCS issues them: boxed,
   ruled, and dense, because that is what a vendor and a signatory expect to read. */
.doc-wide { max-width: 74rem; }

.doc-band { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 2rem; border-bottom: 2px solid var(--ink); padding-bottom: .5rem; }
.doc-company { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
.doc-regd { font-size: .72rem; color: var(--ink-2); margin-top: .1rem; }
.doc-band-right { text-align: right; flex-shrink: 0; }
.doc-kind { font-size: 1rem; font-weight: 700; letter-spacing: .04em; }

.doc-strip { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .78rem; }
.doc-strip th {
    text-align: left; padding: .22rem .5rem; background: var(--surface-2);
    border: 1px solid var(--rule-strong); font-weight: 500;
    font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.doc-strip td { padding: .3rem .5rem; border: 1px solid var(--rule-strong); }
.doc-strip .strong, .doc-lines .strong { font-weight: 700; }

.doc-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
             gap: 0; margin: .5rem 0; }
.doc-box { border: 1px solid var(--rule-strong); margin-right: -1px; }
.doc-box-head {
    padding: .22rem .5rem; background: var(--surface-2); border-bottom: 1px solid var(--rule-strong);
    font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.doc-box-body { padding: .4rem .5rem; font-size: .76rem; line-height: 1.35; }
.doc-box-body .strong { font-weight: 700; }

.doc-lines { font-size: .78rem; margin: .4rem 0 0; }
.doc-lines th, .doc-lines td { border: 1px solid var(--rule-strong); padding: .28rem .5rem; }

.doc-totals { display: flex; justify-content: space-between; align-items: flex-start;
              gap: 1.5rem; margin-top: -1px; }
.doc-note { font-size: .68rem; font-style: italic; color: var(--muted);
            border: 1px solid var(--rule-strong); border-top: none; padding: .3rem .5rem;
            margin: 0; flex: 1 1 auto; }
.doc-total-table { border-collapse: collapse; font-size: .8rem; flex-shrink: 0; min-width: 17rem; }
.doc-total-table th { text-align: right; padding: .28rem .6rem; border: 1px solid var(--rule-strong);
                      background: var(--surface-2); font-weight: 600; }
.doc-total-table td { padding: .28rem .6rem; border: 1px solid var(--rule-strong);
                      text-align: right; font-variant-numeric: tabular-nums; min-width: 8rem; }
.doc-grand th, .doc-grand td { font-weight: 700; font-size: .88rem; }

.doc-agree { font-size: .76rem; margin: 1rem 0 .2rem; }
.doc-agree-small { font-size: .7rem; font-style: italic; color: var(--ink-2); margin: 0; }

.doc-annexure { margin-top: 1.4rem; break-before: page; }
.doc-annexure-label { text-align: center; font-weight: 700; font-size: .84rem; }
.doc-annexure-title { text-align: center; font-size: 1.15rem; margin: .4rem 0 1rem; }

.doc-foot { text-align: center; font-size: .68rem; font-style: italic; color: var(--muted);
            border-top: 1px solid var(--rule); margin-top: 1.4rem; padding-top: .3rem; }

/* --- the tax invoice: the registration block and the figure in words --- */

/* The IRN and the portal's signed code, side by side. The code has to be big enough to
   scan off paper and small enough not to take the page: 22mm is what the department's own
   sample uses, and a phone reads it at arm's length. */
.doc-irn { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; }
.doc-irn-text { font-size: .72rem; line-height: 1.4; min-width: 0; }

/* The IRN is 64 characters of hash and will not fit on a line. It breaks anywhere rather
   than pushing the box wide, because nobody reads it -- it is there to be typed in when a
   code will not scan. */
.doc-irn-no code { font-size: .58rem; word-break: break-all; line-height: 1.25; }

.doc-qr { flex-shrink: 0; width: 22mm; }
.doc-qr svg { display: block; width: 100%; height: auto; }

.doc-hsn { flex: 1 1 auto; min-width: 0; }
.doc-hsn .doc-lines { margin: 0; }

.doc-words { border: 1px solid var(--rule-strong); border-top: none;
             padding: .35rem .5rem; font-size: .8rem; }
.doc-words .doc-box-head { padding: 0; background: none; border: none; }

.doc-sign-line { width: 13rem; border-bottom: 1px solid var(--ink); margin: 2rem 0 .3rem auto; }
.doc-sign-left { margin-left: 0; }

/* --- the cost centre cross-tab --- */

/* Row headings are headings, not data: they stay put while the eye travels along a row,
   which is the only way a wide table stays readable. */
.crosstab th.crosstab-row {
    text-align: left; font-weight: 600; white-space: nowrap;
    position: sticky; left: 0; background: var(--surface); z-index: 1;
}
.crosstab td a { text-decoration: none; }
.crosstab td a:hover { text-decoration: underline; }

/* A pair nothing was posted against. Deliberately not a nought: nought is a pair that was
   used and came to nothing, and the two mean different things to whoever reads the column. */
.crosstab-nil { color: var(--muted); opacity: .5; }

/* --- comparative statement --- */
.cs-title { background: var(--accent); color: #fff; text-align: center; font-weight: 700;
            letter-spacing: .06em; padding: .35rem; margin: .5rem 0 0; }
.cs-meta { display: flex; justify-content: space-between; font-size: .78rem;
           border: 1px solid var(--rule-strong); border-top: none; padding: .3rem .5rem; }
.cs-table { font-size: .72rem; }
.cs-table th, .cs-table td { border: 1px solid var(--rule-strong); padding: .25rem .4rem; }
.cs-vendor { text-align: center; background: var(--accent-soft); }
.cs-quote-no { font-size: .64rem; color: var(--muted); font-weight: 400; }
.cs-vendor-addr { font-size: .62rem; color: var(--muted); font-weight: 400; }
.cs-rank { text-align: center; font-weight: 700; color: var(--accent); }
.cs-grand th { background: var(--accent); color: #fff; }
.cs-terms { font-size: .76rem; margin-top: .5rem; width: 100%; }
.cs-terms th { width: 12rem; }
.cs-sign { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem;
           border: 1px solid var(--rule-strong); border-top: none; padding: .5rem; }

/* ----------------------------------------------------------------- print --- */

@media print {
    .sidebar, .topbar, .no-print, .filter-bar { display: none !important; }

    /* A QR code printed in grey does not scan. It keeps its ink whatever the browser
       would rather do about backgrounds. */
    .doc-qr svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* The registration block and the signatures never split across a page: half an IRN at
       the foot of one sheet is worse than a shorter first page. */
    .doc-irn, .doc-sign, .doc-words { break-inside: avoid; }
    .app-shell { display: block; }
    .content { padding: 0; max-width: none; }
    .print-head { display: block; margin-bottom: 6mm; }

    /* Charged on the consignment, so it belongs on the paper the vendor is sent as well as
       on the screen the buyer works from. */
    .doc-charges { display: block; margin: 3mm 0; font-size: 3.4mm; }
    .print-head h1 { font-size: 5mm; margin: 0 0 1mm; }
    .print-head p { font-size: 3.2mm; color: #5C6672; margin: 0; }
    .table-wrap { border: none; overflow: visible; }
    .grid { font-size: 3mm; }
    /* The document prints as itself: no card border, and terms never split mid-clause. */
    .doc { border: none; padding: 0; max-width: none; }
    .doc-terms { break-inside: avoid; }
    .terms-print h3, .terms-print h4 { break-after: avoid; }
    .terms-print li, .terms-print p { break-inside: avoid; }
    .doc-sign { break-inside: avoid; }
    .grid th { background: #EEF1EC !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .grid tbody tr:hover { background: none; }
    body { background: #fff; }
    @page { margin: 12mm; }
}

@media (max-width: 820px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .nav-group { display: none; }
    .field-row { grid-template-columns: 1fr; gap: .1rem; }
}

/* == ui refresh ==============================================================
   Everything below refines classes that already exist. Nothing is renamed, so
   no page markup changes; the rules simply come later and win.
   ========================================================================== */

:root {
    --focus: #0078d4;
    --shadow-1: 0 1px 2px rgba(16, 24, 20, .06);
    --shadow-2: 0 2px 8px rgba(16, 24, 20, .08);
    --radius: 6px;
    --warn: #797673;
    --warn-soft: #fff4ce;
}

/* -- navigation ---------------------------------------------------------- */

.brand { text-decoration: none; color: inherit; }
.brand:hover .brand-name { color: #fff; }

.jump { display: block; margin: 0 0 1.1rem; }
.jump-label {
    display: block; margin-bottom: .3rem;
    font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: #a3c7e8;
}
.jump input {
    width: 100%; padding: .38rem .55rem; font: inherit; font-size: .84rem;
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
    background: rgba(255,255,255,.06); color: #eaf2ed;
}
.jump input::placeholder { color: #a3c7e8; }
.jump input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 1px; }

.sidebar { overflow-y: auto; max-height: 100vh; position: sticky; top: 0; }

.nav-section { margin: 0; }
.nav-section > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    margin: .9rem 0 .25rem; padding: .2rem .6rem; border-radius: var(--radius);
}
.nav-section > summary::-webkit-details-marker { display: none; }
.nav-section > summary::after {
    content: "+"; font-size: .8rem; color: #a3c7e8; font-weight: 600;
}
.nav-section[open] > summary::after { content: "-"; }
.nav-section > summary:hover { background: rgba(255,255,255,.05); }

.nav-link { transition: background .12s ease, color .12s ease; }
.nav-link.nav-on {
    background: var(--accent); color: #fff; font-weight: 600;
}
.nav-link.nav-on:hover { background: var(--accent); }
.nav-link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }

/* -- breadcrumbs --------------------------------------------------------- */

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    padding: .5rem 1.6rem; background: var(--surface);
    border-bottom: 1px solid var(--rule);
    font-size: .8rem; color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }
.crumb-sep { color: var(--rule-strong); }

/* -- surfaces ------------------------------------------------------------ */

.tile, .table-wrap, .card-group, .note, details.fast {
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}
.tile { transition: box-shadow .12s ease, transform .12s ease; }
.tile:hover { box-shadow: var(--shadow-2); }

/* -- tables: sticky head, zebra, calmer hover ---------------------------- */

.table-wrap { max-height: 70vh; overflow-y: auto; }
.grid thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--rule-strong);
}
.grid tbody tr:nth-child(even) { background: rgba(0, 0, 0, .015); }
.grid tbody tr:hover { background: var(--accent-soft); }
.grid tfoot td {
    position: sticky; bottom: 0; background: var(--surface-2);
    font-weight: 600; box-shadow: inset 0 1px 0 var(--rule-strong);
}
.grid a { text-decoration: none; font-weight: 500; }
.grid a:hover { text-decoration: underline; }

/* A row that needs attention, and one that is finished with. */
.row-short { background: var(--oxide-soft) !important; }
.row-hidden { opacity: .55; }

/* -- buttons ------------------------------------------------------------- */

.btn-primary, .btn-plain {
    border-radius: var(--radius);
    transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.btn-primary { box-shadow: var(--shadow-1); }
.btn-primary:hover { box-shadow: var(--shadow-2); }
.btn-primary:active, .btn-plain:active { transform: translateY(1px); }
.btn-primary:focus-visible, .btn-plain:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
}
.btn-plain { background: var(--surface); }
.btn-plain:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn-danger { color: var(--oxide); border-color: var(--oxide); }
.btn-danger:hover { background: var(--oxide-soft); border-color: var(--oxide); color: var(--oxide); }

/* -- forms: bigger targets, one focus ring everywhere -------------------- */

.journal-form { display: flex; flex-wrap: wrap; gap: .85rem; align-items: flex-end; margin: 1rem 0; }
.journal-form > div { display: flex; flex-direction: column; gap: .25rem; min-width: 8rem; }
.journal-form > div.grow { flex: 1 1 14rem; }
.journal-form label {
    font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}

.journal-form input, .journal-form select, .journal-form textarea,
.inline-quote input, .inline-quote select {
    padding: .42rem .55rem; font: inherit; font-size: .89rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.journal-form input:hover:not(:disabled):not([readonly]),
.journal-form select:hover:not(:disabled) { border-color: var(--accent); }

.journal-form input:focus-visible, .journal-form select:focus-visible,
.journal-form textarea:focus-visible,
.inline-quote input:focus-visible, .inline-quote select:focus-visible {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.journal-form input[readonly], .journal-form input:disabled,
.journal-form select:disabled, .journal-form textarea[readonly] {
    background: var(--surface-2); color: var(--ink-2); cursor: default;
}

/* The subform's inline editor: one row of small fields that still line up. */
.inline-quote { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.inline-quote input[type="number"] { width: 6rem; }
.inline-quote input[type="text"] { min-width: 10rem; flex: 1 1 10rem; }

/* -- FastTabs ------------------------------------------------------------ */

details.fast {
    background: var(--surface); border: 1px solid var(--rule);
    margin-bottom: .85rem; overflow: hidden;
}
details.fast > summary {
    cursor: pointer; list-style: none; padding: .7rem 1.05rem;
    font-weight: 600; font-size: .92rem; color: var(--ink);
    background: var(--surface); border-bottom: 1px solid transparent;
    display: flex; align-items: center; gap: .5rem;
}
details.fast > summary::-webkit-details-marker { display: none; }
details.fast > summary::before {
    content: ""; width: .42rem; height: .42rem; flex: none;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg); transition: transform .15s ease;
}
details.fast[open] > summary::before { transform: rotate(45deg); }
details.fast[open] > summary { border-bottom-color: var(--rule); background: var(--surface-2); }
details.fast > summary:hover { background: var(--accent-soft); }
details.fast > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
details.fast > *:not(summary) { padding: 0 1.05rem; }
details.fast > .journal-form { padding: 0 1.05rem; }
details.fast > .table-wrap { margin: 0 1.05rem 1rem; max-height: none; }

/* A card's fields inside a fold. The fold is already the box, so the form brings no
   border of its own — it only wants the same inner margin as everything else in there. */
details.fast > form { padding: .35rem 1.05rem 1rem; }
details.fast > form > .head-actions { margin-top: .9rem; }
details.fast > form > .form-grid { margin: 0; }

/* -- tabs and chips ------------------------------------------------------ */

.tabs {
    display: flex; flex-wrap: wrap; gap: .25rem;
    border-bottom: 1px solid var(--rule); margin: 1.1rem 0 1.25rem;
}
.tab {
    padding: .45rem .85rem; text-decoration: none; color: var(--ink-2);
    font-size: .87rem; border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid transparent; border-bottom: none; margin-bottom: -1px;
}
.tab:hover { background: var(--accent-soft); color: var(--accent); }
.tab-on {
    background: var(--surface); border-color: var(--rule);
    color: var(--ink); font-weight: 600;
}
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.filter-row .chip { text-decoration: none; padding: .28rem .7rem; border-radius: 999px; }
.filter-row .chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-on:hover { color: #fff; }

/* -- alerts -------------------------------------------------------------- */

.alert-ok, .alert-error {
    border-radius: var(--radius); padding: .7rem .95rem;
    display: flex; align-items: flex-start; gap: .55rem;
    box-shadow: var(--shadow-1);
}
.alert-ok { background: var(--approved-soft); border-left: 4px solid var(--approved); color: var(--approved-ink); }
.alert-error { background: var(--oxide-soft); border-left: 4px solid var(--oxide); color: var(--oxide); }
.alert-ok::before { content: "\2714"; font-weight: 700; }
.alert-error::before { content: "\26A0"; font-weight: 700; }

/* -- notes --------------------------------------------------------------- */

.note {
    background: var(--surface); border: 1px solid var(--rule);
    border-left: 4px solid var(--rule-strong);
    padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: .88rem; color: var(--ink-2);
}
.note .lbl {
    display: block; margin-bottom: .35rem;
    font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.note p { margin: .45rem 0 0; }
.note p:first-of-type { margin-top: 0; }

/* -- page furniture ------------------------------------------------------ */

.page-head { margin-bottom: .35rem; flex-wrap: wrap; }
.head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.content { padding: 1.4rem 1.6rem 3rem; }
.small { font-size: .8rem; }
.wrap-cell { white-space: normal; min-width: 12rem; }

/* -- responsive: the sidebar folds away on a narrow screen --------------- */

@media (max-width: 60rem) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; max-height: none; }
    .nav-section > summary { margin: .5rem 0 .2rem; }
    .content { padding: 1rem; }
    .crumbs { padding: .5rem 1rem; }
    .form-row, .field-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* -- print: furniture off, document on ----------------------------------- */

@media print {
    .sidebar, .topbar, .crumbs, .tabs, .filter-row, .no-print { display: none !important; }
    .app-shell { display: block; }
    .content { padding: 0; max-width: none; }
    .table-wrap { max-height: none; overflow: visible; box-shadow: none; }
    .tile, .card-group, .note, details.fast { box-shadow: none; }
}/* -- lookup field -------------------------------------------------------- */

.lookup-row { display: flex; align-items: stretch; gap: 0; }
.lookup-row input {
    flex: 1 1 auto; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
.lookup-row input:only-child {
    border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
.lookup-btn {
    display: grid; place-items: center; flex: none;
    width: 2rem; text-decoration: none; font-size: .95rem; line-height: 1;
    color: var(--ink-2); background: var(--surface-2);
    border: 1px solid var(--rule-strong); border-left: none;
}
.lookup-btn:last-child {
    border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
.lookup-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.lookup-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* The "it is not set up yet" prompt, shown when a typed code matches nothing. */
.make-it {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: -.5rem 0 1rem; padding: .6rem .85rem;
    background: var(--warn-soft); border-left: 4px solid var(--warn);
    border-radius: var(--radius); font-size: .87rem; color: #3b3a39;
}
.make-it a { color: #3b3a39; font-weight: 600; }/* -- theme picker -------------------------------------------------------- */

.theme-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .8rem; margin: 1rem 0 1.5rem;
}
.theme-card {
    display: grid; gap: .3rem; cursor: pointer;
    background: var(--surface); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: .7rem; box-shadow: var(--shadow-1);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.theme-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.theme-card.theme-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.theme-swatch {
    display: flex; height: 3.4rem; border-radius: 4px; overflow: hidden;
    border: 1px solid var(--rule-strong);
}
.theme-bar { width: 1.7rem; flex: none; }
.theme-body {
    flex: 1; background: #ffffff; padding: .45rem .5rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.theme-dot { width: 1.5rem; height: .4rem; border-radius: 2px; }
.theme-line { height: .3rem; background: #e6e4e2; border-radius: 2px; }
.theme-line.short { width: 60%; }
.theme-name { font-weight: 600; font-size: .9rem; }

.journal-form input[type="color"] {
    width: 3rem; height: 2.1rem; padding: .1rem; cursor: pointer;
}/* -- tiles that mean something ------------------------------------------- */

/* A figure on a card is not decoration, and the four on a payment do not mean the
   same kind of thing: one is what was billed, one is taken away, one is what
   actually leaves the bank, and one is a state. Colour says which is which before
   the label is read. A coloured rail as well as coloured type, so it still reads
   for somebody who cannot tell the two hues apart. */

.tile { border-left: 3px solid transparent; }

.tile-primary { border-left-color: var(--accent); }
.tile-primary .tile-value { color: var(--accent); }

.tile-deduct { border-left-color: var(--oxide); }
.tile-deduct .tile-value { color: var(--oxide); }

.tile-good { border-left-color: var(--approved); }
.tile-good .tile-value { color: var(--approved-ink); }

.tile-warn { border-left-color: var(--warn); }
.tile-warn .tile-value { color: #8a6116; }

.tile-quiet .tile-value { color: var(--ink-2); }

/* A deduction reads as one: the figure is what comes off, so it is shown that way
   rather than leaving the reader to infer it from the label. */
.tile-deduct .tile-value::before { content: "\2212"; margin-right: .05em; }
.tile-deduct .tile-value.tile-zero::before { content: ""; }

@media print {
    .tile-primary, .tile-deduct, .tile-good, .tile-warn { border-left-color: #999; }
    .tile-primary .tile-value, .tile-deduct .tile-value,
    .tile-good .tile-value, .tile-warn .tile-value { color: var(--ink); }
}
/* ---------------------------------------------------------------- GST panel

   The two ends of a supply and the tax that follows from them. Laid out as three
   equal columns because that is what the reader is comparing: their registration,
   ours, and what the difference between the two states makes the tax.            */

.gst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem 1.25rem;
    margin: .5rem 0 .75rem;
}

.gst-side {
    border-left: 3px solid var(--bc-border);
    padding: .35rem 0 .35rem .7rem;
}

.gst-side .lbl {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bc-muted);
    margin-bottom: .3rem;
}

.gst-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .12rem 0;
    font-size: .85rem;
}

.gst-row span { color: var(--bc-muted); }
.gst-row strong { font-variant-numeric: tabular-nums; text-align: right; }

.gst-breakup { margin: .5rem 0; }
.gst-breakup tfoot td { border-top: 2px solid var(--bc-border); font-weight: 600; }

/* Chips that say, at a glance, which way a document was taxed. Semantic rather
   than decorative: "not decided" is the one that stops a posting.               */

.good-chip, .info-chip, .warn-chip {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-left: .4rem;
}

.good-chip { background: var(--bc-good-bg, #e6f4ea); color: var(--bc-good, #137333); }
.info-chip { background: var(--bc-info-bg, #e8f0fe); color: var(--bc-info, #1967d2); }
.warn-chip { background: var(--bc-warn-bg, #fef7e0); color: var(--bc-warn, #b06000); }

/* ---------------------------------------------------------------- cost centre links

   A cost centre code that can be followed to the entries behind it. Deliberately quiet:
   these sit in dense tables where a column of blue underlines would read as noise, so the
   link only announces itself under the cursor. The dotted rule is the hint that there is
   something behind the code at all.                                                     */

.cc-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--bc-info, #1967d2);
    cursor: pointer;
}

.cc-link:hover, .cc-link:focus-visible {
    color: var(--bc-info, #1967d2);
    border-bottom-style: solid;
}

/* A blank cost centre is followable too -- unattributed cost is what somebody hunting a
   missing code is actually looking for -- but it should not shout in a column of codes. */
.cc-link.muted { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------- QR label sheets

   Laid out to fill an A4 page of adhesive stock. The grid is fixed rather than fluid so
   that what somebody sees on screen is what comes out of the printer -- a sheet that
   reflows between the two wastes a page of labels every time.                          */

.label-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.label {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border: 1px solid var(--bc-line, #d7dbe0);
    border-radius: 6px;
    break-inside: avoid;          /* never split a label across two pages */
    page-break-inside: avoid;
}

.label-qr { width: 84px; flex: 0 0 84px; }
.label-qr svg { width: 100%; height: auto; display: block; }

.label-text { display: flex; flex-direction: column; min-width: 0; }
.label-text strong { font-size: .95rem; line-height: 1.2; word-break: break-word; }
.label-sub { font-size: .7rem; color: var(--bc-muted, #5f6771); }
.label-code { font-size: .72rem; font-family: ui-monospace, Consolas, monospace; }

@media print {
    .label-sheet { gap: .35rem; }
    .label { border-color: #999; }
}
/* ---------------------------------------------------------------- the home hero

   The card at the top of the home page. Its colour comes from the company's theme
   unless the setup names one, so it reads as part of the product rather than as
   something bolted on.                                                            */

.hero {
    --hero-accent: var(--bc-accent, #0F6C68);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.25rem;
    margin: 0 0 1.75rem;
    border-radius: 10px;

    /* Barely tinted. A hero that shouts competes with the work underneath it, which
       is what people actually came to the page for.                                */
    background: color-mix(in srgb, var(--hero-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--hero-accent) 22%, transparent);
}

.hero-words { max-width: 44rem; }

.hero-greeting {
    margin: 0 0 .35rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--hero-accent) 78%, var(--bc-text, #201f1e));
}

.hero-headline {
    margin: 0 0 .6rem;
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 300;
    text-wrap: balance;
    color: var(--bc-text, #201f1e);
}

.hero-sub {
    margin: 0 0 1.1rem;
    max-width: 38rem;
    color: var(--bc-muted, #605e5c);
}

.hero-btn {
    display: inline-block;
    padding: .5rem 1.4rem;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--hero-accent) 55%, transparent);
    background: var(--bc-surface, #fff);
    color: color-mix(in srgb, var(--hero-accent) 85%, var(--bc-text, #201f1e));
    font-weight: 600;
    text-decoration: none;
}

.hero-btn:hover {
    background: color-mix(in srgb, var(--hero-accent) 10%, var(--bc-surface, #fff));
}

/* Deep: the accent filled, the words reversed out of it. The pale version above is
   still there for anybody who wants the card to stay quiet, but a colour chosen in
   setup should be visible, so this is what a company gets unless it says otherwise.

   Every colour here is derived from --hero-accent rather than fixed, so a company
   that picks its own gets a card that still reads.                                 */
.hero-deep {
    background: var(--hero-accent);
    border-color: color-mix(in srgb, var(--hero-accent) 70%, #000);
    color: #fff;
}

.hero-deep .hero-greeting {
    color: color-mix(in srgb, #fff 82%, var(--hero-accent));
}

.hero-deep .hero-headline,
.hero-deep .hero-sub {
    color: #fff;
}

.hero-deep .hero-sub { opacity: .92; }

/* Reversed as well: a white button on the filled ground, carrying the accent as its
   text, which is the one place the colour still has to be legible at small size.   */
.hero-deep .hero-btn {
    background: #fff;
    border-color: #fff;
    color: color-mix(in srgb, var(--hero-accent) 88%, #000);
}

.hero-deep .hero-btn:hover {
    background: color-mix(in srgb, #fff 90%, var(--hero-accent));
}

/* The drawing is a line sketch in a dark ink that disappears on a filled card.     */
.hero-deep .hero-art {
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* The drawing is decoration: it goes first when there is no room for both, rather
   than squeezing the words it sits beside.                                        */
.hero-art {
    width: 15rem;
    max-width: 34%;
    height: auto;
    flex: 0 0 auto;
    color: var(--hero-accent);
}

@media (max-width: 46rem) {
    .hero { padding: 1.4rem 1.5rem; }
    .hero-art { display: none; }
    .hero-headline { font-size: 1.5rem; }
}

/* The picker on the setup page, so a choice is made by looking rather than by
   reading four keys.                                                              */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}

.gallery-item {
    margin: 0;
    padding: .9rem;
    border: 1px solid var(--bc-border, #e1dfdd);
    border-radius: 8px;
    text-align: center;
    background: var(--bc-surface, #fff);
    color: var(--bc-accent, #0F6C68);
}

.gallery-item img { width: 100%; height: auto; }

.gallery-item figcaption {
    margin-top: .5rem;
    font-size: .82rem;
    color: var(--bc-text, #201f1e);
}
/* A posted credit note says why it exists before it says what it credits. */
.doc-why {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: .4rem 0 .6rem;
}

.doc-why .info-chip, .doc-why .warn-chip { margin-left: 0; }

.doc-tax { margin: .35rem 0 0; }
/* Controls that sit inside a grid cell: narrow enough not to widen the column,
   and lined up with the text beside them.                                       */
.inline-select, .inline-num {
    padding: .15rem .3rem;
    font-size: .82rem;
    border: 1px solid var(--bc-border, #e1dfdd);
    border-radius: 3px;
    background: var(--bc-surface, #fff);
    color: var(--bc-text, #201f1e);
    vertical-align: middle;
}

.inline-select { max-width: 7rem; }
.inline-num { max-width: 5.5rem; text-align: right; }
/* The gate camera. Bounded rather than full-bleed: a viewfinder that fills a tablet
   pushes the vehicle details and the confirm button off the screen, and the operator is
   holding the tablet in one hand. */
.camera-wrap {
    margin: 0.75rem 0;
    max-width: 26rem;
    border: 1px solid var(--line, #d5d5d5);
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.camera-wrap video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 20rem;
    object-fit: cover;
}

/* --------------------------------------------------------------- fuel entry --- */
/* Entry on the left and the person's own recent fills on the right: the shape of the
   fleet app the drivers already use. The entry column is phone-width on purpose, since
   that is where it is filled in. */
.fuel-layout {
    display: grid; grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
    gap: 1.5rem; align-items: start; margin: 1rem 0 2rem;
}
.fuel-entry, .fuel-recent {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
    overflow: hidden;
}
.fuel-entry form { display: flex; flex-direction: column; padding: 1rem 1.25rem 1.4rem; gap: .2rem; }
.fuel-entry-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .8rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.fuel-entry .fuel-entry-head { background: var(--accent); color: #fff; }
.fuel-entry .fuel-entry-head h2 { color: #fff; }
.fuel-entry-head h2 { margin: 0; font-size: 1.05rem; }

.fuel-entry label {
    margin-top: .75rem; font-size: .74rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: .4rem;
}
.fuel-entry input:not([type=file]):not([type=hidden]), .fuel-entry select, .fuel-entry textarea {
    width: 100%; padding: .55rem .7rem; font-size: 1rem;
}
.fuel-entry .req { color: var(--oxide); }
.fuel-entry .hint { font-size: .78rem; color: var(--muted); margin-top: .15rem; }

/* A hint sits under the field it explains, wherever a form needs one. Small and quiet:
   it is there for the first time somebody meets the field, not every time.            */
/* The planning sheet. A cell says hours booked against hours available, and the colour
   is there to be read across a wide table at a glance rather than cell by cell.       */
.planning td.num { white-space: nowrap; }
.planning .cell-busy { background: color-mix(in srgb, var(--bc-accent, #0F6C68) 12%, transparent); }
.planning .cell-over {
    background: color-mix(in srgb, #b4231f 18%, transparent);
    font-weight: 600;
}
.planning .cell-closed { background: color-mix(in srgb, var(--bc-muted, #605e5c) 8%, transparent); }

.hint { display: block; font-size: .78rem; color: var(--bc-muted, #605e5c); margin-top: .15rem; }
.fuel-entry .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.fuel-entry .scan-box.full { flex: none; width: 100%; margin-top: .35rem; }

.loc-badge {
    font-size: .78rem; padding: .2rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,.2); color: #fff; white-space: nowrap;
}
.loc-badge.ok { background: var(--approved-soft); color: var(--approved-ink); }
.loc-badge.bad { background: var(--oxide-soft); color: var(--oxide); }

.last-chip {
    margin-left: auto; font-size: .68rem; letter-spacing: .04em; padding: .05rem .45rem;
    border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule-strong);
    color: var(--ink-2); text-transform: none;
}

/* A number with its unit beside it, so kilograms and litres cannot be confused. */
.affix { display: flex; align-items: stretch; }
.affix input { border-radius: 0 !important; }
.affix .unit {
    display: flex; align-items: center; padding: 0 .6rem; background: var(--surface-2);
    border: 1px solid var(--rule-strong); color: var(--muted); font-size: .9rem;
}
.affix .unit:first-child { border-right: 0; }
.affix .unit:last-child { border-left: 0; }
.affix.big input { font-size: 1.5rem !important; font-weight: 600; }

.fuel-entry details.more { margin-top: .8rem; border: 1px solid var(--rule); border-radius: 6px; padding: .2rem .7rem .7rem; }
.fuel-entry details.more summary { cursor: pointer; font-size: .85rem; color: var(--ink-2); padding: .4rem 0; }

/* The three photographs, each its own colour so a missing one is noticed at a glance. */
.capture {
    margin-top: .9rem; padding: .75rem .9rem; border: 1.5px dashed var(--rule-strong);
    border-radius: 8px; display: flex; flex-direction: column; gap: .35rem;
}
.capture-title { font-weight: 600; font-size: .92rem; }
.capture.odo .capture-title { color: var(--oxide); }
.capture.slip .capture-title { color: var(--accent); }
.capture.pay .capture-title { color: var(--approved); }

.save-entry { margin-top: 1.2rem; padding: .8rem; font-size: 1.05rem; background: var(--oxide); border-color: var(--oxide); }

.recent-grid td { vertical-align: middle; }
.recent-grid .good-amount { color: var(--approved); font-weight: 600; }
.thumb {
    width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--rule-strong); display: block;
}
.actions-cell { display: flex; gap: .35rem; align-items: center; }
.actions-cell form { margin: 0; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1.5px solid var(--accent);
    background: var(--surface); color: var(--accent); text-decoration: none; cursor: pointer; font-size: 1rem;
}
.icon-btn.danger { border-color: var(--oxide); color: var(--oxide); }
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn.danger:hover { background: var(--oxide-soft); }

@media (max-width: 960px) {
    .fuel-layout { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- invoice copies --- */
.doc-copy {
    margin-top: .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    border: 1px solid currentColor; padding: .1rem .45rem; display: inline-block;
}
.doc-terms { margin-top: .9rem; font-size: .8rem; }
.doc-terms .rich p { margin: .2rem 0; }
@media print {
    .doc-copy-page + .doc-copy-page { page-break-before: always; }
}
@media screen {
    .doc-copy-page + .doc-copy-page { margin-top: 2rem; padding-top: 2rem; border-top: 2px dashed var(--rule-strong); }
}

/* ------------------------------------------------- the customer's invoice form --- */
/* Ruled boxes and small dense type, because this layout is checked against a paper copy
   somebody is holding beside it. Black on white throughout, and not themed: a customer
   reading it does not know what colour our screens are, and a printed accent turns grey. */
.gstx {
    border: 1px solid #000; background: #fff; color: #000; padding: 0;
    font-size: 8.4pt; line-height: 1.28; max-width: 100%;
}
.gstx .num { text-align: right; font-variant-numeric: tabular-nums; }
.gstx .strong { font-weight: 700; }

.gstx-title { display: flex; align-items: flex-start; justify-content: space-between; padding: .35rem .5rem 0; }
.gstx-title-text { flex: 1; text-align: center; }
.gstx-kind { font-size: 13pt; font-weight: 700; }
.gstx-rule { font-size: 7.4pt; font-weight: 700; }
.gstx-irn { font-size: 7.4pt; }
.gstx-copy {
    margin-top: .15rem; font-size: 7pt; font-weight: 700; letter-spacing: .08em;
    border: 1px solid #000; padding: .05rem .3rem; display: inline-block;
}
.gstx-logo { max-height: 3.2rem; max-width: 9rem; object-fit: contain; }

.gstx-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; padding: .3rem .5rem .5rem; }
.gstx-parties { border-top: 1px solid #000; padding-top: .35rem; }
.gstx-head-col { min-width: 0; }
.gstx-pair { display: flex; gap: .5rem; align-items: baseline; }
.gstx-pair > span:first-child { flex: 0 0 8.5rem; }
.gstx-pair .gstx-addr { flex: 1; }
.gstx-gap { margin-top: .3rem; }
.gstx-big { font-size: 10pt; }
.gstx-lead { font-weight: 700; }
.gstx-sub { font-weight: 700; font-style: italic; margin-bottom: .2rem; }
.gstx-caps { font-size: 9.5pt; font-weight: 700; }
.gstx-spacer { margin-left: 1.2rem; }

.gstx-lines, .gstx-totals { width: 100%; border-collapse: collapse; }
.gstx-lines { border-top: 1px solid #000; }
.gstx-lines th, .gstx-lines td { border: 1px solid #000; padding: .12rem .22rem; vertical-align: top; }
.gstx-lines thead th { font-size: 7.6pt; font-weight: 700; text-align: left; }
.gstx-lines thead th.num { text-align: right; }
.gstx-group th { text-align: center !important; }
.gstx-group th:first-child { border: none; }

.gstx-totals th, .gstx-totals td { border: 1px solid #000; padding: .14rem .3rem; }
.gstx-tl { text-align: left; font-weight: 700; width: 14rem; }
.gstx-qty { font-weight: 700; }

.gstx-foot { display: grid; grid-template-columns: 2fr 1fr; border-top: 1px solid #000; }
.gstx-declare { padding: .35rem .5rem; border-right: 1px solid #000; }
.gstx-declare ol { margin: .15rem 0 .25rem; padding-left: 1.1rem; }
.gstx-declare li { font-size: 7.6pt; }
.gstx-terms { font-size: 7.8pt; }
.gstx-sign {
    padding: .5rem; display: flex; flex-direction: column; align-items: center;
    justify-content: space-between; text-align: center; min-height: 5.5rem;
}
.gstx-qr svg { width: 4.2rem; height: 4.2rem; }
.gstx-signed { font-weight: 700; }
.gstx-regd { text-align: center; padding: .3rem .5rem; font-size: 7.6pt; }

@media print {
    .gstx { border-color: #000; font-size: 8pt; }
    .gstx-logo { max-height: 2.6rem; }
}

/* ------------------------------------------------------- the job card sheet --- */
/* Ruled boxes, black on white: this one is printed, carried round a workshop and signed
   in three places. Not themed, for the same reason a form is not themed - the fitter
   holding it has no idea what colour our screens are. */
.jobcard {
    border: 1px solid #000; background: #fff; color: #000;
    font-size: 9pt; line-height: 1.3; padding: .5rem .6rem;
}
.jobcard .num { text-align: right; font-variant-numeric: tabular-nums; }
.jobcard .centre { text-align: center; }
.jobcard .strong { font-weight: 700; }

.jc-company { text-align: center; font-size: 15pt; font-weight: 700; }
.jc-address { text-align: center; font-size: 8.4pt; margin-bottom: .5rem; }
.jc-title {
    text-align: center; font-weight: 700; font-size: 11pt; letter-spacing: .02em;
    border: 1px solid #000; background: #f2f2f2; padding: .25rem; margin-bottom: .5rem;
}

.jc-head, .jc-grid { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.jc-head th, .jc-head td, .jc-grid th, .jc-grid td {
    border: 1px solid #000; padding: .16rem .3rem; vertical-align: top;
}
.jc-head th { text-align: left; font-weight: 700; width: 9rem; background: #fff; }
.jc-grid thead th { font-weight: 700; text-align: left; background: #f2f2f2; }
.jc-grid thead th.num { text-align: right; }
.jc-total td { background: #f2f2f2; }

.jc-section { font-weight: 700; font-size: 9.5pt; margin: .1rem 0 .2rem; }
.jc-text { border: 1px solid #000; padding: .25rem .3rem; margin-bottom: .5rem; }

.jc-sign { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.2rem; }
.jc-sign > div { border: 1px solid #000; padding: .3rem .4rem 1.6rem; }
.jc-sign-label { display: block; font-size: 8.4pt; }

@media print {
    .jobcard { border: none; padding: 0; font-size: 8.6pt; }
}

/* ---------------------------------------------------------------- payslips --- */
.payslip-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .8rem; }
@media print { .payslip + .payslip { page-break-before: always; } }
@media screen { .payslip + .payslip { margin-top: 2rem; } }

/* ---------------------------------------------------------------- payment approval sheet
   A banded head and a banded total, because this is the sheet people sign and the two things
   anybody looks for on it are the number at the top and the figure at the bottom. Colours are
   set as literals rather than from the theme tokens: this prints, and a sheet that changed
   colour with somebody's dark mode would not match the file copy beside it. */
.pay-doc { max-width: 62rem; }

.pay-band { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem;
    background: #1f3864; color: #fff; padding: 1rem 1.3rem; margin: -1.6rem -1.8rem 1.2rem; }
.pay-band-company h1 { font-size: 1.35rem; margin: 0 0 .25rem; color: #fff; letter-spacing: .01em; }
.pay-band-company p { margin: 0; font-size: .8rem; color: #cfd8ea; line-height: 1.35; }
.pay-band-kind { text-align: right; flex-shrink: 0; }
.pay-band-title { font-size: 1.3rem; font-weight: 700; line-height: 1.15; }
.pay-band-no { font-size: .84rem; color: #cfd8ea; margin-top: .3rem; }

.pay-party { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; }
.pay-payee { font-size: 1.05rem; margin: 0 0 .35rem; color: #1f3864; }
.pay-meta, .pay-codes { margin: .15rem 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.pay-codes strong { color: #1f3864; }
.pay-status { flex-shrink: 0; background: #2e5496; color: #fff; font-weight: 700;
    padding: .45rem 1.6rem; font-size: .92rem; }

.pay-narration { margin: .7rem 0 .2rem; font-size: .85rem; }
.pay-bank { margin: .2rem 0 1rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: 1.2rem; }

.pay-lines { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: .86rem; }
.pay-lines thead th { background: #1f3864; color: #fff; font-weight: 600; text-align: left;
    padding: .5rem .6rem; white-space: nowrap; }
.pay-lines tbody td { padding: .45rem .6rem; border-bottom: 1px solid #e3e7ef; }
.pay-lines .num { text-align: right; }
.pay-lines .strong { font-weight: 700; }
.pay-yes { color: #1f7a3d; font-weight: 700; }
.pay-spacer td { height: 1.1rem; background: #eef2f9; border-bottom: none; }
.pay-totals th, .pay-totals td { background: #dce6f5; color: #1f3864; padding: .55rem .6rem;
    font-weight: 700; text-align: left; }
.pay-totals .pay-pending { color: #5b6b86; font-weight: 400; text-align: center; }
.pay-totals .pay-topay { background: #c5d5ef; }

/* The accounting block under a printed document. Set apart from the document above it,
   because it is our record rather than the vendor's or the customer's paper. */
.doc-accounting { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 2px solid #1f3864; }
.doc-accounting h2 { font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
    color: #1f3864; margin: 0 0 .2rem; }

/* The search box in a list's head. Sits with the buttons beside it rather than above them,
   so the head stays one line at desk width and wraps as a unit on a narrow screen. */
.head-search { display: flex; gap: .4rem; align-items: center; }
.head-search input { min-width: 14rem; }

/* A row that mirrors one above it rather than adding to it — a sub-ledger entry beside the G/L
   entry it belongs to. Quieter, so the eye reads the general ledger as the arithmetic. */
.grid tr.row-muted td { color: var(--muted); background: color-mix(in srgb, var(--surface) 92%, var(--ink)); }

/* A second table on the same sheet — the order lines under a bill payment's bills, or what a
   voucher was set against — needs a heading that reads as a band, not as a page heading. */
.pay-sub { margin: 1.6rem 0 .5rem; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
    color: #1f3864; border-bottom: 2px solid #1f3864; padding-bottom: .25rem; }

/* The amount in words. Boxed, because on a voucher it is the figure that settles an argument
   about a smudged digit, and it is read before the table above it. */
.pay-words { margin-top: 1.2rem; border: 1px solid #c8d0de; background: #f5f8fd; padding: .6rem .8rem; }
.pay-words .lbl { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
    color: #5b6b86; margin-bottom: .2rem; }
.pay-words .strong { font-weight: 700; font-size: .95rem; color: #1f3864; }

.pay-trail { margin-top: 2.5rem; border-top: 1px solid #c8d0de; padding-top: .6rem; }
.pay-trail h3 { font-size: .9rem; color: #1f3864; margin: 0 0 .25rem; }
.pay-trail p { margin: 0; font-size: .78rem; font-style: italic; color: #5b6b86; line-height: 1.5; }

.pay-sign { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; }
.pay-sign > div { flex: 1; text-align: center; }
.pay-sign-line { border-top: 1px solid var(--ink); margin-bottom: .3rem; }
.pay-sign p { margin: 0; font-size: .8rem; }

@media print {
    .pay-band, .pay-status, .pay-lines thead th, .pay-totals th, .pay-totals td, .pay-spacer td {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .pay-lines { break-inside: auto; }
    .pay-trail, .pay-sign, .pay-words { break-inside: avoid; }
}

/* The comparative's terms block reads as part of the same grid as the figures above it, so a
   vendor's price and their terms line up in one column. */
.cs-terms { width: 100%; border-collapse: collapse; margin-top: -1px; }
.cs-terms th, .cs-terms td { border: 1px solid var(--rule); padding: .35rem .5rem; font-size: .82rem; }
.cs-terms th { text-align: left; background: var(--surface-2, #f4f6fa); font-weight: 600; }
.cs-terms .centre { text-align: center; }
.cs-terms-head th { background: #dce6f5; color: #1f3864; }

/* What is waiting on you, at the top of the role centre. Bordered rather than tiled: it is a
   list to work down, not a number to admire. */
.inbox { margin: 0 0 1.6rem; border: 1px solid var(--rule); border-left: 4px solid var(--accent);
    background: var(--surface); padding: 1rem 1.2rem 0.4rem; }
.inbox-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.inbox-head h2 { margin: 0; font-size: 1.05rem; }
.inbox-old { color: #b3261e; font-weight: 600; }

/* -- the dashboard ------------------------------------------------------- */
/* Tiles here are links, so they lose the underline and keep the ink of the
   text around them: a whole tile that turns blue reads as a warning, not a way in. */
a.tile { text-decoration: none; color: inherit; }
a.tile:hover { box-shadow: var(--shadow-2); border-color: var(--accent); }
a.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile-foot { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.dash-group { margin: 0 0 1.8rem; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    border-bottom: 1px solid var(--rule); padding-bottom: .35rem; }
.dash-head h2 { margin: 0; font-size: 1.05rem; }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.2rem; }
.dash-chart { margin: 1rem 0 0; border: 1px solid var(--rule); background: var(--surface); padding: .9rem 1rem; }
.dash-chart figcaption { font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .6rem; }
/* The strip on the role centre: the same figures, small, above the day's work. */
.dash-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem;
    margin: 0 0 1.6rem; }
.dash-strip .tile-value { font-size: 1.25rem; }

/* -- phone apps ---------------------------------------------------------- */

.app-back { display: inline-block; color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem;
    padding: .35rem .8rem; border-radius: 999px; margin: 0 0 .6rem; }
.mobile-app { min-height: 100vh; background: var(--ground); }
.mobile-app-bar { color: #fff; padding: 1.1rem 1.1rem 1rem; display: flex; align-items: center; gap: .8rem; }
.mobile-app-icon { width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: rgba(255,255,255,.2);
    display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; }
.mobile-app-bar h1 { font-size: 1.25rem; margin: 0; color: #fff; }
.mobile-app-bar p { margin: .1rem 0 0; font-size: .85rem; opacity: .9; }
.mobile-app-body { padding: 1rem; max-width: 46rem; margin: 0 auto; }
.mobile-app-group { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .5rem; }
.mobile-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.mobile-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 5.5rem; padding: .9rem;
    background: var(--surface); border: 1px solid var(--rule); border-radius: .8rem; text-decoration: none; color: var(--ink);
    box-shadow: 0 1px 2px rgba(16,24,20,.06); font-weight: 600; }
.mobile-tile:active { transform: scale(.98); }
.mobile-tile .dot { width: .6rem; height: .6rem; border-radius: 50%; }
.mobile-app-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; color: var(--muted); font-size: .8rem; margin: 1.5rem 0 1rem; }
.mobile-app-foot form { margin: 0; }
.phone-preview { width: 19rem; border: 10px solid #222; border-radius: 2rem; overflow: hidden; background: var(--ground); }
.app-ops details { border: 1px solid var(--rule); border-radius: 6px; padding: .4rem .7rem; margin-bottom: .5rem; background: var(--surface); }
.app-ops summary { cursor: pointer; }
.app-install { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.app-install svg { width: 12rem; height: 12rem; }
.mobile-cues { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.mobile-cue { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border-radius: .8rem; text-decoration: none;
    background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--approved); color: var(--ink); }
.mobile-cue.tile-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.mobile-cue.tile-deduct { border-left-color: var(--oxide); background: var(--oxide-soft); }
.mobile-cue.tile-primary { border-left-color: var(--accent); }
.mobile-cue-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mobile-cue-label { font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------- verification panel (vendor/customer card) */
/* Bootstrap makes any .card-group a flex row; this one reads top to bottom. */
.card-group.verify-panel { display: block; }
.verify-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.verify-tile { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line, #e1dfdd); border-left-width: 5px; border-radius: 6px; background: var(--surface, #fff); }
.verify-tile.ok { border-left-color: var(--approved); background: var(--approved-soft); }
.verify-tile.warn { border-left-color: #c19c00; background: var(--warn-soft); }
.verify-tile.bad { border-left-color: var(--oxide); background: var(--oxide-soft); }
.verify-tile.none { border-left-color: #a19f9d; }
.verify-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
    font-size: 28px; font-weight: 700; line-height: 1; color: #fff; background: #a19f9d; }
.verify-mark.ok { background: var(--approved); }
.verify-mark.warn { background: #c19c00; }
.verify-mark.bad { background: var(--oxide); }
.verify-body { min-width: 0; }
.verify-title { font-size: 1.05rem; font-weight: 700; }
.verify-tile.ok .verify-title { color: var(--approved-ink); }
.verify-tile.bad .verify-title { color: var(--oxide); }
.verify-remark { margin: 4px 0 6px; overflow-wrap: anywhere; }
.verify-bank-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }

/* ---------------------------------------------------------------- the product's mark, and the footer */
.brand-logo { flex: none; width: 40px; height: 40px; color: #fff; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .brand-name { font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.brand-tagline { display: flex; align-items: center; gap: .4rem; margin-top: .22rem; font-size: .62rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; opacity: .9; }
.brand-rule { display: inline-block; width: 16px; height: 2px; border-radius: 1px; background: #e07b1f; }

.app-footer { margin-top: 2.5rem; padding: .9rem 0 .4rem; border-top: 1px solid var(--rule); color: var(--muted);
    font-size: .78rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.app-footer-product { letter-spacing: .04em; }
/* On screen, not on paper: a printed or e-mailed document is the company's own, not the product's. */
@media print { .app-footer { display: none; } }
/* The supplied logo, on white, at the top of the sidebar and on the sign-in page. */
.brand.brand-logo-panel { display: block; background: #fff; border-radius: 8px; padding: .5rem .6rem; margin-bottom: 1.3rem; }
.brand.brand-logo-panel img { display: block; width: 100%; height: auto; }
.login-brand-logo { display: block; text-align: center; }
.login-brand-logo img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto .4rem; }
.login-brand-logo p { margin: 0; color: var(--muted); font-size: .85rem; }
/* The company's logo beside its name on a purchase document's letterhead. */
.doc-letterhead { display: flex; align-items: center; gap: .9rem; }
.doc-logo { max-height: 3.4rem; max-width: 10rem; object-fit: contain; }
@media print { .doc-logo { max-height: 2.8rem; } }
/* The logo on the Company card, as it prints. */
.company-logo-field { display: flex; flex-direction: column; gap: .35rem; }
.company-logo-field img { max-height: 4.5rem; max-width: 18rem; object-fit: contain; align-self: flex-start;
    background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: .35rem .5rem; }

/* The record bar on a hand-written document screen sits to the right of its heading. */
.record-nav-float { float: right; margin: .25rem 0 .5rem 1rem; }
@media print { .record-nav { display: none; } }

/* A free trial's days left, above every page; red once it has ended. See docs/trial-signup.md. */
.trial-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: .55rem .9rem; border-radius: 4px;
    background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink-2); font-size: .9rem;
}
.trial-bar-ended { background: var(--oxide-soft); border-color: var(--oxide); }
.trial-card { max-width: 30rem; }
.trial-card select { width: 100%; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.days-box { width: 4.5rem; display: inline-block; }
.inline-form { display: inline-flex; gap: .3rem; align-items: center; margin: 0 .2rem 0 0; }

/* The features a licence plan opens, on the licence page. */
.plan-features { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }

/* The licence wizard (LicenceIssue.razor): modules grouped by the plan that first has them. */
.section-title { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
.feature-group { border: 1px solid var(--rule, #d9dee5); border-radius: 6px; padding: .5rem .9rem .7rem; margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; }
.feature-group legend { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #667); padding: 0 .3rem; }
.feature-group .check { display: flex; align-items: center; gap: .4rem; font-size: .92rem; text-transform: none; letter-spacing: 0; margin: 0; }
.card-block { margin: .8rem 0 1.2rem; }
.card-block textarea.mono { width: 100%; font-family: Consolas, monospace; font-size: .8rem; word-break: break-all; }

/* An amount on a statement that opens the entries behind it. */
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
a.drill:hover { color: var(--accent, #0b6bcb); border-bottom-style: solid; }

/* -- the phone menu: a drawer instead of a page of links --------------------
   On a narrow screen the sidebar stood above every page, so opening a page showed the menu and
   left the page below it, and the sidebar's sticky position slid it over the page on scrolling.
   Now it is a drawer: hidden until the Menu button in the top bar is pressed, over the page, and
   gone again when a page is chosen (nav.js) or the shade beside it is tapped. Desktop unchanged. */
.nav-toggle, .nav-backdrop, .menu-btn { display: none; }

@media (max-width: 60rem) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        display: block; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000;
        width: min(20rem, 86vw); max-height: none; height: 100%; overflow-y: auto;
        transform: translateX(-105%); transition: transform .2s ease;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, .35);
    }
    .nav-toggle:checked ~ .sidebar { transform: none; }
    .nav { flex-direction: column; flex-wrap: nowrap; }
    .nav-group { display: flex; }
    .nav-toggle:checked ~ .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .35);
    }
    .menu-btn {
        display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; margin: 0;
        padding: .4rem .75rem; border: 1px solid var(--rule); border-radius: 6px;
        font-weight: 600; color: var(--ink); background: var(--surface-2, #f4f6f8); white-space: nowrap;
    }
    .topbar { flex-wrap: wrap; gap: .5rem; padding: .5rem .8rem; }
    .topbar .company-switch label { display: none; }
    .topbar .user-name { display: none; }
}