/* Accounting web: the pages built before UI-1, drawn with the OmniCore Royal tokens (css/themes, proposed ADR-61). The old variable
   names stay as aliases of the semantic tokens so the pages need no change; no color is written here (ColorLiteralGuardTests).
   The shell and the new components are in css/oc.css. */
[data-theme] {
    --bg: var(--oc-bg);
    --panel: var(--oc-surface);
    --text: var(--oc-ink);
    --muted: var(--oc-muted);
    --line: var(--oc-line);
    --accent: var(--oc-primary);
    --accent-text: var(--oc-on-primary);
    --danger: var(--oc-danger);
    --ok: var(--oc-ok);
    --warn: var(--oc-warn);
    --focus: var(--oc-focus);
}

h1 { font-size: 20px; font-weight: 800; margin: 0 0 .75rem; }
h2 { font-size: 14px; font-weight: 800; margin: 0 0 .5rem; }
.bare { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; }
.panel.inline, .toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.form-grid { display: grid; grid-template-columns: max-content minmax(12rem, 28rem); gap: .4rem .75rem; align-items: center; margin-bottom: .75rem; }
.form-grid > label { font-size: 12px; font-weight: 600; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 1rem; padding: .5rem 1rem 1rem; background: var(--panel); }
legend { padding: 0 .4rem; font-weight: 800; }

/* A field's state sets --oc-state-*: whatever selector drew the field, the state shows (oc.css .oc-date-warn; R13b-01). */
input:not([type=checkbox]):not([type=radio]), select, textarea {
    padding: .35rem .6rem; border: 1px solid var(--oc-state-border, var(--oc-field)); border-radius: 8px; background: var(--oc-state-bg, var(--panel)); color: var(--oc-state-ink, var(--text)); min-height: 34px;
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--oc-state-border, var(--accent)); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=number] { width: 4.5rem; }
.btn { min-height: 34px; padding: .3rem .9rem; border: 1px solid var(--oc-field); border-radius: 10px; background: var(--panel); color: var(--text); cursor: pointer; font-weight: 600; }
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--oc-primary-ink); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 700; }
.btn-primary:hover:not(:disabled) { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
/* UI-2.2 (A1): a destructive action is an outlined danger button, also on hover (it never turns into the primary color). */
.btn-danger, .btn-danger:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--oc-danger-soft); }
.btn-link { border: none; background: none; color: var(--oc-primary-ink); padding: .2rem .4rem; min-height: 0; }

/* No overflow clipping: the search lists of the voucher grid open over the rows below. */
.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); margin-bottom: 1rem; font-size: 13px; }
.grid th { background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; font-weight: 600; }
.grid th, .grid td { padding: .45rem .7rem; border-bottom: 1px solid var(--oc-rule); text-align: start; vertical-align: middle; }
.grid tbody tr:nth-child(even) td { background: var(--oc-zebra); }
.grid tbody tr:hover td { background: var(--oc-hover); }
.grid.compact td { padding: .25rem .5rem; }
.grid tbody tr[tabindex] { cursor: pointer; }
.grid tr.selected td { background: var(--oc-active-row); }
.grid tr.muted, .muted { color: var(--muted); }
.grid td.actions { white-space: nowrap; display: flex; gap: .25rem; }
.code { font-family: Consolas, monospace; }
.json { font-size: .8rem; white-space: pre-wrap; word-break: break-all; }

.split { display: grid; grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 1.1fr); gap: 1rem; align-items: start; }
.editor { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; position: sticky; top: .5rem; }
.level-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.chip { display: inline-flex; gap: .25rem; align-items: center; padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 999px; }
button.chip { background: var(--oc-surface); color: var(--oc-ink); cursor: pointer; }
.chip.active { background: var(--oc-primary-soft); color: var(--oc-primary-ink); border-color: var(--oc-primary); }

.badge { padding: .05rem .55rem; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.status-1 { color: var(--muted); }
.status-2 { color: var(--danger); border-color: var(--danger); }
.phase-0 { color: var(--warn); }
.phase-1 { color: var(--oc-primary-ink); }

.msg { padding: .55rem .8rem; border-radius: 10px; margin: 0 0 .75rem; }
/* UI-2.2 (A4): a message box without text takes no space. */
.msg:empty { display: none; }
.msg-error { background: var(--oc-danger-soft); color: var(--danger); }
.msg-ok { background: var(--oc-ok-soft); color: var(--ok); }
.msg-warning { background: var(--oc-warn-soft); color: var(--warn); }
.msg-warning ul { margin: .25rem 0 0; padding-inline-start: 1.25rem; }
.badge.inbox-warning { background: var(--oc-warn-soft); color: var(--warn); }
.hint { color: var(--muted); font-size: 12px; }
.cards { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.cards a { display: block; padding: 1rem 1.25rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }

.search-select { position: relative; }
.search-select input { width: 100%; }
.search-select .clear { position: absolute; inset-inline-end: .3rem; top: .35rem; border: none; background: none; cursor: pointer; color: var(--muted); }
.search-select .options { position: absolute; z-index: 10; inset-inline: 0; margin: .15rem 0 0; padding: 4px; list-style: none; max-height: 16rem; overflow-y: auto;
                          background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 24px var(--oc-shadow); }
.search-select .options li { padding: .35rem .6rem; display: flex; justify-content: space-between; gap: .5rem; cursor: pointer; border-radius: 6px; }
.search-select .options li.active { background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-weight: 700; }
.search-select .options li small { opacity: .75; }
.search-select .options li.hint { cursor: default; }

.login-card { width: min(24rem, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 1.5rem; box-shadow: 0 12px 32px var(--oc-shadow); }
.login-card form { display: grid; gap: .4rem; }
.login-card button { margin-top: .75rem; }
.validation-message { color: var(--danger); font-size: 12px; }

/* Vouchers (Increment 2) */
.voucher-fields { grid-template-columns: max-content minmax(10rem, 14rem) max-content minmax(10rem, 14rem) max-content minmax(14rem, 1fr); }
.voucher-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .25rem 0 0; }
.grid-scroll { overflow-x: auto; margin-bottom: 1rem; }
.voucher-grid { margin: 0; min-width: 72rem; }
.voucher-grid td { padding: .2rem .3rem; }
.voucher-grid td input:not([type=checkbox]) { width: 100%; }
.voucher-grid .w-account { width: 18rem; }
.voucher-grid .w-desc { width: 12rem; }
.voucher-grid .w-amount { width: 9rem; }
.voucher-grid .row-no { color: var(--muted); text-align: center; width: 2rem; }
.voucher-grid .na { color: var(--muted); padding-inline: .5rem; }
.voucher-grid tr.extras td { border-bottom: 1px solid var(--line); background: var(--oc-zebra); }
.voucher-grid tr.has-extras td { border-bottom: none; }
.extras-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.extras-row input { width: auto; }
.amount, input.amount { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
.total { font-weight: 800; }
.balanced { color: var(--ok); }
.unbalanced { color: var(--danger); font-weight: 800; }
.keys { margin-inline-start: 1rem; }
.voucher-actions .spacer { flex: 1; }
.vstatus-0 { color: var(--muted); }
.vstatus-1 { color: var(--warn); border-color: var(--warn); background: var(--oc-warn-soft); }
.vstatus-2 { color: var(--oc-info); border-color: var(--oc-info); background: var(--oc-info-soft); }
.vstatus-3 { color: var(--ok); border-color: var(--ok); background: var(--oc-ok-soft); }
.vstatus-4 { color: var(--danger); border-color: var(--danger); text-decoration: line-through; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.tab { padding: .4rem .9rem; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; background: none; cursor: pointer; }
.tab.active { background: var(--panel); border-color: var(--line); font-weight: 800; box-shadow: inset 0 2px 0 var(--accent); }

/* UI-3: the report framework (Components/Reports): the title row, one filter card, then the table, the only part that scrolls. Its header and
   total row stay pinned; the account groups are bands with their subtotals. Colours only from the theme tokens. */
.ocr { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.ocr-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; flex: none; }
.ocr-titles h1 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.ocr-subtitle { font-size: 12px; color: var(--oc-muted); }
.ocr-read { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--oc-muted); }
.ocr-messages { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ocr-messages:empty { display: none; }
.ocr-messages .msg, .ocr-messages .nonfinal-banner { margin: 0; max-width: none; }
/* UI-4 Part 0: one neutral line when an address part was no choice and the default view opened instead. */
.ocr-link-notice { margin: 0; padding: 4px 10px; font-size: 12px; color: var(--oc-muted); border-inline-start: 3px solid var(--warn); }
.ocr-filters { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; padding: 10px 14px; }
.ocr-field { display: flex; flex-direction: column; gap: 4px; }
.ocr-label { font-size: 11px; font-weight: 700; color: var(--oc-muted); }
.ocr-range { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--oc-field); border-radius: var(--oc-radius-sm);
             background: var(--oc-surface); }
.ocr-range .oc-input { width: 7.4em; height: 30px; padding: 0; border: 0; background: none; text-align: center; }
.ocr-to-word { color: var(--oc-muted); font-size: 12px; }
.ocr-pick .search-select { width: 14rem; }
.ocr-search { display: inline-flex; align-items: center; gap: 6px; color: var(--oc-muted); }
.ocr-search input { width: 10rem; height: 32px; }
.ocr-head .ocr-summary { display: none; align-self: center; margin-inline-start: 12px; }
@media (min-width: 1800px) { .ocr-head .ocr-summary { display: flex; } }
.ocr-more .ocr-inline { white-space: nowrap; }
.ocr-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.ocr-sum { display: flex; flex-direction: column; min-width: 6.5rem; padding: 4px 10px; border-radius: var(--oc-radius-sm); background: var(--oc-head-bg); }
.ocr-sum small { font-size: 11px; color: var(--oc-muted); }
.ocr-sum strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.ocr-sum:nth-child(-n+2) { background: var(--oc-primary-soft); }
.ocr-sum:nth-child(-n+2) small { color: var(--oc-primary-ink); }
.ocr-note { font-size: 12px; }
.ocr-more { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--oc-muted); }
.ocr-more:empty { display: none; }
.ocr-inline { display: inline-flex; align-items: center; gap: 6px; }
.ocr-inline .oc-input, .ocr-more .oc-input { height: 30px; }
.ocr-inline .search-select { width: 14rem; }
.ocr-path { margin: 0; }
/* UI-3.1: the card is one row (PM decision); the less used filters open under «فیلترهای بیشتر» and are chips while collapsed. A wrong field of an
   address shows its error under the field (R16 UI3-03). */
.ocr-more-toggle { display: inline-flex; align-items: center; gap: 4px; align-self: center; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ocr-more-chevron { display: inline-flex; transition: transform .15s; }
.ocr-more-chevron.is-open { transform: rotate(180deg); }
/* UI-3.2 (R16b UI3b-02): the chips are a row of their own under the card, only while a less used filter is on. Each names its filter (never
   shortened) and its value (the code first; beyond 18rem it ends in «…», whole in the tooltip). One line: what does not fit is behind
   «+N فیلتر دیگر» (oc-report.js fitChips). */
.ocr-fchips { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; padding: 0 14px; overflow: hidden; }
.ocr-fchip { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 12px;
             background: var(--oc-primary-soft); color: var(--oc-primary-ink); white-space: nowrap; }
.ocr-fchip[hidden] { display: none; }
.ocr-fchip-label { flex: none; font-weight: 700; }
.ocr-fchip-value { min-width: 0; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
.ocr-fchip-more { border: 1px dashed var(--oc-primary-ink); padding-inline: 10px; font-weight: 700; cursor: pointer; }
/* UI-3.1: the title row stays one line: the subtitle (the same filters as the card) ends in «…», whole in its tooltip. */
.ocr-head { flex-wrap: nowrap; }
.ocr-titles { flex: 1 1 auto; min-width: 0; }
.ocr-titles h1, .ocr-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocr-head > :not(.ocr-titles) { flex: none; }
@media (max-width: 1100px) { .ocr-head { flex-wrap: wrap; } }
.ocr-fchip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
                    background: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
.ocr-fchip-remove:hover, .ocr-fchip-remove:focus-visible { background: var(--oc-hover); }
.ocr-more { align-items: flex-end; padding: 0 14px; }
.ocr-context { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--oc-muted); }
.ocr-context .oc-input { height: 30px; }
.ocr-field-error { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 22rem; font-size: 11px; font-weight: 700; color: var(--danger); }
.vch-missing { max-width: 32rem; margin: 24px auto; padding: 20px 24px; text-align: center; }
.vch-missing h1 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.ocr-field:has(.ocr-field-error) .ocr-range, .ocr-field:has(.ocr-field-error) .search-select .oc-input { border-color: var(--danger); }
.ocr-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ocr-wait { padding: 24px; text-align: center; }
.ocr-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--oc-line); border-radius: var(--oc-radius); background: var(--oc-surface); }
.ocr-table { --ocr-row: 34px; width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ocr-table thead th { position: sticky; top: 0; z-index: 2; height: var(--ocr-row); padding: 0 10px; box-sizing: border-box; background: var(--oc-head-bg);
                      color: var(--oc-head-ink); font-size: 12px; font-weight: 700; text-align: start; white-space: nowrap; border-bottom: 1px solid var(--oc-line); }
.ocr-table thead tr.ocr-sub th { top: var(--ocr-row); }
.ocr-table th.ocr-group-head { text-align: center; border-inline-start: 1px solid var(--oc-rule); }
.ocr-table th.amount, .ocr-table td.amount { text-align: end; font-variant-numeric: tabular-nums; }
.ocr-table td { height: var(--ocr-row); padding: 0 10px; box-sizing: border-box; border-bottom: 1px solid var(--oc-rule); white-space: nowrap; }
/* UI-3.1 (R16 UI3-09): the code is the column the eye looks for (mockup): the row's own font and size, bold, in the accent token. */
.ocr-table td.code { font-family: inherit; font-size: inherit; color: var(--accent); font-weight: 800; }
.ocr-table tr.ocr-line:nth-child(even) td { background: var(--oc-zebra); }
.ocr-table tr.ocr-band td { background: var(--oc-group-bg); color: var(--oc-group-ink); font-weight: 800; }
.ocr-table tr.ocr-subtotal td { background: var(--oc-head-bg); font-weight: 700; }
.ocr-table tr.nonfinal-row td { color: var(--oc-warn); }
.ocr-table tr[data-row]:focus { outline: none; }
.ocr-table tr[data-row]:focus td { background: var(--oc-active-row); box-shadow: inset 0 1px 0 var(--oc-primary), inset 0 -1px 0 var(--oc-primary); }
.ocr-table tr.ocr-opens { cursor: pointer; }
.ocr-table tr.ocr-opens:hover td { background: var(--oc-hover); }
.ocr-table tr.ocr-ph td { color: var(--oc-faint); }
.ocr-table td.ocr-action { white-space: nowrap; }
.ocr-table td.ocr-action input { width: 8rem; height: 28px; }
.ocr-drill { color: inherit; text-decoration: none; }
.ocr-zero { color: var(--oc-zero); }
.ocr-table tfoot td { position: sticky; bottom: 0; z-index: 2; height: 44px; padding: 0 10px; background: var(--oc-side); color: var(--oc-side-ink); font-weight: 800;
                      border: 0; }
.ocr-count { margin-inline-end: 12px; font-size: 11px; font-weight: 400; color: var(--oc-side-muted); }
.ocr-chip { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px; padding: 2px 10px; border-radius: 999px; font-size: 11px; }
.ocr-chip--ok { background: var(--oc-ok); color: var(--oc-on-primary); }
.ocr-chip--danger { background: var(--oc-danger); color: var(--oc-on-primary); }
/* UI-3.2 (PM decision on R16 UI3-10): with a cost center filter the sides are not expected to be equal: the difference is neutral, with its note. */
.ocr-chip--neutral { background: var(--oc-head-bg); color: var(--oc-ink); border: 1px solid var(--oc-line); }
.ocr-balance-note { margin-inline-start: 8px; font-size: 12px; font-weight: 400; color: var(--oc-muted); }
/* On the total row's dark band: its own ink, as the account count. */
.ocr-table tfoot .ocr-balance-note { color: var(--oc-side-ink); }
.ocr-print { display: none; }
.nonfinal-chip { border-color: var(--warn); color: var(--warn); }
.nonfinal-banner { margin: .5rem auto 0; padding: .4rem .75rem; max-width: 40rem; border: 1px solid var(--warn); border-radius: 8px; color: var(--warn);
                   background: var(--oc-warn-soft); font-weight: 800; }
.nonfinal-watermark { display: none; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; margin-bottom: .5rem; }

/* UI-3 print (and PDF through the browser): A4, right to left, black on white (themes/_print.css), the heading over every page, «صفحه x از y» in
   the page margin. Wide tables print landscape. A book prints one book page per sheet; a row never splits across pages. */
@media print {
    @page { size: A4 portrait; margin: 12mm 10mm 16mm;
            @bottom-center { content: "صفحه " counter(page, persian) " از " counter(pages, persian); font-size: 9pt; } }
    @page wide { size: A4 landscape; }
    .no-print, .msg { display: none !important; }
    .ocr-print { display: block; direction: rtl; color: var(--oc-ink); }
    .ocr-print[data-orientation="landscape"] { page: wide; }
    .ocr-sheet { width: 100%; border-collapse: collapse; }
    .ocr-sheet > thead { display: table-header-group; }
    .ocr-sheet > thead td, .ocr-sheet > tbody > tr > td { padding: 0; border: 0; }
    .ocr-print-head { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--oc-line); }
    .ocr-print-line { display: flex; justify-content: space-between; font-size: 9pt; }
    .ocr-print-company { font-weight: 800; }
    .ocr-print-title { margin: 2px 0; font-size: 14pt; text-align: center; }
    .ocr-print-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; font-size: 9pt; color: var(--oc-muted); }
    .ocr-print-warning { margin: 2px 0; font-size: 9pt; font-weight: 700; text-align: center; }
    .ocr-page + .ocr-page { break-before: page; }
    .ocr-page-title { margin: 2px 0 4px; font-size: 9.5pt; text-align: end; }
    .ocr-ptable { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
    .ocr-ptable thead { display: table-header-group; }
    .ocr-ptable tfoot { display: table-row-group; }
    .ocr-ptable th, .ocr-ptable td { padding: 2px 4px; border: 1px solid var(--oc-line); text-align: start; }
    .ocr-ptable th.amount, .ocr-ptable td.amount { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .ocr-ptable tr { break-inside: avoid; }
    /* UI-3.1 (R16 UI3-06): a group or account band never ends a page; it goes with its first line. */
    .ocr-ptable tr.ocr-band { break-after: avoid; }
    .ocr-ptable tr.ocr-band td, .ocr-ptable tr.ocr-subtotal td, .ocr-ptable tr.ocr-ptotal td { background: var(--oc-group-bg); font-weight: 700; }
    .ocr-ptable tr.nonfinal-row td { color: var(--oc-ink); font-style: italic; }
    .ocr-ptable .ocr-zero { color: var(--oc-faint); }
    /* UI-3.2 (R16b UI3b-05): codes (the journal's «کد کل») print in the table's own ink and size, not the screen's code font. */
    .ocr-ptable th.code, .ocr-ptable td.code { font-family: inherit; font-size: inherit; color: var(--oc-ink); }
    .ocr-ptable a { color: inherit; text-decoration: none; }
    .ocr-print-balance { margin: 4px 0; font-size: 9pt; font-weight: 700; }
    .nonfinal-watermark { display: block; position: fixed; top: 40%; inset-inline: 0; text-align: center; font-size: 7rem; font-weight: bold;
                          color: var(--oc-print-watermark); transform: rotate(-20deg); pointer-events: none; z-index: 100; }
}

/* Increment 6: year-end closing checks and the printed legal books (ADR-44, ADR-45). */
.checks tr.ok .state { color: var(--ok); }
.checks tr.failed .state, .checks tr.failed .detail { color: var(--danger); }
.checks tr.warning .state, .checks tr.warning .detail { color: var(--warn); }

/* UI-3: the printed voucher (Components/Vouchers/VoucherPrint): only in print; the voucher page itself is not printed. */
.vpr { display: none; }
@media print {
    .vch.vch-printing > :not(.vpr) { display: none !important; }
    .vch.vch-printing { display: block; }
    .vpr { display: block; direction: rtl; color: var(--oc-ink); }
    .vpr-sheet { width: 100%; border-collapse: collapse; }
    .vpr-sheet > thead { display: table-header-group; }
    .vpr-sheet > thead td, .vpr-sheet > tbody > tr > td { padding: 0; border: 0; }
    .vpr-head { margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--oc-line); }
    .vpr-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin: 4px 0; font-size: 9.5pt; }
    .vpr-meta div { display: flex; gap: 4px; }
    .vpr-meta dt { color: var(--oc-muted); }
    .vpr-meta dd { margin: 0; font-weight: 700; }
    .vpr-desc { margin: 2px 0; font-size: 9.5pt; }
    .vpr-words { margin: 6px 0; font-size: 9.5pt; font-weight: 700; }
    .vpr-signs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; break-inside: avoid; }
    .vpr-sign { min-height: 30mm; padding: 6px; border: 1px solid var(--oc-line); font-size: 9pt; display: flex; flex-direction: column; gap: 2px; }
    .vpr-sign-title { font-weight: 800; }
    .vpr-sign-line { margin-top: auto; color: var(--oc-muted); border-top: 1px dotted var(--oc-line); padding-top: 2px; }
    .vpr-void { position: fixed; top: 38%; inset-inline: 0; text-align: center; font-size: 9rem; font-weight: 900; color: var(--oc-print-watermark);
                transform: rotate(-20deg); pointer-events: none; z-index: 100; }
}