/* AnalytiCPL – Panel custom layout
   Versi: 2026-05-05a
   Layout utama sudah diubah via Blade published view (grid).
   File ini hanya styling warna, sidebar, topbar, content.
*/

/* ══════════════════════════════════════════════
   USER MENU — sembunyikan default Filament (diganti topbar-user-card hook)
══════════════════════════════════════════════ */
.fi-user-menu,
[x-data="userMenu"],
nav.fi-topbar-nav > div:last-child > .fi-user-menu {
    display: none !important;
}

/* ══════════════════════════════════════════════
   SIDEBAR — posisi di grid + warna
══════════════════════════════════════════════ */

/* Sidebar: pastikan di kolom 1 (kiri) */
.fi-main-sidebar,
.fi-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-width, 16rem) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Batalkan transform dari Alpine yang menyembunyikan sidebar */
    transform: translateX(0) !important;
}

/* Warna hijau sidebar */
.fi-sidebar {
    background: #00703c !important;
}

/* Sembunyikan header bawaan Filament (diganti brand-header hook) */
.fi-sidebar-header {
    display: none !important;
}

/* Group label */
.fi-sidebar-group-label {
    color: #ffffff !important;
    font-size: 16pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Item label & icon – putih */
.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.92) !important;
}
.fi-sidebar .fi-sidebar-item svg {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Hover */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus {
    background: rgba(255, 179, 0, 0.25) !important;
    border-radius: 6px !important;
}

/* Active */
.fi-active .fi-sidebar-item-button {
    background: #ffb300 !important;
    border-radius: 6px !important;
}
.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-active .fi-sidebar-item-button svg {
    color: #00703c !important;
}

/* ══════════════════════════════════════════════
   CONTENT WRAPPER — kolom 2 (kanan)
   w-screen (width:100vw) dari Tailwind menyebabkan overflow melewati kolom grid.
   width:auto mengikuti lebar kolom grid (1fr), bukan 100vw.
══════════════════════════════════════════════ */

.fi-main-ctn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;       /* hapus efek w-screen (100vw) dari Tailwind */
    max-width: 100% !important;   /* tidak boleh melewati lebar kolom grid */
    min-width: 0 !important;      /* cegah overflow di grid */
    overflow-x: hidden !important;
    background: #f1f5f9 !important;
    padding-top: 0 !important;
}

/* ══════════════════════════════════════════════
   TOPBAR — slim, putih
══════════════════════════════════════════════ */

.fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.fi-topbar nav {
    box-shadow: none !important;
    background: #ffffff !important;
}

/* ══════════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════════ */

.fi-main {
    background: #f1f5f9 !important;
}


/* ══════════════════════════════════════════════
   CORE LAYOUT — CSS Grid menggantikan flex default Filament
   
   DOM asli Filament:
     .fi-layout (flex flex-row-reverse)
       .fi-main-ctn (w-screen) ← konten kanan
       .fi-sidebar  (fixed)    ← sidebar kiri
   
   Masalah:
     - fi-sidebar: position fixed → out-of-flow → topbar full width
     - fi-main-ctn: width 100vw  → overflow & menutup sidebar
   
   Fix: paksa CSS Grid + posisi eksplisit per kolom
══════════════════════════════════════════════ */

@media (min-width: 1024px) {

    /* Grid 2 kolom: sidebar (kiri) | konten (kanan) */
    .fi-layout {
        display: grid !important;
        grid-template-columns: var(--sidebar-width, 16rem) 1fr !important;
        min-height: 100vh !important;
        align-items: start !important;
    }

    /* Sidebar → kolom 1, sticky + penuh tinggi viewport
       z-index: 30 → selalu di atas topbar (z-20) */
    .fi-sidebar {
        grid-column: 1 !important;
        grid-row:    1 !important;
        position:    sticky !important;
        top:         0 !important;
        height:      100vh !important;
        width:       var(--sidebar-width, 16rem) !important;
        transform:   translateX(0) !important;
        overflow-y:  auto !important;
        overflow-x:  hidden !important;
        z-index:     30 !important;
    }

    /* Content wrapper → kolom 2, scroll alami (body scroll)
       TIDAK pakai height:100vh / overflow-y:auto agar footer
       tidak muncul di tengah konten panjang. */
    .fi-main-ctn {
        grid-column:    2 !important;
        grid-row:       1 !important;
        width:          100% !important;
        max-width:      100% !important;
        min-width:      0 !important;
        min-height:     100vh !important;
        display:        flex !important;
        flex-direction: column !important;
        overflow-x:     hidden !important;
    }

    /* Topbar sticky pada viewport; lebarnya terbatas pada kolom 2 oleh grid */
    .fi-topbar {
        position:    sticky !important;
        top:         0 !important;
        z-index:     20 !important;
        flex-shrink: 0 !important;
    }

    /* Footer — jarak dari konten di atas */
    .fi-simple-footer {
        margin-top: 2rem !important;
    }
}

/* ══════════════════════════════════════════════
   SIDEBAR — warna & navigasi
══════════════════════════════════════════════ */

.fi-sidebar {
    background: #00703c !important;
}

/* Sembunyikan header bawaan Filament (diganti brand-header hook) */
.fi-sidebar-header {
    display: none !important;
}

/* Group label */
.fi-sidebar-group-label {
    color: #ffffff !important;
    font-size: 16pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Item label & icon – putih */
.fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.92) !important;
}
.fi-sidebar .fi-sidebar-item svg {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Hover / active – kuning amber */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-button:focus {
    background: rgba(255, 179, 0, 0.25) !important;
    border-radius: 6px !important;
}
.fi-active .fi-sidebar-item-button {
    background: #ffb300 !important;
    border-radius: 6px !important;
}
.fi-active .fi-sidebar-item-button .fi-sidebar-item-label,
.fi-active .fi-sidebar-item-button svg {
    color: #00703c !important;
}

/* Divider antar group */
.fi-sidebar-nav-groups {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-top: 12px !important;
}

/* ══════════════════════════════════════════════
   TOPBAR — slim, putih, hanya di area kanan
══════════════════════════════════════════════ */

.fi-topbar {
    background:    #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}
.fi-topbar nav {
    box-shadow: none !important;
    background:  #ffffff !important;
}

/* ══════════════════════════════════════════════
   AREA KONTEN — background abu-biru terang
══════════════════════════════════════════════ */

.fi-main-ctn {
    background: #f1f5f9 !important;
}
.fi-main {
    background: #f1f5f9 !important;
}