/*
 * Toya Radius   Custom Theme v3
 * Skema: Putih bersih + aksen Oranye, teks gelap. Sidebar PUTIH (tema terang)
 * dengan item aktif oranye. Dark mode tetap didukung.
 */

:root {
    /* ===== TOYA RADIUS UI SYSTEM   Design Tokens ===== */
    --toya-orange: #f97316;
    --toya-orange-dark: #ea580c;
    --toya-orange-soft: rgba(249, 115, 22, 0.08);
    --toya-radius: 0.85rem;

    --toya-text-primary: #18181b;
    --toya-text-secondary: #52525b;
    --toya-text-muted: #71717a;
    --toya-border: #e4e4e7;
    --toya-bg: #fafafa;
    --toya-card: #ffffff;

    --toya-success: #16a34a;
    --toya-success-soft: #f0fdf4;
    --toya-warning: #d97706;
    --toya-warning-soft: #fffbeb;
    --toya-danger: #dc2626;
    --toya-danger-soft: #fef2f2;
    --toya-info: #2563eb;
    --toya-info-soft: #eff6ff;
}

/* ===== SIDEBAR   putih, teks gelap, item aktif oranye ===== */
.fi-sidebar {
    background: #ffffff !important;
    border-inline-end: 1px solid rgb(228 228 231) !important;
}

.dark .fi-sidebar {
    background: #18181b !important;
    border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-sidebar-header {
    background: #ffffff !important;
    /* Garis pemisah di bawah logo DIHAPUS   tampil terpotong (tidak penuh
       selebar sidebar) sehingga terlihat janggal. */
    border-block-end: none !important;
    box-shadow: none !important;
}

.dark .fi-sidebar-header {
    background: #18181b !important;
    border-block-end: none !important;
}

.fi-sidebar-nav {
    background: transparent !important;
}

.fi-sidebar-nav-groups {
    padding-inline: 0.6rem !important;
    gap: 0.15rem !important;
}

.fi-sidebar-group-label {
    color: #3f3f46 !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    font-size: 0.875rem !important;
    text-transform: none !important;
    padding-block: 0 !important;
}

.dark .fi-sidebar-group-label {
    color: #d4d4d8 !important;
}

/* Baris header grup (ikon + label + panah)   dibuat kelihatan seperti item
 * menu biasa yang jelas & bisa diklik, BUKAN teks kecil abu-abu pasif,
 * supaya "menu utama" langsung kelihatan jelas sebagai pintu masuk. */
.fi-sidebar-group-btn {
    display: flex;
    align-items: center !important;
    gap: 0.65rem !important;
    padding-block: 0.5rem !important;
    padding-inline: 0.6rem !important;
    border-radius: 0.6rem !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.fi-sidebar-group-btn:hover {
    background-color: var(--toya-orange-soft) !important;
}

.dark .fi-sidebar-group-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-group-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    color: #71717a !important;
    flex-shrink: 0 !important;
}

.dark .fi-sidebar-group-btn svg {
    color: #a1a1aa !important;
}

.fi-sidebar-group-collapse-btn {
    margin-inline-start: auto !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
}

/* Grup yang sedang terbuka (ada isinya kelihatan)   tandai label & ikon
 * dengan aksen oranye supaya jelas mana yang lagi aktif dibuka. */
.fi-sidebar-group:not(.fi-collapsed) .fi-sidebar-group-btn .fi-sidebar-group-label {
    color: var(--toya-orange-dark) !important;
    font-weight: 700 !important;
}

.fi-sidebar-group:not(.fi-collapsed) .fi-sidebar-group-btn svg {
    color: var(--toya-orange) !important;
}

/* Sub-item di dalam grup   SEJAJAR LURUS dengan menu utama (tidak
 * diindentasi/diberi garis vertikal), sesuai permintaan. */
.fi-sidebar-group-items {
    padding-inline-start: 0 !important;
    border-inline-start: none !important;
    margin-inline-start: 0 !important;
}

/* Filament sendiri otomatis render garis penghubung dekoratif untuk item
 * tanpa ikon di dalam grup (fi-sidebar-item-grouped-border)   matikan
 * juga supaya benar-benar rata, bukan cuma CSS milik kita. */
.fi-sidebar-item-grouped-border {
    display: none !important;
}

/* Bullet bundar oranye di depan teks sub-menu   sejajar horizontal dengan
 * posisi ikon menu utama (grup), teks sub-menu sejajar dengan teks menu
 * utama (lihat padding-inline-start grup: 0.6rem pad + 1.25rem ikon +
 * 0.65rem gap = ~2.5rem, dipakai juga di sini).
 *
 * PENTING: Filament pakai class "fi-sidebar-group-items" yang SAMA baik
 * untuk grup asli (Hotspot, Invoice, dst) MAUPUN "grup semu" tanpa nama
 * yang membungkus item tanpa grup (Dashboard, Transaksi)   makanya harus
 * disaring pakai [data-group-label] yang TIDAK KOSONG di elemen <li>
 * pembungkusnya, supaya Dashboard/Transaksi (yang sudah punya ikon
 * sendiri) tidak ikut dikasih bullet.
 */
li[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items .fi-sidebar-item-btn {
    position: relative !important;
    /* Digeser lebih ke kanan supaya jelas ini SUB-menu, tidak sebaris
       lurus dengan menu utama induknya. */
    padding-inline-start: 3.25rem !important;
}

li[data-group-label]:not([data-group-label=""]) > .fi-sidebar-group-items .fi-sidebar-item-btn::before {
    content: '' !important;
    position: absolute !important;
    inset-inline-start: 1.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0.4rem !important;
    height: 0.4rem !important;
    border-radius: 9999px !important;
    background: var(--toya-orange) !important;
}

.fi-sidebar-item-btn {
    border-radius: 0.6rem !important;
    color: #3f3f46 !important;
    transition: all 0.15s ease !important;
    font-weight: 500 !important;
}

.dark .fi-sidebar-item-btn {
    color: #d4d4d8 !important;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--toya-orange-soft) !important;
    color: var(--toya-orange-dark) !important;
}

.dark .fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

.fi-sidebar-item-active .fi-sidebar-item-btn {
    background: var(--toya-orange-soft) !important;
    color: var(--toya-orange-dark) !important;
    font-weight: 700 !important;
    border-inline-start: 3px solid var(--toya-orange) !important;
    padding-inline-start: calc(2.5rem - 3px) !important;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-btn {
    background: rgba(249, 115, 22, 0.12) !important;
    color: var(--toya-orange) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-btn::before {
    background: var(--toya-orange-dark) !important;
}

.fi-sidebar-item-icon {
    color: inherit !important;
}

.fi-logo {
    color: #18181b !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.dark .fi-logo {
    color: #ffffff !important;
}

/* ===== TOPBAR ===== */
.fi-topbar nav {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    border-block-end: 1px solid rgb(228 228 231) !important;
}

.dark .fi-topbar nav {
    background-color: #27272a !important;
    border-block-end-color: rgba(255, 255, 255, 0.06) !important;
}

/* ===== STAT CARDS   gradasi warna beda tiap kartu, tanpa garis aksen
 * memanjang di sisi kiri (dihapus atas permintaan   kesannya kurang rapi). */
.fi-wi-stats-overview-stat {
    border-radius: var(--toya-radius) !important;
    border: 1px solid rgb(228 228 231) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 1.25rem !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* (Blok gradasi warna per-kartu DIHAPUS. Selain memang tidak diinginkan,
   penargetannya juga salah: memakai :nth-of-type() padahal tiap kartu
   dibungkus elemennya sendiri   akibatnya SEMUA kartu terhitung "kartu 1"
   dan ikut kena gradasi oranye.) */

.dark .fi-wi-stats-overview-stat {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    letter-spacing: -0.02em !important;
    color: #18181b !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #ffffff !important;
}

.fi-wi-stats-overview-stat-label {
    font-weight: 600 !important;
    color: #71717a !important;
    font-size: 0.8125rem !important;
}

.fi-wi-stats-overview-stat-description {
    color: #a1a1aa !important;
    font-size: 0.75rem !important;
}

.fi-wi-stats-overview-stat-icon {
    border-radius: 0.75rem !important;
    background-color: var(--toya-orange-soft) !important;
    color: var(--toya-orange) !important;
}

/* ===== CARDS / SECTIONS umum ===== */
.fi-section {
    border-radius: var(--toya-radius) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.02) !important;
}

.fi-ta-ctn {
    border-radius: var(--toya-radius) !important;
    overflow: hidden !important;
}

/* ===== BUTTONS   kotak, rounded tipis saja, ukuran ringkas ===== */
.fi-btn.fi-color-primary {
    background: var(--toya-orange) !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--toya-orange-dark) !important;
}

.fi-btn {
    border-radius: 0.4rem !important;
    padding-inline: 0.75rem !important;
    padding-block: 0.4rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.fi-btn .fi-btn-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

/* ===== BADGES ===== */
.fi-badge {
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

/* ===== LOGIN PAGE   minimalis & profesional, background fiber optic ===== */
.fi-simple-layout {
    background-color: #0a0a0b !important;
    background-image: url('/images/fiber-bg.svg') !important;
    background-size: cover !important;
    background-position: center !important;
}

.fi-simple-main {
    border-radius: 1rem !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(6px) !important;
}

.fi-simple-main-ctn {
    padding-block: 2.25rem !important;
}

.fi-logo {
    justify-content: center !important;
}

/* Scrollbar halus, aksen oranye   TIDAK berlaku di sidebar (supaya tidak
 * jadi garis oranye tebal yang mengganggu, terutama saat mode ikon/rail
 * sempit). Sidebar pakai scrollbar netral tipis sendiri. */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.4);
    border-radius: 9999px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar::-webkit-scrollbar {
    width: 4px;
}
.fi-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}
.dark .fi-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* ===== RESPONSIVE   HP & Tablet =====
 * Kartu statistik dibuat lebih ringkas di layar kecil (padding & font
 * diperkecil) supaya tidak jadi kotak yang terlalu tinggi/memanjang
 * saat tampil 2 kolom sejajar.
 */
@media (max-width: 1023px) {
    .fi-wi-stats-overview-stat {
        padding: 0.75rem !important;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.125rem !important;
    }

    .fi-wi-stats-overview-stat-label {
        font-size: 0.6875rem !important;
    }

    .fi-wi-stats-overview-stat-description {
        font-size: 0.625rem !important;
    }

    .fi-wi-stats-overview-stat-icon {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }

    /* Widget dashboard (grafik, tabel voucher terjual) full-width & rapat di HP/tablet */
    .fi-wi {
        margin-inline: 0 !important;
    }

    .fi-page .grid {
        gap: 0.75rem !important;
    }
}

@media (max-width: 639px) {
    .fi-wi-stats-overview-stat {
        padding: 0.6rem !important;
    }
}

/* ===== FORM INPUT   minimalis, rounded, border tipis =====
 * Berlaku di semua form (modal maupun halaman penuh) supaya konsisten
 * di seluruh aplikasi, bukan cuma satu resource.
 */
.fi-input,
.fi-select-input,
textarea.fi-input,
.fi-fo-textarea textarea {
    border-radius: 0.6rem !important;
    border-color: rgb(228 228 231) !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    background-color: #fafafa !important;
    padding-block: 0.55rem !important;
}

/* ===== TINGGI SERAGAM   semua field satu baris (text, select, date,
 * number, dsb) dipaksa tinggi yang SAMA PERSIS, supaya tidak ada yang
 * kelihatan lebih besar/kecil sebelah dalam form yang sama. Textarea
 * SENGAJA dikecualikan (wajar lebih tinggi, multi-baris). */
.fi-input,
.fi-select-input,
.fi-fo-select .choices__inner,
.fi-fo-date-time-picker .fi-input,
.fi-dropdown-trigger .fi-btn {
    min-height: 2.35rem !important;
    height: 2.35rem !important;
    line-height: 1.25rem !important;
}

textarea.fi-input,
.fi-fo-textarea textarea {
    height: auto !important;
    min-height: 5rem !important;
}

/* Select (termasuk yg searchable/choices.js)   samakan padding vertikal
 * dan posisi teks/ikon supaya sejajar persis dengan text input biasa. */
.fi-fo-select .choices__inner {
    padding-block: 0.3rem !important;
    display: flex !important;
    align-items: center !important;
}

.fi-fo-select .choices__list--single {
    padding: 0 !important;
}

/* Ikon chevron/clear di dalam select   ukuran kecil konsisten, tidak
 * membuat baris jadi lebih tinggi dari text input di sebelahnya. */
.fi-select-input-actions,
.choices__list--dropdown .choices__item {
    font-size: 0.8125rem !important;
}

/* Prefix/suffix icon di TextInput (mis. "Rp", "%")   jangan sampai bikin
 * tinggi field membesar, sejajarkan vertikal-tengah. */
.fi-input-wrp {
    min-height: 2.35rem !important;
    align-items: center !important;
}

.fi-input-wrp .fi-input {
    height: auto !important;
    min-height: unset !important;
}

.dark .fi-input,
.dark .fi-select-input,
.dark textarea.fi-input,
.dark .fi-fo-textarea textarea {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Aturan orange:focus di sini SUDAH DIHAPUS (bukan cuma ditimpa) � sempat
 * bikin outline oranye tetap muncul walau sudah ditimpa berkali-kali di
 * bawah, karena rupanya ada beberapa salinan aturan serupa tersebar di
 * file ini dari revisi-revisi sebelumnya. */

.fi-fo-field-wrp-label {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0.25rem !important;
}

/* Modal form: rapatkan jarak antar field & hilangkan bayangan berlebih */
.fi-modal-window {
    border-radius: 1rem !important;
}

.fi-modal-content .fi-fo-component-ctn {
    gap: 1rem !important;
}

/* ===== TAMPILAN MINIMALIS   teks lebih kecil, tabel lebih rapat, tombol
 * aksi ikon-saja (Tambah/Edit/Hapus sudah diset ->iconButton() di kode).
 */

.fi-section-header-heading {
    font-size: 0.9375rem !important;
}

.fi-ta-header-cell {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #27272a !important;
    padding-block: 0.65rem !important;
    background-color: #fafafa !important;
}

.dark .fi-ta-header-cell {
    color: #e4e4e7 !important;
    background-color: #27272a !important;
}

.fi-ta-cell {
    font-size: 0.8125rem !important;
    padding-block: 0.6rem !important;
}

.fi-ta-text {
    font-size: 0.8125rem !important;
}

.fi-badge {
    font-size: 0.6875rem !important;
    padding-inline: 0.5rem !important;
    padding-block: 0.125rem !important;
}

/* Tombol aksi tabel: kotak dengan garis warna (edit=biru, hapus=merah),
 * bukan bulat polos   sesuai referensi tampilan minimalis yang diminta. */
.fi-ta-actions .fi-icon-btn {
    width: 1.85rem !important;
    height: 1.85rem !important;
    border-radius: 0.45rem !important;
    border: 1px solid transparent !important;
}

.fi-ta-actions {
    gap: 0.4rem !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-primary,
.fi-ta-actions .fi-icon-btn.fi-color-info {
    border-color: rgb(191 219 254) !important;
    background-color: rgb(239 246 255) !important;
    color: rgb(37 99 235) !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger {
    border-color: rgb(254 202 202) !important;
    background-color: rgb(254 242 242) !important;
    color: rgb(220 38 38) !important;
}

.dark .fi-ta-actions .fi-icon-btn.fi-color-primary,
.dark .fi-ta-actions .fi-icon-btn.fi-color-info {
    background-color: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

.dark .fi-ta-actions .fi-icon-btn.fi-color-danger {
    background-color: rgba(220, 38, 38, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}

/* ===== ENTERPRISE / PREMIUM POLISH =====
 * White space lega, shadow sangat halus, border radius lembut, transisi
 * ringan (bukan animasi berat), hover state jelas tapi tidak norak.
 */

/* Card & section: shadow halus + transisi lembut saat hover */
.fi-section,
.fi-wi-stats-overview-stat {
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.fi-section:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Baris tabel: hover jelas, transisi halus */
.fi-ta-row {
    transition: background-color 0.15s ease !important;
}

.fi-ta-row:hover {
    background-color: rgba(249, 115, 22, 0.035) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Tombol: transisi halus, tidak melompat */
.fi-btn,
.fi-icon-btn,
.fi-sidebar-item-btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}

.fi-btn:active,
.fi-icon-btn:active {
    transform: scale(0.97) !important;
}

/* Nav item hover halus (di luar item aktif yang sudah oranye) */
.fi-sidebar-item:not(.fi-sidebar-item-active) .fi-sidebar-item-btn:hover {
    transform: translateX(2px) !important;
}

/* White space lebih lega di konten utama */
.fi-main {
    padding-block: 1.5rem !important;
}

/* ===== RESPONSIVE   cegah horizontal overflow di semua ukuran layar =====
 * PENTING: pakai `clip`, BUKAN `hidden`. `overflow-x: hidden` diam-diam
 * membatalkan `position: sticky` pada elemen turunan (sidebar jadi ikut
 * ke-scroll). `clip` mencegah scroll menyamping yang sama tanpa efek itu. */
html, body {
    overflow-x: clip !important;
    background-color: #ffffff !important;
}

.dark html, .dark body {
    background-color: #0f0f10 !important;
}

.fi-main-ctn {
    max-width: 100vw !important;
    width: 100% !important;
    background-color: #ffffff !important;
}

.dark .fi-main-ctn {
    background-color: #0f0f10 !important;
}

/* Jaring pengaman terakhir   apa pun nama pembungkus antara sidebar dan
 * konten yang masih abu-abu, paksa putih (kecuali sidebar & topbar sendiri
 * yang memang butuh warnanya masing-masing). */
.fi-layout,
.fi-body {
    background-color: #ffffff !important;
}

.dark .fi-layout,
.dark .fi-body {
    background-color: #0f0f10 !important;
}

/* Tabel: scroll horizontal HANYA di dalam wrapper-nya, bukan seluruh halaman */
.fi-ta-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 639px) {
    .fi-main {
        padding-inline: 0.75rem !important;
        padding-block: 1rem !important;
    }

    /* Tombol header (Generate, Export, dll) jangan sampai keluar layar  
     * dibungkus rapi & bisa wrap ke baris baru. */
    .fi-header .fi-actions {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .fi-header-heading {
        font-size: 1.05rem !important;
    }
}

/* ===== EMPTY STATE   sedikit lebih lembut, tidak terlalu polos ===== */
.fi-ta-empty-state-icon {
    color: var(--toya-orange) !important;
    opacity: 0.4 !important;
}

/* ===== SIDEBAR   jarak antar menu dirapatkan (atas ke bawah berdekatan) ===== */
.fi-sidebar-nav {
    gap: 0.1rem !important;
}

.fi-sidebar-item {
    margin-block: 0 !important;
}

.fi-sidebar-item-btn {
    padding-block: 0.4rem !important;
}

.fi-sidebar-group {
    margin-block-end: 0 !important;
}

.fi-sidebar-group-items {
    gap: 0.05rem !important;
}

/* ===== DASHBOARD   pas 1 layar desktop, tidak perlu scroll panjang ===== */
@media (min-width: 1024px) {
    .fi-dashboard-page .fi-wi {
        margin-block: 0 !important;
    }

    .fi-dashboard-page .fi-section-content {
        padding: 1rem !important;
    }

    .fi-wi-stats-overview-stat {
        padding: 0.85rem !important;
    }

    .fi-wi-stats-overview-stat-value {
        font-size: 1.375rem !important;
    }
}

/* Baris widget (Ringkasan Pendapatan / Performa Outlet / Aktivitas Login)
 * dibuat sama tinggi semua, sejajar rapi. Pakai :has() supaya TIDAK
 * bergantung nama class grid spesifik Filament (yang bisa berubah/beda
 * dari dugaan)   cari otomatis wadah apa pun yang berisi ".fi-wi" langsung
 * sebagai anaknya, lalu paksa stretch.
 */
div:has(> .fi-wi) {
    align-items: stretch !important;
}

.fi-wi {
    height: 100% !important;
    display: flex !important;
}

.fi-wi > * {
    width: 100% !important;
}

.fi-wi .fi-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.fi-wi .fi-section-content-ctn,
.fi-wi .fi-section-content {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.fi-page .grid {
    row-gap: 1rem !important;
}

/* ===== FRAME TIPIS + KURANGI RUANG KOSONG =====
 * Kartu sebelumnya cuma pakai shadow tanpa border, jadi kelihatan "menyatu"
 * dengan background dan ruang kosong di sekitarnya kelihatan besar/krem.
 * Tambahkan garis tipis di semua card + halaman dibuat lebih penuh (tidak
 * dibatasi max-width sempit di tengah).
 */
.fi-section {
    border: 1px solid rgb(228 228 231) !important;
}

.dark .fi-section {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

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

.dark .fi-main {
    background-color: #0f0f10 !important;
}

/* Lebarkan konten di SEMUA halaman (bukan cuma Dashboard) supaya penuh,
 * tidak menyisakan ruang kosong besar di kiri-kanan. Filament membatasi
 * lebar konten lewat class Tailwind "max-w-*" (mis. max-w-7xl) di elemen
 * pembungkus   daripada menebak nama persisnya (bisa beda tiap halaman/
 * versi), cari LANGSUNG anak dari .fi-main / .fi-main-ctn yang punya
 * class mengandung "max-w-" lalu lebarkan jadi 100%. Dibatasi ke anak
 * LANGSUNG saja (bukan semua turunan) supaya tidak ikut melebarkan
 * elemen kecil di dalam halaman (input, badge, dll) yang sengaja dibatasi.
 */
/* PENYEBAB SEBENARNYA: `.fi-main` ITU SENDIRI yang membawa class max-w-7xl
 * + mx-auto dari Filament   selama ini aturan CSS-nya salah sasaran karena
 * cuma menyasar elemen DI DALAM .fi-main, bukan .fi-main-nya sendiri.
 * Ini satu-satunya aturan yang dibutuhkan; jangan tambah paksaan width/flex
 * ke turunan-turunannya (percobaan itu dulu malah merusak layout responsif). */
.fi-main {
    max-width: 100% !important;
    margin-inline: 0 !important;
}

.fi-main [class*="max-w-"] {
    max-width: 100% !important;
}

.fi-page {
    padding-inline: 1.25rem !important;
}

@media (min-width: 1024px) {
    .fi-page {
        padding-inline: 1.75rem !important;
    }
}

/* ===== SAPAAN SESUAI JAM (Greeting Widget) ===== */
.tya-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.1rem 0.75rem 0.1rem;
}
.tya-greeting-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #18181b;
}
.dark .tya-greeting-title {
    color: #ffffff;
}
.tya-greeting-title .wave {
    display: inline-block;
}
.tya-greeting-sub {
    font-size: 0.8125rem;
    color: #a1a1aa;
    margin-top: 0.15rem;
}

/* ===== SIDEBAR DIAM SAAT SCROLL (desktop saja) =====
 * DIBATASI ke min-width 1024px dengan sengaja: di layar kecil sidebar
 * berubah jadi drawer yang butuh positioning berbeda   memaksa sticky di
 * semua ukuran layar pernah dicoba dan MERUSAK layout responsif.
 * Cukup 4 baris ini, jangan tambah paksaan flex/height ke elemen lain.
 */
/* ===== SIDEBAR BENAR-BENAR FULL HEIGHT (dari atas ke bawah) =====
 * Sebelumnya sidebar cuma "sticky" dari titik topbar berakhir ke bawah  
 * makanya ada celah putih di atas sidebar (topbar menutupi lebar penuh).
 * Sekarang sidebar di-fixed dari y=0 (paling atas viewport) sampai bawah,
 * logo tampil di HEADER SIDEBAR sendiri (bukan di topbar lagi), dan
 * topbar+konten digeser ke kanan selebar sidebar supaya tidak ketimpa.
 */
@media (min-width: 1024px) {
    .fi-sidebar {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        width: var(--sidebar-width) !important;
        height: 100vh !important;
        /* PENTING: JANGAN pakai overflow-y:auto + overflow-x:hidden di sini.
         * Itu memotong flyout sub-menu yang muncul ke KANAN sidebar saat
         * mode ikon (penyebab sub-menu tidak kelihatan saat hover).
         * Scroll dipindah ke .fi-sidebar-nav (elemen dalam)   lihat blok
         * "PENUTUP FINAL: header sidebar" di bawah. */
        overflow: visible !important;
        z-index: 40 !important;
    }

    .fi-topbar-ctn {
        margin-inline-start: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
        position: relative !important;
        z-index: 20 !important;
    }

    .fi-main-ctn {
        margin-inline-start: var(--sidebar-width) !important;
        width: calc(100% - var(--sidebar-width)) !important;
    }

    /* Header sidebar (logo) wajib tetap terlihat & di atas elemen lain
     * dalam sidebar-nya sendiri. */
    .fi-sidebar-header-ctn,
    .fi-sidebar-header {
        position: relative !important;
        z-index: 1 !important;
        background: #ffffff !important;
    }

    .dark .fi-sidebar-header-ctn,
    .dark .fi-sidebar-header {
        background: #18181b !important;
    }

    /* Logo sudah tampil di header sidebar sendiri   jangan dobel di topbar. */
    .fi-topbar-start .fi-logo {
        display: none !important;
    }
}

/* ===== REDESAIN TABEL   profesional, nilai jual tinggi =====
 * Kontainer: shadow halus + border tipis, sudut membulat lembut.
 * Header: latar abu muda, teks tegas.
 * Baris: garis pemisah tipis, zebra sangat halus, hover jelas.
 * Search/filter/pagination: selaras dengan gaya tombol baru (kotak, ringkas).
 */
.fi-ta-ctn {
    border: 1px solid rgb(228 228 231) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 6px 18px rgba(0, 0, 0, 0.035) !important;
}

.dark .fi-ta-ctn {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-ta-header-ctn {
    padding: 1rem 1.25rem !important;
}

/* Zebra sangat halus   baris genap dikasih tint tipis supaya mata lebih
 * mudah mengikuti garis data panjang, tanpa kelihatan ramai. */
.fi-ta-row:nth-child(even) {
    background-color: #fbfbfb !important;
}

.dark .fi-ta-row:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

.fi-ta-row:nth-child(even):hover {
    background-color: rgba(249, 115, 22, 0.045) !important;
}

.fi-ta-row td {
    border-color: rgb(244 244 245) !important;
}

.dark .fi-ta-row td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Kolom pertama (biasanya kode/ID) dikasih sedikit penekanan */
.fi-ta-row td:first-child {
    font-weight: 600 !important;
}

/* Search box & tombol filter di toolbar tabel   samakan gaya kotak ringkas */
.fi-ta-search-field .fi-input {
    border-radius: 0.4rem !important;
}

.fi-ta-filters-trigger-action {
    border-radius: 0.4rem !important;
}

/* Pagination   tombol halaman kotak kecil rapi */
.fi-pagination-item,
.fi-pagination-item-label {
    border-radius: 0.4rem !important;
    font-size: 0.8125rem !important;
}

.fi-pagination-overview,
.fi-ta-pagination {
    font-size: 0.8125rem !important;
}

/* Checkbox seleksi baris   sedikit lebih besar & jelas */
.fi-checkbox-input {
    border-radius: 0.3rem !important;
}

/* ===== HEADER (Judul halaman + Breadcrumb)   NEMPEL LANGSUNG di bawah
 * topbar, tanpa jeda, seperti referensi tampilan yang diminta. Judul H1
 * tebal di kiri, breadcrumb di kanan pada baris yang sama.
 * Struktur asli Filament: <header class="fi-header"> berisi div
 * (breadcrumb lalu h1 lalu subheading, urutan DOM) sebagai saudara dari
 * .fi-header-actions-ctn. Kita balik urutan visualnya dengan flex row-
 * reverse supaya breadcrumb tampil di KANAN tanpa mengubah DOM. */
.fi-header {
    margin-block-start: 0 !important;
    padding-block: 0.85rem !important;
    padding-inline: 1.25rem !important;
    margin-inline: -1.25rem !important;
    border-block-end: 1px solid rgb(228 228 231) !important;
    background: #ffffff !important;
    width: calc(100% + 2.5rem) !important;
}

@media (min-width: 1024px) {
    .fi-header {
        padding-inline: 1.75rem !important;
        margin-inline: -1.75rem !important;
        width: calc(100% + 3.5rem) !important;
    }
}

.dark .fi-header {
    border-block-end-color: rgba(255, 255, 255, 0.08) !important;
    background: #0f0f10 !important;
}

.fi-header > div:first-child {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

.fi-header-heading {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    flex: 0 0 auto !important;
}

.fi-breadcrumbs {
    font-size: 0.75rem !important;
    margin-inline-start: auto !important;
}

/* Hilangkan padding-top bawaan .fi-main SEKARANG diserap oleh .fi-header
 * sendiri (di atas), jadi header betul-betul nempel ke topbar. Padding
 * konten halaman di BAWAH header tetap ada supaya isi halaman tidak
 * mepet. */
.fi-main {
    padding-block-start: 0 !important;
}

.fi-page {
    padding-block-start: 0 !important;
}

.fi-page-content {
    padding-block-start: 1.25rem !important;
}

/* ===== MODAL & WIZARD   lebih lega, rapi, profesional =====
 * Referensi tampilan yang diminta: header modal jelas (ikon+judul kiri, X
 * kanan), border tipis pemisah, whitespace lega, tombol navigasi wizard
 * (Back/Next) dengan ikon panah, stepper jelas dengan garis penghubung.
 */
.fi-modal-header {
    padding-block: 1.25rem !important;
    padding-inline: 1.5rem !important;
    border-block-end: 1px solid rgb(228 228 231) !important;
}

.dark .fi-modal-header {
    border-block-end-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-modal-heading {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.fi-modal-content,
.fi-modal-window > div {
    padding-inline: 1.5rem !important;
}

.fi-modal-footer {
    padding-block: 1.1rem !important;
    padding-inline: 1.5rem !important;
    border-block-start: 1px solid rgb(228 228 231) !important;
}

.dark .fi-modal-footer {
    border-block-start-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tombol "Batal"/Cancel   netral abu-abu, tidak ikut warna primary */
.fi-modal-footer .fi-btn.fi-color-gray {
    background-color: #f4f4f5 !important;
    color: #3f3f46 !important;
}

.dark .fi-modal-footer .fi-btn.fi-color-gray {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e4e4e7 !important;
}

/* Wizard   stepper: lingkaran nomor jelas, garis penghubung tipis, label
 * step aktif ditebalkan warna primary (oranye, sudah otomatis lewat
 * konfigurasi ->colors() panel   CSS ini cuma merapikan ukuran/spasi). */
.fi-wizard-header {
    padding-block-end: 1.5rem !important;
    margin-block-end: 1.5rem !important;
    border-block-end: 1px solid rgb(228 228 231) !important;
}

.dark .fi-wizard-header {
    border-block-end-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-wizard-step-icon {
    width: 2rem !important;
    height: 2rem !important;
    font-weight: 700 !important;
}

.fi-wizard-step-label {
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
}

/* Field dalam satu step wizard: jarak antar baris lebih lega */
.fi-wizard-step .fi-fo-component-ctn {
    gap: 1.1rem !important;
}

/* ===== TOPBAR: search & jam server di KIRI (dekat hamburger/logo) =====
 * Sesuai referensi tampilan yang diminta   bukan posisi bawaan Filament
 * yang menaruhnya di kanan dekat notifikasi/user.
 */
.fi-topbar-search-time-ctn {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-inline-start: 0 !important;
}

.fi-topbar-search-time-ctn .fi-global-search-ctn {
    max-width: 22rem !important;
    width: 100% !important;
}

/* Pill "Waktu Server"   kotak border tipis, ikon jam, teks minimalis. */
.tya-waktu-server {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding-inline: 0.7rem !important;
    padding-block: 0.4rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgb(228 228 231) !important;
    background: #fafafa !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.dark .tya-waktu-server {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.tya-waktu-server-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
    color: var(--toya-orange) !important;
    flex-shrink: 0 !important;
}

.tya-waktu-server-label {
    color: #71717a !important;
    font-weight: 600 !important;
}

.dark .tya-waktu-server-label {
    color: #a1a1aa !important;
}

.tya-waktu-server-sep {
    width: 1px !important;
    height: 0.85rem !important;
    background: rgb(228 228 231) !important;
}

.dark .tya-waktu-server-sep {
    background: rgba(255, 255, 255, 0.12) !important;
}

.tya-waktu-server-value {
    font-family: ui-monospace, monospace !important;
    font-weight: 600 !important;
    color: #27272a !important;
    font-variant-numeric: tabular-nums !important;
}

.dark .tya-waktu-server-value {
    color: #e4e4e7 !important;
}

@media (max-width: 1023px) {
    .fi-topbar-search-time-ctn {
        display: none !important;
    }
}

/* ===== NAMA USER DI TOPBAR   pastikan tampil PENUH, tidak terpotong ===== */
.fi-user-menu .fi-dropdown-trigger,
.fi-user-menu .fi-dropdown-trigger .fi-btn-label {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Tema switcher (Terang/Gelap/Sistem)   tampil jelas langsung di topbar,
 * bukan disembunyikan di dalam menu user. */
.fi-theme-switcher {
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.5rem !important;
    padding: 0.15rem !important;
}

.dark .fi-theme-switcher {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== PENUTUP FINAL: header (judul+breadcrumb) WAJIB nempel topbar =====
 * Ditaruh SENGAJA di baris paling akhir file supaya menang lawan aturan
 * manapun di atas (kalau ada yang tumpang-tindih menambah padding/margin
 * atas secara tidak sengaja di kemudian hari).
 */
.fi-main,
.fi-page,
.fi-page-header-main-ctn {
    padding-block-start: 0 !important;
    margin-block-start: 0 !important;
}

.fi-header {
    margin-block-start: 0 !important;
}

/* ===== HAPUS KOTAK KOSONG bergaris di antara heading & konten =====
 * Beberapa halaman (mis. Member Hotspot) menyisakan wadah widget/toolbar
 * kosong yang tetap tampil sebagai kotak bergaris tipis walau tidak ada
 * isinya sama sekali. Sembunyikan kalau memang benar-benar kosong.
 */
.fi-page-header-widgets:empty,
.fi-ta-header-toolbar:empty,
.fi-wi-stats-overview:empty,
.fi-section:empty,
.fi-page-header-widgets:not(:has(*)),
.fi-ta-header-toolbar:not(:has(*)),
.fi-wi-stats-overview:not(:has(*)) {
    display: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===== PENUTUP FINAL: header sidebar (logo) WAJIB terlihat & punya tinggi =====
 * Sidebar sekarang position:fixed (lihat blok sebelumnya)   pastikan
 * header logo-nya tidak collapse ke tinggi nol atau ketutup elemen lain,
 * apa pun urutan cascade sebelumnya.
 */
@media (min-width: 1024px) {
    .fi-sidebar {
        display: flex !important;
        flex-direction: column !important;
    }

    .fi-sidebar-header-ctn {
        flex-shrink: 0 !important;
    }

    .fi-sidebar-header-ctn,
    .fi-sidebar-header {
        display: flex !important;
        align-items: center !important;
        min-height: 4rem !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CATATAN: .fi-sidebar-header-logo-ctn SENGAJA TIDAK dipaksa
     * display/visibility di sini (beda dari header-ctn di atas)   dia
     * punya x-show bawaan Filament yang menyembunyikannya saat sidebar
     * di-collapse (mode ikon). Kalau dipaksa visible, logo penuh tetap
     * kelihatan padahal seharusnya hilang & diganti versi ikon-saja
     * (lihat .tya-sidebar-icon-only di bawah). */

    .fi-sidebar-nav {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
    }
}

/* ===== Nama lengkap di sebelah avatar (topbar) =====
 * Filament defaultnya CUMA tampilkan avatar tanpa teks nama kalau menu
 * user posisinya di topbar (beda dari kalau di sidebar)   sudah kami
 * tambahkan span teksnya manual di blade, tinggal dirapikan style-nya.
 */
.tya-user-menu-trigger-topbar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding-inline-end: 0.5rem !important;
}

.tya-user-menu-trigger-text {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #27272a !important;
    white-space: nowrap !important;
}

.dark .tya-user-menu-trigger-text {
    color: #e4e4e7 !important;
}

@media (max-width: 639px) {
    .tya-user-menu-trigger-text {
        display: none !important;
    }
}

/* ===== TOMBOL AKSI TABEL SEJAJAR DENGAN SEARCH (bukan baris terpisah) =====
 * Filament secara bawaan render baris tombol (Tambah/Print/Export/Import/
 * Generate, dkk   class .fi-ta-header) dan baris Search/Filter (class
 * .fi-ta-header-toolbar) sebagai DUA BARIS terpisah. Digabung jadi satu
 * baris: tombol di kiri, search+filter di kanan. Berlaku otomatis di
 * SEMUA halaman yang punya pola serupa (tidak perlu diatur per-resource).
 */
.fi-ta-header-ctn {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 1rem 1.25rem !important;
}

.fi-ta-header-ctn > .fi-ta-header,
.fi-ta-header-ctn > .fi-ta-header-toolbar {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex: 0 1 auto !important;
}

.fi-ta-header {
    display: flex !important;
    align-items: center !important;
}

/* ===== TOMBOL AKSI SEKUNDER   putih bersih + border tipis netral =====
 * Sesuai referensi terbaru: HANYA tombol utama (Tambah User, Generate  
 * warna primary/oranye solid) yang menonjol. Tombol sekunder (Print,
 * Export CSV, Import   warna gray) dibuat bersih: putih/abu sangat
 * tipis + border netral + teks navy gelap, BUKAN outline oranye lagi
 * (revisi dari sebelumnya, mengikuti referensi visual yang lebih baru).
 * Berlaku otomatis di semua halaman (tabel maupun header halaman).
 */
.fi-ta-header .fi-btn.fi-color-gray,
.fi-ta-actions .fi-btn.fi-color-gray,
.fi-header-actions-ctn .fi-btn.fi-color-gray {
    background-color: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    color: #27272a !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

.dark .fi-ta-header .fi-btn.fi-color-gray,
.dark .fi-ta-actions .fi-btn.fi-color-gray,
.dark .fi-header-actions-ctn .fi-btn.fi-color-gray {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e4e7 !important;
}

.fi-ta-header .fi-btn.fi-color-gray:hover,
.fi-ta-actions .fi-btn.fi-color-gray:hover,
.fi-header-actions-ctn .fi-btn.fi-color-gray:hover {
    background-color: #fafafa !important;
    border-color: #d4d4d8 !important;
}

.dark .fi-ta-header .fi-btn.fi-color-gray:hover,
.dark .fi-ta-actions .fi-btn.fi-color-gray:hover,
.dark .fi-header-actions-ctn .fi-btn.fi-color-gray:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

@media (max-width: 767px) {
    .fi-ta-header-ctn {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ===== FOOTER   copyright kecil di bawah konten ===== */
.tya-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.75rem;
    font-size: 0.75rem;
    color: #a1a1aa;
    border-block-start: 1px solid rgb(228 228 231);
    margin-inline-start: var(--sidebar-width, 0);
}

.dark .tya-footer {
    border-block-start-color: rgba(255, 255, 255, 0.08);
    color: #71717a;
}

@media (max-width: 1023px) {
    .tya-footer {
        margin-inline-start: 0;
        flex-direction: column;
        gap: 0.35rem;
        text-align: center;
    }
}

/* ===== Nilai uang oranye di kolom tabel (Harga, dsb)   aksen, bukan biasa ===== */
.fi-ta-text-column[data-color="warning"] .fi-ta-text-item-label,
.fi-ta-text-column-money {
    color: var(--toya-orange-dark) !important;
    font-weight: 700 !important;
}

/* ===== PENUTUP FINAL: SEMUA tombol outline abu tipis, teks putih utk oranye =====
 * Ditaruh di baris paling akhir supaya menang lawan aturan manapun di
 * atas. Berlaku ke SEMUA tombol berwarna gray/putih di seluruh aplikasi
 * (bukan cuma tombol tabel)   dan pastikan tombol oranye/primary teksnya
 * PUTIH (kadang ketiban warna lain dari aturan sebelumnya).
 */
.fi-btn.fi-color-gray {
    background-color: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    color: #3f3f46 !important;
    box-shadow: none !important;
}

.dark .fi-btn.fi-color-gray {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e4e4e7 !important;
}

.fi-btn.fi-color-gray:hover {
    background-color: #fafafa !important;
    border-color: #d4d4d8 !important;
}

.fi-btn.fi-color-primary,
.fi-btn.fi-color-warning {
    color: #ffffff !important;
}

.fi-btn.fi-color-primary .fi-btn-label,
.fi-btn.fi-color-warning .fi-btn-label,
.fi-btn.fi-color-primary .fi-btn-icon,
.fi-btn.fi-color-warning .fi-btn-icon {
    color: #ffffff !important;
}

/* Tombol aksi toolbar tabel: sejajar vertikal-tengah dengan Search. */
.fi-ta-header-ctn {
    align-items: center !important;
}

.fi-ta-header,
.fi-ta-actions,
.fi-ta-header-toolbar {
    display: flex !important;
    align-items: center !important;
}

/* ===== Filter, Search, Pengaturan Kolom   MINIMALIS =====
 * Ikon lebih kecil & abu netral (bukan hitam pekat), input search lebih
 * tipis bordernya, badge jumlah filter aktif diperkecil.
 */
.fi-ta-search-field input,
.fi-ta-search-field .fi-input {
    border: 1px solid rgb(228 228 231) !important;
    background: #fafafa !important;
    font-size: 0.8125rem !important;
}

.fi-icon-btn svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    color: #a1a1aa !important;
}

.fi-ta-filters-trigger-action-ctn .fi-icon-btn svg,
.fi-ta-column-manager-trigger-action svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
}

.fi-badge {
    font-size: 0.625rem !important;
    padding-inline: 0.35rem !important;
    min-width: 1.1rem !important;
    height: 1.1rem !important;
}

/* ===== TABEL LEBIH ELEGAN   kontainer rounded lembut, badge pill, ikon
 * sort selalu kelihatan, pagination bulat modern. Warna TETAP oranye
 * (tidak diganti ungu/biru seperti referensi), cuma model/bentuknya yang
 * disamakan supaya lebih "custom", bukan tampilan default Filament.
 */
.fi-ta-ctn {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

.fi-ta-header-ctn {
    border-radius: 1rem 1rem 0 0 !important;
}

/* Ikon sort di setiap kolom yang bisa diurutkan   selalu kelihatan (bukan
 * cuma muncul pas hover), sedikit transparan kalau belum aktif, solid
 * oranye kalau kolom itu yang sedang dipakai urutkan. */
.fi-ta-header-cell-sort-btn svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
    opacity: 0.45 !important;
}

.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn svg {
    opacity: 1 !important;
    color: var(--toya-orange) !important;
}

/* Badge status   bentuk pill penuh (lebih bulat), padding lebih lega. */
.fi-badge {
    border-radius: 9999px !important;
    padding-inline: 0.65rem !important;
    font-weight: 600 !important;
}

/* Tombol filter jadi pill berlabel (bukan cuma ikon corong) supaya lebih
 * jelas fungsinya, senada dengan tombol lain yang sudah pill/outline. */
.fi-ta-filters-trigger-action {
    border-radius: 9999px !important;
    border: 1px solid rgb(228 228 231) !important;
}

/* Semua tombol aksi (toolbar tabel & header halaman) jadi pill penuh
 * (border-radius maksimal), bukan kotak membulat sedikit seperti
 * sebelumnya   kesan lebih modern & lembut. */
.fi-ta-header .fi-btn,
.fi-ta-actions .fi-btn,
.fi-header-actions-ctn .fi-btn,
.fi-ta-filters-trigger-action-ctn .fi-btn {
    border-radius: 9999px !important;
}

/* Pagination   nomor halaman jadi lingkaran/pill, halaman aktif oranye solid. */
.fi-pagination-item,
.fi-pagination-item-label {
    border-radius: 9999px !important;
    min-width: 2rem !important;
    height: 2rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fi-pagination-item-active,
.fi-pagination-item[aria-current="page"] {
    background: var(--toya-orange) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Kotak "Tampilkan X data per halaman"   samakan tinggi & bentuk dengan
 * input lain (sudah diseragamkan sebelumnya), cuma dirapikan sudutnya. */
.fi-select-input {
    border-radius: 0.6rem !important;
}

/* ===== PENUTUP FINAL #2: sembunyikan Heading & Breadcrumb, tagline minimalis =====
 * Revisi arahan sebelumnya   heading & breadcrumb disembunyikan LAGI di
 * SEMUA halaman, tapi tagline (subheading) TETAP tampil, dibuat kecil &
 * minimalis. Ditaruh di akhir file supaya menang lawan aturan manapun
 * sebelumnya yang menampilkan heading/breadcrumb.
 */
.fi-header-heading,
.fi-breadcrumbs {
    display: none !important;
}

.fi-header {
    padding-block: 0.6rem !important;
}

/* .fi-header-subheading DIHAPUS � elemen ini sudah tidak pernah dirender
 * sama sekali lagi (getSubheading() dihapus dari semua Page/Resource),
 * jadi aturan CSS untuk itu sudah tidak berguna, dibersihkan. */

/* ===== PENUTUP FINAL #3: tombol oranye WAJIB teks putih, tombol lain
 * (apapun warnanya, kecuali primary/oranye) WAJIB putih + outline abu =====
 */
.fi-btn.fi-color-primary,
.fi-btn.fi-color-primary *,
.fi-icon-btn.fi-color-primary,
.fi-icon-btn.fi-color-primary svg {
    color: #ffffff !important;
}

.fi-btn:not(.fi-color-primary),
.fi-icon-btn:not(.fi-color-primary) {
    background-color: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    color: #52525b !important;
    box-shadow: none !important;
}

.dark .fi-btn:not(.fi-color-primary),
.dark .fi-icon-btn:not(.fi-color-primary) {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #d4d4d8 !important;
}

.fi-btn:not(.fi-color-primary) *,
.fi-icon-btn:not(.fi-color-primary) svg {
    color: #52525b !important;
}

.dark .fi-btn:not(.fi-color-primary) *,
.dark .fi-icon-btn:not(.fi-color-primary) svg {
    color: #d4d4d8 !important;
}

.fi-btn:not(.fi-color-primary):hover,
.fi-icon-btn:not(.fi-color-primary):hover {
    background-color: #fafafa !important;
    border-color: #d4d4d8 !important;
}

/* ===== PENUTUP FINAL #4 =====
 * 1. Tombol kembali jadi kotak dengan sudut membulat TIPIS (bukan oval
 *    penuh/pill lagi   revisi dari batch sebelumnya), teks TIDAK bold.
 * 2. Placeholder "Search" dibuat kecil & minimalis.
 * 3. Ruang kosong tak berfungsi di atas tabel dihapus.
 * 4. Tagline di bawah topbar dibuat sedikit lebih besar lagi (revisi dari
 *    batch sebelumnya yang terlalu kecil).
 * Ditaruh di baris PALING AKHIR supaya menang lawan semua aturan di atas.
 */
.fi-btn,
.fi-icon-btn,
.fi-ta-header .fi-btn,
.fi-ta-actions .fi-btn,
.fi-header-actions-ctn .fi-btn,
.fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-pagination-item,
.fi-pagination-item-label,
.fi-badge,
.fi-ta-filters-trigger-action {
    border-radius: 0.5rem !important;
}

.fi-btn,
.fi-btn .fi-btn-label {
    font-weight: 500 !important;
}

.fi-ta-search-field input::placeholder,
.fi-ta-search-field .fi-input::placeholder {
    font-size: 0.75rem !important;
    color: #a1a1aa !important;
    font-weight: 400 !important;
}

.fi-ta-search-field input,
.fi-ta-search-field .fi-input {
    font-size: 0.8125rem !important;
}

/* Ruang kosong di atas tabel (bekas area heading/deskripsi yang sudah
 * disembunyikan)   dihilangkan supaya tabel langsung nempel ke atas. */
.fi-page-content {
    padding-block-start: 0.75rem !important;
}

.fi-page-header-main-ctn {
    margin-block-end: 0 !important;
    padding-block: 0 !important;
}

.fi-header {
    padding-block: 0.5rem !important;
}

/* .fi-header-subheading (tagline bawah topbar) DIHAPUS � sama seperti
 * catatan di atas, sudah tidak dirender sama sekali lagi. */

/* ===== PENUTUP FINAL #5: tinggi baris tabel mengikuti ukuran font (ramping) =====
 */
.fi-ta-cell {
    padding-block: 0.4rem !important;
}

.fi-ta-row td {
    padding-block: 0 !important;
}

.fi-ta-text-item,
.fi-ta-text {
    line-height: 1.3 !important;
}

.fi-ta-header-cell {
    padding-block: 0.55rem !important;
}

/* ===== PENUTUP FINAL #6: garis antar kolom tabel + search makin minimalis ===== */
.fi-ta-cell {
    border-inline-end: 1px solid rgb(244 244 245) !important;
}

.dark .fi-ta-cell {
    border-inline-end-color: rgba(255, 255, 255, 0.05) !important;
}

.fi-ta-cell:last-child {
    border-inline-end: none !important;
}

.fi-ta-header-cell {
    border-inline-end: 1px solid rgb(228 228 231) !important;
}

.dark .fi-ta-header-cell {
    border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-ta-header-cell:last-child {
    border-inline-end: none !important;
}

.fi-ta-search-field .fi-input,
.fi-ta-search-field input {
    border-radius: 0.5rem !important;
    background: #fafafa !important;
    border: 1px solid rgb(228 228 231) !important;
    box-shadow: none !important;
    height: 2.1rem !important;
    min-height: 2.1rem !important;
}

.dark .fi-ta-search-field .fi-input,
.dark .fi-ta-search-field input {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== PENUTUP FINAL #7 ===== */

/* Tombol hamburger   kotak kecil netral, ikon garis tiga */
.tya-hamburger-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    border-radius: 0.5rem !important;
    border: 1px solid rgb(228 228 231) !important;
    background: #ffffff !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-inline-end: 0.5rem !important;
}

.tya-hamburger-btn:hover {
    background: #fafafa !important;
}

.dark .tya-hamburger-btn {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.tya-hamburger-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
    color: #52525b !important;
}

.dark .tya-hamburger-icon {
    color: #d4d4d8 !important;
}

/* Mode icon-rail bawaan Filament   sidebar dapat class "fi-sidebar-open"
 * saat terbuka penuh; TIDAK ada class itu = collapsed (mode ikon saja).
 * Karena sidebar kita position:fixed custom, geser topbar & konten pakai
 * :has() untuk baca status itu dari body (sidebar & topbar/konten adalah
 * sepupu di DOM, bukan induk-anak). */
@media (min-width: 1024px) {
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar {
        width: var(--collapsed-sidebar-width) !important;
    }

    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-topbar-ctn,
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-main-ctn {
        margin-inline-start: var(--collapsed-sidebar-width) !important;
        width: calc(100% - var(--collapsed-sidebar-width)) !important;
    }

    .fi-sidebar,
    .fi-topbar-ctn,
    .fi-main-ctn {
        transition: width 0.2s ease, margin-inline-start 0.2s ease !important;
    }
}

/* Waktu Server   2 baris (label di atas, tanggal-jam di bawah) */
.tya-waktu-server {
    align-items: center !important;
}

.tya-waktu-server-lines {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
    gap: 0.1rem !important;
}

.tya-waktu-server-label {
    font-size: 0.6875rem !important;
}

.tya-waktu-server-value {
    font-size: 0.75rem !important;
}

/* Kartu Dashboard   KEMBALI ke desain semula: putih polos, TANPA gradasi,
 * TANPA garis abu yang mengelilingi kartu (border dihapus). */
/* (blok lama 'kartu tanpa border' dihapus   digantikan aturan
   outline per-kartu di PENUTUP FINAL #11) */

/* Icon Edit/Delete di kolom Aksi   background oranye, ikon putih */
.fi-ta-actions .fi-icon-btn,
td .fi-icon-btn {
    background-color: var(--toya-orange) !important;
    border-radius: 0.4rem !important;
    border: none !important;
}

.fi-ta-actions .fi-icon-btn svg,
td .fi-icon-btn svg {
    color: #ffffff !important;
}

.fi-ta-actions .fi-icon-btn:hover,
td .fi-icon-btn:hover {
    background-color: var(--toya-orange-dark) !important;
}

/* ===== Logo ikon-saja saat sidebar collapsed   terpusat horizontal =====
 * PENTING: display TANPA !important   supaya x-show Alpine ("! isOpen")
 * tetap bisa menyembunyikan elemen ini saat sidebar TERBUKA. Kalau pakai
 * !important, dia menimpa x-show dan logo jadi dobel (kejadian kemarin,
 * pola bug yang sama persis dengan .fi-sidebar-group-btn). */
.tya-sidebar-icon-only {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-block: 0.25rem !important;
}

/* ===== Sembunyikan tombol collapse bawaan Filament ("<") di topbar =====
 * Kita sudah punya hamburger sendiri (.tya-hamburger-btn) yang melakukan
 * hal sama   biar tidak dobel, tombol bawaan Filament ini disembunyikan.
 */
.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn,
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none !important;
}

/* ===== MODE IKON (sidebar collapsed)   ikon rata tengah & flyout jalan =====
 * Semua aturan di bawah HANYA berlaku saat sidebar TIDAK punya class
 * "fi-sidebar-open" (= sedang collapsed jadi rail ikon).
 */
@media (min-width: 1024px) {
    /* Kontainer nav: padding kiri-kanan dikecilkan supaya ikon benar-benar
     * bisa duduk di tengah rail sempit. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-nav-groups {
        padding-inline: 0.35rem !important;
    }

    /* Tombol item & tombol dropdown grup: isi dibuat rata tengah, padding
     * kiri (yang tadinya untuk teks + bullet) dinolkan. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item-btn,
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-group-dropdown-trigger-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-inline: 0 !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Bullet oranye sub-menu & teks label: tidak relevan di mode ikon. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item-btn::before {
        display: none !important;
    }

    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item-label,
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-group-label {
        display: none !important;
    }

    /* Ukuran ikon diseragamkan supaya kolomnya lurus rapi. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item-btn svg,
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-group-dropdown-trigger-btn svg {
        width: 1.35rem !important;
        height: 1.35rem !important;
        flex-shrink: 0 !important;
    }

    /* Tombol/pill kosong tanpa ikon (sisa item yang ikonnya sengaja
     * dikosongkan)   sembunyikan supaya tidak jadi "blob" abu-abu. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item-btn:not(:has(svg)) {
        display: none !important;
    }

    /* Jarak antar ikon dirapikan sedikit. */
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-group,
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-item {
        margin-block: 0.1rem !important;
    }

    /* Flyout sub-menu saat hover: pastikan tampil di atas elemen lain dan
     * tidak ikut terpotong. */
    .fi-sidebar .fi-dropdown-panel,
    .fi-sidebar-group-dropdown-trigger-btn + .fi-dropdown-panel {
        z-index: 50 !important;
    }
}

/* Saat mode ikon, .fi-sidebar-nav TIDAK boleh scroll   overflow-y:auto di
 * situ ikut memotong flyout ke arah kanan (masalah yang sama seperti di
 * .fi-sidebar). Daftar menu mode ikon pendek, jadi aman tanpa scroll. */
@media (min-width: 1024px) {
    body:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-sidebar-nav {
        overflow: visible !important;
    }
}

/* ===== PENUTUP FINAL #8 =====
 * Pastikan TIDAK ada garis apa pun di bawah logo sidebar (beberapa blok
 * sebelumnya sempat menambahkannya, dan hasilnya tampil terpotong).
 */
.fi-sidebar-header,
.fi-sidebar-header-ctn {
    border-block-end: none !important;
    box-shadow: none !important;
}

/* ===== PENUTUP FINAL #9 (revisi): posisi flyout sub-menu di mode ikon =====
 * Masalah: panel sub-menu muncul MENIMPA ikon-ikon di bawahnya.
 *
 * Versi sebelumnya gagal karena dua hal:
 *  1) memakai body:has(...)   kalau browser/selector-nya tidak cocok,
 *     SELURUH blok gagal diterapkan;
 *  2) memakai properti logis (inset-inline-start) sementara penempatan
 *     otomatis menulis properti FISIK (left/top) lewat inline style.
 *
 * Revisi ini: tanpa :has() sama sekali, dan pakai properti FISIK + !important
 * supaya pasti mengalahkan inline style. Aman dipakai tanpa penjaga "mode
 * ikon", karena dropdown ini memang HANYA dirender saat sidebar collapsed
 * (x-show="! $store.sidebar.isOpen" di markup bawaan Filament).
 */
.fi-sidebar .fi-dropdown {
    position: relative !important;
}

.fi-sidebar .fi-dropdown-panel {
    position: absolute !important;
    left: calc(100% + 0.5rem) !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    min-width: 12rem !important;
    z-index: 60 !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    border-radius: 0.6rem !important;
}

/* Isi panel: teks normal (rata kiri), tidak ikut aturan "rata tengah"
 * milik rail ikon, dan label wajib tampil. */
.fi-dropdown-panel .fi-sidebar-item-btn {
    justify-content: flex-start !important;
    padding-inline: 0.75rem !important;
    gap: 0.5rem !important;
    width: auto !important;
}

.fi-dropdown-panel .fi-sidebar-item-label {
    display: inline !important;
}

.fi-dropdown-panel .fi-sidebar-item-btn::before {
    display: none !important;
}

/* ===== PENUTUP FINAL #10 =====
 * 1) Di layar kecil (HP/tablet), Filament SUDAH punya tombol hamburger
 *    bawaan untuk membuka sidebar drawer. Hamburger custom kita jadi
 *    kembar di situ   sembunyikan, cukup tampil di desktop saja.
 * 2) Tombol ganti tema Terang/Gelap dihapus dari topbar (lihat juga
 *    ->darkMode(false) di AdminPanelProvider)   kalau ada sisa render,
 *    pastikan tetap tidak tampil.
 */
@media (max-width: 1023px) {
    .tya-hamburger-btn {
        display: none !important;
    }
}

.fi-theme-switcher {
    display: none !important;
}

/* ===== PENUTUP FINAL #11: kartu Dashboard ala referensi =====
 * Struktur bawaan Filament sudah pas (ikon+label sebaris, nilai besar,
 * deskripsi kecil, sparkline di bawah)   tinggal ikon dibungkus kotak
 * membulat ber-tint sesuai warna kartunya.
 */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.9rem !important;
    padding: 1.1rem 1.25rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.fi-wi-stats-overview-stat-label-ctn {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    margin-block-end: 0.5rem !important;
}

/* Kotak ikon: ukuran tetap, sudut membulat, warna latar mengikuti warna
 * kartu (dipetakan per kartu di bawah). */
.fi-wi-stats-overview-stat-label-ctn svg {
    width: 2.4rem !important;
    height: 2.4rem !important;
    padding: 0.55rem !important;
    border-radius: 0.65rem !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #71717a !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #18181b !important;
    line-height: 1.2 !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.75rem !important;
    color: #a1a1aa !important;
    margin-block-start: 0.25rem !important;
}

/* Warna tint kotak ikon per kartu (urutan sesuai DashboardStatsWidget:
 * 1 Pendapatan=oranye, 2 Invoice=biru, 3 Pelanggan=hijau, 4 Online=ungu). */
/* Warna tint kotak ikon   DIPILIH BERDASARKAN kelas warna yang sudah
 * dipasang Filament sendiri di elemen grafik kartu (fi-color-primary,
 * fi-color-info, dst) sesuai ->color() di DashboardStatsWidget.
 * Cara ini tidak bergantung urutan kartu: memakai :nth-of-type() TIDAK
 * bisa, karena tiap kartu dibungkus elemennya masing-masing sehingga
 * semuanya terhitung sebagai "anak pertama". */
.fi-wi-stats-overview-stat:has(.fi-color-primary) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #ffedd5 !important;
    color: #ea580c !important;
}

.fi-wi-stats-overview-stat:has(.fi-color-info) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #dbeafe !important;
    color: #2563eb !important;
}

.fi-wi-stats-overview-stat:has(.fi-color-success) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #dcfce7 !important;
    color: #16a34a !important;
}

.fi-wi-stats-overview-stat:has(.fi-color-ungu) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #f3e8ff !important;
    color: #9333ea !important;
}

/* Sparkline di bawah kartu   tinggi ringkas, menempel ke dasar kartu. */
.fi-wi-stats-overview-stat-chart {
    margin-block-start: 0.75rem !important;
    height: 2.75rem !important;
}

/* ===== PENUTUP FINAL #12: outline per-kartu & sparkline tidak menimpa teks =====
 * 1) Wadah luar widget (yang membuat SATU kotak besar mengelilingi keempat
 *    kartu) dihilangkan garis & bayangannya.
 * 2) Tiap kartu diberi outline tipis sendiri.
 * 3) Grafik sparkline posisinya ABSOLUTE menempel di dasar kartu (bawaan
 *    Filament). Konten kartu diberi ruang bawah supaya teks deskripsi
 *    tidak tertimpa garis grafik.
 */
.fi-wi-stats-overview,
.fi-wi-stats-overview > .fi-section,
.fi-wi-stats-overview .fi-section-content-ctn {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.9rem !important;
    box-shadow: none !important;
    /* Ruang bawah untuk sparkline (tinggi 2.75rem) + sedikit jarak aman. */
    padding: 1.1rem 1.25rem 3.5rem 1.25rem !important;
    overflow: hidden !important;
}

.dark .fi-wi-stats-overview-stat {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-wi-stats-overview-stat-chart {
    height: 2.75rem !important;
    margin: 0 !important;
}

/* ===== PENUTUP FINAL #13: kartu Dashboard benar-benar terpisah =====
 * Kotak besar yang mengelilingi keempat kartu berasal dari wadah
 * section/schema bawaan widget. Versi sebelumnya hanya menyasar anak
 * LANGSUNG (>) sehingga meleset   sekarang pakai selektor keturunan dan
 * mencakup semua varian wadahnya. Catatan: Filament menggambar garis
 * kartunya lewat "ring" yang ikut di box-shadow, jadi box-shadow:none
 * sekaligus menghapus garis itu.
 */
.fi-wi-stats-overview,
.fi-wi-stats-overview .fi-section,
.fi-wi-stats-overview .fi-section-content-ctn,
.fi-wi-stats-overview .fi-section-content,
.fi-wi-stats-overview .fi-sc,
.fi-wi-stats-overview .fi-sc-component {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Jarak antar kartu supaya jelas terpisah satu sama lain. */
.fi-wi-stats-overview .fi-grid,
.fi-wi-stats-overview-stats {
    gap: 1rem !important;
}

/* Kartu: latar putih polos (TANPA gradasi), outline tipis, sudut membulat. */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.9rem !important;
    box-shadow: none !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

.dark .fi-wi-stats-overview-stat {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== PENUTUP FINAL #14: kartu Dashboard lebih ringkas =====
 * Desktop: tinggi kartu dipangkas (padding & sparkline dikecilkan).
 * Mobile/tablet: kartu dibuat PERSEGI (rasio 1:1).
 */
.fi-wi-stats-overview-stat {
    /* Bawah tetap diberi ruang untuk sparkline (kini 2rem) + jarak aman. */
    padding: 0.85rem 1rem 2.5rem 1rem !important;
}

.fi-wi-stats-overview-stat-chart {
    height: 2rem !important;
}

.fi-wi-stats-overview-stat-label-ctn {
    gap: 0.55rem !important;
    margin-block-end: 0.35rem !important;
}

.fi-wi-stats-overview-stat-label-ctn svg {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.45rem !important;
    border-radius: 0.55rem !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.7rem !important;
    margin-block-start: 0.15rem !important;
}

.fi-wi-stats-overview-stat-content {
    row-gap: 0.15rem !important;
}

/* HP & tablet: kartu jadi persegi. Konten dirapatkan ke atas supaya tetap
 * terbaca walau tingginya mengikuti lebar. */
@media (max-width: 1023px) {
    .fi-wi-stats-overview-stat {
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
}

/* ===== PENUTUP FINAL #15: tombol aksi di kolom "Aksi" tabel =====
 * Diperjelas: ikon kecil, kotak seragam, jarak antar tombol lebih lega,
 * dan warnanya divariasikan sesuai JENIS aksi (bukan semua oranye):
 *   - Edit                 -> oranye  (aksi utama/ubah data)
 *   - Hapus                -> merah   (aksi merusak, tetap merah agar jelas)
 *   - Aksi lain (kick,
 *     suspend, panduan,
 *     sinkron, topup, dll) -> ungu / hijau bergantian sesuai warna Filament
 * Aturan lama yang mengecat SEMUA ikon aksi jadi oranye ditimpa di sini.
 */
.fi-ta-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
}

.fi-ta-actions .fi-icon-btn,
td .fi-icon-btn {
    width: 1.9rem !important;
    height: 1.9rem !important;
    border-radius: 0.45rem !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.fi-ta-actions .fi-icon-btn svg,
td .fi-icon-btn svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
    color: #ffffff !important;
}

/* Warna per jenis aksi   memakai kelas warna bawaan Filament yang sudah
 * menempel di tiap tombol sesuai ->color() di kode resource. */
.fi-ta-actions .fi-icon-btn.fi-color-primary,
td .fi-icon-btn.fi-color-primary {
    background-color: #f97316 !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger,
td .fi-icon-btn.fi-color-danger {
    background-color: #dc2626 !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-success,
td .fi-icon-btn.fi-color-success {
    background-color: #16a34a !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-warning,
td .fi-icon-btn.fi-color-warning {
    background-color: #9333ea !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-info,
td .fi-icon-btn.fi-color-info {
    background-color: #2563eb !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-gray,
td .fi-icon-btn.fi-color-gray {
    background-color: #71717a !important;
}

.fi-ta-actions .fi-icon-btn:hover,
td .fi-icon-btn:hover {
    filter: brightness(0.92) !important;
}

/* ===== PENUTUP FINAL #16: LOGIN PAGE minimalis & profesional =====
 * Mengganti gaya lama (latar gelap fiber-optic) menjadi tampilan terang
 * bersih seperti referensi: latar abu sangat muda, logo + sapaan di ATAS
 * kartu, kartu putih dengan outline tipis, tombol Sign In lebar penuh.
 */
.fi-simple-layout {
    background-color: #f7f8fa !important;
    background-image: none !important;
}

.fi-simple-main {
    background: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.9rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: none !important;
    padding: 1.75rem !important;
    max-width: 26rem !important;
}

.fi-simple-main-ctn {
    padding-block: 2.5rem !important;
}

/* Logo & judul halaman login diletakkan di luar/atas kartu, rata tengah. */
.fi-simple-header {
    text-align: center !important;
    margin-block-end: 1.25rem !important;
}

.fi-simple-header .fi-logo,
.fi-simple-layout .fi-logo {
    justify-content: center !important;
    margin-inline: auto !important;
    margin-block-end: 1rem !important;
}

.fi-simple-header-heading {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #18181b !important;
}

.fi-simple-header-subheading {
    font-size: 0.875rem !important;
    color: #a1a1aa !important;
    margin-block-start: 0.35rem !important;
}

/* Field & tombol di dalam kartu login. */
.fi-simple-main .fi-fo-field-wrp-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #3f3f46 !important;
}

.fi-simple-main .fi-input {
    background: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.5rem !important;
    height: 2.6rem !important;
    min-height: 2.6rem !important;
}

.fi-simple-main .fi-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 2.75rem !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
}

/* Footer copyright di bawah kartu login. */
.fi-simple-layout .tya-footer {
    margin-inline-start: 0 !important;
    border: none !important;
    justify-content: center !important;
    gap: 0.35rem !important;
}

/* ===== PENUTUP FINAL #17: kartu "Butuh Bantuan?" di bawah sidebar ===== */
.tya-help-card {
    margin: 1.25rem 0.75rem 1rem 0.75rem;
    padding: 0.9rem;
    border-radius: 0.75rem;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.dark .tya-help-card {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.25);
}

.tya-help-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-end: 0.75rem;
}

.tya-help-icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    color: #ea580c !important;
    flex-shrink: 0;
}

.tya-help-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #ea580c;
    line-height: 1.2;
}

.tya-help-sub {
    font-size: 0.6875rem;
    color: #a1a1aa;
    line-height: 1.3;
    margin-block-start: 0.1rem;
}

.tya-help-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid #f97316;
    background: #ffffff;
    color: #ea580c !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.tya-help-btn:hover {
    background: #f97316;
    color: #ffffff !important;
}

.tya-help-btn-icon {
    width: 0.85rem !important;
    height: 0.85rem !important;
}

/* ===== PENUTUP FINAL #18 =====
 * 1) Kartu "Butuh Bantuan?" DIKUNCI di dasar sidebar   tidak ikut naik-turun
 *    saat grup menu di atasnya dibuka/ditutup.
 * 2) Kotak ringkasan Pendapatan/Pengeluaran di bawah grafik.
 * 3) Footer 4 bagian (status sistem, database, versi, copyright).
 */

/* --- 1) Help card menempel di bawah --- */
.fi-sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

.tya-help-card {
    margin-block-start: auto !important;
    flex-shrink: 0 !important;
}

/* --- 2) Kotak ringkasan --- */
.tya-revsum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.tya-revsum-box {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background: #ffffff;
}

.dark .tya-revsum-box {
    background: #27272a;
    border-color: rgba(255, 255, 255, 0.08);
}

.tya-revsum-in {
    background: #fff7ed;
    border-color: #fed7aa;
}

.dark .tya-revsum-in {
    background: rgba(249, 115, 22, 0.08);
}

.tya-revsum-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tya-revsum-icon svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.tya-revsum-icon-in {
    background: #ffedd5;
    color: #ea580c;
}

.tya-revsum-icon-out {
    background: #f4f4f5;
    color: #52525b;
}

.tya-revsum-label {
    font-size: 0.7rem;
    color: #a1a1aa;
    line-height: 1.2;
}

.tya-revsum-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-block-start: 0.15rem;
    flex-wrap: wrap;
}

.tya-revsum-value {
    font-size: 1rem;
    font-weight: 800;
    color: #18181b;
}

.dark .tya-revsum-value {
    color: #fafafa;
}

.tya-revsum-delta {
    font-size: 0.7rem;
    font-weight: 700;
}

.tya-revsum-delta.is-up { color: #16a34a; }
.tya-revsum-delta.is-down { color: #dc2626; }
.tya-revsum-delta.is-none { color: #a1a1aa; }

/* --- 3) Footer 4 bagian --- */
.tya-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
    margin: 1.25rem 0 0 0 !important;
    padding: 0.9rem 1.25rem !important;
    background: #ffffff !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.75rem !important;
    font-size: 0.75rem !important;
}

.dark .tya-footer {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.tya-footer-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tya-footer-copy {
    margin-inline-start: auto;
}

.tya-footer-ico {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tya-footer-ico svg {
    width: 1rem !important;
    height: 1rem !important;
}

.tya-footer-ico-ok {
    background: #ffedd5;
    color: #ea580c;
}

.tya-footer-ico-heart {
    background: #fff1f2;
    color: #e11d48;
}

.tya-footer-title {
    font-weight: 700;
    color: #27272a;
    line-height: 1.25;
}

.dark .tya-footer-title {
    color: #e4e4e7;
}

.tya-footer-sub {
    color: #a1a1aa;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .tya-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .tya-footer-copy {
        margin-inline-start: 0;
    }

    .tya-revsum {
        grid-template-columns: 1fr;
    }
}

/* ===== PENUTUP FINAL #19 (koreksi tampilan) =====
 * 1) Kartu "Butuh Bantuan?": putih polos (gradasi/latar oranye dibuang) dan
 *    diberi jarak dari dasar sidebar (tidak mentok ke bawah).
 * 2) Kotak ringkasan kini BERADA DI DALAM kartu grafik -> dibuat kecil,
 *    ringkas, dua kolom sempit di bawah grafik.
 * 3) Footer: polos tanpa kotak/border, dan tidak berantakan di mode HP.
 */

/* --- 1) Help card --- */
.tya-help-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid rgb(228 228 231) !important;
    margin: 1.25rem 0.75rem 1.5rem 0.75rem !important;
}

.dark .tya-help-card {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- 2) Kotak ringkasan di dalam kartu grafik --- */
.tya-revsum {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
    margin-block-start: 0.9rem !important;
}

.tya-revsum-box {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.55rem 0.7rem !important;
    border: 1px solid rgb(228 228 231) !important;
    border-radius: 0.6rem !important;
    background: #ffffff !important;
}

.tya-revsum-icon {
    width: 1.7rem !important;
    height: 1.7rem !important;
    border-radius: 0.45rem !important;
}

.tya-revsum-icon svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

.tya-revsum-label {
    font-size: 0.65rem !important;
}

.tya-revsum-value {
    font-size: 0.85rem !important;
}

.tya-revsum-delta {
    font-size: 0.65rem !important;
}

/* --- 3) Footer polos tanpa kotak --- */
.tya-footer {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 1rem 0.25rem !important;
    margin-block-start: 1.5rem !important;
    box-shadow: none !important;
}

.dark .tya-footer {
    background: transparent !important;
    border: none !important;
}

@media (max-width: 767px) {
    .tya-footer {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.9rem 1rem !important;
        align-items: start !important;
    }

    .tya-footer-copy {
        grid-column: 1 / -1 !important;
        margin-inline-start: 0 !important;
        justify-content: flex-start !important;
    }

    .tya-footer-copy > div {
        text-align: left !important;
    }
}

/* ===== PENUTUP FINAL #20: donat Performa Pendapatan Outlet ===== */
.tya-donut-wrap {
    position: relative;
}

.tya-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.tya-donut-center-label {
    font-size: 0.75rem;
    color: #a1a1aa;
    line-height: 1.2;
}

.tya-donut-center-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #18181b;
    line-height: 1.25;
    margin-block-start: 0.15rem;
}

.dark .tya-donut-center-value {
    color: #fafafa;
}

.tya-donut-legend {
    margin-block-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tya-donut-legend-row {
    display: grid;
    grid-template-columns: 0.6rem 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.25rem;
    border-block-end: 1px solid rgb(244 244 245);
    font-size: 0.75rem;
}

.dark .tya-donut-legend-row {
    border-block-end-color: rgba(255, 255, 255, 0.05);
}

.tya-donut-legend-row:last-child {
    border-block-end: none;
}

.tya-donut-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.2rem;
    display: inline-block;
}

.tya-donut-name {
    font-weight: 600;
    color: #27272a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .tya-donut-name {
    color: #e4e4e7;
}

.tya-donut-pct {
    color: #52525b;
    font-variant-numeric: tabular-nums;
    background: #f4f4f5;
    padding: 0.1rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
}

.dark .tya-donut-pct {
    background: rgba(255, 255, 255, 0.06);
    color: #d4d4d8;
}

.tya-donut-amount {
    color: #a1a1aa;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tya-donut-empty {
    font-size: 0.75rem;
    color: #a1a1aa;
    text-align: center;
    padding-block: 0.75rem;
}

/* ===== PENUTUP FINAL #21: tinggi 3 widget dashboard disamakan =====
 * Ringkasan Pendapatan / Performa Outlet / Aktivitas Login berada dalam
 * satu baris grid   dibuat sama tinggi supaya rapi, dan isinya menyesuaikan
 * (bagian yang panjang bisa di-scroll sendiri).
 */
.fi-wi-chart,
.fi-wi-chart > .fi-section,
.fi-wi-chart > .fi-section > .fi-section-content-ctn,
.fi-wi > .fi-section {
    height: 100% !important;
}

.fi-wi-chart > .fi-section,
.fi-wi > .fi-section {
    display: flex !important;
    flex-direction: column !important;
}

.fi-wi-chart > .fi-section > .fi-section-content-ctn,
.fi-wi > .fi-section > .fi-section-content-ctn {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Daftar outlet & aktivitas login: batasi tinggi, sisanya bisa discroll  
 * supaya kartu tidak memanjang melebihi kartu tetangganya. */
.tya-donut-legend {
    max-height: 11rem !important;
    overflow-y: auto !important;
}

/* ===== PENUTUP FINAL #22: footer rata tengah, pemisah garis tipis ===== */
.tya-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.85rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 1.1rem 1rem !important;
    margin-block-start: 1.5rem !important;
    font-size: 0.75rem !important;
    text-align: center !important;
}

.tya-footer-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
}

/* Garis pemisah vertikal tipis antar bagian. */
.tya-footer-sep {
    width: 1px !important;
    height: 0.9rem !important;
    background: rgb(228 228 231) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.dark .tya-footer-sep {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Ikon jadi kecil & sebaris (bukan kotak besar seperti versi sebelumnya). */
.tya-footer-ico {
    width: 0.95rem !important;
    height: 0.95rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

.tya-footer-ico-ok {
    color: #ea580c !important;
}

.tya-footer-ico-heart {
    color: #e11d48 !important;
}

.tya-footer-title {
    font-weight: 600 !important;
    color: #52525b !important;
}

.dark .tya-footer-title {
    color: #d4d4d8 !important;
}

.tya-footer-sub {
    color: #a1a1aa !important;
}

/* Layar sempit: pemisah disembunyikan, bagian ditumpuk rapi di tengah. */
@media (max-width: 767px) {
    .tya-footer {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .tya-footer-sep {
        display: none !important;
    }
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM   Design System Capstone
 * ============================================================
 * Ditaruh SENGAJA di baris paling akhir file supaya jadi acuan
 * FINAL yang menang lawan aturan-aturan sebelumnya di file ini
 * (yang terkumpul dari banyak iterasi terpisah selama sesi ini).
 * Tujuannya: satu standar konsisten untuk Button, Input/Select,
 * Badge, Table, Modal, Dropdown, Sidebar active-state, Notification
 *   berlaku ke SELURUH halaman karena ini CSS global, bukan per-
 * resource. TIDAK ADA perubahan logic/backend di sini   murni
 * presentation layer, pakai token warna & radius yang sudah
 * didefinisikan di :root paling atas file ini.
 * ============================================================ */

/* ---- 1. BUTTON SYSTEM ---- */
.fi-btn {
    border-radius: 0.55rem !important;
    font-weight: 600 !important;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease !important;
}

.fi-btn.fi-color-primary {
    background-color: var(--toya-orange) !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:hover {
    background-color: var(--toya-orange-dark) !important;
}

.fi-btn.fi-color-gray,
.fi-btn:not([class*="fi-color-"]) {
    background-color: var(--toya-card) !important;
    border: 1px solid var(--toya-border) !important;
    color: var(--toya-text-secondary) !important;
}

.fi-btn.fi-color-success { background-color: var(--toya-success) !important; }
.fi-btn.fi-color-danger { background-color: var(--toya-danger) !important; }
.fi-btn.fi-color-info { background-color: var(--toya-info) !important; }
.fi-btn.fi-color-warning { background-color: var(--toya-warning) !important; }

.fi-icon-btn {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 0.5rem !important;
    transition: background-color 150ms ease !important;
}

/* ---- 2. INPUT / SELECT SYSTEM ---- */
.fi-input,
.fi-select-input {
    height: 2.5rem !important;
    min-height: 2.5rem !important;
    border-radius: 0.55rem !important;
    border-color: var(--toya-border) !important;
    font-size: 0.8125rem !important;
}

/* (dihapus � sama seperti catatan di atas) */

.fi-fo-field-wrp-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--toya-text-primary) !important;
}

/* ---- 3. BADGE / STATUS SYSTEM ---- */
.fi-badge {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    padding-inline: 0.55rem !important;
}

.fi-badge.fi-color-success { background: var(--toya-success-soft) !important; color: var(--toya-success) !important; }
.fi-badge.fi-color-warning { background: var(--toya-warning-soft) !important; color: var(--toya-warning) !important; }
.fi-badge.fi-color-danger { background: var(--toya-danger-soft) !important; color: var(--toya-danger) !important; }
.fi-badge.fi-color-info { background: var(--toya-info-soft) !important; color: var(--toya-info) !important; }
.fi-badge.fi-color-gray { background: #f4f4f5 !important; color: var(--toya-text-muted) !important; }

/* ---- 4. TABLE SYSTEM ---- */
.fi-ta-ctn {
    background: var(--toya-card) !important;
    border: 1px solid var(--toya-border) !important;
    border-radius: var(--toya-radius) !important;
}

.fi-ta-header-cell {
    background: var(--toya-bg) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: var(--toya-text-secondary) !important;
}

.fi-ta-cell {
    font-size: 0.8125rem !important;
    color: var(--toya-text-primary) !important;
}

.fi-ta-row:hover {
    background-color: rgba(249, 115, 22, 0.035) !important;
}

/* ---- 5. MODAL SYSTEM ---- */
.fi-modal-window {
    border-radius: 1rem !important;
    max-height: 90vh !important;
}

.fi-modal-close-overlay {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

/* ---- 6. DROPDOWN SYSTEM ---- */
.fi-dropdown-panel {
    background: var(--toya-card) !important;
    border: 1px solid var(--toya-border) !important;
    border-radius: 0.65rem !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.fi-dropdown-list-item:hover {
    background-color: var(--toya-orange-soft) !important;
}

/* ---- 7. SIDEBAR ACTIVE STATE ---- */
.fi-sidebar-item-active .fi-sidebar-item-btn {
    background: var(--toya-orange-soft) !important;
    color: var(--toya-orange-dark) !important;
}

/* ---- 8. NOTIFICATION SYSTEM ---- */
.fi-no-notification.fi-color-success { border-inline-start: 3px solid var(--toya-success) !important; }
.fi-no-notification.fi-color-warning { border-inline-start: 3px solid var(--toya-warning) !important; }
.fi-no-notification.fi-color-danger { border-inline-start: 3px solid var(--toya-danger) !important; }
.fi-no-notification.fi-color-info { border-inline-start: 3px solid var(--toya-info) !important; }

/* ---- 9. PAGINATION ---- */
.fi-pagination-item[aria-current="page"] {
    background: var(--toya-orange) !important;
    color: #ffffff !important;
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM   Lanjutan #2: Empty State & Dark Mode
 * ============================================================ */

/* ---- 10. EMPTY STATE ---- */
.fi-empty-state {
    padding-block: 3rem !important;
}

.fi-empty-state-icon-bg {
    background: var(--toya-orange-soft) !important;
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
}

.fi-empty-state-icon-bg svg {
    color: var(--toya-orange) !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
}

.fi-empty-state-heading {
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--toya-text-primary) !important;
    margin-block-start: 1rem !important;
}

.fi-empty-state-description {
    font-size: 0.8125rem !important;
    color: var(--toya-text-muted) !important;
    margin-block-start: 0.25rem !important;
}

.fi-empty-state-footer {
    margin-block-start: 1.25rem !important;
}

/* ---- 11. DARK MODE   pasangan token baru dari lapisan sebelumnya ---- */
.dark {
    --toya-text-primary: #fafafa;
    --toya-text-secondary: #d4d4d8;
    --toya-text-muted: #a1a1aa;
    --toya-border: rgba(255, 255, 255, 0.08);
    --toya-bg: #18181b;
    --toya-card: #27272a;

    --toya-success-soft: rgba(22, 163, 74, 0.12);
    --toya-warning-soft: rgba(217, 119, 6, 0.12);
    --toya-danger-soft: rgba(220, 38, 38, 0.12);
    --toya-info-soft: rgba(37, 99, 235, 0.12);
}

.dark .fi-empty-state-icon-bg {
    background: rgba(249, 115, 22, 0.12) !important;
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM   Lanjutan #3: Toggle, Radio, Pagination
 * ============================================================ */

/* ---- 12. TOGGLE (SWITCH) ---- */
.fi-toggle {
    border-radius: 9999px !important;
    transition: background-color 150ms ease !important;
}

.fi-toggle-off {
    background-color: #e4e4e7 !important;
}

.dark .fi-toggle-off {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- 13. RADIO ---- */
.fi-fo-radio-label {
    font-size: 0.8125rem !important;
    color: var(--toya-text-primary) !important;
}

.fi-fo-radio-label-description {
    font-size: 0.75rem !important;
    color: var(--toya-text-muted) !important;
}

.fi-fo-radio input[type="radio"] {
    accent-color: var(--toya-orange) !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
}

/* ---- 14. PAGINATION (penutup) ---- */
.fi-pagination-overview {
    font-size: 0.75rem !important;
    color: var(--toya-text-muted) !important;
}

.fi-pagination-items-per-page-select .fi-select-input {
    height: 2.1rem !important;
    min-height: 2.1rem !important;
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM   Lanjutan #4: Tabel User Hotspot (spec detail)
 * ============================================================ */

/* Search box: lebar terbatas 280-320px sesuai spesifikasi (bukan
 * melebar penuh), supaya proporsional dengan toolbar lainnya. */
.fi-ta-search-field {
    max-width: 300px !important;
    width: 100% !important;
}

.fi-ta-search-field .fi-input,
.fi-ta-search-field input {
    height: 2.4rem !important;
    min-height: 2.4rem !important;
}

/* Bar aksi massal (muncul saat baris dicentang)   dibuat elegan,
 * menempel rapi di atas tabel, bukan kotak mencolok. */
.fi-ta-selection-indicator {
    background: var(--toya-orange-soft) !important;
    border: 1px solid #fed7aa !important;
    border-radius: 0.6rem !important;
    padding-block: 0.5rem !important;
}

/* Kolom Username/Outlet/Created By dengan ikon prefix kecil   rapikan
 * jarak ikon-ke-teks & warnanya redup (bukan oranye mencolok). */
.fi-ta-text-item-icon {
    width: 0.9rem !important;
    height: 0.9rem !important;
    color: var(--toya-text-muted) !important;
}

/* Password kolom: font monospace lebih jelas terbaca sebagai kode. */
.fi-ta-text-item[style*="font-family"] {
    letter-spacing: 0.02em !important;
}

/* Kolom Created At 2-baris: tanggal tegas, jam redup (memakai
 * ->description() bawaan Filament, class-nya fi-ta-text-item-description). */
.fi-ta-text-item-description {
    font-size: 0.6875rem !important;
    color: var(--toya-text-muted) !important;
    margin-block-start: 0.1rem !important;
}

/* ============================================================
 * TOYA RADIUS   PREMIUM UI OVERRIDES
 * Referensi: modal Create User Hotspot + tabel modern.
 * PENTING: CSS ONLY. Tidak mengubah data, PHP, Livewire,
 * Filament Resource, query, action, form schema, atau database.
 * Diletakkan paling akhir agar override ini menang.
 * ============================================================ */

/* ---------- GLOBAL VISUAL TOKENS ---------- */
:root {
    --tya-orange: #f97316;
    --tya-orange-dark: #ea580c;
    --tya-ink: #18181b;
    --tya-muted: #71717a;
    --tya-line: #e4e4e7;
    --tya-soft: #fafafa;
    --tya-card: #ffffff;
}

/* ---------- TABLE CONTAINER ---------- */
.fi-ta-ctn {
    border: 1px solid #e4e4e7 !important;
    border-radius: 1rem !important;
    background: #fff !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,.025),
        0 8px 28px rgba(24,24,27,.045) !important;
    overflow: hidden !important;
}

/* Toolbar: clean, spacious, single visual band */
.fi-ta-header-ctn {
    padding: .85rem 1rem !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f1 !important;
    gap: .65rem !important;
}

.fi-ta-header,
.fi-ta-header-toolbar {
    gap: .5rem !important;
}

/* Search */
.fi-ta-search-field {
    max-width: 320px !important;
}

.fi-ta-search-field .fi-input,
.fi-ta-search-field input {
    height: 2.45rem !important;
    min-height: 2.45rem !important;
    border-radius: .7rem !important;
    border: 1px solid #e4e4e7 !important;
    background: #fafafa !important;
    box-shadow: none !important;
    padding-inline: .85rem !important;
    transition: all .15s ease !important;
}

.fi-ta-search-field .fi-input:focus,
.fi-ta-search-field input:focus {
    background: #fff !important;
    border-color: #f97316 !important;
    box-shadow: 0 0 0 3px rgba(249,115,22,.10) !important;
}

/* Toolbar buttons */
.fi-ta-header .fi-btn,
.fi-ta-header-toolbar .fi-btn,
.fi-ta-filters-trigger-action {
    min-height: 2.4rem !important;
    border-radius: .7rem !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
}

.fi-ta-header .fi-btn.fi-color-primary {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 2px 7px rgba(249,115,22,.16) !important;
}

.fi-ta-header .fi-btn.fi-color-primary:hover {
    background: #ea580c !important;
    transform: translateY(-1px);
}

/* ---------- TABLE HEADER ---------- */
.fi-ta-header-cell {
    height: 3rem !important;
    padding: .65rem .8rem !important;
    background: #fafafa !important;
    color: #3f3f46 !important;
    border-bottom: 1px solid #e4e4e7 !important;
    border-inline-end: 1px solid #f0f0f1 !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    white-space: nowrap !important;
}

.fi-ta-header-cell:last-child {
    border-inline-end: none !important;
}

/* ---------- TABLE BODY ---------- */
.fi-ta-row {
    background: #fff !important;
    transition: background-color .15s ease, box-shadow .15s ease !important;
}

.fi-ta-row:hover {
    background: #fffaf6 !important;
}

.fi-ta-cell {
    min-height: 3.55rem !important;
    padding: .7rem .8rem !important;
    border-bottom: 1px solid #f0f0f1 !important;
    border-inline-end: 1px solid #f4f4f5 !important;
    vertical-align: middle !important;
    color: #27272a !important;
    font-size: .79rem !important;
}

.fi-ta-row:last-child .fi-ta-cell {
    border-bottom: none !important;
}

.fi-ta-cell:last-child {
    border-inline-end: none !important;
}

/* Username / important text */
.fi-ta-text {
    color: #27272a !important;
    font-size: .79rem !important;
}

.fi-ta-text-item {
    line-height: 1.35 !important;
}

/* ---------- CHECKBOX ---------- */
.fi-checkbox-input {
    width: 1.05rem !important;
    height: 1.05rem !important;
    border-radius: .35rem !important;
    border-color: #d4d4d8 !important;
    accent-color: #f97316 !important;
}

/* ---------- STATUS BADGES ---------- */
.fi-badge {
    border-radius: 999px !important;
    padding: .28rem .62rem !important;
    font-size: .66rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
}

.fi-badge.fi-color-warning {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}

.fi-badge.fi-color-success {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #bbf7d0 !important;
}

/* ---------- ACTION ICONS ---------- */
.fi-ta-actions {
    gap: .4rem !important;
    justify-content: flex-end !important;
}

.fi-ta-actions .fi-icon-btn {
    width: 2.1rem !important;
    height: 2.1rem !important;
    min-width: 2.1rem !important;
    border-radius: .65rem !important;
    border: 1px solid #e4e4e7 !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: all .15s ease !important;
}

.fi-ta-actions .fi-icon-btn:hover {
    transform: translateY(-1px) !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-primary,
.fi-ta-actions .fi-icon-btn.fi-color-info {
    color: #ea580c !important;
    border-color: #fed7aa !important;
    background: #fff7ed !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-primary:hover,
.fi-ta-actions .fi-icon-btn.fi-color-info:hover {
    background: #ffedd5 !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    background: #fffafa !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger:hover {
    background: #fef2f2 !important;
}

/* ---------- PAGINATION ---------- */
.fi-ta-pagination {
    padding: .8rem 1rem !important;
    background: #fff !important;
    border-top: 1px solid #f0f0f1 !important;
}

.fi-pagination-item,
.fi-pagination-item-label {
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    border-radius: .65rem !important;
}

.fi-pagination-item[aria-current="page"] {
    background: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(249,115,22,.18) !important;
}

/* ============================================================
 * PREMIUM MODAL   Create User Hotspot
 * ============================================================ */

/* Backdrop */
.fi-modal-close-overlay {
    background: rgba(15,23,42,.48) !important;
    backdrop-filter: blur(3px) !important;
}

/* Main modal */
.fi-modal-window {
    width: min(700px, calc(100vw - 2rem)) !important;
    max-width: 700px !important;
    max-height: calc(100vh - 2rem) !important;
    border: 1px solid rgba(228,228,231,.95) !important;
    border-radius: 1.15rem !important;
    background: #fff !important;
    box-shadow:
        0 25px 70px rgba(15,23,42,.18),
        0 8px 25px rgba(15,23,42,.08) !important;
    overflow: hidden !important;
}

/* Modal header */
.fi-modal-header {
    min-height: 5.2rem !important;
    padding: 1.15rem 1.35rem !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f1 !important;
    display: flex !important;
    align-items: center !important;
}

/* Heading */
.fi-modal-heading {
    color: #18181b !important;
    font-size: 1rem !important;
    font-weight: 750 !important;
    letter-spacing: -.01em !important;
}

/* Description/subheading */
.fi-modal-header .fi-modal-description {
    color: #71717a !important;
    font-size: .74rem !important;
    margin-top: .2rem !important;
}

/* Close button */
.fi-modal-header .fi-icon-btn,
.fi-modal-header button {
    width: 2.2rem !important;
    height: 2.2rem !important;
    border-radius: .65rem !important;
    color: #52525b !important;
    border: 1px solid #e4e4e7 !important;
    background: #fff !important;
}

.fi-modal-header .fi-icon-btn:hover,
.fi-modal-header button:hover {
    background: #fafafa !important;
    color: #18181b !important;
}

/* Modal body */
.fi-modal-content {
    padding: 1.15rem 1.35rem 1.3rem !important;
    background: #fff !important;
}

/* Form component spacing */
.fi-modal-content .fi-fo-component-ctn {
    gap: .95rem !important;
}

/* Section/card inside form */
.fi-modal-content .fi-section {
    margin: 0 0 .9rem !important;
    padding: 0 !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: .85rem !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.025) !important;
    overflow: hidden !important;
}

/* Section heading */
.fi-modal-content .fi-section-header {
    padding: .9rem 1rem !important;
    background: #fff !important;
    border-bottom: 1px solid #f0f0f1 !important;
}

.fi-modal-content .fi-section-header-heading {
    font-size: .82rem !important;
    font-weight: 750 !important;
    color: #27272a !important;
}

/* Section body */
.fi-modal-content .fi-section-content {
    padding: 1rem !important;
}

/* Labels */
.fi-modal-content .fi-fo-field-wrp-label {
    font-size: .72rem !important;
    font-weight: 650 !important;
    color: #27272a !important;
    margin-bottom: .35rem !important;
}

/* Inputs */
.fi-modal-content .fi-input,
.fi-modal-content .fi-select-input,
.fi-modal-content .choices__inner {
    height: 2.55rem !important;
    min-height: 2.55rem !important;
    border-radius: .65rem !important;
    border: 1px solid #dedee2 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.02) !important;
    font-size: .78rem !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.fi-modal-content .fi-input::placeholder {
    color: #a1a1aa !important;
}

/* (dihapus � sama seperti catatan di atas) */

/* Select */
.fi-modal-content .fi-fo-select .choices__inner {
    display: flex !important;
    align-items: center !important;
    padding: 0 .75rem !important;
}

.fi-modal-content .fi-fo-select .choices__list--single {
    padding: 0 !important;
}

/* Prefix/suffix (Rp etc.) */
.fi-modal-content .fi-input-wrp {
    min-height: 2.55rem !important;
    border-radius: .65rem !important;
}

/* Toggle */
.fi-modal-content .fi-toggle {
    border-radius: 999px !important;
}

/* Footer */
.fi-modal-footer {
    min-height: 4.65rem !important;
    padding: .85rem 1.35rem !important;
    background: #fff !important;
    border-top: 1px solid #f0f0f1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: .55rem !important;
}

.fi-modal-footer .fi-btn {
    min-height: 2.45rem !important;
    border-radius: .7rem !important;
    font-size: .76rem !important;
    padding-inline: .9rem !important;
}

.fi-modal-footer .fi-btn.fi-color-primary {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(249,115,22,.16) !important;
}

.fi-modal-footer .fi-btn.fi-color-gray {
    background: #fff !important;
    border: 1px solid #e4e4e7 !important;
    color: #52525b !important;
}

/* Modal responsive */
@media (max-width: 639px) {
    .fi-modal-window {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        border-radius: .9rem !important;
    }

    .fi-modal-header,
    .fi-modal-content,
    .fi-modal-footer {
        padding-inline: 1rem !important;
    }

    .fi-modal-footer {
        flex-wrap: wrap !important;
    }

    .fi-modal-footer .fi-btn {
        flex: 1 1 auto !important;
    }
}

/* ---------- DARK MODE COMPATIBILITY ---------- */
.dark .fi-ta-ctn,
.dark .fi-ta-row,
.dark .fi-ta-pagination,
.dark .fi-modal-window,
.dark .fi-modal-header,
.dark .fi-modal-content,
.dark .fi-modal-footer,
.dark .fi-modal-content .fi-section {
    background: #18181b !important;
}

.dark .fi-ta-header-cell {
    background: #27272a !important;
    color: #d4d4d8 !important;
    border-color: rgba(255,255,255,.07) !important;
}

.dark .fi-ta-cell {
    color: #e4e4e7 !important;
    border-color: rgba(255,255,255,.06) !important;
}

.dark .fi-ta-row:hover {
    background: rgba(249,115,22,.055) !important;
}

.dark .fi-modal-heading,
.dark .fi-modal-content .fi-section-header-heading,
.dark .fi-modal-content .fi-fo-field-wrp-label {
    color: #fafafa !important;
}

.dark .fi-modal-content .fi-input,
.dark .fi-modal-content .fi-select-input,
.dark .fi-modal-content .choices__inner {
    background: #27272a !important;
    border-color: rgba(255,255,255,.1) !important;
    color: #fafafa !important;
}

.dark .fi-modal-header,
.dark .fi-modal-footer,
.dark .fi-modal-content .fi-section {
    border-color: rgba(255,255,255,.08) !important;
}


/* ============================================================
 * TOYA RADIUS UI SYSTEM � KARTU DASHBOARD (DIBANGUN ULANG DARI NOL)
 * ============================================================
 * Widget lama (StatsOverviewWidget bawaan Filament) sudah diganti total
 * jadi widget polos dengan Blade sendiri (lihat resources/views/filament/
 * widgets/dashboard-stats.blade.php). Struktur HTML di bawah SEPENUHNYA
 * kita tulis sendiri � tidak ada lagi tebak-tebak nested class Filament.
 */


@media (max-width: 1023px) {
}













@media (max-width: 1023px) {
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM � jaring pengaman lebar widget Dashboard
 * ============================================================
 * columnSpan='full' di PHP berkali-kali tidak konsisten kena (kemungkinan
 * soal cache di server yang sulit dipastikan bersih total). Ini dipaksa
 * langsung lewat CSS sebagai jaminan, TIDAK bergantung pada Filament
 * berhasil membaca properti PHP itu sama sekali.
 */

/* ============================================================
 * TOYA RADIUS UI SYSTEM � Kartu Dashboard (styling CSS saja, markup
 * tetap 100% bawaan StatsOverviewWidget Filament � TIDAK ada Blade
 * custom yang diganti).
 * ============================================================ */
.fi-wi-stats-overview-stat {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.9rem !important;
    box-shadow: none !important;
    padding: 0.9rem 1rem 2.5rem 1rem !important;
    overflow: hidden !important;
    position: relative !important;
}

.dark .fi-wi-stats-overview-stat {
    background: #27272a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-wi-stats-overview-stat-label-ctn {
    display: grid !important;
    grid-template-columns: 2rem 1fr !important;
    align-items: center !important;
    gap: 0.55rem !important;
    margin-block-end: 0.4rem !important;
}

.fi-wi-stats-overview-stat-label {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

.fi-wi-stats-overview-stat-label-ctn svg {
    width: 2rem !important;
    height: 2rem !important;
    padding: 0.45rem !important;
    border-radius: 0.55rem !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Warna kotak ikon berdasarkan warna yang sudah dipasang Filament sendiri
 * di elemen chart-nya (fi-color-primary/success/info/ungu � sesuai
 * ->color() di widget). */
.fi-wi-stats-overview-stat:has(.fi-color-primary) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #ffedd5 !important;
    color: #ea580c !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-success) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #dcfce7 !important;
    color: #16a34a !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-info) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #dbeafe !important;
    color: #2563eb !important;
}
.fi-wi-stats-overview-stat:has(.fi-color-ungu) .fi-wi-stats-overview-stat-label-ctn svg {
    background: #f3e8ff !important;
    color: #9333ea !important;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: #71717a !important;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #18181b !important;
    line-height: 1.15 !important;
}

.dark .fi-wi-stats-overview-stat-value {
    color: #fafafa !important;
}

.fi-wi-stats-overview-stat-description {
    font-size: 0.7rem !important;
    color: #a1a1aa !important;
    margin-block-start: 0.15rem !important;
}

.fi-wi-stats-overview-stat-chart {
    position: absolute !important;
    inset-inline: 1rem !important;
    inset-block-end: 0.85rem !important;
    height: 2rem !important;
    margin: 0 !important;
}

@media (max-width: 1023px) {
    .fi-wi-stats-overview-stat {
        aspect-ratio: 1 / 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM � Penutup #Terbaru: tabel, filter, search, aksi
 * ============================================================ */

/* 1) Semua tabel � TANPA sudut membulat sama sekali (kotak tegas). */
.fi-ta-ctn,
.fi-ta-content,
.fi-ta-table,
table.fi-ta-table thead,
table.fi-ta-table tbody {
    border-radius: 0 !important;
}

/* 2) Tombol Filter � dibuat custom, bukan ikon polos bawaan. Kotak
 * dengan border, ikon + latar sedikit beda supaya terlihat sebagai
 * kontrol tersendiri (bukan cuma ikon kosong). */
.fi-ta-filters-trigger-action-ctn .fi-btn,
.fi-ta-filters-trigger-action {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    color: #52525b !important;
    width: 2.4rem !important;
    height: 2.4rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fi-ta-filters-trigger-action-ctn .fi-btn:hover,
.fi-ta-filters-trigger-action:hover {
    background: #fafafa !important;
    border-color: var(--toya-orange, #f97316) !important;
    color: var(--toya-orange, #f97316) !important;
}

/* Badge jumlah filter aktif (kalau ada) tetap oranye. */
.fi-ta-filters-trigger-action-ctn .fi-badge {
    background: var(--toya-orange, #f97316) !important;
    color: #ffffff !important;
}

/* 3) Teks kolom Search � dibuat kecil, tidak besar. */
.fi-ta-search-field input,
.fi-ta-search-field .fi-input {
    font-size: 0.75rem !important;
}

.fi-ta-search-field input::placeholder,
.fi-ta-search-field .fi-input::placeholder {
    font-size: 0.75rem !important;
}

/* 4) Tombol aksi Edit/Delete � dikasih jarak (tidak nempel), latar
 * transparan, ikon berwarna beda: Edit = oranye, Delete/Hapus = hijau. */
.fi-ta-actions,
td .fi-ta-actions,
.fi-ta-actions-column {
    display: flex !important;
    gap: 0.5rem !important;
}

.fi-ta-actions .fi-icon-btn,
td .fi-icon-btn {
    background: transparent !important;
    border: none !important;
    width: 1.9rem !important;
    height: 1.9rem !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-primary,
.fi-ta-actions .fi-icon-btn.fi-color-warning,
td .fi-icon-btn.fi-color-primary,
td .fi-icon-btn.fi-color-warning {
    color: var(--toya-orange, #f97316) !important;
    background: transparent !important;
}

.fi-ta-actions .fi-icon-btn.fi-color-danger,
.fi-ta-actions .fi-icon-btn.fi-color-success,
td .fi-icon-btn.fi-color-danger,
td .fi-icon-btn.fi-color-success {
    color: #16a34a !important;
    background: transparent !important;
}

.fi-ta-actions .fi-icon-btn:hover,
td .fi-icon-btn:hover {
    background: #f4f4f5 !important;
    filter: none !important;
}

/* 5) Tombol "Bersihkan Data Offline" � latar transparan, ikon+teks
 * oranye. Disasar lewat class khusus (bukan warna generik), supaya
 * TIDAK ikut mempengaruhi tombol "Tambah" lain yang juga warna primary
 * di halaman-halaman lain. */
.tya-btn-outline-orange {
    background: transparent !important;
    border: 1px solid var(--toya-orange, #f97316) !important;
    color: var(--toya-orange, #f97316) !important;
}

.tya-btn-outline-orange:hover {
    background: rgba(249, 115, 22, 0.08) !important;
}

/* ============================================================
 * TOYA RADIUS UI SYSTEM � PENUTUP FINAL #3: input tanpa outline,
 * tombol kotak tegas tanpa bold, sel tabel tidak dipaksa tinggi.
 * ============================================================
 * DIPINDAH KE SINI (dari file Blade global-table-style.blade.php) �
 * beberapa halaman ternyata TIDAK memuat render hook BODY_END itu
 * (kemungkinan halaman dengan tipe layout berbeda), jadi aturan di
 * situ tidak konsisten kena di semua halaman. theme.css dimuat lewat
 * <link> di SETIAP halaman tanpa kecuali � dijamin universal. WAJIB
 * "npm run build" untuk file ini supaya aktif.
 */

/* Input teks � TANPA outline/border sama sekali. */
.fi-input-wrp,
.fi-modal-content .fi-input-wrp,
.choices__inner,
.fi-modal-content .choices__inner {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #fafafa !important;
}

.fi-input-wrp:focus-within,
.fi-modal-content .fi-input-wrp:focus-within {
    box-shadow: none !important;
}

/* Tombol � kotak tegas total, teks tidak bold. Menyasar SEMUA varian
 * tombol Filament (termasuk yang dirender lewat komponen Actions
 * seperti CreateAction "Tambah", Action custom "Generate", dst). */
.fi-btn,
.fi-ac-btn-action,
button.fi-btn,
a.fi-btn {
    border-radius: 0 !important;
    font-weight: 400 !important;
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #ffffff !important;
}

.fi-btn:hover,
.fi-ac-btn-action:hover {
    background: #ea580c !important;
    border-color: #ea580c !important;
}

.fi-btn-label,
.fi-btn span {
    font-weight: 400 !important;
}

/* Sel tabel � tidak dipaksa tinggi minimum, ikut isi konten saja. */
.fi-ta-cell {
    min-height: 0 !important;
    height: auto !important;
    padding: 0.5rem 0.8rem !important;
}

/* Outline oranye MASIH muncul � ketemu 3 aturan LAMA lain yang menyasar
 * .fi-input:focus LANGSUNG (elemen input-nya sendiri, BEDA dari
 * .fi-input-wrp:focus-within yang sudah dinetralkan di atas). Ini yang
 * benar-benar menang selama ini. Dihapus juga di sini. */
.fi-input:focus,
.fi-select-input:focus,
textarea.fi-input:focus,
.fi-modal-content .fi-input:focus,
.fi-modal-content .fi-select-input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* MASIH MUNCUL setelah semua di atas � dugaan saya: ini ring fokus
 * BAWAAN Filament sendiri (bukan CSS custom kita), muncul otomatis
 * karena warna utama ("primary") panel ini memang oranye dari awal
 * proyek. Filament/Tailwind generate ring fokus lewat CSS variable
 * (--tw-ring-color, --tw-ring-shadow), bukan cuma box-shadow biasa �
 * dinetralkan langsung di sini, level paling dasar. */
.fi-input,
.fi-select-input,
textarea.fi-input,
input,
select,
textarea {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.fi-input:focus,
.fi-input:focus-visible,
.fi-select-input:focus,
.fi-select-input:focus-visible,
textarea.fi-input:focus,
textarea.fi-input:focus-visible,
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
    outline: none !important;
    border-color: transparent !important;
}

/* Border dihapus TOTAL pada input teks � baik saat idle maupun fokus.
 * Wadah pembungkus (.fi-input-wrp) tetap ada, cuma tidak punya garis
 * pinggir sama sekali (dibedakan lewat latar warna kalau perlu). */
.fi-input-wrp,
.fi-modal-content .fi-input-wrp,
.choices__inner,
.fi-modal-content .choices__inner {
    border: none !important;
    box-shadow: none !important;
    background: #f4f4f5 !important;
}

.dark .fi-input-wrp,
.dark .fi-modal-content .fi-input-wrp,
.dark .choices__inner {
    background: #27272a !important;
}

.fi-input,
.fi-select-input,
textarea.fi-input,
input,
select,
textarea {
    border: none !important;
}


/* ============================================================
 * REDESAIN PROFESIONAL v4 -- TOMBOL, TABEL, FORM
 * ============================================================
 * Section final ini adalah satu-satunya sumber kebenaran untuk
 * tampilan tombol, tabel, dan form ke depannya. Ditaruh paling
 * akhir file supaya override semua rule sebelumnya (sama seperti
 * pola "PENUTUP FINAL" yang sudah dipakai di file ini).
 *
 * Tidak mengubah: struktur data, query, kolom tabel, field form,
 * Resource, model, atau logic apa pun -- murni presentation layer.
 * ============================================================ */

:root {
    --toya-radius-sm: 0rem;
    --toya-radius-md: 0.3rem;
    --toya-radius-lg: 0.6rem;

    --toya-shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
    --toya-shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
    --toya-shadow-md: 0 4px 12px rgba(24, 24, 27, 0.07), 0 1px 3px rgba(24, 24, 27, 0.05);
    --toya-shadow-lg: 0 12px 28px rgba(24, 24, 27, 0.10), 0 2px 6px rgba(24, 24, 27, 0.05);

    --toya-focus-ring: 0 0 0 3.5px rgba(249, 115, 22, 0.16);
    --toya-border-neutral: #e4e4e7;
    --toya-border-neutral-strong: #d4d4d8;
}

.dark {
    --toya-border-neutral: rgba(255, 255, 255, 0.09);
    --toya-border-neutral-strong: rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------
 * 1. TOMBOL (BUTTONS)
 * ------------------------------------------------------------ */
.fi-btn,
.fi-icon-btn {
    border-radius: var(--toya-radius-sm) !important;
    font-weight: 400 !important;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .08s ease, color .15s ease !important;
}

.fi-btn {
    padding-inline: 0.9rem !important;
    padding-block: 0.5rem !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.005em !important;
}

/* Primary (oranye) -- shadow lembut + efek "terangkat" saat hover */
.fi-btn.fi-color-primary,
.fi-btn.fi-color-primary.fi-ac-btn-action {
    background: var(--toya-orange) !important;
    box-shadow: var(--toya-shadow-sm) !important;
    border: 1px solid transparent !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--toya-orange-dark) !important;
    box-shadow: var(--toya-shadow-md) !important;
    transform: translateY(-1px) !important;
}

.fi-btn.fi-color-primary:active {
    transform: translateY(0) !important;
    box-shadow: var(--toya-shadow-xs) !important;
}

/* Tombol putih/netral (default, bukan primary/danger) -- outline bersih */
.fi-btn.fi-color-gray,
.fi-btn.fi-color-white {
    background: #ffffff !important;
    border: 1px solid var(--toya-border-neutral-strong) !important;
    color: var(--toya-text-primary) !important;
    box-shadow: var(--toya-shadow-xs) !important;
}

.fi-btn.fi-color-gray:hover,
.fi-btn.fi-color-white:hover {
    background: #fafafa !important;
    border-color: #a1a1aa !important;
    box-shadow: var(--toya-shadow-sm) !important;
}

.dark .fi-btn.fi-color-gray,
.dark .fi-btn.fi-color-white {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f4f4f5 !important;
}

/* Danger -- tegas tapi tetap konsisten dengan sistem shadow */
.fi-btn.fi-color-danger {
    box-shadow: var(--toya-shadow-sm) !important;
}

.fi-btn.fi-color-danger:hover {
    box-shadow: var(--toya-shadow-md) !important;
    transform: translateY(-1px) !important;
}

/* Tombol outlined (style="outlined") -- dua garis tipis konsisten */
.fi-btn.fi-btn-outlined {
    border-width: 1.5px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Fokus keyboard -- WAJIB ada untuk aksesibilitas & kesan profesional */
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-link:focus-visible {
    outline: none !important;
    box-shadow: var(--toya-focus-ring) !important;
}

/* Icon button (aksi baris tabel, dsb) -- bentuk bulat rapi + hover halus */
.fi-icon-btn {
    border-radius: var(--toya-radius-sm) !important;
    transition: background-color .15s ease, transform .08s ease !important;
}

.fi-icon-btn:hover {
    transform: translateY(-1px) !important;
}

.fi-icon-btn:active {
    transform: translateY(0) !important;
}

/* Disabled -- jelas tidak bisa diklik */
.fi-btn:disabled,
.fi-btn.fi-disabled {
    opacity: 0.55 !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* ------------------------------------------------------------
 * 2. TABEL (TABLES)
 * ------------------------------------------------------------ */
.fi-ta-ctn {
    border-radius: var(--toya-radius-lg) !important;
    box-shadow: var(--toya-shadow-sm) !important;
    overflow: hidden !important;
}

/* Header kolom -- latar sedikit lebih gelap, huruf kecil rapi, tegas */
.fi-ta-header-cell {
    background: #f7f7f8 !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    color: var(--toya-text-secondary) !important;
    padding-block: 0.7rem !important;
}

.dark .fi-ta-header-cell {
    background: rgba(255, 255, 255, 0.025) !important;
}

/* Baris -- transisi halus, hover jelas tanpa berlebihan */
.fi-ta-row {
    transition: background-color .1s ease !important;
}

.fi-ta-row:hover {
    background-color: rgba(249, 115, 22, 0.05) !important;
}

.fi-ta-row:nth-child(even):hover {
    background-color: rgba(249, 115, 22, 0.06) !important;
}

.fi-ta-cell {
    padding-block: 0.65rem !important;
}

/* Baris terpilih (checkbox) -- beri aksen kiri oranye supaya jelas */
.fi-ta-row:has(.fi-checkbox-input:checked) {
    background-color: rgba(249, 115, 22, 0.07) !important;
    box-shadow: inset 3px 0 0 var(--toya-orange) !important;
}

/* Badge status -- pill lembut dengan titik indikator, bukan warna solid rata */
.fi-badge {
    padding-inline: 0.6rem !important;
    padding-block: 0.25rem !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.fi-badge::before {
    content: "" !important;
    width: 0.375rem !important;
    height: 0.375rem !important;
    border-radius: 9999px !important;
    background: currentColor !important;
    flex-shrink: 0 !important;
}

.fi-badge.fi-color-success { background: var(--toya-success-soft) !important; color: #15803d !important; border-color: rgba(22,163,74,0.18) !important; }
.fi-badge.fi-color-warning { background: var(--toya-warning-soft) !important; color: #b45309 !important; border-color: rgba(217,119,6,0.18) !important; }
.fi-badge.fi-color-danger  { background: var(--toya-danger-soft)  !important; color: #b91c1c !important; border-color: rgba(220,38,38,0.18) !important; }
.fi-badge.fi-color-info    { background: var(--toya-info-soft)    !important; color: #1d4ed8 !important; border-color: rgba(37,99,235,0.18) !important; }
.fi-badge.fi-color-gray    { background: #f4f4f5 !important; color: #52525b !important; border-color: rgba(82,82,91,0.15) !important; }

/* Kolom aksi -- jarak antar icon button rapi */
.fi-ta-actions-cell .fi-ta-actions,
.fi-ta-record-actions {
    gap: 0.35rem !important;
}

/* Search & filter toolbar */
.fi-ta-search-field .fi-input-wrp {
    box-shadow: var(--toya-shadow-xs) !important;
}

.fi-ta-search-field .fi-input-wrp:focus-within {
    box-shadow: var(--toya-focus-ring) !important;
}

/* Pagination -- halaman aktif ditonjolkan oranye */
.fi-pagination-item[aria-current="page"],
.fi-pagination-item-label[aria-current="page"] {
    background: var(--toya-orange) !important;
    color: #ffffff !important;
    border-color: var(--toya-orange) !important;
    font-weight: 700 !important;
}

.fi-pagination-item:not([aria-current="page"]):hover {
    background: #f4f4f5 !important;
}

/* Empty state -- lebih rapi & tidak kosong-terlalu-polos */
.fi-ta-empty-state-icon {
    background: var(--toya-orange-soft) !important;
    color: var(--toya-orange) !important;
}



/* ============================================================
 * REDESAIN v5 -- MODAL FORM (Create/Edit) ala referensi
 * ============================================================
 * Target: modal Create/Edit terasa lebih lega & modern -- subtitle
 * di bawah judul, tombol close bulat dengan border, field lebih
 * tinggi dengan ikon di kiri (ikon di-set per field lewat
 * ->prefixIcon() di Resource, section ini cuma merapikan tampilannya),
 * footer tombol lebih rapi.
 * Tidak mengubah field/kolom/logic apa pun.
 * ============================================================ */

/* Modal lebih lega & sudut lebih membulat */
.fi-modal-window {
    border-radius: 1.1rem !important;
}

.fi-modal-header {
    align-items: flex-start !important;
    padding-block: 1.5rem !important;
}

.fi-modal-heading {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

/* Subtitle (modalDescription) -- dipisah jarak dari judul, warna muted */
.fi-modal-heading-ctn .fi-modal-description,
.fi-modal-header-heading-ctn p {
    margin-block-start: 0.3rem !important;
    font-size: 0.8125rem !important;
    color: var(--toya-text-muted) !important;
}

/* Tombol close (X) -- bulat, border tipis, hover halus */
.fi-modal-close-btn {
    border-radius: 9999px !important;
    border: 1px solid var(--toya-border-neutral) !important;
    width: 2.15rem !important;
    height: 2.15rem !important;
    transition: background-color .15s ease, border-color .15s ease !important;
}

.fi-modal-close-btn:hover {
    background: #f4f4f5 !important;
    border-color: var(--toya-border-neutral-strong) !important;
}

/* Ikon prefix di dalam field -- abu netral, tidak menyaingi teks
 * (border/tinggi/shadow field sendiri sudah dibalikin ke default
 * Filament, ini cuma ngewarnain ikonnya saja). */
.fi-input-wrp-prefix-icon,
.fi-input-wrp .fi-icon {
    color: #a1a1aa !important;
}

.fi-input-wrp:focus-within .fi-input-wrp-prefix-icon {
    color: var(--toya-orange) !important;
}

/* Pembatas antar Group field di dalam form -- lebih lega, garis lebih halus */
.fi-fo-component-ctn > div[style*="border-block-start"] {
    border-color: #f4f4f5 !important;
}

/* Footer modal -- tombol rapi & rata kanan, jarak antar tombol lega */
.fi-modal-footer-actions {
    gap: 0.6rem !important;
}

/* Tombol "Cancel" & "Create & create another" (keduanya default
 * color=gray dari Filament) -- outline netral bersih, senada. Tombol
 * utama (submit, color=primary/oranye) TIDAK kena rule ini. */
.fi-modal-footer .fi-btn.fi-color-gray {
    background: #ffffff !important;
    color: var(--toya-text-primary) !important;
    border: 1px solid var(--toya-border-neutral-strong) !important;
    box-shadow: none !important;
}

.fi-modal-footer .fi-btn.fi-color-gray:hover {
    background: #fafafa !important;
}

/* Urutan DOM Filament: Create (submit/primary) -> Create & create
 * another (gray) -> Cancel (gray). Dibalik secara visual saja (DOM &
 * urutan tab tetap sama) supaya tombol utama oranye ada di kanan,
 * sesuai referensi: Cancel, Create & create another, Create. */
.fi-modal-footer-actions {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
}


/* ============================================================
 * REDESAIN v8 -- HAPUS HIGHLIGHT AUTOFILL BROWSER (BENERAN, kali ini)
 * ============================================================
 * Kotak oranye yang muncul di sekeliling field (Password, Select,
 * field bernilai default) BUKAN dari rule CSS kita -- itu box-shadow
 * inset bawaan Chrome/Edge untuk field yang di-autofill/di-highlight
 * browser, ditimpakan LANGSUNG ke elemen <input>/<select>, bukan ke
 * div pembungkusnya -- makanya styling di .fi-input-wrp saja tidak
 * cukup untuk menghapusnya. Section ini menembak elemen native-nya
 * langsung.
 * ============================================================ */

/* Chrome/Edge/Safari: box-shadow inset kuning/oranye pada field yang
 * ditandai untuk autofill. Ditimpa balik dengan box-shadow putih polos
 * + delay transisi supaya warnanya tidak sempat muncul sama sekali. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: var(--toya-text-primary) !important;
    caret-color: var(--toya-text-primary) !important;
    transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s !important;
    border-color: var(--toya-border-neutral) !important;
}

.dark input:-webkit-autofill,
.dark select:-webkit-autofill,
.dark textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
    box-shadow: 0 0 0 1000px #18181b inset !important;
    -webkit-text-fill-color: #f4f4f5 !important;
}

/* Firefox punya mekanisme beda (tidak pakai box-shadow inset) --
 * ini jaga-jaga kalau browser lain memberi warna latar sendiri. */
input:autofill,
select:autofill,
textarea:autofill {
    background-color: #ffffff !important;
    border-color: var(--toya-border-neutral) !important;
}

/* Jaga-jaga tambahan: paksa border native <input>/<select> yang
 * dibungkus .fi-input-wrp SELALU transparan (border sebenarnya datang
 * dari div pembungkus .fi-input-wrp, bukan dari elemen ini) supaya
 * pseudo-class bawaan browser (:invalid/:required/:valid/:optional)
 * tidak pernah menggambar outline/border warna apa pun. */
.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.fi-input-wrp input:invalid,
.fi-input-wrp input:required,
.fi-input-wrp input:valid,
.fi-input-wrp select:invalid,
.fi-input-wrp select:required {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Choices.js (dropdown Select Filament) -- elemen native <select>
 * yang disembunyikan tetap bisa kena autofill/invalid browser lalu
 * "menembus" ke wrapper visualnya lewat class is-focused. Dipaksa
 * netral juga, fokus asli tetap lewat :focus-within di section v4. */
.choices__inner.is-focused,
.choices[data-type]:has(select:invalid) .choices__inner,
.choices[data-type]:has(select:required) .choices__inner {
    border-color: var(--toya-border-neutral) !important;
    box-shadow: var(--toya-shadow-xs) !important;
}

/* ============================================================
 * REDESAIN v10 -- DROPDOWN (SELECT) KOTAK, TIDAK ABU-ABU
 * ============================================================
 * Text field biasa sudah pakai default Filament (polos, cuma border
 * tipis, tidak ada bg). Dropdown/select masih pakai default Filament
 * sendiri yang beda: sudut membulat + latar abu-abu. Disamakan di
 * sini SAJA (radius kotak + latar putih) tanpa menambah shadow/ring
 * custom lain, biar tetap konsisten "default look" tapi kotak.
 * ============================================================ */
.fi-select-input,
.choices__inner,
.choices__list--dropdown,
.choices__list[aria-expanded] {
    border-radius: 0 !important;
    background-color: #ffffff !important;
}

.dark .fi-select-input,
.dark .choices__inner,
.dark .choices__list--dropdown {
    background-color: transparent !important;
}


/* ============================================================
 * REDESAIN v11 -- KOTAK IKON PREFIX DIHAPUS, OUTLINE TIPIS KOTAK
 * ============================================================
 * Default Filament: wrapper field pakai shadow+ring (bukan border
 * literal) untuk garis pinggirnya, dan kotak ikon prefix (Username=
 * orang, Password=gembok, dst) punya garis pemisah + nuansa abu.
 * Diganti jadi: ikon polos tanpa kotak/bg sama sekali, dan field
 * pakai border tipis literal warna netral, sudut kotak (radius 0).
 * ============================================================ */

/* Wrapper field -- border tipis literal, kotak, tanpa shadow/ring
 * bawaan Filament (biar tidak dobel sama border yang kita tambah). */
.fi-input-wrp {
    border: 1px solid var(--toya-border-neutral) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dark .fi-input-wrp {
    background-color: transparent !important;
}

/* Kotak ikon prefix/suffix (Username, Password, Rp, dst) -- hilangkan
 * latar & garis pemisahnya, biarkan ikon menyatu polos dengan field. */
.fi-input-wrp-prefix,
.fi-input-wrp-suffix {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Dropdown (select/choices.js) -- border tipis kotak yang sama,
 * karena section v10 sebelumnya cuma hapus radius+bg, belum kasih
 * border literal. */
.choices__inner {
    border: 1px solid var(--toya-border-neutral) !important;
    box-shadow: none !important;
}

/* ============================================================
 * REDESAIN v12 -- GARIS FIELD LEBIH SAMAR + SEMUA IKON TANPA BG ABU
 * ============================================================
 * Berlaku ke SEMUA halaman termasuk halaman Login (satu file
 * theme.css yang sama dipakai di sana juga). Ditulis dengan
 * spesifisitas tinggi di paling akhir file supaya pasti menang dari
 * rule versi manapun sebelumnya.
 * ============================================================ */

/* Border field jadi jauh lebih samar (bukan abu tegas, apalagi
 * oranye terang) -- garis cuma "penanda area", bukan elemen visual
 * yang menonjol. */
.fi-body .fi-input-wrp,
.fi-simple-layout .fi-input-wrp {
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dark .fi-body .fi-input-wrp,
.dark .fi-simple-layout .fi-input-wrp {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.fi-body .choices__inner,
.fi-simple-layout .choices__inner {
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
    box-shadow: none !important;
}

/* SEMUA tombol ikon (termasuk ikon mata show/hide password di field
 * Login) -- tidak ada latar abu/kotak di belakangnya, di halaman
 * mana pun. */
.fi-icon-btn,
.fi-input-wrp-actions .fi-icon-btn,
.fi-input-wrp-suffix .fi-icon-btn,
.fi-input-wrp-prefix .fi-icon-btn {
    background-color: transparent !important;
    box-shadow: none !important;
}

.fi-input-wrp-prefix,
.fi-input-wrp-suffix,
.fi-input-wrp-actions {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* ============================================================
 * REDESAIN v13 -- PANAH COLLAPSE SIDEBAR: ARAH BENAR + TANPA KOTAK
 * ============================================================
 * Masalah 1: rule global "PENUTUP FINAL #3" (tombol non-primary =
 * putih + outline abu) ikut kena ke tombol panah collapse group di
 * sidebar (sama-sama .fi-icon-btn warna gray) -- dikecualikan di sini.
 * Masalah 2: arah panahnya salah (kelihatan seperti "<" untuk grup
 * yang TERTUTUP, harusnya ">"). Dipaksa manual pakai aria-expanded
 * (true = grup terbuka, false = tertutup) supaya tidak bergantung ke
 * logic rotate bawaan Filament yang ternyata terbalik/membingungkan.
 * ============================================================ */

/* Hapus kotak/outline/background sama sekali dari tombol panah ini. */
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn:hover {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Arah panah: tertutup = mengarah ke KANAN ">", terbuka = mengarah ke
 * BAWAH (menandakan isinya terbentang di bawahnya). */
.fi-sidebar-group-collapse-btn svg {
    transition: transform .15s ease !important;
    transform: rotate(90deg) !important;
}

.fi-sidebar-group-collapse-btn[aria-expanded="true"] svg {
    transform: rotate(180deg) !important;
}