/*
 * SWABINASISFO — Custom Filament Theme Enhancements
 * Light-mode first, dark-mode responsive
 * Visual only — no database or logic changes
 */

:root {
    --button-bg: #ffffff;
    --button-fg: #374151;
    --button-border: #d1d5db;
}

.dark {
    --button-bg: #1f2937;
    --button-fg: #e5e7eb;
    --button-border: #374151;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE — UTAMA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── L1. Main Content Background — Clean near-white, kartu jelas terpisah ─── */
:root:not(.dark) .fi-main {
    background-color: #F1F5F9 !important;
}

/* ─── L2. Topbar — White with soft shadow ───────────────────────────────── */
:root:not(.dark) .fi-topbar-inner,
:root:not(.dark) [class*="fi-topbar"] {
    background: #ffffff !important;
    box-shadow: 0 1px 8px 0 rgba(0, 60, 180, 0.06) !important;
}

/* ─── L3. Sidebar — Subtle cool-white with left blue accent ─────────────── */
:root:not(.dark) .fi-sidebar {
    background: #F7F9FD !important;
    border-right: 1px solid #D8E3F5 !important;
}
:root:not(.dark) .fi-sidebar-header {
    background: #F7F9FD !important;
    border-bottom: 1px solid #D8E3F5 !important;
}

/* ─── L4. Sidebar Active Item ───────────────────────────────────────────── */
:root:not(.dark) .fi-sidebar-item-button.fi-active,
:root:not(.dark) .fi-sidebar-item-button[aria-current="page"] {
    background: #EBF2FF !important;
    border-left: 3px solid #2563EB !important;
    color: #1D4ED8 !important;
    font-weight: 600 !important;
}
:root:not(.dark) .fi-sidebar-item-button:hover:not(.fi-active) {
    background: #EFF4FE !important;
}

/* ─── L5. Widget Cards — Jelas kotak pemisah seperti dark mode ──────────── */
:root:not(.dark) .fi-wi {
    background: #ffffff !important;
    border: 1.5px solid #94A3B8 !important;
    border-radius: 0.75rem !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
:root:not(.dark) .fi-wi:hover {
    box-shadow:
        0 3px 8px rgba(0,0,0,0.10),
        0 8px 24px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}

/* ─── L6. Stats Overview wrapper — hapus kotak besar luar (:has modern CSS) ─ */
:root:not(.dark) .fi-wi:has(.fi-wi-stats-overview-stat) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
:root:not(.dark) .fi-wi:has(.fi-wi-stats-overview-stat):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ─── L6b. Stat Cards Individual — shadow + garis biru atas saja ─────────── */
:root:not(.dark) .fi-wi-stats-overview-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    background: #ffffff !important;
    border: none !important;
    border-top: 3px solid #3B82F6 !important;
    border-radius: 0.75rem !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.08),
        0 6px 18px rgba(0,0,0,0.12) !important;
}
:root:not(.dark) .fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.10),
        0 12px 30px rgba(0,0,0,0.15) !important;
}

/* ─── L7. Stat Value — Bolder & Darker ──────────────────────────────────── */
.fi-wi-stats-overview-stat-value {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}
:root:not(.dark) .fi-wi-stats-overview-stat-value {
    color: #111827 !important;
}

/* ─── L8. Stat Description — More readable ──────────────────────────────── */
:root:not(.dark) .fi-wi-stats-overview-stat-description {
    font-weight: 500 !important;
}

/* ─── L9. Page Title ─────────────────────────────────────────────────────── */
.fi-header-heading {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}
:root:not(.dark) .fi-header-heading {
    color: #0F172A !important;
}

/* ─── L10. Section heading ───────────────────────────────────────────────── */
.fi-section-header-heading {
    font-weight: 700 !important;
}

/* ─── L11. Filament Section/Card — Kotak pemisah jelas ──────────────────── */
:root:not(.dark) .fi-section {
    background: #ffffff !important;
    border: 1.5px solid #94A3B8 !important;
    border-radius: 0.75rem !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.05) !important;
}

/* ─── L12. Fieldset — Border abu terlihat ────────────────────────────── */
:root:not(.dark) .fi-fo-fieldset {
    border-color: #94A3B8 !important;
    border-radius: 0.75rem !important;
    background: #FAFCFF !important;
}
.dark .fi-fo-fieldset {
    border-color: rgba(255,255,255,0.1) !important;
}
.fi-fo-fieldset legend {
    font-weight: 700 !important;
}

/* ─── L13. Topbar border + shadow ───────────────────────────────────────── */
.fi-topbar {
    border-bottom: 1px solid #D8E6F8 !important;
    box-shadow: 0 2px 12px -2px rgba(37,99,235,0.10) !important;
    position: relative !important;
    z-index: 40 !important;
}
.dark .fi-topbar {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: none !important;
}

/* ─── L14. Tables — Light tint rows ─────────────────────────────────────── */
:root:not(.dark) .fi-ta-table {
    background: #ffffff !important;
}
:root:not(.dark) .fi-ta-header-cell {
    background: #F0F5FF !important;
    color: #374151 !important;
    font-weight: 700 !important;
}
.fi-ta-row {
    transition: background-color 0.15s ease !important;
}
:root:not(.dark) .fi-ta-row:hover td {
    background-color: #F5F8FF !important;
}

/* ─── L15. Buttons ───────────────────────────────────────────────────────── */
.fi-btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.fi-btn:hover {
    transform: translateY(-1px) !important;
}
:root:not(.dark) .fi-btn-color-primary {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

/* ─── L16. Disabled inputs — High contrast ──────────────────────────────── */
.fi-input[disabled], .fi-input:disabled {
    opacity: 0.9 !important;
    color: rgb(17 24 39) !important;
    -webkit-text-fill-color: rgb(17 24 39) !important;
}
.dark .fi-input[disabled], .dark .fi-input:disabled {
    color: rgb(229 231 235) !important;
    -webkit-text-fill-color: rgb(229 231 235) !important;
}

/* ─── L17. Badge pulse ───────────────────────────────────────────────────── */
.fi-badge[class*="warning"] {
    animation: badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}

/* ─── L18. Brand name ────────────────────────────────────────────────────── */
:root:not(.dark) .fi-logo {
    font-weight: 800 !important;
    color: #2563EB !important; /* Blue color matching login button */
    letter-spacing: -0.01em !important;
}

/* ─── L18b. Login Page & Card Style (Light Mode) ─────────────────────────── */
:root:not(.dark) .fi-simple-layout {
    background-color: #F1F5F9 !important; /* Cool gray background to separate from card */
}

:root:not(.dark) .fi-simple-layout main,
:root:not(.dark) .fi-simple-main {
    background-color: #ffffff !important;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.12), 
        0 10px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1.5px solid #cbd5e1 !important; /* Defined cool-gray border */
    border-radius: 1rem !important; /* Make card rounded and clean */
}

/* ─── L18c. Checkbox visibility (Light Mode) ─────────────────────────────── */
:root:not(.dark) input[type="checkbox"],
:root:not(.dark) [type='checkbox'] {
    border: 1.5px solid #8e9cae !important;
}


/* ─── User Menu Dropdown — Always on top (scoped only to user menu) ─────── */
.fi-user-menu .fi-dropdown-panel {
    z-index: 9999 !important;
    position: fixed !important;
}

/* ─── L19. Pegawai Quick Actions Outer Wrapper — Remove default widget wrapper style ─── */
.fi-wi-pegawai-quick-actions {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.fi-wi-pegawai-quick-actions:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ─── L19b. Pegawai Quick Actions Card Custom Style ───────────────────────── */
.pegawai-quick-actions-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    border: 1.5px solid #94A3B8 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.pegawai-quick-actions-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Dark mode override for quick actions card */
.dark .pegawai-quick-actions-card {
    background-color: #0b0f19 !important; /* dark slate bg */
    border: 1px solid #1e293b !important; /* border slate-800 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Sudah bagus, hanya pertahankan yang penting
   ═══════════════════════════════════════════════════════════════════════════ */

.dark .fi-wi-stats-overview-stat:hover {
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-3px) !important;
}
.dark .fi-sidebar {
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}
.dark .fi-sidebar-nav-item.fi-active > .fi-sidebar-item-button {
    background-color: rgba(99, 141, 255, 0.12) !important;
    border-left: 3px solid rgba(99, 141, 255, 0.8);
}