/* ============================================================
   AKM ERP — Design system  ·  "Petrol & Brass ledger"
   Internal accounting/ERP for an oil & lubricant distributor.
   Direction: precise financial software. Petrol-ink chrome, a
   single brass accent, IBM Plex Sans for UI and IBM Plex Mono
   for the things accountants actually read — codes and figures.
   ============================================================ */

:root {
    /* Brand */
    --ink:        #102f38;   /* petrol — sidebar/chrome */
    --ink-deep:   #0b2228;
    --ink-line:   #1f4a54;
    --brass:      #b7842b;   /* the one accent */
    --brass-bright:#d29a35;
    --brass-soft: rgba(183, 132, 43, .12);

    /* Surfaces */
    --paper:      #ebe7dd;   /* content canvas (warm, a touch deeper so white cards float) */
    --surface:    #ffffff;
    --surface-2:  #faf9f5;
    --border:     #e6e3da;
    --border-soft:#eeece5;

    /* Text */
    --text:       #19211f;
    --muted:      #6c746f;
    --faint:      #99a09b;

    /* Account-class hues (encode the COA structure) */
    --c-asset:     #0e7c86;
    --c-liability: #b4532a;
    --c-equity:    #4c4fa6;
    --c-revenue:   #3f8a3f;
    --c-cogs:      #b7842b;
    --c-expense:   #5b6b72;

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(16,47,56,.06), 0 14px 34px -12px rgba(16,47,56,.16);

    /* Telerik / Kendo theme — bend it to the brand */
    --kendo-color-primary: var(--brass);
    --kendo-color-primary-hover: var(--brass-bright);
    --kendo-color-primary-active: #9e7124;
    --kendo-font-family: var(--font-sans);
    --kendo-border-radius-md: 8px;
}

html, body {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-bright); }

h1, h2, h3 { letter-spacing: -.012em; }
h1:focus { outline: none; }

/* ---- Page header system (compact console style) ------------ */
.page-head { margin: .15rem 0 .85rem; }
.page-eyebrow {
    font: 600 .64rem/1 var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex; align-items: center; gap: .45rem;
    margin-bottom: .3rem;
}
.page-eyebrow::before {
    content: ""; width: 1.2rem; height: 2px; background: var(--brass); display: inline-block;
}
.page-head h1 {
    font: 700 1.5rem/1.1 var(--font-sans);
    letter-spacing: -.018em;
    color: var(--text); margin: 0;
}
.page-head .sub { color: var(--muted); font-size: .85rem; margin: .25rem 0 0; }
.page-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---- Meta strip → a ruled "ledger tally" panel -------------- */
/* One framed panel (not loose cards): a brass header rule like a ledger's column line,
   hairline-ruled columns, mono tabular figures, and the headline total picked out in brass. */
.meta-strip { display: inline-flex; align-items: stretch; flex-wrap: wrap; margin-top: 1rem; padding: 0;
    background: var(--surface); border: 1px solid var(--border); border-top: 2px solid var(--brass);
    border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 47, 56, .05), 0 10px 26px -18px rgba(16, 47, 56, .22);
    overflow: hidden; }
.meta { display: flex; flex-direction: column; gap: .32rem; padding: .68rem 1.4rem;
    border-left: 1px solid var(--border); }
.meta:first-child { border-left: none; }
.meta__num { font: 600 1.62rem/1 var(--font-mono); color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.meta:first-child .meta__num { color: var(--brass); }
.meta__label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--faint); }

/* ---- Surface card ------------------------------------------ */
.surface {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* ---- Ledger code + class tag (the signature) --------------- */
.code { font-family: var(--font-mono); font-size: .82rem; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tag {
    display: inline-flex; align-items: center; gap: .4rem;
    font: 600 .68rem/1 var(--font-sans); letter-spacing: .03em;
    padding: .2rem .5rem; border-radius: 5px;
    background: color-mix(in srgb, var(--tag, var(--muted)) 12%, transparent);
    color: var(--tag, var(--muted));
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tag, var(--muted)); }
.tag--asset     { --tag: var(--c-asset); }
.tag--liability { --tag: var(--c-liability); }
.tag--equity    { --tag: var(--c-equity); }
.tag--revenue   { --tag: var(--c-revenue); }
.tag--cogs      { --tag: var(--c-cogs); }
.tag--expense   { --tag: var(--c-expense); }

/* status pill */
.pill { font: 600 .68rem/1 var(--font-sans); padding: .22rem .5rem; border-radius: 999px; }
.pill--on  { background: #e7f3ec; color: #2c7a4b; }
.pill--off { background: #f0eeea; color: #908a7e; }
.pill--neutral { background: #eaeef0; color: #566b73; }
.pill--ok { background: #e7f3ec; color: #2c7a4b; }
.pill--warn { background: #fbf1de; color: #9a6b12; }
.lnk { color: var(--brass); cursor: pointer; font-weight: 600; text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* per-line approve/reject segmented control (Payment Proposal) */
.seg { display: inline-flex; border: 1px solid #d9d5c9; border-radius: 7px; overflow: hidden; }
.seg__btn { font: 600 .72rem/1 var(--font-sans); padding: .34rem .7rem; background: #fff; color: #908a7e;
    border: 0; border-right: 1px solid #ece9e1; cursor: pointer; transition: background .12s, color .12s; }
.seg__btn:last-child { border-right: 0; }
.seg__btn:hover { background: #f7f5ef; }
.seg__btn--on-ok { background: #e7f3ec; color: #2c7a4b; }
.seg__btn--on-no { background: #f7e3e0; color: #a84032; }
.seg__btn:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
tr.ppline--rejected td { opacity: .5; }
tr.ppline--rejected .num { text-decoration: line-through; }

/* ---- Telerik Grid refinements ------------------------------ */
.k-grid {
    font-family: var(--font-sans);
    background: #fff;
    border: 1px solid #d9d5c9;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16,47,56,.05), 0 18px 40px -16px rgba(16,47,56,.18);
    font-size: .82rem;
    overflow: hidden;
}
.k-grid .k-grid-header, .k-grid .k-grid-header-wrap { background: #f2f0e8; }
.k-grid .k-grid-header { border-bottom: 1.5px solid #e0dccf; }
.k-grid .k-grid-header .k-column-title {
    font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    font-size: .67rem; color: #4b534f;
}
.k-grid td { padding-block: .5rem; color: var(--text); border-bottom-color: #f0eee7; }
.k-grid tr:hover td { background: var(--brass-soft); }
.k-grid .k-grid-pager { background: #f8f7f2; color: var(--muted); font-size: .78rem; border-top: 1px solid #e9e6dc; }
.cell-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cell-right { text-align: right; }
.row-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* ---- Home tiles -------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile {
    display: block; padding: 1.1rem 1.15rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
    text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tile:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16,47,56,.09); color: var(--text); }
.tile__ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
    background: var(--brass-soft); color: var(--brass); margin-bottom: .7rem; }
.tile__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tile__name { font: 600 .95rem/1.2 var(--font-sans); }
.tile__desc { font-size: .78rem; color: var(--muted); margin-top: .25rem; }
.note { margin-top: 1.5rem; font-size: .82rem; color: var(--muted); }

/* ---- Login ------------------------------------------------- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem;
    background: radial-gradient(1100px 560px at 50% -10%, #1a4651, var(--ink) 58%, var(--ink-deep)); }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 16px;
    box-shadow: 0 30px 60px -22px rgba(0,0,0,.55); padding: 2.2rem 2rem; }
.login-brand { display: flex; justify-content: center; margin-bottom: 1.6rem; }
.login-logo { height: 38px; width: auto; display: block; }
.login-title { font: 700 1.5rem/1.1 var(--font-sans); margin: 0; color: var(--text); letter-spacing: -.01em; }
.login-sub { color: var(--muted); font-size: .85rem; margin: .25rem 0 1.4rem; }
.login-form { display: flex; flex-direction: column; }
.login-label { font-size: .76rem; font-weight: 600; color: var(--muted); margin-top: .7rem; margin-bottom: .25rem; }
.login-input { width: 100%; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px;
    font: 400 .9rem var(--font-sans); background: var(--surface-2); color: var(--text); }
.login-input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-soft); background: #fff; }
.login-btn { margin-top: 1.5rem; padding: .68rem; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--ink); color: #fff; font: 600 .92rem var(--font-sans); }
.login-btn:hover { background: var(--ink-deep); }
.login-error { background: #fee2e2; color: #b91c1c; font-size: .82rem; padding: .55rem .7rem; border-radius: 8px; margin-bottom: .6rem; }

/* ---- Topbar user ---- */
.topbar-user { font-size: .82rem; font-weight: 600; color: var(--text); }
.topbar-logout-form { display: inline; margin: 0; }
.topbar-logout { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
    font: 500 .78rem var(--font-sans); color: var(--muted); padding: .32rem .65rem; }
.topbar-logout:hover { border-color: var(--brass); color: var(--brass); }
.pw-input { width: 100%; box-sizing: border-box; padding: .45rem .6rem; }

/* ---- Menu access tree (User Management) ---- */
.access-hint { color: var(--muted); font-size: .82rem; margin: 0 0 .8rem; }
.access-tree { max-height: 440px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; }
.access-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.access-count { color: var(--muted); font-size: .8rem; font-weight: 600; }

/* ---- Setting screens ---- */
.setting-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.6rem; box-shadow: 0 1px 3px rgba(16,47,56,.06); }
.muted-note { color: var(--muted); font-size: .85rem; }
.period-load { display: flex; gap: .6rem; align-items: flex-end; }
.period-table { width: 100%; border-collapse: collapse; }
.period-table th { text-align: left; font-size: .76rem; font-weight: 600; color: var(--muted); padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.period-table td { padding: .35rem .6rem; border-bottom: 1px solid #eef0f0; font-size: .88rem; }

/* assignment board (warehouse access, sales admin) */
.assign-board { display: flex; flex-direction: column; gap: 1.1rem; }
.assign-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.assign-title { font-weight: 700; font-size: .95rem; color: var(--text); }
.assign-bulk { display: flex; align-items: center; gap: .35rem; }
.assign-count { color: var(--muted); font-size: .78rem; font-weight: 600; margin-left: .4rem; }
.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .3rem .9rem; max-height: 460px; overflow-y: auto; padding: .2rem; }
.assign-item { display: flex; align-items: center; gap: .55rem; font-size: .88rem; padding: .28rem .2rem; cursor: pointer; }
.assign-item input { width: 16px; height: 16px; accent-color: var(--brass); }
.assign-actions { margin-top: .3rem; }

/* sales targets — year editor */
.target-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.target-fill { display: flex; align-items: center; gap: .55rem; }
.target-total { font-size: .9rem; color: var(--muted); }
.target-total strong { color: var(--text); font-family: var(--font-mono); font-size: 1.05rem; margin-left: .35rem; }

/* menu management rows */
.menu-grouprow { font-weight: 700; color: var(--ink); }
.menu-itemrow { padding-left: 1.1rem; color: var(--text); }

/* ===== Quotation — document editor ===== */
/* slim back link (top-left) — the document meta card below acts as the header */
.doc-back { margin: .1rem 0 .85rem; }
.linkback { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; cursor: pointer;
    font: 600 .82rem/1 var(--font-sans); color: var(--muted); padding: .3rem .5rem .3rem 0; transition: color .15s; }
.linkback:hover { color: var(--ink); }
.linkback__arr { font-size: 1.05rem; line-height: 1; }

/* grid toolbar filter bar — From/To + Status on the left, search pushed to the right */
.k-grid-toolbar { gap: .9rem; flex-wrap: wrap; padding-block: .6rem; }
.k-grid-toolbar .grid-flt { display: inline-flex; align-items: center; gap: .45rem; }
.grid-flt__lbl { font: 600 .68rem/1 var(--font-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.grid-flt__spacer { flex: 1 1 auto; }
.k-grid-toolbar .k-searchbox { width: 300px; max-width: 38vw; }

/* ---- GL report pages (Buku Besar, Neraca Saldo) ---- */
.rpt-bar { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: .1rem 0 1.1rem; }
.rpt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .1rem 0 .6rem; }
.rpt-open { color: var(--muted); font-size: .9rem; }
.rpt-foot { display: flex; gap: 2rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .9rem;
    padding: .7rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: .9rem; }
.rpt-foot b { margin-left: .4rem; color: var(--ink); }
.rpt-foot__close b { color: var(--brass); }
.rpt-foot__off b { color: #c0392b; }
.rpt-empty { margin: 2rem 0; padding: 1.6rem; text-align: center; color: var(--muted);
    background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; }
/* jurnal umum balance footer */
.ju-foot td { padding-top: .5rem; border-top: 1px solid var(--border); }
.ju-foot--off td { color: #c0392b; }
.ju-foot--ok td { color: #2f8f4e; }

/* ============================================================
   Responsive baseline — keep every screen usable on mobile.
   Most pages need NO per-page CSS once these hold.
   ============================================================ */

/* Wrap a wide table/block so IT scrolls sideways instead of the whole page. */
.x-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.x-scroll > table { min-width: max-content; }

/* A CRUD modal must never be wider than the screen. */
.k-window { max-width: 96vw; }

@media (max-width: 640px) {
    /* Fixed-width Telerik inputs/pickers go fluid so forms, toolbars & modals fit. */
    .k-input, .k-picker, .k-textbox, .k-numerictextbox, .k-combobox, .k-dropdownlist,
    .k-datepicker, .k-datetimepicker, .k-timepicker, .k-maskedtextbox,
    .k-autocomplete, .k-multiselect { max-width: 100% !important; }

    /* CRUD modal: pin to an on-screen box, neutralise JS centring, scroll long forms inside. */
    .k-window {
        width: 94vw !important; max-width: 94vw !important;
        left: 3vw !important; top: 4vh !important; max-height: 90vh !important;
        transform: none !important;
    }
    .k-window-content { max-height: 74vh; overflow-y: auto; }
    .k-window .k-form-buttons, .k-window .k-actions, .k-window .k-window-actions { flex-wrap: wrap; }

    /* Data grids: keep columns readable; the grid scrolls instead of crushing them. */
    .k-grid .k-table { min-width: 560px; }

    /* Root guard: a stray wide child never scrolls/clips the whole page sideways.
       `clip` (not hidden) keeps vertical scroll working; the mobile top-bar isn't sticky. */
    html { overflow-x: clip; }

    /* Hard-cap the content containers so nothing can stretch past the viewport. */
    main, article.content, .setting-panel { max-width: 100%; min-width: 0; }

    /* Tighter panels + always-wrapping inline toolbars. */
    .setting-panel { padding: 1.1rem 1rem; }
    .period-load, .target-fill { flex-wrap: wrap; }

    /* Few-column data-entry tables (Targets, Attendance Periods) FIT the screen
       instead of forcing a wide horizontal scroll: drop their fixed column widths
       (their inputs are already fluid via the rule above) and override the
       .x-scroll max-content minimum so the table can shrink. */
    .period-table { min-width: 0 !important; }
    .period-table th, .period-table td { width: auto !important; }
    /* split the row so the two value columns are equal — Notes isn't starved by the amount field. */
    .period-table th:nth-child(2), .period-table td:nth-child(2),
    .period-table th:nth-child(3), .period-table td:nth-child(3) { width: 44% !important; }
    .x-scroll > .period-table { min-width: 0 !important; }
}

/* ===== Quotation printable document (shown only when printing) ===== */
.print-doc { display: none; }
@media print {
    @page { size: A4; margin: 12mm 13mm; }
    body * { visibility: hidden; }
    .print-doc, .print-doc * { visibility: visible; }
    .print-doc { display: block; position: absolute; left: 0; top: 0; width: 100%; }
}
/* print-color-adjust: force the browser to actually print background fills (header/zebra/grand-total) */
.print-doc { color: #14181a; font: 9.5pt/1.45 Arial, "Helvetica Neue", sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* header band */
.print-doc .pd-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding-bottom: 9px; margin-bottom: 14px; border-bottom: 2px solid #102f38; }
.print-doc .pd-logo { height: 46px; display: block; }
.print-doc .pd-company { font-weight: 800; font-size: 8.5pt; margin-top: 4px; letter-spacing: .02em; color: #102f38; }
.print-doc .pd-title { font-weight: 800; font-size: 15pt; text-align: center; letter-spacing: .06em; color: #102f38; }
.print-doc .pd-place { text-align: right; font-size: 9pt; font-weight: 600; }
/* parties + info */
.print-doc .pd-to { font-size: 9pt; }
.print-doc .pd-cust { font-weight: 800; font-size: 11pt; margin: 1px 0 12px; color: #102f38; }
.print-doc .pd-info { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 12px; }
.print-doc .pd-info table { border-collapse: collapse; font-size: 9pt; }
.print-doc .pd-info td { padding: 1px 7px 1px 0; vertical-align: top; }
.print-doc .pd-info td:first-child { font-weight: 700; color: #3a4348; }
.print-doc .pd-greet { margin: 0 0 9px; font-size: 9pt; }
/* items table — full grid border, petrol header, zebra rows */
.print-doc .pd-items { width: 100%; border-collapse: collapse; font-size: 8.5pt; border: 1px solid #102f38; }
.print-doc .pd-items thead th { background: #102f38; color: #fff; font-weight: 700; text-align: left;
    padding: 6px 8px; border-right: 1px solid rgba(255, 255, 255, .16); letter-spacing: .02em; }
.print-doc .pd-items thead th:last-child { border-right: 0; }
.print-doc .pd-items thead th.r { text-align: right; }
.print-doc .pd-items tbody td { padding: 5px 8px; border: 1px solid #d9d4c7; vertical-align: top; }
.print-doc .pd-items tbody tr:nth-child(even) td { background: #f6f5f1; }
.print-doc .pd-items td.r { text-align: right; white-space: nowrap; }
/* totals — bordered box, brass-on-petrol grand total */
.print-doc .pd-totals { margin: 8px 0 0 auto; border-collapse: collapse; font-size: 9pt; min-width: 340px; border: 1px solid #cfcabb; }
.print-doc .pd-totals td { padding: 3px 10px; border-bottom: 1px solid #e8e4d8; }
.print-doc .pd-totals tr:last-child td { border-bottom: 0; }
.print-doc .pd-totals td:first-child { font-weight: 700; color: #3a4348; }
.print-doc .pd-totals td.r { text-align: right; white-space: nowrap; }
.print-doc .pd-totals .pd-grand td { background: #102f38; color: #fff; font-weight: 800; font-size: 10pt; padding: 5px 10px; }
.print-doc .pd-totals .pd-grand td:first-child { color: #e7c573; }
/* note + signature + footer */
.print-doc .pd-note { font-size: 8.5pt; margin: 22px 0 0; line-height: 1.5; }
.print-doc .pd-note b { color: #102f38; }
.print-doc .pd-sign { margin-top: 28px; width: 230px; text-align: center; }
.print-doc .pd-sign__title { font-size: 9pt; font-weight: 600; }
.print-doc .pd-sign__name { margin-top: 60px; font-weight: 800; font-size: 9pt; border-top: 1px solid #999; padding-top: 4px; display: inline-block; }
.print-doc .pd-foot { text-align: center; font-size: 8pt; margin-top: 42px; color: #444; border-top: 1px solid #d9d4c7; padding-top: 8px; }

/* surat jalan (DO) print — Note block + 3-column signature row (DIBUAT OLEH | DISETUJUI | DITERIMA) */
.print-doc .pd-bill__addr { font-size: 9pt; margin-top: 2px; }
.print-doc .pd-note { margin-top: 18px; font-size: 9pt; }
.print-doc .pd-note b { display: block; margin-bottom: 2px; }
.print-doc .pd-signrow { display: flex; justify-content: space-between; gap: 24px; margin-top: 36px; }
.print-doc .pd-signcol { flex: 1; text-align: center; font-size: 9pt; }
.print-doc .pd-signcol__city { font-size: 8.5pt; margin-bottom: 2px; }
.print-doc .pd-signcol__role { font-weight: 700; letter-spacing: .03em; }
.print-doc .pd-signcol__line { margin-top: 64px; border-top: 1px solid #999; }
.print-doc .pd-signcol--named .pd-signcol__line { margin-top: 48px; }
.print-doc .pd-signcol__name { font-weight: 800; font-size: 9pt; padding-top: 3px; }

/* PURCHASE ORDER print — header boxes, boxed signature row, terms, left-aligned office footer */
.print-doc .pd-pohead { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border: 1px solid #333;
    padding: 8px 10px; margin-bottom: 12px; }
.print-doc .pd-poaddr { border-left: 1px solid #333; padding-left: 14px; font-size: 9pt; }
.print-doc .pd-poaddr__blk { margin-bottom: 10px; }
.print-doc .pd-poaddr__blk b { display: block; margin-bottom: 2px; }
.print-doc .pd-accept { text-align: right; font-size: 9pt; margin: 14px 0 6px; }
.print-doc .pd-signrow--boxed { border: 1px solid #333; margin-top: 6px; gap: 0; }
.print-doc .pd-signrow--boxed .pd-signcol { border-right: 1px solid #333; padding: 6px 8px; display: flex; flex-direction: column; min-height: 118px; }
.print-doc .pd-signrow--boxed .pd-signcol:last-child { border-right: 0; }
/* whichever element leads the bottom block (signature image if on file, else the invisible line) soaks up the
   flex slack, so the NAME sits flush at the bottom of every column and stays aligned across all three */
.print-doc .pd-signrow--boxed .pd-signcol__line { border-top: 0; margin-top: auto; }
.print-doc .pd-signrow--boxed .pd-sign__img { margin: auto auto -2px; }
.print-doc .pd-signrow--boxed .pd-sign__img + .pd-signcol__line { margin-top: 0; }
.print-doc .pd-signrow--boxed .pd-signcol__name { margin-top: 2px; }
.print-doc .pd-terms { font-size: 8.5pt; margin-top: 12px; }
.print-doc .pd-terms ol { margin: 3px 0 0 16px; padding: 0; }
.print-doc .pd-foot--left { text-align: left; font-size: 7.5pt; }
.print-doc .pd-foot--left div { margin-bottom: 1px; }
.print-doc .pd-sign__img { display: block; max-height: 52px; margin: 6px auto -8px; }

/* inline field + action button (e.g. No. Faktur + Save) */
.qf-inline { display: flex; gap: .5rem; align-items: center; }
.qf-inline > :first-child { flex: 1; }

/* signature (TTD) preview in the employee editor */
.ttd-preview { position: relative; display: inline-block; border: 1px dashed #d9d5c9; border-radius: 8px; padding: .5rem 1rem; background: #fff; }
.ttd-preview img { max-height: 64px; display: block; }
.ttd-preview .wo-att__del { position: absolute; top: -8px; right: -8px; }

/* ---- Invoice print (inv-print) — matches the legacy /invoice/print_new layout ---- */
.print-doc.inv-print .pd-head-inv { display: flex; align-items: center; gap: 18px; padding-bottom: 12px; margin-bottom: 6px; }
.print-doc.inv-print .pd-co__name { font-weight: 800; font-size: 12pt; color: #102f38; letter-spacing: .02em; }
.print-doc.inv-print .pd-co__line { font-size: 8.5pt; color: #3a4348; margin-top: 2px; }
.print-doc.inv-print .pd-co__line b { color: #102f38; display: inline-block; min-width: 44px; }
.print-doc.inv-print .pd-title { margin: 4px 0 16px; text-decoration: underline; }
.print-doc.inv-print .pd-billmeta { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 16px; }
.print-doc.inv-print .pd-bill__lbl { font-weight: 800; font-size: 9pt; color: #3a4348; }
.print-doc.inv-print .pd-bill__cust { font-weight: 800; font-size: 11pt; margin-top: 8px; color: #102f38; }
.print-doc.inv-print .pd-meta { border-collapse: collapse; font-size: 9pt; }
.print-doc.inv-print .pd-meta td { padding: 1px 8px 1px 0; vertical-align: top; white-space: nowrap; }
.print-doc.inv-print .pd-meta td:first-child { font-weight: 700; color: #3a4348; }
.print-doc.inv-print .pd-bank { margin-top: 26px; border: 1px solid #cfcabb; border-radius: 4px; display: inline-block; padding: 8px 12px; }
.print-doc.inv-print .pd-bank table { border-collapse: collapse; font-size: 9pt; }
.print-doc.inv-print .pd-bank td { padding: 2px 8px 2px 0; }
.print-doc.inv-print .pd-bank td:first-child { font-weight: 700; color: #3a4348; }
.print-doc.inv-print .pd-sign--inv { margin: 18px 0 0 auto; width: 230px; text-align: center; }

/* ---- TTI print signature blocks ---- */
.print-doc.tti-print .pd-title { text-decoration: underline; margin: 4px 0 16px; }
.print-doc.tti-print .tti-signs { display: flex; justify-content: space-between; gap: 60px; margin-top: 44px; }
.print-doc.tti-print .tti-sign { width: 45%; text-align: center; }
.print-doc.tti-print .tti-sign__t { font-size: 9pt; }
.print-doc.tti-print .tti-sign__n { margin-top: 56px; font-weight: 700; font-size: 9pt; border-top: 1px solid #999; padding-top: 4px; display: inline-block; min-width: 180px; }

.quote { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1rem; }
.q-eyebrow { font: 600 .68rem/1 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 0 0 1rem; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pay-head .q-eyebrow { margin-bottom: .6rem; }

/* meta strip */
.quote-meta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: linear-gradient(180deg, #fff, var(--surface-2)); border: 1px solid var(--border); border-left: 4px solid var(--brass);
    border-radius: var(--radius); padding: 1rem 1.4rem; box-shadow: var(--shadow); }
.quote-meta__id { display: flex; flex-direction: column; gap: .35rem; }
.quote-meta__id .q-eyebrow { margin: 0; }
.quote-meta__no { font: 700 1.5rem/1 var(--font-mono); color: var(--ink); letter-spacing: -.01em; }
.quote-meta__set { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.qm { display: flex; flex-direction: column; gap: .3rem; }
.qm > span { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qm > b { font-size: .98rem; font-weight: 600; color: var(--ink); line-height: 1.2; padding-bottom: .1rem; }
.qm__days { display: flex; align-items: center; gap: .4rem; }
.qm__days em { color: var(--muted); font-style: normal; font-size: .82rem; }
.qstatus { align-self: center; padding: .42rem .9rem; border-radius: 999px; font: 700 .72rem/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.qstatus--d { background: #eef0f0; color: var(--muted); }
.qstatus--a { background: rgba(63,138,63,.15); color: var(--c-revenue); }
.qstatus--r { background: rgba(180,83,42,.15); color: var(--c-liability); }
.qstatus--s { background: #fbf1de; color: #9a6b12; }
.qstatus--p { background: rgba(212,160,23,.16); color: #9a6b12; }

/* cards + fields */
.quote-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.quote-cols--foot { grid-template-columns: 1fr 380px; align-items: start; }
.quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.35rem; box-shadow: var(--shadow); }
.qf { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.qf-row .qf { margin-bottom: .9rem; }
.uom { font-size: .82rem; color: var(--muted); }
.wo-pick { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; }
.wo-pick > :first-child { flex: 1; min-width: 0; }
.qf:last-child { margin-bottom: 0; }
.qf > label { font-size: .76rem; font-weight: 600; color: var(--muted); }
/* a read-only field value styled to sit in a .qf like the editable inputs around it */
.qf-ro { min-height: 34px; display: flex; align-items: center; padding: .3rem .1rem; font-weight: 600;
    color: var(--ink); border-bottom: 1px solid var(--border-soft); }
.qf-ro--empty { color: var(--faint); font-weight: 400; }

/* line items */
.quote-lines { border-collapse: collapse; table-layout: fixed; width: 100%; }
.quote-lines thead th { font: 600 .62rem/1.15 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    text-align: left; padding: .46rem .55rem; background: var(--surface-2); border-bottom: 1px solid var(--border); vertical-align: middle; }
.quote-lines th.r, .quote-lines td.r { text-align: right; }
/* cells wrap instead of truncating — nothing is ever hidden; rows grow to fit the content */
.quote-lines tbody td { padding: .24rem .55rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: normal; }
.quote-lines tbody tr:hover td { background: var(--surface-2); }
.quote-lines .amount { font-family: var(--font-mono); font-weight: 600; color: var(--text); font-size: .95rem; }
.quote-empty { color: var(--muted); font-size: .85rem; text-align: center; padding: 1.1rem; }
.quote-addline { margin-top: .85rem; width: 100%; border: 1px dashed var(--border); background: var(--surface-2); color: var(--brass);
    font: 600 .85rem var(--font-sans); padding: .65rem; border-radius: 8px; cursor: pointer; transition: .15s; }
.quote-addline:hover { border-color: var(--brass); background: var(--brass-soft); }
.quote-addline--primary { border-style: solid; border-color: var(--brass); color: var(--brass); background: var(--brass-soft); }

/* Work Order parent→child lines (Repair/Overhaul): each customer object holds its material/service/PTA rows */
.wo-parent { border: 1px solid var(--border); border-radius: 12px; padding: .9rem; margin-bottom: .9rem; background: var(--surface); }
.wo-parent__head { display: flex; align-items: flex-end; gap: .8rem; margin-bottom: .8rem; }
.wo-parent__item { flex: 1 1 auto; min-width: 0; }
.wo-parent__f { flex: 0 0 auto; width: 150px; }
.wo-parent__f--qty { width: 100px; }
.wo-parent__head label, .wo-parent__item label { display: block; font-size: .72rem; color: var(--muted); margin-bottom: .25rem; }
.wo-parent__ro { padding: .5rem .1rem; font-size: .88rem; color: var(--text); font-family: var(--font-mono); }
.wo-childbtns { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.wo-childbtns .quote-addline { width: auto; margin-top: 0; padding: .45rem .8rem; }

/* Work Order image attachments */
.wo-att__grid { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .8rem; }
.wo-att__item { position: relative; margin: 0; width: 118px; height: 118px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.wo-att__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-att__del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%;
    background: rgba(20, 28, 32, .72); color: #fff; font-size: .75rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.wo-att__del:hover { background: #c0392b; }
.wo-att__add { display: inline-flex; align-items: center; gap: .5rem; border: 1px dashed var(--border); background: var(--surface-2);
    color: var(--brass); font: 600 .85rem var(--font-sans); padding: .55rem .9rem; border-radius: 8px; cursor: pointer; }
.wo-att__add:hover { border-color: var(--brass); background: var(--brass-soft); }
.wo-att__add input[type=file] { max-width: 190px; font-size: .78rem; }

/* summary card (dark, bold grand total) */
.quote-summary { background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.35rem 1.45rem; box-shadow: var(--shadow); }
.qs { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .44rem 0; font-size: .9rem; }
.qs > span { color: rgba(255,255,255,.68); }
.qs > b { font-family: var(--font-mono); font-weight: 600; color: #fff; }
.qs__disc { display: flex; align-items: center; gap: .35rem; }
.qs__disc em { color: rgba(255,255,255,.6); font-style: normal; }
.qs__tog { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.85); cursor: pointer; }
.qs--grand { margin-top: .55rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.18); }
.qs--chk > span { display: inline-flex; align-items: center; gap: .5rem; }
.doc-actions { display: flex; gap: .6rem; margin-top: 1.15rem; flex-wrap: wrap; }
.doc-meta { display: flex; gap: 1.6rem; margin: .3rem 0 .9rem; font-size: .9rem; color: var(--muted); }
.qs--grand > span { color: #fff; font-weight: 700; font-size: 1rem; }
.qs--grand > b { color: var(--brass-bright); font-size: 1.55rem; font-weight: 700; }

/* sticky action bar */
.quote-bar { position: sticky; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .8rem 1.2rem; box-shadow: 0 8px 24px -10px rgba(16,47,56,.28); }
.quote-bar__hint { color: var(--muted); font-size: .82rem; }
.quote-bar__left { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.quote-bar__btns { display: flex; gap: .5rem; }

/* line table keeps its natural column widths and scrolls horizontally when the viewport is narrow,
   instead of compressing the inputs into an unreadable cram */
.quote-lines-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
.quote-lines-wrap::-webkit-scrollbar { height: 9px; }
.quote-lines-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
/* per-table min-width is set inline on each table (sized to its own column count); the shared rule just
   sets the compact type scale. Item is a fixed width everywhere, one text column (Remark) flexes to fill. */
.quote-lines { font-size: .84rem; }
.quote-lines thead th:first-child, .quote-lines tbody td:first-child { padding-left: .9rem; }
.quote-lines thead th:last-child, .quote-lines tbody td:last-child { padding-right: .9rem; }

/* Inline editing: line cells read as plain text — the input's border/background only appears on
   hover or focus, so values show in full and the row stays clean and precise (no boxed-in clutter). */
.quote-lines .k-input, .quote-lines .k-picker, .quote-lines .k-multiselect {
    border-color: transparent; background: transparent; box-shadow: none;
    transition: border-color .12s ease, background .12s ease; }
.quote-lines td:hover .k-input,   .quote-lines td:focus-within .k-input,
.quote-lines td:hover .k-picker,  .quote-lines td:focus-within .k-picker,
.quote-lines td:hover .k-multiselect, .quote-lines td:focus-within .k-multiselect {
    border-color: var(--border); background: #fff; }
/* hide the numeric up/down spinner buttons in the line grid — they add clutter and eat width */
.quote-lines .k-input-spinner { display: none; }
/* right-align numeric values so the decimals line up precisely down the column */
.quote-lines td.r .k-input-inner { text-align: right; }
.quote-lines .k-input-inner { padding-inline: .4rem; padding-block: .12rem; font-size: .84rem; }
/* compact editing inputs so a cell in edit mode is the same height as its text row */
.quote-lines .k-input, .quote-lines .k-picker { min-height: 28px; }
/* the read-only chips (Part No / Unit) sit flush with the input text baseline and WRAP long values
   onto the next line rather than truncating; the cell's title still shows the full value on hover */
.quote-lines .uom { display: block; padding-inline: .4rem; color: var(--muted);
    white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
/* money values stay on one line (formatted, right-aligned) — wrapping numbers reads as errors */
.quote-lines td.r .num { white-space: nowrap; }

/* click-to-edit cell: the value reads as text and wraps in full; a subtle hover panel shows it's editable,
   and clicking swaps in the input (focused via JS). Only the editing cell holds an input. */
.quote-lines td.cell { cursor: text; }
.quote-lines .cell-text { display: block; min-height: 1.05rem; padding: .1rem .35rem; border-radius: 6px;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.quote-lines td.r .cell-text { text-align: right; }
.quote-lines .cell-text.num { font-family: var(--font-mono); font-weight: 500; }
.quote-lines .cell-text--ph { color: var(--faint); }
.quote-lines td.cell:hover .cell-text { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-soft); }

/* required-field validation feedback */
.req { color: #d4351c; font-weight: 700; margin-left: .1rem; }
.qf--invalid > label { color: #d4351c; }
.qf--invalid .k-input, .qf--invalid .k-picker, .qf--invalid .k-combobox, .qf--invalid .k-dropdownlist {
    border-color: #d4351c !important; box-shadow: 0 0 0 3px rgba(212,53,28,.15) !important; }
.quote-card.qf--invalid { border-color: #d4351c; box-shadow: 0 0 0 3px rgba(212,53,28,.12); }
@keyframes akm-shake {
    10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); }
}
.shake { animation: akm-shake .6s cubic-bezier(.36, .07, .19, .97); }

/* ===== App toaster — Telerik notification, modernised: lower, rounded card + progress bar ===== */
.k-notification-group.app-toaster { top: 4.75rem !important; right: 1.15rem !important; }
.app-toaster .k-notification {
    position: relative; overflow: hidden;
    min-width: 290px; max-width: 400px;
    padding: .82rem 2.5rem .84rem 1rem;
    border-radius: 12px;
    font-size: .9rem; line-height: 1.42; font-weight: 500;
    box-shadow: 0 14px 34px -12px rgba(16, 47, 56, .42), 0 3px 8px -4px rgba(16, 47, 56, .22);
}
.app-toaster .k-notification-content { font-weight: 500; }
/* auto-close progress bar (drains left→right over the lifetime; pauses on hover) */
.app-toaster .k-notification::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: rgba(255, 255, 255, .55); transform-origin: left;
    animation: toastDrain 4.5s linear forwards;
}
.app-toaster .k-notification:hover::after { animation-play-state: paused; }
@keyframes toastDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 520px) {
    .k-notification-group.app-toaster { top: auto !important; bottom: 1rem !important; left: .9rem !important; right: .9rem !important; }
    .app-toaster .k-notification { max-width: none; width: calc(100vw - 1.8rem); }
}

/* ---- Navbar notification bell ---- */
.notif { position: relative; display: inline-flex; }
.notif__btn {
    position: relative; width: 38px; height: 38px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--muted); cursor: pointer; transition: all .15s;
}
.notif__btn:hover { color: var(--ink); background: var(--surface-2); }
.notif__badge {
    position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #c0392b; color: #fff; font: 700 .62rem/1 var(--font-sans);
    border-radius: 9px; border: 2px solid var(--surface);
}
.notif__backdrop { position: fixed; inset: 0; z-index: 90; }
.notif__panel {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 91; width: 320px; max-width: 86vw;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 18px 40px -14px rgba(16, 47, 56, .4); overflow: hidden;
}
.notif__head { padding: .7rem .9rem; font: 700 .72rem/1 var(--font-sans); text-transform: uppercase;
    letter-spacing: .08em; color: var(--faint); border-bottom: 1px solid var(--border); }
.notif__empty { padding: 1.6rem .9rem; text-align: center; color: var(--muted); font-size: .85rem; }
.notif__list { list-style: none; margin: 0; padding: .25rem; max-height: 360px; overflow-y: auto; }
.notif__item { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .65rem;
    border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; }
.notif__item:hover { background: var(--surface-2); }
.notif__item--approval { border-left-color: var(--brass); }
.notif__item--decision { border-left-color: #2f8f4e; }
.notif__text { font-size: .86rem; color: var(--ink); line-height: 1.35; }
.notif__time { font-size: .72rem; color: var(--faint); }
@media (max-width: 520px) {
    .notif__panel { position: fixed; top: 3.4rem; right: .6rem; left: .6rem; width: auto; }
}

/* responsive — stack the document on tablet/mobile */
@media (max-width: 820px) {
    .quote-cols, .quote-cols--foot { grid-template-columns: 1fr; }
    .quote-meta { align-items: flex-start; }
    .quote-meta__set { gap: 1rem 1.2rem; }
    .quote-bar { flex-direction: column; align-items: stretch; }
    .quote-bar__hint { order: 2; text-align: center; }
    .quote-bar__btns { justify-content: stretch; }
    .quote-bar__btns .k-button { flex: 1; }
}

/* role assignment list */
.role-list { display: flex; flex-direction: column; gap: .15rem; max-height: 380px; overflow-y: auto; }

/* page access-denied */
.access-denied { max-width: 460px; margin: 4rem auto; text-align: center; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; padding: 2.4rem 2rem; box-shadow: 0 1px 3px rgba(16,47,56,.06); }
.access-denied__mark { font-size: 2.2rem; }
.access-denied h2 { font: 700 1.4rem var(--font-sans); margin: .6rem 0 .4rem; color: var(--ink); }
.access-denied p { color: var(--muted); font-size: .9rem; margin-bottom: 1.4rem; }

/* ---- GL Imbalances (GlImbalances.razor) --------------------- */
.imb-summary { font-size: .85rem; color: var(--muted); }
.imb-summary__n { font: 700 1rem var(--font-mono); color: #9a6b12; }
.imb-summary__mut { color: var(--muted); }
.imb-summary__sep { margin: 0 .3rem; opacity: .5; }
.imb-neg { color: #b3261e; }
.imb-pos { color: #2c7a4b; }

/* ---- Journal preview panel (JournalPreviewPanel.razor) ------ */
.pill--danger { background: #fbe9e7; color: #b3261e; }
.jrn-prev__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .2rem; }
.jrn-prev__head h4 { margin: 0; }
.jrn-prev__tools { display: flex; align-items: center; gap: .5rem; }
.jrn-prev .jrn-tbl { min-width: 480px; }

/* ---- Journal drill-down dialog (JournalDialog.razor) -------- */
.jrn-title { font-weight: 700; color: var(--ink); }
.jrn-title__ref { font-family: var(--font-mono); font-size: .82rem; color: var(--brass); margin-left: .55rem; }
.jrn { border: 1px solid var(--border); border-top: 2px solid var(--brass); border-radius: 4px;
    padding: .8rem .9rem; margin-bottom: .9rem; background: var(--surface); }
.jrn:last-child { margin-bottom: 0; }
.jrn--draft { border-top-color: #c9a54e; opacity: .95; }
.jrn__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.jrn__id { display: flex; align-items: baseline; gap: .55rem; }
.jrn__code { font: 600 .66rem/1 var(--font-sans); letter-spacing: .06em; color: var(--muted);
    background: var(--brass-soft); padding: .2rem .42rem; border-radius: 3px; }
.jrn__meta { display: flex; align-items: center; gap: .5rem; }
.jrn__date { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.jrn__note { font-size: .8rem; color: var(--muted); margin: .5rem 0 0; }
.jrn-tbl-wrap { overflow-x: auto; margin-top: .6rem; }
.jrn-tbl { width: 100%; border-collapse: collapse; min-width: 460px; }
.jrn-tbl th { text-align: left; font: 600 .68rem/1.2 var(--font-sans); letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted); padding: .3rem .5rem; border-bottom: 1px solid var(--border); }
.jrn-tbl td { padding: .34rem .5rem; border-bottom: 1px solid var(--border-soft, #eee); font-size: .84rem; vertical-align: top; }
.jrn-tbl .r { text-align: right; }
.jrn-acc { display: block; color: var(--text); font-weight: 500; }
.jrn-desc { display: block; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.jrn-tbl tfoot td { border-top: 1.5px solid var(--ink-line); border-bottom: none; font-weight: 700; color: var(--ink); padding-top: .45rem; }
.jrn-tbl__totlbl { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; }
.jrn-tbl__unbal td { color: #9a6b12; }

/* ---- Keep: error boundary + form validation ---------------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }