:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --primary: #5d3fd3;
    --primary-dark: #3b2590;
    --primary-soft: rgba(93,63,211,.12);
    --income: #0d9488;
    --expense: #eb6834;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --radius: 20px;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #05080f;
        --surface: #0d131f;
        --surface-alt: #090d16;
        --border: #232c3f;
        --text: #e2e8f0;
        --text-muted: #94a3b8;
        --primary: #a393ec;
        --primary-dark: #cdc4f5;
        --primary-soft: rgba(163,147,236,.18);
    }
    /* The logo file has dark-gray wordmark text baked into the image itself,
       so it disappears against a dark sidebar — a light plate behind it keeps
       the wordmark readable without needing a separate dark-mode logo asset. */
    :root:not([data-theme="light"]) .sidebar-brand-logo {
        background: #fff;
        border-radius: 12px;
        padding: 8px;
    }
    :root:not([data-theme="light"]) .sidebar-brand-logo--compact {
        padding: 4px;
    }
}
:root[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-alt: #17233b;
    --border: #334155;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --primary: #a393ec;
    --primary-dark: #cdc4f5;
    --primary-soft: rgba(163,147,236,.18);
}
:root[data-theme="dark"] .sidebar-brand-logo {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
}
:root[data-theme="dark"] .sidebar-brand-logo--compact {
    padding: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 236px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Pinned to the viewport (not the full page height) so the footer at the
       bottom — user identity + Keluar — never needs scrolling to reach, no
       matter how long the main content grows. */
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar nav { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sidebar-brand { padding: 2px 16px 4px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--border); margin-bottom: 10px; text-align: center; flex-shrink: 0; }
.sidebar-brand--compact { padding: 2px 16px 2px; }
.sidebar-brand-logo { display: block; width: 150px; height: auto; margin: 0 auto 4px; }
.sidebar-brand-logo--compact { width: auto; height: 84px; margin: 0 auto 2px; }
.sidebar-brand small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.nav-group { padding: 0 10px; margin-bottom: 12px; }
.nav-title { padding: 4px 10px 6px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.nav-title-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
.nav-title-toggle:hover { color: var(--primary); }
.nav-title-toggle::-webkit-details-marker { display: none; }
.nav-title-toggle::marker { content: ''; }
.nav-title-chevron { font-size: 18px; line-height: 1; transition: transform .18s ease; }
.nav-reports-collapse[open] .nav-title-chevron { transform: rotate(90deg); }
.nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin: 1px 0; border-radius: 10px;
    color: var(--text); font-size: 13.5px; font-weight: 500;
}
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.nav-link:hover { background: var(--surface-alt); text-decoration: none; }
.nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.nav-link.active .nav-icon { color: var(--primary); }
button.nav-link { width: 100%; border: none; background: none; font-family: inherit; cursor: pointer; text-align: left; }

.exec-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.exec-scorecard { position: relative; min-width: 0; border-top: 3px solid var(--primary); }
.exec-scorecard-label { padding-right: 30px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.exec-scorecard-value { margin: 8px 0 2px; color: var(--text); font-size: clamp(18px, 2vw, 25px); font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.exec-scorecard-value.is-positive { color: var(--success); }
.exec-scorecard-value.is-warning { color: var(--warning); }
.exec-scorecard-value.is-danger { color: var(--danger); }
.exec-scorecard-hint { color: var(--text-muted); font-size: 12px; margin-top: 5px; }
.exec-scorecard details { margin: 0; border: 0; padding: 0; }
.exec-scorecard details summary.exec-detail-trigger { position: absolute; top: 12px; right: 12px; z-index: 4; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--primary); cursor: pointer; list-style: none; font-size: 0; }
.exec-scorecard details summary.exec-detail-trigger::-webkit-details-marker { display: none; }
.exec-detail-trigger svg { width: 19px; height: 19px; }
.exec-detail-trigger:hover, .exec-detail-trigger:focus-visible { background: var(--primary-soft); outline: none; }
.exec-scorecard .table-wrap { max-width: 100%; }
.exec-scorecard .dash-table { font-size: 12px; }
.exec-scorecard .exec-saldo-table { min-width: 620px; table-layout: fixed; }
.exec-scorecard .exec-saldo-table th:first-child,
.exec-scorecard .exec-saldo-table td:first-child { width: 120px; white-space: nowrap; }
.exec-scorecard .exec-saldo-table th.num,
.exec-scorecard .exec-saldo-table td.num { width: 125px; }
.exec-detail-modal { z-index: 1200; }
.modal-overlay .modal-box.exec-detail-modal-box { width: min(1100px, 96vw); max-width: 1100px; max-height: 90vh; padding: 20px; overflow: auto; }
.exec-detail-modal-header { position: sticky; top: -20px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -20px -20px 16px; padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.exec-detail-modal-header h2 { margin: 0; font-size: 20px; }
.exec-detail-modal-close { flex: 0 0 auto; font-size: 24px; line-height: 1; }
.exec-detail-modal-body .table-wrap { max-width: 100%; overflow-x: auto; }
.exec-detail-modal-open { overflow: hidden; }
.exec-scorecard-wide { grid-column: 1 / -1; }
.exec-scorecard-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.exec-scorecard-heading > strong { color: var(--primary); font-size: 16px; white-space: nowrap; }
.exec-scorecard-wide .exec-scorecard-heading > strong { margin-right: 36px; }
.exec-line-chart { width: 100%; margin: 12px 0 6px; overflow-x: auto; }
.exec-line-chart-svg { display: block; width: 100%; min-width: 760px; height: 270px; overflow: visible; }
.exec-chart-gridline { stroke: var(--border); stroke-width: 1; }
.exec-line-chart-month { fill: var(--text-muted); font: 12px sans-serif; }
.exec-line-series { --series-color: var(--primary); opacity: .82; transition: opacity .16s ease; outline: none; }
.exec-line-series-path { fill: none; stroke: var(--series-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.exec-line-series-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.exec-line-series-point { fill: var(--surface); stroke: var(--series-color); stroke-width: 2; vector-effect: non-scaling-stroke; }
.exec-line-series.is-highlighted { opacity: 1; }
.exec-line-series.is-highlighted .exec-line-series-path { stroke-width: 4.5; }
.exec-line-series.is-highlighted .exec-line-series-point { r: 5; }
.exec-line-series.is-dimmed { opacity: .12; }
.exec-line-series:focus-visible .exec-line-series-path { stroke-width: 4.5; }
.exec-line-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 8px 8px; color: var(--text-muted); font-size: 12px; }
.exec-line-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.exec-line-chart-legend i { display: inline-block; width: 17px; height: 3px; border-radius: 3px; background: var(--series-color); }
@media (max-width: 1100px) { .exec-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .exec-dashboard-grid { grid-template-columns: 1fr; } .exec-scorecard-wide { grid-column: auto; } .exec-scorecard-heading { flex-direction: column; } }

.director-sidebar-collapse-toggle { display: none; }
.director-sidebar-tooltip {
    display: none; position: fixed; z-index: 2000; max-width: 240px;
    padding: 6px 9px; border-radius: 6px; background: var(--text); color: var(--surface);
    font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .2); pointer-events: none;
}
@media (min-width: 861px) {
    .director-sidebar-collapsible .sidebar { transition: width .18s ease; }
    .director-sidebar-collapsible .sidebar-brand { position: relative; }
    .director-sidebar-collapsible .director-sidebar-collapse-toggle {
        display: inline-flex; position: absolute; right: 8px; top: 8px;
        width: 28px; height: 28px; align-items: center; justify-content: center;
        border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
        color: var(--text-muted); font-size: 21px; line-height: 1; cursor: pointer;
    }
    .director-sidebar-collapsible .director-sidebar-collapse-toggle:hover { color: var(--primary); background: var(--surface-alt); }
    .director-sidebar-collapsible .sidebar-brand-logo-symbol { display: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar { width: 72px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-brand { padding: 12px 4px 8px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-brand-logo-full,
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-brand small { display: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-brand-logo-symbol {
        display: block; width: 42px; height: 42px; margin: 0 auto 32px; border-radius: 50%;
    }
    html.director-sidebar-collapsed .director-sidebar-collapsible .director-sidebar-collapse-toggle { right: 22px; top: 59px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .director-sidebar-collapse-toggle span { transform: rotate(180deg); }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-group { padding: 0 8px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-link { justify-content: center; padding: 10px 0; position: relative; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-label,
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-title-chevron { display: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-title,
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-title-toggle { justify-content: center; padding: 8px 0; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer { padding: 8px 4px 0; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer-row { display: flex; flex-direction: column; gap: 8px; padding: 5px 0; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-clock-time,
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-clock-date,
    html.director-sidebar-collapsed .director-sidebar-collapsible .company-pill { display: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-clock-left { justify-content: center; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer form,
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer .nav-link { width: 100% !important; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer .nav-link { justify-content: center; padding: 8px 0 !important; position: relative; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-footer .nav-link .nav-label { display: none; }
}

.sidebar-footer { margin-top: auto; padding: 10px 10px 0; border-top: 1px solid var(--border); flex-shrink: 0; }
/* Both footer rows share the same 2-column grid (not flex space-between) so each
   column's content is centered on the same vertical line regardless of how wide the
   clock/date/pill/button text happens to be — clock+time lines up over Admin, date
   lines up over Keluar. */
.sidebar-footer-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding: 5px 12px; font-size: 13.5px; }
.sidebar-clock-face { flex-shrink: 0; }
.sidebar-clock-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sidebar-clock-time { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sidebar-clock-date { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.content { padding: 24px; flex: 1; }

.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { margin: 0; font-size: 20px; }
.page-header .sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* min-width:0 matters when a .card sits inside a .grid/.grid-main-side track: a wide
   .table-wrap inside it scrolls internally (overflow-x:auto), but that only stops the
   *table* from forcing the card wider — the card itself, as the grid item, still
   defaults to never shrinking below its content's natural min-content width unless
   told otherwise. Without this, on a narrow grid column the card just overflows its
   track with no scrollbar of its own to reach the clipped-off part. */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; min-width: 0; }
.buku-besar-card { padding: 0; }
.buku-besar-card > summary { cursor: pointer; padding: 14px 18px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.buku-besar-card > summary::-webkit-details-marker { display: none; }
.buku-besar-card > summary::before { content: '▸'; margin-right: 10px; color: var(--text); font-size: 20px; line-height: 1; display: inline-block; transition: transform .15s; }
.buku-besar-card[open] > summary::before { transform: rotate(90deg); }
.buku-besar-card-body { padding: 0 18px 16px; }
.recap-detail > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; white-space: nowrap; }
.recap-detail > summary::-webkit-details-marker { display: none; }
.recap-detail > summary::before { content: '▸'; margin-right: 4px; font-size: 10px; color: var(--text-muted); display: inline-block; transition: transform .15s; }
.recap-detail[open] > summary::before { transform: rotate(90deg); }
.recap-detail ul { margin: 6px 0 0; padding-left: 14px; font-size: 12px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.recap-detail ul li { margin-bottom: 2px; }
.chart-line-svg { cursor: crosshair; }
.chart-bar-svg { cursor: pointer; }
.chart-bar { transition: opacity .1s; }
.chart-bar:hover { opacity: .75; }
.chart-tooltip {
    position: absolute; top: 0; left: 0; transform: translate(-50%, -100%);
    background: var(--text); color: var(--bg); font-size: 12px; line-height: 1.4;
    padding: 6px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5;
    box-shadow: var(--shadow);
}
.chart-tooltip strong { display: block; font-size: 13px; }
.card h2, .card h3 { margin-top: 0; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.grid-main-side { grid-template-columns: 2fr 1fr; }
@media (max-width: 860px) { .grid-main-side { grid-template-columns: 1fr; } }

.stat-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 9px; }
.stat-card .label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.stat-card .value.income { color: var(--income); }
.stat-card .value.expense { color: var(--expense); }
.stat-card .value.negative { color: var(--danger); }
/* Generic versions of the above, usable outside .stat-card (e.g. table cells). */
.income { color: var(--income); }
.expense { color: var(--expense); }
.negative { color: var(--danger); }
.stat-compare { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; margin-top: 6px; color: var(--text-muted); }
.stat-compare .sub { font-weight: 400; color: var(--text-muted); margin-left: 2px; }
.stat-compare.trend-good { color: var(--success); }
.stat-compare.trend-bad { color: var(--danger); }
.stat-trend-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.stat-trend-icon svg { width: 18px; height: 18px; }
.stat-trend-icon.trend-good { background: rgba(22,163,74,.12); color: var(--success); }
.stat-trend-icon.trend-bad { background: rgba(220,38,38,.12); color: var(--danger); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
tr:hover td { background: var(--surface-alt); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.sortable th.sortable-col { cursor: pointer; user-select: none; }
table.sortable th.sortable-col:hover { background: var(--surface-alt); }
table.sortable th.sort-asc::after { content: " \25B2"; font-size: 9px; opacity: .65; }
table.sortable th.sort-desc::after { content: " \25BC"; font-size: 9px; opacity: .65; }
.realisasi-pct { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); margin-top: 1px; }
.realisasi-pct-over { color: var(--danger); }
.realisasi-budget { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 1px; }
.realisasi-icon { width: 10px; height: 10px; vertical-align: -1px; margin-right: 3px; flex-shrink: 0; }
.table-wrap { overflow-x: auto; }
.table-wrap-scroll { max-height: 520px; overflow-y: auto; }
/* Mirrors .table-wrap's own horizontal scrollbar right above the table (see
   initTopScrollbars() in app.js) — .table-wrap's native scrollbar sits at the *bottom*
   of the table, which for a long list can be far below the viewport. Hidden by JS
   (display:none) when the table beneath it doesn't actually overflow. */
.table-wrap-top-scroll { overflow-x: auto; overflow-y: hidden; height: 14px; }
.table-wrap-top-scroll > div { height: 1px; }
.table-wrap thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
/* Sticky too, stacked below the label row — top is a rough fallback; JS (initStickyFilterRow)
   measures the label row's real rendered height and overrides it precisely. */
.table-wrap thead tr.filter-row th { position: sticky; top: 33px; padding-top: 4px; padding-bottom: 4px; }
.table-wrap.freeze-first-column thead th:first-child,
.table-wrap.freeze-first-column tbody td:first-child:not([colspan]),
.table-wrap.freeze-first-column tfoot td:first-child:not([colspan]) {
    position: sticky; left: 0; background: var(--surface);
    box-shadow: 2px 0 0 var(--border), 7px 0 10px -9px rgba(15, 23, 42, .55);
}
.table-wrap.freeze-first-column thead th:first-child { z-index: 5; }
.table-wrap.freeze-first-column tbody td:first-child:not([colspan]),
.table-wrap.freeze-first-column tfoot td:first-child:not([colspan]) { z-index: 1; }
.table-wrap.freeze-first-column tr:hover td:first-child:not([colspan]) { background: var(--surface-alt); }
.table-wrap.freeze-first-column .row-group td:first-child:not([colspan]) { background: var(--surface-alt); }
.table-wrap.freeze-first-column .row-resume td:first-child:not([colspan]) { background: var(--surface-alt); z-index: 3; }
.table-viewport-header {
    position: fixed; z-index: 70; overflow: hidden; pointer-events: none;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .1);
}
.table-viewport-header table { margin: 0; table-layout: fixed; }
.table-viewport-header th { background: var(--surface); }
.buku-besar-sticky-summary {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center;
    gap: 12px; padding: 14px 18px; box-sizing: border-box; background: var(--surface);
    border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; pointer-events: auto;
}
.buku-besar-sticky-summary:hover { background: var(--surface-alt); }
.buku-besar-sticky-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.buku-besar-sticky-summary::before { content: '▼'; color: var(--text); font-size: 12px; }
.buku-besar-sticky-summary[aria-expanded="false"]::before { content: '▶'; }
.buku-besar-sticky-summary strong { text-align: center; }
.buku-besar-sticky-summary .num { white-space: nowrap; }
.table-viewport-header.freeze-first-column th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    box-shadow: 2px 0 0 var(--border), 7px 0 10px -9px rgba(15, 23, 42, .55);
}
.filter-row-input { font-size: 12px; padding: 5px 8px; }
.date-range-dropdown { position: relative; display: inline-block; width: 100%; }
.date-range-toggle {
    width: 100%; font-size: 12px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); cursor: pointer; text-align: left; font-family: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.date-range-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); padding: 10px; width: 170px;
}
.date-range-menu.open { display: block; }
.date-range-menu label { display: block; font-size: 11px; font-weight: 600; margin: 8px 0 3px; color: var(--text-muted); }
.date-range-menu label:first-child { margin-top: 0; }
.date-range-reset {
    display: block; width: 100%; margin-top: 10px; padding: 5px 0; border: none; background: none;
    color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: center;
    cursor: pointer; font-family: inherit;
}
.date-range-reset:hover { color: var(--danger); }
.row-group td { background: var(--surface-alt); font-weight: 700; }
.row-total td { font-weight: 700; border-top: 2px solid var(--text); }
.row-resume td { background: var(--primary-soft); font-weight: 700; border-top: 2px solid var(--primary); }

/* Opt-in report/dashboard accents — add these classes to a .card/table where a report
   should read as "branded" (colored spine, brand-colored header text) instead of the
   plain default. Doesn't change .card/table for pages that don't opt in. */
.dash-card { border-left: 4px solid var(--primary); }
.dash-table thead th { color: var(--primary); }

.btn {
    -webkit-appearance: none; appearance: none; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; margin: 0;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; filter: brightness(.88); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-soft-danger { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.25); color: var(--danger); }
.btn-soft-danger:hover { background: rgba(220,38,38,.18); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn-icon-round { width: 38px; height: 38px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.btn-icon-round svg { width: 18px; height: 18px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.export-dropdown { position: relative; display: inline-block; }
.export-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); min-width: 150px; overflow: hidden; padding: 4px;
}
.export-dropdown-menu.open { display: block; }
.export-dropdown-menu a, .export-dropdown-menu button {
    display: block; width: 100%; padding: 7px 10px; border-radius: 6px; color: var(--text);
    font-size: 13px; font-weight: 600; text-align: left; background: none; border: none;
    cursor: pointer; font-family: inherit;
}
.export-dropdown-menu a:hover, .export-dropdown-menu button:hover { background: var(--surface-alt); text-decoration: none; }
.notif-bell-wrap { position: relative; display: inline-block; }
.notif-bell-toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
}
.notif-bell-toggle:hover { background: var(--surface-alt); }
.notif-bell-toggle svg { width: 19px; height: 19px; }
.notif-badge {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    line-height: 18px; text-align: center;
}
.notif-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); width: 320px; max-width: 90vw; overflow: hidden; padding: 4px;
}
.notif-dropdown-menu.open { display: block; }
.notif-dropdown-title { padding: 7px 10px 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.notif-empty { padding: 10px; font-size: 13px; color: var(--text-muted); }
.notif-item {
    display: block; padding: 9px 10px; border-radius: 6px; font-size: 13px; color: var(--text);
    text-decoration: none; border-left: 3px solid transparent;
}
a.notif-item:hover { background: var(--surface-alt); text-decoration: none; }
.notif-item.notif-error { border-left-color: var(--danger); }
.notif-item.notif-warning { border-left-color: #d97706; }
.add-trx-dropdown { position: relative; display: inline-block; }
.add-trx-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: var(--shadow); min-width: 200px; overflow: hidden; padding: 4px;
}
.add-trx-menu.open { display: block; }
.add-trx-menu a {
    display: block; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--text);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.add-trx-menu a:hover { background: var(--surface-alt); text-decoration: none; }
.quick-date-btn { padding: 2px 6px; font-size: 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }

/* Kavling bulk-add grid: an editable spreadsheet-style table that IS the input — no
   separate textarea/preview pair. Cells are borderless so they read as sheet cells. */
.spreadsheet-grid-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.spreadsheet-grid { font-size: 13px; }
.spreadsheet-grid th { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); }
.spreadsheet-grid td { padding: 0; border-bottom: 1px solid var(--border); }
.spreadsheet-grid tr:last-child td { border-bottom: none; }
.spreadsheet-grid-rownum { width: 34px; text-align: center; color: var(--text-muted); font-size: 12px; background: var(--surface-alt); }
.spreadsheet-grid-rowdel { width: 34px; }
.spreadsheet-grid td.spreadsheet-grid-rowdel-cell { text-align: center; }
.spreadsheet-grid tr.row-invalid td:not(.spreadsheet-grid-rownum):not(.spreadsheet-grid-rowdel-cell) { background: rgba(220,38,38,.04); }
.spreadsheet-grid input {
    width: 100%; border: none; border-radius: 0; background: none; padding: 7px 8px;
    font-size: 13px; font-family: inherit; color: var(--text);
}
.spreadsheet-grid input:focus { outline: 2px solid var(--primary); outline-offset: -2px; position: relative; z-index: 1; }
.spreadsheet-grid input.num-cell { text-align: right; }
.spreadsheet-grid-del-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer;
}
.spreadsheet-grid-del-btn:hover { background: rgba(220,38,38,.1); color: var(--danger); }
.spreadsheet-grid-del-btn svg { width: 13px; height: 13px; }
.modal-box.property-legal-sheet-modal { width:calc(100vw - 32px); max-width:none; height:calc(100vh - 32px); max-height:none; overflow:hidden; padding:18px; }
.property-legal-sheet-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.property-legal-sheet-header h3 { margin:0 0 4px; }
.property-legal-sheet-modal form { height:calc(100% - 64px); display:flex; flex-direction:column; }
.property-legal-sheet-wrap { width:100%; flex:1; min-height:0; overflow:auto; border:1px solid var(--border); }
.property-legal-sheet-modal .modal-actions { flex:none; margin-top:12px; }
.property-legal-sheet { min-width:4300px; border-collapse:separate; border-spacing:0; }
.property-legal-sheet th { position:sticky; top:0; z-index:3; min-width:145px; padding:9px 8px; background:var(--surface-alt); border-right:1px solid var(--border); border-bottom:1px solid var(--border); white-space:nowrap; }
.property-legal-sheet th:nth-child(1) { min-width:48px; width:48px; left:0; z-index:6; }
.property-legal-sheet th:nth-child(2) { min-width:180px; left:48px; z-index:6; }
.property-legal-sheet th:nth-child(3) { min-width:125px; left:228px; z-index:6; }
.property-legal-sheet td { border-right:1px solid var(--border); border-bottom:1px solid var(--border); min-width:145px; }
.property-legal-sheet td:nth-child(1) { position:sticky; left:0; z-index:2; min-width:48px; width:48px; }
.property-legal-sheet td:nth-child(2) { position:sticky; left:48px; z-index:2; min-width:180px; }
.property-legal-sheet td:nth-child(3) { position:sticky; left:228px; z-index:2; min-width:125px; }
.property-legal-sheet .sheet-rownum,.property-legal-sheet .sheet-locked { padding:7px 8px; background:var(--surface-alt); white-space:nowrap; }
.property-legal-sheet .sheet-rownum { text-align:center; color:var(--text-muted); }
.dash-trend-header { display:grid; gap:12px; margin-bottom:12px; }
.dash-trend-header h3 { margin:0; }
.dash-trend-filter { display:grid; gap:6px; margin:0; }
.dash-trend-fields { display:grid; grid-template-columns:minmax(180px,320px) auto; justify-content:start; align-items:end; gap:8px; }
.dash-trend-filter label { display:grid; gap:4px; min-width:0; color:var(--text-muted); font-size:10px; font-weight:700; line-height:1.2; text-transform:uppercase; }
.dash-trend-filter input[type="month"] { width:100%; min-width:0; padding:7px 9px; font-size:12px; }
.dash-trend-fields .btn { min-height:34px; white-space:nowrap; }
.dash-trend-hint { margin:0; color:var(--text-muted); font-size:11px; line-height:1.35; }
@media (max-width: 640px) {
    .dash-trend-fields { grid-template-columns:1fr; }
    .dash-trend-fields .btn { grid-column:1 / -1; width:100%; }
}
.js-quick-date.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-in { background: rgba(42,120,214,.12); color: var(--income); }
.badge-out { background: rgba(235,104,52,.12); color: var(--expense); }
.badge-adj { background: rgba(100,116,139,.15); color: var(--text-muted); }
.badge-debit { background: rgba(22,163,74,.12); color: var(--success); }
.badge-kredit { background: rgba(220,38,38,.12); color: var(--danger); }

.table-actions { display: flex; gap: 2px; align-items: center; }
.action-link {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; font-family: inherit;
}
.action-link:hover { text-decoration: underline; }
.action-link-danger { color: var(--danger); }

.icon-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; border-radius: 7px; background: none;
    color: var(--text-muted); cursor: pointer;
}
.icon-action svg { width: 15px; height: 15px; }
.icon-action:hover { background: var(--surface-alt); color: var(--primary); }
.icon-action-danger { color: var(--danger); }
.icon-action-danger:hover { background: rgba(220,38,38,.1); color: var(--danger); }
.row-more-cell { position: relative; width: 42px; min-width: 42px; overflow: visible; }
.row-more-menu { position: relative; display: inline-block; }
.row-more-menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; color: var(--text-muted);
    cursor: pointer; font-size: 23px; font-weight: 700; line-height: 1; list-style: none;
    user-select: none;
}
.row-more-menu > summary::-webkit-details-marker { display: none; }
.row-more-menu > summary::marker { content: ''; }
.row-more-menu > summary:hover,
.row-more-menu[open] > summary { background: var(--surface-alt); color: var(--primary); }
.row-more-popover {
    position: absolute; z-index: 40; top: calc(100% + 4px); right: 0;
    min-width: 132px; padding: 5px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); box-shadow: var(--shadow); text-align: left;
}
tbody tr:nth-last-child(-n+3) .row-more-popover { top: auto; bottom: calc(100% + 4px); }
.row-more-popover form { margin: 0; }
.row-more-action {
    display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px;
    box-sizing: border-box; padding: 7px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--text); cursor: pointer; font: inherit;
    font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.row-more-action svg { width: 15px; height: 15px; flex: 0 0 auto; }
.row-more-action:hover { background: var(--surface-alt); color: var(--primary); text-decoration: none; }
.row-more-action-danger { color: var(--danger); }
.row-more-action-danger:hover { color: var(--danger); background: rgba(220,38,38,.1); }
.pengajuan-decision-actions { flex-wrap: nowrap; min-width: 104px; }
.pengajuan-decision-actions .icon-action { width: 30px; height: 30px; border-radius: 9px; }
.pengajuan-action-approve { color: var(--success); background: rgba(22,163,74,.10); }
.pengajuan-action-approve:hover { color: var(--success); background: rgba(22,163,74,.20); }
.pengajuan-action-partial { color: #d97706; background: rgba(217,119,6,.11); }
.pengajuan-action-partial:hover { color: #b45309; background: rgba(217,119,6,.22); }
.pengajuan-action-reject { color: var(--danger); background: rgba(220,38,38,.10); }
.pengajuan-action-reject:hover { color: var(--danger); background: rgba(220,38,38,.20); }
.pengajuan-filter-card { padding: 18px 20px; }
.pengajuan-filter-heading { display: flex; align-items: baseline; gap: 12px; margin-bottom: 15px; }
.pengajuan-filter-heading h3 { margin: 0; }
.pengajuan-filter-form { max-width: none; display: grid; gap: 15px; }
.pengajuan-filter-section { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 12px; }
.pengajuan-filter-label { padding-top: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.pengajuan-cluster-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pengajuan-cluster-option { min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); font-size: 13px; }
.pengajuan-cluster-option label { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13px; line-height: 1.25; font-weight: 500; }
.pengajuan-cluster-option input { width: auto; flex-shrink: 0; }
.pengajuan-cluster-option .filter-only { font-size: 11px; color: var(--text-muted); text-decoration: none; }
.pengajuan-cluster-option .filter-only:hover { color: var(--primary); text-decoration: underline; }
.pengajuan-cluster-all { justify-content: flex-start; font-weight: 700; background: var(--primary-soft); color: var(--primary); }
.pengajuan-period-section { grid-template-columns: 90px minmax(155px, 190px) minmax(155px, 190px) minmax(400px, 1fr); align-items: end; }
.pengajuan-period-section .field { margin: 0; }
.pengajuan-date-field input { width: 100%; }
.pengajuan-quick-dates { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 7px; }
.pengajuan-quick-dates .btn { white-space: nowrap; }
@media (max-width: 1100px) {
    .pengajuan-cluster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pengajuan-period-section { grid-template-columns: 90px repeat(2, minmax(150px, 1fr)); }
    .pengajuan-quick-field { grid-column: 2 / -1; }
}
@media (max-width: 700px) {
    .pengajuan-filter-heading { display: block; }
    .pengajuan-filter-heading .sub { display: block; margin-top: 4px; }
    .pengajuan-filter-section, .pengajuan-period-section { grid-template-columns: 1fr; }
    .pengajuan-filter-label { padding-top: 0; }
    .pengajuan-cluster-grid { grid-template-columns: 1fr; }
    .pengajuan-quick-field { grid-column: auto; }
    .pengajuan-quick-dates { grid-template-columns: repeat(2, 1fr); }
}
.pengajuan-cash-action {
    width: 38px; height: 38px; border: 1px solid rgba(42, 120, 214, .28);
    background: var(--primary-soft); color: var(--primary);
}
.pengajuan-cash-action svg { width: 22px; height: 22px; }
.pengajuan-cash-action:hover { background: rgba(42, 120, 214, .18); }
.receipt-upload-form { display: inline-flex; margin: 0; }
.receipt-upload-form input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.field .hint { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
input, select, textarea {
    width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.field-row { display: flex; gap: 12px; }
.field-row > .field { flex: 1; }
.bp-recipient-row select, .bp-recipient-row input { min-width: 0; }
.commission-recipient-row { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(130px,.8fr) minmax(0,1fr) 38px;gap:8px;align-items:end;padding-bottom:10px;border-bottom:1px solid var(--border); }
.commission-recipient-row .field { margin:0;min-width:0; }
.commission-recipient-row .icon-action { width:38px;height:38px;margin-bottom:1px; }
.commission-total { display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-weight:700; }
.radio-row { display: flex; gap: 16px; }
.radio-row label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.radio-row input { width: auto; }

/* Account picker: one field that's both a dropdown and a type-to-filter search box.
   min-width:0 on all three: a <select> with hundreds of long chart-of-accounts options
   (some 50+ chars) has a huge intrinsic min-content width that flexbox honors over an
   ancestor's max-width by default — this is what actually caps it at the .field's width
   instead of blowing past it, in whichever of the two is visible (raw select before JS
   enhancement runs, or the combobox after). */
.combobox, .combobox-input, select.account-picker { min-width: 0; }
.combobox { position: relative; }
.combobox-list {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
    max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}
.combobox-list.open { display: block; }
.combobox-option { padding: 8px 12px; cursor: pointer; font-size: 14px; }
.combobox-option:hover, .combobox-option.active { background: var(--surface-alt); }
.combobox-option.selected { font-weight: 600; color: var(--primary); }
.combobox-empty { padding: 8px 12px; color: var(--text-muted); font-size: 13px; }
.combobox-input.invalid { border-color: var(--danger); }

.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }
.alert-success { background: rgba(22,163,74,.12); color: var(--success); border: 1px solid rgba(22,163,74,.3); }
.alert-error { background: rgba(220,38,38,.12); color: var(--danger); border: 1px solid rgba(220,38,38,.3); }

.modal-overlay {
    position: fixed; inset: 0; z-index: 1000; padding: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .5);
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
    width: 100%; max-width: 360px; background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
    padding: 22px; transform: translateY(-10px); transition: transform .15s ease;
    /* Forms taller than the viewport (e.g. Budgeting's on a short/zoomed-in laptop
       screen) scroll inside the box instead of clipping past the screen edge with no
       way to reach the submit button. */
    max-height: calc(100vh - 32px); overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-box p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.receipt-modal-box { max-width: 900px; overflow: hidden; }
.receipt-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.receipt-modal-header h3 { margin: 0; }
.receipt-zoom-controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.receipt-zoom-button { width: 34px; height: 34px; border-radius: 6px; font-size: 22px; line-height: 1; background: var(--surface); }
.receipt-zoom-button:disabled { opacity: .4; cursor: not-allowed; }
.receipt-zoom-level {
    min-width: 58px; height: 34px; padding: 0 8px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600;
}
.receipt-modal-body {
    height: min(70vh, 720px); overflow: auto; text-align: center;
    background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: 8px; overscroll-behavior: contain;
}
.receipt-modal-media { display: block; margin: 0 auto; transition: width .15s ease, height .15s ease; }
.receipt-modal-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
.receipt-modal-frame { width: 100%; height: 70vh; border: none; background: #fff; }
.receipt-modal-box > .modal-actions { margin-top: 14px; }

@media (max-width: 640px) {
    .receipt-modal-box { padding: 16px; }
    .receipt-modal-header { align-items: flex-start; flex-direction: column; gap: 10px; }
    .receipt-modal-body { height: 65vh; }
}

.tree-row { display: flex; align-items: center; gap: 6px; }
.tree-indent { display: inline-block; }
.tree-group { font-weight: 700; }
.tree-code { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-right: 8px; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 8px 16px; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 600; }
.tab.active { color: var(--primary); border-color: var(--primary); }

.theme-toggle, .icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--text); }
.icon-btn { background: none; }
.theme-toggle { background: var(--surface); }
.theme-toggle .theme-icon { width: 17px; height: 17px; }
.theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-toggle .theme-icon-moon { display: none; }
}
.toggle-all-icon { width: 18px; height: 18px; }

/* Floating "back to top" button, shown on every page once scrolled down a bit. */
.back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .18);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, color .15s, border-color .15s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--primary); border-color: var(--primary); }
.back-to-top svg { width: 19px; height: 19px; }
.toggle-all-icon-collapse { display: none; }
#toggle-all-buku-besar.expanded .toggle-all-icon-expand { display: none; }
#toggle-all-buku-besar.expanded .toggle-all-icon-collapse { display: block; }
.icon-btn:hover { background: var(--surface-alt); }

.company-pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar .dow { font-size: 11px; text-transform: uppercase; color: var(--text-muted); text-align: center; padding: 4px; }
.calendar .day { min-height: 90px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--surface); font-size: 12px; }
.calendar .day.empty { background: transparent; border: none; }
.calendar .day .date-num { font-weight: 700; margin-bottom: 4px; }
.calendar .day .amt { font-size: 11px; padding: 2px 6px; border-radius: 6px; margin-top: 2px; display: block; }
.calendar .day .amt.aman { background: rgba(22,163,74,.12); color: var(--success); }
.calendar .day .amt.kurang { background: rgba(220,38,38,.12); color: var(--danger); }

.revision-item { border-left: 2px solid var(--border); padding: 6px 0 6px 12px; margin-bottom: 4px; }
.revision-item .meta { color: var(--text-muted); font-size: 12px; }

/* ---- Mobile: sidebar becomes an off-canvas drawer, opened via the hamburger button in
   #mobile-topbar — a small bar that exists purely for mobile and is independent of the
   desktop .topbar (which initTopbarMerge() in app.js removes on every screen size,
   merging its theme-toggle/bell into the page header instead). See
   initTopbarMerge()/initSidebarToggle() in app.js. ---- */
.sidebar-toggle { display: none; }
.mobile-topbar { display: none; }
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; z-index: 890;
    background: rgba(15, 23, 42, .5);
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.sidebar-backdrop.open { opacity: 1; visibility: visible; }

@media (max-width: 860px) {
    /* Only here, not globally — at this width .sidebar switches to position:fixed +
       translateX(-100%) when closed, and in WebKit/Safari specifically a fixed +
       transformed element still counts toward the document's scrollable width even
       though it's rendered off-screen, which let the closed sidebar drag the whole
       mobile page into a horizontal pan. At desktop width .sidebar is position:sticky
       instead (no transform), which never had that problem — and putting this on
       <html> unconditionally there was actively breaking that sticky positioning. */
    html, body { overflow-x: hidden; }
    .mobile-topbar {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
        position: sticky; top: 0; z-index: 80;
    }
    /* Theme toggle + notif bell get moved here by initTopbarMerge() — pushed to the far
       right, next to the hamburger on the left, instead of a separate row below. */
    .mobile-topbar #theme-toggle { margin-left: auto; }
    .sidebar-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
        background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
    }
    .sidebar-toggle:hover { background: var(--surface-alt); }
    .sidebar-toggle svg { width: 19px; height: 19px; }
    .sidebar-backdrop { display: block; }

    .content { padding: 16px; }

    .sidebar {
        position: fixed; top: 0; left: 0; z-index: 900;
        width: 260px; max-width: 82vw; height: 100vh;
        transform: translateX(-100%);
        box-shadow: none;
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 0 20px 50px rgba(15, 23, 42, .35); }

    .page-header { flex-direction: column; align-items: flex-start; }
    .field-row { flex-direction: column; gap: 14px; }
    .bp-recipient-row { grid-template-columns: 1fr 38px !important; }
    .bp-recipient-row .field:first-child { grid-column: 1 / -1; }
    .commission-recipient-row { grid-template-columns:1fr 38px; }
    .commission-recipient-row .field { grid-column:1 / -1; }
    .commission-recipient-row .icon-action { grid-column:2;grid-row:3; }
    .modal-box { padding: 18px; }
    .card { padding: 14px; }

    /* Budget kalender: still 7 columns (a month grid needs all of them to read
       correctly) but each cell shrinks so it fits a single-column mobile width. */
    .calendar { gap: 3px; }
    .calendar .dow { font-size: 9.5px; padding: 2px; }
    .calendar .day { min-height: 52px; padding: 3px; font-size: 10.5px; }
    .calendar .day .date-num { margin-bottom: 1px; }
    .calendar .day .amt { font-size: 9px; padding: 1px 3px; }
}

.print-only { display: none; }

/* Kavling: related financial columns read as visual groups while the table is
   scrolled horizontally. Body fills stay deliberately light so numbers and row
   dividers remain easy to scan in both striped and non-striped rows. */
table th.property-col-sale { background: rgba(59, 130, 246, .18); }
table td.property-col-sale { background: rgba(59, 130, 246, .075); }
table th.property-col-ptb { background: rgba(245, 158, 11, .22); }
table td.property-col-ptb { background: rgba(245, 158, 11, .085); }
table th.property-col-legal { background: rgba(16, 185, 129, .18); }
table td.property-col-legal { background: rgba(16, 185, 129, .07); }
table th.property-col-progress { background: rgba(6, 182, 212, .18); }
table td.property-col-progress { background: rgba(6, 182, 212, .07); }
table th.property-col-construction { background: rgba(139, 92, 246, .18); }
table td.property-col-construction { background: rgba(139, 92, 246, .07); }
table .property-group-start { border-left: 2px solid rgba(100, 116, 139, .32); }
table .property-group-end { border-right: 2px solid rgba(100, 116, 139, .32); }

/* Kavling: keep the row actions and identity visible while the many financial
   columns scroll horizontally. In Gabungan, Cluster sits between Actions and
   Kavling; in a single-cluster view Kavling moves directly next to Actions. */
.property-table .property-sticky-actions,
.property-table .property-sticky-cluster,
.property-table .property-sticky-kavling {
    position: sticky;
    background: var(--surface);
}
.property-table .property-sticky-actions {
    left: 0;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
}
.property-table .property-sticky-cluster {
    left: 96px;
    width: 116px;
    min-width: 116px;
    max-width: 116px;
}
.property-table .property-sticky-kavling {
    left: 96px;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    white-space: nowrap;
    box-shadow: 2px 0 0 var(--border), 9px 0 12px -11px rgba(15, 23, 42, .75);
}
.property-table.property-table-gabungan .property-sticky-kavling { left: 212px; }
.property-table thead .property-sticky-actions,
.property-table thead .property-sticky-cluster,
.property-table thead .property-sticky-kavling { z-index: 7; }
.property-table tbody .property-sticky-actions,
.property-table tbody .property-sticky-cluster,
.property-table tbody .property-sticky-kavling { z-index: 3; }
.property-table tbody tr:hover .property-sticky-actions,
.property-table tbody tr:hover .property-sticky-cluster,
.property-table tbody tr:hover .property-sticky-kavling { background: var(--surface-alt); }

/* The extended legal profile remains available without making the everyday
   Kavling view excessively wide. It is revealed explicitly from the header. */
.property-table .property-legal-detail-column { display: none; }
.property-table.show-legal-details .property-legal-detail-column { display: table-cell; }
.property-legal-detail-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: .8125rem;
    font-weight: 600;
}
.property-legal-detail-toggle {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font: 600 1.25rem/1 inherit;
    cursor: pointer;
}
.property-legal-detail-toggle:hover { background: var(--primary-soft); color: var(--primary); }

@media print {
    .sidebar, .topbar, .no-print, .table-wrap-top-scroll, .table-viewport-header { display: none !important; }
    .main { display: block !important; }
    .content { padding: 0; }
    body { background: #fff; }
    .card { box-shadow: none; border: none; padding: 0; }
    /* A tab group only shows its active panel on screen — printing needs every panel visible,
       each labeled again since its .tab button (hidden via .no-print) isn't there to say which is which. */
    .tab-panel[hidden] { display: block !important; }
    .print-only { display: block; }
}

.print-letterhead { text-align: center; margin-bottom: 16px; }
.print-letterhead h1 { margin: 0; font-size: 18px; }
.print-letterhead .period { color: var(--text-muted); margin-top: 2px; }

/* Login logo: the wordmark is purple, so give it a light plate in dark mode (same idea as the sidebar logo). */
.auth-logo { display: block; margin: 0 auto 16px; max-width: 230px; width: 100%; height: auto; }
:root[data-theme="dark"] .auth-logo { background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-logo { background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
}