:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --primary: #3f58a4;
    --primary-dark: #273766;
    --primary-soft: rgba(63,88,164,.12);
    --income: #2a78d6;
    --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: #8d9ed3;
        --primary-dark: #bdc7e6;
        --primary-soft: rgba(141,158,211,.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: #8d9ed3;
    --primary-dark: #bdc7e6;
    --primary-soft: rgba(141,158,211,.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; }
/* The page itself must never pan sideways (only tables scroll horizontally, inside their own .table-wrap) —
   otherwise the sticky sidebar slides off-screen with the page. On <body> only, with <html> left visible, the
   value propagates to the viewport instead of making <body> a scroll container, so position:sticky keeps working
   (setting it on <html> as well is what broke the desktop sticky sidebar before — see the mobile rule below). */
body { overflow-x: hidden; }
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;
    z-index: 100;
    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: 108px; 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); }
/* Director's sidebar "Laporan": the sub-menu pops out beside its item instead of expanding inline
   (position and top are set from JS in initNavPopup). Collapsed-sidebar flyouts keep their own rules. */
html:not(.director-sidebar-collapsed) .nav-popup[open] > .nav-reports-menu {
    position: fixed; z-index: 2100; width: 200px; padding: 7px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); box-shadow: 0 10px 28px rgba(15,23,42,.18);
}
.nav-popup > summary:focus:not(:focus-visible) { outline: none; }
.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: 12px; }
.exec-scorecard { position: relative; min-width: 0; border-top: 3px solid var(--primary); }
.exec-scorecard:not(.exec-dashboard-analytics) { padding: 14px 18px; }
.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(14px, 1.5vw, 21px); font-weight: 750; line-height: 1.2; white-space: nowrap; }
.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; }
.exec-breakdown-toggle { background: none; border: 0; padding: 0 6px 0 0; cursor: pointer; color: var(--text-muted); font-size: 11px; line-height: 1; vertical-align: middle; }
.exec-breakdown-toggle:hover { color: var(--primary); }
.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-metric-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.exec-metric-card:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.exec-metric-card:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.exec-metric-card:nth-child(4) { grid-area: 1 / 4 / 2 / 5; }
.exec-metric-card:nth-child(5) { grid-area: 2 / 1 / 3 / 2; }
.exec-metric-card:nth-child(6) { grid-area: 2 / 2 / 3 / 3; }
.exec-metric-card:nth-child(7) { grid-area: 2 / 3 / 3 / 4; }
.exec-metric-card:nth-child(8) { grid-area: 2 / 4 / 3 / 5; }
.exec-analytics-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(330px, 1fr); gap: 12px; align-items: stretch; }
.exec-sales-overview { min-width: 0; padding: 16px 18px; }
.exec-budget-donut-card { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; }
.exec-budget-donut-card h3 { margin: 0 0 8px; font-size: .95rem; }
.exec-budget-donut-card .exec-budget-donut { width: min(100%, 280px); }
.exec-budget-donut-card .exec-budget-legend { flex-wrap: nowrap; gap: 8px 14px; font-size: .78rem; }
.exec-budget-detail { align-self: stretch; margin-top: 12px; }
.exec-budget-detail summary { cursor: pointer; color: var(--primary); font-size: .82rem; font-weight: 650; }
.exec-budget-detail .table-wrap { margin-top: 8px; max-height: 220px; overflow: auto; }
.exec-budget-donut { display: block; width: min(100%, 280px); height: auto; }
.exec-budget-donut-total { fill: var(--muted); font-size: 7px; }
.exec-budget-donut-amount { fill: var(--text); font-size: 6px; font-weight: 700; }
.exec-budget-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; font-size: .82rem; }
.exec-budget-legend span { display: inline-flex; align-items: center; gap: 6px; }
.exec-budget-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); }
.exec-budget-legend i.is-realized { background: var(--primary-dark); }
/* Speedometer for Anggaran vs Realisasi: half circle, colour zones left of the centre (= 100% anggaran), red past it. */
.exec-budget-donut-card .exec-budget-gauge { width: min(100%, 280px); }
.exec-budget-gauge { display: block; height: auto; }
.exec-budget-gauge-tick { fill: var(--muted); font-size: 7px; }
.exec-budget-gauge-value { fill: var(--text); font-size: 11px; font-weight: 700; }
.exec-budget-gauge-needle { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.exec-budget-gauge-hub { fill: var(--text); }
.exec-budget-gauge-sub { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.exec-budget-totals { display: grid; gap: 4px; width: 100%; max-width: 320px; margin-top: 8px; color: var(--muted); font-size: .82rem; }
.exec-budget-totals span { display: flex; justify-content: space-between; gap: 10px; }
.exec-budget-totals b { color: var(--text); text-align: right; }
.exec-budget-empty, .exec-budget-no-data { color: var(--muted); padding: 18px 0; }
.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-sales-overview .exec-scorecard-heading > strong { margin-right: 36px; }
.exec-line-chart { width: 100%; margin: 8px 0 4px; overflow-x: auto; }
.exec-line-chart-svg { display: block; width: 100%; min-width: 0; height: 190px; overflow: visible; }
.exec-chart-gridline { stroke: var(--border); stroke-width: 1; }
.exec-line-chart-month { fill: var(--text-muted); font: 18px 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)); } .exec-metric-card:nth-child(n) { grid-area: auto; } .exec-analytics-row { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); } .exec-line-chart-svg { height: 220px; } }
@media (max-width: 640px) { .exec-dashboard-grid { grid-template-columns: 1fr; } .exec-metric-card:nth-child(n) { grid-area: auto; } .exec-analytics-row { grid-template-columns: 1fr; } .exec-scorecard-heading { flex-direction: row; } }

.exec-company-filter { padding: 12px 20px; }
.exec-company-filter form.exec-company-filter-form,
.exec-company-filter .exec-company-filter-options { gap: 8px 20px; }
.exec-company-filter .exec-company-filter-options { display: flex; flex-wrap: wrap; align-items: center; }
.exec-company-filter .exec-company-filter-options > label,
.exec-company-filter .exec-company-filter-options > span { flex: 0 0 auto; }
.exec-company-filter input[type="checkbox"] { flex: 0 0 16px; width: 16px; height: 16px; padding: 0; margin: 0; }
.exec-company-filter form { gap: 0; }

.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; }
    /* Scrollable (menus below the fold must stay reachable) with the scrollbar hidden to keep the slim rail clean.
       overflow-y:auto would clip an absolutely-positioned flyout, so the flyout is position:fixed instead; its top
       is set from JS on hover (initCollapsedNavFlyouts). */
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar nav::-webkit-scrollbar { display: none; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse { position: relative; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse > .nav-reports-menu {
        display: none; position: fixed; z-index: 2100; left: 82px; top: 0;
        width: 190px; padding: 7px; border: 1px solid var(--border); border-radius: 10px;
        background: var(--surface); box-shadow: 0 10px 28px rgba(15,23,42,.18);
    }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse:hover > .nav-reports-menu,
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse:focus-within > .nav-reports-menu { display: block; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse > .nav-reports-menu .nav-link { justify-content: flex-start; padding: 9px 12px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .nav-reports-collapse > .nav-reports-menu .nav-label { display: inline; white-space: nowrap; }
    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; background: var(--surface); position: relative; z-index: 1; }
/* 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; }

/* overflow-x:clip (not hidden) so anything poking out past .main's right edge can't widen the page into
   an empty strip + horizontal page scroll, while still not becoming a scroll container (sticky headers keep working). */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.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; }
/* Realisasi Biaya Proyek: "No" and "Jenis Pekerjaan" stay pinned while the month columns scroll
   sideways. Unconditional (no JS overflow toggle) so the mirrored viewport header, which copies
   this table's class, pins the same two columns. Second column's left = first column's width. */
.realisasi-frozen-table th:nth-child(1), .realisasi-frozen-table td:nth-child(1):not([colspan]) { width: 48px; min-width: 48px; max-width: 48px; }
.realisasi-frozen-table th:nth-child(2), .realisasi-frozen-table td:nth-child(2) { min-width: 160px; }
.realisasi-frozen-table th:nth-child(-n+2),
.realisasi-frozen-table tbody td:nth-child(-n+2):not([colspan]),
.realisasi-frozen-table tfoot td:first-child {
    position: sticky; background: var(--surface);
}
.realisasi-frozen-table th:nth-child(1), .realisasi-frozen-table tbody td:nth-child(1):not([colspan]), .realisasi-frozen-table tfoot td:first-child { left: 0; }
.realisasi-frozen-table th:nth-child(2), .realisasi-frozen-table tbody td:nth-child(2):not([colspan]) { left: 48px; box-shadow: 2px 0 0 var(--border), 7px 0 10px -9px rgba(15, 23, 42, .55); }
.realisasi-frozen-table tfoot td:first-child { box-shadow: 2px 0 0 var(--border), 7px 0 10px -9px rgba(15, 23, 42, .55); }
.realisasi-frozen-table th:nth-child(-n+2) { z-index: 5; }
.realisasi-frozen-table tbody td:nth-child(-n+2):not([colspan]), .realisasi-frozen-table tfoot td:first-child { z-index: 1; }
.realisasi-frozen-table tbody tr:hover td:nth-child(-n+2):not([colspan]) { background: var(--surface-alt); }

.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 18px 30px; }
.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-excel-download { flex:none; white-space:nowrap; background:#217346; border-color:#217346; color:#fff; }
.property-legal-excel-download:hover { background:#185c37; border-color:#185c37; color:#fff; }
.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:14px; margin-bottom:6px; }
.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-team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pengajuan-scorecards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.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-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pengajuan-scorecards { 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, .pengajuan-team-grid, .pengajuan-scorecards { 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-pdf { padding: 12px 0; }
.receipt-modal-pdf-page { display: block; margin: 0 auto 12px; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); border-radius: 4px; max-width: none; }
.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; }
#receipt-download[hidden] { display: none; }
/* Loading/empty/error/pdf states inside #receipt-modal-body (see showReceiptState() and
   the PDF branch of renderReceipt() in app.js) — shown instead of the <img>/<iframe>
   preview, so it needs to fill the same box and read clearly on its own. */
.receipt-modal-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; height: 100%; min-height: 260px; padding: 24px; text-align: center;
}
.receipt-modal-state strong { font-size: 16px; color: var(--text); }
.receipt-modal-state span { font-size: 13px; color: var(--text-muted); max-width: 420px; }
.receipt-modal-state-error strong { color: var(--danger); }
.receipt-modal-state .btn { margin-top: 4px; }

@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-history,
.property-table .property-sticky-number,
.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-unified .property-catalog-history-col,
.property-table-unified .property-catalog-history-cell { display:none; }
.property-table-unified .property-sticky-history { left:0; width:42px; min-width:42px; max-width:42px; padding-left:4px !important; padding-right:4px !important; text-align:center; }
.property-table-unified .property-sticky-actions { left:42px; }
.property-table-unified .property-sticky-number { left:138px; width:52px; min-width:52px; max-width:52px; white-space:nowrap; }
.property-table-unified .property-sticky-cluster { left:190px; }
.property-table-unified .property-sticky-kavling,
.property-table-unified.property-table-gabungan .property-sticky-kavling { left:306px; }
.property-table-unified .property-sticky-history .sr-only { display:none; }
.property-table-unified-legal .property-sticky-history { width:36px; min-width:36px; max-width:36px; padding:0 !important; }
.property-table-unified-legal .property-sticky-actions { left:36px; width:36px; min-width:36px; max-width:36px; padding:0 2px !important; text-align:left; }
.property-table-unified-legal .property-sticky-actions .table-actions { justify-content:flex-start; }
.property-table-unified-legal .property-sticky-number { left:72px; }
.property-table-unified-legal .property-sticky-cluster { left:124px; }
.property-table-unified-legal .property-sticky-kavling,
.property-table-unified-legal.property-table-gabungan .property-sticky-kavling { left:240px; }
.property-table thead .property-sticky-history,
.property-table thead .property-sticky-number { z-index:7; }
.property-table tbody .property-sticky-history,
.property-table tbody .property-sticky-number { z-index:3; }
.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-history,
.property-table tbody tr:hover .property-sticky-number,
.property-table tbody tr:hover .property-sticky-cluster,
.property-table tbody tr:hover .property-sticky-kavling { background: var(--surface-alt); }
.property-table th { white-space: nowrap; }
.property-table .property-date-col { min-width: 154px; white-space: nowrap; }

/* 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-bulk-button { margin-left:auto; white-space:nowrap; }
.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-catalog-card { margin-bottom: 18px; }
.property-catalog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:14px; }
.property-catalog-heading h2 { margin:0 0 4px; font-size:1.1rem; }
.property-catalog-heading p { margin:0; }
/* Legal's Ringkasan has exactly 5 cards (Total Kavling + 4 legal fees): one row on wide screens instead of 4 + 1 orphan. */
@media (min-width:1200px) { .property-summary-grid.property-summary-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); } }
.property-catalog-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 16px; }
.property-catalog-summary .stat-card { min-width:0; margin:0; padding:18px 22px; }
.property-catalog-summary .stat-card .label { font-size:.78rem; }
.property-catalog-summary .stat-card .value { overflow-wrap:normal; font-size:clamp(1.65rem,2vw,2.15rem)!important; line-height:1.15; white-space:nowrap; }
.property-catalog-summary .stat-card .sub { font-size:1rem; line-height:1.45; }
.property-catalog-summary .stat-card .sub strong { color:var(--text); font-weight:800; }
.property-catalog-summary .stat-card[data-catalog-filter] { cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.property-catalog-summary .stat-card[data-catalog-filter]:hover { border-color:var(--primary); }
.property-catalog-add { position:relative; flex:0 0 auto; }
.property-catalog-add > summary { list-style:none; cursor:pointer; }
.property-catalog-add > summary::-webkit-details-marker { display:none; }
.property-catalog-add-form { position:absolute; z-index:20; right:0; top:calc(100% + 8px); width:min(480px, 90vw); padding:20px; display:grid; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.18); }
.property-catalog-add-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:4px; }
.property-catalog-add-intro h3 { margin:0 0 4px; font-size:1.05rem; }
.property-catalog-add-intro p { margin:0; color:var(--text-muted); font-size:.84rem; }
.property-catalog-close { flex:0 0 auto; display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; margin:-5px -5px 0 0; border:1px solid var(--border); border-radius:50%; background:var(--surface); color:var(--text-muted); font-size:1.25rem; line-height:1; cursor:pointer; }
.property-catalog-close:hover { background:var(--surface-alt); color:var(--text); }
.property-catalog-add-form label { margin:4px 0 0; font-size:.84rem; font-weight:650; }
.property-catalog-add-form select,.property-catalog-add-form textarea { width:100%; }
.property-catalog-add-form textarea { min-height:120px; resize:vertical; line-height:1.55; }
.property-catalog-add-help { display:grid; gap:3px; margin:0 0 5px; color:var(--text-muted); font-size:.78rem; }
.property-catalog-add-help strong { color:var(--text); font-size:.8rem; }
.property-catalog-add-help code { color:var(--text); background:var(--surface-alt); border-radius:4px; padding:1px 4px; }
.property-catalog-units-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.property-catalog-entry-wrap { max-height:245px; overflow:auto; border:1px solid var(--border); border-radius:9px; }
.property-catalog-entry-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.property-catalog-entry-table th { position:sticky; top:0; z-index:1; padding:8px 9px; background:var(--surface-alt); color:var(--text-muted); font-size:.7rem; text-align:left; }
.property-catalog-entry-table th:last-child,.property-catalog-entry-table td:last-child { width:42px; text-align:center; }
.property-catalog-entry-table td { padding:6px; border-top:1px solid var(--border); }
.property-catalog-entry-table input { width:100%; min-width:0; padding:8px 9px; }
.property-catalog-remove-row { width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:var(--text-muted); font-size:1.25rem; cursor:pointer; }
.property-catalog-remove-row:hover { background:var(--danger-soft, #fee2e2); color:var(--danger, #dc2626); }
.property-catalog-history-col,.property-catalog-history-cell { width:42px; min-width:42px; padding-left:6px !important; padding-right:6px !important; text-align:center; }
.property-catalog-history-cell { white-space:normal !important; }
.property-table-unified .property-sticky-actions { text-align:right; padding-right:4px !important; }
.property-table-unified .property-sticky-actions .table-actions { justify-content:flex-end; }
.property-catalog-history { position:relative; }
.property-catalog-history > summary { position:relative; display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:7px; color:var(--text-muted); cursor:pointer; list-style:none; }
.property-catalog-history > summary::-webkit-details-marker { display:none; }
.property-catalog-history > summary:hover,.property-catalog-history[open] > summary { background:var(--primary-soft); color:var(--primary); }
.property-catalog-history > summary svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.property-catalog-history > summary span { position:absolute; top:-2px; right:-4px; display:inline-flex; min-width:16px; height:16px; align-items:center; justify-content:center; padding:0 3px; border:1px solid var(--surface); border-radius:9px; background:var(--primary); color:var(--surface); font-size:.6rem; }
/* Host cell is sticky (own stacking context): lift it above the following rows while its history popover is open. */
td.property-catalog-history-open { z-index:40 !important; }
.property-catalog-history ol { text-align:left; position:absolute; z-index:8; top:100%; left:0; right:auto; width:min(340px,80vw); max-height:300px; overflow:auto; margin:7px 0 0; padding:8px 12px 8px 30px; border:1px solid var(--border); border-radius:10px; background:var(--surface); box-shadow:0 10px 24px rgba(15,23,42,.16); white-space:normal; }
.property-catalog-history li { padding:7px 0; border-bottom:1px solid var(--border); font-size:.76rem; }
.property-catalog-history li:last-child { border-bottom:0; }
.property-catalog-history li time,.property-catalog-history li small,.property-catalog-history li strong,.property-catalog-history li span { display:block; }
.property-catalog-history li time,.property-catalog-history li small { color:var(--text-muted); }
.property-catalog-history li strong { margin-top:2px; }
.property-catalog-history-empty { color:var(--text-muted); list-style:none; }
.property-catalog-wrap { max-height:min(68vh, 760px); overflow:auto; border:1px solid var(--border); border-radius:8px; }
.property-catalog-table { min-width:1500px; }
.property-catalog-table th,.property-catalog-table td { white-space:nowrap; vertical-align:middle; }
.property-catalog-table th { position:sticky; top:0; z-index:2; }
.property-catalog-table .property-catalog-price { width:145px; min-width:145px; padding:7px 9px; text-align:right; }
.property-catalog-offer-form { margin:0; }
.property-offer-toggle { display:inline-flex; align-items:center; justify-content:center; min-width:150px; white-space:nowrap; }
.property-offer-toggle.is-pending { color:#fff; border-color:var(--primary); background:var(--primary); }
.property-offer-toggle.is-pending:hover { filter:brightness(.92); }
.property-catalog-offer-form .property-offer-toggle.is-offered { color:#fff; border-color:var(--success); background:var(--success); }
.property-catalog-offer-form .property-offer-toggle.is-offered:hover { filter:brightness(.92); }
.property-catalog-save { display:flex; justify-content:flex-end; margin-top:12px; }
@media (max-width:700px) {
    .property-catalog-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .property-catalog-heading { align-items:stretch; flex-direction:column; }
    .property-catalog-add { align-self:flex-start; }
    .property-catalog-add-form { left:0; right:auto; }
}
@media (max-width:420px) { .property-catalog-summary { grid-template-columns:1fr; } }
.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; }

/* Legal's document-completion checklist (Laporan page's editable version + Direktur's
   read-only /reports/legal). Shared table layout; the date input (editable, Legal) and
   the plain badge (read-only, Direktur) are sized to match. */
.property-legal-checklist-table th, .property-legal-checklist-table td { text-align: center; white-space: nowrap; }
.property-legal-checklist-table th:nth-child(1), .property-legal-checklist-table td:nth-child(1),
.property-legal-checklist-table th:nth-child(2), .property-legal-checklist-table td:nth-child(2),
.property-legal-checklist-table th:nth-child(3), .property-legal-checklist-table td:nth-child(3) { text-align: left; }
.property-legal-checklist-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px; font-weight: 700; font-size: 14px; line-height: 1;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.property-legal-checklist-badge.is-done { background: var(--success); border-color: var(--success); color: #fff; }
.property-legal-checklist-date {
    width: 128px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); font: inherit; font-size: 12px;
}
.property-legal-checklist-date.is-done { background: rgba(22,163,74,.12); border-color: var(--success); color: var(--success); }
.property-legal-checklist-date:disabled { cursor: wait; opacity: .6; }
.property-legal-komplit-cell { min-width: 160px; }
.property-legal-certificate-form { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; }
.property-legal-certificate-button { padding: 3px 8px; font-size: 10px; cursor: pointer; }
.property-legal-certificate-link { font-size: 11px; font-weight: 650; color: var(--primary); }

/* "Performance Penjualan per Bulan" combo chart (Chart.js canvas) — monthly/yearly +
   sort-direction toggle above it, see director_executive.php. */
/* Totals line with the colour keys beside PPJB / Cash In; the Bulanan / Per Tahun toggle sits on the same row, on the right. */
.exec-combo-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 2px 0 12px; }
.exec-combo-head .exec-combo-totals { margin: 0; }
.exec-combo-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
.exec-combo-chart-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* Budgeting: Ringkasan Budgeting (per Jenis Pekerjaan) at the top of the Detail Realisasi card, with an info icon
   that explains where the figures come from. */
.budget-category-summary { margin: 0 0 18px; }
.budget-category-summary-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.budget-category-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.budget-category-summary-grid .stat-card { margin: 0; padding: 12px 14px; }
.budget-category-summary-grid .stat-card .value { font-size: 1rem; }
.budget-info { position: relative; display: inline-flex; }
.budget-info > summary { list-style: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--primary); cursor: pointer; }
.budget-info > summary::-webkit-details-marker { display: none; }
.budget-info > summary:hover, .budget-info[open] > summary { background: var(--primary-soft); }
.budget-info-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: min(320px, 80vw); padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); font-size: .8rem; line-height: 1.45; color: var(--text); }
.btn-toggle-group { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.btn-toggle { padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 0; border-right: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.btn-toggle:last-child { border-right: 0; }
.btn-toggle:hover { background: var(--surface-alt); }
.btn-toggle.is-active { background: var(--primary); color: #fff; }
.exec-combo-chart-wrap { position: relative; height: 300px; }

/* Compact filter sections: any card holding a cluster checkbox row, or a no-print filter card.
   Smaller cluster chips and field controls, tighter padding, so a filter block takes less height
   on shorter screens and the cluster row wraps less. Tables and modals are left alone. */
.card:has(input[name="companies[]"]),
.card.no-print { padding: 12px 16px; }
.card:has(input[name="companies[]"]) .field label,
.card.no-print .field label { font-size: 12px; margin-bottom: 3px; }
.card:has(input[name="companies[]"]) .field select,
.card:has(input[name="companies[]"]) .field input:not([type="checkbox"]):not([type="radio"]),
.card.no-print .field select,
.card.no-print .field input:not([type="checkbox"]):not([type="radio"]) { padding: 6px 10px; font-size: 13px; line-height: 1.3; min-height: 0; }
.card:has(input[name="companies[]"]) label:has(> input[name="companies[]"]),
.card:has(input[name="companies[]"]) label:has(> input#filter-all),
.card:has(input[name="companies[]"]) label:has(> input#ak-filter-all) { font-size: 13px; gap: 5px; }
.card:has(input[name="companies[]"]) span:has(> label > input[name="companies[]"]) { gap: 4px; font-size: 13px; }
.card:has(input[name="companies[]"]) span:has(> label > input[name="companies[]"]) > a { font-size: 10.5px; }
.card:has(input[name="companies[]"]) [style*="gap:8px 20px"],
.card:has(input[name="companies[]"]) [style*="gap: 8px 20px"],
.card:has(input[name="companies[]"]) [style*="column-gap:20px"] { column-gap: 12px; }

/* Sidebar collapse arrow: "‹" while the menu is open (click = narrow), "›" while it is narrow
   (click = widen). Rotating the glyph keeps the direction tied to the state, not to JS text. */
@media (min-width: 861px) {
    .director-sidebar-collapsible .director-sidebar-collapse-toggle > span { display: inline-block; transition: transform .18s ease; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .director-sidebar-collapse-toggle > span { transform: rotate(180deg); }
}

/* Icon-only "Lihat rincian" on stat cards, top-right corner (same look as the Direktur dashboard's
   card detail icon). Used by partials/card_detail_button.php on every card that has a rincian. */
.stat-card { position: relative; }
.card-detail-trigger { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--primary); cursor: pointer; }
.card-detail-trigger svg { width: 19px; height: 19px; }
.card-detail-trigger:hover, .card-detail-trigger:focus-visible { background: var(--primary-soft); outline: none; }
.stat-card:has(> .card-detail-trigger) > .label { padding-right: 36px; }

/* Filter trigger on summary cards (funnel icon, top-right). Pressed state = that filter is applied to the table below. */
.card-filter-trigger { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.card-filter-trigger svg { width: 17px; height: 17px; }
.card-filter-trigger:hover, .card-filter-trigger:focus-visible { background: var(--primary-soft); color: var(--primary); outline: none; }
.card-filter-trigger.is-active { background: var(--primary); color: #fff; }
.stat-card:has(> .card-filter-trigger) > .label { padding-right: 36px; }
.stat-card.is-filter-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

/* Collapsed sidebar footer: the cluster/module picker shrinks to a dropdown chevron (no name) so it fits the 72px rail; the clock face shrinks too. */
@media (min-width: 861px) {
    html.director-sidebar-collapsed .director-sidebar-collapsible .footer-picker { width: 100%; min-width: 0; }
    /* Only the dropdown chevron shows; the account name is kept out of the narrow rail. */
    html.director-sidebar-collapsed .director-sidebar-collapsible .footer-picker-trigger {
        display: flex; align-items: center; justify-content: center; min-width: 0;
        padding: 7px 0; font-size: 0; border-radius: 8px;
    }
    html.director-sidebar-collapsed .director-sidebar-collapsible .footer-picker-trigger::after { content: '▾'; font-size: 15px; line-height: 1; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-clock-face { width: 32px; height: 32px; }
    html.director-sidebar-collapsed .director-sidebar-collapsible .sidebar-clock-left { gap: 0; }
}

/* Instant tooltip for title="" (see initInstantTooltips in app.js): no fade-in, so it shows the moment the pointer arrives. */
.instant-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    max-width: 280px;
    padding: 6px 9px;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    white-space: pre-line;
    pointer-events: none;
    visibility: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.instant-tooltip.show { visibility: visible; }

/* Editable logo thumbnail in the Edit Cluster pop-up (see initClusterLogoFields in app.js). */
.logo-edit { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.logo-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 168px;
    height: 100px;
    border: 1px dashed var(--border);
    border-radius: var(--radius, 10px);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.logo-thumb:hover { border-color: var(--primary); }
.logo-thumb-img { display: block; max-width: 100%; max-height: 100%; padding: 6px; object-fit: contain; }
.logo-thumb-img[hidden], .logo-thumb-empty[hidden], .logo-edit-side button[hidden] { display: none; }
.logo-thumb-empty { font-size: 12px; color: var(--text-muted); }
.logo-thumb-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px 0;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background: rgba(31, 41, 55, .72);
    opacity: 0;
    transition: opacity .15s;
}
.logo-thumb:hover .logo-thumb-badge { opacity: 1; }
@media (hover: none) { .logo-thumb-badge { opacity: 1; } }
.logo-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.logo-edit-side { flex: 1 1 180px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.logo-edit-side .hint { margin: 0; }

/* Katalog summary: Sudah Laku, Belum Laku, Nilai Terjual and Sisa Piutang on one row (smaller figures so they fit). */
.property-catalog-summary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.property-catalog-summary .stat-card { padding:12px 14px; }
.property-catalog-summary .stat-card .label { font-size:.72rem; }
.property-catalog-summary .stat-card .value { font-size:clamp(.95rem,1.25vw,1.2rem)!important; }
.property-catalog-summary .stat-card .sub { font-size:.82rem; line-height:1.4; }
@media (max-width:760px) { .property-catalog-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .property-catalog-summary { grid-template-columns:1fr; } }

/* Rincian unit di pop-up Nilai Sisa Stok: tabel di tengah, kolom lebih rapat, baris selang-seling. */
.unit-detail-table { width:auto; min-width:0; margin:0 auto; }
.unit-detail-table th, .unit-detail-table td { text-align:center; padding:8px 14px; }
.unit-detail-table tbody tr:nth-child(even) { background:var(--surface-alt); }

/* Edit Massal sheet: multi-cell selection (drag or Shift+click); Delete/Backspace empties the selected cells. */
.property-legal-sheet td.sheet-selected { background:rgba(63,88,164,.14); box-shadow:inset 0 0 0 1px var(--primary); }
.property-legal-sheet.sheet-dragging { user-select:none; -webkit-user-select:none; }

/* Cari di tabel (initTableSearch in app.js): search bar above a table, and rows that don't match the query. */
.table-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.table-search-bar input[type="search"] { max-width: 420px; flex: 1 1 260px; }
.table-search-bar .sub { font-size: .8rem; }
tr.row-search-hidden { display: none !important; }

/* Sidebar submenu (Kavling › Rekap Konstruksi, Progress Bangun): the arrow opens and closes the group (initNavTree in app.js). */
.nav-tree-head { display: flex; align-items: center; width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.nav-tree-head .nav-label { flex: 1 1 auto; min-width: 0; }
.nav-tree-caret { flex: 0 0 auto; margin-left: auto; font-size: 20px; line-height: 1; transition: transform .15s; }
.nav-tree.is-open .nav-tree-caret { transform: rotate(90deg); }
.nav-tree-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 18px; padding-left: 10px; border-left: 2px solid var(--border); }
.nav-tree-sub[hidden] { display: none; }
.nav-sub-link { padding: 6px 10px; font-size: .92em; }

/* Collapsed (icon-only) sidebar: the Kavling submenu opens as a pop-up beside its icon (same pattern as the Laporan menu),
   with its labels shown. Expanded, it sits inline as before. The pop-up is fixed so the sidebar's overflow does not clip it. */
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree-sub {
    display: none; position: fixed; z-index: 2100; left: 82px; top: 0;
    width: 190px; margin: 0; padding: 7px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); box-shadow: 0 10px 28px rgba(15,23,42,.18);
}
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree:hover > .nav-tree-sub,
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree:focus-within > .nav-tree-sub { display: block; }
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree-sub .nav-sub-link { justify-content: flex-start; padding: 9px 12px; }
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree-sub .nav-label { display: inline; white-space: nowrap; }
html.director-sidebar-collapsed .director-sidebar-collapsible .nav-tree-caret { display: none; }