/* Accounting module — chart of accounts, account ledger, journal entries, financial reports,
   cost centres. One sheet rather than six scoped ones: the pages share a header, a section
   strip, tags, KPI cards and statement rows, and grid templates (which belong to the page's
   scope, not the grid's) need the same classes. Tokens only — see docs/css-design-system.md. */

.ac-page { display: flex; flex-direction: column; gap: var(--mk-s4); padding: var(--mk-s5); max-width: 1600px; margin: 0 auto; color: var(--mk-text); }
.ac-narrow { max-width: 1100px; }

/* ── Header + section strip ─────────────────────────────────────────────── */
.ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mk-s4); flex-wrap: wrap; }
.ac-eyebrow { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--mk-text-muted); }
.ac-head h1 { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-section); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); display: flex; align-items: center; gap: var(--mk-s2); flex-wrap: wrap; }
.ac-head p { margin: var(--mk-s1) 0 0; font-size: var(--mk-t-secondary); color: var(--mk-text-muted); }
.ac-head-actions { display: flex; gap: var(--mk-s2); flex-wrap: wrap; }

.ac-tabs { display: flex; gap: var(--mk-s1); border-bottom: 1px solid var(--mk-border); overflow-x: auto; scrollbar-width: thin; }
.ac-tab { flex: none; display: inline-flex; align-items: center; gap: var(--mk-s2); padding: var(--mk-s2) var(--mk-s3); margin-bottom: -1px; border-bottom: 2px solid transparent;
          color: var(--mk-text-muted); font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-medium); text-decoration: none; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.ac-tab:hover { color: var(--mk-text-strong); }
.ac-tab.is-active { color: var(--mk-primary-ink); border-bottom-color: var(--mk-primary); font-weight: var(--mk-fw-semibold); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mk-s2); min-height: 40px; padding: 0 var(--mk-s4); border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md);
          background: var(--mk-bg-surface); color: var(--mk-text-strong); font: inherit; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ac-btn:hover { background: var(--mk-bg-hover); color: var(--mk-text-strong); }
.ac-btn:disabled { opacity: .55; cursor: default; }
.ac-btn-primary { background: var(--mk-primary); border-color: var(--mk-primary); color: var(--mk-text-onprimary); }
.ac-btn-primary:hover { background: var(--mk-primary-hover); color: var(--mk-text-onprimary); }
.ac-btn-danger { border-color: var(--mk-danger); color: var(--mk-danger-fg); }
.ac-btn-danger:hover { background: var(--mk-danger-lt); color: var(--mk-danger-fg); }
.ac-btn-sm { min-height: 32px; padding: 0 var(--mk-s3); font-size: var(--mk-t-secondary-sm); }
.ac-btn-ghost { border-color: transparent; background: transparent; }
.ac-link { color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); text-decoration: none; }
.ac-link:hover { text-decoration: underline; }
.ac-row-actions { display: flex; gap: var(--mk-s1); justify-content: flex-end; }

/* ── KPI cards ──────────────────────────────────────────────────────────── */
.ac-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--mk-s3); }
.ac-kpi { display: flex; flex-direction: column; gap: var(--mk-s1); min-width: 0; padding: var(--mk-s3) var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card);
          background: var(--mk-bg-surface); color: inherit; text-align: left; font: inherit; }
button.ac-kpi { cursor: pointer; transition: border-color var(--mk-t-fast), box-shadow var(--mk-t-fast); }
button.ac-kpi:hover { border-color: var(--mk-primary-border); box-shadow: var(--mk-sh-sm); }
.ac-kpi.is-active { border-color: var(--mk-primary); box-shadow: inset 0 0 0 1px var(--mk-primary); }
.ac-kpi-label { display: flex; align-items: center; gap: var(--mk-s2); font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium); color: var(--mk-text-muted); }
.ac-kpi-value { font-size: var(--mk-t-card); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ac-kpi-sub { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.ac-dot { width: 8px; height: 8px; border-radius: var(--mk-r-pill); flex: none; background: var(--mk-text-subtle); }
.ac-dot.t-asset { background: var(--mk-info); }
.ac-dot.t-liability { background: var(--mk-warning); }
.ac-dot.t-equity { background: var(--mk-text-muted); }
.ac-dot.t-income { background: var(--mk-success); }
.ac-dot.t-expense { background: var(--mk-danger-solid); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.ac-card { min-width: 0; border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); background: var(--mk-bg-surface); }
.ac-card-pad { padding: var(--mk-s4); }
.ac-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s3); padding: var(--mk-s3) var(--mk-s4); border-bottom: 1px solid var(--mk-border); flex-wrap: wrap; }
.ac-card-head h2 { margin: 0; font-size: var(--mk-t-card); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.ac-card-head .ac-sub { font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); }
.ac-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s4); align-items: start; }
.ac-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s4); align-items: start; }

/* ── Toolbar (dates, presets) ───────────────────────────────────────────── */
.ac-toolbar { display: flex; align-items: flex-end; gap: var(--mk-s3); flex-wrap: wrap; }
.ac-field { display: flex; flex-direction: column; gap: var(--mk-s1); min-width: 0; }
.ac-field > span { font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium); color: var(--mk-text-muted); }
.ac-input { min-height: 40px; padding: 0 var(--mk-s3) !important; border: 1px solid var(--mk-border-strong); border-radius: var(--mk-r-md); background: var(--mk-bg-surface); color: var(--mk-text-strong);
            font: inherit; font-size: var(--mk-t-secondary); }
.ac-input:focus-within { outline: none; border-color: var(--mk-primary); box-shadow: var(--mk-focus-ring); }
.ac-.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ac-input[readonly], .ac-input:disabled { background: var(--mk-bg-subtle); color: var(--mk-text-muted); }
.ac-input { min-height: 80px; padding: var(--mk-s2) var(--mk-s3) !important; resize: vertical; }
.ac-chips { display: flex; gap: var(--mk-s2); overflow-x: auto; scrollbar-width: thin; }
.ac-chip { flex: none; min-height: 36px; padding: 0 var(--mk-s3); border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill); background: var(--mk-bg-surface);
           color: var(--mk-text); font: inherit; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium); cursor: pointer; white-space: nowrap; }
.ac-chip:hover { border-color: var(--mk-border-strong); }
.ac-chip.is-active { border-color: var(--mk-primary); background: var(--mk-primary-lt); color: var(--mk-primary-ink); font-weight: var(--mk-fw-semibold); }
.ac-toolbar-end { margin-left: auto; display: flex; gap: var(--mk-s2); }

/* ── Tags ───────────────────────────────────────────────────────────────── */
.ac-tag { display: inline-flex; align-items: center; gap: var(--mk-s1); padding: 2px var(--mk-s2); border-radius: var(--mk-r-sm); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold);
          line-height: 1.5; white-space: nowrap; background: var(--mk-bg-subtle); color: var(--mk-text); }
.ac-tag.t-asset { background: var(--mk-info-lt); color: var(--mk-info-fg); }
.ac-tag.t-liability { background: var(--mk-warning-lt); color: var(--mk-warning-fg); }
.ac-tag.t-equity { background: var(--mk-draft-lt); color: var(--mk-text-strong); }
.ac-tag.t-income, .ac-tag.s-posted, .ac-tag.s-active { background: var(--mk-success-lt); color: var(--mk-success-fg); }
.ac-tag.t-expense, .ac-tag.s-danger { background: var(--mk-danger-lt); color: var(--mk-danger-fg); }
.ac-tag.s-draft { background: var(--mk-warning-lt); color: var(--mk-warning-fg); }
.ac-tag.s-muted { background: var(--mk-bg-subtle); color: var(--mk-text-muted); }
.ac-tag-row { display: inline-flex; gap: var(--mk-s1); flex-wrap: wrap; margin-left: var(--mk-s2); vertical-align: middle; }

/* ── Figures ────────────────────────────────────────────────────────────── */
.ac-code { font-family: var(--mk-font-mono); font-size: var(--mk-t-secondary-sm); color: var(--mk-text-muted); }
.ac-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-amt.is-neg { color: var(--mk-danger-fg); }
.ac-amt.is-pos { color: var(--mk-success-fg); }
.ac-muted { color: var(--mk-text-muted); }
.ac-side { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); color: var(--mk-text-muted); margin-left: var(--mk-s1); }
.ac-name { font-weight: var(--mk-fw-medium); color: var(--mk-text-strong); }
.ac-narr { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Notices / empty state ──────────────────────────────────────────────── */
.ac-alert { display: flex; align-items: flex-start; gap: var(--mk-s3); padding: var(--mk-s3) var(--mk-s4); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); font-size: var(--mk-t-secondary); }
.ac-alert.is-error { border-color: var(--mk-danger); background: var(--mk-danger-lt); color: var(--mk-danger-fg); }
.ac-alert.is-ok { border-color: var(--mk-success); background: var(--mk-success-lt); color: var(--mk-success-fg); }
.ac-alert.is-warn { border-color: var(--mk-warning); background: var(--mk-warning-lt); color: var(--mk-warning-fg); }
.ac-alert.is-info { background: var(--mk-info-lt); color: var(--mk-info-fg); border-color: transparent; }
.ac-empty { display: flex; flex-direction: column; align-items: center; gap: var(--mk-s3); padding: var(--mk-s7) var(--mk-s4); text-align: center; }
.ac-center { justify-content: center; }
.ac-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--mk-r-pill); background: var(--mk-primary-lt); color: var(--mk-primary-ink); }
.ac-empty h2 { margin: 0; font-size: var(--mk-t-card); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.ac-empty p { margin: 0; max-width: 480px; font-size: var(--mk-t-secondary); color: var(--mk-text-muted); }
.ac-skel.is-tall { min-height: 320px; }
.ac-loading { display: flex; justify-content: center; padding: var(--mk-s7) 0; }
.ac-skel { min-height: 76px; border-radius: var(--mk-r-card); background: var(--mk-bg-subtle); animation: ac-pulse 1.2s ease-in-out infinite; }
@keyframes ac-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ac-skel { animation: none; } }

/* ── Statements (P&L, balance sheet) ────────────────────────────────────── */
.ac-stmt { display: flex; flex-direction: column; }
.ac-stmt-group { padding: var(--mk-s2) var(--mk-s4) var(--mk-s1); font-size: var(--mk-t-micro); font-weight: var(--mk-fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--mk-text-muted); }
.ac-stmt-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mk-s3); padding: var(--mk-s2) var(--mk-s4); font-size: var(--mk-t-secondary); }
.ac-stmt-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ac-stmt-row.is-line { padding-left: var(--mk-s6); color: var(--mk-text); }
.ac-stmt-row.is-total { border-top: 1px solid var(--mk-border); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.ac-stmt-row.is-grand { border-top: 2px solid var(--mk-border-strong); font-size: var(--mk-t-card); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); background: var(--mk-bg-subtle); }
.ac-stmt-row.is-empty { color: var(--mk-text-muted); font-style: italic; padding-left: var(--mk-s6); }
.ac-stmt-note { padding: var(--mk-s1) var(--mk-s4) var(--mk-s2); font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.ac-stmt .ac-stmt-row a, .ac-stmt .ac-stmt-row a:visited { color: var(--mk-text); text-decoration: none; }
.ac-stmt .ac-stmt-row a:hover { color: var(--mk-primary-ink); text-decoration: underline; }

/* ── Document tables (journal entry lines — editable or a document) ─────── */
.ac-doc { width: 100%; border-collapse: collapse; font-size: var(--mk-t-secondary); }
.ac-doc th { padding: var(--mk-s2) var(--mk-s3); background: var(--mk-bg-table-head); border-bottom: 1px solid var(--mk-border); text-align: left; font-size: var(--mk-t-secondary-sm);
             font-weight: var(--mk-fw-semibold); color: var(--mk-text-muted); white-space: nowrap; }
.ac-doc td { padding: var(--mk-s2) var(--mk-s3); border-bottom: 1px solid var(--mk-border); vertical-align: middle; }
.ac-doc .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-doc tfoot td { border-bottom: 0; border-top: 2px solid var(--mk-border-strong); font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); }
.ac-doc .ac-input { width: 100%; }
.ac-doc .col-num { width: 160px; }
.ac-doc .col-cc { width: 160px; }
.ac-doc .col-x { width: 48px; text-align: center; }
.ac-doc-wrap { overflow-x: auto; }
.ac-x { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--mk-r-md); background: transparent; color: var(--mk-text-muted); cursor: pointer; }
.ac-x:hover { background: var(--mk-danger-lt); color: var(--mk-danger-fg); }
.ac-x:disabled { opacity: .35; cursor: default; background: transparent; }

.ac-balance { display: flex; align-items: center; justify-content: flex-end; gap: var(--mk-s4); flex-wrap: wrap; padding: var(--mk-s3) var(--mk-s4); font-size: var(--mk-t-secondary); }
.ac-balance strong { font-variant-numeric: tabular-nums; color: var(--mk-text-strong); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.ac-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-s4); padding: var(--mk-s4); }
.ac-form .span-2 { grid-column: span 2; }
.ac-form .span-3 { grid-column: 1 / -1; }
.ac-hint { font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.ac-check { display: inline-flex; align-items: center; gap: var(--mk-s2); min-height: 40px; font-size: var(--mk-t-secondary); color: var(--mk-text-strong); cursor: pointer; }
.ac-check input { width: 18px; height: 18px; accent-color: var(--mk-primary); }
.ac-actions { display: flex; gap: var(--mk-s2); flex-wrap: wrap; padding: var(--mk-s3) var(--mk-s4); border-top: 1px solid var(--mk-border); }
.ac-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mk-s3); padding: var(--mk-s4); }
.ac-fact > span { display: block; font-size: var(--mk-t-micro); color: var(--mk-text-muted); }
.ac-fact > strong { display: block; margin-top: 2px; font-size: var(--mk-t-secondary); color: var(--mk-text-strong); overflow-wrap: anywhere; }

/* ── Small confirm dialog (delete / reverse: at most two inputs) ───────── */
.ac-scrim { position: fixed; inset: 0; z-index: var(--mk-z-modal); display: grid; place-items: center; padding: var(--mk-s4); background: var(--mk-bg-scrim); }
.ac-dialog { width: 100%; max-width: 440px; border-radius: var(--mk-r-modal); background: var(--mk-bg-surface); box-shadow: var(--mk-sh-lg); }
.ac-dialog h2 { margin: 0; padding: var(--mk-s4) var(--mk-s4) 0; font-size: var(--mk-t-card); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.ac-dialog-body { display: flex; flex-direction: column; gap: var(--mk-s3); padding: var(--mk-s3) var(--mk-s4); font-size: var(--mk-t-secondary); }
.ac-dialog .ac-actions { justify-content: flex-end; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024.98px) {
    .ac-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .ac-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ac-grid-2 { grid-template-columns: minmax(0, 1fr); }
    .ac-form { grid-template-columns: minmax(0, 1fr); }
    .ac-form .span-2 { grid-column: auto; }
}
@media (max-width: 599.98px) {
    .ac-page { padding: var(--mk-s3) var(--mk-s4); }
    .ac-head h1 { font-size: var(--mk-t-card); }
    .ac-head-actions { width: 100%; }
    .ac-head-actions .ac-btn { flex: 1 1 auto; }
    .ac-toolbar-end { margin-left: 0; width: 100%; }
    .ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-facts { grid-template-columns: minmax(0, 1fr); }
    /* Journal lines stack: each row becomes a block, the cells carry their own labels. */
    .ac-doc.is-stack thead { display: none; }
    .ac-doc.is-stack tbody tr { display: grid; grid-template-columns: 1fr 1fr 40px; gap: var(--mk-s2); align-items: end; padding: var(--mk-s3) var(--mk-s4); border-bottom: 1px solid var(--mk-border); }
    .ac-doc.is-stack tbody td { padding: 0; border: 0; }
    .ac-doc.is-stack tbody td.cell-acct { grid-column: 1 / -1; }
    .ac-doc.is-stack tbody td.col-cc { grid-column: 1 / 3; }
    .ac-doc.is-stack tbody td[data-label]::before { content: attr(data-label); display: block; font-size: var(--mk-t-micro); color: var(--mk-text-muted); margin-bottom: 2px; }
    .ac-doc.is-stack .col-num, .ac-doc.is-stack .col-cc { width: auto; }
}

/* ── Print: the statement, not the controls ─────────────────────────────── */
@media print {
    .ac-noprint, .ac-tabs, .ac-toolbar, .ac-head-actions { display: none !important; }
    .ac-page { padding: 0; }
    .ac-card { border: 0; }
}
.ac-stmt-card { max-width: 880px; }

/* ── Inventory screens reuse this sheet (InventoryHeader); stock-count pieces below ── */
.ac-field.is-narrow { max-width: 360px; }
.ac-grow { flex: 1 1 260px; }
.sc-pick { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); }
.sc-pick-row { display: flex; align-items: center; gap: var(--mk-s3); padding: var(--mk-s2) var(--mk-s3); border-bottom: 1px solid var(--mk-border); font-size: var(--mk-t-secondary); cursor: pointer; }
.sc-pick-row:last-child { border-bottom: 0; }
.sc-pick-row:hover { background: var(--mk-bg-hover); }
.sc-pick-row input { width: 18px; height: 18px; accent-color: var(--mk-primary); flex: none; }
.sc-search { width: 220px; }
.sc-scan { width: 240px; }
.sc-table tr.is-short td:first-child { box-shadow: inset 3px 0 0 var(--mk-danger); }
.sc-table tr.is-excess td:first-child { box-shadow: inset 3px 0 0 var(--mk-success); }
@media (max-width: 599.98px) {
    .sc-tools, .sc-search, .sc-scan { width: 100%; }
}