/* Tabel laporan (resources/views/filament/pages/laporan.blade.php). */
.esf-table-wrap { overflow-x: auto; }
.esf-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.esf-table th { padding: .5rem .75rem; font-weight: 600; white-space: nowrap; border-bottom: 1px solid rgb(0 0 0 / .12); color: var(--gray-950); }
.esf-table td { padding: .375rem .75rem; border-bottom: 1px solid rgb(0 0 0 / .06); color: var(--gray-700); }
.esf-table tbody tr:hover { background: rgb(0 0 0 / .025); }
.esf-table tfoot td { border-top: 2px solid rgb(0 0 0 / .2); border-bottom: 0; font-weight: 600; color: var(--gray-950); }
.esf-table .esf-right { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.esf-table .esf-center { text-align: center; }
.esf-table .esf-left { text-align: left; }
.esf-table .esf-alert { color: var(--danger-600); font-weight: 600; }
.esf-empty { text-align: center; padding: 2rem !important; color: var(--gray-500) !important; }
.esf-footnote { margin-top: .75rem; font-size: .75rem; color: var(--gray-500); }
.dark .esf-table th, .dark .esf-table tfoot td { color: #fff; border-color: rgb(255 255 255 / .15); }
.dark .esf-table td { color: var(--gray-300); border-color: rgb(255 255 255 / .06); }
.dark .esf-table tbody tr:hover { background: rgb(255 255 255 / .04); }

/* ─────────────────────────────────────────────────────────────────────────
   Tema ungu nila, disalin dari Echo-System-KTV-POS public/css/admin.css
   (bagian 2–4) supaya satu keluarga dengan POS/KTV. Pilihan Beni, 30 Sep 2026.
   Mode gelap: sidebar grafit netral, ungu hanya di aksen — sama seperti POS.
   Huruf Instrument Sans TIDAK ikut disalin; tetap Inter bawaan Filament.
   ───────────────────────────────────────────────────────────────────────── */

:root {

    --sidebar-warna: #2e2050;
    --sidebar-teks: #cfc4e8;
    --sidebar-teks-redup: #9b8cc4;
    --sidebar-garis: rgba(255, 255, 255, 0.07);
}

/* Mode gelap: grafit netral, bukan ungu. Abunya mengikuti Zinc yang dipakai
   panel, jadi sidebar dan badan halaman berasal dari keluarga yang sama. */
html.dark {
    --sidebar-warna: #1c1c20;
    --sidebar-teks: #c9c9d1;
    --sidebar-teks-redup: #8b8b96;
}
.fi-body :is(.fi-header-heading, .fi-logo, .fi-modal-heading, .fi-section-header-heading) {
    font-weight: 600;
}

.fi-header-heading {
    letter-spacing: -0.02em;
}
.fi-sidebar,
html.dark .fi-sidebar {
    background-color: var(--sidebar-warna);
}

.fi-body-has-topbar .fi-sidebar-header,
html.dark .fi-body-has-topbar .fi-sidebar-header {
    background-color: var(--sidebar-warna);
    --tw-ring-color: var(--sidebar-garis);
}

/* Logo di DALAM sidebar dipaksa putih. Yang di topbar tidak disentuh: di sana
   latarnya putih, dan warna bawaan Filament (hitam / putih-di-gelap) memang
   sudah benar. */
.fi-sidebar-header .fi-logo,
html.dark .fi-sidebar-header .fi-logo {
    color: #ffffff;
}

/* Nama grup — "Laporan", "Master Data". Dikecilkan dan direnggangkan menjadi
   huruf kapital: di atas latar pekat, teks abu berukuran penuh bersaing perhatian
   dengan menunya sendiri, padahal tugasnya cuma memberi tahu ini bagian apa. */
.fi-sidebar-group-label,
html.dark .fi-sidebar-group-label {
    color: var(--sidebar-teks-redup);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fi-sidebar-item-label,
html.dark .fi-sidebar-item-label {
    color: var(--sidebar-teks);
    font-weight: 500;
}

.fi-sidebar-item-btn > .fi-icon,
html.dark .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-group-btn .fi-icon,
html.dark .fi-sidebar-group-btn .fi-icon {
    color: var(--sidebar-teks-redup);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
html.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
html.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #ffffff;
}

/*
 * MENU YANG SEDANG DIBUKA.
 *
 * Bawaannya menandai dengan warna primary — dan primary kita seronaan dengan
 * sidebarnya, jadi menandai dengan primary di atas sidebar itu sama saja dengan
 * tidak menandai apa pun. Maka penandanya diganti
 * jenisnya: latar lebih terang + tulisan putih penuh + satu garis tegak di tepi
 * kiri. Garis itu yang sebenarnya bekerja — ia terbaca dari sudut mata, tanpa
 * perlu membandingkan dua warna abu yang mirip.
 */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.1);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.75rem;
    inset-block: 0.35rem;
    width: 3px;
    border-radius: 9999px;
    background-color: #ffffff;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #ffffff;
}

/* Bulatan penanda anak menu — ikut putih, sealiran dengan yang di atas. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part,
html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background-color: #ffffff;
}

/* Lencana angka (mis. jumlah PO menunggu) — bawaannya nyaris hilang di latar
   sidebar yang pekat. */
.fi-sidebar .fi-badge {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/*
 * Batang gulir sidebar. Daftar menunya panjang (15 di Master Data saja), jadi
 * batang ini memang muncul. Bawaan Windows menggambarnya abu terang di atas
 * sidebar — sebatang garis pucat yang menarik mata ke tempat yang tidak penting.
 */
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}