/* Entrexa ERP — 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); }
/* MediEVanta's mark at the right of the top bar, on installations licensed for it. */
.topbar-mark { display: block; line-height: 0; }
/* The clinical coding standards in use, beside MediEVanta's mark (31-10-2026). */
.code-badge { display: inline-block; font-size: .78rem; font-weight: 600; color: #0b5a4a; background: #e3f6f0; border: 1px solid #9fd8c6; border-radius: 999px; padding: .2rem .65rem; text-decoration: none; white-space: nowrap; }
.code-badge:hover { background: #d0efe5; }
@media (max-width: 760px) { .code-badge { display: none; } }
.topbar-mark img { display: block; height: 2.4rem; width: auto; border-radius: 6px; }
.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); }
/* An address or a remark: several lines, the same width as every other field. */
.form-field textarea {
    width: 100%; max-width: 26rem; padding: .34rem .5rem; font: inherit; font-size: .89rem; line-height: 1.35;
    border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface); color: var(--ink);
    resize: vertical; min-height: 4.2rem;
}
.form-field textarea:disabled { background: var(--surface-2); color: var(--muted); }
.form-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.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 new-line row (NewLineRow): each field under its own column, kept compact. */
/* A grid cell typed in where it stands (the sales lines, 2026-10-05): it reads as the cell itself, a
   faint box until it is pointed at, so a grid of editable lines looks like a grid and not a form. The
   new-line row's fields take the same look, so the new row is one more row of the same kind. */
.grid .cell-input, .row-new input, .row-new select {
    border: 1px solid var(--rule); border-radius: 3px; background: var(--surface);
    padding: .22rem .35rem; font: inherit; font-size: .86rem; color: var(--ink); min-width: 0;
}
.grid .cell-input:hover, .grid .cell-input:focus, .row-new input:focus, .row-new select:focus { border-color: var(--accent); outline: none; }
.grid input.cell-input.num { width: 5.2rem; text-align: right; }
.grid td.wrap-cell input.cell-input { width: 100%; min-width: 9rem; }
.grid td.new-line-gst select.cell-input { width: 5.6rem; }
.grid td.new-line-gst input.cell-input { width: 5rem; }
.grid td.new-line-gst input.cell-input.num { width: 4rem; }
.grid select.cell-input.gst-group { width: 5.6rem; }
.grid input.cell-input.hsn { width: 6.2rem; }
.grid input.cell-input.pct { width: 3.6rem; }
.grid select.cell-input.account { width: 13rem; }
.grid input.cell-input[type=date] { width: 8.6rem; }
/* A lines grid that takes new lines is read and typed in at once: tighter cells, so the price and the
   GST come into view without scrolling on an ordinary laptop screen. */
.grid:has(tr.row-new) th, .grid:has(tr.row-new) td,
.grid:has(.cell-input) th, .grid:has(.cell-input) td { padding: .4rem .45rem; }
/* Ruled like a spreadsheet: a box round every cell, so the lines read as a grid (the owner, 2026-10-05). */
.grid:has(tr.row-new), .grid:has(.cell-input) { border: 1px solid var(--ink-3, #9aa5a1); }
.grid:has(tr.row-new) th, .grid:has(tr.row-new) td,
.grid:has(.cell-input) th, .grid:has(.cell-input) td { border: 1px solid var(--rule-strong, #c9d1ce); }
.grid:has(tr.row-new) thead th, .grid:has(.cell-input) thead th { background: var(--surface-2); }
.grid:has(tr.row-new) td.wrap-cell { white-space: normal; min-width: 9rem; max-width: 12rem; }
.row-new select { width: 5.6rem; }
.row-new td { vertical-align: middle; }
.row-new td.lookup-cell { white-space: nowrap; }
.row-new td.lookup-cell input { width: 7.5rem; }
.row-new .new-line-gst { white-space: nowrap; }
.row-new .new-line-gst .inline-num { width: 4.6rem; }
.row-new .inline-num { width: 5.5rem; }
.row-new .new-line-extra { white-space: nowrap; }
.row-new .new-line-extra .btn-inline { width: auto; margin-top: 0; margin-left: .4rem; }

/* A value shown in a grid row but not chosen there - the indent line's Type, Item for now. */
input.readonly-cell { 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.                                        */
/* The logo is shown as supplied: navy on white, on a white panel of its own, like the sidebar's. */
.hero-deep .hero-art.hero-logo, .hero-art.hero-logo {
    filter: none;
    opacity: 1;
    background: #fff;
    border-radius: .75rem;
    padding: .75rem 1rem;
}

.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; }
/* MediEVanta's logo is drawn on its own pale ground: the panel takes that colour, so no box shows round it. */
.brand.brand-logo-panel.brand-medievanta { background: #f2f7fa; padding: .3rem .4rem; }
.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 { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
}

/* A value shown on a card rather than typed: GST identity read from the masters. */
.form-field.read-value { padding: .45rem .1rem; font-variant-numeric: tabular-nums; }

/* "How it works" beside a transaction's record bar (DocumentSteps). */
.how-it-works { display: inline-block; margin: 0 0 .4rem; }
.how-it-works > summary { cursor: pointer; display: inline-block; padding: .3rem .75rem; border: 1px solid var(--rule); border-radius: 6px; font-size: .85rem; font-weight: 600; color: var(--accent, #0b6bcb); background: var(--surface); list-style: none; }
.how-it-works > summary::-webkit-details-marker { display: none; }
.how-it-works > summary::before { content: "? "; }
.how-it-works-body { margin-top: .4rem; max-width: 46rem; padding: .7rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); font-size: .9rem; }
.how-it-works-body ol { margin: .4rem 0 0 1.1rem; padding: 0; }
.how-it-works-body li { margin: .25rem 0; }

/* User Permissions: sets and companies ticked side by side. */
.grant-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 12px 0; }
.grant-box { border: 1px solid var(--border, #d0d7de); border-radius: 6px; padding: 8px 12px; max-height: 360px; overflow-y: auto; }
.grant-box legend { font-weight: 600; padding: 0 4px; }
.check-line { display: block; padding: 3px 0; }

/* The record bar: the segmented First … Last, and New as its own button just after it, clear of Last. */
.record-bar { display: inline-flex; align-items: stretch; gap: .6rem; }
.record-bar.record-nav-float { float: right; margin: .25rem 0 .5rem 1rem; }
.record-bar .record-new {
    display: inline-flex; align-items: center; padding: .38rem .9rem; border: 1px solid var(--accent); border-radius: 4px;
    color: var(--accent); background: var(--surface); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap;
}
.record-bar .record-new:hover { background: var(--accent); color: #fff; }

/* A document's header (the owner, 2026-10-05): number and status left, record bar right, then one strip of
   actions all the same size. */
.card-head { margin: 0 0 1rem; }
.card-head-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card-title { flex: 1 1 22rem; min-width: 0; text-align: left; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card-title h1 { margin: 0; white-space: nowrap; }
.card-status { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem; margin-top: .5rem;
    padding: .35rem .4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; }
/* Small buttons (the owner, 2026-10-05), so the record bar and the actions sit in one line each. */
.doc-actions > .btn-plain, .doc-actions .action-menu > summary, .doc-actions .how-it-works > summary,
.doc-actions .factbox > summary, .doc-actions .inline-form > button {
    display: inline-flex; align-items: center; height: 1.8rem; padding: 0 .6rem; margin: 0; font-size: .8rem;
    border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); color: var(--ink);
    text-decoration: none; font-weight: 600; cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.doc-actions .how-it-works, .doc-actions .factbox { margin: 0; }
.doc-actions > .btn-primary { display: inline-flex; align-items: center; height: 1.8rem; padding: 0 .6rem; margin: 0; font-size: .8rem; white-space: nowrap; box-sizing: border-box; }
.doc-actions .inline-form { margin: 0; }
.doc-actions .inline-form > button.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.doc-actions .factbox { margin-left: auto; }
.doc-actions > .btn-plain:hover, .doc-actions summary:hover { border-color: var(--accent); color: var(--accent); }
/* The one-button menu (ActionMenu): Print / Export. */
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-caret { margin-left: .4rem; font-size: .75rem; }
.action-menu-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 11rem; padding: .3rem 0;
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.action-menu-list > a { display: block; padding: .45rem .9rem; color: var(--ink); text-decoration: none; font-size: .9rem; }
.action-menu-list > a:hover { background: var(--accent-soft); color: var(--accent-dark); }
/* E-mail this: on a page with the new header the strip has the button; the layout's own line is folded away. */
body:has(.card-head) .page-send:not([open]) { display: none; }
/* The create form New lands on, picked out for a moment. */
form#new:target { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius); }

/* Auto-save: the Save button is only for a browser without script. */
html.js .autosave-fallback { display: none; }
#autosave-note { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 50; display: none; max-width: 28rem;
    padding: .55rem .9rem; border-radius: 6px; font-size: .9rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
#autosave-note.is-ok { background: #e8f5ec; color: #1d6b3a; border: 1px solid #b9dfc6; }
#autosave-note.is-bad { background: #fdecea; color: #a4262c; border: 1px solid #f1b8b3; }


/* Smaller record bar in a document header, to match the action buttons. */
.card-head .record-step, .card-head .record-nav-pos { padding: .2rem .55rem; font-size: .8rem; }
.card-head .record-bar .record-new { padding: .2rem .65rem; font-size: .8rem; }
.card-head .record-bar { gap: .35rem; }
/* An empty open panel (a summary with nothing in it) leaves no white box under the strip. */
.doc-actions .tiles:empty, .doc-actions .how-it-works-body:empty { display: none; }
/* Ctrl+Alt+K: the shortcut keys of the page. */
#shortcut-list { position: fixed; right: 1.2rem; top: 4.5rem; z-index: 60; padding: .8rem 1rem; max-width: 30rem;
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: .88rem; }
#shortcut-list table { margin-top: .4rem; border-collapse: collapse; }
#shortcut-list td { padding: .2rem .6rem .2rem 0; vertical-align: top; }
#shortcut-list kbd { font-family: inherit; font-size: .8rem; padding: .05rem .35rem; border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--surface-2); white-space: nowrap; }
/* An Actions menu on a list row: small, and its list opens leftwards so the last column does not run off. */
td.row-actions .action-menu > summary { height: 1.7rem; padding: 0 .55rem; font-size: .8rem; display: inline-flex; align-items: center;
    border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--surface); cursor: pointer; white-space: nowrap; list-style: none; }
td.row-actions .action-menu-list { left: auto; right: 0; }
.table-wrap:has(details.action-menu[open]) { overflow: visible; }
/* Printed documents in the company's theme colour (the owner, 2026-10-06: the company's name in blue, "as per our
   theme colour"): the name and the title in the theme's dark shade, the rule under the letterhead and the column
   heads in its colour - on paper too. The palette comes from the company's theme (MainLayout sets the variables). */
.doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc .doc-company, .doc .doc-kind { color: var(--accent-dark); }
.doc .doc-band { border-bottom-color: var(--accent); }
.doc .doc-strip th, .doc .doc-box-head, .doc .doc-lines th { background: var(--accent-soft); color: var(--accent-dark); }
/* Excel / CSV without the department's Export right: shown, greyed, and not clickable (the owner, 2026-10-06). */
main.no-export a[data-export] { opacity: .45; pointer-events: none; cursor: not-allowed; text-decoration: none; filter: grayscale(1); }
main.no-export .export-denied-note { display: inline; }


/* The format choice on Company Backup (2026-10-06). */
fieldset.choice-list { border: 0; padding: 0; margin: .75rem 0; }
fieldset.choice-list legend { font-weight: 600; margin-bottom: .25rem; }

/* Clone (2026-10-06): a small window under its button - the type, then the document. */
.clone-panel { min-width: 21rem; padding: .75rem .9rem; display: grid; gap: .35rem; }
.clone-panel label { font-size: .8rem; color: var(--muted); }
.clone-panel select, .clone-panel input { width: 100%; }
.clone-panel form { display: grid; gap: .35rem; margin: 0; }
.clone-panel button { justify-self: start; margin-top: .25rem; }
.doc-actions .clone-result { flex-basis: 100%; order: 99; margin: .4rem 0 0; }

/* Lists: one compact line above the data, as on the sales lists (the owner, 2026-10-07). */
.list-head { align-items: center; margin-bottom: .5rem; }
.list-head h1 { display: inline; margin: 0 .6rem 0 0; }
.list-head .lead { display: inline; margin: 0; font-size: .9rem; }
.list-head .head-actions { flex-wrap: nowrap; }
.list-head .head-search input { min-width: 0; width: 11rem; }
.list-head .head-actions .btn-primary { width: auto; flex: 0 0 auto; }
@media (max-width: 760px) { .list-head .head-actions { flex-wrap: wrap; } }

/* The fuel entry's scan boxes with their Camera button; Take photo on the attachment panel (2026-10-07). */
.scan-row { display: flex; gap: .5rem; align-items: center; }
.scan-row .scan-box { flex: 1 1 auto; min-width: 0; }
.photo-take { cursor: pointer; align-self: flex-end; }


/* Printing (2026-10-07): paired inputs on the quote card; the e-Quote. */
.pair-inline { display: flex; gap: .4rem; }
.pair-inline input { flex: 1 1 0; min-width: 0; }
.equote .equote-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .9rem 0; }
.equote .equote-thanks { align-self: end; color: var(--ink-2); font-style: italic; }
.equote .equote-h { color: var(--accent-dark, #1f4e79); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin: 1.1rem 0 .3rem; border-bottom: 2px solid var(--accent, #2e75b6); padding-bottom: .2rem; }
.equote .equote-spec th { width: 28%; text-align: left; background: var(--accent-soft, #eef4fb); }
.equote .equote-price th { background: var(--accent-soft, #eef4fb); }
.equote .equote-price tr.equote-main td { background: #fffbe6; }
.equote .equote-terms { margin-top: 1rem; font-size: .82rem; }
.equote .equote-terms ul { margin: .2rem 0 0 1.1rem; padding: 0; }
.equote .equote-sign { margin-top: 1.6rem; text-align: right; font-size: .85rem; }
.equote .equote-sign-space { height: 3.2rem; }
@media print { .equote .equote-main td { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Gate scan as MW's (2026-10-07): operator login, the Scan Result box. */
.gate-panel { border: 1px solid var(--rule-strong); border-radius: 8px; padding: .6rem .9rem; margin: .6rem 0; background: var(--surface); }
.gate-panel h2 { margin: 0 0 .4rem; font-size: 1.05rem; border-bottom: 1px solid var(--rule-strong); padding-bottom: .3rem; }
.gate-result .alert-ok, .gate-result .alert-error { margin: 0; }
.gate-operator { margin: .4rem 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }


/* The phone app's "My" pages (2026-10-07): one card per scan or fill, readable on a phone. */
.mine-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.mine-card { border: 1px solid var(--rule-strong); border-radius: 8px; padding: .55rem .75rem; background: var(--surface); display: grid; gap: .15rem; }
.mine-card.late { border-color: #c0392b; }
.mine-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* The QR scanner window (2026-10-07): over the page, the camera large, what to show above it. */
.ba-scanner { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 22, .92); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ba-scanner[hidden] { display: none; }
.ba-scanner-box { width: min(92vw, 520px); display: grid; gap: .7rem; text-align: center; color: #fff; }
.ba-scanner-title { font-size: 1.25rem; font-weight: 600; }
.ba-scanner-view { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 1 / 1; }
.ba-scanner-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-scanner-frame { position: absolute; inset: 14%; border: 3px solid #4dd0c4; border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.ba-scanner-status { min-height: 1.4em; font-size: .95rem; color: #d7f1ee; }
.ba-scanner-close { justify-self: center; background: #fff; color: #133; border: 0; border-radius: 8px; padding: .6rem 2.4rem; font-size: 1rem; font-weight: 600; }

/* A field that takes a QR: the QR mark inside it, at the right, as Business Central shows (QrButton.razor). */
.qr-field { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.qr-field > input { width: 100%; padding-right: 2.8rem; box-sizing: border-box; }
.qr-btn { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.2rem; display: grid; place-items: center;
          border: 0; border-radius: 6px; background: transparent; color: var(--accent, #0b6e69); cursor: pointer; padding: 0; }
.qr-btn:hover, .qr-btn:focus-visible { background: rgba(11, 110, 105, .12); }
.qr-btn:disabled { opacity: .35; cursor: not-allowed; }


/* On a phone the page must not swing left and right (the owner, 2026-10-08: "the mobile page moves left/right like a
   flicker"): something a little wider than the screen let the whole page pan sideways under the thumb. Nothing is
   allowed past the screen's edge; forms wrap, wide grids keep their own scroll inside .table-wrap. */
@media (max-width: 760px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    @supports (overflow-x: clip) { html, body { overflow-x: clip; } }
    /* Not pan-y: a touch's allowed moves are what every box above it allows, so pan-y on the body stopped a thumb
       sliding a wide table sideways inside its own .table-wrap (the owner, 09-11-2026, Permission Set on a phone:
       "screen moving, flicker"). The page itself still cannot swing sideways - overflow-x is clipped above. */
    body { touch-action: manipulation; }
    /* One scroll on a phone: a list grows to its full height instead of a 70vh box scrolling inside the page, which
       caught the thumb mid-page and made the page seem to stop and jump. Wide grids keep their sideways scroll. */
    .table-wrap { max-height: none; overflow-y: visible; overscroll-behavior-x: contain; }
    .page-head, .head-actions, .journal-form, .gst-grid { flex-wrap: wrap; min-width: 0; max-width: 100%; }
    .journal-form > div, .journal-form .grow { min-width: 0; flex: 1 1 100%; }
    .journal-form input, .journal-form select, .qr-field { max-width: 100%; }
    .gst-grid { grid-template-columns: 1fr; }
    .gate-result .alert-ok, .gate-result .alert-error { overflow-wrap: anywhere; }
}

/* The vehicle check at the gate going out: a tick per point, two or three to a row, one on a phone. */
.gate-checks { border: 1px solid var(--rule, #d6dadc); border-radius: 6px; padding: .4rem .7rem .6rem; margin: .4rem 0 .6rem;
               display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .25rem .9rem; }
.gate-checks legend { font-weight: 600; padding: 0 .3rem; }
.gate-check { display: flex; gap: .45rem; align-items: center; font-weight: normal; min-height: 2rem; }
.gate-check input { width: 1.2rem; height: 1.2rem; }

/* A goods note line's serial numbers: ticks, a box for new ones, Save and Auto assign. */
.grn-serials { display: grid; gap: .3rem; margin-top: .35rem; padding: .4rem .5rem; border: 1px dashed var(--rule, #d6dadc); border-radius: 6px; }
.grn-serials textarea { width: 100%; min-width: 14rem; font-family: inherit; }
.issue-serials { display: flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; max-width: 28rem; }

/* Gate Scan Result on a phone (2026-10-09): the message is one paragraph with bold words in it, not columns - the alert's
   flex row made each <strong> a column of its own. The tick stays in front. */
.gate-result .alert-ok, .gate-result .alert-error { display: block; }
.gate-result .alert-ok::before, .gate-result .alert-error::before { margin-right: .4rem; }
/* A scan box with the QR mark inside: the text stops short of the mark. */
.qr-field > input.scan-box, .qr-field > input { padding-right: 2.9rem !important; }
.qr-field > input.scan-box { font-family: inherit; }

/* A master card's tabs fold like Business Central's FastTabs (2026-10-09); a gap between them, the fields padded. */
details.card-tab { margin-bottom: .6rem; border-bottom: 1px solid var(--rule); }
details.card-tab > summary { font-weight: 600; }
details.card-tab > .form-grid { padding: .6rem 1.05rem 1rem; }

/* The serial grid under a line: a narrow table of numbered boxes (Shared/SerialGrid.razor). */
.serial-grid { max-width: 460px; }
.serial-grid-table td, .serial-grid-table th { padding: .2rem .45rem; }
.serial-grid-table input { width: 100%; }
tr.sub-row > td { background: var(--surface-2, #f6f8f8); padding: .4rem .8rem .8rem; }
.sub-row .sub-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .35rem; }
.grn-grid input.cell-input { min-width: 4.5rem; }

/* Item Tracking Lines (Shared/ItemTrackingPart.razor): a window over the document, opened from a line's Serial Nos.
   Below the QR camera (z-index 1000), so a row's QR mark still opens it on top. */
.tracking-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(32, 31, 30, .45); display: flex;
    align-items: flex-start; justify-content: center; padding: 6vh 1rem 1rem; overflow-y: auto; }
.tracking-dialog { width: min(36rem, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--rule);
    border-radius: var(--radius, 6px); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); padding: 1rem 1.2rem 1.1rem;
    display: flex; flex-direction: column; gap: .7rem; }
.tracking-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tracking-head h2 { margin: 0; font-size: 1.15rem; }
.tracking-head p { margin: .1rem 0 0; }
.tracking-x { font-size: 1.5rem; line-height: 1; text-decoration: none; color: var(--muted); padding: 0 .3rem; }
.tracking-x:hover { color: var(--ink); }
.tracking-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem .9rem; margin: 0;
    padding: .6rem .7rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius, 6px); }
.tracking-facts .wide { grid-column: span 2; }
.tracking-facts dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.tracking-facts dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.tracking-dialog .serial-grid { max-width: none; max-height: 46vh; overflow-y: auto; }
.tracking-shelf { display: flex; flex-wrap: wrap; gap: .3rem .9rem; max-height: 40vh; overflow-y: auto; }
.tracking-foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-top: .3rem; border-top: 1px solid var(--rule); }
a.chip-link { text-decoration: none; cursor: pointer; }
tr.row-selected > td { background: var(--accent-soft, #eff6fc); }
.tracking-foot .btn-primary, .tracking-foot .btn-plain { width: auto; flex: 0 0 auto; margin: 0; }

/* ---------------------------------------------------------------- hospital management (2026-10-09) */
.chip-danger { background: var(--oxide-soft); border-color: var(--oxide); color: var(--oxide); }
.btn-mini { font-size: .76rem; padding: .1rem .45rem; min-height: 0; }
.tick-list { display: flex; flex-wrap: wrap; gap: .25rem .9rem; }
.hosp-actions { display: flex; flex-direction: column; gap: .6rem; }
.hosp-actions .journal-form { margin: 0; }
.is-abnormal, tr.is-abnormal td { color: var(--oxide); }
tr.is-abnormal td:first-child { font-weight: 600; }

/* The patient's history: a timeline, newest first. */
.hosp-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.hosp-event { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .6rem .8rem; background: var(--surface);
    border: 1px solid var(--rule); border-left: 4px solid var(--accent); border-radius: var(--radius, 6px); }
.hosp-event.hosp-ipd { border-left-color: var(--oxide); }
.hosp-event.hosp-lab { border-left-color: var(--approved); }
.hosp-when { font-variant-numeric: tabular-nums; font-weight: 600; }
.hosp-what { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.hosp-what .lbl { display: inline-block; min-width: 7rem; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.hosp-title { font-weight: 600; }
.hosp-result { display: inline-block; margin-right: .8rem; white-space: nowrap; }
.hosp-result.is-abnormal strong { color: var(--oxide); }
@media (max-width: 640px) { .hosp-event { grid-template-columns: 1fr; gap: .2rem; } }

/* Slips and reports. */
.hosp-doc .hosp-line { margin: .3rem 0; }
.hosp-doc .hosp-line .lbl { display: inline-block; min-width: 10rem; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.hosp-rx { margin: .8rem 0 .3rem; font-size: 1.1rem; }
.lab-test-head { margin: 1rem 0 .3rem; font-size: 1rem; border-bottom: 1px solid var(--rule-strong); padding-bottom: .2rem; }
.lab-report-table tr.is-abnormal td { color: var(--ink); }
.lab-report-table tr.is-abnormal td.strong { color: var(--oxide); }
.hosp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.hosp-sign-box { text-align: center; }
.hosp-sign-space { height: 3.2rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: .3rem; }
.center { text-align: center; }
.lab-grid input.cell-input { width: 100%; }
.lab-results { width: min(46rem, 100%); }

/* The bed board: a ward to a row of bubbles - green free, red occupied, grey out of use. */
.bed-legend { display: inline-flex; align-items: center; gap: .3rem; margin-right: .8rem; }
.bubble-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; }
.bubble-dot.is-free { background: var(--approved); }
.bubble-dot.is-occupied { background: var(--oxide); }
.bubble-dot.is-blocked { background: var(--rule-strong); }
.bed-ward { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius, 6px); padding: .7rem 1rem 1rem; margin: 0 0 1rem; }
.bed-ward-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.bed-ward-head h2 { margin: 0; font-size: 1.05rem; }
.bubbles { display: flex; flex-wrap: wrap; gap: .8rem; }
.bubble { width: 5.6rem; height: 5.6rem; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; color: #fff; text-align: center; line-height: 1.1; position: relative; transition: transform .12s ease, box-shadow .12s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.bubble.is-free { background: radial-gradient(circle at 35% 30%, #3fae3f, var(--approved)); cursor: pointer; }
.bubble.is-occupied { background: radial-gradient(circle at 35% 30%, #d0494f, var(--oxide)); }
.bubble.is-blocked { background: var(--rule-strong); color: var(--ink-2); }
a.bubble:hover, a.bubble:focus-visible { transform: scale(1.07); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); outline: none; }
.bubble.is-picked { outline: 3px solid var(--accent); outline-offset: 3px; }
.bubble-code { font-size: .72rem; opacity: .9; font-variant-numeric: tabular-nums; }
.bubble-who { font-size: 1.15rem; font-weight: 700; letter-spacing: .02em; }
.bubble-sub { font-size: .7rem; opacity: .95; }
.bubble-btn { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.bubble-aside { margin-top: .4rem; }
@media (max-width: 480px) { .bubble { width: 4.6rem; height: 4.6rem; } .bubbles { gap: .55rem; } }
/* A window over the page is narrow: its fields go one under the other. */
.tracking-dialog .form-grid { grid-template-columns: 1fr; }
.tracking-dialog .form-grid .form-row { grid-column: 1 / -1; }
.lead .chip { margin-right: .35rem; }
/* The pay box on a hospital bill: the Razorpay link and its QR. */
.pay-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .8rem 0; padding: .7rem .9rem;
    border: 1px dashed var(--approved); border-radius: var(--radius, 6px); background: var(--approved-soft); }
.pay-qr { width: 7rem; height: 7rem; background: #fff; padding: .2rem; }
/* The pharmacy counter: the sale's payment QR, large enough to scan across the counter (2026-10-16). */
.pay-online-box { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin: .75rem 0; padding: 1rem; border: 1px solid #d5dbe1; border-left: 4px solid #0a6fb5; border-radius: 6px; background: #f5f9fc; }
.pay-online-box p { margin: 0 0 .5rem; }
.pay-qr-large { width: 13rem; height: 13rem; border: 1px solid #d5dbe1; border-radius: 6px; }
.medievanta-mark { color: #1a9aa8; font-size: .72rem; letter-spacing: .02em; }

/* -- the MediEVanta desk (Shared/MedievantaDesk) ----------------------------- */
/* The hospital's day on the home page. A figure links to its pop-up's own address, and the pop-up shows while it is
   the target - no script, so it works on a statically rendered page and the back button closes it. */
.desk { margin: 0 0 1.6rem; padding: 1rem 1.2rem 1.1rem; background: var(--surface); border: 1px solid var(--rule);
        border-left: 4px solid #1096aa; border-radius: 6px; }
.desk-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.desk-head h2 { margin: 0; }
.desk-part { margin: 1rem 0 0; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.desk .desk-tiles { margin: .5rem 0 0; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.desk .tile { text-decoration: none; color: inherit; }
.desk .table-wrap { margin-top: .5rem; }
.desk-of { font-size: .95rem; font-weight: 400; color: var(--muted); }
.desk-pop { display: none; position: fixed; inset: 0; z-index: 60; align-items: flex-start; justify-content: center; padding: 4vh 1rem; }
.desk-pop:target { display: flex; }
.desk-pop-shade { position: absolute; inset: 0; background: rgba(16, 28, 44, .45); }
.desk-pop-box { position: relative; width: min(68rem, 100%); max-height: 90vh; overflow: auto; background: var(--surface);
                border-radius: 8px; padding: 1rem 1.2rem 1.2rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.desk-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.desk-pop-head h2 { margin: 0; font-size: 1.15rem; }
@media print { .desk-pop { display: none !important; } }

/* -- ABDM's consent language in the ABHA window (AbhaWindow) ------------------ */
fieldset.abha-consent { border: 1px dashed var(--rule-strong); border-radius: 6px; padding: .5rem .8rem .6rem; margin: .6rem 0; max-height: 15rem; overflow: auto; }
fieldset.abha-consent legend { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 .3rem; }
fieldset.abha-consent label.check { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; line-height: 1.4; }
fieldset.abha-consent label.check input { margin-top: .2rem; flex: none; }
fieldset.abha-consent .abha-consent-sign { margin-left: 1.4rem; }
.abha-resend { display: block; margin: .3rem 0 0; }

/* -- the Scan & Share QR, one card to a counter (ScanShareQr) ----------------- */
.share-qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.share-qr-card { background: #fff; border: 1px solid var(--rule-strong); border-radius: 10px; padding: 1.2rem 1.2rem 1rem; text-align: center; break-inside: avoid; }
.share-qr-card h2 { margin: 0; font-size: 1.25rem; }
.share-qr-lead { margin: .2rem 0 .6rem; color: var(--ink-2); }
.share-qr-code { width: 15rem; max-width: 100%; margin: 0 auto; }
.share-qr-code svg { display: block; width: 100%; height: auto; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.share-qr-counter { margin: .5rem 0 .3rem; font-size: 1.1rem; }
.share-qr-steps { text-align: left; margin: .4rem auto 0; padding-left: 1.3rem; max-width: 17rem; font-size: .9rem; line-height: 1.45; }
.share-qr-foot { margin: .6rem 0 0; }
.share-qr-url { word-break: break-all; margin: .3rem 0 0; }
@media print { .share-qr-sheet { grid-template-columns: repeat(2, 1fr); } .share-qr-card { border-color: #000; } }

/* -- the Health Facility Registry form (HfrFacilityPage) ---------------------- */
fieldset.hfr-part { border: 1px solid var(--rule); border-radius: 6px; padding: .5rem .8rem .7rem; margin: .7rem 0; }
fieldset.hfr-part legend { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 .3rem; }
.hfr-problems { margin: .4rem 0 0 1.1rem; padding: 0; }

/* Patient card, ABDM: the records' way through ABDM as a strip of stages (done = green tick). */
.abdm-trail { list-style: none; margin: .75rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 720px) { .abdm-trail { grid-template-columns: 1fr; } }
.abdm-trail li { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem; border: 1px solid #d5dbe1; border-left: 4px solid #c3cad2; border-radius: 6px; background: #fafbfc; }
.abdm-trail li.done { border-left-color: #1a7f4b; background: #f1f9f4; }
.abdm-trail-no { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #c3cad2; color: #fff; font-weight: 700; font-size: .85rem; }
.abdm-trail li.done .abdm-trail-no { background: #1a7f4b; }
@media print { .abdm-trail { display: none; } }

/* Admission card, Discharge: what is to be settled before the patient leaves (Hospital Setup, Before discharge). */
.settle-box { display: flex; gap: 1.25rem; align-items: center; margin: .5rem 0 .75rem; padding: .8rem 1rem; border: 1px solid #d5dbe1; border-left: 4px solid #0a6fb5; border-radius: 6px; background: #f5f9fc; }
.settle-box.settle-cashless { border-left-color: #1a7f4b; background: #f1f9f4; }
.settle-amount { display: flex; flex-direction: column; min-width: 9rem; }
.settle-amount strong { font-size: 1.5rem; }
.settle-who { display: flex; flex-direction: column; gap: .25rem; }
.warn-text { color: #b3261e; }

/* Patient card, ABDM: the button to the patient's own side on ABDM's site, and the ABHA address to copy there. */
.abdm-portal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: .5rem 0 .9rem; font-size: .9rem; }
.abdm-portal-id { width: 17rem; max-width: 100%; padding: .25rem .5rem; border: 1px dashed #7aa7c7; border-radius: 4px; background: #f5f9fc; font-weight: 600; }

/* Hospital Setup: the users who may approve an unsettled discharge, ticked from the list. */
.approver-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .15rem .9rem; max-height: 11rem; overflow: auto; padding: .4rem .6rem; border: 1px solid #d5dbe1; border-radius: 6px; background: #fff; }

/* Verify ABHA window: each label beside its own box. */
.abha-verify { display: grid; grid-template-columns: 11rem minmax(0, 24rem); gap: .55rem .9rem; align-items: center; margin-bottom: .5rem; }
.abha-verify select, .abha-verify input { width: 100%; }
@media (max-width: 560px) { .abha-verify { grid-template-columns: 1fr; } }

/* Doctor's Desk (/doctor): made for a phone - one column, rows a thumb can hit, a bar at the bottom. */
.doc-desk { max-width: 44rem; margin: 0 auto; }
.doc-desk section, .doc-desk { scroll-margin-top: .5rem; }
.doc-head h1 { margin-bottom: .1rem; } .doc-hello { margin: 0; color: #52606d; font-size: .95rem; }
.doc-find { display: flex; gap: .5rem; margin: .75rem 0 0; } .doc-find input { flex: 1 1 8rem; width: 100%; min-width: 0; box-sizing: border-box; min-height: 2.9rem; padding: .5rem .8rem; border: 1px solid #9aa5b1; border-radius: 10px; font-size: 1rem; }
.doc-find button { flex: none; width: auto; margin: 0; min-height: 2.9rem; border-radius: 10px; padding: 0 1.1rem; }
.doc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .75rem 0 1rem; }
.doc-tiles a { display: flex; flex-direction: column; align-items: center; padding: .7rem .3rem; background: #fff; border: 1px solid #d5dbe1; border-radius: 12px; text-decoration: none; color: inherit; text-align: center; }
.doc-tiles a.doc-now { background: #fff4ce; border-color: #e0b84a; }
.doc-tiles strong { font-size: 1.6rem; line-height: 1.1; } .doc-tiles span { font-size: .78rem; color: #52606d; }
.doc-card { background: #fff; border: 1px solid #d5dbe1; border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem; }
.doc-card h2 { font-size: 1.05rem; margin: 0 0 .4rem; } .doc-urgent { border-left: 4px solid #c77700; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .75rem 0; border-top: 1px solid #edf0f3; text-decoration: none; color: inherit; min-height: 3rem; }
.doc-row:active { background: #f1f5f9; }
.doc-row > span:first-child { display: flex; flex-direction: column; min-width: 0; } .doc-row small { color: #616e7c; font-size: .84rem; overflow-wrap: anywhere; }
.doc-side { display: flex; flex-direction: column; align-items: flex-end; color: #0a6fb5; white-space: nowrap; font-size: 1.05rem; }
.desk-note { display: flex; gap: .5rem; padding: 0 0 .8rem; margin: 0; border: 0; }
.desk-note input[name=note] { flex: 1 1 8rem; width: 100%; min-width: 0; box-sizing: border-box; min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid #9aa5b1; border-radius: 10px; font-size: 1rem; }
.desk-note button { flex: none; width: auto; margin: 0; min-height: 2.75rem; border-radius: 10px; white-space: nowrap; }
.doc-form { display: flex; flex-direction: column; gap: .6rem; } .doc-form select, .doc-form button { min-height: 2.9rem; font-size: 1rem; border-radius: 10px; }
.desk-foot { text-align: center; }
.doc-company { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: 0 0 .6rem; padding: 0; border: 0; background: none; }
.doc-company label { margin: 0; font-size: .85rem; color: #52606d; } .doc-company select { min-height: 2.75rem; max-width: 16rem; padding: 0 .6rem; border: 1px solid #9aa5b1; border-radius: 10px; font-size: 1rem; background: #fff; }
.doc-tabs, .doc-appbar { display: none; }
@media (max-width: 640px) {
    .doc-tiles { grid-template-columns: repeat(2, 1fr); }
    .doc-desk { padding-bottom: 5rem; }
    .doc-head h1 { font-size: 1.5rem; }
    .doc-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid #d5dbe1; justify-content: space-around;
        padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(16, 34, 62, .08); }
    .doc-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; min-height: 2.9rem; padding: .35rem 0; font-size: .72rem; color: #3e4c59; text-decoration: none; }
    .doc-tabs svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    /* The desk is the doctor's whole screen on a phone: the application's top strip and the trail make way for the
       desk's own slim bar (Shared/DoctorAppBar.razor). */
    body:has(.doc-desk) .crumbs, body:has(.doc-desk) .topbar { display: none; }
    body:has(.doc-desk) .content { padding: 0 1rem 2rem; }
    .doc-appbar { display: flex; align-items: center; gap: .6rem; position: sticky; top: 0; z-index: 60; margin: 0 -1rem .8rem; padding: .5rem .9rem;
        padding-top: calc(.5rem + env(safe-area-inset-top)); background: #10223e; color: #fff; }
    .doc-appbar-home { display: flex; align-items: center; gap: .55rem; flex: 1; min-width: 0; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
    .doc-appbar-home img { width: 2rem; height: 2rem; border-radius: 7px; flex: none; }
    .doc-appbar-home span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .doc-appbar-all, .doc-appbar button { flex: none; display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0 .8rem; margin: 0; width: auto;
        border: 1px solid #5b6f8f; border-radius: 999px; background: none; color: #fff; font-size: .85rem; font-weight: 400; text-decoration: none; }
    .doc-appbar form { margin: 0; padding: 0; border: 0; background: none; }
    body:has(.doc-desk) footer { padding-bottom: 4.5rem; }
}

/* The consultation on a phone (/doctor/visit/{id}): one column, choices as buttons, the two actions always in reach. */
.dv { padding-bottom: 1rem; } .dv-back { display: inline-block; padding: .6rem 0; font-size: 1rem; text-decoration: none; }
.dv-who h1 { margin: 0 0 .1rem; font-size: 1.4rem; } .dv-who p { margin: .15rem 0; }
.dv-allergy { background: #fde7e9; color: #8a1c22; border-radius: 8px; padding: .4rem .7rem; font-weight: 600; }
.dv-form { margin: 0; padding: 0; border: 0; } .dv-default { position: absolute; left: -200vw; }
.dv-label { display: block; font-size: .9rem; font-weight: 600; color: #3e4c59; margin: .8rem 0 .3rem; } .doc-card > .dv-label:first-child { margin-top: 0; }
.dv textarea, .dv-add > input, .dv-vitals input { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid #9aa5b1; border-radius: 10px; font-size: 1rem; font-family: inherit; }
.dv-add > input { min-height: 2.9rem; margin-bottom: .5rem; }
.dv-more { margin-top: .6rem; } .dv-more > summary { cursor: pointer; color: #0a6fb5; padding: .6rem 0; }
.dv-vitals { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; } .dv-vitals label { font-size: .8rem; color: #52606d; display: flex; flex-direction: column; gap: .2rem; }
.dv-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .6rem; align-items: center; }
.dv-chips label { position: relative; margin: 0; } .dv-chips label input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dv-chips label span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid #9aa5b1; border-radius: 999px; background: #fff; font-size: .95rem; white-space: nowrap; }
.dv-chips label input:checked + span { background: #0a6fb5; border-color: #0a6fb5; color: #fff; font-weight: 600; }
.dv-chips label input:focus-visible + span { outline: 3px solid #9fd3f5; }
.dv-chips > input { flex: 1 1 5.5rem; min-width: 5.5rem; width: auto; min-height: 2.75rem; box-sizing: border-box; padding: 0 .7rem; border: 1px solid #9aa5b1; border-radius: 999px; font-size: .95rem; }
.dv-wide { width: 100%; min-height: 2.9rem; border-radius: 10px; font-size: 1rem; margin: 0; }
.dv-rm { flex: none; width: auto; margin: 0; min-height: 2.6rem; border-radius: 10px; }
.dv-tests { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; } .dv-tests label { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; margin: 0; }
.dv-tests input { width: 1.25rem; height: 1.25rem; flex: none; }
.dv-bar { position: sticky; bottom: 0; z-index: 40; display: flex; gap: .6rem; padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg, #f3f2f1) 75%, transparent); }
.dv-bar button { flex: 1; width: auto; margin: 0; min-height: 3.1rem; border-radius: 12px; font-size: 1.05rem; } .dv-bar .btn-primary { flex: 2; }

/* A printed document (slip, report, bill) read on a phone (the owner, 13-10-2026: "vertical and horizontal scroll should
   work"): the page itself may not pan sideways on a phone (see above), so the sheet scrolls sideways inside its own
   frame and keeps the width it has on paper - nothing is cut at the right edge. Screen only; print is untouched. */
@media screen and (max-width: 760px) {
    .doc { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; padding: 1rem; }
    .doc > * { min-width: 42rem; }
}

/* Shown on a phone only: a way from a wide card to the screen made for a phone. */
.only-phone { display: none !important; }
@media screen and (max-width: 640px) { .only-phone { display: inline-flex !important; } }

/* iPhone (the owner, 13-10-2026: "make for iPhone also"). Safari zooms the whole page in when a box whose text is
   smaller than 16px is touched, and does not zoom back: on an iPhone every box is 16px at least. The test is one only
   iOS answers yes to, so nothing changes on a PC or on Android. */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: max(16px, 1em) !important; }
    /* Opened from the home screen the page runs to the very bottom: the home-swipe line stays clear. */
    body { padding-bottom: env(safe-area-inset-bottom); }
}

/* Data Table Migrate (/setup/data-migrate): the tables to tick, in columns; the import's choices in a frame. */
.dm-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .1rem 1.2rem; max-height: 26rem; overflow-y: auto; padding: .6rem .8rem;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; margin-bottom: .8rem; }
.dm-tables .check-line { overflow-wrap: anywhere; }
.dm-modes { border: 1px solid var(--rule); border-radius: 6px; padding: .6rem .9rem; margin: .8rem 0; } .dm-modes legend { font-size: .8rem; padding: 0 .4rem; color: var(--muted); width: auto; float: none; }

/* Setup > Modules: one page wide - descriptions wrap inside fixed column shares (2026-10-17). */
.modules-grid { width: 100%; table-layout: fixed; }
.table-wrap:has(.modules-grid) { max-height: none; overflow-y: visible; }   /* the whole list on the page, no box scrolling inside it */
.modules-grid th, .modules-grid td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.modules-grid td:first-child strong { overflow-wrap: anywhere; }

/* A key or secret box: text drawn as dots, so the browser's saved passwords are not offered for it (page-scripts.js). */
input[data-secret] { -webkit-text-security: disc; font-family: monospace; }

/* Mail Setup: each channel tested or not, and a tested channel's settings locked (20-10-2026). */
fieldset.channel-lock { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.channel-lock:disabled input, fieldset.channel-lock:disabled select, fieldset.channel-lock:disabled textarea { background: #f3f2f1; color: #52606d; }
.channel-status { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .6rem; margin: 0 0 1rem; }
.channel-card { border: 1px solid #d5dbe1; border-radius: 10px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .3rem; background: #fff; }
.channel-card.channel-tested { border-left: 4px solid #1e7b34; } .channel-card.channel-open { border-left: 4px solid #c77700; }

/* The appointment book's slots (25-10-2026): each free slot a chip to pick, the first one picked. */
.slot-grid { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .8rem; }
.slot { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .65rem; border: 1px solid #c8c6c4; border-radius: 999px; background: #fff; cursor: pointer; font-variant-numeric: tabular-nums; }
.slot:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); font-weight: 600; }
.slot input { margin: 0; }

/* The waiting hall's screen: big tokens, readable across the hall. */
.token-board { min-height: 100vh; background: #0b2540; color: #fff; padding: 1.5rem 2rem; box-sizing: border-box; font-family: inherit; }
.tb-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; border-bottom: 2px solid #2b5c8a; margin-bottom: 1.2rem; }
.tb-head h1 { font-size: 2.6rem; margin: 0 0 .4rem; letter-spacing: .02em; }
.tb-head p { margin: 0; font-size: 1.2rem; color: #b9d3ea; }
.tb-empty { font-size: 1.6rem; color: #b9d3ea; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.2rem; }
.tb-doctor { background: #123659; border-radius: 14px; padding: 1rem 1.2rem; border-top: 6px solid #36c2b4; }
.tb-doctor h2 { margin: 0; font-size: 1.6rem; }
.tb-dept { margin: .1rem 0 .6rem; color: #b9d3ea; font-size: 1.05rem; }
.tb-now { display: flex; align-items: baseline; gap: .8rem; }
.tb-token { font-size: 5.5rem; font-weight: 700; line-height: 1; color: #ffe066; font-variant-numeric: tabular-nums; }
.tb-name { font-size: 1.4rem; }
.tb-label { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: #b9d3ea; min-width: 3.2rem; }
.tb-next { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.tb-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tb-queue li { display: flex; align-items: center; gap: .7rem; }
.tb-qname { font-size: 1.4rem; }
.tb-chip { font-size: 1.8rem; font-weight: 600; background: #1f4f7d; border-radius: 10px; padding: .1rem .7rem; font-variant-numeric: tabular-nums; }
.tb-none, .tb-more, .tb-wait { color: #b9d3ea; font-size: 1.1rem; }
.tb-wait { margin: .6rem 0 0; }
@media (max-width: 640px) { .token-board { padding: 1rem; } .tb-token { font-size: 4rem; } .tb-head h1 { font-size: 2rem; } }
.text-danger { color: var(--oxide); font-weight: 600; }

/* The nursing chart (25-10-2026): the NEWS2 banner, late and due doses, the vitals' trend lines. */
.news-banner { display: block; padding: .6rem .9rem; border-radius: 8px; border: 1px solid; margin: 0 0 1rem; }
.row-late td { background: var(--oxide-soft); }
.row-due td { background: var(--warn-soft); }
.trend { max-width: 30rem; margin: .5rem 0; }
.trend polyline { stroke-width: 2; }
.t-pulse { stroke: #d13438; color: #d13438; } .t-temp { stroke: #c77700; color: #c77700; } .t-spo2 { stroke: #0078d4; color: #0078d4; }
.t-key { font-weight: 600; }
.handover-card { border: 1px solid #d5dbe1; border-radius: 10px; padding: .6rem .9rem; margin: 0 0 .8rem; background: #fff; break-inside: avoid; }
.handover-card h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
.handover-card p { margin: .2rem 0; }
.handover-notes { margin: .3rem 0 0 1rem; padding: 0; }
.handover-note { font-weight: 600; }

/* The IPD deposit on the admission (25-10-2026). */
.deposit-panel { border: 1px solid #d5dbe1; border-radius: 10px; padding: .6rem .9rem; margin: 1rem 0; background: #fff; }
.deposit-panel h2 { margin-top: 0; }
.deposit-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .4rem 0 .6rem; }
.deposit-figures div { display: flex; flex-direction: column; border-left: 3px solid #c8c6c4; padding-left: .5rem; }
.deposit-figures strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.deposit-figures .deposit-short { border-left-color: var(--oxide); color: var(--oxide); }
.deposit-warning { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 8px; padding: .4rem .7rem; }
.deposit-receipt { max-width: 46rem; border: 1px solid #c8c6c4; border-radius: 10px; padding: 1rem 1.4rem; background: #fff; margin: 1rem 0; }
.deposit-receipt header { text-align: center; border-bottom: 1px solid #c8c6c4; margin-bottom: .8rem; }
.deposit-receipt h1 { margin: 0; font-size: 1.4rem; } .deposit-receipt h2 { font-size: 1rem; letter-spacing: .08em; margin: .5rem 0; }
.receipt-grid { width: 100%; border-collapse: collapse; } .receipt-grid th, .receipt-grid td { border: 1px solid #e1dfdd; padding: .35rem .5rem; text-align: left; }
.receipt-grid th { background: #f3f2f1; width: 8rem; }
.deposit-receipt footer { display: flex; justify-content: space-between; margin-top: 2.5rem; }
.pre-wrap { white-space: pre-wrap; }
.imaging-report h3 { font-size: 1rem; margin: 1rem 0 .3rem; text-transform: uppercase; letter-spacing: .05em; }

/* The operation theatre (25-10-2026): each theatre's day side by side; the theatre's clock; the WHO sign-in. */
.ot-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; margin: .5rem 0 1rem; }
.ot-room { border: 1px solid #d5dbe1; border-radius: 10px; padding: .5rem .7rem; background: #fff; }
.ot-room h2 { font-size: 1.05rem; margin: 0 0 .4rem; }
.ot-case { display: block; border-left: 4px solid var(--accent); background: #f6f8fa; border-radius: 6px; padding: .35rem .5rem; margin: .3rem 0; color: inherit; text-decoration: none; }
.ot-case span { display: block; color: var(--ink-2); }
.ot-intheatre { border-left-color: var(--warn); background: var(--warn-soft); }
.ot-done { border-left-color: var(--approved); }
.ot-cancelled { border-left-color: #a19f9d; opacity: .6; text-decoration: line-through; }
.ot-clock { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin: .8rem 0; }
.ot-step { border: 1px solid #d5dbe1; border-radius: 8px; padding: .4rem .6rem; display: flex; flex-direction: column; gap: .2rem; background: #fff; }
.ot-step strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.ot-step-done { border-color: var(--approved); background: var(--approved-soft); }
.checklist { display: grid; gap: .3rem; margin: .3rem 0 .6rem; }

/* The emergency's triage colours (25-10-2026). */
.triage { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #fff; }
.triage-red { background: #c50f1f; } .triage-orange { background: #e0570b; } .triage-yellow { background: #e5b300; color: #201f1e; }
.triage-green { background: #107c10; } .triage-blue { background: #0063b1; }

/* The bio-medical waste bags (25-10-2026). */
.bmw { display: inline-block; padding: .05rem .5rem; border-radius: 4px; font-weight: 600; border: 1px solid #8a8886; }
.bmw-yellow { background: #fde300; } .bmw-red { background: #d13438; color: #fff; } .bmw-white { background: #fff; } .bmw-blue { background: #0078d4; color: #fff; }
.range-box { min-width: 7rem; }   /* a normal range of 4000.00 was cut in its box (25-10-2026) */
.inline-pair { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }   /* two small boxes on one line: Apgar 1 min / 5 min */
.inline-pair input { width: 5rem; }

/* The filter row under every list's headings (js/list-filter.js, docs/list-filters.md, 09-11-2026). */
.grid tr.grid-filter-row th { padding: .2rem .35rem; background: var(--surface-2); }
.grid tr.grid-filter-row input { width: 100%; min-width: 4rem; box-sizing: border-box; font: inherit; font-size: .8rem; padding: .15rem .35rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: inherit; }
.grid tr.grid-filter-row input:not(:placeholder-shown) { border-color: var(--accent); background: var(--accent-soft); }
.filter-count { font-size: .85rem; margin: .25rem 0; color: var(--muted); }
@media print { .grid tr.grid-filter-row, .filter-count { display: none !important; } }