/* --- LOAD FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color) !important;
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

/* Entri khusus admin lahir dengan atribut `hidden` supaya tidak sempat
   berkedip untuk user biasa. Utility Bootstrap seperti `.d-flex` memakai
   `!important`, jadi `[hidden]` bawaan browser kalah tanpa aturan ini. */
[hidden] {
    display: none !important;
}

/* --- LAYOUT VARIABLES --- */
:root {
    --spacing: 12px;
    --sidebar-width: 210px;
    --top-nav-height: 120px;
    --radius-card: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 2px 8px rgba(16, 24, 40, 0.06);
    --shadow-card-hover: 0 8px 24px rgba(16, 24, 40, 0.06);

    /* --- WARNA TEMA (light = default) ---
       Dark mode menimpa token ini lewat `data-theme="dark"` di <html>,
       dipasang oleh src/theme.ts. Pakai token ini, bukan hex langsung,
       supaya komponen ikut berganti tema. */
    --bg-color: #E9EAEE;
    --surface-color: #FFFFFF;          /* kartu, input, modal */
    --surface-alt: #F6F7F8;            /* sidebar, top nav, kotak lembut */
    --surface-hover: #EEF0F3;
    --surface-muted: #F3F4F6;          /* chip, track progress, hover tombol */
    --control-bg: #DDE0E5;             /* search bar & filter di atas latar halaman */
    --control-bg-hover: #C8CBD0;
    --disabled-bg: #D1D5DB;
    --track-off: #CBD5E1;              /* switch dalam keadaan mati */

    --text-color: #14161A;
    --text-secondary: #374151;
    --text-muted: #6B7280;
    --text-subtle: #9CA3AF;

    --border-soft: #EDEEF1;            /* garis tepi kartu, pemisah baris */
    --border-medium: #E5E7EB;          /* input, pemisah bagian */
    --border-color: #D1D5DB;
    --border-strong: #9CA3AF;

    /* Tint status: latar lembut + teks gelap di light, transparan + teks
       terang di dark. Warna aksen solid (tombol) tidak perlu token. */
    --green-soft-bg: #F0FDF4;
    --green-bg: #DCFCE7;
    --green-bg-hover: #BBF7D0;
    --green-border: #BBF7D0;
    --green-text: #15803D;
    --red-soft-bg: #FEF2F2;
    --red-bg: #FEE2E2;
    --red-bg-hover: #FECACA;
    --red-border: #FCA5A5;
    --red-text: #B91C1C;
    --amber-soft-bg: #FFFBEB;
    --amber-bg: #FEF3C7;
    --amber-text: #92400E;
    --blue-soft-bg: #EFF6FF;
    --blue-bg: #DBEAFE;
    --blue-border: #BFDBFE;
    --blue-text: #1E40AF;

    color-scheme: light;

    /* --- SKALA Z-INDEX ---
       Satu sumber kebenaran untuk urutan tumpukan. Sebelumnya .top-nav (9999)
       menutupi .vd-modal (1000) sehingga bagian atas form tertutup navbar.
       Urutan: konten < cart-bar < top-nav < sidebar < modal.
       Pakai token ini, jangan tulis angka z-index langsung. */
    --z-cart-bar: 40;
    --z-top-nav: 9990;
    --z-sidebar: 9995;
    --z-modal: 10050;
}

/* --- TEMA GELAP --- */
:root[data-theme="dark"] {
    --bg-color: #0F1216;
    --surface-color: #1C2027;
    --surface-alt: #171A20;
    --surface-hover: #252A32;
    --surface-muted: #262B33;
    --control-bg: #22262D;
    --control-bg-hover: #2E333C;
    --disabled-bg: #3A404A;
    --track-off: #3A414B;

    --text-color: #E6E8EB;
    --text-secondary: #C3C9D2;
    --text-muted: #A0A7B1;
    --text-subtle: #7C838E;

    --border-soft: #2A2F37;
    --border-medium: #323841;
    --border-color: #3D444E;
    --border-strong: #56606B;

    --green-soft-bg: rgba(34, 197, 94, 0.08);
    --green-bg: rgba(34, 197, 94, 0.16);
    --green-bg-hover: rgba(34, 197, 94, 0.26);
    --green-border: rgba(34, 197, 94, 0.35);
    --green-text: #4ADE80;
    --red-soft-bg: rgba(239, 68, 68, 0.08);
    --red-bg: rgba(239, 68, 68, 0.16);
    --red-bg-hover: rgba(239, 68, 68, 0.26);
    --red-border: rgba(239, 68, 68, 0.45);
    --red-text: #F87171;
    --amber-soft-bg: rgba(245, 158, 11, 0.08);
    --amber-bg: rgba(245, 158, 11, 0.16);
    --amber-text: #FBBF24;
    --blue-soft-bg: rgba(59, 130, 246, 0.1);
    --blue-bg: rgba(59, 130, 246, 0.18);
    --blue-border: rgba(59, 130, 246, 0.4);
    --blue-text: #93C5FD;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

:root[data-theme="dark"] body {
    color: var(--text-color);
}

/* Nav atas memakai utility Bootstrap `.text-dark` dan `.border-start`
   yang ber-!important, jadi perlu ditimpa dengan !important juga. */
:root[data-theme="dark"] .username {
    color: var(--text-color) !important;
}

:root[data-theme="dark"] .user-profile {
    border-color: var(--border-color) !important;
}

/* --- CORE LAYOUT STRUCTURE --- */
.nav {
    position: fixed;
    top: var(--spacing);
    left: var(--spacing);
    bottom: var(--spacing);
    width: var(--sidebar-width);
    padding-top: 40px;
    background-color: var(--surface-alt);
    border-radius: var(--radius-card);
    z-index: var(--z-sidebar);
}

.top-nav {
    /* CHANGED: Absolute positioning allows it to scroll away with the page content */
    position: absolute;
    top: var(--spacing);
    left: calc(var(--sidebar-width) + var(--spacing) * 2);
    right: var(--spacing);
    height: var(--top-nav-height);
    background-color: var(--surface-alt);
    border-radius: var(--radius-card);
    z-index: var(--z-top-nav);
}

main {
    margin-left: calc(var(--sidebar-width) + var(--spacing) * 2);
    padding-top: calc(var(--top-nav-height) + var(--spacing) * 2);
    padding-right: var(--spacing);
}

/* --- CUSTOM COMPONENT SIZING & COLORS --- */
.title {
    padding-bottom: 30px;
    width: 80%;
}

.menu img {
    width: 88%;
}

.selection {
    cursor: pointer;
    padding: 6px 10px;
    margin: 0 8px;
    border-radius: 12px;
    transition: background-color 0.15s ease;
}

.nav-home     { --nav-color: #2E79C1; --nav-color-soft: rgba(46, 121, 193, 0.1); }
.nav-settings { --nav-color: #D97706; --nav-color-soft: rgba(217, 119, 6, 0.1); }
.nav-profile  { --nav-color: #4338CA; --nav-color-soft: rgba(67, 56, 202, 0.1); }
.nav-tickets  { --nav-color: #1B5E20; --nav-color-soft: rgba(27, 94, 32, 0.1); }
.nav-admin    { --nav-color: #B91C1C; --nav-color-soft: rgba(185, 28, 28, 0.1); }

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.nav-link:hover,
.nav-link:focus {
    text-decoration: none;
    color: inherit;
}

.nav-badge {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-hover);
    color: var(--text-subtle);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-badge svg {
    width: 20px;
    height: 20px;
}

.nav-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.selection.active {
    background-color: var(--nav-color-soft);
}

.selection.active .nav-badge {
    background-color: var(--nav-color);
    color: #FFFFFF;
}

.selection.active .nav-label {
    color: var(--nav-color);
    font-weight: 700;
}

.top-nav img {
    width: 80px;
}

/* Struktur inti .top-icon/.diva/.user-profile/.divs sengaja ditulis ulang
   di sini (bukan cuma diserahkan ke utility class Bootstrap) supaya nav
   atas tidak berantakan/tumpang tindih dengan konten di bawahnya kalau
   CDN Bootstrap lambat/gagal dimuat. */
.top-icon {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 24px;
}

.diva {
    flex-grow: 1;
}

.top-icon > a {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.top-icon > a img {
    width: 60px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 2px solid var(--bg-color);
    padding-left: 12px;
}

.user-profile a img {
    width: 60px;
}

.divs {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.username {
    font-size: 2.5ch;
}

.Email-name {
    font-size: 2ch;
    color: var(--text-subtle);
}

/* ============================================
   RESPONSIVE — global layout
   Tempel di AKHIR global.css.
   Desktop (>900px) tidak berubah sama sekali.
   ============================================ */

/* ---------- Tablet (≤900px) ----------
   Sidebar tetap di kiri, hanya diciutkan jadi ikon saja. */
@media (max-width: 900px) {
    :root {
        --sidebar-width: 82px;
        --top-nav-height: 88px;
    }

    .nav {
        padding-top: 24px;
    }

    .title,
    .menu {
        display: none;
    }

    .selection {
        margin: 0 4px;
        padding: 6px;
    }

    .nav-link {
        justify-content: center;
    }

    .nav-label {
        display: none;
    }

    .nav-badge {
        width: 32px;
        height: 32px;
    }

    .nav-badge svg {
        width: 16px;
        height: 16px;
    }

    .nav .icon {
        gap: 10px !important;
    }

    .top-nav img {
        width: 60px;
    }

    .top-icon > a {
        margin-right: 12px;
    }

    .top-icon > a img {
        width: 42px;
    }

    .user-profile a img {
        width: 46px;
    }

    .username {
        font-size: 14px;
    }

    .Email-name {
        font-size: 12px;
    }
}

/* ---------- Ponsel (≤640px) ----------
   Sidebar pindah ke bawah jadi bottom navigation. */
@media (max-width: 640px) {
    :root {
        --sidebar-width: 0px;
        --top-nav-height: 64px;
        --bottom-nav-height: 62px;
    }

    /* --- Sidebar → bottom bar --- */
    .nav {
        top: auto;
        bottom: var(--spacing);
        left: var(--spacing);
        right: var(--spacing);
        width: auto;
        height: var(--bottom-nav-height);
        padding-top: 0;
        z-index: var(--z-sidebar);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    }

    .nav .icon {
        flex-direction: row !important;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: 0 !important;
        padding-inline: 8px;
    }

    .top-nav {
        right: var(--spacing);
    }

    .title,
    .menu {
        display: none;
    }

    .selection {
        flex: 1;
        width: auto !important;
        justify-content: center;
        padding: 4px 2px;
        margin: 0;
        border-radius: 10px;
    }

    .nav-link {
        flex-direction: column;
        gap: 2px;
        justify-content: center;
    }

    .nav-label {
        display: block;
        font-size: 10px;
        font-weight: 600;
        color: var(--text-subtle);
    }

    .selection.active .nav-label {
        color: var(--nav-color);
    }

    .nav-badge {
        width: 30px;
        height: 30px;
    }

    .nav-badge svg {
        width: 16px;
        height: 16px;
    }

    /* --- Top nav --- */
    .top-nav {
        left: var(--spacing);
    }

    .top-icon {
        padding: 0 14px !important;
    }

    .top-nav img {
        width: 46px;
    }

    .top-icon > a {
        margin-right: 8px;
    }

    .top-icon > a img {
        width: 30px;
    }

    .user-profile {
        gap: 8px !important;
        padding-left: 10px !important;
    }

    .user-profile a img {
        width: 34px;
    }

    .username {
        font-size: 12px;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .Email-name {
        display: none;
    }

    /* --- Main content --- */
    main {
        margin-left: 0;
        padding-left: var(--spacing);
        padding-right: var(--spacing);
        /* ruang untuk bottom nav */
        padding-bottom: calc(var(--bottom-nav-height) + var(--spacing) * 2);
    }

    /* Cart bar naik supaya tidak tertutup bottom nav */
    #cart-bar {
        bottom: calc(var(--bottom-nav-height) + var(--spacing) * 2);
    }
}

/* ---------- Ponsel kecil (≤400px) ---------- */
@media (max-width: 400px) {
    .top-icon > a:not(:last-of-type) {
        display: none;
    }

    .username {
        max-width: 70px;
    }

    .nav-badge {
        width: 26px;
        height: 26px;
    }

    .nav-label {
        font-size: 9px;
    }
}