/*
 * POS Control — gaya web backend.
 * Netral hangat + aksen sage, selaras dengan POS mobile (PosMobile/lib/app/theme.dart).
 * Merah hanya untuk bahaya/void/selisih. Bootstrap 5 tetap dipakai; berkas ini menimpanya.
 */

:root {
    --sidebar-w: 248px;

    --bg: #f6f4f0;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --surface-3: #f1eee8;
    --border: #e7e3db;
    --border-strong: #d8d3c8;

    --ink: #2b2a27;
    --ink-2: #5e5a53;
    --muted: #736e66;

    --brand: #4f7a5a;
    --brand-hover: #43694d;
    --brand-soft: #e4ede5;
    --brand-ink: #233a2a;

    --success: #3f7a4c;
    --success-soft: #e3eee2;
    --warning: #94631c;
    --warning-soft: #f6ecda;
    --danger: #b4483c;
    --danger-soft: #f6e3e0;
    --info: #3f6b7e;
    --info-soft: #e2ecef;

    /* Padding dalam kartu: satu nilai untuk semua tepi kartu & tabel. */
    --pad: 1.5rem;
    --pad-y: 1.25rem;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-pop: 0 12px 32px rgba(43, 42, 39, .12), 0 2px 6px rgba(43, 42, 39, .06);
    --ring: 0 0 0 3px rgba(79, 122, 90, .22);
    --ease: cubic-bezier(.2, .7, .2, 1);

    --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-primary: #4f7a5a;
    --bs-primary-rgb: 79, 122, 90;
    --bs-link-color: #43694d;
    --bs-link-color-rgb: 67, 105, 77;
    --bs-link-hover-color: #233a2a;
    --bs-link-hover-color-rgb: 35, 58, 42;
    --bs-secondary-color: #736e66;
    --bs-emphasis-color: #2b2a27;
}

* { letter-spacing: 0; }

html { background: var(--bg); }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.num, .table td, .table th { font-variant-numeric: tabular-nums; }

.text-muted { color: var(--muted) !important; }
.small, small { font-size: .82rem; }
.min-w-0 { min-width: 0; }

/* ---------- Sidebar ---------- */

.sidebar {
    width: var(--sidebar-w);
    background: var(--surface-2);
    border-right: 1px solid var(--border);
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1000;
    }

    .sidebar.offcanvas-lg { visibility: visible; }
}

.sidebar .offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.35rem 1.25rem 1rem;
}

/* Logo Sushi Me (rasio ~4:1). */
.brand-logo { display: block; width: 100%; max-width: 172px; height: auto; }
.brand-logo--sm { width: auto; height: 26px; max-width: none; }

.brand-tag {
    margin-top: .45rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.mobile-bar .brand-tag { margin: 0 0 0 .1rem; padding-left: .6rem; border-left: 1px solid var(--border-strong); }

.brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: var(--brand);
    font-size: 1rem;
}

.brand-name { font-weight: 700; font-size: .98rem; color: var(--ink); line-height: 1.15; }
.brand-sub { font-size: .74rem; color: var(--muted); }

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
    padding: .25rem .75rem 1rem;
}

.nav-section-label {
    padding: 1.1rem .65rem .4rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 40px;
    padding: .5rem .65rem;
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    font-weight: 500;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

.sidebar .nav-link i { width: 1.1rem; text-align: center; font-size: 1rem; color: var(--muted); transition: color .15s var(--ease); }
.sidebar .nav-link:hover { background: var(--surface-3); color: var(--ink); }
.sidebar .nav-link:hover i { color: var(--ink-2); }
.sidebar .nav-link.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.sidebar .nav-link.active i { color: var(--brand); }

.nav-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--danger);
}

.sidebar-user {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    padding: .6rem .75rem;
}

.user-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .5rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    color: var(--ink);
}

.user-trigger:hover, .user-trigger[aria-expanded="true"] { background: var(--surface-3); }

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: var(--brand-soft);
}

.user-name { font-size: .86rem; font-weight: 600; line-height: 1.2; }
.user-role { font-size: .75rem; color: var(--muted); }

/* Bilah atas khusus layar kecil. */
.mobile-bar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 56px;
    padding: 0 1rem;
    background: rgba(250, 249, 246, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ink);
    font-size: 1.3rem;
}

.icon-btn:hover { background: var(--surface-3); }

/* ---------- Konten ---------- */

.main { min-height: 100vh; }

@media (min-width: 992px) {
    .main { margin-left: var(--sidebar-w); }
}

.content {
    padding: 1.75rem 2rem 3rem;
}

@media (max-width: 991.98px) {
    .content { padding: 1.1rem 1rem 2.5rem; }
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 1.25rem;
}

.page-subtitle { color: var(--muted); font-size: .88rem; margin: -.95rem 0 1.25rem; }

/* Halaman berjudul sendiri (baris judul + tombol aksi). */
.content h2.h5.fw-bold {
    font-size: 1.15rem;
    font-weight: 700 !important;
    color: var(--ink);
}

.content > h2.h5.fw-bold:first-child,
.content > div:first-child > h2.h5.fw-bold { font-size: 1.4rem; }

h2.h6, h3.h6 { color: var(--ink); font-weight: 650 !important; }

/* Kepala modul bertab: judul modul + tab halaman serumpun. */
.module-head { margin-bottom: 1.4rem; }
.module-head .page-title { margin-bottom: .7rem; }
/* Tab aktif sudah menamai halaman: judul bawaan halaman cukup untuk pembaca layar. */
.module-head + h2.h5.fw-bold,
.module-head + div > h2.h5.fw-bold {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.module-head + h2.h5.fw-bold + * { margin-top: 0; }
.module-head + div.d-flex:has(> h2.h5.fw-bold) { justify-content: flex-end !important; }
.module-head + div.d-flex:has(> h2.h5.fw-bold):not(:has(> :not(h2))) { display: none !important; }

.section-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
}

.section-tabs::-webkit-scrollbar { display: none; }

.section-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    padding: .6rem .8rem;
    color: var(--muted);
    font-weight: 500;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color .15s var(--ease), background-color .15s var(--ease);
}

.section-tabs a:hover { color: var(--ink); background: var(--surface-3); }
.section-tabs a.active { color: var(--brand-ink); font-weight: 600; }

.section-tabs a.active::after {
    content: "";
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

/* Tab sekunder Bootstrap (mis. QRIS: Semua / Perlu ditangani) jadi kontrol segmen. */
.content .nav-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-3);
}

.content .nav-tabs .nav-link {
    border: 0;
    border-radius: 8px;
    padding: .38rem .85rem;
    color: var(--ink-2);
    font-weight: 500;
    font-size: .88rem;
}

.content .nav-tabs .nav-link.active {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(43, 42, 39, .08);
}

/* ---------- Panel & tabel ---------- */

.table-panel, .card-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.table-panel > .border-bottom,
.table-panel .border-bottom { border-color: var(--border) !important; }

/* Kartu lama memakai p-3/p-4 Bootstrap: samakan dengan skala --pad. */
.table-panel.p-3, .table-panel.p-4, .card-panel.p-3 { padding: var(--pad-y) var(--pad) !important; }
.table-panel > .p-3.border-bottom { padding: 1rem var(--pad) !important; }

/* Tabel yang menempel di tepi kartu: kolom pertama/terakhir sejajar dengan isi kartu lain. */
.table-panel > .table > :not(caption) > * > :first-child,
.table-panel > form > .table > :not(caption) > * > :first-child,
.card-panel__body--flush > .table > :not(caption) > * > :first-child { padding-left: var(--pad); }
.table-panel > .table > :not(caption) > * > :last-child,
.table-panel > form > .table > :not(caption) > * > :last-child,
.card-panel__body--flush > .table > :not(caption) > * > :last-child { padding-right: var(--pad); }

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-hover-bg: var(--surface-2);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--border);
    padding: .85rem 1rem;
    vertical-align: middle;
}

.table-sm > :not(caption) > * > * { padding: .65rem .85rem; }

.table thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table tbody tr { transition: background-color .12s var(--ease); }
.table tbody tr:hover > * { background: var(--surface-2); }
.table tbody tr:last-child > * { border-bottom: 0; }

.table-warning {
    --bs-table-bg: var(--warning-soft);
    --bs-table-hover-bg: var(--warning-soft);
    color: var(--ink);
}

/* Kartu metrik halaman lama (mis. Shift) tetap rapi. */
.table-panel.p-3 > .h5.fw-bold { font-size: 1.3rem; font-weight: 700 !important; margin-top: .15rem; }

/* ---------- Form & tombol ---------- */

.form-label { color: var(--ink-2); font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }

.form-control, .form-select {
    min-height: 40px;
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--ink);
}

.form-control-sm, .form-select-sm { min-height: 36px; font-size: .86rem; }
textarea.form-control { min-height: auto; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand);
    box-shadow: var(--ring);
}

.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    box-shadow: none !important;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

.btn-sm { min-height: 36px; padding-inline: .8rem; font-size: .86rem; }

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-ink);
    --bs-btn-active-border-color: var(--brand-ink);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-hover);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--brand-soft);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-soft);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-active-color: var(--brand-ink);
}

.btn-light, .btn-outline-secondary {
    --bs-btn-bg: var(--surface);
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--surface-3);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-active-color: var(--ink);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #9c3c31;
    --bs-btn-hover-border-color: #9c3c31;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: #e3bdb7;
    --bs-btn-hover-bg: var(--danger-soft);
    --bs-btn-hover-color: #8a3329;
    --bs-btn-hover-border-color: var(--danger);
}

/* ---------- Badge status (lembut, bukan blok warna penuh) ---------- */

.badge {
    border-radius: 999px;
    padding: .3rem .6rem;
    font-weight: 600;
    font-size: .74rem;
}

.text-bg-success { color: var(--success) !important; background: var(--success-soft) !important; }
.text-bg-warning { color: var(--warning) !important; background: var(--warning-soft) !important; }
.text-bg-danger { color: var(--danger) !important; background: var(--danger-soft) !important; }
.text-bg-info { color: var(--info) !important; background: var(--info-soft) !important; }
.text-bg-primary { color: var(--brand-ink) !important; background: var(--brand-soft) !important; }
.text-bg-secondary, .text-bg-light { color: var(--ink-2) !important; background: var(--surface-3) !important; }
.text-bg-dark { color: #fff !important; background: var(--ink-2) !important; }

.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }

/* ---------- Lain-lain ---------- */

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-soft);
    --bs-dropdown-link-active-color: var(--brand-ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    padding: .35rem;
    font-size: .9rem;
}

.dropdown-item { border-radius: 7px; padding: .5rem .65rem; }
.dropdown-item:hover { background: var(--surface-3); }

.list-group-item { background: transparent; border-color: var(--border); }

.alert { border-radius: var(--radius); border: 1px solid transparent; }
.alert-success { color: var(--success); background: var(--success-soft); border-color: #cfe1cd; }
.alert-danger { color: #8a3329; background: var(--danger-soft); border-color: #ecc9c3; }
.alert-warning { color: #7a5016; background: var(--warning-soft); border-color: #ecdab9; }
.alert-info { color: var(--info); background: var(--info-soft); border-color: #cddde2; }

.pagination { gap: .3rem; margin-bottom: 0; }

.page-link {
    border-radius: var(--radius-sm) !important;
    border-color: var(--border);
    color: var(--ink);
    min-width: 36px;
    text-align: center;
}

.page-link:hover { background: var(--surface-3); color: var(--ink); }
.active > .page-link, .page-link.active { background: var(--brand); border-color: var(--brand); }

code { color: var(--ink-2); background: var(--surface-3); padding: .1rem .35rem; border-radius: 5px; font-size: .82em; }

.status-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.status-ok { background: var(--success); }
.status-low { background: #d4a017; }
.status-empty { background: var(--danger); }

/* ---------- Toast flash ---------- */

.toast-stack {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(420px, calc(100vw - 2rem));
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem .9rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    font-size: .9rem;
    animation: flash-in .25s var(--ease);
}

.flash i { font-size: 1.05rem; line-height: 1.3; }
.flash--success i { color: var(--success); }
.flash--warning i { color: var(--warning); }
.flash--error i { color: var(--danger); }
.flash .btn-close { margin-left: auto; font-size: .7rem; padding: .35rem; }

@keyframes flash-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Filter bar ---------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: .4rem .8rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
}

.filter-btn:hover { background: var(--surface-2); }
.filter-btn > i:first-child { color: var(--muted); }
.filter-btn .filter-range { color: var(--muted); font-weight: 400; }
.filter-btn .bi-chevron-down { font-size: .7rem; color: var(--muted); }

.filter-select {
    min-height: 38px;
    width: auto;
    max-width: 240px;
    font-size: .88rem;
    font-weight: 500;
    border-color: var(--border-strong);
}

.filter-select.is-set { border-color: var(--brand); background-color: var(--brand-soft); color: var(--brand-ink); }

.filter-reset { font-size: .86rem; color: var(--muted); padding: .4rem .5rem; }
.filter-reset:hover { color: var(--ink); }

.filter-note { flex-basis: 100%; font-size: .8rem; color: var(--warning); }

/* Pemilih rentang tanggal: preset di kiri, kalender di kanan. */
.range-menu { padding: 0; overflow: hidden; }
.range-menu__body { display: flex; }

.range-presets {
    list-style: none;
    margin: 0;
    padding: .4rem;
    min-width: 176px;
    border-right: 1px solid var(--border);
}

.range-presets button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 36px;
    padding: .4rem .65rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font-size: .88rem;
    text-align: left;
}

.range-presets button:hover { background: var(--surface-3); }
.range-presets button.is-active { font-weight: 700; color: var(--brand-ink); }
.range-presets button .bi-check-lg { font-size: 1rem; visibility: hidden; color: var(--brand); }
.range-presets button.is-active .bi-check-lg { visibility: visible; }

.range-calendar { padding: .6rem; }
.range-calendar .flatpickr-calendar { box-shadow: none; border: 0; }

.range-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .8rem;
    border-top: 1px solid var(--border);
    font-size: .84rem;
    color: var(--muted);
}

@media (max-width: 640px) {
    .range-menu__body { flex-direction: column; }
    .range-presets { border-right: 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; }
    .range-calendar { display: flex; justify-content: center; }
}

/* flatpickr dengan warna sage */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
    background: var(--brand);
    border-color: var(--brand);
}

.flatpickr-day.inRange { background: var(--brand-soft); border-color: var(--brand-soft); box-shadow: -5px 0 0 var(--brand-soft), 5px 0 0 var(--brand-soft); }
.flatpickr-day.today { border-color: var(--border-strong); }
.flatpickr-calendar { font-family: inherit; }

/* ---------- Dashboard ---------- */

.kpi {
    height: 100%;
    padding: var(--pad-y) var(--pad);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.kpi__label { font-size: .82rem; color: var(--muted); font-weight: 500; }
.kpi__value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: .4rem; color: var(--ink); }
.kpi__foot { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .8rem; color: var(--muted); }

.delta {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .76rem;
}

.delta--up { color: var(--success); background: var(--success-soft); }
.delta--down { color: var(--danger); background: var(--danger-soft); }
.delta--flat { color: var(--ink-2); background: var(--surface-3); }

.card-panel { overflow: visible; }
.card-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--pad-y) var(--pad) 0;
}

.card-panel__title { font-size: .98rem; font-weight: 650; margin: 0; color: var(--ink); }
.card-panel__meta { font-size: .8rem; color: var(--muted); }
.card-panel__body { padding: 1.25rem var(--pad) var(--pad); }

/* Kartu grafik: area grafik mengisi sisa tinggi kartu, tak menyisakan ruang kosong. */
.card-panel--fill { display: flex; flex-direction: column; }
.card-panel--fill > .card-panel__body { flex: 1 1 auto; display: flex; flex-direction: column; }
.card-panel--fill .chart-box:not(.chart-box--donut) { flex: 1 1 auto; height: auto; min-height: 280px; }
.card-panel__body--flush { padding: .75rem 0 .5rem; overflow-x: auto; }

.chart-box { position: relative; height: 280px; }

@media (min-width: 1200px) {
    .chart-box { height: 360px; }
}
.chart-box--donut { height: 200px; max-width: 200px; margin: 0 auto; }

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.donut-center strong { font-size: 1.05rem; }
.donut-center span { font-size: .74rem; color: var(--muted); }

.legend-list { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.legend-list li {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border-top: 1px solid var(--border);
    font-size: .86rem;
}

.legend-list li:first-child { border-top: 0; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; }
.legend-pct { font-weight: 700; min-width: 3.2rem; text-align: right; }
.legend-val { color: var(--muted); min-width: 6.5rem; text-align: right; }

.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { padding: .6rem 0; }
.bar-list li:first-child { padding-top: 0; }
.bar-list li:last-child { padding-bottom: 0; }
.bar-list__row { display: flex; justify-content: space-between; gap: .75rem; font-size: .86rem; margin-bottom: .45rem; }
.bar-list__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-list__val { color: var(--ink-2); white-space: nowrap; }
.bar-track { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; background: var(--brand); }

.rank {
    display: inline-flex;
    width: 1.35rem;
    justify-content: center;
    margin-right: .35rem;
    color: var(--muted);
    font-weight: 600;
}

.stat-rows { margin: 0; }
.stat-rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--border); font-size: .88rem; }
.stat-rows > div:last-child { padding-bottom: 0; }
.stat-rows > div:first-child { border-top: 0; padding-top: 0; }
.stat-rows dt { font-weight: 400; color: var(--ink-2); }
.stat-rows dd { margin: 0; font-weight: 600; }

.attention {
    padding: var(--pad-y) var(--pad);
    border: 1px solid #ecdab9;
    border-radius: var(--radius);
    background: var(--warning-soft);
    margin-bottom: 1.25rem;
}

.attention__title { display: flex; align-items: center; gap: .5rem; font-weight: 650; color: #7a5016; }
.attention__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.attention__chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: .82rem;
    color: var(--ink);
}

.attention__chip strong { color: #7a5016; }
.attention details { margin-top: .75rem; font-size: .84rem; }
.attention summary { cursor: pointer; color: #7a5016; font-weight: 600; }

.empty-state {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: .9rem;
}

.empty-state i { display: block; font-size: 1.6rem; margin-bottom: .4rem; color: var(--border-strong); }

@media (max-width: 575.98px) {
    :root { --pad: 1.1rem; --pad-y: 1rem; }
    .kpi__value { font-size: 1.15rem; }
    .kpi__foot .kpi__vs { display: none; }
    /* Tabel bergulir ke samping, bukan melipat isi sel. */
    .table-panel .table td, .table-panel .table th { white-space: nowrap; }
    .page-title { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Halaman masuk ---------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2.25rem var(--pad) var(--pad);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}

.login-logo { display: block; width: 200px; max-width: 70%; height: auto; margin: 0 auto 1.75rem; }
.login-title { font-size: 1.2rem; font-weight: 700; text-align: center; margin: 0 0 .3rem; }
.login-sub { font-size: .88rem; color: var(--muted); text-align: center; margin: 0 0 1.5rem; }