/* * filament-light.css — Permanent light mode fix for Filament v3 + Livewire v3 * * ROOT CAUSE (dari HTML source inspection): * 1. Body punya class "dark:bg-gray-950 dark:text-white" yang aktif saat * Alpine sempat menambah class "dark" ke sebelum JS override jalan. * 2. .fi-main-ctn punya class "opacity-0" dan Alpine set opacity:1 via x-bind:style, * tapi saat Livewire DOM morphing terjadi (search/filter), binding ini ter-reset. * * STRATEGI: * - Override semua dark: Tailwind variants secara eksplisit * - Force opacity-0 tidak berlaku di fi-main-ctn * - Tidak bergantung pada JS untuk rendering — CSS adalah source of truth */ /* ═══════════════════════════════════════════════════════ ROOT CAUSE FIX: fi-modal-close-overlay + x-trap stuck Solusi: semua overlay default pointer-events:none dan transparent. Hanya aktif saat modal window visible. Ini cover SEMUA kasus tanpa bergantung pada inline style. ═══════════════════════════════════════════════════════ */ /* Nuclear fix: semua modal overlay default tidak aktif */ .fi-modal-close-overlay { pointer-events: none !important; background: transparent !important; opacity: 0 !important; visibility: hidden !important; } /* Aktifkan hanya saat parent wrapper (div[x-show]) visible */ .fi-modal > div[style*="display: flex"] > .fi-modal-close-overlay, .fi-modal > div[style*="display:flex"] > .fi-modal-close-overlay, .fi-modal > div[style*="display: block"] > .fi-modal-close-overlay, .fi-modal > div[style*="display:block"] > .fi-modal-close-overlay { pointer-events: auto !important; background: rgb(3 7 18 / 0.5) !important; opacity: 1 !important; visibility: visible !important; } /* x-trap overlay juga harus nonaktif saat modal tertutup */ .fi-modal[wire\:ignore\.self] > div:not([style*="display: flex"]):not([style*="display:flex"]) { pointer-events: none !important; } /* ═══════════════════════════════════════════════════════ fi-main-ctn pakai opacity-0 + x-bind:style opacity:1 Saat Livewire morphing, binding Alpine ter-reset sebentar → blank ═══════════════════════════════════════════════════════ */ .fi-main-ctn { opacity: 1 !important; display: flex !important; } /* ═══════════════════════════════════════════════════════ 2. BLOKIR DARK MODE — ROOT CAUSE UTAMA Tailwind menggenerate dark: variants yang aktif saat html.dark Kita override SEMUA yang dipakai Filament ═══════════════════════════════════════════════════════ */ /* Body background — yang menyebabkan layar hitam saat dark aktif */ html, html.dark, body, .fi-body, html.dark body, html.dark .fi-body { background-color: #f1f5f9 !important; color: #0f172a !important; color-scheme: light !important; } /* Tailwind dark: variants — semua yang muncul di HTML Filament */ .dark\:bg-gray-950, html.dark .bg-gray-950 { background-color: #f1f5f9 !important; } .dark\:bg-gray-900, html.dark .bg-gray-900 { background-color: #ffffff !important; } .dark\:bg-white\/5, html.dark .bg-white\/5 { background-color: transparent !important; } .dark\:text-white, html.dark .text-white { color: #0f172a !important; } .dark\:text-gray-200, html.dark .text-gray-200 { color: #374151 !important; } .dark\:text-gray-400, html.dark .text-gray-400 { color: #6b7280 !important; } .dark\:text-gray-500, html.dark .text-gray-500 { color: #9ca3af !important; } .dark\:text-primary-400 { color: #37abc8 !important; } .dark\:ring-white\/10, .dark\:ring-white\/20 { --tw-ring-color: rgba(226,232,240,1) !important; } .dark\:divide-white\/10 > * + * { border-color: #e2e8f0 !important; } .dark\:border-white\/10 { border-color: #e2e8f0 !important; } .dark\:hover\:bg-white\/5:hover { background-color: #f1f5f9 !important; } .dark\:focus-visible\:bg-white\/5:focus-visible { background-color: #f1f5f9 !important; } .dark\:placeholder\:text-gray-500::placeholder { color: #9ca3af !important; } .dark\:disabled\:text-gray-400:disabled { color: #9ca3af !important; } /* Overlay dark */ .dark\:bg-gray-950\/50, .dark\:bg-gray-950\/75 { background-color: rgba(15,23,42,0.5) !important; } /* ═══════════════════════════════════════════════════════ 3. KOMPONEN FILAMENT ═══════════════════════════════════════════════════════ */ /* Sidebar */ .fi-sidebar, html.dark .fi-sidebar { background: #ffffff !important; border-right: 1px solid #e2e8f0 !important; } .fi-sidebar-header, html.dark .fi-sidebar-header { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; } /* Topbar */ .fi-topbar nav, html.dark .fi-topbar nav { background: #ffffff !important; border-bottom: 1px solid #e2e8f0 !important; box-shadow: none !important; } /* Main area */ .fi-main, html.dark .fi-main { background: #f1f5f9 !important; } .fi-simple-layout { background: #f1f5f9 !important; } .fi-simple-main, html.dark .fi-simple-main { background: #ffffff !important; color: #0f172a !important; } /* Page header */ .fi-page-header { background: transparent !important; box-shadow: none !important; } .fi-header-heading, html.dark .fi-header-heading { color: #0f172a !important; } /* Cards / Sections */ .fi-section, html.dark .fi-section { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; } .fi-section-header, html.dark .fi-section-header { background: #ffffff !important; border-bottom: 1px solid #f1f5f9 !important; } /* Table container */ .fi-ta-ctn, html.dark .fi-ta-ctn { background: #ffffff !important; border: 1px solid #e2e8f0 !important; } .fi-ta-header-cell, html.dark .fi-ta-header-cell { background: #f8fafc !important; color: #64748b !important; border-bottom: 1px solid #e2e8f0 !important; } .fi-ta-cell, html.dark .fi-ta-cell { color: #1e293b !important; border-bottom: 1px solid #f8fafc !important; } .fi-ta-row:hover .fi-ta-cell, html.dark .fi-ta-row:hover .fi-ta-cell { background: #f8fafc !important; } /* Empty state */ .fi-ta-empty-state, html.dark .fi-ta-empty-state { background: #ffffff !important; } /* Tabs */ .fi-tabs, html.dark .fi-tabs { background: #ffffff !important; border-color: #e2e8f0 !important; } .fi-tabs-item-active, html.dark .fi-tabs-item-active { background: #f1f5f9 !important; } /* Input / Form */ .fi-input-wrp, html.dark .fi-input-wrp { background: #ffffff !important; --tw-ring-color: rgba(203,213,225,1) !important; } .fi-input, html.dark .fi-input { background: #ffffff !important; color: #111827 !important; } .fi-select-input, html.dark .fi-select-input { background: #ffffff !important; color: #111827 !important; } .dark\:bg-white\/5.fi-input-wrp { background: #ffffff !important; } /* Dropdown panels */ .fi-dropdown-panel, html.dark .fi-dropdown-panel { background: #ffffff !important; border-color: #e2e8f0 !important; } .fi-dropdown-header, html.dark .fi-dropdown-header { background: #ffffff !important; } .fi-dropdown-list-item, html.dark .fi-dropdown-list-item { color: #374151 !important; } .fi-dropdown-list-item:hover, html.dark .fi-dropdown-list-item:hover { background: #f9fafb !important; } /* Modal */ .fi-modal-window, html.dark .fi-modal-window { background: #ffffff !important; border-color: #e2e8f0 !important; } .fi-modal-header, html.dark .fi-modal-header { border-color: #f1f5f9 !important; } .fi-modal-header-heading, html.dark .fi-modal-header-heading { color: #0f172a !important; } /* Buttons */ .fi-btn { border-radius: 8px !important; font-weight: 600 !important; } .fi-btn-color-primary { background: #37abc8 !important; color: #fff !important; border: none !important; box-shadow: 0 2px 8px rgba(55,171,200,0.25) !important; } .fi-btn-color-primary:hover { background: #2a94af !important; } .fi-btn-color-success { background: #059669 !important; color: #fff !important; border: none !important; } .fi-btn-color-danger { background: #dc2626 !important; color: #fff !important; border: none !important; } .fi-btn-color-warning { background: #ffcc00 !important; color: #1e293b !important; border: none !important; } .fi-btn-color-gray { background: #fff !important; color: #374151 !important; border: 1px solid #d1d5db !important; } /* Badges */ .fi-badge { border-radius: 6px !important; font-weight: 600 !important; } .fi-badge-color-success { background: #dcfce7 !important; color: #166534 !important; } .fi-badge-color-danger { background: #fee2e2 !important; color: #991b1b !important; } .fi-badge-color-warning { background: #fef9c3 !important; color: #854d0e !important; } .fi-badge-color-info { background: #e0f7fa !important; color: #007991 !important; } .fi-badge-color-primary { background: #e6f7fa !important; color: #19687d !important; } .fi-badge-color-gray { background: #f3f4f6 !important; color: #374151 !important; } /* Stat widgets */ .fi-wi-stats-overview-stat, html.dark .fi-wi-stats-overview-stat { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; } /* Notification */ .fi-notification, html.dark .fi-notification { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; } /* Icon btn dark overrides */ .dark\:text-gray-500.fi-icon-btn { color: #6b7280 !important; } .dark\:hover\:text-gray-400:hover { color: #9ca3af !important; } /* ═══════════════════════════════════════════════════════ 4. MEDIA QUERY — sistem OS dark mode tidak mempengaruhi ═══════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { html, body, .fi-body { background-color: #f1f5f9 !important; color: #0f172a !important; } .fi-sidebar { background: #ffffff !important; } .fi-main { background: #f1f5f9 !important; } .fi-simple-main { background: #ffffff !important; color: #0f172a !important; } .fi-ta-ctn { background: #ffffff !important; } .fi-section { background: #ffffff !important; } .fi-ta-cell { color: #1e293b !important; background: #ffffff !important; } .fi-ta-header-cell { background: #f8fafc !important; color: #64748b !important; } * { -webkit-text-fill-color: inherit !important; } } /* ═══════════════════════════════════════════════════════ 5. SIDEBAR NAV ═══════════════════════════════════════════════════════ */ .fi-sidebar-group-label { color: #64748b !important; font-size: 0.68rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .fi-sidebar-item-button { color: #475569 !important; border-radius: 10px !important; transition: all 0.15s ease !important; margin: 1px 0 !important; } .fi-sidebar-item-button:hover { background: #f1f9fb !important; color: #0f172a !important; } .fi-sidebar-item-active .fi-sidebar-item-button, .fi-sidebar-item-button[aria-current="page"] { background: linear-gradient(90deg, rgba(55,171,200,0.16) 0%, rgba(55,171,200,0.04) 100%) !important; color: #105566 !important; font-weight: 700 !important; border-left: 4px solid #ffcc00 !important; border-radius: 0 10px 10px 0 !important; box-shadow: 0 2px 8px rgba(55,171,200,0.1) !important; } .fi-sidebar-item-icon { color: #64748b !important; transition: color 0.15s ease !important; } .fi-sidebar-item-active .fi-sidebar-item-icon { color: #37abc8 !important; filter: drop-shadow(0 1px 2px rgba(55,171,200,0.3)) !important; } .fi-sidebar-item-label { color: #475569 !important; } .fi-sidebar-item-active .fi-sidebar-item-label { color: #105566 !important; font-weight: 700 !important; } /* Explicit dark sidebar text override */ .dark\:text-gray-200.fi-sidebar-item-label { color: #475569 !important; } .dark\:text-primary-400.fi-sidebar-item-label { color: #105566 !important; font-weight: 700 !important; } /* ═══════════════════════════════════════════════════════ 6. SCROLLBAR ═══════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }