/* =====================================================================
   MOTORBAJA — application theme.
   Ported from the SIMOTOR BAJA prototype (../motorbaja, emerald/FlexAdmin-
   style admin theme) onto MOTORBAJA's existing layout markup (.mb-sidebar /
   .mb-content / .mb-main) - same design tokens and component look, no
   structural/HTML changes. Fonts are self-hosted (not Google Fonts CDN) to
   stay inside this app's CSP (`style-src 'self'`, no external font host).
   ===================================================================== */

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 500 800;
    font-display: swap;
    src: url("../fonts/fraunces/fraunces-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans/plus-jakarta-sans-variable.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/roboto/roboto-variable.woff2") format("woff2");
}

:root {
    --mb-sidebar-width: 15rem;

    /* Typography - Roboto (self-hosted, latin subset) for body and headings */
    --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    /* Big figures (card counts, totals); a theme may give them a display face */
    --font-display: var(--font-body);

    /* Radius */
    --radius-sm: 0.45rem;
    --radius-md: 0.6rem;
    --radius-lg: 0.85rem;
    --radius-xl: 1.1rem;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(16, 33, 27, 0.06);
    --shadow-sm: 0 2px 10px -3px rgba(16, 33, 27, 0.12);
    --shadow-md: 0 14px 32px -18px rgba(16, 33, 27, 0.24);
    --shadow-lg: 0 26px 52px -22px rgba(16, 33, 27, 0.30);

    /* Neutrals */
    --bg: #f3f7f5;
    --surface: #ffffff;
    --surface-2: #eef3f1;
    --heading: #10211b;
    --text: #24303a;
    --muted: #5f6f7d;
    --light: #8b9aa8;
    --border: #dde7e2;
    --border-strong: #cad7d0;

    /* Accent: emerald */
    --brand: #08a06f;
    --brand-600: #08986a;
    --brand-700: #07875d;
    --brand-strong: #07724f;
    --brand-soft: #e4f6ee;
    --brand-contrast: #ffffff;

    /* Status */
    --success: #12924f;
    --success-soft: #dcf3e4;
    --warning: #c9760a;
    --warning-soft: #fbedd8;
    --danger: #d5453f;
    --danger-soft: #fbe4e3;
    --info: #2585c4;
    --info-soft: #e0f0fa;

    /* Sidebar (light) */
    --sidebar-bg: #ffffff;
    --sidebar-border: #dde7e2;
    --sidebar-color: #223a31;
    --sidebar-muted: #6b8579;
    --sidebar-hover-bg: color-mix(in srgb, var(--brand), transparent 92%);

    /* Bootstrap variable remap */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 8, 160, 111;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-strong);
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    color: var(--heading);
    font-weight: 700;
    letter-spacing: -0.2px;
}

a { color: var(--brand-700); }
a:hover { color: var(--brand-strong); }

/* --- Authenticated shell --- */
.mb-layout {
    display: flex;
    min-height: 100vh;
}

/* The sidebar stays pinned to the viewport while the page scrolls (sticky
   with an explicit viewport height), and scrolls on its own if its menu
   is taller than the window. */
.mb-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    width: var(--mb-sidebar-width);
    flex: 0 0 var(--mb-sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 14px 0 34px -26px rgba(15, 23, 40, 0.16);
    display: flex;
    flex-direction: column;
    transition: width 0.15s ease, flex-basis 0.15s ease;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Collapsed ("shrink") sidebar mode - toggled via #sidebar-toggle (app.js),
   state persisted in localStorage. Icons stay, text labels hide. */
.mb-sidebar .sidebar-mark { display: none; }

.mb-layout.sidebar-collapsed .mb-sidebar {
    width: 4.25rem;
    flex-basis: 4.25rem;
}
.mb-layout.sidebar-collapsed .mb-sidebar .nav-label {
    display: none;
}
.mb-layout.sidebar-collapsed .mb-sidebar .sidebar-mark {
    display: inline;
}
.mb-layout.sidebar-collapsed .mb-sidebar .menu-heading {
    display: none;
}
.mb-layout.sidebar-collapsed .mb-sidebar .nav-link {
    display: flex;
    justify-content: center;
    padding-left: 0 !important;
}
.mb-layout.sidebar-collapsed .mb-sidebar .nav-link i {
    margin-right: 0 !important;
}

.mb-sidebar > div:first-child {
    font-family: var(--font-heading);
    color: var(--heading);
}

.mb-sidebar .text-white-50 {
    color: var(--sidebar-muted) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.mb-sidebar a {
    color: var(--sidebar-color);
    text-decoration: none;
}

.mb-sidebar .nav-link {
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.mb-sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--heading);
}

.mb-sidebar .nav-link.active {
    color: var(--brand-contrast);
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    box-shadow: 0 12px 20px -14px color-mix(in srgb, var(--brand), black 20%);
}

.mb-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mb-content > header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-xs);
}

.mb-main {
    padding: 1.5rem;
    flex: 1 1 auto;
}

/* Copyright footer stays pinned to the bottom of the viewport while the page
   scrolls. */
.mb-content > footer {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    background: var(--surface);
    border-top: 1px solid var(--border) !important;
    color: var(--muted);
}

@media (max-width: 767.98px) {
    .mb-layout { flex-direction: column; }
    .mb-sidebar { width: 100%; flex-basis: auto; position: static; height: auto; overflow-y: visible; }
}

/* ================================================================== */
/* Cards                                                                */
/* ================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card .card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    font-weight: 600;
    color: var(--heading);
}

/* ================================================================== */
/* Tables                                                               */
/* ================================================================== */
.table { color: var(--text); }
.table > :not(caption) > * > * { padding: 0.7rem 0.85rem; }
.table > thead { background-color: var(--surface-2); }
thead.custom-thead th,
.custom-thead th {
    background-color: var(--brand-strong) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-color: var(--brand-strong) !important;
    letter-spacing: 0.2px;
}
.table-hover > tbody > tr:hover > * { background-color: var(--brand-soft); }
.table-bordered > :not(caption) > * > * { border-color: var(--border); }

/* ================================================================== */
/* Buttons                                                              */
/* ================================================================== */
.btn { border-radius: var(--radius-md); font-weight: 600; font-size: 0.85rem; }
.btn:focus { box-shadow: none; }
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-700);
    --bs-btn-hover-border-color: var(--brand-700);
    --bs-btn-active-bg: var(--brand-strong);
    --bs-btn-active-border-color: var(--brand-strong);
}
.btn-outline-primary { --bs-btn-color: var(--brand-700); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.btn-outline-secondary { color: var(--muted); border-color: var(--border-strong); }
.btn-outline-secondary:hover { background-color: var(--surface-2); color: var(--heading); border-color: var(--border-strong); }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); }
.btn-outline-success { --bs-btn-color: var(--success); --bs-btn-border-color: var(--success); --bs-btn-hover-bg: var(--success); --bs-btn-hover-border-color: var(--success); }
.btn-light { background: var(--surface-2); border-color: var(--border); color: var(--heading); }

/* ================================================================== */
/* Forms                                                                */
/* ================================================================== */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border-color: var(--border-strong);
    color: var(--text);
    font-size: 0.875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand), transparent 80%);
}
.form-label { font-weight: 600; color: var(--heading); font-size: 0.82rem; }
.input-group-text { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); }

/* ================================================================== */
/* Badges (plain .bg-* and Bootstrap 5.3 .text-bg-* variants)          */
/* ================================================================== */
.badge { font-weight: 600; border-radius: var(--radius-sm); }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--brand) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--muted) !important; color: #fff !important; }
.badge.bg-success, .badge.text-bg-success { background-color: var(--success) !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--danger) !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.badge.text-bg-light { background-color: var(--surface-2) !important; color: var(--heading) !important; border: 1px solid var(--border); }

/* ================================================================== */
/* Tabs / modal / dropdown                                              */
/* ================================================================== */

/* Browser-style tabs: each tab reads as a raised card sitting on top of
   the content panel, the active one physically merging into it (no shared
   border line between them) the way a real browser tab merges into its
   page - rather than Bootstrap's default flat underline style. */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border);
    padding: 0 0.25rem;
}
.nav-tabs .nav-item { margin-bottom: -1px; }

/* Tab bar stays pinned directly below the topbar while scrolling the page.
   --mb-header-h is measured from the real header in perencanaan-show.js. */
/* One step smaller than the default type scale for the whole Perencanaan
   detail page (body 1rem -> 0.875rem, package title 1.25rem -> 1.125rem). */
.perencanaan-detail-page { font-size: 0.875rem; }
.perencanaan-detail-page h2.h5 { font-size: 1.125rem; }
.perencanaan-detail-page .h6 { font-size: 0.9375rem; }

.perencanaan-detail-sticky {
    position: sticky;
    top: var(--mb-header-h, 3.75rem);
    z-index: 4;
    background: var(--surface);
}
.perencanaan-tabs-sticky {
    position: sticky;
    top: calc(var(--mb-header-h, 3.75rem) + var(--mb-detail-h, 0px));
    z-index: 5;
    background: var(--bg);
    padding-top: 0.25rem;
}
.nav-tabs .nav-link {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-bottom-color: transparent;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 0.65rem 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.nav-tabs .nav-link:hover:not(.active) {
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-soft), var(--surface-2) 40%);
    border-color: var(--border);
    isolation: isolate;
}
.nav-tabs .nav-link.active {
    color: var(--brand-strong) !important;
    background: var(--surface);
    border-color: var(--border);
    border-bottom-color: var(--surface);
    box-shadow: var(--shadow-xs);
    position: relative;
    z-index: 1;
}
.tab-content {
    background: var(--surface);
    border-color: var(--border) !important;
    box-shadow: var(--shadow-xs);
}

.modal-content { border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* Client-side .docx rendering (docx-preview) inside the shared preview
   modal - constrains a page-shaped render to the modal's own scroll area
   instead of letting it dictate the page's layout. */
.docx-preview-container {
    max-height: 65vh;
    overflow: auto;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 1rem;
}

/* Inline uploaded-document viewer (Identifikasi Kebutuhan tab): grey card
   backdrop, sticky zoom toolbar, pages scaled via CSS zoom on the
   library's own .docx-wrapper (see perencanaan-show.js renderDocxViewer). */
.docx-preview-card { background: #dde1e6; }
.docx-preview-card .card-body { background: transparent; }
.docx-viewer {
    max-height: 70vh;
    overflow: auto;
    border-radius: var(--radius-md);
}
.docx-viewer-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: var(--shadow-xs);
}
.docx-viewer-level { min-width: 3.5rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.docx-viewer .docx-wrapper { background: transparent; }

.dropdown-menu { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-lg); padding: 0.5rem 0; }

/* ================================================================== */
/* Tables whose entire row acts as a link (e.g. Perencanaan list)     */
/* ================================================================== */
.mb-clickable-rows tbody tr { cursor: pointer; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--surface-2); }

/* ================================================================== */
/* Ganttchart tab (Module Perencanaan) - plain CSS, no charting library.
   One column per calendar month (fixed px width, set inline per-row to
   match the PHP-computed grid - see show.php). The whole grid scrolls
   horizontally inside .gantt-scroll; each row's "Fase" label is
   position:sticky so it stays pinned to the left edge of that same
   scrolling container while only the month/bar area underneath it moves -
   the standard frozen-first-column technique, no JS needed. */
.gantt-scroll {
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.gantt-header-row,
.gantt-row {
    display: flex;
    align-items: stretch;
}
.gantt-header-row { margin-bottom: 0.5rem; }
.gantt-row { margin-bottom: 0.5rem; }
.gantt-row-label {
    flex: 0 0 10.25rem;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text);
    padding-right: 0.75rem;
    font-weight: 700;
}
.gantt-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 2px 0 4px -2px rgba(16, 33, 27, 0.15);
}
.gantt-months {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}
.gantt-month-label {
    flex: 0 0 auto;
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 700;
    border-left: 1px solid var(--border);
}
.gantt-month-label:first-child { border-left: none; }
.gantt-track {
    position: relative;
    flex: 0 0 auto;
    height: 2.25rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}
.gantt-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.gantt-bar:hover { filter: brightness(1.08); }
.gantt-bar-draggable {
    cursor: grab;
    touch-action: none;
}
.gantt-bar-draggable.is-dragging { cursor: grabbing; }
.gantt-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0.5rem;
    cursor: ew-resize;
}
.gantt-handle-left { left: 0; }
.gantt-handle-right { right: 0; }
.gantt-handle:hover { background: rgba(255, 255, 255, 0.35); }
.gantt-is-dragging { user-select: none; }
.gantt-bar-days {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* Date range printed to the right of each bar (not in its tooltip). Sits at
 * the bar's right edge, vertically centred in the track. The track is not
 * clipped, so a bar near the end of the year can let its label run into the
 * scroll area, which is scrollable. */
.gantt-bar-range {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}

/* RAB table (Perencanaan detail, tab RAB). Header in the brand colour so it
 * reads as a table heading rather than body text; group rows are shaded so a
 * heading row never looks like a priced line. */
.rab-table {
    font-size: 0.85rem;
}

.rab-table thead th {
    background: var(--brand-strong);
    color: #fff;
    font-weight: 600;
    vertical-align: middle;
    white-space: nowrap;
    border-color: rgba(255, 255, 255, 0.25);
}

.rab-table tr.rab-group > * {
    background: var(--surface-2);
    font-weight: 600;
}

/* Package status stepper (bottom of the package card on every stage page),
 * centred: the current stage in the brand colour, every other stage grey. The
 * current and already-passed stages are links to their page; stages not
 * reached yet are not. */
.status-stepper {
    display: flex;
    justify-content: center;
}
.status-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.status-step {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
a.status-step:hover,
a.status-step:focus-visible {
    border-color: var(--border-strong);
    color: var(--text);
}
.status-step.is-locked {
    opacity: 0.6;
    cursor: default;
}
.status-step.is-current,
a.status-step.is-current:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}
.status-step.is-viewing {
    /* The box for the page being shown: a 2px border plus a soft outer ring.
     * Padding drops by 1px so the box keeps the same size as its neighbours. */
    padding: calc(0.35rem - 1px) calc(0.75rem - 1px);
    border: 2px solid var(--brand-strong);
    box-shadow: 0 0 0 3px var(--brand-soft);
    color: var(--brand-strong);
}
.status-step.is-current.is-viewing,
a.status-step.is-current.is-viewing:hover {
    border-color: var(--brand-strong);
    color: var(--brand-contrast);
}
.status-arrow {
    color: var(--light);
    padding: 0 0.15rem;
}

/* Floating success toast (partials/flash.php). Top right; inside the app layout
 * it sits below the sticky topbar so it never covers the user menu. Above the
 * sticky header, package card and tab bar (z-index up to 1020). */
.mb-toast-container {
    top: 0;
    z-index: 1090;
}
.mb-layout .mb-toast-container {
    top: 4.25rem;
}

/* Document tab (partials/document_tab.php): a checklist of documents
 * (numbered when a tab has several), and preview pills. */
.min-w-0 { min-width: 0; }
.slot-progress {
    display: block;
    width: 100%;
    height: 0.35rem;
    appearance: none;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    overflow: hidden;
}
.slot-progress::-webkit-progress-bar { background: var(--surface-2); }
.slot-progress::-webkit-progress-value { background: var(--success); }
.slot-progress::-moz-progress-bar { background: var(--success); }
.slot-list { display: flex; flex-direction: column; gap: 0.75rem; }
.slot-item {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.slot-item.is-filled { border-color: color-mix(in srgb, var(--success), transparent 55%); }
.slot-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
}
.slot-item.is-filled .slot-number { background: var(--success); color: #fff; }
.slot-file {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.slot-preview-pills { gap: 0.35rem; flex-wrap: wrap; }
.slot-preview-pills .nav-link {
    max-width: 14rem;
    padding: 0.35rem 0.65rem;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    line-height: 1.25;
}
.slot-preview-pills .nav-link.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-contrast);
}
.slot-pill-file { opacity: 0.8; font-weight: 400; }


/* Procurement monitoring dashboard (Dashboard/Views/index.php). One colour
 * per workflow stage, shared by the summary cards, the timeline and the
 * donut (dashboard.js reads the same tokens). Pemilihan's purple is the only
 * colour not already in the palette above. */
:root {
    --stage-perencanaan: var(--info);
    --stage-perencanaan-soft: var(--info-soft);
    --stage-persiapan-pengadaan: var(--warning);
    --stage-persiapan-pengadaan-soft: var(--warning-soft);
    --stage-persiapan-pemilihan: #7b4fc4;
    --stage-persiapan-pemilihan-soft: #efe8fa;
    --stage-pelaksanaan: var(--success);
    --stage-pelaksanaan-soft: var(--success-soft);
}
.stage-perencanaan         { --stage: var(--stage-perencanaan);         --stage-soft: var(--stage-perencanaan-soft); }
.stage-persiapan-pengadaan { --stage: var(--stage-persiapan-pengadaan); --stage-soft: var(--stage-persiapan-pengadaan-soft); }
.stage-persiapan-pemilihan { --stage: var(--stage-persiapan-pemilihan); --stage-soft: var(--stage-persiapan-pemilihan-soft); }
.stage-pelaksanaan         { --stage: var(--stage-pelaksanaan);         --stage-soft: var(--stage-pelaksanaan-soft); }

.dash-section-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.stage-card {
    display: block;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--stage), transparent 65%);
    border-radius: var(--radius-lg);
    background: var(--stage-soft);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stage-card:hover { color: var(--text); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stage-card-title { font-weight: 700; color: var(--heading); }
.stage-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--stage);
    color: #fff;
    font-size: 1.2rem;
}
.stage-card-number { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--heading); }
.stage-card-caption { font-size: 0.8rem; color: var(--muted); }
.stage-card-amount { font-size: 1.15rem; font-weight: 700; color: var(--stage); }
.stage-card-divider { align-self: stretch; width: 1px; background: color-mix(in srgb, var(--stage), transparent 70%); }

.dash-table th { font-size: 0.8rem; white-space: nowrap; }
.dash-name-col { max-width: 18rem; }
.dash-timeline-col { min-width: 18rem; }
.dash-doc-missing { max-width: 14rem; }

.stage-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.stage-timeline-labels { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.stage-timeline-labels span { text-align: center; white-space: normal; line-height: 1.15; }
.stage-seg { height: 0.55rem; border-radius: var(--radius-pill); background: var(--surface-2); }
.stage-seg.is-done { background: var(--stage); }
.stage-seg.is-current {
    background: linear-gradient(90deg, var(--stage) 55%, color-mix(in srgb, var(--stage), transparent 75%) 55%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--stage), transparent 75%);
}
.stage-now { margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--stage); }

.dash-donut { position: relative; height: 14rem; max-width: 14rem; margin: 0 auto; }
.dash-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.dash-donut-total { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--heading); }
.dash-donut-caption { font-size: 0.85rem; color: var(--muted); }

.dash-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-700);
}

.dash-legend { max-width: 34rem; }
.dash-legend li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}
.dash-legend li:last-child { border-bottom: 0; }
.dash-legend .stage-dot { margin-right: 0; flex: 0 0 auto; }
.dash-legend-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background: var(--stage-soft);
    color: var(--stage);
}
.dash-legend-label { flex: 1 1 auto; min-width: 0; color: var(--text); }
.dash-legend-count { font-size: 1.1rem; font-weight: 700; color: var(--heading); min-width: 2rem; text-align: right; }
.dash-legend-pct { min-width: 4.5rem; text-align: right; color: var(--muted); }
.stage-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--stage);
}

/* Dashboard KPI tiles (Total Pengadaan / Nilai / Dokumen Lengkap / Dalam Proses). */
.kpi-info    { --kpi: var(--info);    --kpi-soft: var(--info-soft); }
.kpi-brand   { --kpi: var(--brand);   --kpi-soft: var(--brand-soft); }
.kpi-success { --kpi: var(--success); --kpi-soft: var(--success-soft); }
.kpi-warning { --kpi: var(--warning); --kpi-soft: var(--warning-soft); }
.kpi-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--kpi), transparent 75%);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--kpi-soft), var(--surface) 45%);
    box-shadow: var(--shadow-xs);
}
.kpi-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--kpi-soft);
    color: var(--kpi);
    font-size: 1.35rem;
}
.kpi-title { font-size: 0.85rem; font-weight: 700; color: var(--heading); line-height: 1.25; }
.kpi-period { display: block; font-weight: 500; color: var(--muted); }
.kpi-value { margin-top: 0.35rem; font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--heading); }
.kpi-value-sm { font-size: 1.3rem; word-break: break-word; }
.kpi-caption { font-size: 0.85rem; color: var(--muted); }
.kpi-caption-sm { font-size: 0.72rem; line-height: 1.3; }

/* Package list (Perencanaan/Views/index.php) themed by the active stage
 * filter: .stage-all is the unfiltered, every-stage view. */
.stage-all { --stage: var(--brand); --stage-soft: var(--brand-soft); }

.stage-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid color-mix(in srgb, var(--stage), transparent 70%);
    border-radius: var(--radius-lg);
    background: linear-gradient(110deg, var(--stage-soft), color-mix(in srgb, var(--stage-soft), var(--surface) 60%));
    box-shadow: var(--shadow-xs);
}
.stage-hero-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-md);
    background: var(--stage);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.stage-hero-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--stage);
}
.stage-hero-title { margin: 0.1rem 0 0.15rem; font-size: 1.35rem; }
.stage-hero-desc { font-size: 0.875rem; color: var(--muted); }
.stage-hero-number { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--stage); }
.stage-hero-caption { font-size: 0.8rem; color: var(--muted); }

.stage-table-card { border-top: 3px solid var(--stage); }
.stage-table {
    --bs-table-hover-bg: color-mix(in srgb, var(--stage-soft), transparent 35%);
    --bs-table-hover-color: var(--text);
}
.stage-table > thead th {
    background-color: var(--stage-soft);
    color: var(--heading);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid color-mix(in srgb, var(--stage), transparent 55%);
}
.stage-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--stage), transparent 65%);
    border-radius: var(--radius-pill);
    background: var(--stage-soft);
    color: var(--stage);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.stage-btn {
    white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--stage), transparent 55%);
    color: var(--stage);
    background: var(--surface);
}
.stage-btn:hover, .stage-btn:focus-visible { background: var(--stage); border-color: var(--stage); color: #fff; }
.stage-list-page .page-item.active .page-link { background-color: var(--stage); border-color: var(--stage); }
.stage-list-page .page-link { color: var(--stage); }
.stage-list-page .page-item.active .page-link { color: #fff; }

/* Topbar active role (badge, or the switcher button with 2+ assignments):
   readable in full - normal text size, long organisasi / sub names wrap
   instead of being cut off. */
.role-badge,
.role-switch-btn {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.45rem 0.8rem;
    white-space: normal;
    text-align: left;
}
.role-badge .fw-normal { font-weight: 500 !important; }


/* =====================================================================
   Themes. "Green" is everything above (the default). Others only override
   tokens on <html data-theme="..."> (Core\Support\UiTheme picks it from the
   mb_theme cookie), so every component follows without its own rules.
   ===================================================================== */

/* Big figures use the theme's display face (Roboto in Green). */
.stage-card-number,
.stage-hero-number,
.kpi-value,
.dash-donut-total { font-family: var(--font-display); }

/* Theme picker swatches in the user menu. */
.theme-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border-strong);
}
.theme-swatch-green   { background: #08a06f; }
.theme-swatch-blossom { background: #a3456a; }
.theme-swatch-glass   { background: linear-gradient(135deg, #3f51d9, #6ee7c8); }
.theme-swatch-dark    { background: #151b23; box-shadow: 0 0 0 1px #4fd18b; }

/* ---------------------------------------------------------------------
   Blossom: dusty rose and plum on a blush background, serif headings and
   figures (Fraunces, self-hosted). Stage colours: rose, terracotta,
   lavender, sage.
   --------------------------------------------------------------------- */
:root[data-theme="blossom"] {
    --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;

    --shadow-xs: 0 1px 2px rgba(90, 30, 55, 0.06);
    --shadow-sm: 0 2px 10px -3px rgba(90, 30, 55, 0.12);
    --shadow-md: 0 14px 32px -18px rgba(90, 30, 55, 0.22);
    --shadow-lg: 0 26px 52px -22px rgba(90, 30, 55, 0.28);

    --bg: #faf3f3;
    --surface: #ffffff;
    --surface-2: #f8eef0;
    --heading: #3b1d2c;
    --text: #3d2e35;
    --muted: #7b6870;
    --light: #a8959c;
    --border: #f0dfe4;
    --border-strong: #e5cbd3;

    --brand: #a3456a;
    --brand-600: #983f62;
    --brand-700: #8a3a5a;
    --brand-strong: #74304b;
    --brand-soft: #f8e7ed;
    --brand-contrast: #ffffff;

    --success: #4f8a63;
    --success-soft: #e4f0e7;
    --warning: #c27750;
    --warning-soft: #fbebe1;
    --danger: #c4474f;
    --danger-soft: #fbe3e5;
    --info: #6e66b3;
    --info-soft: #eeebf8;

    --sidebar-bg: #ffffff;
    --sidebar-border: #f0dfe4;
    --sidebar-color: #4a2a39;
    --sidebar-muted: #8f7480;

    --stage-perencanaan: #a3456a;
    --stage-perencanaan-soft: #f8e7ed;
    --stage-persiapan-pengadaan: #c27750;
    --stage-persiapan-pengadaan-soft: #fbebe1;
    --stage-persiapan-pemilihan: #7a63b3;
    --stage-persiapan-pemilihan-soft: #efebf8;
    --stage-pelaksanaan: #5c8a6b;
    --stage-pelaksanaan-soft: #e5efe8;

    --bs-primary-rgb: 163, 69, 106;
}
:root[data-theme="blossom"] h1,
:root[data-theme="blossom"] .h1,
:root[data-theme="blossom"] h2,
:root[data-theme="blossom"] .h4 { letter-spacing: -0.3px; }

/* ---------------------------------------------------------------------
   Glass: frosted, translucent white panels over a soft pastel gradient
   (periwinkle / mint at the top, peach / lavender below), indigo accent,
   Plus Jakarta Sans throughout (self-hosted). Panels get their blur here;
   their colours still come from the tokens.
   --------------------------------------------------------------------- */
:root[data-theme="glass"] {
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --radius-lg: 1.1rem;
    --radius-xl: 1.35rem;

    --shadow-xs: 0 1px 2px rgba(40, 50, 120, 0.05);
    --shadow-sm: 0 8px 24px -12px rgba(40, 50, 120, 0.18);
    --shadow-md: 0 18px 40px -20px rgba(40, 50, 120, 0.25);
    --shadow-lg: 0 28px 56px -24px rgba(40, 50, 120, 0.30);

    --bg: #eef0fb;
    --surface: rgba(255, 255, 255, 0.62);
    --surface-2: rgba(255, 255, 255, 0.45);
    --heading: #151a33;
    --text: #262b45;
    --muted: #5d6385;
    --light: #8d92ad;
    --border: rgba(255, 255, 255, 0.75);
    --border-strong: rgba(120, 130, 190, 0.25);

    --brand: #3f51d9;
    --brand-600: #3949cc;
    --brand-700: #3343bd;
    --brand-strong: #2a389f;
    --brand-soft: rgba(63, 81, 217, 0.12);
    --brand-contrast: #ffffff;

    --success: #11845f;
    --success-soft: rgba(17, 132, 95, 0.12);
    --warning: #d97a2b;
    --warning-soft: rgba(217, 122, 43, 0.14);
    --danger: #d4424c;
    --danger-soft: rgba(212, 66, 76, 0.12);
    --info: #3f51d9;
    --info-soft: rgba(63, 81, 217, 0.12);

    --sidebar-bg: rgba(255, 255, 255, 0.55);
    --sidebar-border: rgba(255, 255, 255, 0.7);
    --sidebar-color: #232a52;
    --sidebar-muted: #6a7096;

    --stage-perencanaan: #3f51d9;
    --stage-perencanaan-soft: rgba(63, 81, 217, 0.12);
    --stage-persiapan-pengadaan: #d97a2b;
    --stage-persiapan-pengadaan-soft: rgba(217, 122, 43, 0.14);
    --stage-persiapan-pemilihan: #7a4fd6;
    --stage-persiapan-pemilihan-soft: rgba(122, 79, 214, 0.13);
    --stage-pelaksanaan: #11845f;
    --stage-pelaksanaan-soft: rgba(17, 132, 95, 0.12);

    --bs-primary-rgb: 63, 81, 217;
    --bs-body-bg: transparent;
}
:root[data-theme="glass"] body {
    background:
        radial-gradient(60rem 40rem at 0% 0%, rgba(150, 165, 255, 0.55), transparent 60%),
        radial-gradient(50rem 36rem at 100% 0%, rgba(150, 235, 210, 0.55), transparent 60%),
        radial-gradient(55rem 40rem at 100% 100%, rgba(205, 185, 255, 0.45), transparent 60%),
        radial-gradient(55rem 40rem at 0% 100%, rgba(255, 210, 185, 0.50), transparent 60%),
        #eef0fb;
    background-attachment: fixed;
}
/* Frosted panels: everything that sits on the gradient. */
:root[data-theme="glass"] .card,
:root[data-theme="glass"] .stage-card,
:root[data-theme="glass"] .kpi-card,
:root[data-theme="glass"] .stage-hero,
:root[data-theme="glass"] .mb-sidebar,
:root[data-theme="glass"] .mb-content > header,
:root[data-theme="glass"] .mb-content > footer,
:root[data-theme="glass"] .dropdown-menu {
    background: var(--surface) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-color: var(--border) !important;
}
/* Stage cards and KPI tiles are plain glass here; their colour lives in
   the icon and the figures, as in the reference design. */
:root[data-theme="glass"] .stage-card,
:root[data-theme="glass"] .kpi-card { border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
:root[data-theme="glass"] .kpi-icon { background: var(--kpi-soft); }
:root[data-theme="glass"] .form-control,
:root[data-theme="glass"] .form-select { background-color: rgba(255, 255, 255, 0.75); border-color: var(--border-strong); }
:root[data-theme="glass"] .table { --bs-table-bg: transparent; }
:root[data-theme="glass"] .btn-primary { box-shadow: 0 10px 24px -12px rgba(63, 81, 217, 0.65); }

/* ---------------------------------------------------------------------
   Dark: near-black canvas, slate panels, bright green accent, stage
   colours blue / orange / lilac / green, monospaced figures. Runs on
   Bootstrap's dark colour mode (UiTheme::bootstrapMode() sets
   data-bs-theme="dark"), so Bootstrap's own components follow; the
   rules after the token block fix the few places that were light on
   purpose.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] {
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --font-display: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 16px 36px -18px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 26px 52px -22px rgba(0, 0, 0, 0.7);

    --bg: #0d1117;
    --surface: #151b23;
    --surface-2: #1b222c;
    --heading: #f2f5f9;
    --text: #d5dbe3;
    --muted: #8b95a5;
    --light: #6b7585;
    --border: #262e3a;
    --border-strong: #313a48;

    --brand: #4fd18b;
    --brand-600: #47c47f;
    --brand-700: #63d99a;
    --brand-strong: #2e9c63;
    --brand-soft: rgba(79, 209, 139, 0.14);
    --brand-contrast: #07140d;

    --success: #4fd18b;
    --success-soft: rgba(79, 209, 139, 0.14);
    --warning: #f2a65a;
    --warning-soft: rgba(242, 166, 90, 0.15);
    --danger: #ff6b6b;
    --danger-soft: rgba(255, 107, 107, 0.14);
    --info: #6aa5ff;
    --info-soft: rgba(106, 165, 255, 0.14);

    --sidebar-bg: #121820;
    --sidebar-border: #232b36;
    --sidebar-color: #d5dbe3;
    --sidebar-muted: #8b95a5;

    --stage-perencanaan: #6aa5ff;
    --stage-perencanaan-soft: rgba(106, 165, 255, 0.10);
    --stage-persiapan-pengadaan: #f2a65a;
    --stage-persiapan-pengadaan-soft: rgba(242, 166, 90, 0.10);
    --stage-persiapan-pemilihan: #b892ff;
    --stage-persiapan-pemilihan-soft: rgba(184, 146, 255, 0.10);
    --stage-pelaksanaan: #4fd18b;
    --stage-pelaksanaan-soft: rgba(79, 209, 139, 0.10);

    --bs-primary-rgb: 79, 209, 139;
    --bs-body-bg: #0d1117;
    --bs-body-bg-rgb: 13, 17, 23;
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--heading);
    --bs-secondary-color: var(--muted);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-heading-color: var(--heading);
}
/* The accent is bright, so text on it is dark. */
:root[data-theme="dark"] .btn-primary {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-disabled-color: var(--brand-contrast);
    font-weight: 600;
}
:root[data-theme="dark"] .badge.bg-primary,
:root[data-theme="dark"] .badge.text-bg-primary,
:root[data-theme="dark"] .badge.bg-success,
:root[data-theme="dark"] .badge.text-bg-success { color: var(--brand-contrast) !important; }
/* Light-on-purpose bits: the topbar/footer badges and the plain buttons. */
:root[data-theme="dark"] .text-bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
:root[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--surface-2);
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--border-strong);
    --bs-btn-hover-color: var(--heading);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--border-strong);
    --bs-btn-active-color: var(--heading);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
/* Stage cards: dark panel with a faint tint and a tinted edge. */
:root[data-theme="dark"] .stage-card {
    background: linear-gradient(180deg, var(--stage-soft), transparent 140%), var(--surface);
    border-color: color-mix(in srgb, var(--stage), transparent 70%);
}
:root[data-theme="dark"] .stage-card-icon { background: color-mix(in srgb, var(--stage), transparent 75%); color: var(--stage); }
:root[data-theme="dark"] .kpi-card { background: var(--surface); }
:root[data-theme="dark"] .docx-preview-card { background: #232a34; }