/* ============================================================================
   POS OPTIK — LAPISAN DESAIN "TERANG, BERSIH, PREMIUM"  (src/public/css/optik.css)
   ----------------------------------------------------------------------------
   Versi terang (permintaan user: "ui ux nya terlalu gelap buat lebih terang agar
   mudah di baca"). Semua permukaan utama putih / abu sangat muda; aksen kuningan
   tetap dipakai hemat, dan kontras teks dinaikkan supaya nyaman dibaca lama.

   Cara kerja:
     - Berkas ini dimuat PALING AKHIR di dalam <head> setiap halaman aplikasi,
       jadi aturannya menang atas Bootstrap maupun blok <style> bawaan halaman.
     - SEMUA aturan berada di dalam @media screen -> tampilan cetak/PDF
       (nota 1/3 A4, kartu member, label, laporan cetak) TIDAK berubah sedikit pun.
     - Halaman dokumen cetak sengaja tidak memuat berkas ini.

   Mengubah tema = cukup sunting token di :root.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    /* Tinta & permukaan — semua terang */
    --ink-900: #101828;          /* judul */
    --ink-800: #16233C;          /* tombol utama */
    --canvas: #F6F8FC;           /* latar halaman */
    --surface: #FFFFFF;
    --surface-2: #F4F6FA;
    --surface-3: #EEF1F7;
    --line: #E5E8EF;
    --line-2: #EEF1F7;

    /* Teks — dinaikkan kontrasnya agar mudah dibaca */
    --text: #1B2333;
    --text-2: #46506A;
    --text-3: #6B7688;

    /* Aksen kuningan (dipakai hemat) */
    --gold: #A97E2E;
    --gold-soft: #FBF6EC;
    --gold-line: #ECD9B4;

    /* Warna semantik */
    --ok: #0F7B5F;
    --ok-bg: #F1FBF6;
    --warn: #B54708;
    --warn-bg: #FFF8EC;
    --bad: #B42318;
    --bad-bg: #FEF3F2;
    --info: #175CD3;
    --info-bg: #F2F7FE;

    /* Bentuk & bayangan */
    --r-sm: 9px;
    --r: 11px;
    --r-lg: 16px;
    --r-xl: 20px;
    --sh-1: 0 1px 2px rgba(16, 24, 40, .04);
    --sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 18px -14px rgba(16, 24, 40, .18);
    --sh-3: 0 18px 44px -22px rgba(16, 24, 40, .30), 0 2px 6px rgba(16, 24, 40, .05);

    --font: 'Plus Jakarta Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

@media screen {

    /* ======================================================================
       1. DASAR
       ====================================================================== */
    html { -webkit-text-size-adjust: 100%; }

    body {
        background: linear-gradient(180deg, #F2F7FE 0%, #F5FAF8 42%, #F8F6FD 100%) !important;
        color: var(--text);
        font-family: var(--font);
        font-size: 14.4px;
        line-height: 1.64;
        letter-spacing: -0.003em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--ink-900);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.3;
    }
    h1 { font-size: 1.72rem; }
    h2 { font-size: 1.44rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.07rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: .92rem; }

    a { color: #1A5FCC; text-decoration: none; }
    a:hover { color: #14499F; text-decoration: underline; }

    hr { border-top: 1px solid var(--line); opacity: 1; margin: 18px 0; }

    ::selection { background: #F2E7CF; color: var(--ink-900); }

    * { scrollbar-width: thin; scrollbar-color: #C8CFDC transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: #C8CFDC;
        border-radius: 999px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover { background: #AEB8C9; background-clip: padding-box; }

    .text-muted { color: var(--text-3) !important; }
    .text-dark { color: var(--ink-900) !important; }
    .small, .kecil { font-size: 12.8px; }
    strong, b, .fw-bold { font-weight: 700; }
    .fw-semibold { font-weight: 600; }
    .border { border-color: var(--line) !important; }
    .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line-2) !important; }
    .rounded { border-radius: var(--r-sm) !important; }
    .rounded-3 { border-radius: var(--r-lg) !important; }
    .shadow-sm { box-shadow: var(--sh-1) !important; }
    .shadow { box-shadow: var(--sh-2) !important; }
    .bg-white { background: var(--surface) !important; }
    .bg-light { background: var(--surface-2) !important; }

    /* ======================================================================
       2. KERANGKA HALAMAN
       ====================================================================== */
    .container-fluid { padding-left: 0; padding-right: 0; }

    /* Gutter dimatikan HANYA pada baris terluar supaya sidebar menempel rapi
       ke tepi, sedangkan baris di dalam konten tetap memakai gutter Bootstrap. */
    .container-fluid > .row { --bs-gutter-x: 0; --bs-gutter-y: 0; }

    .container-fluid > .row > div:not(.sidebar) {
        background: transparent;
        min-height: 100vh;
        padding: 26px clamp(16px, 2.2vw, 38px) 56px !important;
    }

    .container-fluid > .row > div:not(.sidebar) > h2:first-child,
    .container-fluid > .row > div:not(.sidebar) > h3:first-child {
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--line);
    }

    /* ======================================================================
       3. SIDEBAR — TERANG (putih + garis rambut, bukan panel gelap)
       ====================================================================== */
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--surface) !important;
        color: var(--text-2) !important;
        padding: 16px 13px 20px !important;
        border-right: 1px solid var(--line);
        box-shadow: 1px 0 0 rgba(16, 24, 40, .02);
    }

    /* Blok merek */
    .sidebar .text-center.mb-4 {
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left !important;
        padding: 2px 8px 14px;
        margin-bottom: 13px !important;
        border-bottom: 1px solid var(--line-2);
    }
    .sidebar .text-center.mb-4 i {
        font-size: 1.22rem !important;
        color: var(--gold);
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        background: var(--gold-soft);
        border: 1px solid var(--gold-line);
        border-radius: 12px;
        flex: 0 0 auto;
    }
    .sidebar .text-center.mb-4 h5 {
        margin: 0 !important;
        font-size: 1.03rem;
        font-weight: 700;
        letter-spacing: .01em;
        color: var(--ink-900);
    }
    .sidebar .text-center.mb-4 h5::after {
        content: 'Manajemen Toko';
        display: block;
        font-size: 10.4px;
        font-weight: 600;
        letter-spacing: .13em;
        text-transform: uppercase;
        color: #9A7736;
        margin-top: 3px;
    }

    .sidebar .nav { gap: 2px; }

    .sidebar .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        gap: 11px;
        color: var(--text-2) !important;
        padding: 8px 12px !important;
        margin-bottom: 0 !important;
        border-radius: var(--r) !important;
        font-size: 13.6px;
        font-weight: 600;
        transition: background .16s ease, color .16s ease;
    }
    .sidebar .nav-link i {
        font-size: 1.03rem;
        width: 18px;
        text-align: center;
        color: #6E7A8C;
        transition: color .16s ease;
    }
    .sidebar .nav-link:hover {
        background: var(--surface-2) !important;
        color: var(--ink-900) !important;
    }
    .sidebar .nav-link:hover i { color: var(--text-2); }
    .sidebar .nav-link.active {
        background: var(--gold-soft) !important;
        color: var(--ink-900) !important;
        box-shadow: inset 0 0 0 1px var(--gold-line);
    }
    .sidebar .nav-link.active i { color: var(--gold); }
    .sidebar .nav-link.active::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 999px;
        background: var(--gold);
    }

    /* Kaki sidebar: tombol ganti password / keluar */
    .sidebar form { margin-top: 8px; }
    .sidebar .btn {
        font-size: 13px;
        font-weight: 600;
        border-radius: var(--r) !important;
        box-shadow: var(--sh-1);
    }
    .sidebar .btn-outline-light,
    .sidebar .btn-light,
    .sidebar .btn-secondary {
        background: var(--surface) !important;
        border: 1px solid var(--line) !important;
        color: var(--text-2) !important;
    }
    .sidebar .btn-outline-light:hover,
    .sidebar .btn-light:hover,
    .sidebar .btn-secondary:hover {
        background: var(--surface-2) !important;
        color: var(--ink-900) !important;
    }
    .sidebar .btn-danger {
        background: var(--bad-bg) !important;
        border: 1px solid #F6D2CE !important;
        color: #A2291C !important;
    }
    .sidebar .btn-danger:hover { background: #FCE6E3 !important; color: #8E1F14 !important; }
    .sidebar hr { border-color: var(--line-2); }
    .sidebar .text-muted { color: var(--text-3) !important; }

    /* Blok pengguna di kaki sidebar */
    .sidebar .badge {
        background: var(--surface-2) !important;
        color: var(--text-2) !important;
        border: 1px solid var(--line) !important;
        font-size: 10.2px;
        letter-spacing: .075em;
        text-transform: uppercase;
        padding: .42em .6em;
    }
    .sidebar p.small, .sidebar .small { color: var(--text-2) !important; font-size: 12.5px; line-height: 1.5; }

    /* ======================================================================
       4. KARTU & PANEL
       ====================================================================== */
    .card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-2);
    }
    .card-body { padding: 20px 22px; }
    .card-header {
        background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%);
        border-bottom: 1px solid var(--line);
        padding: 15px 22px;
        font-weight: 700;
        font-size: 14.2px;
        color: var(--ink-900);
    }
    .card-footer { background: var(--surface-2); border-top: 1px solid var(--line-2); padding: 13px 22px; }
    .card-title { font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; margin-bottom: 10px; color: var(--ink-900); }
    .card-title i, .card-header i { color: #2A6FD6; }
    .container-fluid > .row > div:not(.sidebar) > h2:first-child i,
    .container-fluid > .row > div:not(.sidebar) > h3:first-child i { color: #2A6FD6; }
    .card-text { color: var(--text-2); }

    .stat-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 18px 20px !important;
        margin-bottom: 18px !important;
        box-shadow: var(--sh-2);
        position: relative;
        overflow: hidden;
    }
    .stat-card::after {
        content: '';
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--gold-line), rgba(236, 217, 180, 0));
    }
    .stat-card h6 {
        color: var(--text-3) !important;
        font-size: 10.9px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .1em;
        margin-bottom: 8px !important;
    }
    .stat-card .value {
        font-size: 1.7rem !important;
        font-weight: 700 !important;
        color: var(--ink-900) !important;
        letter-spacing: -0.025em;
        font-variant-numeric: tabular-nums;
        line-height: 1.18;
    }

    .list-group-item { background: var(--surface); border-color: var(--line-2); padding: 13px 16px; font-size: 13.9px; }

    /* ======================================================================
       5. TABEL
       ====================================================================== */
    .table {
        --bs-table-bg: transparent;
        --bs-table-color: var(--text);
        margin-bottom: 0;
        font-size: 13.6px;
        border-color: var(--line-2);
        vertical-align: middle;
    }
    .table > :not(caption) > * > * {
        padding: 11px 13px;
        border-bottom-width: 1px;
        border-color: var(--line-2);
        font-variant-numeric: tabular-nums;
    }
    .table > thead > tr > th {
        background: #F1F5FD;
        color: #4B5670;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .table > thead > tr > th:first-child { border-top-left-radius: var(--r); }
    .table > thead > tr > th:last-child { border-top-right-radius: var(--r); }
    .table > tbody > tr:hover > * { background: #F4F8FF; }
    .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #FAFCFF; background: #FAFCFF; }
    .table-sm > :not(caption) > * > * { padding: 8px 10px; }
    .table-bordered > :not(caption) > * { border-color: var(--line-2); }
    .table-responsive { border-radius: var(--r); scrollbar-gutter: stable; }
    .mini-tabel th, .mini-tabel td { padding: 5px 8px; }
    .table > tfoot > tr > * { background: var(--surface-2); font-weight: 700; color: var(--ink-900); border-top: 1px solid var(--line); }

    /* Kolom angka tidak boleh terpotong dua baris ("Rp" lalu "550.000") */
    .table td.text-end, .table th.text-end,
    .table td.text-center, .table th.text-center { white-space: nowrap; }

    /* ======================================================================
       6. TOMBOL
       ====================================================================== */
    .btn {
        border-radius: 10px;
        font-weight: 600;
        font-size: 13.6px;
        padding: 8px 14px;
        box-shadow: var(--sh-1);
        transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .btn:active { transform: translateY(.5px); }
    .btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(26, 95, 204, .26); }
    .btn-sm { padding: 5.5px 10px; font-size: 12.8px; border-radius: 9px; }
    .btn-lg { padding: 11px 19px; font-size: 15px; border-radius: 12px; }
    .btn i { margin-right: 2px; }

    .btn-primary {
        --bs-btn-bg: #1A5FCC; --bs-btn-border-color: #1A5FCC;
        --bs-btn-hover-bg: #1550AE; --bs-btn-hover-border-color: #1550AE;
        --bs-btn-active-bg: #12459A; --bs-btn-active-border-color: #12459A;
        --bs-btn-disabled-bg: #A8BEE4; --bs-btn-disabled-border-color: #A8BEE4;
        --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
        --bs-btn-focus-shadow-rgb: 26, 95, 204;
    }
    .btn-outline-primary {
        --bs-btn-color: #1A5FCC; --bs-btn-border-color: #BFD2F0;
        --bs-btn-hover-bg: #1A5FCC; --bs-btn-hover-border-color: #1A5FCC; --bs-btn-hover-color: #fff;
        --bs-btn-active-bg: #12459A; --bs-btn-active-border-color: #12459A; --bs-btn-active-color: #fff;
        --bs-btn-focus-shadow-rgb: 26, 95, 204;
    }
    .btn-secondary {
        --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--line);
        --bs-btn-color: var(--text-2);
        --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: #D8DEEA; --bs-btn-hover-color: var(--ink-900);
        --bs-btn-active-bg: #E6EAF3; --bs-btn-active-color: var(--ink-900);
    }
    .btn-outline-secondary {
        --bs-btn-color: #46506A; --bs-btn-border-color: #D3DAE6;
        --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #C4CCDD; --bs-btn-hover-color: var(--ink-900);
    }
    .btn-success { --bs-btn-bg: #0F7B5F; --bs-btn-border-color: #0F7B5F; --bs-btn-hover-bg: #0C6A52; --bs-btn-hover-border-color: #0C6A52; --bs-btn-active-bg: #0A5C47; }
    .btn-outline-success { --bs-btn-color: #0F7B5F; --bs-btn-border-color: #BFE3D5; --bs-btn-hover-bg: #0F7B5F; --bs-btn-hover-border-color: #0F7B5F; --bs-btn-hover-color: #fff; }
    .btn-danger { --bs-btn-bg: #B42318; --bs-btn-border-color: #B42318; --bs-btn-hover-bg: #9E1F15; --bs-btn-hover-border-color: #9E1F15; --bs-btn-active-bg: #8C1C13; }
    .btn-outline-danger { --bs-btn-color: #B42318; --bs-btn-border-color: #F3C9C4; --bs-btn-hover-bg: #B42318; --bs-btn-hover-border-color: #B42318; --bs-btn-hover-color: #fff; }
    .btn-warning { --bs-btn-bg: #F5C169; --bs-btn-border-color: #F5C169; --bs-btn-color: #4A3106; --bs-btn-hover-bg: #EEB44F; --bs-btn-hover-border-color: #EEB44F; --bs-btn-hover-color: #4A3106; --bs-btn-active-bg: #E4A83D; --bs-btn-active-color: #4A3106; }
    .btn-outline-warning { --bs-btn-color: #8A5A00; --bs-btn-border-color: #F1DDAE; --bs-btn-hover-bg: #FFF6E3; --bs-btn-hover-border-color: #E7CE93; --bs-btn-hover-color: #6F4900; }
    .btn-info { --bs-btn-bg: #175CD3; --bs-btn-border-color: #175CD3; --bs-btn-hover-bg: #1450B8; --bs-btn-hover-border-color: #1450B8; }
    .btn-outline-info { --bs-btn-color: #175CD3; --bs-btn-border-color: #C6DAF7; --bs-btn-hover-bg: #175CD3; --bs-btn-hover-border-color: #175CD3; --bs-btn-hover-color: #fff; }
    .btn-light {
        --bs-btn-bg: #FFFFFF; --bs-btn-border-color: var(--line); --bs-btn-color: #46506A;
        --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: #D8DEEA; --bs-btn-hover-color: var(--ink-900);
        --bs-btn-active-bg: var(--surface-3);
    }
    .btn-dark {
        --bs-btn-bg: #33405A; --bs-btn-border-color: #33405A;
        --bs-btn-hover-bg: #3E4D6B; --bs-btn-hover-border-color: #3E4D6B;
        --bs-btn-active-bg: #2A3448; --bs-btn-active-border-color: #2A3448;
    }
    .btn-link { color: #1A5FCC; text-decoration: none; box-shadow: none; font-weight: 600; }
    .btn-link:hover { text-decoration: underline; }
    .btn-group > .btn { box-shadow: none; }

    /* ======================================================================
       7. LENCANA / PIL (tinta lembut, teks gelap -> mudah dibaca)
       ====================================================================== */
    .badge {
        font-weight: 700;
        font-size: 11.4px;
        letter-spacing: .015em;
        padding: .46em .68em;
        border-radius: 999px;
        vertical-align: middle;
        min-width: 2.1em;
        text-align: center;
    }
    .badge.bg-primary, .text-bg-primary { background-color: #E8EEFA !important; color: #1B3A75 !important; }
    .badge.bg-success, .text-bg-success { background-color: #E3F6EE !important; color: #0A5F46 !important; }
    .badge.bg-danger, .text-bg-danger { background-color: #FCE9E7 !important; color: #96231A !important; }
    .badge.bg-warning, .text-bg-warning { background-color: #FEF1DC !important; color: #7A4E06 !important; }
    .badge.bg-info, .text-bg-info { background-color: #E6F0FE !important; color: #12498A !important; }
    .badge.bg-secondary, .text-bg-secondary { background-color: #ECEFF5 !important; color: #414C63 !important; }
    .badge.bg-light { background-color: var(--surface-2) !important; color: #46506A !important; border: 1px solid var(--line); }
    .badge.bg-dark { background-color: #E7EBF3 !important; color: #2B3750 !important; border: 1px solid #DCE2EE; }
    .badge.bg-white { background-color: #fff !important; color: var(--ink-900) !important; border: 1px solid var(--line); }
    .badge + .badge { margin-left: 3px; }

    /* ======================================================================
       8. PESAN (alert)
       ====================================================================== */
    .alert {
        border: 1px solid var(--line);
        border-left-width: 3px;
        border-radius: 13px;
        padding: 13px 16px;
        font-size: 13.8px;
        color: var(--text);
        box-shadow: none;
    }
    .alert i { margin-right: 5px; }
    .alert-success { background: var(--ok-bg); border-color: #CBEBD9; border-left-color: var(--ok); color: #0A5440; }
    .alert-danger { background: var(--bad-bg); border-color: #F6D2CE; border-left-color: var(--bad); color: #8A1E16; }
    .alert-warning { background: var(--warn-bg); border-color: #F1DDB6; border-left-color: #D99512; color: #71430A; }
    .alert-info { background: var(--info-bg); border-color: #CFE0F9; border-left-color: var(--info); color: #134589; }
    .alert-light, .alert-secondary { background: var(--surface-2); border-color: var(--line); border-left-color: #98A2B3; color: var(--text-2); }
    .alert-dismissible .btn-close { padding: 14px; }
    .alert ul, .alert ol { margin: 6px 0 4px; padding-left: 18px; }
    .alert li { margin-bottom: 2px; }
    .alert p:last-child { margin-bottom: 0; }
    .alert .btn { --bs-btn-padding-y: .34rem; --bs-btn-padding-x: .62rem; font-size: 12.7px; }

    /* ======================================================================
       9. FORMULIR
       ====================================================================== */
    .form-label {
        font-size: 12.7px;
        font-weight: 700;
        color: #3F4A61;
        margin-bottom: 6px;
    }
    .form-control, .form-select {
        border: 1px solid #D6DCE8;
        border-radius: 10px;
        padding: 8.5px 12px;
        font-size: 14px;
        color: var(--text);
        background-color: #fff;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .form-control:focus, .form-select:focus {
        border-color: #C9A45C;
        box-shadow: 0 0 0 4px rgba(201, 164, 92, .18);
        background-color: #fff;
    }
    .form-control::placeholder { color: #9EA8BA; }
    .form-control:disabled, .form-control[readonly], .form-select:disabled { background: #F7F9FC; color: #6B7688; }
    textarea.form-control { min-height: 84px; }
    .form-control-sm, .form-select-sm { font-size: 12.9px; padding: 6px 10px; border-radius: 9px; }
    .form-text { font-size: 12.5px; color: var(--text-3); }
    .input-group-text { background: var(--surface-2); border: 1px solid #D6DCE8; color: #5A6579; border-radius: 10px; font-size: 13.6px; }
    .input-group > .form-control:not(:first-child),
    .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .input-group > .form-control:not(:last-child),
    .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

    .form-check-input { border: 1.5px solid #C3CBD9; border-radius: 6px; width: 1.06em; height: 1.06em; margin-top: .22em; }
    .form-check-input:checked { background-color: #1A5FCC; border-color: #1A5FCC; }
    .form-check-input:focus { border-color: #C9A45C; box-shadow: 0 0 0 4px rgba(201, 164, 92, .2); }
    .form-switch .form-check-input { border-radius: 2em; width: 2.1em; height: 1.16em; background-color: #E6EAF2; border-color: #CFD7E5; }
    .form-switch .form-check-input:checked { background-color: #1A5FCC; border-color: #1A5FCC; }
    .form-check-label { font-size: 13.8px; }
    .invalid-feedback, .valid-feedback { font-size: 12.5px; }

    /* ======================================================================
       10. MENU TURUN, MODAL, TAB, PAGINASI
       ====================================================================== */
    .dropdown-menu { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 6px; font-size: 13.7px; }
    .dropdown-item { border-radius: 9px; padding: 8px 11px; color: var(--text-2); }
    .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink-900); }
    .dropdown-item.active, .dropdown-item:active { background: #1A5FCC; color: #fff; }
    .dropdown-divider { border-color: var(--line-2); margin: 5px 4px; }
    .dropdown-header { font-size: 10.9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }

    .modal-content { border: none; border-radius: var(--r-xl); box-shadow: var(--sh-3); }
    .modal-header { border-bottom: 1px solid var(--line-2); padding: 17px 22px; }
    .modal-title { font-size: 1.05rem; font-weight: 700; }
    .modal-body { padding: 20px 22px; font-size: 14px; }
    .modal-footer { border-top: 1px solid var(--line-2); padding: 14px 22px; background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
    .modal-backdrop.show { opacity: .38; }

    .nav-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
    .nav-tabs .nav-link {
        border: none; border-radius: 10px 10px 0 0;
        color: #4E586E; font-weight: 600; font-size: 13.7px;
        padding: 9px 14px; margin-bottom: -1px;
    }
    .nav-tabs .nav-link:hover { color: var(--ink-900); background: var(--surface-2); }
    .nav-tabs .nav-link.active { color: var(--ink-900); background: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
    .nav-pills { gap: 4px; }
    .nav-pills .nav-link { border-radius: 10px; font-weight: 600; font-size: 13.6px; color: #4E586E; }
    .nav-pills .nav-link.active { background: #1A5FCC; color: #fff; }

    .pagination { --bs-pagination-border-color: var(--line); --bs-pagination-color: #46506A; --bs-pagination-hover-color: #1A5FCC; --bs-pagination-hover-bg: #F2F6FD; --bs-pagination-active-bg: #1A5FCC; --bs-pagination-active-border-color: #1A5FCC; gap: 4px; font-size: 13.6px; }
    .page-link { border-radius: 9px; }

    .progress { height: 8px; border-radius: 999px; background: var(--surface-3); }
    .progress-bar { background-color: #1A5FCC; }

    /* ======================================================================
       11. HALAMAN BERDIRI SENDIRI (login / pilih cabang / buka shift / galat)
           — latar TERANG, kartu putih
       ====================================================================== */
    body:has(.login-card),
    body:has(.error-card) {
        background:
            radial-gradient(900px 480px at 50% -14%, #FFFFFF 0%, rgba(255, 255, 255, 0) 62%),
            linear-gradient(170deg, #F8FAFD 0%, #EEF2F9 100%) !important;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 34px 0;
    }
    .login-card, .error-card {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-xl) !important;
        box-shadow: var(--sh-3) !important;
        padding: 38px 36px !important;
        position: relative;
        overflow: hidden;
    }
    /* pita warna lembut di puncak kartu (login / galat) */
    .login-card::before, .error-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 5px;
        background: linear-gradient(90deg, #2A6FD6 0%, #159D6C 26%, #C4801A 50%, #A94B9C 74%, #7A5AC7 100%);
    }
    body:has(.card.p-5) > .container > .row > [class*='col-'] > .card { position: relative; overflow: hidden; }
    body:has(.card.p-5) > .container > .row > [class*='col-'] > .card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 5px;
        background: linear-gradient(90deg, #2A6FD6 0%, #159D6C 26%, #C4801A 50%, #A94B9C 74%, #7A5AC7 100%);
    }
    .login-card { max-width: 470px; margin: 0 auto; }
    .login-card .logo, .error-card .logo {
        display: inline-grid !important;
        place-items: center;
        font-size: 1.42rem !important;
        color: var(--gold) !important;
        width: 58px;
        height: 58px;
        margin: 0 auto 1.1rem !important;
        background: var(--gold-soft);
        border: 1px solid var(--gold-line);
        border-radius: 18px;
    }
    .login-card h2 { font-size: 1.5rem; margin-bottom: .35rem; }
    .login-card p.text-muted { font-size: 13.8px; }
    .login-card .form-control, .login-card .input-group-text { padding: 10px 12px; font-size: 14.4px; }
    .login-card .btn { padding: 11px 16px; font-size: 14.5px; border-radius: 11px; }
    .login-card .alert { border-left-width: 1px; }

    body:has(.card.p-5) {
        background:
            radial-gradient(900px 480px at 50% -14%, #FFFFFF 0%, rgba(255, 255, 255, 0) 62%),
            linear-gradient(170deg, #F8FAFD 0%, #EEF2F9 100%) !important;
        min-height: 100vh;
    }
    body:has(.card.p-5) > .container > .row > [class*='col-'] > .card {
        border-radius: var(--r-xl) !important;
        box-shadow: var(--sh-3) !important;
    }

    /* Baris judul halaman + aksi di kanan (pola umum di aplikasi ini) */
    .d-flex > h2, .d-flex > h3 { margin-bottom: 0; }

    /* ======================================================================
       WARNA LEMBUT PER MENU & AKSEN BERWARNA
       (permintaan user: "ui ux buat lebih berwarna warni agar menyamankan mata")
       Setiap menu punya "ubin ikon" berwarna sendiri; halaman aktif memakai tinta
       warna menu itu. Semua warna bertinta muda supaya tetap nyaman dibaca.
       ====================================================================== */
    .sidebar .nav-link i {
        width: 26px;
        height: 26px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        font-size: .95rem;
        background: var(--tint, #EEF1F7);
        color: var(--hue, #5A6579);
        flex: 0 0 auto;
    }
    .sidebar .nav-link:hover i { color: var(--hue, #3F4A61); }
    .sidebar .nav-link.active {
        background: var(--tint, var(--gold-soft)) !important;
        box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .07);
    }
    .sidebar .nav-link.active::before { background: var(--hue, var(--gold)); }
    .sidebar .nav-link.active i { background: #FFFFFF; color: var(--hue, var(--gold)); }

    /* Warna tiap menu (dipilih dari daftar href pada sidebar) */
    .sidebar a[href="/dashboard"]              { --hue: #2A6FD6; --tint: #E9F1FD; }
    .sidebar a[href="/transaksi/input"]        { --hue: #159D6C; --tint: #E4F7EF; }
    .sidebar a[href="/transaksi/indent"]       { --hue: #C4801A; --tint: #FDF3E4; }
    .sidebar a[href="/dashboard/belum-diambil"]{ --hue: #7A5AC7; --tint: #F1EDFC; }
    .sidebar a[href="/shift/tutup"]            { --hue: #0E8087; --tint: #E6F6F7; }
    .sidebar a[href="/shift/buka"]             { --hue: #0E8087; --tint: #E6F6F7; }
    .sidebar a[href="/laporan/harian"],
    .sidebar a[href^="/laporan"]               { --hue: #3A54B8; --tint: #EBEFFC; }
    .sidebar a[href="/stok"]                   { --hue: #BC6A1B; --tint: #FDF0E5; }
    .sidebar a[href="/cabang"]                 { --hue: #2E86AB; --tint: #E8F3F9; }
    .sidebar a[href="/produk"]                 { --hue: #A94B9C; --tint: #FBEAF8; }
    .sidebar a[href="/lensa-stock"]            { --hue: #5B63CE; --tint: #EDEEFC; }
    .sidebar a[href="/lensa-stock/pemakaian"]  { --hue: #118FA8; --tint: #E6F4F8; }
    .sidebar a[href="/faktur-fiktif"]          { --hue: #8C6134; --tint: #F5EFE7; }
    .sidebar a[href="/label-id"]               { --hue: #C2417C; --tint: #FBEAF2; }
    .sidebar a[href="/pengaturan/wa"]          { --hue: #17915F; --tint: #E6F7EF; }
    .sidebar a[href="/pelanggan"]              { --hue: #D2555A; --tint: #FCEDED; }
    .sidebar a[href="/staff"]                  { --hue: #4A6FA5; --tint: #EDF2F9; }
    .sidebar a[href="/pegawai"]                { --hue: #8D6E63; --tint: #F2EDEA; }
    .sidebar a[href="/auth/pilih-cabang"]      { --hue: var(--gold); --tint: var(--gold-soft); }

    /* Kartu statistik: tiap kartu punya warna sendiri (biru, hijau, kuning, ungu) */
    .row > [class*="col-"]:nth-child(1) > .stat-card { --stat-hue: #2A6FD6; --stat-tint: #E9F1FD; }
    .row > [class*="col-"]:nth-child(2) > .stat-card { --stat-hue: #159D6C; --stat-tint: #E4F7EF; }
    .row > [class*="col-"]:nth-child(3) > .stat-card { --stat-hue: #C4801A; --stat-tint: #FDF3E4; }
    .row > [class*="col-"]:nth-child(4) > .stat-card { --stat-hue: #7A5AC7; --stat-tint: #F1EDFC; }
    .row > [class*="col-"]:nth-child(5) > .stat-card { --stat-hue: #0E8087; --stat-tint: #E6F6F7; }
    .row > [class*="col-"]:nth-child(6) > .stat-card { --stat-hue: #A94B9C; --stat-tint: #FBEAF8; }
    .stat-card {
        background: linear-gradient(180deg, var(--stat-tint, #FFFFFF) 0%, #FFFFFF 78%) !important;
        border-color: rgba(16, 24, 40, .07);
    }
    .stat-card::after { background: linear-gradient(90deg, var(--stat-hue, var(--gold-line)), rgba(255, 255, 255, 0)); }
    .stat-card h6 { color: #5A6478 !important; }
    .stat-card .value { color: var(--stat-hue, var(--ink-900)) !important; }

    /* Tabel di dalam kartu mengikuti kartunya: kepala tabel bertinta lembut */
    .card .table > thead > tr > th { background: #F4F7FD; }

    /* Tab aktif memakai garis biru (bukan kuningan) agar sejalan dengan tombol */
    .nav-tabs .nav-link.active { box-shadow: inset 0 -2px 0 #2A6FD6; }

    /* Lencana status di kepala halaman tetap bertinta lembut */
    .alert { backdrop-filter: saturate(115%); }
}

/* ============================================================================
   Mode HP (≤ 767.98px) — permintaan user: "sesuaikan juga aplikasi untuk bila
   di gunakan di hp".
   Sidebar berubah menjadi LACI GESER (off-canvas) yang dibuka lewat tombol
   hamburger kiri-atas; tombol hamburger, latar gelap, dan tombol ✕ dibuat oleh
   js/ui.js supaya berlaku di semua halaman tanpa menyunting tiap tampilan.
   Konten langsung terlihat penuh, isian memakai 16px agar iOS tidak
   memperbesar layar otomatis saat mengetik.
   Hanya berlaku di layar sempit — tampilan desktop & cetak tidak berubah.
   ========================================================================== */
@media screen and (max-width: 767.98px) {
    /* 1. Sidebar → laci geser dari kiri (tertutup secara bawaan) */
    .sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        width: min(86vw, 312px);
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        z-index: 1045;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px 14px 26px !important;
        border-right: 1px solid var(--line);
        border-bottom: none;
        border-radius: 0 18px 18px 0;
        box-shadow: 0 18px 44px -22px rgba(16, 24, 40, .3);
        visibility: hidden;
        transform: translateX(-104%);
        transition: transform .22s ease, visibility 0s linear .25s;
    }
    body.menu-hp-terbuka .sidebar {
        visibility: visible;
        transform: none;
        transition: transform .22s ease;
    }
    .sidebar .nav { gap: 4px; }
    .sidebar .nav-link { width: 100%; font-size: 13.8px; padding: 10px 12px !important; }
    .sidebar .text-center.mb-4 { padding-right: 44px; }      /* ruang tombol ✕ */

    /* 2. Konten selebar layar + ruang untuk tombol menu di atas */
    .container-fluid > .row > div:not(.sidebar) {
        min-height: auto;
        padding: 66px 15px 48px !important;
    }

    /* 3. Judul halaman + tombol aksi tidak saling menghimpit */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }

    /* 4. Kartu statistik lebih ringkas supaya tidak berpanjang-panjang */
    .stat-card { padding: 14px 16px !important; margin-bottom: 12px !important; }
    .stat-card .value { font-size: 1.45rem !important; }

    /* 5. Tabel lebar cukup digeser ke samping di dalam kartunya — halaman
          tidak ikut melebar keluar layar. (Tabel berbalut .table-responsive
          sudah bisa digeser sendiri.) */
    .card-body:has(table), .card:has(> table) { overflow-x: auto; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 6. Isian 16px: iOS/Android tidak lagi memperbesar layar saat mengetik */
    .form-control, .form-select, .input-group-text { font-size: 16px; }
    .form-control-sm, .form-select-sm { font-size: 16px; }
    .login-card .form-control, .login-card .input-group-text, .login-card .form-select { font-size: 16px; }
    .input-group > .btn { font-size: 15px; }

    /* 7. Halaman berdiri sendiri (login / galat) lebih lega di HP */
    body:has(.login-card), body:has(.error-card) { padding: 18px 12px; }
    .login-card, .error-card { padding: 30px 22px !important; }
}

/* ===== Kendali paginasi daftar (src/utils/paginasi.js) ===== */
.paginasi-daftar { margin: 0.75rem; }
.paginasi-daftar .pagination { margin-bottom: 0; flex-wrap: wrap; }

/* ==========================================================================
   Cetak: tabel rapi "gaya lembar kerja" (Excel-like) — permintaan user:
   "file di fitur cetak dan unduh pdf lebih rapi penulisannya seperti
   menggunakan excel" (Laporan Frame, Kinerja Pegawai, Transaksi Dibatalkan,
   Cek Stok Barang). Tabel yang diinginkan bergaris penuh diberi kelas
   `tabel-excel`; aturannya HANYA berlaku saat dicetak.
   ========================================================================== */
@media print {
    /* Tabel panjang: matikan gulir & header lengket (dipasang ui.js) supaya
       seluruh baris ikut tercetak, bukan terpotong setinggi layar. */
    .gulir-tabel { max-height: none !important; overflow: visible !important; }
    .gulir-tabel table thead th { position: static !important; box-shadow: none !important; }

    .tabel-excel { width: 100% !important; border-collapse: collapse !important; }
    .tabel-excel th, .tabel-excel td {
        border: 1px solid #555 !important;
        padding: 2px 4px !important;
        vertical-align: top !important;
        font-size: 8pt !important;
    }
    .tabel-excel thead { display: table-header-group; }          /* kepala tabel terulang tiap halaman */
    .tabel-excel tr { page-break-inside: avoid; }
    .tabel-excel thead th { background: #e9ecef !important; color: #000 !important; text-align: center !important; }
    .tabel-excel tfoot td, .tabel-excel tfoot th { background: #f1f3f5 !important; }
    .tabel-excel .angka, .tabel-excel .text-end { text-align: right !important; font-variant-numeric: tabular-nums; }
    .tabel-excel .text-muted, .tabel-excel small { color: #333 !important; }
    .tabel-excel a { color: #000 !important; text-decoration: none !important; }
    /* Lencana (badge) dicetak sebagai teks biasa — bukan pil berwarna. */
    .tabel-excel .badge {
        background: none !important; color: #000 !important; border: 0 !important;
        padding: 0 !important; font-weight: normal !important; font-size: inherit !important;
    }

    /* Warna latar (kepala tabel, baris total) ikut tercetak */
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
