:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --text: #1d2330;
    --muted: #5d6677;
    --border: #dde1e8;
    --accent: #1f5fae;
    --accent-soft: #e6eef9;
    --bar: #1b2433;
    --bar-text: #e9edf3;
    --alert-bg: #fdf1e3;
    --alert-text: #7a3d00;
    --todo: #6b7280;
    --todo-bg: #f0f1f4;
    --done: #146c3a;
    --done-bg: #e3f4ea;
    --bad: #a3221b;
    --bad-bg: #fbe6e4;
    --prod: #b3261e;
    --test: #b26b00;
    --devl: #2563eb;
    --radius: 8px;
    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: Consolas, "Cascadia Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12161d;
        --surface: #1a2029;
        --text: #e4e8ee;
        --muted: #9aa4b5;
        --border: #2c3442;
        --accent: #7fb0ff;
        --accent-soft: #1f2d44;
        --bar: #0c1016;
        --alert-bg: #3a2a14;
        --alert-text: #ffcf8f;
        --todo: #a0a8b6;
        --todo-bg: #262d39;
        --done: #7dd3a0;
        --done-bg: #173322;
        --bad: #ff9b93;
        --bad-bg: #3d1d1b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.45 var(--font);
}

a { color: var(--accent); }
code, kbd { font-family: var(--mono); font-size: 0.92em; }
kbd {
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bar);
    color: var(--bar-text);
}
.topbar .brand { color: inherit; font-weight: 600; text-decoration: none; letter-spacing: 0.02em; }
.topbar .client { opacity: 0.8; }
.topbar .spacer { flex: 1; }
.topbar .clock { opacity: 0.8; font-size: 0.9em; }

.env {
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--muted);
}
.env-prod { background: var(--prod); }
.env-test { background: var(--test); }
.env-devl { background: var(--devl); }

/* ---- Shell: menu tree on the left, page on the right ---- */

:root { --topbar-h: 46px; --sidebar-w: 300px; }

.topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); }
.nav-toggle {
    display: none;
    padding: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: calc(100vh - var(--topbar-h));
}
.shell.no-sidebar { grid-template-columns: minmax(0, 1fr); }

/* Signed-in user and account links in the top bar; sign-in and password pages. */
.topbar .who { font-size: 0.9em; opacity: 0.9; margin-left: 12px; }
.topbar .inline { display: inline; margin: 0; }
.topbar .topbar-link {
    color: inherit; opacity: 0.85; font: inherit; font-size: 0.9em; text-decoration: none;
    background: none; border: 0; padding: 4px 6px; cursor: pointer;
}
.topbar .topbar-link:hover, .topbar .topbar-link:focus-visible { opacity: 1; text-decoration: underline; }
.account-card { max-width: 440px; margin: 48px auto; }
.account-form .field { grid-template-columns: 1fr; }
.account-form input { width: 100%; }
.error-message { color: var(--bad); border-color: var(--bad); }
.error-message li { margin-left: 1em; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.user-form { max-width: 560px; margin: 12px 0 20px; display: grid; gap: 6px; }
.users { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.users th, .users td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #e3e6ea); }
.users .tag { margin-left: 6px; font-size: 0.75em; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); }
.users .row-actions { white-space: nowrap; }
.button.small { padding: 2px 8px; font-size: 0.85em; }
.inline { display: inline; margin: 0; }
.one-time code { font-size: 1.15em; padding: 2px 6px; user-select: all; }
.form-section { margin: 12px 0 2px; font-size: 0.95em; }
.menu-maint .disabled-row td { color: var(--muted); }
.menu-maint .disabled-row td:first-child, .menu-maint .disabled-row td:nth-child(2) { text-decoration: line-through; }
.menu-maint .small { font-size: 0.85em; }
.option-form { max-width: 720px; }
.head-tools { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
a.tool-exit { color: inherit; text-decoration: none; }
.users .warn-tag { background: var(--bad); color: #fff; }
.group-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 14px; }
.group-pick input { width: 16em; }
.crumbs { margin: 6px 0 10px; }
.access td:nth-child(3) { text-align: center; }
.access code { margin-left: 6px; font-size: 0.8em; }
.whole-group { margin-top: 16px; }
.whole-group summary { cursor: pointer; margin-bottom: 8px; }

.sidebar {
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--surface);
    padding: 12px 8px 24px;
}

main {
    width: 100%;
    max-width: 1280px;
    padding: 16px 24px 40px;
}

.ico {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico-menu { color: #c58a1b; }
.ico-batch { color: #8e5bd0; }
.ico-program { color: var(--accent); }
.ico-proc { color: #3f8f8a; }
.ico-form { color: #c2510f; }
.ico-generic { color: var(--muted); }
.ico-invalid { color: var(--bad); }
.ico.ready { color: var(--done); width: 16px; height: 16px; margin-left: auto; }
@media (prefers-color-scheme: dark) {
    .ico-menu { color: #e7b453; }
    .ico-batch { color: #b993ef; }
    .ico-proc { color: #6cc4bd; }
    .ico-form { color: #f08a4b; }
}

/* ---- Menu tree ---- */

.tree { font-size: 0.92em; }
.tree ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.tree > ul { padding-left: 0; }
.tree a { color: inherit; text-decoration: none; }

.tree-root, .tree summary, .tree .leaf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    min-height: 30px;
}
.tree-root { font-weight: 600; margin-bottom: 4px; }
.tree summary { cursor: pointer; list-style: none; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin: 0 2px 0 -4px;
    border-right: 1.6px solid var(--muted);
    border-bottom: 1.6px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.12s;
}
.tree details[open] > summary::before { transform: rotate(45deg); }
.tree .leaf { padding-left: 18px; }
.tree .leaf.todo span { color: var(--muted); }
.tree .leaf.static { color: var(--muted); }
.tree-root:hover, .tree summary:hover, .tree a.leaf:hover { background: var(--accent-soft); }
.tree [aria-current="page"] { font-weight: 600; }
.tree li.current > .leaf, .tree li.current > details > summary, .tree-root[aria-current="page"] {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent);
}
.tree .loading { padding: 4px 8px 4px 26px; color: var(--muted); font-style: italic; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed;
        left: 0;
        z-index: 15;
        width: min(85vw, 320px);
        transform: translateX(-100%);
        transition: transform 0.18s;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
    }
    body.nav-open .sidebar { transform: none; }
}

.trail {
    margin: 4px 0 12px;
    font-size: 0.92em;
    color: var(--muted);
}
.trail a { text-decoration: none; }
.trail a:hover { text-decoration: underline; }
.trail .sep { margin: 0 6px; }

.menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px 16px;
}

.menu-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}
.menu-head h1 { margin: 0; font-size: 1.35em; font-weight: 600; }
.menu-head .subtitle { margin: 2px 0 0; color: var(--muted); }
.menu-key {
    font-family: var(--mono);
    font-size: 0.85em;
    color: var(--muted);
    white-space: nowrap;
}

.message {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--alert-bg);
    color: var(--alert-text);
    font-weight: 600;
}

.batch-note { margin: 0 0 12px; color: var(--muted); }
.empty { color: var(--muted); }

.options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px 24px;
}
/* Over 12 options: 1-12 down the first column, 13 on down the next, and so on. */
.options.two-col {
    grid-template-rows: repeat(12, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

.option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}
a.option:hover, a.option:focus-visible { background: var(--accent-soft); outline: none; }

.desc { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.tag {
    flex: none;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75em;
    white-space: nowrap;
}
.tag-menu { color: var(--accent); background: var(--accent-soft); }
.tag-todo { color: var(--todo); background: var(--todo-bg); }
.tag-done { color: var(--done); background: var(--done-bg); }
.tag-bad { color: var(--bad); background: var(--bad-bg); }

.prompt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.prompt label { font-weight: 600; }
.prompt input {
    width: 8em;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: 1em var(--mono);
}
.prompt input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.prompt button {
    padding: 6px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
@media (prefers-color-scheme: dark) { .prompt button { color: #0c1016; } }
.prompt .hint { color: var(--muted); font-size: 0.85em; }

.facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0 0 14px;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.facts dd code + code { margin-left: 10px; }
.steps { margin: 0 0 14px; }
.detail { color: var(--muted); font-size: 0.92em; }

@media (max-width: 700px) {
    main { padding: 12px 16px 32px; }
    .menu { padding: 16px; }
    .options.two-col { grid-template-rows: none; grid-auto-flow: row; grid-template-columns: 1fr; }
    .menu-head { flex-direction: column; gap: 4px; }
    .topbar .clock { display: none; }
}

/* ---- Forms and lists (converted jobs) ---- */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.button, .actions button {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.button.secondary { background: transparent; color: var(--accent); }
@media (prefers-color-scheme: dark) { .button:not(.secondary), .actions button { color: #0c1016; } }

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.toolbar .count { margin-left: auto; color: var(--muted); font-size: 0.9em; }
.filter, .record input, .record select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
.filter:focus, .record input:focus, .record select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.grid th { color: var(--muted); font-weight: 600; font-size: 0.88em; }
.grid tbody tr:hover { background: var(--accent-soft); }
.grid .action { text-align: right; width: 1%; white-space: nowrap; }
code.key {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--todo-bg);
    white-space: pre;
}

.record { display: grid; gap: 14px; max-width: 640px; }
.field { display: grid; grid-template-columns: 11em minmax(0, 1fr); align-items: center; gap: 4px 14px; }
.field label { font-weight: 600; }
.field .hint, .field .error { grid-column: 2; font-size: 0.85em; }
.field .hint { color: var(--muted); }
.field .error { color: var(--bad); font-weight: 600; }
.field input, .field select, .field .value { justify-self: start; max-width: 100%; }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.mono { font-family: var(--mono); }
.actions { display: flex; gap: 10px; margin-top: 4px; }

@media (max-width: 700px) {
    .field { grid-template-columns: 1fr; }
    .field .hint, .field .error, .field .lookup-desc { grid-column: 1; }
}

/* ---- Record page: picture toolbar above the form ---- */

.button { display: inline-flex; align-items: center; gap: 6px; }

.iconbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    margin: -4px 0 16px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    padding: 6px 8px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.8em;
    text-decoration: none;
    cursor: pointer;
}
.tool svg { width: 28px; height: 28px; }
/* Dimensions: the units in use, big where an icon would be, and what a click switches to. */
.tool.units-toggle strong { font-size: 1.35em; line-height: 28px; letter-spacing: 0.02em; color: var(--accent); }
.tool:hover:not(:disabled):not([aria-disabled]), .tool:focus-visible {
    border-color: var(--border);
    background: var(--surface);
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.tool:disabled, .tool[aria-disabled] { cursor: default; opacity: 0.35; filter: grayscale(1); }
.tool-sep { width: 1px; margin: 4px 6px; background: var(--border); }

.detail-empty { color: var(--muted); padding: 32px 8px; text-align: center; }
.detail-empty svg { width: 56px; height: 56px; opacity: 0.8; }
.record { max-width: 680px; }
.form-foot { margin: 6px 0 0; color: var(--muted); font-size: 0.85em; }
.form-foot a { color: var(--muted); }

/* Records listed under a form in the tree */
.tree .leaf.record { gap: 6px; padding-left: 18px; }
.tree .leaf.record code.key { font-size: 0.85em; padding: 0 5px; min-width: 1.6em; text-align: center; }
.tree .leaf.record span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-record { color: #5b7fb8; }

/* Print: the table as a report, not the screen */
.print-report { display: none; }
@media print {
    .topbar, .sidebar { display: none !important; }
    /* A page with a print report prints that; any other page prints itself, without the
       toolbar, tabs, links and the controls for changing things. */
    body:has(.print-report) .record-page { display: none !important; }
    /* The toolbar keeps only its record label (which property or unit). */
    .record-page .iconbar { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 0 6pt !important; }
    .record-page .iconbar > :not(.tool-count) { display: none !important; }
    .record-page .form-tabs, .record-page .parent-link, .record-page button,
    .record-page form.history-delete, .record-page .mode-banner, .shortcuts { display: none !important; }
    .record-page .table-scroll { overflow: visible !important; }
    .record-page table { width: 100%; border-collapse: collapse; }
    .record-page th, .record-page td { padding: 3pt 6pt; border-bottom: 0.5pt solid #bbb; }
    .record-page a { color: inherit; text-decoration: none; }
    .shell { display: block; }
    main { padding: 0; max-width: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .print-report { display: block; }
    .print-report h1 { font-size: 16pt; margin: 0 0 2pt; }
    .print-report p { margin: 0 0 10pt; color: #444; }
    .print-report table { width: 100%; border-collapse: collapse; }
    .print-report th, .print-report td { text-align: left; padding: 3pt 6pt; border-bottom: 0.5pt solid #bbb; }
    .print-report th { border-bottom: 1pt solid #000; }
}
/* ---- Headings and export modes ---- */

.tool.on { border-color: var(--accent); background: var(--accent-soft); }
.muted { color: var(--muted); }
.button.disabled { opacity: 0.45; pointer-events: auto; cursor: not-allowed; }

.mode-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #e5c76b;
    border-radius: var(--radius);
    background: #fff8e1;
    color: #5c4300;
}
.mode-banner[hidden] { display: none; }
.mode-banner svg { width: 28px; height: 28px; flex: none; }
.mode-banner span { flex: 1 1 260px; }
@media (prefers-color-scheme: dark) {
    .mode-banner { background: #3a3014; border-color: #7a6526; color: #ffe7a3; }
}

/* Headings: the labels become boxes */
.headings-mode .field { grid-template-columns: 14em minmax(0, 1fr); }
.heading-input {
    font-weight: 600;
    border: 1px dashed var(--accent) !important;
    background: var(--accent-soft) !important;
}
.headings-mode .hint { grid-column: 1; }

/* Export picking: fields light up like a highlighter when chosen */
.field-preview { display: none; }
body.picking .detail-empty { display: none; }
body.picking .field-preview { display: grid; }
body.picking [data-field] {
    cursor: pointer;
    margin: -4px -8px;
    padding: 4px 8px;
    border: 1px dashed var(--border);
    border-radius: 6px;
}
body.picking [data-field] * { pointer-events: none; }
body.picking [data-field]:hover { border-color: #d9a400; }
body.picking [data-field].picked {
    border: 1px solid #d9a400;
    background: #fff3a8;
    box-shadow: inset 4px 0 0 #f2b632;
}
body.picking [data-field].picked label { color: #4a3800; }
body.picking [data-field]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
    body.picking [data-field].picked { background: #4a3d0c; }
    body.picking [data-field].picked label { color: #ffe7a3; }
}

/* ---- Search profile and paged tree ---- */

.profile-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 6px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.profile-status svg { width: 32px; height: 32px; flex: none; }
.profile-status p { margin: 0; }
.profile-form .field input, .profile-form .field select { border-style: dashed; }

.tree .tree-count {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 18px;
    color: var(--muted);
    font-size: 0.85em;
    font-style: italic;
}
.tree .tree-count .ico { width: 14px; height: 14px; color: var(--accent); }
.tree .tree-more button {
    width: 100%;
    padding: 3px 8px 3px 42px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 0.88em;
    text-align: left;
    cursor: pointer;
}
.tree .tree-more button:hover { background: var(--accent-soft); }
.tree .ico.filtered { color: var(--accent); width: 14px; height: 14px; margin-left: auto; }
.tree .ico.filtered + .ico.ready { margin-left: 0; }

/* ---- Compact format: forms with many fields (property, lease...) must fit on one screen ---- */

main { padding: 12px 18px 32px; }
.menu { padding: 14px 18px 12px; }
.menu-head { padding-bottom: 8px; margin-bottom: 10px; }
.menu-head h1 { font-size: 1.15em; }
.menu-head .subtitle { font-size: 0.88em; }
.message { margin-bottom: 10px; padding: 6px 12px; font-size: 0.9em; }

.iconbar { align-items: center; gap: 2px; margin: -2px 0 10px; padding: 3px 4px; }
.tool { min-width: 52px; gap: 1px; padding: 3px 6px 2px; font-size: 0.74em; }
.tool svg { width: 22px; height: 22px; }
.tool-sep { align-self: stretch; margin: 3px 4px; }

/* Record count, to the right of the pictures */
.tool-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 0 10px;
    color: var(--muted);
    font-size: 0.88em;
    white-space: nowrap;
}
.tool-count strong { color: var(--text); font-size: 1.15em; }
.tool-count .ico { width: 15px; height: 15px; color: var(--accent); }

/* Fields flow into as many columns as fit */
.record {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 6px 28px;
    max-width: none;
}
.record > :not(.field) { grid-column: 1 / -1; }
.record .field { grid-template-columns: 9.5em minmax(0, 1fr); gap: 1px 10px; min-height: 30px; }
.record .field label { font-size: 0.88em; font-weight: 500; color: var(--muted); }
.record .field input, .record .field select { padding: 3px 7px; font-size: 0.93em; }
.record .field .hint, .record .field .error { font-size: 0.8em; }
.record.headings-mode .field { grid-template-columns: 13em minmax(0, 1fr); }
.record .mode-banner { margin-bottom: 4px; padding: 6px 10px; }
.record .mode-banner svg { width: 22px; height: 22px; }
.profile-line { margin: 0 0 2px; color: var(--muted); font-size: 0.86em; }
.form-foot { margin: 0; font-size: 0.8em; }
::placeholder { color: var(--muted); opacity: 0.7; font-style: italic; }

@media (max-width: 700px) {
    .tool { min-width: 44px; }
    .tool span { display: none; }
    .tool-count { padding: 0 4px; }
    .record .field { grid-template-columns: 1fr; }
}

/* ---- Shortcuts box under the main box ---- */

.menu-head { align-items: center; }
.shortcuts {
    margin-top: 12px;
    padding: 10px 18px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.shortcuts h2 {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.shortcuts dl { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; font-size: 0.88em; }
.shortcuts dl > div { display: flex; align-items: center; gap: 8px; }
.shortcuts dt { white-space: nowrap; }
.shortcuts dd { margin: 0; color: var(--muted); }
.shortcuts kbd { font-size: 0.85em; }
@media print { .shortcuts { display: none !important; } }

/* ---- Defined outline round every field ---- */

:root { --field-line: #9aa5b8; --field-readonly: #eef1f5; }
@media (prefers-color-scheme: dark) { :root { --field-line: #5d687b; --field-readonly: #222935; } }

.record .field input,
.record .field select,
.record .field .value {
    min-height: 28px;
    border: 1px solid var(--field-line) !important;
    border-style: solid !important;
    border-radius: 4px;
    background: var(--surface);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}
.record .field .value {
    display: inline-flex;
    align-items: center;
    min-width: 6em;
    padding: 2px 7px;
    background: var(--field-readonly);
    color: var(--text);
}
.record .field .value code.key { padding: 0; background: transparent; }
.record .field input:focus,
.record .field select:focus {
    border-color: var(--accent) !important;
    outline: 2px solid var(--accent-soft);
    outline-offset: 0;
}
.record .field input[aria-invalid="true"] { border-color: var(--bad) !important; }
.record .field input.heading-input { border-style: dashed !important; border-color: var(--accent) !important; background: var(--accent-soft) !important; }

/* Mandatory fields */
.req { color: var(--bad); font-weight: 700; }
.req-note { margin: 2px 0 0; color: var(--muted); font-size: 0.8em; }

/* F1 field help */
.field-help {
    width: min(92vw, 460px);
    padding: 16px 20px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.field-help::backdrop { background: rgba(15, 20, 30, 0.35); }
.field-help h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05em; }
.field-help h2 svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.field-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 0.92em; }
.field-help dt { color: var(--muted); }
.field-help dd { margin: 0; overflow-wrap: anywhere; }
.field-help form { display: flex; align-items: center; gap: 10px; font-size: 0.88em; }
.record .field .value:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Right-click field menu */
.field-menu {
    position: fixed;
    z-index: 50;
    min-width: 200px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.field-menu[hidden] { display: none; }
.field-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92em;
    text-align: left;
    cursor: pointer;
}
.field-menu button:hover, .field-menu button:focus { background: var(--accent-soft); outline: none; }
.field-menu svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.field-menu span { flex: 1; }
.field-menu kbd { font-size: 0.8em; color: var(--muted); }

/* Keep the record count on the same line as the pictures when the page is narrow */
.record-page { container-type: inline-size; }
@container (max-width: 760px) {
    .iconbar { gap: 0; }
    .tool { min-width: 44px; padding: 3px 3px 2px; }
    .tool-sep { margin: 3px 2px; }
    .tool-count { padding: 0 4px 0 6px; }
}
@container (max-width: 600px) {
    .tool span { display: none; }
}

/* Boxes as wide as the field: --len characters (set per field from the program's input length) */
.record .field .sized {
    width: calc(var(--len) * 1.2ch + 18px);
    min-width: 0;
    max-width: 100%;
}
.record .field .sized.mono { width: calc(var(--len) * 1ch + 18px); min-width: calc(2ch + 18px); }
.record .field .value.sized { justify-content: flex-start; }

/* ---- FI01 Financial Periods ---- */
.ledger-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 12px; color: var(--muted); font-size: 0.88em; }
.ledger-line .ico { width: 15px; height: 15px; color: var(--accent); }
.ledger-line strong { color: var(--text); font-weight: 600; }
.locked-note { margin: 0; padding: 6px 12px; border-radius: 6px; background: var(--todo-bg); color: var(--muted); font-size: 0.88em; }
.grid.periods, .grid.years { max-width: 640px; }
.grid.periods td, .grid.years td { padding: 4px 10px; vertical-align: middle; }
.grid.periods tbody tr { cursor: default; }
.grid.periods input[type="date"] {
    padding: 2px 6px;
    border: 1px solid var(--field-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.93em;
}
.grid.periods input[aria-invalid="true"] { border-color: var(--bad); }
.grid.periods .value { padding: 2px 7px; border: 1px solid var(--field-line); border-radius: 4px; background: var(--field-readonly); }
.grid.periods .error { display: block; color: var(--bad); font-size: 0.8em; font-weight: 600; }

/* ---- Form note and history (e.g. VT01 rate history) ---- */
.form-note {
    margin: -4px 0 10px;
    padding: 6px 12px;
    border-left: 3px solid #d9a400;
    border-radius: 4px;
    background: #fff8e1;
    color: #5c4300;
    font-size: 0.84em;
}
@media (prefers-color-scheme: dark) { .form-note { background: #3a3014; color: #ffe7a3; } }
.history { margin-top: 6px; }
.history h2 { margin: 0 0 6px; color: var(--muted); font-size: 0.78em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.history .grid { max-width: 640px; }
.history .grid td { padding: 4px 10px; vertical-align: middle; }
.history .grid tbody tr { cursor: default; }
.history tr.current td { font-weight: 600; }
.history tr.history-new td { background: var(--accent-soft); }
.history input[type="date"], .history input[name="hist.Value"] {
    padding: 2px 6px;
    border: 1px solid var(--field-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.93em;
}
.history input[aria-invalid="true"] { border-color: var(--bad); }
.history .error { display: block; color: var(--bad); font-size: 0.8em; font-weight: 600; }

/* ---- Look-up fields and the pick-list ---- */
.lookup-wrap { display: inline-flex; align-items: stretch; justify-self: start; max-width: 100%; }
.lookup-wrap input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.lookup-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid var(--field-line);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--field-readonly);
    color: var(--accent);
    cursor: pointer;
}
.lookup-btn:hover, .lookup-btn:focus-visible { background: var(--accent-soft); outline: none; }
.lookup-btn svg, .lookup h2 svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lookup {
    width: min(92vw, 520px);
    padding: 14px 16px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.lookup::backdrop { background: rgba(15, 20, 30, 0.35); }
.lookup h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1.05em; color: var(--text); }
.lookup h2 svg { color: var(--accent); }
.lookup-search {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--field-line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.lookup-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.lookup-status { margin: 6px 0; font-size: 0.82em; }
.lookup-list {
    max-height: min(50vh, 340px);
    overflow-y: auto;
    margin: 0;
    padding: 2px;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.lookup-list li { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.lookup-list li:hover { background: var(--accent-soft); }
.lookup-list li[aria-selected="true"] { background: var(--accent); color: #fff; }
.lookup-list li[aria-selected="true"] code.key { background: rgba(255, 255, 255, 0.25); color: #fff; }
.lookup-list code.key { min-width: 2.5em; text-align: center; }
.lookup-list li.closed span { color: var(--muted); text-decoration: line-through; }
.lookup-list li em { margin-left: auto; font-size: 0.8em; font-style: normal; color: var(--bad); }
.lookup-list li[aria-selected="true"] em, .lookup-list li[aria-selected="true"] span { color: #fff; }
/* The code's description, printed after it as on the green screen. */
.field .lookup-desc { grid-column: 2; font-size: 0.85em; color: var(--muted); min-height: 1em; }
.field .lookup-desc:empty { display: none; }
.field .lookup-desc.warn { color: var(--bad); font-weight: 600; }
/* A field shown beside another in its row (a rent rise date, then "to" its new rent). */
/* Paired rows at the foot of the form: one per row, scrolling past about five. */
.record .paired-group { grid-column: 1 / -1; }
.record .paired-group h3 { margin: 4px 0 6px; font-size: 0.95em; }
.record .paired-rows {
    display: grid; gap: 4px; max-height: 13.5em; overflow-y: auto; padding: 6px 10px;
    border: 1px solid var(--border, #d8dce6); border-radius: 6px; width: fit-content; max-width: 100%;
}
/* Long rows (an insurance line's six fields) take the form's full width. */
.record .paired-rows:has(.beside ~ .beside ~ .beside) { width: auto; }
@media print { .record .paired-rows { max-height: none; overflow: visible; } }
/* A row of paired fields (a rise's date and rent; an insurance line's six) flows on one line while it fits. */
.record .field:has(> .beside) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.record .field:has(> .beside) > label { flex: 0 0 9.5em; }
.record .field:has(> .beside) > .error { flex-basis: 100%; padding-left: calc(9.5em + 10px); }
.field > .beside { display: inline-flex; align-items: center; gap: 8px; }
.field > .beside .beside-text { color: var(--muted); font-size: 0.9em; }
.field > .beside input.sized { max-width: 15em; }
.field > .beside .value.readonly { min-width: 7.5em; text-align: right; }
/* Part of a key made of several fields (PWDLR11), and right-aligned numbers. */
.field .keypart { color: var(--accent); font-size: 0.8em; }
.field input.number { text-align: right; }
.lookup-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 0.82em; }
.lookup-foot kbd { font-size: 0.85em; }

.params input { width: 100%; min-width: 10em; }
.params td:first-child { white-space: nowrap; }
#param-filter { width: 18em; max-width: 100%; }

/* Wide tables scroll on their own instead of the page. */
.table-scroll { overflow-x: auto; max-width: 100%; }


/* A crowded top bar on narrow screens: drop the date first. */
@media (max-width: 900px) { .topbar .clock { display: none; } }


/* Audit Enquiry */
.audit-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 10px; }
.audit-filter label { display: flex; flex-direction: column; font-size: 0.85em; gap: 2px; }
.audit-filter input { min-width: 0; }
.audit-filter-buttons { display: inline-flex; gap: 8px; }
.users.audit td { vertical-align: top; }
.users.audit .audit-value { max-width: 28ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-pager { display: flex; gap: 8px; margin-top: 10px; }

/* PM19.S Property Select, and the property a menu works on (PM19.D) */
.property-select { margin: 8px 0 14px; }
.property-select h2 { margin: 0 0 4px; font-size: 1.05em; }
.ps-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; align-items: center; margin: 8px 0; }
.ps-grid label { color: var(--muted); }
.ps-grid .check { color: inherit; }
.property-list td { vertical-align: top; }
.chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 10px; margin: 6px 0 12px;
          border: 1px solid var(--line, #e3e6ea); border-radius: 6px; background: var(--accent-soft); }
.chosen-address { color: var(--muted); }


/* A group's screens as tabs (Property Create/Amend: Basic, Secondary, Supplier Details) */
.form-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 0; border-bottom: 2px solid var(--accent); }
.form-tab { padding: 6px 14px; border: 1px solid var(--line, #e3e6ea); border-bottom: none; border-radius: 6px 6px 0 0;
            background: var(--field-readonly); color: var(--text); text-decoration: none; font-size: 0.92em; }
a.form-tab:hover { background: var(--accent-soft); }
.form-tab.current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.form-tab[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Back to the record a form's records belong to (a unit's property) */
.parent-link { margin: 0 0 6px; font-size: 0.92em; }


/* PM04/G.07 Unit Summary */
.unit-summary .num { text-align: right; font-variant-numeric: tabular-nums; }
.unit-summary tfoot th { border-top: 2px solid var(--line, #e3e6ea); }
.unit-summary caption { text-align: left; padding: 4px 0; }


/* PM04/G.12 Unit Dimensions */
.dims-grid { display: flex; flex-wrap: wrap; gap: 28px; margin: 10px 0; align-items: flex-start; }
.dims-form .users.dims-table { width: auto; max-width: 100%; }
.dims-table th, .dims-table td { padding: 4px 8px; }
.dims-table input.sized { width: calc(var(--len) * 1ch + 18px); min-width: 0; max-width: 100%; }
.dims-form .table-scroll { max-width: 100%; }
.dims-table caption { text-align: left; font-weight: 600; padding: 4px 0; }
.dims-table .num, .dims-table input.num { text-align: right; font-variant-numeric: tabular-nums; }
.dims-table tfoot th { border-top: 2px solid var(--line, #e3e6ea); }
.dims-table.floors { margin-top: 8px; }
.dims-table .new-floor td { background: var(--accent-soft); }

/* PM04/G.15 Historic Unit Values, G.16 Unit History Summary */
.history-table { width: auto; max-width: 100%; }
.history-table th, .history-table td { padding: 4px 8px; }
.history-table caption { text-align: left; font-weight: 600; padding: 4px 0; }
.history-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.history-table tr.current td { background: var(--accent-soft); font-weight: 600; }
.history-table tbody.unit th { text-align: left; padding-top: 10px; border-top: 2px solid var(--line, #e3e6ea); }
.history-form, .history-delete { margin-top: 12px; }
.history-form input.sized, .history-delete input.sized, .history-filter input.sized { width: calc(var(--len) * 1ch + 18px); min-width: 0; max-width: 100%; }
.history-head { font-size: 1.05em; margin: 4px 0 8px; display: flex; gap: 12px; align-items: baseline; }
.history-filter { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 8px 0; }

/* PM04/G.17 Building Sums Insured */
.sums-table tr.sum td, .sums-table tfoot th { font-weight: 600; }
.sums-table th[scope=row] { text-align: left; }

/* PM04/G.19 Planning and Building Applications */
.app-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 24px; }
.app-form .field-no { display: inline-block; min-width: 2ch; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; }
.app-notes textarea { max-width: 100%; }
.app-notes { margin-top: 8px; }

/* PM171 Notes */
.notes-layout { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 8px; }
@media (max-width: 720px) { .notes-layout { grid-template-columns: 1fr; } }
.notes-headings ul { list-style: none; margin: 0; padding: 0; }
.notes-headings li { padding: 6px 8px; border-radius: 4px; display: flex; flex-direction: column; }
.notes-headings li.current { background: var(--accent-soft); font-weight: 600; }
/* Exactly 75 characters wide (PM171's line), so the soft wrap shows the lines as they'll be saved. */
.notes-text { width: calc(75ch + 16px + 2px + 17px); box-sizing: border-box; padding: 4px 8px; max-width: 100%; min-height: 20em; overflow-y: auto; scrollbar-gutter: stable; }

/* Headings: an administrator's mandatory tick */
.headings-mode .mandatory-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9em; white-space: nowrap; }
.headings-mode .mandatory-tick .changed-tag { color: var(--accent); font-size: 0.9em; }

/* Headings: an administrator's added fields */
.added-field-new, .added-field-remove { margin-top: 14px; }
.added-field-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.added-field-row label { display: inline-flex; gap: 6px; align-items: center; }
/* PM16: the lease history under the renewal form. */
.lease-history { margin-top: 18px; }
.lease-history h2 { font-size: 1em; margin: 0 0 6px; }
/* End of Day: the banner on every page while a run is active, and the run page. */
.eod-banner { margin: 0 0 12px; padding: 8px 12px; border: 1px solid #e5c76b; border-radius: var(--radius); background: #fff8e1; color: #5c4300; }
@media (prefers-color-scheme: dark) { .eod-banner { background: #3a3014; border-color: #7a6526; color: #ffe7a3; } }
.eod .eod-start { max-width: 760px; margin-bottom: 18px; }
.eod label.inline { font-weight: normal; }
.eod-run { font-size: 1.1em; margin: 18px 0 4px; }
.eod-status { padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); }
.eod-status.eod-completed { background: #dff3e4; color: #1d5b2c; }
.eod-status.eod-interrupted { background: #fdecea; color: #8a1c13; }
.eod-actions { display: flex; gap: 8px; margin: 6px 0 10px; }
.eod-actions form { display: inline; }
.eod-reports { margin: 4px 0 12px; padding-left: 18px; }
/* Notifications: the bell in the top bar, pop-ups, and the Notifications page. */
.topbar .bell { position: relative; display: inline-flex; align-items: center; }
.topbar .bell .ico { width: 20px; height: 20px; }
.bell-count { position: absolute; top: -4px; right: -8px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c62828; color: #fff; font-size: 0.72em; line-height: 18px; text-align: center; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast { display: block; padding: 10px 14px; border-radius: var(--radius); background: var(--card, #fff); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.15); text-decoration: none; }
.toast strong { display: block; }
.toast span { font-size: 0.9em; color: var(--muted); }
.toast.toast-warning { border-left-color: #c62828; }
.notes { list-style: none; margin: 0; padding: 0; }
.notes .note { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.notes .note.unread { background: var(--accent-soft); }
.notes .note.note-warning strong { color: #8a1c13; }

/* Customer Enquiry's account (SL08): the customer's facts beside what's outstanding. */
.account-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16em, 22em); gap: 16px 28px; align-items: start; margin: 8px 0 14px; }
.account-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.account-facts dt { color: var(--muted); }
.account-facts dd { margin: 0; }
.account-figures th { text-align: left; font-weight: normal; }
.invoice-detail { border: 1px solid var(--border, #d8dce6); border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
.invoice-detail h2 { font-size: 1.05em; margin: 4px 0; }
@media (max-width: 720px) { .account-head { grid-template-columns: 1fr; } }
.headings-mode .field.hidden-field .heading-input { opacity: 0.6; text-decoration: line-through; }
/* A PDF button in a list (an invoice's own PDF, opened in a pop-out window). */
.pdf-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 4px; vertical-align: middle; }
.pdf-button svg { width: 22px; height: 22px; }
.pdf-button:hover, .pdf-button:focus-visible { background: var(--hover, rgba(0,0,0,0.06)); }
/* A voided invoice in a ledger list: still shown, struck through. */
tr.voided td { color: var(--muted, #6b7280); text-decoration: line-through; }
tr.voided td:last-child, tr.voided td:nth-last-child(2) { text-decoration: none; }
/* Inv/Cr Entry: the header fields in a wrapping row, the line grid compact. */
.inv-entry .inv-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; border: 0; padding: 0; margin: 0 0 12px; }
.inv-entry .inv-head label { display: inline-flex; gap: 6px; align-items: center; }
.inv-entry .inv-cust { flex-basis: 100%; }
.inv-entry .inv-lines td { padding: 2px 4px; vertical-align: middle; }
.inv-entry .inv-lines input[type=date] { width: 9.5em; }
.inv-entry .line-note td { border-top: 0; padding-top: 0; }
.inv-entry .line-note .error { margin-right: 12px; }
.found-list { list-style: none; padding: 0; margin: 4px 0 12px; columns: 2; }
.inv-entry tbody.inv-line + tbody.inv-line tr:first-child td { border-top: 1px solid var(--border, #e3e6ea); }
.inv-entry .remove-line { padding: 0 8px; line-height: 1.6; }
.inv-entry .inv-cust .warn { color: var(--warn, #b45309); margin-left: 8px; }
/* Inv/Cr Entry: headed sections, labels over their boxes, the saved document's number. */
.inv-entry .inv-heading { font-size: 1.05em; margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border, #e3e6ea); }
.inv-entry .inv-fields { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; }
.inv-entry .fld { display: flex; flex-direction: column; gap: 3px; }
.inv-entry .fld > label { font-size: 0.85em; font-weight: 600; color: var(--muted, #5b6472); }
.inv-entry .fld-wide { flex: 1 1 320px; }
.inv-entry .inv-no { padding: 6px 0; }
.inv-entry .inv-lines thead th { position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }
.inv-entry .inv-totals table { width: auto; min-width: 420px; }
.inv-entry #control-check.ok { color: var(--ok, #1d7a46); }
.inv-entry .inv-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; margin: 8px 0 14px;
    border: 1px solid var(--ok, #1d7a46); border-left-width: 6px; border-radius: 6px; background: var(--ok-bg, #eef8f1); }
.inv-entry .inv-saved-label { font-weight: 600; }
.inv-entry .inv-saved-no { font-size: 1.6em; font-weight: 700; letter-spacing: 0.04em; }
.inv-entry .inv-saved .muted { flex-basis: 100%; }
.inv-entry .inline-icon { width: 18px; height: 18px; vertical-align: middle; }

/* Inv/Cr Entry: what's to put right before it can be saved - a red banner. */
.inv-entry .entry-errors { margin: 12px 0; padding: 10px 14px; border: 1px solid #c0392b; border-left-width: 6px; border-radius: 6px;
    background: #fdecea; color: #8b1c13; }
.inv-entry .entry-errors ul { margin: 6px 0 0; padding-left: 18px; }
.inv-entry .entry-errors li span { font-weight: 600; }
@media (prefers-color-scheme: dark) {
    .inv-entry .entry-errors { background: #3a1512; color: #f5b7b1; border-color: #e74c3c; }
}

/* Headings: the Mandatory and Hide ticks in two fixed columns at the end of each field's row. */
.headings-mode .field { align-items: center; }
.headings-mode .field-ticks { display: inline-grid; grid-template-columns: 8.5em 5em; align-items: center; justify-self: end; grid-column: -2 / -1; }
.headings-mode .field-ticks .tick-col { min-height: 1.6em; display: flex; align-items: center; }
.headings-mode .fixed-mandatory { color: var(--muted, #5b6472); }
.headings-mode .mandatory-tick .changed-tag { margin-left: 2px; font-weight: 700; }

/* Inv/Cr Entry: the screen in four panels - Document, Customer, Lines, VAT Breakdown. */
.inv-entry .inv-panel { border: 1px solid var(--border, #e3e6ea); border-radius: var(--radius, 8px); padding: 4px 16px 14px; margin: 0 0 14px;
    background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.inv-entry .inv-panel > .inv-heading { margin-top: 10px; }
.inv-entry .inv-panel .inv-totals table { margin-bottom: 4px; }