/* Background utama */
.fi-main {
    position: relative;
    min-height: 100vh;
}

.fi-main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/keruk.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -9999;
}

/* Konten utama */
.fi-main > * {
    position: relative;
    z-index: 1;
}

/* Sidebar Navigation - SOLID (tidak transparan) */
.fi-sidebar, 
.fi-sidebar-nav {
    background-color: white !important; /* Warna solid */
    backdrop-filter: none !important; /* Hilangkan blur */
}

.fi-sidebar-nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem 1.5rem;
}

/* Dark mode untuk sidebar */
.dark .fi-sidebar,
.dark .fi-sidebar-nav {
    background-color: #191717 !important; /* Warna dark solid */
}

/* Card dan tabel (tetap transparan) */
.fi-card,
.fi-tables-table,
.fi-tables-header,
.fi-tables-container {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(2px);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sistem Notifikasi */
.filament-notifications {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    max-width: 320px !important;
}

.filament-notifications .filament-notification {
    background-color: white !important; /* Notifikasi solid */
    border-left: 4px solid #4ade80 !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0.375rem !important;
}

/* Modals */
.fi-modal {
    z-index: 9999 !important;
    background-color: white !important; /* Modal solid */
}

.fi-modal-overlay {
    z-index: 9998 !important;
}

.filament-export-modal {
    z-index: 9997 !important;
    background-color: white !important; /* Export modal solid */
}

/* Dark mode adjustments */
.dark .fi-card,
.dark .fi-tables-table,
.dark .fi-tables-header,
.dark .fi-tables-container {
    background-color: rgba(17, 24, 39, 0.9) !important;
}

.dark .filament-notifications .filament-notification,
.dark .fi-modal,
.dark .filament-export-modal {
    background-color: #1f2937 !important;
}