/* ── Accounting reports (archetype B) ───────────────────────────────────────────────────────────
   Cluster R2. One stylesheet for every screen under /accounting/*.

   Two rules govern everything below.

   1. It has to look like the rest of STAS. The page shell, title bar, buttons, cards and chips are
      the ones already shipped on Workers and Troškovnici (see Pages/Workers/Index.razor.css) —
      26px teal title, 38px controls, 7/9/16px radii, white cards on #eef1f5. An accounting screen
      is not a different product.

   2. Every colour is a token with a fallback, so cluster R0's tokens.css takes over the values the
      moment it lands and nothing here has to change.

   MERGE NOTE: this file is new and is linked from index.html. The grid rules deliberately do NOT
   restate what .stas-grid already provides in datagrids.css — .acc-table adds only the two-level
   sticky head and the emphasised Saldo group, which no other table in the app has. */

/* ── Page shell ─────────────────────────────────────────────────────────────────────────────── */

.acc-page {
    border-radius: 14px;
    padding: 22px 24px 28px;
    margin-bottom: 16px;
    background: #eef1f5;
}

.acc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.acc-title h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--teal, #003951);
    letter-spacing: -0.4px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.acc-title h1 i {
    color: var(--accent, #ED880E);
    font-size: 20px;
}

.acc-sub {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ink-5, #64748b);
}

.acc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Buttons — same shapes as the list screens ─────────────────────────────────────────────── */

.acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: none;
    border-radius: 7px;
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 150ms ease;
}

.acc-btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none !important;
}

.acc-btn i {
    font-size: 13px;
}

.acc-btn-primary {
    background: var(--teal, #003951);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
}

.acc-btn-primary:hover:not(:disabled) {
    background: var(--teal-600, #00506f);
    color: #fff;
    transform: translateY(-1px);
}

/* Exports are secondary: same weight as "Uvoz računa" on the list screens, never competing with
   the page's own action. */
.acc-btn-ghost {
    background: var(--surface, #fff);
    color: var(--ink-6, #5b6b7c);
    border: 1px solid var(--rule-sec, #e6eaf0);
}

.acc-btn-ghost:hover:not(:disabled) {
    border-color: var(--accent, #ED880E);
    color: var(--accent, #ED880E);
    background: rgba(237, 136, 14, .12);
}

.acc-btn-excel {
    background: var(--surface, #fff);
    color: var(--excel, #1d6f42);
    border: 1px solid #cfe8da;
}

.acc-btn-excel:hover:not(:disabled) {
    background: var(--excel, #1d6f42);
    border-color: var(--excel, #1d6f42);
    color: #fff;
}

.acc-btn-sep {
    width: 1px;
    height: 24px;
    background: #d4dbe5;
    margin: 0 2px;
}

/* ── Parameter bar ──────────────────────────────────────────────────────────────────────────── */

.acc-params {
    background: var(--surface, #fff);
    border: 1px solid var(--rule-sec, #e6eaf0);
    border-radius: 12px;
    padding: 14px 16px 12px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
}

.acc-param-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.acc-param {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 11rem;
}

.acc-param-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-4, #5b6b7c);
    display: flex;
    align-items: center;
    gap: 7px;
}

.acc-param select,
.acc-param input {
    height: 40px;
    border-radius: 9px;
    border: 1px solid var(--rule-field, #dbe3ea);
    background: var(--surface, #fff);
    color: var(--ink, #1e293b);
    font-size: 14px;
    font-family: inherit;
    padding: 0 11px;
}

.acc-param select:focus,
.acc-param input:focus {
    outline: none;
    border-color: var(--teal, #003951);
    box-shadow: 0 0 0 3px rgba(0, 57, 81, .10);
}

/* The fiscal year is the parameter the whole report hangs on, so it is the only outlined one.
   Everything else on the bar is a plain field. */
.acc-param-year select {
    border: 1.5px solid var(--teal, #003951);
    font-weight: 600;
    color: var(--teal, #003951);
}

/* "tekuća" — the reader must be able to tell at a glance that they are looking at this year and
   not at a stray one created by a typo. */
.acc-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--ok-bg, #e6f2ec);
    color: var(--ok, #12724f);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.acc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    font-size: 13.5px;
    color: var(--ink-4, #5b6b7c);
    cursor: pointer;
}

.acc-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--teal, #003951);
    cursor: pointer;
}

/* One line under the bar saying how the report is read. Same sentence on every cumulative report,
   so the reader learns it once. */
.acc-help {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ink-5, #64748b);
    display: flex;
    align-items: center;
    gap: 7px;
}

.acc-help i {
    color: var(--ink-6b, #94a3b8);
    font-size: 12px;
}

/* ── Report card ────────────────────────────────────────────────────────────────────────────── */

.acc-card {
    background: var(--surface, #fff);
    border: 1px solid var(--rule-card, #ccd6e0);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
}

.acc-card-pad {
    padding: 16px 18px;
}

.acc-card-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink-5, #64748b);
    margin: 0 0 10px;
}

.acc-scroll {
    overflow: auto;
    max-height: 660px;
}

/* ── The report table ───────────────────────────────────────────────────────────────────────── */

/* border-collapse: separate is not a preference. A sticky header inside a collapsed table drops
   its own borders as it scrolls, and the two header rows drift apart unless the spacing is zero. */
.acc-table {
    width: 100%;
    margin: 0;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

.acc-table th,
.acc-table td {
    border: none;
    vertical-align: middle;
}

/* ---- Header: light, never dark. The dark-blue heads of the first mockup round were withdrawn,
   and the app-wide `thead { background: #003951 !important }` in style.css has to be beaten with
   the same weapon until R0 removes it. ---- */
.acc-table thead th {
    background: var(--grid-head, #e2e8f0) !important;
    color: var(--ink-5, #64748b) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 7px 14px;
    text-align: left;
    white-space: nowrap;
}

.acc-table thead tr.acc-grp th {
    height: 26px;
    box-sizing: border-box;
    padding: 0 14px;
    text-align: center;
}

.acc-table thead tr.acc-cols th {
    padding: 13px 14px;
    border-bottom: 2px solid var(--rule-head, #cbd5e1);
    /* Tester NOVO-111: the sticky class rows below are offset by a fixed 45px (43px on one-header
       tables). A header that came out taller - a wrapped caption - hid the first body row under
       itself, out of reach of the scroll. The header is now exactly as tall as the offset says. */
    height: 45px;
    box-sizing: border-box;
}

/* A heading that spans both levels — the identity columns of a two-level table. Left aligned
   like the text under it, and dropped to the foot of the block so it sits level with the
   subheadings beside it rather than floating between the two rows. */
.acc-table thead tr.acc-grp th.acc-idhead {
    height: auto;
    text-align: left;
    vertical-align: bottom;
    padding: 0 14px 13px;
    border-bottom: 2px solid var(--rule-head, #cbd5e1);
}

/* Two sticky levels. The group row is exactly 26px tall, which is what the columns row is offset
   by — any disagreement and a gap opens between them as the body scrolls under. */
.acc-scroll .acc-table thead tr.acc-grp th {
    position: sticky;
    top: 0;
    z-index: 6;
}

.acc-scroll .acc-table thead tr.acc-cols th {
    position: sticky;
    top: 0;
    z-index: 6;
}

/* The offset applies only where a group row is genuinely above. Unconditionally it parked the
   single-level heads on Amortizacija, Kartica konta and Otvorene stavke 26px down the body, so
   the first row was permanently cut off under them — visible as a few pixels of clipped letters
   that no amount of scrolling recovered. */
.acc-scroll .acc-table thead tr.acc-grp + tr.acc-cols th {
    top: 26px;
}

/* ---- The Saldo group. An accountant reads this pair and skims the other four, so it is lifted
   by an orange underline and a slightly heavier surface — NOT by a dark background, which would
   make it read as a second header. ---- */
.acc-table th.acc-dom {
    background: var(--grid-dom, #dbe3ea) !important;
    color: var(--teal, #003951) !important;
}

.acc-table thead tr.acc-grp th.acc-dom {
    box-shadow: inset 0 -3px 0 var(--accent, #ED880E);
}

.acc-table td.acc-dom {
    background: #FCFDFE;
    font-weight: 500;
}

/* ---- Group separators. Dark only where the surface is already grey; a dark hairline running
   through white body rows reads as a rendering fault. ---- */
.acc-table thead th.acc-sep,
.acc-table tfoot td.acc-sep {
    box-shadow: inset 1px 0 0 #1B4E69;
}

.acc-table thead tr.acc-grp th.acc-dom.acc-sep {
    box-shadow: inset 1px 0 0 #1B4E69, inset 0 -3px 0 var(--accent, #ED880E);
}

.acc-table tbody td.acc-sep {
    box-shadow: inset 1px 0 0 #EBEFF3;
}

/* ---- Body ---- */
.acc-table tbody td {
    font-size: 14px;
    color: var(--ink-2, #334155);
    padding: 11px 14px;
    border-bottom: 1px solid #eef1f5;
}

.acc-table tbody tr:hover td {
    background: var(--surface-3, #f8fafc);
}

.acc-table tbody tr:hover td.acc-dom {
    background: #f4f8fb;
}

/* ---- Group (synthetic) account rows on the trial balance: the sum of the postable accounts
   beneath them. Tinted and bold so they read as a subtotal band, not as one more konto; the
   hover tint is withheld so the band never flickers into a plain row. ---- */
.acc-table tbody tr.acc-subtotal td,
.acc-table tbody tr.acc-subtotal:hover td,
.acc-table tbody tr.acc-subtotal:hover td.acc-dom {
    background: var(--surface-4, #f1f5f9);
    font-weight: 700;
    color: var(--teal, #003951);
}

.acc-table .acc-num {
    text-align: right;
}

.acc-table .acc-code {
    font-weight: 700;
    color: var(--teal, #003951);
    white-space: nowrap;
}

/* Missing value. Never the same grey as a figure. */
.acc-dash {
    color: var(--ink-7, #cbd5e1);
}

.acc-neg {
    color: var(--crit, #c53a3a);
}

/* ---- Footer: totals, same light surface as the head ---- */
.acc-table tfoot td {
    background: var(--grid-head, #e2e8f0);
    font-size: 14px;
    font-weight: 700;
    color: var(--teal, #003951);
    padding: 12px 14px;
    border-top: 2px solid var(--rule-head, #cbd5e1);
}

.acc-table tfoot td.acc-dom {
    background: var(--grid-dom, #dbe3ea);
}

/* The closing check. Both outcomes are shown — a footer that only ever speaks when something is
   wrong leaves the reader unable to tell "checked and fine" from "not checked". */
.acc-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: none;
}

.acc-balance-ok {
    background: var(--ok-bg, #e6f2ec);
    color: var(--ok, #12724f);
}

.acc-balance-bad {
    background: var(--crit-bg, #f8dada);
    color: var(--crit-ink, #a52f2f);
}

/* ── Integrity controls on the financial statements ─────────────────────────────────────────── */

.acc-int-row td {
    background: #FDF6F5 !important;
}

.acc-int-row td.acc-int-amount {
    color: var(--crit, #c53a3a);
    font-weight: 600;
}

.acc-int-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--crit-bg, #f8dada);
    color: var(--crit-ink, #a52f2f);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.acc-int-explain td {
    background: #FDF6F5 !important;
    border-bottom: 1px solid #f2dede;
    padding: 0 14px 14px !important;
}

.acc-int-box {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.acc-int-box > i {
    color: var(--crit, #c53a3a);
    font-size: 15px;
    margin-top: 2px;
}

.acc-int-what {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--crit-ink, #a52f2f);
    margin: 0 0 3px;
}

.acc-int-why {
    font-size: 13px;
    color: var(--ink-3, #475569);
    margin: 0 0 9px;
    max-width: 62rem;
    line-height: 1.45;
}

.acc-int-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px;
    border-radius: 7px;
    border: 1px solid var(--crit, #c53a3a);
    background: var(--surface, #fff);
    color: var(--crit, #c53a3a);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms ease;
}

.acc-int-link:hover {
    background: var(--crit, #c53a3a);
    color: #fff;
}

/* ── Statement lines ────────────────────────────────────────────────────────────────────────── */

.acc-line-sub td {
    background: var(--surface-4, #f1f5f9);
    font-weight: 700;
    color: var(--teal, #003951);
    border-top: 1px solid var(--rule-head, #cbd5e1);
}

.acc-line-result td {
    background: var(--teal, #003951);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.acc-line-account td {
    background: #fbfcfd;
    color: var(--ink-5, #64748b);
    font-size: 13px;
}

.acc-line-account td:nth-child(2) {
    padding-left: 40px;
}

.acc-expander {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acc-expander i {
    font-size: .7rem;
    color: var(--ink-6b, #94a3b8);
}

/* ── Chart of accounts ──────────────────────────────────────────────────────────────────────── */

/* Class chips. A class with no accounts is shown switched off rather than hidden — the reader has
   to be able to see that razred 9 is empty, because an empty 9 is itself a finding. */
.acc-chips {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.acc-chip {
    min-width: 38px;
    height: 40px;
    padding: 0 13px;
    border-radius: 9px;
    border: 1px solid var(--rule-sec, #e6eaf0);
    background: var(--surface, #fff);
    color: var(--ink-4, #5b6b7c);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms ease;
}

.acc-chip:hover:not(:disabled) {
    border-color: var(--accent, #ED880E);
    color: var(--accent, #ED880E);
}

.acc-chip.is-on {
    background: var(--teal, #003951);
    border-color: var(--teal, #003951);
    color: #fff;
}

.acc-chip:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: var(--surface-4, #f1f5f9);
}

.acc-counter {
    font-size: 12.5px;
    color: var(--ink-5, #64748b);
    white-space: nowrap;
    margin-left: auto;
}

/* Sticky class header inside the scrolling chart. */
.acc-table tbody tr.acc-class td {
    position: sticky;
    top: 45px;
    z-index: 4;
    height: 32px;
    box-sizing: border-box;
    padding: 0 14px;
    background: var(--surface-4, #f1f5f9);
    border-bottom: 1px solid var(--rule-sec, #e6eaf0);
    border-top: 1px solid var(--rule-sec, #e6eaf0);
}

/* One level of head only on the chart, so the class row sits directly under it. */
.acc-table.acc-table-1h tbody tr.acc-class td {
    top: 43px;
}

.acc-class-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.acc-class-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--teal, #003951);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.acc-class-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal, #003951);
    letter-spacing: .2px;
}

.acc-class-count {
    font-size: 11.5px;
    color: var(--ink-5, #64748b);
}

/* Four digits and up is an analytic account under the synthetic one above it. */
.acc-sub-account {
    padding-left: 26px;
}

.acc-tag {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-bg, #fdf0e3);
    color: var(--accent-ink, #a75f0a);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.acc-tag-muted {
    background: var(--surface-4, #f1f5f9);
    color: var(--ink-5, #64748b);
}

/* ── KPI tiles ──────────────────────────────────────────────────────────────────────────────── */

.acc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

/* A single-level head still gets its underline even where the row carries no .acc-cols class —
   used by the screens in this module that have one header row rather than two. */
.acc-table.acc-table-1h thead th {
    border-bottom: 2px solid var(--rule-head, #cbd5e1);
    height: 43px;
    box-sizing: border-box;
}