/* OmniCore Royal (UI-1, proposed ADR-61): the shell and the base components. Colors only through the semantic tokens of the theme
   files (css/themes); this file and app.css never write a color (tests: ColorLiteralGuardTests). Sizes and type are here. */

@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --oc-font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    --oc-side-w: 216px;
    --oc-rail-w: 64px;
    --oc-top-h: 50px;
    --oc-fbar-h: 32px;
    --oc-row-h: 38px;
    --oc-radius: 12px;
    --oc-radius-sm: 8px;
    --oc-gap: 16px;
}

[data-density="comfortable"] { --oc-row-h: 46px; }
[data-rail="true"] { --oc-side-w: var(--oc-rail-w); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--oc-bg);
    color: var(--oc-ink);
    font: 400 14px/1.6 var(--oc-font);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; }
/* The shell puts the focus on a page's heading so the keyboard starts there; a heading is not a control. */
h1[tabindex="-1"]:focus-visible { outline: none; }
a { color: var(--oc-primary-ink); }
.oc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oc-num { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.oc-zero { color: var(--oc-zero); }
.oc-muted { color: var(--oc-muted); }

/* ---------- App shell: sidebar (start side), top bar, workspace, F-key bar ---------- */
.oc-app {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: var(--oc-side-w) minmax(0, 1fr);
    grid-template-rows: var(--oc-top-h) minmax(0, 1fr) var(--oc-fbar-h);
    grid-template-areas: "side top" "side main" "fbar fbar";
    min-width: 1280px;
    min-height: 640px;
}

.oc-side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px 12px;
    background: var(--oc-side);
    color: var(--oc-side-ink);
    color-scheme: dark;
    overflow: hidden;
}
.oc-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px 12px; text-decoration: none; color: inherit; }
.oc-brand-mark {
    flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--oc-primary); color: var(--oc-on-primary); font-weight: 800; font-size: 17px;
}
.oc-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.oc-brand-text b { font-size: 15px; font-weight: 800; color: var(--oc-side-ink); }
.oc-brand-text small { font-size: 11px; color: var(--oc-side-muted); }

.sidenav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; scrollbar-width: thin; }
.oc-nav-item {
    position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 10px;
    color: var(--oc-side-ink); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.oc-nav-item:hover { background: var(--oc-side-hover); }
.oc-nav-item.is-active { background: var(--oc-side-active); font-weight: 800; }
.oc-nav-item svg { flex: none; width: 19px; height: 19px; }
.oc-nav-item .oc-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.oc-nav-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
    background: var(--oc-danger); color: var(--oc-on-primary); font-size: 11px; font-weight: 800;
}
/* UI-4: the review count is gold (the accent), the inbox's failed count stays the danger badge. */
.oc-nav-badge--gold { background: var(--oc-accent); color: var(--oc-on-accent); }
.oc-nav-sub { display: flex; flex-direction: column; margin: 2px 0 6px; }
.oc-nav-sub a {
    display: block; padding: 5px 12px; padding-inline-start: 41px; border-radius: 8px; font-size: 13px;
    color: var(--oc-side-muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oc-nav-sub a:hover { background: var(--oc-side-hover); color: var(--oc-side-ink); }
.oc-nav-sub a.is-active { color: var(--oc-side-ink); font-weight: 700; }

.oc-company {
    margin-top: 6px; padding: 10px 12px; border: 1px solid var(--oc-side-line); border-radius: var(--oc-radius);
    display: flex; flex-direction: column; gap: 2px;
}
.oc-company form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oc-company select {
    flex: 1 1 100%; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--oc-side-ink); font-weight: 800; cursor: pointer;
}
.oc-company .oc-company-title { font-weight: 800; }
.oc-company small { color: var(--oc-side-muted); font-size: 12px; }
.oc-company button {
    border: 1px solid var(--oc-side-line); background: transparent; color: var(--oc-side-ink); border-radius: 6px; font-size: 11px;
    padding: 1px 6px; cursor: pointer;
}
.oc-company a { color: var(--oc-side-muted); text-decoration: none; }
.oc-company button.oc-year-item-side {
    display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 6px; padding: 3px 6px; text-align: start; font-size: 12px;
}
.oc-year-item-side small { color: var(--oc-side-muted); }
.oc-year-item-side b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-year-item-side svg { flex: none; width: 14px; height: 14px; }
.oc-company button.oc-year-item-side.is-other { border-color: var(--oc-accent); color: var(--oc-accent); }
.oc-company button.oc-year-item-side.is-other small { color: var(--oc-accent); }

[data-rail="true"] .oc-brand-text, [data-rail="true"] .oc-nav-label, [data-rail="true"] .oc-nav-sub,
[data-rail="true"] .oc-company { display: none; }
[data-rail="true"] .oc-nav-item { justify-content: center; padding: 0; }
[data-rail="true"] .oc-nav-badge { position: absolute; top: 2px; inset-inline-end: 4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

.oc-top {
    grid-area: top; display: flex; align-items: stretch; gap: 14px; padding: 0 16px 0 18px; min-width: 0;
    background: var(--oc-surface); border-bottom: 1px solid var(--oc-line);
}
.oc-tabstrip { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; }
.oc-tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.oc-tabs::-webkit-scrollbar { display: none; }
.oc-tabs-more { position: relative; flex: none; display: flex; align-items: center; }
.oc-tabmenu { width: 280px; max-height: 60vh; overflow-y: auto; gap: 2px; padding: 6px; }
.oc-tabmenu-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
    background: none; cursor: pointer; text-align: start;
}
.oc-tabmenu-item span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-tabmenu-item:hover { background: var(--oc-hover); }
.oc-tabmenu-item.is-active { background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-weight: 700; }
.oc-tab {
    position: relative; flex: 0 1 auto; min-width: 110px; display: flex; align-items: center; gap: 6px; height: 40px; max-width: 210px; padding: 0 12px;
    border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; color: var(--oc-muted); cursor: pointer;
    background: transparent; white-space: nowrap;
}
.oc-tab:hover { color: var(--oc-ink); background: var(--oc-hover); }
.oc-tab.is-active {
    color: var(--oc-ink); background: var(--oc-bg); border-color: var(--oc-line); font-weight: 800;
    box-shadow: inset 0 3px 0 var(--oc-primary); margin-bottom: -1px; height: 41px;
}
.oc-tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font-weight: inherit; }
.oc-tab-close {
    flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 5px; padding: 0;
    background: none; color: var(--oc-muted); cursor: pointer; font-size: 14px; line-height: 1;
}
.oc-tab-close:hover { color: var(--oc-ink); background: var(--oc-line); }
.oc-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--oc-accent); }

.oc-top-end { display: flex; align-items: center; gap: 12px; flex: none; }
.oc-year-chip {
    display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--oc-line);
    background: var(--oc-bg); color: var(--oc-muted); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.oc-year-chip svg { flex: none; width: 15px; height: 15px; }
.oc-year-chip:hover { border-color: var(--oc-primary); }
.oc-year-chip.is-other { background: var(--oc-accent-soft); color: var(--oc-accent-ink); border-color: var(--oc-accent); }
.oc-search {
    display: flex; align-items: center; gap: 10px; width: 320px; height: 34px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--oc-line); background: var(--oc-bg); color: var(--oc-muted); cursor: pointer; text-align: start;
}
.oc-search span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oc-search svg { flex: none; width: 17px; height: 17px; }
.oc-icon-btn {
    position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px;
    background: none; color: var(--oc-muted); cursor: pointer;
}
.oc-icon-btn:hover { background: var(--oc-hover); color: var(--oc-ink); }
.oc-icon-btn svg { width: 19px; height: 19px; }
.oc-icon-btn .oc-alert { position: absolute; top: 6px; inset-inline-end: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--oc-danger); }
.oc-user { position: relative; display: flex; align-items: center; gap: 10px; padding-inline-start: 12px; border-inline-start: 1px solid var(--oc-line); }
.oc-user-btn { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 10px; text-align: start; }
.oc-user-btn:hover { background: var(--oc-hover); }
.oc-avatar {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-weight: 800;
}
.oc-user-text { display: flex; flex-direction: column; line-height: 1.3; }
.oc-user-text .user { font-weight: 800; font-size: 13px; }
.oc-user-text small { color: var(--oc-muted); font-size: 11px; }

.oc-backdrop { position: fixed; inset: 0; z-index: 39; }
.oc-popover {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40; min-width: 260px; padding: 12px;
    background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-radius);
    box-shadow: 0 12px 32px var(--oc-shadow); display: flex; flex-direction: column; gap: 10px;
}
.oc-popover-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.oc-popover hr { border: 0; border-top: 1px solid var(--oc-line); margin: 2px 0; width: 100%; }
.oc-popover form { margin: 0; }

.content.oc-main { grid-area: main; position: relative; overflow: hidden; min-width: 0; padding: 0; }
.oc-pane { position: absolute; inset: 0; overflow: auto; padding: 16px 20px; }
.oc-pane.oc-fixed { overflow: hidden; display: flex; flex-direction: column; }

.oc-fbar {
    grid-area: fbar; display: flex; align-items: stretch; overflow: hidden; font-size: 12px;
    background: var(--oc-side); color: var(--oc-side-ink); border-top: 1px solid var(--oc-side-line);
}
.oc-fkey {
    display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 0; border-inline-end: 1px solid var(--oc-side-line);
    background: none; color: var(--oc-side-ink); cursor: pointer; white-space: nowrap;
}
.oc-fkey:hover { background: var(--oc-side-hover); }
.oc-fkey kbd { direction: ltr; font: 700 12px/1 var(--oc-font); color: var(--oc-accent); }

/* KeyTips: Alt held for 400 ms shows the letter of every menu item and keyed button. */
[data-keytip] { position: relative; }
.oc-keytips [data-keytip]::after {
    content: attr(data-keytip); position: absolute; top: 50%; inset-inline-end: 8px; transform: translateY(-50%); z-index: 5;
    padding: 1px 6px; border-radius: 5px; background: var(--oc-accent); color: var(--oc-on-accent);
    font: 800 11px/1.5 var(--oc-font); direction: ltr; box-shadow: 0 1px 3px var(--oc-shadow); pointer-events: none;
}
/* UI-2.2 (A3): a field's key (Alt+1 … Alt+6 on the voucher header) is a KeyTip too: only while Alt is held. Its place is kept, so nothing moves. */
.oc-kbd.oc-keytip { visibility: hidden; }
.oc-keytips .oc-kbd.oc-keytip { visibility: visible; }

/* ---------- Page frame ---------- */
.oc-page { display: flex; flex-direction: column; gap: var(--oc-gap); height: 100%; min-height: 0; }
.oc-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex: none; }
.oc-page-head h1 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; }
.oc-page-head .oc-sub { color: var(--oc-muted); font-size: 12px; }
.oc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oc-section-title { margin: 0; font-size: 14px; font-weight: 800; }
.oc-label { font-size: 12px; font-weight: 600; color: var(--oc-muted); }
.oc-total { font-size: 18px; font-weight: 800; }

/* ---------- Components ---------- */
.oc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 10px;
    border: 1px solid transparent; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; background: none;
}
/* UI-2.2 (A2): a button that cannot be used yet is clearly off: dimmed, the not-allowed pointer; aria-disabled keeps its tooltip and lets a click say why. */
.oc-btn:disabled, .oc-btn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.oc-btn--primary { background: var(--oc-primary); color: var(--oc-on-primary); }
.oc-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--oc-primary) 88%, var(--oc-ink)); }
.oc-btn--accent { background: var(--oc-accent); color: var(--oc-on-accent); }
.oc-btn--outline { background: var(--oc-surface); border-color: var(--oc-field); color: var(--oc-ink); }
.oc-btn--outline:hover:not(:disabled) { border-color: var(--oc-primary); color: var(--oc-primary-ink); }
.oc-btn--danger-text { color: var(--oc-danger); padding: 0 10px; }
.oc-btn--danger-text:hover:not(:disabled) { background: var(--oc-danger-soft); }
/* UI-2.2 (A1): a destructive action on a page: danger border and text, no fill, the height of the other buttons. */
.oc-btn--danger-outline { background: var(--oc-surface); border-color: var(--oc-danger); color: var(--oc-danger); }
.oc-btn--danger-outline:hover:not(:disabled) { background: var(--oc-danger-soft); }
/* UI-2.2 (A2): the confirmation of a destructive action in a dialog: filled. */
.oc-btn--danger { background: var(--oc-danger); border-color: var(--oc-danger); color: var(--oc-surface); }
.oc-btn--danger:hover:not(:disabled):not([aria-disabled=true]) { background: color-mix(in srgb, var(--oc-danger) 88%, var(--oc-ink)); }
/* UI-2.2 (A2): the line under a required field of a dialog: a hint, a danger message only after an attempt without it. */
.oc-req-hint { display: block; font-size: 12px; line-height: 16px; color: var(--oc-muted); }
.oc-req-hint.is-error { color: var(--oc-danger); font-weight: 700; }
.oc-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; }
.oc-btn--block { width: 100%; }

.oc-kbd {
    display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; direction: ltr; white-space: nowrap; flex: none;
    font: 600 11px/1 var(--oc-font); border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.oc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oc-field > label, .oc-field > .oc-label { font-size: 12px; font-weight: 600; color: var(--oc-muted); }
.oc-field .oc-hint { font-size: 12px; color: var(--oc-muted); }
.oc-field .oc-error { font-size: 12px; color: var(--oc-danger); }
.oc-input, .oc-select {
    height: 36px; width: 100%; padding: 0 10px; border: 1px solid var(--oc-field); border-radius: var(--oc-radius-sm);
    background: var(--oc-surface); color: var(--oc-ink);
}
.oc-input:hover, .oc-select:hover { border-color: color-mix(in srgb, var(--oc-field) 50%, var(--oc-ink)); }
.oc-input:focus, .oc-select:focus { border-color: var(--oc-primary); outline: 2px solid var(--oc-focus); outline-offset: 0; }
.oc-input[aria-invalid="true"] { border-color: var(--oc-danger); }
.oc-input.oc-num { text-align: left; }
/* UI-4 Part 0: the placeholder (the Jalali date field's «۱۴۰۵/۰۱/۰۱») is the muted token at full strength in every theme and mode, not the
   browser's own grey, which is below AA on the dark surface. ThemeContrastTests holds the token pair; ReportFilterUiTests measures the field. */
.oc-input::placeholder, .oc-select::placeholder { color: var(--oc-muted); opacity: 1; }

.oc-lookup { position: relative; }
.oc-lookup-list {
    position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
    max-height: 280px; overflow-y: auto; background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-radius-sm);
    box-shadow: 0 10px 24px var(--oc-shadow);
}
.oc-lookup-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.oc-lookup-list li[aria-selected="true"] { background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-weight: 700; }
.oc-lookup-list li small { color: var(--oc-muted); }
.oc-lookup-empty { padding: 8px 10px; color: var(--oc-muted); }
.oc-lookup-foot {
    display: flex; gap: 12px; padding: 6px 10px 2px; margin-top: 4px; border-top: 1px solid var(--oc-rule); color: var(--oc-muted); font-size: 11px;
    position: sticky; bottom: -4px; background: var(--oc-surface);
}

.oc-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--oc-head-bg); color: var(--oc-muted);
}
.oc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.oc-pill--ok { background: var(--oc-ok-soft); color: var(--oc-ok); }
.oc-pill--info { background: var(--oc-info-soft); color: var(--oc-info); }
.oc-pill--warn { background: var(--oc-warn-soft); color: var(--oc-warn); }
.oc-pill--danger { background: var(--oc-danger-soft); color: var(--oc-danger); }

.oc-card {
    background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: 14px; min-width: 0;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--oc-shadow) 35%, transparent);
}
.oc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; }
.oc-card-head h2 { margin: 0; font-size: 14px; font-weight: 800; }
.oc-card-head a { font-size: 12px; font-weight: 700; color: var(--oc-primary-ink); text-decoration: none; }
.oc-card-body { padding: 0 16px 16px; }

.oc-stat-link { display: block; color: inherit; text-decoration: none; border-radius: 14px; }
.oc-stat-link:hover { background: var(--oc-hover); }
.oc-stat { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.oc-stat-icon {
    flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--oc-primary-soft); color: var(--oc-primary-ink);
}
.oc-stat-icon svg { width: 20px; height: 20px; }
.oc-stat--accent .oc-stat-icon { background: var(--oc-accent-soft); color: var(--oc-accent-ink); }
.oc-stat--danger .oc-stat-icon { background: var(--oc-danger-soft); color: var(--oc-danger); }
.oc-stat--info .oc-stat-icon { background: var(--oc-info-soft); color: var(--oc-info); }
.oc-stat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.oc-stat-label { font-size: 12px; font-weight: 700; color: var(--oc-muted); }
.oc-stat-value { display: flex; align-items: baseline; gap: 6px; }
.oc-stat-value b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.oc-stat-value span { font-size: 12px; color: var(--oc-muted); }
.oc-stat-note { font-size: 11px; font-weight: 600; color: var(--oc-muted); }
.oc-stat-note.is-ok { color: var(--oc-ok); }
.oc-stat-note.is-warn { color: var(--oc-warn); }
.oc-stat-note.is-danger { color: var(--oc-danger); }
.oc-stat-basis { color: var(--oc-accent-ink); }
.oc-stat-final { color: var(--oc-ink); font-variant-numeric: tabular-nums; }

.oc-seg { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--oc-field); border-radius: var(--oc-radius-sm); background: var(--oc-bg); }
.oc-seg button { border: 0; background: none; padding: 3px 12px; border-radius: 6px; cursor: pointer; color: var(--oc-muted); font-size: 13px; }
.oc-seg button[aria-pressed="true"] {
    background: var(--oc-surface); color: var(--oc-primary-ink); font-weight: 700; box-shadow: 0 1px 2px var(--oc-shadow);
}

.oc-table-wrap { overflow: auto; min-height: 0; flex: 1; }
.oc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.oc-table th {
    position: sticky; top: 0; z-index: 1; height: 38px; padding: 0 12px; text-align: start; white-space: nowrap;
    background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--oc-line);
}
.oc-table td { height: var(--oc-row-h); padding: 0 12px; border-bottom: 1px solid var(--oc-rule); white-space: nowrap; }
.oc-table th.oc-num, .oc-table td.oc-num { text-align: left; }
.oc-table td.oc-wrap { white-space: normal; }
.oc-table tbody tr:nth-child(even) td { background: var(--oc-zebra); }
.oc-table tbody tr[tabindex] { cursor: pointer; }
.oc-table tbody tr:hover td { background: var(--oc-hover); }
.oc-table tbody tr.is-active td { background: var(--oc-active-row); }
.oc-table tbody tr.is-active td:first-child { box-shadow: inset -3px 0 0 var(--oc-primary); }
.oc-table tbody tr:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: -2px; }
.oc-table tr.oc-band td { background: var(--oc-group-bg); color: var(--oc-group-ink); font-weight: 800; }
.oc-table tfoot td {
    position: sticky; bottom: 0; z-index: 1; height: 40px; padding: 0 12px; background: var(--oc-head-bg); font-weight: 800;
    border-top: 1px solid var(--oc-line);
}
.oc-table .oc-strong { font-weight: 800; color: var(--oc-primary-ink); }

.oc-toasts { position: fixed; bottom: calc(var(--oc-fbar-h) + 16px); inset-inline-start: calc(var(--oc-side-w) + 20px); z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.oc-toast {
    display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 10px 14px; border-radius: 10px;
    background: var(--oc-surface); color: var(--oc-ink); border: 1px solid var(--oc-line); border-inline-start: 4px solid var(--oc-info);
    box-shadow: 0 10px 24px var(--oc-shadow);
}
.oc-toast--ok { border-inline-start-color: var(--oc-ok); }
.oc-toast--warn { border-inline-start-color: var(--oc-warn); }
.oc-toast--danger { border-inline-start-color: var(--oc-danger); }
.oc-toast span { flex: 1; }
.oc-toast button { border: 0; background: none; color: var(--oc-muted); cursor: pointer; }

.oc-overlay {
    position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center; padding-top: 12vh;
    background: color-mix(in srgb, var(--oc-ink) 38%, transparent);
}
.oc-dialog {
    width: min(460px, calc(100vw - 32px)); padding: 20px; border-radius: 16px; background: var(--oc-surface); color: var(--oc-ink);
    border: 1px solid var(--oc-line); box-shadow: 0 24px 48px var(--oc-shadow); display: flex; flex-direction: column; gap: 14px;
}
.oc-dialog h2 { margin: 0; font-size: 16px; font-weight: 800; }
.oc-dialog p { margin: 0; color: var(--oc-muted); }
.oc-dialog .oc-actions { justify-content: flex-end; }
.oc-dialog--wide { width: min(640px, calc(100vw - 32px)); }

.oc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--oc-muted); text-align: center; }
.oc-empty svg { width: 36px; height: 36px; color: var(--oc-faint); }
.oc-empty b { color: var(--oc-ink); font-size: 14px; }

/* Command palette (Ctrl+K) and help (F1) */
.oc-palette { width: min(620px, calc(100vw - 32px)); padding: 0; gap: 0; overflow: hidden; }
.oc-palette-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--oc-line); }
.oc-palette-input svg { flex: none; width: 18px; height: 18px; color: var(--oc-muted); }
.oc-palette-input input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15px; }
.oc-palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 460px); overflow-y: auto; }
.oc-palette-list li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.oc-palette-icon { flex: none; width: 18px; height: 18px; color: var(--oc-muted); }
.oc-palette-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-palette-list li small { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--oc-muted); margin-inline-start: auto; }
.oc-palette-list li[aria-selected="true"] .oc-palette-icon { color: inherit; }
.oc-palette-list li[aria-selected="true"] { background: var(--oc-primary-soft); color: var(--oc-primary-ink); }
.oc-help-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; max-height: 60vh; overflow-y: auto; }
.oc-help-list dt { text-align: left; direction: ltr; }
.oc-help-list dd { margin: 0; }
.oc-help-group { grid-column: 1 / -1; margin-top: 8px; font-weight: 800; color: var(--oc-primary-ink); }

/* A proposed date that is not today (UI-1.2) */
.oc-date-warn { --oc-state-bg: var(--oc-accent-soft); --oc-state-ink: var(--oc-accent-ink); --oc-state-border: var(--oc-accent); }
.oc-date-hint { color: var(--oc-accent-ink); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* The working fiscal year (Alt+Y) */
.oc-year-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.oc-year-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--oc-line); border-radius: 10px;
    background: var(--oc-surface); cursor: pointer; text-align: start;
}
.oc-year-item small { flex: 1; color: var(--oc-muted); font-size: 12px; }
.oc-year-item:hover { background: var(--oc-hover); }
.oc-year-item.is-active { border-color: var(--oc-primary); background: var(--oc-primary-soft); }

/* The lost connection (Blazor sets the components-reconnect-* class) */
.oc-reconnect { display: none; position: fixed; inset: 0; z-index: 100; place-items: start center; padding-top: 12vh; background: color-mix(in srgb, var(--oc-ink) 38%, transparent); }
.oc-reconnect.components-reconnect-show, .oc-reconnect.components-reconnect-retrying, .oc-reconnect.components-reconnect-paused,
.oc-reconnect.components-reconnect-failed, .oc-reconnect.components-reconnect-rejected, .oc-reconnect.components-reconnect-resume-failed { display: grid; }
.oc-reconnect .oc-reconnect-lost { display: none; }
.oc-reconnect.components-reconnect-failed .oc-reconnect-lost, .oc-reconnect.components-reconnect-rejected .oc-reconnect-lost,
.oc-reconnect.components-reconnect-resume-failed .oc-reconnect-lost { display: revert; }
.oc-reconnect.components-reconnect-failed .oc-actions.oc-reconnect-lost, .oc-reconnect.components-reconnect-rejected .oc-actions.oc-reconnect-lost,
.oc-reconnect.components-reconnect-resume-failed .oc-actions.oc-reconnect-lost { display: flex; }
.oc-reconnect.components-reconnect-failed .oc-reconnect-wait, .oc-reconnect.components-reconnect-rejected .oc-reconnect-wait,
.oc-reconnect.components-reconnect-resume-failed .oc-reconnect-wait { display: none; }

/* Theme preview tiles (settings) */
.oc-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.oc-theme {
    display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--oc-radius); cursor: pointer; text-align: start;
    border: 2px solid var(--oc-line); background: var(--oc-surface); color: var(--oc-ink);
}
.oc-theme[aria-pressed="true"] { border-color: var(--oc-primary); }
.oc-theme-sample { display: grid; grid-template-columns: 34px 1fr; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--oc-line); background: var(--oc-bg); }
.oc-theme-sample .s-side { background: var(--oc-side); }
.oc-theme-sample .s-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.oc-theme-sample .s-bar { height: 8px; border-radius: 4px; background: var(--oc-line); }
.oc-theme-sample .s-row { display: flex; gap: 6px; }
.oc-theme-sample .s-btn { width: 40px; height: 14px; border-radius: 4px; background: var(--oc-primary); }
.oc-theme-sample .s-acc { width: 22px; height: 14px; border-radius: 4px; background: var(--oc-accent); }
.oc-theme-sample .s-ok { width: 18px; height: 14px; border-radius: 999px; background: var(--oc-ok-soft); }
.oc-preview { border: 1px solid var(--oc-line); border-radius: var(--oc-radius); overflow: hidden; background: var(--oc-bg); color: var(--oc-ink); }

/* ---------- Settings: theme preview ---------- */
.oc-settings { overflow: visible; height: auto; }
.oc-preview-title { margin: 18px 0 8px; }
.oc-preview-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oc-preview-shell { display: grid; grid-template-columns: 96px 1fr; min-height: 170px; }
.oc-preview-side { background: var(--oc-side); color: var(--oc-side-ink); display: flex; flex-direction: column; gap: 4px; padding: 8px; font-size: 11px; }
.oc-preview-side .oc-brand-mark { width: 24px; height: 24px; font-size: 12px; border-radius: 7px; margin-bottom: 4px; }
.oc-preview-side span:not(.oc-brand-mark) { padding: 3px 6px; border-radius: 6px; }
.oc-preview-side .is-active { background: var(--oc-side-active); font-weight: 800; }
.oc-preview-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.oc-preview-head { display: flex; align-items: center; justify-content: space-between; }
.oc-preview-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.oc-preview-tile { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--oc-surface); border: 1px solid var(--oc-line); font-size: 11px; }
.oc-preview-tile small { color: var(--oc-muted); }
.oc-preview-rows { display: flex; flex-direction: column; border: 1px solid var(--oc-line); border-radius: 8px; overflow: hidden; background: var(--oc-surface); font-size: 11px; }
.oc-preview-rows span { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid var(--oc-rule); }
.oc-preview-rows span:nth-child(even) { background: var(--oc-zebra); }
.oc-preview-rows b { color: var(--oc-primary-ink); }
.oc-preview-rows .oc-pill { margin-inline-start: auto; height: 18px; font-size: 10px; }
.oc-preview-fbar { background: var(--oc-side); color: var(--oc-side-ink); font-size: 11px; padding: 4px 10px; display: flex; gap: 6px; align-items: center; }
.oc-preview-fbar kbd { color: var(--oc-accent); font: 700 11px var(--oc-font); }
.oc-settings-actions { margin-top: 14px; }
.oc-settings-links { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ---------- Dev gallery (/accounting/_ui) ---------- */
.oc-gallery { height: auto; }
.oc-gallery-panel { padding: 16px; border-radius: 14px; background: var(--oc-bg); color: var(--oc-ink); border: 1px solid var(--oc-line); }
.oc-gallery-panel > h2 { margin-bottom: 12px; }
.oc-showcase { display: flex; flex-direction: column; gap: 14px; }
.oc-showcase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.oc-showcase-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.oc-showcase-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oc-showcase-table .oc-table-wrap { max-height: 240px; }

/* ---------- Home (میزکار) ---------- */
.oc-small { font-size: 12px; }
.oc-home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; flex: none; }
.oc-home-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.oc-home-main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.oc-home-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.oc-home-recent { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.oc-home-recent .oc-table-wrap { border-top: 1px solid var(--oc-line); }
.oc-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.oc-chart-head h2 { margin: 0; font-size: 14px; font-weight: 800; }
.oc-chart-head h2 span { font-weight: 400; font-size: 12px; }
.oc-home-chart .oc-card-head { padding-bottom: 0; }
.oc-home-chart .oc-card-body { padding-bottom: 8px; }
.oc-legend { display: flex; gap: 14px; font-size: 12px; color: var(--oc-muted); }
.oc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.oc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.oc-legend-in::before { background: var(--oc-chart-in); }
.oc-legend-out::before { background: var(--oc-chart-out); }
.oc-chart { display: block; width: 100%; height: 190px; direction: ltr; font-family: var(--oc-font); }
.oc-chart-grid { stroke: var(--oc-rule); stroke-width: 1; }
.oc-chart-baseline { stroke: var(--oc-line); stroke-width: 1; }
.oc-chart-axis, .oc-chart-label { fill: var(--oc-muted); font-size: 11px; }
.oc-chart-value { fill: var(--oc-ink); font-size: 11px; font-weight: 800; }
.oc-bar-in { fill: var(--oc-chart-in); }
.oc-bar-out { fill: var(--oc-chart-out); }
.oc-chart-hit { fill: transparent; }
.oc-chart-month:hover .oc-chart-hit { fill: var(--oc-hover); }

.oc-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.oc-task { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--oc-rule); border-inline-start: 3px solid var(--oc-line); }
.oc-task--ok { border-inline-start-color: var(--oc-ok); }
.oc-task--danger { border-inline-start-color: var(--oc-danger); }
.oc-task--warn { border-inline-start-color: var(--oc-warn); }
.oc-task-text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.oc-task-text a, .oc-task-text > span { color: var(--oc-ink); font-weight: 700; text-decoration: none; font-size: 13px; }
.oc-task-text a:hover { color: var(--oc-primary-ink); }
.oc-task-text small { color: var(--oc-muted); font-size: 11px; }
.oc-task.is-done .oc-task-text a, .oc-task.is-done .oc-task-text > span { color: var(--oc-zero); text-decoration: line-through; }
.oc-task input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--oc-primary); }
.oc-task-add { display: flex; gap: 6px; margin-top: 10px; }
.oc-task-add .oc-input { height: 30px; font-size: 13px; }

.oc-period-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.oc-period {
    height: 30px; display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden;
    background: var(--oc-bg); color: var(--oc-muted); border: 1px solid var(--oc-rule);
}
.oc-period.is-closed { background: var(--oc-primary); color: var(--oc-on-primary); border-color: var(--oc-primary); }
.oc-period.is-current { box-shadow: 0 0 0 2px var(--oc-primary); color: var(--oc-primary-ink); background: var(--oc-surface); }

.oc-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oc-quick-tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border-radius: 10px; text-decoration: none;
    border: 1px solid var(--oc-line); color: var(--oc-ink); font-size: 12px; font-weight: 700; text-align: center;
}
.oc-quick-tile:hover { border-color: var(--oc-primary); background: var(--oc-hover); }
.oc-quick-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--oc-primary-soft); color: var(--oc-primary-ink); }
.oc-quick-icon svg { width: 18px; height: 18px; }
.oc-quick-icon--accent { background: var(--oc-accent-soft); color: var(--oc-accent-ink); }
.oc-quick-icon--info { background: var(--oc-info-soft); color: var(--oc-info); }
.oc-quick-icon--danger { background: var(--oc-danger-soft); color: var(--oc-danger); }

/* UI-1.1: short windows (1366×768): the list that scrolls keeps its room. */
@media (max-height: 800px) {
    .oc-pane { padding: 10px 16px; }
    .oc-page { gap: 10px; }
    .oc-home-tiles, .oc-home-grid, .oc-home-main, .oc-home-side { gap: 10px; }
    .oc-chart { height: 110px; }
    .oc-card-head { padding: 8px 14px 6px; }
    .oc-page-head h1 { font-size: 18px; line-height: 1.3; }
}
@media (max-width: 1500px) {
    .oc-search { width: 200px; }
    .oc-search span { display: none; }
    .oc-search .oc-kbd { margin-inline-start: auto; }
}

@media print {
    .oc-app { position: static; display: block; min-width: 0; min-height: 0; }
    .oc-side, .oc-top, .oc-fbar, .oc-toasts, .oc-overlay { display: none !important; }
    .content.oc-main { overflow: visible; }
    .oc-pane { position: static; overflow: visible; padding: 0; }
    body { background: var(--oc-surface); }
}

/* ---------- UI-2: the voucher page. Only the lines grid scrolls. ---------- */
.vch { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.vch-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: none; }
.vch-title h1 { margin: 0; font-size: 17px; font-weight: 800; }
.vch-crumb { display: inline-flex; gap: 6px; font-size: 12px; color: var(--oc-muted); }
.vch-crumb a { color: inherit; text-decoration: none; }
.vch-note { font-size: 12px; color: var(--oc-muted); }
.vch-autosave { font-size: 11px; color: var(--oc-muted); }
.vch-spacer { flex: 1; }
.vch-title .oc-kbd { margin-inline-start: 6px; }
.vch-noyear, .vch-restore, .vch > .msg { flex: none; margin: 0; }
.vch-restore { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--oc-accent-soft); color: var(--oc-accent-ink); font-size: 13px; }
.vch-restore-warn { font-weight: 700; }
.voucher-source, .voucher-warnings { flex: none; margin: 0; }

.vch-header { flex: none; display: grid; grid-template-columns: 110px 130px 130px minmax(200px, 1fr) 90px 110px; gap: 4px 10px; padding: 8px 12px; align-items: start; }
.vch-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vch-field label { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; font-weight: 700; color: var(--oc-muted); white-space: nowrap; }
.vch-field label .oc-kbd { font-size: 9px; padding: 0 3px; }
.vch-field .oc-input { height: 34px; width: 100%; }
.vch-field input[readonly] { background: var(--oc-head-bg); color: var(--oc-muted); }
.vch-field .oc-date-hint, .vch-field-error { display: block; font-size: 11px; line-height: 14px; }
.vch-field-error { color: var(--oc-danger); }

.vch-gridscroll { flex: 1; min-height: 80px; overflow: auto; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-surface); }
.voucher-grid.vch-grid { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.vch-c-no { width: 44px; } .vch-c-code { width: 96px; } .vch-c-title { width: 16%; } .vch-c-detail { width: 15%; } .vch-c-center { width: 11%; }
.vch-c-amount { width: 118px; } .vch-c-ref { width: 84px; } .vch-c-more { width: 30px; }
/* UI-2.1 (PM decision 9): a row is 34px in the compact density (the default) and 42px in the comfortable one, its bottom rule included. */
.vch-gridscroll { --vch-row-h: 34px; }
[data-density="comfortable"] .vch-gridscroll { --vch-row-h: 42px; }
.vch-grid thead th { position: sticky; top: 0; z-index: 2; height: 30px; padding: 0 6px; background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; font-weight: 700; text-align: start; border-block-end: 1px solid var(--oc-rule); border-inline-end: 1px solid var(--oc-line); }
/* UI-2.2 (UI2b-04): a row's state is a token on the row (zebra, then the row in hand) that its cells draw; a cell's own state, the error mark,
   is set on the cell and so always wins over the row's, on odd and even rows alike. */
.vch-grid tbody tr { --vch-row-bg: transparent; }
.vch-grid tbody tr:nth-child(even) { --vch-row-bg: var(--oc-zebra); }
.vch-grid tbody tr.vch-row:focus-within { --vch-row-bg: var(--oc-active-row); }
.voucher-grid.vch-grid td { height: calc(var(--vch-row-h) - 1px); padding: 0; vertical-align: middle; border-block-end: 1px solid var(--oc-line); border-inline-end: 1px solid var(--oc-line); background: var(--vch-row-bg); }
.vch-no { text-align: center; color: var(--oc-muted); font-size: 12px; position: relative; }
/* The selector outweighs the general input rule of app.css: a cell is a cell of a sheet, not a boxed field. */
.vch-grid input.vch-cell:not([type=checkbox]) { display: block; width: 100%; height: calc(var(--vch-row-h) - 1px); min-height: 0; padding: 0 6px; border: 0; border-radius: 0; background: transparent; color: var(--oc-ink); font: inherit; outline: none; }
.vch-cell::placeholder { color: var(--oc-muted); opacity: .55; }
.vch-cell:disabled { color: var(--oc-ink); opacity: 1; }
.vch-grid input.vch-cell:not([type=checkbox]):focus { box-shadow: inset 0 0 0 2px var(--oc-primary); background: var(--oc-surface); }
.vch-amount { text-align: right; font-variant-numeric: tabular-nums; }
.vch-amount--debit:not(:placeholder-shown) { color: var(--oc-debit-ink); }
.vch-amount--credit:not(:placeholder-shown) { color: var(--oc-credit-ink); }
.vch-account-title { padding: 0 6px !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--oc-muted); }
.vch-na { display: block; text-align: center; color: var(--oc-muted); opacity: .5; }
.vch-more { text-align: center; }
.vch-more-btn { width: 100%; height: calc(var(--vch-row-h) - 1px); border: 0; background: transparent; color: var(--oc-muted); cursor: pointer; font: inherit; }
.vch-row:focus-within .vch-no { box-shadow: inset -3px 0 0 var(--oc-primary); }
.voucher-grid.vch-grid tr.vch-row--error td.vch-no { box-shadow: inset -3px 0 0 var(--oc-danger); color: var(--oc-danger); background: var(--oc-danger-soft); font-weight: 700; }
/* UI2-10: an error row is told by a mark too, not by color alone. */
.vch-no-mark { margin-inline-start: 2px; color: var(--oc-danger); font-weight: 700; }
/* UI2-04: the focus waits here while a row command is on its way; it is never seen or clicked. */
.vch-hold { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.vch-restore--changed { flex-wrap: wrap; background: var(--oc-warn-soft); color: var(--oc-ink); }
.vch-restore-compare { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; width: 100%; }
.vch-restore-compare dt { font-weight: 700; }
.vch-restore-compare dd { margin: 0; }
.vch-filler td { color: var(--oc-muted); }
.vch-zero { text-align: right; padding-inline: 6px !important; opacity: .4; }
.vch-extras-row { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px; font-size: 12px; }
.vch-extras-row label { display: inline-flex; align-items: center; gap: 4px; }
.vch-grid .vch-extras-row input.vch-cell:not([type=checkbox]) { width: auto; border: 1px solid var(--oc-line); border-radius: 4px; height: 26px; }

.vch-list { position: fixed; z-index: 60; width: 340px; max-height: 300px; display: flex; flex-direction: column; background: var(--oc-surface); border: 1px solid var(--oc-field); border-radius: 8px; box-shadow: var(--oc-shadow-lg, 0 8px 24px var(--oc-rule)); overflow: hidden; font-size: 13px; }
.vch-list[hidden] { display: none; }
.vch-list ul { list-style: none; margin: 0; padding: 4px; overflow: auto; flex: 1; }
.vch-list li[role=option] { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.vch-list li[aria-selected=true] { background: var(--oc-active-row); box-shadow: inset 0 0 0 1px var(--oc-primary); }
.vch-option-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vch-option-code { color: var(--oc-muted); font-size: 12px; }
.vch-list li small { color: var(--oc-accent-ink); font-size: 11px; white-space: nowrap; }
.vch-list-head { padding: 5px 10px; background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 11px; font-weight: 700; }
.vch-list-empty { padding: 8px; color: var(--oc-muted); }
.vch-list-foot { padding: 4px 10px; border-block-start: 1px solid var(--oc-line); color: var(--oc-muted); font-size: 11px; }

.vch-totals { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 8px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-surface); }
.vch-total { display: flex; flex-direction: column; min-width: 130px; padding: 3px 10px; border-radius: 6px; font-size: 11px; }
.vch-total strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.vch-total--debit { background: var(--oc-debit-bg); color: var(--oc-debit-ink); }
.vch-total--credit { background: var(--oc-credit-bg); color: var(--oc-credit-ink); }
.vch-diff { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 3px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; }
.vch-diff small { font-weight: 400; font-size: 11px; }
.vch-diff--ok { background: var(--oc-ok-soft); color: var(--oc-ok); }
.vch-diff--open { background: var(--oc-accent-soft); color: var(--oc-accent-ink); }
.vch-errors { height: 30px; padding: 0 10px; border: 1px solid var(--oc-danger); border-radius: 6px; background: var(--oc-danger-soft); color: var(--oc-danger); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.vch-rowmsg { font-size: 12px; color: var(--oc-danger); }
.vch-position { font-size: 12px; color: var(--oc-muted); }
.vch-position strong { color: var(--oc-ink); font-variant-numeric: tabular-nums; }
.vch-drawers { flex: none; display: flex; gap: 8px; }
.vch-drawers:empty { display: none; }

.vch-drawer-overlay { justify-content: flex-start; align-items: stretch; padding: 0; }
.vch-drawer { width: min(560px, 90vw); height: 100%; max-height: none; border-radius: 0; overflow: auto; }
.vch-menu { width: 240px; gap: 4px; }
.vch-menu-item { width: 100%; justify-content: flex-start; text-decoration: none; }
.vch-tree { list-style: none; margin: 0; padding: 4px; max-height: 50vh; overflow: auto; font-size: 13px; }
.vch-tree li { padding: 4px 8px; border-radius: 5px; }
.vch-tree-group { color: var(--oc-muted); font-weight: 700; }
.vch-tree-post { cursor: pointer; }
.vch-tree li[aria-selected=true] { background: var(--oc-active-row); box-shadow: inset 0 0 0 1px var(--oc-primary); }
.vch-info dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.vch-info dt { color: var(--oc-muted); }
.vch-info dd { margin: 0; }
.oc-help-note { color: var(--oc-danger); font-weight: 700; }
.oc-year-readonly { font-size: 10px; color: var(--oc-muted); }

/* ---------- UI-2: the voucher list ---------- */
.vchl { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.vchl-filters { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; padding: 8px 12px; }
.vchl-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 700; color: var(--oc-muted); }
.vchl-filters .oc-input { height: 32px; width: 96px; }
.vchl-grow { flex: 1; min-width: 120px; }
.vchl-grow .oc-input { width: 100%; }
.vchl-status { display: inline-flex; border: 1px solid var(--oc-field); border-radius: 7px; overflow: hidden; height: 32px; }
.vchl-seg { padding: 0 10px; border: 0; border-inline-end: 1px solid var(--oc-line); background: var(--oc-surface); color: var(--oc-ink); font: inherit; font-size: 12px; cursor: pointer; }
.vchl-seg:last-child { border-inline-end: 0; }
.vchl-seg[aria-pressed=true] { background: var(--oc-primary); color: var(--oc-on-primary); }
.vchl-scroll { flex: 1; min-height: 80px; overflow: auto; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-surface); }
.vchl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.vchl-table th { position: sticky; top: 0; z-index: 1; height: 30px; padding: 0 8px; background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; text-align: start; border-block-end: 1px solid var(--oc-rule); }
.vchl-table td { height: 30px; padding: 0 8px; border-block-end: 1px solid var(--oc-line); white-space: nowrap; }
.vchl-table tbody tr:nth-child(even) td { background: var(--oc-zebra); }
.vchl-table tbody tr:focus { outline: none; }
.vchl-table tbody tr:focus td { background: var(--oc-active-row); }
.vchl-table tbody tr:focus td:first-child { box-shadow: inset -3px 0 0 var(--oc-primary); }
.vchl-table a { color: var(--oc-primary-ink); font-weight: 700; text-decoration: none; }
.vchl-table .muted td { color: var(--oc-muted); }
.vchl-desc { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vchl-table .vchl-amount { text-align: end; font-variant-numeric: tabular-nums; }
.vchl-table .vchl-date { text-align: right; }
.vchl-final, .moved-from { color: var(--oc-muted); font-size: 11px; }
.vchl-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-head-bg); font-size: 13px; }
/* ---- UI-4: the review cartable (docs/accounting/ui/mockups/UI-4/Review-*.png; ADR-65). Only the list and the preview scroll. Colours: tokens only. ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rv { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.rv-head { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rv-head h1 { margin: 0; font-size: 20px; font-weight: 800; margin-inline-end: 8px; }
.rv-head .oc-kbd { margin-inline-start: 6px; }
.rv-filter button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-weight: 600; }
.rv-filter button[aria-pressed="true"] .rv-count { background: var(--oc-on-primary); color: var(--oc-primary-ink); }
.rv-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--oc-rule); color: var(--oc-muted); font-size: 11px; font-weight: 800; text-align: center; }
.rv > .msg { flex: none; margin: 0; }
.rv-failures ul { margin: 4px 0 0; padding-inline-start: 18px; }
.rv-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 4fr) minmax(0, 6fr); gap: 10px; }
.rv-list, .rv-preview { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.rv-tools { flex: none; display: flex; gap: 8px; padding: 10px; border-block-end: 1px solid var(--oc-line); }
.rv-search { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--oc-muted); }
.rv-search .oc-input { height: 32px; }
.rv-preparer { width: auto; min-width: 130px; height: 32px; }
.rv-scroll { flex: 1; min-height: 0; overflow: auto; }
.rv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rv-row td { padding: 8px 10px; border-block-end: 1px solid var(--oc-line); vertical-align: top; }
.rv-row { cursor: pointer; }
.rv-row:hover td { background: var(--oc-hover); }
.rv-row:focus { outline: none; }
.rv-row.is-selected td { background: var(--oc-active-row); }
.rv-row.is-current td { background: var(--oc-active-row); }
.rv-row.is-current td:last-child { box-shadow: inset 3px 0 0 var(--oc-primary); }
.rv-check-cell { width: 30px; padding-inline-end: 0 !important; }
.rv-check-cell input { width: 17px; height: 17px; accent-color: var(--oc-primary); }
.rv-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rv-no { flex: none; color: var(--oc-primary-ink); font-weight: 800; text-decoration: none; }
.rv-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28em; }
.rv-meta { color: var(--oc-muted); font-size: 11px; }
.rv-reason { color: var(--oc-danger); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28em; }
.rv-side { width: 1%; white-space: nowrap; text-align: end; }
.rv-amount { display: block; font-variant-numeric: tabular-nums; font-weight: 700; }
.rv-age { color: var(--oc-muted); font-size: 11px; font-weight: 700; }
.rv-age.is-old { color: var(--oc-warn); }
.rv-none td { padding: 24px 10px; text-align: center; }
.rv-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-block-start: 1px solid var(--oc-line); background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; }
.rv-empty { margin: auto; padding: 24px; }
.rv-pv-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 0; }
.rv-pv-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.rv-open { display: inline-flex; align-items: center; gap: 6px; color: var(--oc-muted); font-size: 12px; text-decoration: none; }
.rv-pv-meta { flex: none; padding: 2px 14px 0; color: var(--oc-muted); font-size: 12px; }
.rv-pv-desc { flex: none; margin: 4px 14px 8px; font-size: 13px; }
.rv-pv-returned { flex: none; margin: 0 14px 8px; padding: 6px 10px; border-radius: 8px; background: var(--oc-danger-soft); color: var(--oc-danger); font-size: 12px; font-weight: 700; }
.rv-pv-scroll { flex: 1; min-height: 60px; overflow: auto; border-block: 1px solid var(--oc-line); }
.rv-lines { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rv-lines th { position: sticky; top: 0; padding: 6px 10px; background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; text-align: start; }
.rv-lines td { padding: 7px 10px; border-block-end: 1px solid var(--oc-line); }
.rv-lines tbody tr:nth-child(even) td { background: var(--oc-zebra); }
.rv-code { color: var(--oc-primary-ink); font-weight: 700; }
.rv-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-total td { position: sticky; bottom: 0; background: var(--oc-head-bg); font-weight: 800; }
.rv-pv-bottom { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 10px 14px 12px; max-height: 40%; overflow: auto; }
.rv-checks-box h3, .rv-note-box label { margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--oc-muted); display: block; }
.rv-note-box label small { font-weight: 400; }
.rv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.rv-check { display: flex; align-items: flex-start; gap: 8px; }
.rv-check-icon { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; }
.rv-check--ok .rv-check-icon { background: var(--oc-ok-soft); color: var(--oc-ok); }
.rv-check--warning .rv-check-icon { background: var(--oc-warn-soft); color: var(--oc-warn); }
.rv-check--error .rv-check-icon { background: var(--oc-danger-soft); color: var(--oc-danger); }
.rv-check--error { color: var(--oc-danger); font-weight: 700; }
.rv-note { width: 100%; height: auto; min-height: 70px; padding: 8px 10px; resize: vertical; }
.rv-return-dialog p { margin: 0 0 10px; font-size: 13px; }
@media (max-width: 1100px) { .rv-body { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); } }

/* ---- UI-4: the inbox (docs/accounting/ui/mockups/UI-4/Inbox-*.png). The list and the detail column scroll; colours: tokens only. ---- */
.ib { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.ib-head { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ib-head h1 { margin: 0; font-size: 20px; font-weight: 800; margin-inline-end: 8px; }
.ib-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-weight: 600; }
.ib-tab[aria-pressed="true"] .rv-count { background: var(--oc-surface); color: var(--oc-primary-ink); }
.ib-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--oc-muted); }
.ib-dot--failed { background: var(--oc-danger); }
.ib-dot--pending { background: var(--oc-warn); }
.ib-dot--posted { background: var(--oc-ok); }
.ib-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--oc-field); border-radius: 999px; background: var(--oc-surface); color: var(--oc-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.ib-chip span { color: var(--oc-muted); font-size: 11px; }
.ib-chip[aria-pressed="true"] { background: var(--oc-primary-soft); border-color: var(--oc-primary); color: var(--oc-primary-ink); font-weight: 800; }
.ib > .msg { flex: none; margin: 0; }
.ib-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 6fr); gap: 10px; }
.ib-list { display: flex; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.ib-table th { position: sticky; top: 0; z-index: 1; padding: 7px 10px; background: var(--oc-head-bg); color: var(--oc-head-ink); font-size: 12px; text-align: start; }
.ib-table .ib-num { text-align: end; }
.ib-module { white-space: nowrap; color: var(--oc-muted); font-weight: 700; }
.ib-title, .ib-open-link { font-weight: 800; color: var(--oc-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24em; }
.ib-open-link { color: var(--oc-primary-ink); }
.ib-state { width: 1%; white-space: nowrap; }
.ib-detail { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.ib-empty { padding: 24px; text-align: center; }
.ib-card { padding: 14px 16px; }
.ib-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ib-card-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.ib-card-head h3, .ib-history h3 { margin: 0; font-size: 14px; font-weight: 800; }
.ib-card .oc-kbd { margin-inline-start: 6px; }
.ib-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 10px; }
.ib-facts div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ib-facts dt { color: var(--oc-muted); font-size: 11.5px; }
.ib-facts dd { margin: 0; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ib-error { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--oc-danger-soft); color: var(--oc-ink); font-size: 13px; line-height: 1.7; }
.ib-error p { margin: 0 0 4px; }
.ib-error-icon { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--oc-danger); color: var(--oc-surface); font-weight: 800; }
.ib-tech { margin-top: 4px; font-size: 12px; color: var(--oc-muted); }
.ib-tech pre { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
.ib-fix { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.ib-created { margin: 10px 0 0; }
.ib-lines td { vertical-align: top; }
.ib-line--failing td { background: var(--oc-danger-soft) !important; }
.ib-line--failing td:first-child { box-shadow: inset -3px 0 0 var(--oc-danger); }
.ib-missing { color: var(--oc-danger); font-weight: 800; }
.ib-history-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ib-history-list li { display: flex; gap: 14px; padding: 6px 0; border-block-end: 1px solid var(--oc-line); font-size: 12.5px; }
.ib-history-list time { flex: none; color: var(--oc-muted); font-variant-numeric: tabular-nums; min-width: 8.5em; }
.ib-newdetail-dialog label { display: block; margin-block: 8px 3px; font-size: 12px; font-weight: 700; color: var(--oc-muted); }
.ib-newdetail-dialog p, .ib-ignore-dialog p { margin: 0 0 6px; font-size: 13px; }
@media (max-width: 1100px) { .ib-body { grid-template-columns: minmax(0, 1fr); } .ib-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* UI-4: chart of accounts (tree + form). Colours only through theme tokens. */
.cod { display: flex; flex-direction: column; gap: 10px; }
.cod-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cod-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.cod-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cod-treecard { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cod-treetools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cod-treetools .rv-search { flex: 1 1 180px; }
.cod-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--oc-muted); }
.cod-legend-title { font-weight: 700; }
.cod-unit { font-size: 11.5px; color: var(--oc-muted); }
.cod-treefoot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--oc-muted); }
.cod-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cod-form { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cod-formhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cod-formhead h2 { margin: 0; font-size: 17px; font-weight: 800; }
.cod-crumbs { display: flex; gap: 4px; flex-wrap: wrap; }
.cod-fields { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px 10px; align-items: center; border: 0; margin: 0; padding: 0; min-width: 0; }
.cod-fields > label, .cod-label { font-size: 12px; font-weight: 700; color: var(--oc-muted); }
.cod-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cod-codeinput { display: flex; align-items: center; gap: 4px; }
.cod-codeprefix { color: var(--oc-muted); font-variant-numeric: tabular-nums; }
.cod-lockedfield { display: flex; align-items: center; gap: 8px; }
.cod-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--oc-muted); }
.cod-why { color: var(--oc-muted); font-size: 12px; grid-column: 2; }
.cod-groups { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cod-groups-title { font-size: 12px; color: var(--oc-muted); }
.cod-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-size: 12px; }
.cod-chip button { all: unset; cursor: pointer; display: inline-grid; place-items: center; }
.cod-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cod-advanced > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--oc-muted); margin-bottom: 8px; }
.cod-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cod-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cod-stat { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cod-stat small { color: var(--oc-muted); font-size: 11.5px; }
.cod-stat strong { font-size: 15px; }
.cod-stat span { font-size: 12px; color: var(--oc-muted); overflow-wrap: anywhere; }
.cod-note { padding: 10px 12px; font-size: 12.5px; line-height: 1.8; color: var(--oc-muted); }
.cod-note strong { display: block; color: var(--oc-ink); }
.cod-empty, .cod-embedded { padding: 12px; }
.cod-embedded { padding: 0; }

.ct-tree { border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-surface); overflow: hidden; }
.ct-tree:focus-within { outline: 2px solid var(--oc-focus); outline-offset: 1px; }
.ct-scroll { height: min(62vh, 560px); overflow-y: auto; overflow-x: hidden; }
.ct-row { display: flex; align-items: center; gap: 6px; height: 40px; box-sizing: border-box; padding-inline: 8px; cursor: pointer; border-block-end: 1px solid var(--oc-line); color: var(--oc-ink); outline: none; }
.ct-row:hover { background: var(--oc-hover); }
.ct-row.is-selected { background: var(--oc-active-row); box-shadow: inset 3px 0 0 var(--oc-primary); }
.ct-row:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: -2px; }
.ct-row.is-inactive { opacity: .6; }
.ct-indent { flex: none; width: calc(var(--lvl, 0) * 18px); }
.ct-arrow, .ct-arrow-gap { flex: none; width: 22px; height: 22px; }
.ct-arrow { all: unset; box-sizing: border-box; width: 22px; height: 22px; display: inline-grid; place-items: center; cursor: pointer; border-radius: 6px; color: var(--oc-muted); transition: transform .12s; }
.ct-arrow:hover { background: var(--oc-hover); }
.ct-arrow.is-open { transform: rotate(-90deg); }
.ct-icon { flex: none; color: var(--oc-muted); }
.ct-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; border: 1px solid var(--oc-line); background: var(--oc-surface); color: var(--oc-ink); }
button.ct-chip { cursor: pointer; font-family: inherit; }
.ct-chip--group { background: var(--oc-primary-soft); color: var(--oc-primary-ink); }
.ct-chip--ledger { background: var(--oc-info-soft); color: var(--oc-ink); }
.ct-chip--subsidiary { background: var(--oc-accent-soft); color: var(--oc-accent-ink); }
.ct-chip--detail { background: var(--oc-zebra); color: var(--oc-muted); }
.ct-chip.is-active { box-shadow: 0 0 0 2px var(--oc-primary); }
.ct-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-kind-group > .ct-title { font-weight: 800; }
.ct-pill, .ct-tag { flex: none; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--oc-zebra); color: var(--oc-muted); }
.ct-cat-asset .ct-pill { background: var(--oc-cat-asset-soft); color: var(--oc-cat-asset); }
.ct-cat-liability .ct-pill { background: var(--oc-cat-liability-soft); color: var(--oc-cat-liability); }
.ct-cat-equity .ct-pill { background: var(--oc-cat-equity-soft); color: var(--oc-cat-equity); }
.ct-cat-revenue .ct-pill { background: var(--oc-cat-revenue-soft); color: var(--oc-cat-revenue); }
.ct-cat-expense .ct-pill { background: var(--oc-cat-expense-soft); color: var(--oc-cat-expense); }
.ct-cat-asset.ct-kind-group > .ct-icon { color: var(--oc-cat-asset); }
.ct-cat-liability.ct-kind-group > .ct-icon { color: var(--oc-cat-liability); }
.ct-cat-equity.ct-kind-group > .ct-icon { color: var(--oc-cat-equity); }
.ct-cat-revenue.ct-kind-group > .ct-icon { color: var(--oc-cat-revenue); }
.ct-cat-expense.ct-kind-group > .ct-icon { color: var(--oc-cat-expense); }
.ct-balance { flex: none; min-width: 7.5em; display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.ct-balance.is-pending { min-height: 1em; border-radius: 4px; background: var(--oc-zebra); opacity: .6; }
.ct-zero { color: var(--oc-zero); }
.ct-side { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 4px; }
.ct-side--debit { background: var(--oc-debit-bg); color: var(--oc-debit-ink); }
.ct-side--credit { background: var(--oc-credit-bg); color: var(--oc-credit-ink); }
.ct-share { flex: none; width: 52px; height: 6px; border-radius: 3px; background: var(--oc-line); position: relative; overflow: hidden; }
.ct-share::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--share); background: var(--oc-primary); }
@media (max-width: 1100px) { .cod-body { grid-template-columns: minmax(0, 1fr); } .cod-stats { grid-template-columns: minmax(0, 1fr); } }
/* UI-4: periods and year-end (Periods-*.png). Colours only through theme tokens; the next period to close has the accent ring. */
.per { display: flex; flex-direction: column; gap: 12px; }
.per-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.per-head h1 { margin: 0; font-size: 20px; font-weight: 800; }
.per-years { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.per-year { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--oc-line); background: var(--oc-surface); color: var(--oc-ink); font-family: inherit; cursor: pointer; }
.per-year small { color: var(--oc-muted); font-size: 11px; }
.per-year[aria-pressed="true"] { border-color: var(--oc-primary); background: var(--oc-primary-soft); color: var(--oc-primary-ink); }
.per-year-code { font-weight: 800; }
.per-range { margin: 0; color: var(--oc-muted); font-size: 13px; }
.per-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; outline: none; }
.per-cards:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 3px; border-radius: 12px; }
.per-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--oc-line); background: var(--oc-surface); cursor: pointer; min-width: 0; }
.per-card header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.per-card.is-selected { border-color: var(--oc-primary); box-shadow: 0 0 0 1px var(--oc-primary); }
.per-card.is-next { box-shadow: 0 0 0 2px var(--oc-accent); border-color: var(--oc-accent); }
.per-card.is-next.is-selected { box-shadow: 0 0 0 2px var(--oc-accent), 0 0 0 4px var(--oc-primary); }
.per-card--closed, .per-card--locked { background: var(--oc-zebra); }
.per-dates { margin: 0; font-size: 12px; color: var(--oc-muted); }
.per-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; }
.per-counts div { display: flex; flex-direction: column; align-items: center; }
.per-counts dt { font-size: 10.5px; color: var(--oc-muted); }
.per-counts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.per-blocker { margin: 0; padding: 4px 8px; border-radius: 8px; background: var(--oc-warn-soft); color: var(--oc-ink); font-size: 12px; }
.per-card footer { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.per-hint { margin: 0; color: var(--oc-muted); font-size: 12px; }
.per-steps { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.per-steps-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.per-steps-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.per-flag { background: var(--oc-warn-soft); color: var(--oc-ink); }
.per-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.per-step { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--oc-line); }
.per-step-no { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--oc-zebra); color: var(--oc-muted); font-weight: 800; font-size: 13px; }
.per-step--done .per-step-no { background: var(--oc-ok); color: var(--oc-on-primary); }
.per-step--current { border-color: var(--oc-accent); }
.per-step--current .per-step-no { background: var(--oc-accent); color: var(--oc-on-accent); }
.per-step--failed, .per-step--blocked { border-color: var(--oc-danger); }
.per-step--failed .per-step-no, .per-step--blocked .per-step-no { background: var(--oc-danger); color: var(--oc-surface); }
.per-step-detail { margin: 2px 0 0; font-size: 12px; color: var(--oc-muted); overflow-wrap: anywhere; }
.per-reopen-dialog label { display: block; margin-block: 8px 3px; font-size: 12px; font-weight: 700; color: var(--oc-muted); }
@media (max-width: 1100px) { .per-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* UI-4: settings (Settings-*.png): the sections on the side, the main part beside it. The six sections that wait for the next phase are plain text, never links. */
.set-body { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 14px; align-items: start; }
.set-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-surface); }
.set-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--oc-ink); font-family: inherit; font-size: 13.5px; text-align: start; }
button.set-nav-item { cursor: pointer; }
button.set-nav-item:hover { background: var(--oc-hover); }
.set-nav-item.is-active { background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-weight: 800; }
.set-nav-item.is-disabled { color: var(--oc-muted); cursor: default; }
.set-nav-item kbd { font-size: 11px; color: var(--oc-muted); }
.set-soon { font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: var(--oc-zebra); color: var(--oc-muted); }
.set-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.set-prefs { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.set-keys-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.set-keys-head .rv-search { flex: 1 1 220px; }
.set-keys { display: flex; flex-direction: column; gap: 14px; }
.set-keys-group h3 { margin: 0 0 6px; font-size: 14px; font-weight: 800; }
.set-keys-table td, .set-keys-table th { padding: 5px 10px; text-align: start; }
.set-keys-table kbd { font-family: inherit; font-size: 12px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--oc-line); background: var(--oc-zebra); }
@media (max-width: 1000px) { .set-body { grid-template-columns: minmax(0, 1fr); } }
@media print { html.is-printing-keys body * { visibility: hidden; } html.is-printing-keys .set-keys, html.is-printing-keys .set-keys * { visibility: visible; } html.is-printing-keys .set-keys { position: absolute; inset: 0 0 auto 0; } }
/* UI-4.1: the review page's range chip (a month card's link) and the notice for a range that does not read. */
.rv-range-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--oc-primary); background: var(--oc-primary-soft); color: var(--oc-primary-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rv-range-chip:hover { background: var(--oc-hover); }
.rv-range-chip:focus-visible { outline: 2px solid var(--oc-focus); outline-offset: 2px; }
/* UI-4.1: periods as in Periods-*.png — the month cards beside a fixed 380px side column (the year-end steps) that scrolls on its own. */
.per-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.per-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.per-summary { padding: 10px 14px; }
.per-summary-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; font-size: 13px; color: var(--oc-muted); }
.per-summary-line strong, .per-summary-line b { color: var(--oc-ink); }
.per-summary-line strong { font-size: 15px; font-weight: 800; }
.per-lastclose { margin: 4px 0 0; font-size: 12.5px; color: var(--oc-muted); }
.per-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.per-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.per-summary-text { margin: 0; font-size: 13px; font-weight: 700; }
.per-card.is-current:not(.is-next) { border-color: var(--oc-info); }
.per-card.is-future { border-style: dashed; background: var(--oc-zebra); color: var(--oc-muted); }
.per-card.is-future .per-summary-text { font-weight: 400; }
.per-side { position: sticky; top: 8px; max-height: calc(100vh - 150px); overflow-y: auto; }
.per-steps-note, .per-prereq { margin: 0; font-size: 12.5px; color: var(--oc-muted); line-height: 1.8; }
.per-start { width: 100%; }
.per-start[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 1400px) { .per-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .per-layout { grid-template-columns: minmax(0, 1fr); } .per-side { position: static; max-height: none; } .per-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* UI-4.1: the chart tree as in Coding-*.png. A group row is tinted with its category (--oc-cat-*-soft), has a 4px side bar in the category colour, 42px height, a bold 15px title,
   a filled number chip and the category pill; every group after the first has a 4px gap above (a transparent border, so the row stays one box). The selected row wins over the tint. */
.ct-cat-asset { --cat: var(--oc-cat-asset); --cat-soft: var(--oc-cat-asset-soft); }
.ct-cat-liability { --cat: var(--oc-cat-liability); --cat-soft: var(--oc-cat-liability-soft); }
.ct-cat-equity { --cat: var(--oc-cat-equity); --cat-soft: var(--oc-cat-equity-soft); }
.ct-cat-revenue { --cat: var(--oc-cat-revenue); --cat-soft: var(--oc-cat-revenue-soft); }
.ct-cat-expense { --cat: var(--oc-cat-expense); --cat-soft: var(--oc-cat-expense-soft); }
.ct-row { --cat: var(--oc-muted); --cat-soft: var(--oc-zebra); }
.ct-row.ct-cat-asset { --cat: var(--oc-cat-asset); --cat-soft: var(--oc-cat-asset-soft); }
.ct-row.ct-cat-liability { --cat: var(--oc-cat-liability); --cat-soft: var(--oc-cat-liability-soft); }
.ct-row.ct-cat-equity { --cat: var(--oc-cat-equity); --cat-soft: var(--oc-cat-equity-soft); }
.ct-row.ct-cat-revenue { --cat: var(--oc-cat-revenue); --cat-soft: var(--oc-cat-revenue-soft); }
.ct-row.ct-cat-expense { --cat: var(--oc-cat-expense); --cat-soft: var(--oc-cat-expense-soft); }
.ct-row.ct-kind-group { height: 42px; font-size: 15px; font-weight: 800; background: var(--cat-soft); border-inline-start: 4px solid var(--cat); box-shadow: none; color: var(--oc-ink); }
.ct-row.ct-kind-group.ct-gap { height: 46px; border-top: 4px solid transparent; background-clip: padding-box; }
.ct-row.ct-kind-group .ct-chip { background: var(--cat); border-color: var(--cat); color: var(--oc-surface); }
.ct-row.ct-kind-group .ct-pill { background: var(--oc-surface); color: var(--oc-ink); border: 1px solid var(--cat); }
.ct-row.ct-kind-group .ct-icon { color: var(--cat); }
.ct-row.ct-kind-group:hover { background: var(--cat-soft); filter: brightness(.98); }
.ct-row.ct-kind-group.is-selected, .ct-tree .ct-row.is-selected { background: var(--oc-active-row); box-shadow: none; }
.ct-row.ct-kind-group.is-selected { border-inline-start-color: var(--oc-primary); }
.ct-row.ct-kind-ledger .ct-chip, .ct-row.ct-kind-subsidiary .ct-chip { background: var(--oc-surface); border-color: var(--cat); color: var(--oc-ink); }
.ct-row.ct-kind-ledger .ct-icon, .ct-row.ct-kind-subsidiary .ct-icon { color: var(--cat); }
.ct-row.ct-kind-detail .ct-chip { background: transparent; border-style: dashed; color: var(--oc-muted); }
.ct-row.ct-kind-detail .ct-title { color: var(--oc-muted); }
/* guide lines: one thin vertical line per level in the indent */
.ct-indent { background-image: repeating-linear-gradient(to left, transparent 0, transparent 8px, var(--oc-line) 8px, var(--oc-line) 9px, transparent 9px, transparent 18px); align-self: stretch; }
/* the share of a ledger in its group: a thin bar under its title */
.ct-titlebox { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.ct-titlebox .ct-title { flex: none; }
.ct-titlebox .ct-share { display: block; width: 100%; max-width: 220px; height: 3px; }
.ct-titlebox .ct-share::after { background: var(--cat); }
.ct-balance { min-width: 8em; }
.ct-amount { min-width: 5.5em; text-align: end; }
/* UI-4.1: the personal preferences as in Settings-light.png — a label column and a control column; each segmented control is as wide as its content, the help text sits next to it. */
.set-prefs { grid-template-columns: 9em minmax(0, 1fr); justify-content: start; }
.set-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.set-control .oc-seg { width: fit-content; flex: none; }
.set-help { color: var(--oc-muted); font-size: 12px; }
/* UI-4.1: the category legend under the level chips (a dot in the category colour and its name). */
.cod-catlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--oc-muted); }
.cod-cat { display: inline-flex; align-items: center; gap: 5px; }
.cod-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--oc-muted)); }
.ct-empty { margin: 0; padding: 16px; }
/* DEPLOY-1b: the Staging badge in the header and the version under the company block. Tokens only. */
.oc-stage-badge { display: inline-flex; align-items: center; margin-inline-end: 10px; padding: 3px 12px; border-radius: 999px; background: var(--oc-warn-soft); color: var(--oc-ink); border: 1px solid var(--oc-warn); font-size: 12px; font-weight: 800; white-space: nowrap; }
.oc-version { display: block; margin-top: 6px; color: var(--oc-side-muted); font-size: 11px; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }