/* ================================================================
   Sidebar Modern — satu sumber kebenaran tampilan menu navigasi
   Gaya konsisten dengan desain gradien (kartu, header, dashboard).
   Dimuat via render hook STYLES_AFTER (lihat AdminPanelProvider).
   ================================================================ */

/* ---------- KONTAINER SIDEBAR ---------- */
.fi-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 2px 0 16px -8px rgba(37, 99, 235, 0.15) !important;
}

/* ---------- HEADER / BRAND ---------- */
.fi-sidebar-header {
    background: linear-gradient(90deg, #eff6ff, #ffffff 70%) !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

.fi-sidebar-header .fi-sidebar-brand {
    border-radius: 12px;
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.fi-sidebar-header .fi-sidebar-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.35);
}

/* ---------- GRUP MENU ---------- */
.fi-sidebar-group-label {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    padding: 1.25rem 1rem 0.4rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Titik aksen kecil di depan label grup */
.fi-sidebar-group-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    flex-shrink: 0;
}

/* ---------- ITEM MENU ---------- */
.fi-sidebar-item {
    padding: 1px 0.65rem !important;
}

.fi-sidebar-item-button {
    border-radius: 10px !important;
    padding: 0.55rem 0.8rem !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #475569 !important;
    transition: all 150ms ease !important;
    gap: 0.7rem !important;
}

.fi-sidebar-item-button:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    transform: translateX(2px);
}

.fi-sidebar-item-icon {
    color: #94a3b8 !important;
    transition: color 150ms ease !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #2563eb !important;
}

.fi-sidebar-item-label {
    letter-spacing: 0.01em !important;
}

/* ---------- ITEM AKTIF: PILL GRADIEN ---------- */
/* Selector diperkuat (mencakup beberapa varian markup Filament v3) agar
   teks & ikon item aktif SELALU PUTIH dan kontras tinggi di atas pill
   gradien biru — tidak tergantung nama class/atribut yang dipakai versi. */
.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current='page'],
.fi-sidebar-item-button.fi-sidebar-item-button-active {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.55) !important;
    transform: translateX(2px);
}

/* Label (teks) item aktif */
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-label,
.fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-label {
    color: #ffffff !important;
}

/* Ikon item aktif (wrapper) */
.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* SVG ikon item aktif — paksa stroke putih (heroicon memakai stroke=currentColor) */
.fi-sidebar-item-active .fi-sidebar-item-icon svg,
.fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-icon svg,
.fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hover pada item aktif: tetap putih di atas pill gradien */
.fi-sidebar-item-active .fi-sidebar-item-button:hover,
.fi-sidebar-item-button[aria-current='page']:hover,
.fi-sidebar-item-button.fi-sidebar-item-button-active:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}
.fi-sidebar-item-active .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current='page']:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button.fi-sidebar-item-button-active:hover .fi-sidebar-item-icon {
    color: #ffffff !important;
}

/* Badge jumlah (count) di item */
.fi-sidebar-item-count {
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 8px !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

/* ---------- FOOTER (akun pengguna) ---------- */
.fi-sidebar-footer {
    background: linear-gradient(90deg, #f8fafc, #ffffff) !important;
    border-top: 1px solid #e5e7eb !important;
}

/* ---------- SCROLLBAR ---------- */
.fi-sidebar-nav::-webkit-scrollbar,
.fi-sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb,
.fi-sidebar::-webkit-scrollbar-thumb {
    background: #c7d2fe;
    border-radius: 999px;
}
.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: #818cf8;
}
.fi-sidebar-nav::-webkit-scrollbar-track,
.fi-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* Catatan: lebar sidebar dibiarkan dikelola Filament (jangan di-override),
   agar mode collapsed (ikon-saja) dan sidebarWidth() tetap berfungsi. */

/* ================================================================
   TOMBOL COLLAPSE SIDEBAR (Ciut / Perluas) + HAMBURGER TOPBAR (mobile)
   Gaya pill gradien DI-SHARE dengan .fi-topbar-open-sidebar-button
   (hamburger topbar) lewat selector gabungan — satu sumber kebenaran.
   Tombol desktop diaktifkan via ->sidebarCollapsibleOnDesktop() (UI murni).

   Tooltip ditambatkan ke HEADER (bukan ke tombol) agar tidak bergantung
   pada positioning tombol asli Filament (aman untuk semua varian) dan
   tombol TIDAK diberi transform di hover (transform bisa mengubah
   containing block tooltip sehingga posisinya melompat).
   ================================================================ */

/* Header jadi titik acuan (containing block) tooltip — aman, tidak
   mengubah tata letak header itu sendiri. */
.fi-sidebar-header {
    position: relative !important;
    overflow: visible !important;
}

/* Tombol (collapse sidebar + hamburger topbar): pill putih lembut */
.fi-sidebar-collapse-button,
.fi-topbar-open-sidebar-button {
    width: 2.3rem !important;
    height: 2.3rem !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff, #eff6ff) !important;
    border: 1px solid #dbeafe !important;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.25) !important;
    color: #1d4ed8 !important;
    transition: all 180ms ease !important;
}

/* Ikon di dalam tombol (icon-button Filament) */
.fi-sidebar-collapse-button .fi-icon-btn-icon,
.fi-sidebar-collapse-button svg,
.fi-topbar-open-sidebar-button .fi-icon-btn-icon,
.fi-topbar-open-sidebar-button svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    color: #1d4ed8 !important;
    transition: color 180ms ease, transform 180ms ease !important;
}

/* Hover: pill GRADIEN biru persis item aktif + shadow biru */
.fi-sidebar-collapse-button:hover,
.fi-topbar-open-sidebar-button:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6) !important;
}
.fi-sidebar-collapse-button:hover .fi-icon-btn-icon,
.fi-sidebar-collapse-button:hover svg,
.fi-topbar-open-sidebar-button:hover .fi-icon-btn-icon,
.fi-topbar-open-sidebar-button:hover svg {
    color: #ffffff !important;
    transform: rotate(-180deg);
}

/* Ring aksesibilitas saat fokus keyboard */
.fi-sidebar-collapse-button:focus-visible,
.fi-topbar-open-sidebar-button:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
}

/* ---------- TOOLTIP KUSTOM (CSS murni, ikut state ciut/perluas) ---------- */
/* Ditambatkan ke .fi-sidebar-header (di atas) — muncul di kanan tombol. */
.fi-sidebar-collapse-button::before {
    content: 'Ciutkan sidebar';
    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform: translate(calc(100% + 6px), -50%);
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: 7px 11px;
    border-radius: 8px;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 60;
}

/* Panah kecil tooltip (warna menyatu dengan ujung gradien bubble) */
.fi-sidebar-collapse-button::after {
    content: '';
    position: absolute;
    right: -0.25rem;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1d4ed8;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    z-index: 60;
}

.fi-sidebar-collapse-button:hover::before,
.fi-sidebar-collapse-button:focus-visible::before {
    opacity: 1;
    transform: translate(100%, -50%);
}
.fi-sidebar-collapse-button:hover::after,
.fi-sidebar-collapse-button:focus-visible::after {
    opacity: 1;
}

/* Saat sidebar sedang di-ciutkan, teks tooltip ikut berganti */
.fi-sidebar-collapsed .fi-sidebar-collapse-button::before {
    content: 'Perluas sidebar';
}

/* ---------- TOMBOL COLLAPSE & HAMBURGER TOPBAR: DARK MODE ---------- */
.dark .fi-sidebar-collapse-button,
.dark .fi-topbar-open-sidebar-button {
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}
.dark .fi-sidebar-collapse-button .fi-icon-btn-icon,
.dark .fi-sidebar-collapse-button svg,
.dark .fi-topbar-open-sidebar-button .fi-icon-btn-icon,
.dark .fi-topbar-open-sidebar-button svg {
    color: #93c5fd !important;
}
.dark .fi-sidebar-collapse-button:hover,
.dark .fi-topbar-open-sidebar-button:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
}
.dark .fi-sidebar-collapse-button:hover .fi-icon-btn-icon,
.dark .fi-sidebar-collapse-button:hover svg,
.dark .fi-topbar-open-sidebar-button:hover .fi-icon-btn-icon,
.dark .fi-topbar-open-sidebar-button:hover svg {
    color: #ffffff !important;
}

/* ================================================================
   TOMBOL TUTUP DRAWER SIDEBAR (MOBILE)
   Tombol X untuk menutup drawer sidebar di layar kecil — class bawaan
   Filament v3: .fi-sidebar-close-button. Gaya pill-nya DISAMAKAN dengan
   tombol collapse & hamburger topbar (rule sendiri, tanpa ukuran 2.3rem
   agar memakai ukuran default icon-button). Hanya styling, tanpa
   perubahan config.
   ================================================================ */

.fi-sidebar-close-button {
    border-radius: 999px !important;
    background: linear-gradient(180deg, #ffffff, #eff6ff) !important;
    border: 1px solid #dbeafe !important;
    color: #1d4ed8 !important;
    transition: all 180ms ease !important;
}
.fi-sidebar-close-button:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.6) !important;
}
.fi-sidebar-close-button:hover .fi-icon-btn-icon,
.fi-sidebar-close-button:hover svg {
    color: #ffffff !important;
}

/* ---------- TOMBOL TUTUP DRAWER: DARK MODE ---------- */
.dark .fi-sidebar-close-button {
    background: linear-gradient(180deg, #1e293b, #0f172a) !important;
    border-color: #334155 !important;
    color: #93c5fd !important;
}
.dark .fi-sidebar-close-button:hover {
    background: linear-gradient(90deg, #1d4ed8, #2563eb) !important;
    color: #ffffff !important;
}
.dark .fi-sidebar-close-button:hover .fi-icon-btn-icon,
.dark .fi-sidebar-close-button:hover svg {
    color: #ffffff !important;
}

/* ================================================================
   Dark mode (fallback sederhana — kontras tetap terjaga)
   ================================================================ */
.dark .fi-sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
    border-right-color: #1f2937 !important;
    box-shadow: 2px 0 16px -8px rgba(0, 0, 0, 0.5) !important;
}
.dark .fi-sidebar-header {
    background: linear-gradient(90deg, #1e293b, #0f172a 70%) !important;
    border-bottom-color: #1f2937 !important;
}
.dark .fi-sidebar-group-label {
    color: #64748b !important;
}
.dark .fi-sidebar-item-button {
    color: #cbd5e1 !important;
}
.dark .fi-sidebar-item-button:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
}
.dark .fi-sidebar-item-icon {
    color: #64748b !important;
}
.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #93c5fd !important;
}
.dark .fi-sidebar-footer {
    background: #0f172a !important;
    border-top-color: #1f2937 !important;
}

/* Di dark mode, pill aktif tetap harus teks/ikon PUTIH (rule dark di atas
   punya specificity sama & muncul belakangan, jadi perlu override eksplisit). */
.dark .fi-sidebar-item-active .fi-sidebar-item-button,
.dark .fi-sidebar-item-active > .fi-sidebar-item-button,
.dark .fi-sidebar-item-button[aria-current='page'],
.dark .fi-sidebar-item-button.fi-sidebar-item-button-active {
    color: #ffffff !important;
}
.dark .fi-sidebar-item-active .fi-sidebar-item-label,
.dark .fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-label,
.dark .fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-label {
    color: #ffffff !important;
}
.dark .fi-sidebar-item-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-icon {
    color: #ffffff !important;
}
.dark .fi-sidebar-item-active .fi-sidebar-item-icon svg,
.dark .fi-sidebar-item-button[aria-current='page'] .fi-sidebar-item-icon svg,
.dark .fi-sidebar-item-button.fi-sidebar-item-button-active .fi-sidebar-item-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}