/**
 * Filament Emerald Theme with Ambient Glow
 * Specially designed for Absensi Digital
 */

/* ==========================================================================
   1. Canvas Base & Stacking Context Safeguards
   ========================================================================== */

body.fi-body {
    position: relative;
    min-height: 100vh;
    transition: background-color 0.3s ease;
}

html:not(.dark) body.fi-body {
    background-color: #f5f9f7 !important;
}

html.dark body.fi-body {
    background-color: #060b09 !important;
}

/*
 * CRITICAL: Prevent isolating stacking contexts on layout wrappers.
 * Removing position:relative / z-index on layout ensures that fixed modals,
 * slide-overs, and overlays cleanly escape to the viewport and are NEVER trapped
 * underneath the sticky topbar (z-index: 30).
 */
.fi-layout,
.fi-simple-layout {
    position: static !important;
    z-index: auto !important;
}

.fi-main-ctn,
.fi-main {
    z-index: auto !important;
}

/* ==========================================================================
   2. Ambient Glow Effects
   ========================================================================== */

.fi-ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: strict;
}

.fi-ambient-glow-orb {
    position: absolute;
    border-radius: 9999px;
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

/* Orb 1: Emerald Radiant Canopy (Top-Right / Center) */
.fi-ambient-glow-emerald {
    top: -12%;
    right: 5%;
    width: 65vw;
    height: 60vh;
    filter: blur(95px);
    background: radial-gradient(circle, rgba(16, 185, 129, 0.26) 0%, rgba(5, 150, 105, 0.12) 45%, transparent 70%);
    animation: fiDrift1 22s ease-in-out infinite alternate;
}

/* Orb 2: Teal / Deep Cyan Glow (Top-Left / Sidebar Area) */
.fi-ambient-glow-teal {
    top: 8%;
    left: -12%;
    width: 55vw;
    height: 58vh;
    filter: blur(105px);
    background: radial-gradient(circle, rgba(13, 148, 136, 0.22) 0%, rgba(15, 118, 110, 0.10) 45%, transparent 70%);
    animation: fiDrift2 26s ease-in-out infinite alternate;
}

/* Orb 3: Mint Luminous Base (Bottom-Center / Left) */
.fi-ambient-glow-mint {
    bottom: -18%;
    left: 20%;
    width: 60vw;
    height: 52vh;
    filter: blur(115px);
    background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, rgba(16, 185, 129, 0.08) 50%, transparent 70%);
    animation: fiDrift3 28s ease-in-out infinite alternate;
}

/* Orb 4: Subtle Cyan Highlight (Mid-Right / Content Area) */
.fi-ambient-glow-cyan {
    top: 30%;
    right: 20%;
    width: 45vw;
    height: 45vh;
    filter: blur(90px);
    background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(8, 145, 178, 0.05) 45%, transparent 70%);
    animation: fiDrift4 20s ease-in-out infinite alternate;
}

/* Light Mode Overrides for Ambient Glow */
html:not(.dark) .fi-ambient-glow-emerald {
    filter: blur(75px);
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.07) 45%, transparent 70%);
}

html:not(.dark) .fi-ambient-glow-teal {
    filter: blur(85px);
    background: radial-gradient(circle, rgba(20, 184, 166, 0.12) 0%, rgba(45, 212, 191, 0.05) 45%, transparent 70%);
}

html:not(.dark) .fi-ambient-glow-mint {
    filter: blur(90px);
    background: radial-gradient(circle, rgba(110, 231, 183, 0.14) 0%, rgba(167, 243, 208, 0.06) 50%, transparent 70%);
}

html:not(.dark) .fi-ambient-glow-cyan {
    filter: blur(75px);
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, transparent 60%);
}

/* Micro-dot ambient matrix */
.fi-ambient-grid-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(16, 185, 129, 0.09) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 25%, #000 45%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 25%, #000 45%, transparent 85%);
    opacity: 0.65;
}

html:not(.dark) .fi-ambient-grid-pattern {
    background-image: radial-gradient(rgba(16, 185, 129, 0.09) 1.2px, transparent 1.2px);
    opacity: 0.45;
}

/* Hardware-accelerated drift animations */
@keyframes fiDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(30px, 25px, 0) scale(1.07); }
}

@keyframes fiDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-25px, 20px, 0) scale(1.06); }
}

@keyframes fiDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(20px, -25px, 0) scale(1.08); }
}

@keyframes fiDrift4 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-15px, -15px, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .fi-ambient-glow-orb {
        animation: none !important;
    }
}

/* ==========================================================================
   3. Glassmorphism & Panel Styling
   ========================================================================== */

/* Topbar Glass */
.fi-topbar {
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

html.dark .fi-topbar {
    background-color: rgba(9, 16, 13, 0.78) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.4) !important;
}

html:not(.dark) .fi-topbar {
    background-color: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.10) !important;
    box-shadow: 0 4px 20px -5px rgba(16, 185, 129, 0.04) !important;
}

/* Sidebar Glass */
.fi-sidebar {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

html.dark .fi-sidebar-header {
    background-color: rgba(9, 16, 13, 0.82) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
}

html:not(.dark) .fi-sidebar-header {
    background-color: rgba(255, 255, 255, 0.86) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.08) !important;
}

/* Active Sidebar Navigation Item Glow */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-active > .fi-sidebar-item-btn {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18) 0%, rgba(13, 148, 136, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
    box-shadow: 0 0 16px -2px rgba(16, 185, 129, 0.22) !important;
    color: #10b981 !important;
    font-weight: 600 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item-active .fi-sidebar-item-icon {
    color: #10b981 !important;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.45));
}

/* Brand Logo Styling */
.fi-logo {
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Login Logo */
.fi-simple-header .fi-logo {
    max-width: 280px !important;
    height: auto !important;
    max-height: 5.5rem !important;
    object-fit: contain !important;
    filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.25)) !important;
    margin-inline: auto !important;
    margin-bottom: 1.25rem !important;
}

/* Navbar & Sidebar Logo */
.fi-sidebar-header .fi-logo,
.fi-topbar .fi-logo {
    max-width: 220px !important;
    height: auto !important;
    max-height: 2.75rem !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 8px rgba(16, 185, 129, 0.15)) !important;
}

/* Login Page Main Card */
.fi-simple-main {
    border-radius: 1.25rem !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

html.dark .fi-simple-main {
    background-color: rgba(10, 18, 15, 0.82) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(16, 185, 129, 0.22) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 40px -5px rgba(16, 185, 129, 0.20) !important;
}

html:not(.dark) .fi-simple-main {
    background-color: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(16, 185, 129, 0.16) !important;
    box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.10), 0 0 25px -4px rgba(16, 185, 129, 0.08) !important;
}

/* Stats Cards Glass */
html.dark .fi-wi-stats-overview-stat {
    background-color: rgba(11, 20, 17, 0.72) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(16, 185, 129, 0.14) !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35), 0 0 15px -4px rgba(16, 185, 129, 0.08) !important;
}

html:not(.dark) .fi-wi-stats-overview-stat {
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(16, 185, 129, 0.12) !important;
    box-shadow: 0 4px 20px -2px rgba(16, 185, 129, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Sections & Table Containers: Opaque/semi-opaque surface WITHOUT backdrop-filter to prevent trapping fixed action modals */
html.dark .fi-section,
html.dark .fi-ta-ctn {
    background-color: rgba(11, 20, 17, 0.94) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(16, 185, 129, 0.14) !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35), 0 0 15px -4px rgba(16, 185, 129, 0.08) !important;
}

html:not(.dark) .fi-section,
html:not(.dark) .fi-ta-ctn {
    background-color: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(16, 185, 129, 0.12) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Primary Button Emerald Glow */
.fi-btn.fi-color-primary,
button.fi-btn.fi-color-primary,
a.fi-btn.fi-color-primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35), 0 0 16px rgba(16, 185, 129, 0.20) !important;
    transition: all 0.2s ease !important;
    color: #ffffff !important;
}

.fi-btn.fi-color-primary:hover,
button.fi-btn.fi-color-primary:hover,
a.fi-btn.fi-color-primary:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.50), 0 0 25px rgba(16, 185, 129, 0.30) !important;
    transform: translateY(-1px);
}

/* Input Focus Glow */
.fi-input:focus,
.fi-input-wrp:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 0 16px rgba(16, 185, 129, 0.15) !important;
}

/* Modals, Overlays & Popups: Elevated Above Sticky Topbar (z-index: 30) */
.fi-modal-close-overlay {
    z-index: 9990 !important;
}

.fi-modal-window-ctn {
    z-index: 9995 !important;
    padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
}

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

/* Ensure stacked modals also stack correctly */
.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-close-overlay,
.fi-modal.fi-modal-open ~ .fi-modal.fi-modal-open > .fi-modal-window-ctn {
    z-index: 10000 !important;
}

/* Modal Window Glassmorphism & Emerald Accent */
html.dark .fi-modal-window {
    background-color: rgba(10, 18, 15, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(16, 185, 129, 0.20) !important;
}

html:not(.dark) .fi-modal-window {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(16, 185, 129, 0.20) !important;
    box-shadow: 0 25px 50px -15px rgba(16, 185, 129, 0.18), 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown panels (actions, filters, user menu) sit comfortably above page content */
.fi-dropdown-panel {
    z-index: 9980 !important;
}

/* PWA Installation Guide Modal */
#pwa-guide-modal {
    z-index: 10005 !important;
}

/* ==========================================================================
   5. Scanner Responsive 2-Column Layout (Desktop vs Mobile)
   ========================================================================== */

.scanner-grid-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.scanner-left-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scanner-mobile-alert {
    display: block;
}

.scanner-right-panel {
    display: none;
    width: 100%;
}

/* Desktop & Tablet View (min-width: 768px) */
@media (min-width: 768px) {
    .scanner-grid-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem !important;
        align-items: start !important;
    }

    .scanner-left-panel {
        width: 100% !important;
    }

    .scanner-mobile-alert {
        display: none !important;
    }

    .scanner-right-panel {
        display: block !important;
        position: sticky !important;
        top: 1.5rem !important;
        width: 100% !important;
    }
}

/* Custom Emerald Scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.25);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.50);
}