/* Modern Variables & Glassmorphism */
        :root {
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.5);
            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
            --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            --glow-primary: 0 0 15px rgba(82, 22, 176, 0.3);
        }

        [data-theme="dark"] {
            --glass-bg: rgba(18, 18, 20, 0.65);
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
            --glow-primary: 0 0 20px rgba(120, 50, 255, 0.4);
        }

        /* Super Kekinian Animations */
        @keyframes slideUpFade {
            0% { opacity: 0; transform: translateY(30px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes pulseGlow {
            0% { box-shadow: 0 0 0 0 rgba(82, 22, 176, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(82, 22, 176, 0); }
            100% { box-shadow: 0 0 0 0 rgba(82, 22, 176, 0); }
        }

/* [QUARK MODE] ANIMASI TRANSAKSI FLUIDA KEKINIAN UNTUK SEMUA ELEMEN */
        * {
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .card {
            animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-origin: center bottom;
        }

        button:active, .btn:active {
            transform: scale(0.92) !important;
            transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        input:focus, select:focus, textarea:focus {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(82, 22, 176, 0.15) !important;
            border-color: var(--brand-purple) !important;
        }

        .data-table tbody tr {
            /* Animasi transform dihapus agar posisi Sticky tidak rusak */
            opacity: 1;
        }
        
        .data-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
        .data-table tbody tr:nth-child(2) { animation-delay: 0.10s; }
        .data-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
        .data-table tbody tr:nth-child(4) { animation-delay: 0.20s; }
        .data-table tbody tr:nth-child(5) { animation-delay: 0.25s; }

/* [SUPER QUARK] LEAFLET MAP ENTERPRISE OVERRIDES */
        .leaflet-popup-content-wrapper, .leaflet-popup-tip {
            background: var(--glass-bg, rgba(255, 255, 255, 0.8)) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.4)) !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
            border-radius: 16px !important;
            color: var(--text-main, #333) !important;
        }
        .leaflet-popup-content {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            font-weight: 500 !important;
        }
        .leaflet-container {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            border-radius: 16px !important;
            z-index: 1 !important; /* Mencegah map menutupi SweetAlert/Preloader */
        }

        /* Global Structural Overrides */
        body {
            background-attachment: fixed !important;
            scroll-behavior: smooth;
        }

        /* Card Modernization */
        .card, .modal-content, .sidebar {
            background: var(--glass-bg) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border: 1px solid var(--glass-border) !important;
            box-shadow: var(--glass-shadow) !important;
            transition: transform var(--transition-bounce), box-shadow var(--transition-smooth) !important;
            border-radius: 16px !important;
        }

       .card:hover {
            box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
            /* transform dihapus secara permanen */
        }

        /* Input & Form Kekinian */
        input, select, textarea, .select2-container--default .select2-selection--single {
            border-radius: 12px !important;
            border: 2px solid transparent !important;
            background: rgba(120, 120, 120, 0.05) !important;
            transition: all var(--transition-smooth) !important;
        }

        input:focus, select:focus, textarea:focus, .select2-container--default.select2-container--focus .select2-selection--single {
            background: transparent !important;
            border-color: var(--text-main) !important;
            box-shadow: var(--glow-primary) !important;
            transform: scale(1.01);
        }

        /* Button Modernization */
        button, .btn {
            border-radius: 12px !important;
            transition: all var(--transition-bounce) !important;
            position: relative;
            overflow: hidden;
            font-weight: 600 !important;
            letter-spacing: 0.5px;
        }

        button:hover, .btn:hover {
            transform: translateY(-3px) scale(1.02) !important;
            filter: brightness(1.1);
        }

        button:active, .btn:active {
            transform: translateY(1px) scale(0.95) !important;
        }

        /* Staggered Animation Class */
        .animate-on-load {
            animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            opacity: 0;
        }

/* =======================================================
           SUPER QUARK: GLOBAL UI/UX ANIMATION ENGINE & KEKINIAN
           ======================================================= */
        /* 1. Smooth Scrolling & Custom Scrollbar Kekinian */
        html { scroll-behavior: smooth; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* 2. Animasi Masuk Halaman (Fade In Up) */
        @keyframes fadeInUpModern {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .main-content, .dashboard-content {
            animation: fadeInUpModern 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* 3. Card Hover & Soft Shadow (Glassmorphism Light) */
        .info-card, .data-card, .chart-container, .map-container {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(226, 232, 240, 0.8) !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        }
        .info-card:hover, .data-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(82, 22, 176, 0.1), 0 10px 10px -5px rgba(82, 22, 176, 0.04) !important;
            border-color: rgba(82, 22, 176, 0.3) !important;
        }

        /* 4. Animasi Interaksi Tombol (Tactile Feedback) */
        button, .btn {
            transition: all 0.25s ease !important;
            position: relative;
            overflow: hidden;
        }
        button:hover, .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
        }
        button:active, .btn:active {
            transform: scale(0.95) !important; /* Efek ditekan kekinian */
            box-shadow: none !important;
        }

        /* 5. Sidebar Menu Hover Animation */
        .sidebar-menu li a {
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .sidebar-menu li a:hover {
            transform: translateX(8px); /* Geser ke kanan sedikit saat dihover */
            color: #5216b0 !important;
            background-color: rgba(82, 22, 176, 0.08) !important;
            border-radius: 8px;
        }

        /* 6. Table Row Hover Highlight Modern */
        tbody tr {
            transition: background-color 0.2s ease;
        }
        tbody tr:hover {
            background-color: #f8fafc !important;
            box-shadow: inset 4px 0 0 0 #5216b0; /* Garis ungu modern di kiri tabel saat dihover */
        }
        
        /* 7. Input Form & Select2 Focus Animation */
        input:focus, select:focus, textarea:focus, .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #5216b0 !important;
            box-shadow: 0 0 0 4px rgba(82, 22, 176, 0.15) !important;
            transition: all 0.3s ease;
        }

/* =======================================================
           TAMBAHAN UI KEKINIAN UNTUK SWEETALERT (SUPER QUARK)
           ======================================================= */
        .swal2-modern-popup {
            border-radius: 24px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            backdrop-filter: blur(10px);
            padding: 2rem !important;
        }
        .swal2-modern-popup.swal2-show {
            animation: swal2-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .swal2-modern-title {
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            font-weight: 800 !important;
            color: #1f2937 !important;
        }
        .swal2-modern-confirm-btn {
            border-radius: 12px !important;
            font-weight: 600 !important;
            padding: 12px 24px !important;
            transition: all 0.3s ease !important;
            box-shadow: 0 4px 14px 0 rgba(82, 22, 176, 0.39) !important;
        }
        .swal2-modern-confirm-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(82, 22, 176, 0.23) !important;
        }
        .swal2-modern-cancel-btn {
            border-radius: 12px !important;
            font-weight: 600 !important;
            padding: 12px 24px !important;
            color: #4b5563 !important;
            transition: all 0.3s ease !important;
        }
        .swal2-modern-cancel-btn:hover {
            background-color: #e5e7eb !important;
            transform: translateY(-2px);
        }
        .fa-spin-hover:hover {
            animation: fa-spin 2s infinite linear;
        }

/* CSS KHUSUS SELECT2 AGAR MENYATU DENGAN TEMA */
        .select2-container .select2-selection--single { height: 46px; padding: 0.5rem; border: 1.5px solid var(--border); border-radius: var(--radius-md); background-color: var(--input-bg); outline: none; transition: var(--transition-smooth); }
        .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-main); font-weight: 500; line-height: 28px; font-family: 'Plus Jakarta Sans', sans-serif;}
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; top: 1px; right: 10px; }
        .select2-container--open .select2-selection--single { border-color: var(--brand-purple) !important; box-shadow: var(--focus-ring); }
        .select2-dropdown { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-float); background-color: var(--bg-card); z-index: 100000; }
        .select2-search__field { font-family: 'Plus Jakarta Sans', sans-serif; border-radius: var(--radius-sm) !important; }
        .select2-results__option { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; }
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--primary); }
        [data-theme="dark"] .select2-dropdown { background-color: var(--bg-card); border-color: var(--border); }
        [data-theme="dark"] .select2-search__field { background-color: var(--input-bg); color: white; border-color: var(--border); }
        [data-theme="dark"] .select2-results__option { color: var(--text-main); }

/* --- UI/UX KEKINIAN UPGRADE (GLASMORPHISM & SOFT UI) --- */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-body); }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--brand-purple); }
        [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }

        .card { border: none !important; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08) !important; border-radius: 24px !important; }
        [data-theme="dark"] .card { box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5) !important; background: linear-gradient(145deg, #18181b, #27272a); }
        
        .form-control { border-radius: 14px !important; border: 1.5px solid transparent !important; background-color: var(--input-disabled) !important; }
        .form-control:focus { background-color: var(--input-bg) !important; border-color: var(--brand-purple) !important; box-shadow: 0 0 0 4px rgba(82, 22, 176, 0.1) !important; }
        .form-control:hover:not(:disabled) {
            background-color: var(--input-bg) !important;
            border-color: #cbd5e1 !important;
        }
        [data-theme="dark"] .form-control:hover:not(:disabled) {
            border-color: #475569 !important;
        }
        .btn { border-radius: 12px !important; font-weight: 800 !important; letter-spacing: 0.3px; }
        .btn-primary { background: linear-gradient(135deg, var(--brand-purple), var(--primary)) !important; border: none !important; }
        .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(82, 22, 176, 0.3) !important; transform: translateY(-2px) !important; }
        .btn-success { background: linear-gradient(135deg, #10b981, #059669) !important; border: none !important; }
        
        /* [QUARK MODE] COMPACT TABLE OPTIMIZATION - MENGURANGI TINGGI BARIS */
.data-table td { font-size: 0.85rem !important; padding: 0.6rem 0.8rem !important; vertical-align: middle !important; height: auto !important; }
.data-table th { padding: 0.8rem 0.8rem !important; font-size: 0.7rem !important; }
        .data-table tbody tr { transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; cursor: pointer; }
        .data-table tbody tr:hover { 
            box-shadow: 0 10px 25px rgba(82, 22, 176, 0.15); 
            background: linear-gradient(90deg, var(--bg-card) 0%, var(--primary-light) 100%) !important;
            /* transform, z-index, dan position relative dihapus agar sticky mutlak bekerja */
        }

        .timeline-modern { border-left: 3px solid var(--border); padding-left: 20px; margin-top: 15px; position: relative; }
        .timeline-item-modern { position: relative; margin-bottom: 25px; background: var(--input-disabled); padding: 15px; border-radius: 16px; transition: 0.3s; }
        .timeline-item-modern:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .timeline-dot-modern { position: absolute; left: -29.5px; top: 15px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--bg-card); }

        /* =========================================================
           1. DESIGN SYSTEM, TOKENS & ULTRA-MODERN ANIMATIONS
           ========================================================= */
        :root {
            --primary: #4f46e5; --primary-hover: #4338ca; --primary-light: #e0e7ff;
            --brand-purple: #6d28d9; --brand-purple-hover: #5b21b6;
            --focus-ring: 0 0 0 4px rgba(109, 40, 217, 0.2);
            --bg-body: #f8fafc; --bg-card: rgba(255, 255, 255, 0.7);
            --border: rgba(226, 232, 240, 0.8); --text-main: #0f172a; --text-muted: #64748b; 
            --danger: #ef4444; --danger-bg: #fef2f2; --success: #10b981; --warning: #f59e0b;
            --input-bg: rgba(255, 255, 255, 0.9); --input-disabled: #f1f5f9;
            --radius-lg: 24px; --radius-md: 16px; --radius-sm: 10px;
            --shadow-float: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
            --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.05);
            --shadow-glow: 0 0 20px rgba(109, 40, 217, 0.4);
            --transition-spring: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        [data-theme="dark"] {
            --primary: #6366f1; --primary-hover: #818cf8; --primary-light: rgba(99, 102, 241, 0.15);
            --brand-purple: #8b5cf6; --brand-purple-hover: #a78bfa;
            --focus-ring: 0 0 0 4px rgba(139, 92, 246, 0.3); 
            --bg-body: #09090b; --bg-card: rgba(24, 24, 27, 0.75); 
            --border: rgba(63, 63, 70, 0.6); 
            --text-main: #f8fafc; --text-muted: #a1a1aa; 
            --danger: #f87171; --danger-bg: rgba(239, 68, 68, 0.1);
            --input-bg: rgba(39, 39, 42, 0.8); --input-disabled: #18181b;
            --shadow-float: 0 30px 60px -12px rgba(0, 0, 0, 0.7);
            --shadow-card: 0 15px 35px -5px rgba(0,0,0,0.5);
            --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.5);
            color-scheme: dark;
        }

        /* KEYFRAMES KEKINIAN */
        @keyframes fluidEntrance {
            0% { opacity: 0; transform: translateY(30px) scale(0.97); filter: blur(10px); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes magneticGlow {
            0% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.4); }
            50% { box-shadow: 0 0 20px 0 rgba(109, 40, 217, 0.6); }
            100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0.4); }
        }

/* [SUPER QUARK] Memaksa Alert muncul di lapisan paling depan menembus Overlay Login */
        .swal2-container {
            z-index: 99999999 !important;
        }

        /* FIX MUTLAK & QUARK MODE: SweetAlert Ultra-Modern */
        .swal2-popup { 
            background: var(--bg-card) !important; 
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            color: var(--text-main) !important; 
            border-radius: 28px !important; 
            border: 1px solid rgba(255, 255, 255, 0.1) !important; 
            box-shadow: var(--shadow-float) !important;
        }
        .swal2-popup.swal2-show {
            animation: fluidEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        .swal2-title, .swal2-html-container, .swal2-content { color: var(--text-main) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
        .swal2-confirm { border-radius: 14px !important; font-weight: 800 !important; letter-spacing: 0.5px; transition: var(--transition-spring) !important; }
        .swal2-confirm:hover { transform: translateY(-3px) scale(1.05) !important; box-shadow: var(--shadow-glow) !important; }

        /* =========================================================
           2. BASE RESET & LAYOUT
           ========================================================= */
        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; -webkit-tap-highlight-color: transparent; }
        body { background-color: var(--bg-body); color: var(--text-main); padding: 2rem 1rem; transition: var(--transition-smooth); line-height: 1.6; }
        .container { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
        
        .app-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; border-bottom: 2px solid var(--border); margin-bottom: 0.5rem; }
        .app-title { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 0.75rem; letter-spacing: -0.02em; }
        .app-title i { color: var(--primary); font-size: 1.8rem; background: var(--primary-light); padding: 0.5rem; border-radius: var(--radius-sm); }
        
        .theme-switch { position: relative; width: 60px; height: 32px; cursor: pointer; border-radius: 34px; background-color: #cbd5e1; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
        .theme-switch input { display: none; }
        .theme-switch i { color: #64748b; font-size: 13px; z-index: 1; transition: var(--transition-smooth); }
        [data-theme="dark"] .theme-switch i { color: #ffffff; }
        .theme-switch .toggle-knob { position: absolute; height: 26px; width: 26px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: var(--transition-smooth); z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .theme-switch input:checked ~ .toggle-knob { transform: translateX(28px); }
        [data-theme="dark"] .theme-switch { background-color: #334155; }

        /* =========================================================
           3. KARTU, SISTEM GRID & TOOLTIPS ABSOLUTE FIX
           ========================================================= */
        .card { background-color: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 2rem; border: 1px solid var(--border); position: relative; transition: var(--transition-smooth); }
        .card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; }
        .card-title i { color: var(--primary); }

        .search-wrapper { display: flex; gap: 1rem; position: relative; z-index: 50; }
        .search-wrapper input { flex: 1; min-width: 0; }
        
        .form-grid { display: flex; flex-direction: column; gap: 1.5rem; }
        .form-group { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; min-width: 0; position: relative; } 
        
        .form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; }
        .form-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; }
        
        .form-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; flex-wrap: wrap; }
        .form-label.required::after { content: "*"; color: var(--danger); font-size: 1.1rem; margin-left: 4px; line-height: 0.8; font-weight: 900;}

        /* FIX MUTLAK TOOLTIPS: Anti-Flicker & Responsif ke Samping */
        .tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; cursor: help; color: var(--primary); transition: color 0.2s; }
        .tooltip-wrapper:hover { color: var(--brand-purple); }
        .tooltip-wrapper::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(10px); background: var(--text-main); color: var(--bg-card); padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: normal; min-width: max-content; max-width: 350px; text-align: center; z-index: 99999; box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; font-family: 'Plus Jakarta Sans', sans-serif; text-transform: none; letter-spacing: normal; line-height: 1.4; }
        .tooltip-wrapper::before { content: ''; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(10px); border-width: 6px; border-style: solid; border-color: var(--text-main) transparent transparent transparent; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 99999; pointer-events: none; }
        .tooltip-wrapper:hover::after, .tooltip-wrapper:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

        /* =========================================================
           4. FORM CONTROLS (FOKUS UNGU #5216b0)
           ========================================================= */
        .form-control { width: 100%; padding: 0.875rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 500; color: var(--text-main); background-color: var(--input-bg); transition: var(--transition-smooth); outline: none; appearance: none; }
        .form-control::placeholder { color: #94a3b8; font-weight: 400; }
        select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2em; cursor: pointer; }
        
        .form-control:focus { border-color: var(--brand-purple); box-shadow: var(--focus-ring); transform: translateY(-1px); }
        .form-control:disabled { background-color: var(--input-disabled); color: var(--text-muted); cursor: not-allowed; border-style: dashed; }
        
        .form-control.is-invalid { border-color: var(--danger) !important; background-color: var(--danger-bg) !important; animation: shake 0.4s ease-in-out; }
        /* MASTER PROTOCOL: Validasi Merah Bergetar untuk Select2 */
        select.is-invalid + .select2-container--default .select2-selection--single { border-color: var(--danger) !important; background-color: var(--danger-bg) !important; animation: shake 0.4s ease-in-out; }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

        /* UPLOAD FILE UI */
        .file-upload-wrapper { position: relative; display: flex; align-items: center; border: 1.5px dashed var(--border); border-radius: var(--radius-md); padding: 0.5rem; background: var(--input-disabled); transition: var(--transition-smooth); cursor: pointer; }
        .file-upload-wrapper:hover { border-color: var(--brand-purple); }
        .file-upload-wrapper input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; width: 100%; }
        .file-upload-btn { background: var(--primary); color: white; padding: 0.5rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 600; pointer-events: none; display: flex; gap: 0.5rem; align-items: center; }
        .file-upload-text { margin-left: 1rem; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

        .preview-container { display: flex; gap: 1rem; margin-top: 0.75rem; align-items: center; display: none; padding: 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-body); }
        .preview-image { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; display: none; box-shadow: var(--shadow-card); }
        .preview-pdf { width: 48px; height: 48px; display: none; align-items: center; justify-content: center; font-size: 28px; color: #e11d48; background: #ffe4e6; border-radius: var(--radius-sm); }
        .preview-info { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
        .preview-name { font-size: 0.85rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .preview-size { font-size: 0.75rem; color: var(--success); font-weight: 600; margin-top: 0.2rem; }

        /* =========================================================
           5. BUTTONS
           ========================================================= */
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.875rem 1.5rem; font-size: 0.95rem; font-weight: 700; border-radius: var(--radius-md); border: none; cursor: pointer; transition: var(--transition-smooth); font-family: inherit; position: relative; overflow: hidden; }
        .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
        
        .btn-primary { background-color: var(--primary); color: white; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); }
        .btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3); }
        .btn-outline { background-color: transparent; color: var(--text-main); border: 2px solid var(--border); }
        .btn-outline:hover:not(:disabled) { background-color: var(--input-disabled); border-color: var(--text-muted); }
        .btn-success { background-color: var(--success); color: white; box-shadow: 0 4px 6px rgba(16, 185, 129, 0.2); }
        .btn-success:hover:not(:disabled) { background-color: #059669; transform: translateY(-2px); }

        /* =========================================================
           6. SKELETON LOADER & AUTOCOMPLETE
           ========================================================= */
        @keyframes pulse-bg { 0% { background-color: var(--input-disabled); } 50% { background-color: var(--border); } 100% { background-color: var(--input-disabled); } }
        .skeleton-loading { animation: pulse-bg 1.5s infinite ease-in-out; color: transparent !important; pointer-events: none; border-style: solid !important; }

        .suggestions-box { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-float); z-index: 9999; display: none; max-height: 350px; overflow-y: auto; }
        .suggestion-item { padding: 1.2rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: var(--transition-smooth); color: var(--text-main); }
        .suggestion-item:last-child { border-bottom: none; }
        .suggestion-item:hover { background-color: var(--primary-light); padding-left: 1.8rem; }
        .sugg-icon { color: var(--primary); font-size: 1.1rem; margin-top: 0.1rem; flex-shrink: 0; }
        .sugg-content { display: flex; flex-direction: column; gap: 0.2rem; }
        .sugg-title { font-weight: 700; color: var(--text-main); font-size: 0.95rem; }
        .sugg-subtitle { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
        .suggestion-msg { padding: 1.5rem; text-align: center; color: var(--text-muted); font-weight: 500; }

        /* =========================================================
           7. PETA GIS & ANIMASI PIN
           ========================================================= */
        #map { height: 500px; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); z-index: 1; }
        .map-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
        .map-hint { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; font-weight: 500;}
        
        .custom-pin { display: flex; justify-content: center; align-items: flex-end; width: 44px; height: 44px; background: transparent; }
        .custom-pin i { font-size: 44px; color: var(--danger); filter: drop-shadow(0px 10px 6px rgba(0,0,0,0.5)); transition: transform 0.2s; }
        .custom-pin:hover i { transform: scale(1.15); }
        @keyframes pinDrop { 0% { transform: translateY(-40px) scale(1.1); opacity: 0; } 70% { transform: translateY(5px) scale(0.9); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
        .pin-animate i { animation: pinDrop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
        .recenter-btn { position: absolute; bottom: 24px; left: 24px; z-index: 1000; background: var(--bg-card); color: var(--text-main); border: 1px solid var(--border); padding: 0.6rem 1.2rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-card); transition: var(--transition-smooth); display: flex; align-items: center; gap: 0.5rem; }
        .recenter-btn:hover { background: var(--input-disabled); transform: translateY(-2px); box-shadow: var(--shadow-float); }

        /* =========================================================
           8. OVERLAYS, TOASTS & MODALS
           ========================================================= */
        .overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-lg); }
        [data-theme="dark"] .overlay { background: rgba(24, 24, 27, 0.85); }
        .spinner { width: 44px; height: 44px; border: 4px solid var(--border); border-top-color: var(--brand-purple); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1rem; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .overlay-text { font-weight: 700; color: var(--brand-purple); font-size: 1.1rem; letter-spacing: 0.05em; }

        #toastContainer { position: fixed; bottom: 24px; right: 24px; z-index: 10000; display: flex; flex-direction: column; gap: 12px; }
        .toast { min-width: 300px; padding: 1rem 1.25rem; border-radius: var(--radius-md); color: white; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-float); transform: translateX(120%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .toast.show { transform: translateX(0); }
        .toast.info { background-color: var(--primary); }
        .toast.error { background-color: var(--danger); }
        .toast.success { background-color: var(--success); }
        .toast.warning { background-color: var(--warning); color: #000; }

        #jsonModal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 11000; align-items: center; justify-content: center; backdrop-filter: blur(6px); padding: 1rem;}
        .modal-content { background: var(--bg-card); width: 100%; max-width: 700px; border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-float); max-height: 90vh; overflow-y: auto; }
        pre { background: #1e1e1e; padding: 1.5rem; border-radius: var(--radius-md); overflow-x: auto; font-size: 0.85rem; color: #a6e22e; margin: 1.5rem 0; font-family: monospace; line-height: 1.5; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);}
        .string { color: #e6db74; } .number { color: #ae81ff; } .boolean { color: #fd971f; } .null { color: #f92672; } .key { color: #f8f8f2; font-weight: bold; }

        /* =========================================================
           9. MOBILE RESPONSIVE
           ========================================================= */
/* --- PERBAIKAN BUG BOX PUTIH SELECT2 (DARK MODE) --- */
        .select2-container--default.select2-container--disabled .select2-selection--single { background-color: var(--input-disabled) !important; border-color: var(--border) !important; cursor: not-allowed; }
        [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-main) !important; }
        [data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered { color: var(--text-muted) !important; }

        /* --- DESAIN SIDEBAR ULTRA-MODERN --- */
        body { padding: 0 !important; margin: 0; background-color: var(--bg-body); background-image: radial-gradient(at 0% 0%, rgba(109, 40, 217, 0.05) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.05) 0px, transparent 50%); background-attachment: fixed; }
        .app-wrapper { display: flex; width: 100%; height: 100vh; overflow: hidden; }
        .sidebar { 
            width: 280px; 
            background: rgba(255, 255, 255, 0.4); 
            backdrop-filter: blur(20px); 
            -webkit-backdrop-filter: blur(20px); 
            border-right: 1px solid rgba(255, 255, 255, 0.3); 
            padding: 1.5rem 1rem; 
            display: flex; 
            flex-direction: column; 
            flex-shrink: 0; 
            z-index: 100; 
            transition: var(--transition-smooth); 
            box-shadow: 5px 0 30px rgba(0,0,0,0.02);
            /* --- INI KUNCI AGAR BISA DI SCROLL --- */
            overflow-y: auto; 
            height: 100vh;
        }
        
        /* Opsional: Mempercantik scrollbar khusus untuk sidebar */
        .sidebar::-webkit-scrollbar { width: 6px; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(82, 22, 176, 0.2); border-radius: 10px; }
        .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(82, 22, 176, 0.5); }
        [data-theme="dark"] .sidebar { background: rgba(24, 24, 27, 0.4); border-right: 1px solid rgba(255, 255, 255, 0.05); }
        .sidebar-brand { font-size: 1.4rem; font-weight: 900; background: linear-gradient(135deg, var(--brand-purple), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; gap: 0.75rem; padding: 0 0.5rem 2rem 0.5rem; letter-spacing: -0.5px;}
        
        .nav-item { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.2rem; color: var(--text-main); font-weight: 700; font-size: 0.95rem; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-spring); margin-bottom: 0.4rem; position: relative; overflow: hidden; z-index: 1;}
        .nav-item::before { content: ''; position: absolute; inset: 0; background: var(--brand-purple); opacity: 0; z-index: -1; transition: var(--transition-smooth); transform: scaleX(0); transform-origin: left; border-radius: var(--radius-md); }
        .nav-item:hover { transform: translateX(5px); color: var(--brand-purple); }
        .nav-item:hover::before { opacity: 0.05; transform: scaleX(1); }
        
        .nav-item.active { color: white; box-shadow: 0 10px 20px -5px rgba(109, 40, 217, 0.4); transform: scale(1.02); }
        .nav-item.active::before { opacity: 1; transform: scaleX(1); background: linear-gradient(135deg, var(--brand-purple), var(--primary)); }
        .nav-item.active i { color: white !important; }
        
        .main-content { flex: 1; height: 100vh; overflow-y: auto; padding: 2rem; scroll-behavior: smooth; }
        
        /* [SUPER QUARK MODE] ANIMASI HALAMAN FLUID ENTRANCE */
        .view-section { 
            max-width: 1140px; 
            margin: 0 auto; 
            display: flex; 
            flex-direction: column; 
            gap: 1.5rem; 
            width: 100%; 
            animation: fluidEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; 
            will-change: opacity, filter; /* transform Dihapus Secara Paksa */
        }

        /* Tampilan Card Glassmorphism Kekinian */
        .card { 
            border: 1px solid rgba(255,255,255,0.4) !important; 
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.04) !important; 
            border-radius: 24px !important; 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important; } /* transform translateY dihapus */
        
        [data-theme="dark"] .card { 
            background: rgba(24, 24, 27, 0.8) !important; 
            border: 1px solid rgba(255,255,255,0.05) !important;
            box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important; 
        }
        
        /* --- DESAIN TABEL DATABASE & FILTER --- */
        .filter-toolbar { background: var(--bg-hover); padding: 1.5rem; border-radius: var(--radius-md); border: 2px solid var(--border); margin-bottom: 1.5rem; }
        .filter-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
        .status-sub-tabs { display: flex; gap: 1rem; border-bottom: 2px solid var(--border); padding-bottom: 8px; margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
        .status-sub-tabs::-webkit-scrollbar { display: none; }
        .sub-tab-btn { padding: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 800; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
        .sub-tab-btn:hover { background: var(--bg-card); border-color: var(--border); color: var(--brand-purple); }
        .sub-tab-btn.active { background: var(--brand-purple); color: #ffffff; border-color: var(--brand-purple); box-shadow: 0 4px 10px rgba(82,22,176,0.2); }
        .sub-tab-btn.active i { color: #ffffff !important; }
        
        .table-responsive { width: 100%; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); background-color: var(--bg-card); box-shadow: var(--shadow-card); min-height: 400px; position: relative; z-index: 1; }
        .data-table { width: 100%; border-collapse: collapse; min-width: 100%; font-size: 0.85rem; }
        .data-table th, .data-table td { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; color: var(--text-main); white-space: nowrap; }
        .data-table th { background-color: var(--bg-card); color: var(--text-muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 5; cursor: pointer; border-bottom: 2px solid var(--border); transition: var(--transition-smooth); }
        .data-table th:hover { background-color: var(--input-disabled); color: var(--brand-purple); }
        .data-table tbody tr { transition: var(--transition-smooth); }
        .data-table tbody tr:hover { background-color: var(--primary-light); }
        
        .sticky-action { position: sticky !important; right: -1px !important; z-index: 6 !important; box-shadow: -5px 0 15px rgba(0,0,0,0.08); }
        .data-table th.sticky-action { background-color: #ffffff !important; border-left: 2px solid var(--border) !important; z-index: 7 !important; }
        .data-table td.sticky-action { background-color: #ffffff !important; border-left: 2px solid var(--border) !important; z-index: 6 !important; }
        [data-theme="dark"] .data-table th.sticky-action, [data-theme="dark"] .data-table td.sticky-action { background-color: #18181b !important; }
        .data-table tbody tr:hover td.sticky-action { background-color: var(--input-disabled) !important; }

        .btn-action { width: 36px; height: 36px; display: inline-flex; justify-content: center; align-items: center; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--bg-card); color: var(--text-main); cursor: pointer; transition: var(--transition-smooth); margin: 0 2px;}
        .btn-action:hover { background: var(--brand-purple); color: #ffffff; border-color: var(--brand-purple); transform: translateY(-2px);}
        .btn-action.danger:hover { background: var(--danger); border-color: var(--danger); color: white;}
        .btn-action.success:hover { background: var(--success); border-color: var(--success); color: white;}
        .btn-action.warning:hover { background: var(--warning); border-color: var(--warning); color: white;}

        .pagination-container { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; background: var(--input-disabled); padding: 1rem 1.5rem; border-radius: var(--radius-md); border: 2px solid var(--border); }
        .page-btn { padding: 0.5rem 0.85rem; border: 2px solid var(--border); background: var(--bg-card); border-radius: var(--radius-sm); cursor: pointer; font-weight: 800; color: var(--text-main); transition: var(--transition-smooth);}
        .page-btn:hover:not(:disabled) { border-color: var(--brand-purple); color: var(--brand-purple); }
        .page-btn.active { background: var(--brand-purple); color: #ffffff; border-color: var(--brand-purple); }
        .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .status-badge { padding: 0.4rem 0.85rem; border-radius: 20px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; }        
@media (max-width: 768px) {
        /* 1. RESET ROOT & WRAPPER (DIJAMIN 100% ANTI KEPOTONG) */
        html, body { max-width: 100vw; overflow-x: hidden; padding: 0; margin: 0; }
        .app-wrapper { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 95px; width: 100vw; box-sizing: border-box; overflow-x: hidden; }
        
        /* Main content dibikin fleksibel tapi mentok di batas layar */
        .main-content { 
            flex: 1; 
            width: 100%; 
            max-width: 100vw; 
            padding: 1rem 0.5rem; 
            overflow-y: auto !important; 
            overflow-x: hidden; 
            box-sizing: border-box; 
            -webkit-overflow-scrolling: touch; 
        }

        /* 2. BOTTOM NAVIGATION (NATIVE APP FEEL) */
        .sidebar { 
            position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 80px; 
            background: var(--glass-bg, rgba(255,255,255,0.9)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid var(--glass-border, rgba(0,0,0,0.1)); border-radius: 24px 24px 0 0; z-index: 9999; 
            display: flex; align-items: center; padding: 0; box-shadow: 0 -5px 25px rgba(0,0,0,0.08);
        }
        .sidebar-brand { display: none; }
        .nav-menu { display: flex; flex-direction: row; overflow-x: auto; width: 100%; gap: 8px; padding: 0 15px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .nav-menu::-webkit-scrollbar { display: none; }
        .nav-menu > div[style*="font-size: 0.75rem"] { display: none !important; }
        .nav-item { flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; padding: 8px 12px; font-size: 0.65rem; min-width: 70px; text-align: center; gap: 6px; border-radius: 16px; margin: 0; }
        .nav-item i { margin: 0; font-size: 1.3rem; }

        /* 3. KARTU, FORM & FILTER (FULL WIDTH & RAPI) */
        .card { padding: 1rem; border-radius: 16px !important; margin-bottom: 1.2rem; width: 100%; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(0,0,0,0.05); }
        .form-row-3, .form-row-2, .form-row-2.full { display: flex; flex-direction: column; gap: 1rem; width: 100%; }
        .search-wrapper { flex-direction: column; width: 100%; }
        .filter-toolbar { padding: 1rem 0.5rem; }
        
        /* Perbaikan Tombol Filter & Search agar tidak kepotong */
        .filter-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
        .filter-row > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: stretch; width: 100%; }
        .filter-row select, .filter-row input { width: 100% !important; flex: 1 1 100% !important; margin: 0; }
        
        /* Tombol menyesuaikan isi, kalau di dalam grup filter dia memanjang */
        .btn { width: 100%; justify-content: center; padding: 0.8rem 1rem; flex: 1 1 auto; white-space: normal; height: auto; min-height: 44px; }
        .filter-row .btn { width: auto; flex: 1 1 calc(50% - 4px); } /* Tombol filter dibagi 2 sejajar kalau muat */

        /* 4. FIX MUTLAK TABEL (SCROLL HORIZONTAL PERFECT & LEPAS STICKY) */
        .table-responsive { 
            display: block !important; 
            width: 100% !important; /* Jangan pakai calc agar tidak luber keluar layar */
            max-width: 100vw !important;
            margin: 0; 
            padding: 0 0 15px 0;
            overflow-x: auto !important; 
            -webkit-overflow-scrolling: touch; 
            border-radius: var(--radius-md) !important;
            box-sizing: border-box;
            border: 1px solid var(--border);
        }
        /* Pastikan tabel mengambil minimal 100% dari container, tapi bisa melar */
        .data-table { width: max-content !important; min-width: 100% !important; border-collapse: collapse; }
        .data-table th, .data-table td { white-space: nowrap !important; padding: 0.8rem !important; font-size: 0.8rem !important; }
        
        /* Lepas efek Sticky di HP agar tidak bug/menutupi konten */
        .sticky-action { position: static !important; box-shadow: none !important; border-left: none !important; transform: none !important; }
        .data-table th.sticky-action, .data-table td.sticky-action { z-index: 1 !important; background-color: inherit !important; }

        /* 5. FIX POPUP SWEETALERT (TIDAK MELUBER) */
        .swal2-container { padding: 10px !important; align-items: center !important; }
        .swal2-popup { width: 100% !important; max-width: 100% !important; padding: 1.5rem 1rem !important; max-height: 90vh !important; overflow-y: auto !important; border-radius: 28px !important; margin: 0 !important; box-sizing: border-box; }
        .swal2-html-container { text-align: left !important; font-size: 0.9rem !important; overflow-x: hidden; padding: 0 !important; }
        .swal2-actions { flex-direction: column-reverse; width: 100%; gap: 10px; margin-top: 20px !important; }
        .swal2-confirm, .swal2-cancel { width: 100%; margin: 0 !important; padding: 12px !important; border-radius: 14px !important; }

        /* 6. ELEMEN LAINNYA (PETA, TABS, PAGINATION, DASHBOARD GRIDS) */
        #map, #mapY { height: 300px; border-radius: 12px; z-index: 1; width: 100%; }
        .map-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
        
        .pagination-container { flex-direction: column; gap: 1rem; text-align: center; padding: 1rem; }
        
        /* Tabs bisa discroll kanan-kiri dengan smooth */
        .status-sub-tabs, .konstruksi-tabs { display: flex; flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; scrollbar-width: none; gap: 8px; width: 100%; -webkit-overflow-scrolling: touch; }
        .status-sub-tabs::-webkit-scrollbar, .konstruksi-tabs::-webkit-scrollbar { display: none; }
        .sub-tab-btn, .k-tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; }
        
        .recenter-btn { bottom: 15px; left: 15px; padding: 0.6rem 1rem; border-radius: 14px; font-size: 0.8rem; }
        
        /* Paksa semua Grid Dashboard jadi 1 kolom ke bawah di HP */
        div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 1rem !important; }
        .metrix-stat-card { width: 100%; box-sizing: border-box; }
        
        /* Fix kolom aksi di tabel biar tombolnya numpuk rapi kalau banyak */
        .btn-action { margin: 2px; }
        .data-table td > div[style*="display:flex"] { flex-wrap: wrap; gap: 4px; justify-content: center; }
    }

/* SISTEM METRIX ENTERPRISE (AUTO-GENERATED BY JS) */    

/* --- SAAS MONITORING DASHBOARD STYLES --- */
        .metrix-stat-card { padding: 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;}
        .metrix-stat-card .stat-header { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2;}
        .metrix-stat-card .stat-value { font-size: 2.8rem; font-weight: 900; margin: 5px 0; line-height: 1; z-index: 2;}
        .metrix-stat-card .stat-desc { font-size: 0.8rem; font-weight: 600; z-index: 2; display: flex; align-items: center; gap: 5px; opacity: 0.9;}
        .metrix-stat-card .stat-icon { position: absolute; right: -10px; bottom: -15px; font-size: 5rem; opacity: 0.1; z-index: 1; transform: rotate(-15deg); transition: var(--transition-smooth);}
        .metrix-stat-card:hover .stat-icon { transform: rotate(0deg) scale(1.1); opacity: 0.2; }

/* --- UI/UX KONSTRUKSI & PROGRESS LAYER --- */
        .konstruksi-tabs { display: flex; gap: 1rem; border-bottom: 2px solid var(--border); padding-bottom: 0px; margin-bottom: 1.5rem; overflow-x: auto; }
        .k-tab-btn { padding: 1rem 1.5rem; font-size: 0.95rem; font-weight: 800; color: var(--text-muted); background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: var(--transition-smooth); white-space: nowrap; }
        .k-tab-btn:hover { color: var(--brand-purple); }
        .k-tab-btn.active { color: var(--brand-purple); border-bottom-color: var(--brand-purple); }

        .room-card { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; transition: var(--transition-smooth); position: relative; overflow: hidden; }
        .room-card:hover { border-color: var(--primary); box-shadow: 0 10px 25px rgba(37,99,235,0.1); transform: translateY(-3px); }
        .room-card .room-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--border); padding-bottom: 10px; margin-bottom: 15px; }

        .layer-container { display: flex; flex-direction: column; gap: 1.5rem; position: relative; padding-left: 30px; border-left: 3px solid var(--input-disabled); margin-top: 1rem; }
        .layer-item { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 1.5rem; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .layer-item:hover { border-color: var(--brand-purple); box-shadow: var(--shadow-float); }
        .layer-dot { position: absolute; left: -43.5px; top: 20px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card); border: 4px solid var(--border); display: flex; align-items: center; justify-content: center; z-index: 2; transition: 0.3s; }
        .layer-item.active .layer-dot { border-color: var(--brand-purple); background: var(--brand-purple); box-shadow: 0 0 0 5px rgba(82,22,176,0.2); }
        .layer-item.active .layer-dot::after { content: ''; width: 8px; height: 8px; background: white; border-radius: 50%; }

        .progress-bar-modern { width: 100%; height: 12px; background: var(--input-disabled); border-radius: 10px; overflow: hidden; margin-top: 15px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
        .progress-fill { height: 100%; border-radius: 10px; transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
        .progress-fill::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); animation: shimmer 2s infinite; }
        @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

        .alert-h7 { animation: pulseRed 1.5s infinite; border-color: var(--danger) !important; background: var(--danger-bg) !important; }
        @keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

/* --- UI LAYER PROGRESS KEKINIAN (QUARK MODE) --- */
        /* [QUARK MODE] SLIM PROGRESS LAYER BUTTON */
.layer-btn-modern {
    background: var(--input-disabled); border: 1.2px solid var(--border); border-radius: 6px;
    padding: 2px 7px; margin-bottom: 2px; cursor: pointer; transition: all 0.3s;
    display: flex; flex-direction: column; gap: 1px; position: relative; overflow: hidden;
}
.layer-btn-modern .l-title { font-size: 0.7rem !important; font-weight: 800; }
.layer-btn-modern .l-bar-bg { height: 4px !important; margin-top: 1px; background: rgba(0,0,0,0.1); }
        .layer-btn-modern:hover {
            border-color: var(--brand-purple); transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(82,22,176,0.15); background: var(--bg-card);
        }
        .layer-btn-modern .l-title { font-size: 0.75rem; font-weight: 800; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; }
        .layer-btn-modern .l-bar-bg { width: 100%; height: 6px; background: rgba(0,0,0,0.06); border-radius: 4px; overflow: hidden; }
        .layer-btn-modern .l-bar-fill { height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
        .layer-btn-modern .l-bar-fill::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); animation: shimmer 2s infinite; }
        
        .modal-chk-list { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; max-height: 300px; overflow-y: auto; padding-right: 5px; }
        .m-chk-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: 0.3s; }
        .m-chk-item.done { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.3); }
        .m-chk-item.done .icon { color: var(--success); }
        .m-chk-item.pending { background: var(--input-disabled); opacity: 0.8; border-style: dashed; }
        .m-chk-item.pending .icon { color: var(--text-muted); opacity: 0.5; }

/* --- UI CHECKLIST KONSTRUKSI (QUARK MODE) --- */
        .checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border); }
        .chk-item { display: flex; align-items: flex-start; gap: 12px; background: var(--bg-body); padding: 12px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: hidden; }
        .chk-item:hover { border-color: var(--brand-purple); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(82,22,176,0.08); }
        
        /* Modern Checkbox Hidden Input */
        .chk-item input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        
        /* Custom Checkmark Box */
        .chk-box { min-width: 22px; height: 22px; background-color: var(--input-bg); border: 2px solid #cbd5e1; border-radius: 6px; display: flex; justify-content: center; align-items: center; transition: 0.3s; margin-top: 2px; }
        [data-theme="dark"] .chk-box { border-color: #475569; }
        .chk-box i { color: white; font-size: 12px; opacity: 0; transform: scale(0.5); transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        
        /* State Ceklis Aktif */
        .chk-item input:checked ~ .chk-box { background-color: var(--success); border-color: var(--success); box-shadow: 0 0 0 4px rgba(16,185,129,0.2); }
        .chk-item input:checked ~ .chk-box i { opacity: 1; transform: scale(1); }
        
        /* Text Coret Animasi */
        .chk-text-wrapper { display: flex; flex-direction: column; }
        .chk-title { font-weight: 800; color: var(--text-main); font-size: 0.85rem; transition: 0.3s; position: relative; display: inline-block; width: fit-content; }
        .chk-title::after { content: ''; position: absolute; left: 0; top: 50%; height: 2px; width: 0%; background: var(--text-muted); transition: width 0.3s ease; }
        .chk-item input:checked ~ .chk-text-wrapper .chk-title { color: var(--text-muted); }
        .chk-item input:checked ~ .chk-text-wrapper .chk-title::after { width: 100%; }
        
        .chk-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; transition: 0.3s; }
        .chk-item input:checked ~ .chk-text-wrapper .chk-desc { opacity: 0.6; }
        .chk-item.checked-bg { background-color: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.3); }

/* [SUPER QUARK MODE] KEKINIAN GEO-PULSE MARKERS & DASHBOARD GLASS */
        .geo-pulse-marker {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--brand-purple);
            box-shadow: 0 0 15px var(--brand-purple);
            animation: mapPulse 2s infinite;
            border: 2px solid white;
        }
        .geo-pulse-marker.status-aktif { background: #10b981; box-shadow: 0 0 15px #10b981; }
        .geo-pulse-marker.status-pending { background: #f59e0b; box-shadow: 0 0 15px #f59e0b; }
        
        @keyframes mapPulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); }
            70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
        }

        /* Skeleton Loading untuk Dashboard agar tidak blank saat fetch data */
        .skeleton-loader {
            background: linear-gradient(90deg, var(--bg-card) 25%, var(--border) 50%, var(--bg-card) 75%);
            background-size: 200% 100%;
            animation: skeletonLoading 1.5s infinite;
            border-radius: 8px;
        }
        @keyframes skeletonLoading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

/* [QUARK MODE] WARNING & DANGER LOGIC ANIMATION */
        .layer-item { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .layer-item.alert-warning {
            border-color: rgba(245, 158, 11, 0.6) !important;
            background: rgba(245, 158, 11, 0.08) !important;
            box-shadow: 0 0 20px rgba(245, 158, 11, 0.2) !important;
        }
        .layer-item.alert-danger {
            border-color: rgba(239, 68, 68, 0.6) !important;
            background: rgba(239, 68, 68, 0.08) !important;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.2) !important;
            animation: shakeError 0.5s ease-in-out;
        }

/* [SUPER QUARK MODE] KEKINIAN FORM VALIDATION & SHAKE EFFECT */
        .input-error {
            border-color: #ef4444 !important;
            box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
            animation: formShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }
        
        @keyframes formShake {
            10%, 90% { transform: translate3d(-2px, 0, 0); }
            20%, 80% { transform: translate3d(3px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-5px, 0, 0); }
            40%, 60% { transform: translate3d(5px, 0, 0); }
        }

/* =======================================================
          /* =======================================================
           [SUPER QUARK] ENTERPRISE RBAC (ROLE-BASED ACCESS CONTROL)
           ======================================================= */
        /* 1. MENGUNCI TOTAL AKSES MUTASI UNTUK ROLE VIEWER (Kecuali Header/Logout) */
        body[data-role="Viewer"] .view-section .btn-action.warning, /* Kunci Tombol Edit di Tabel */
        body[data-role="Viewer"] .view-section .btn-action.danger, /* Kunci Tombol Hapus di Tabel */
        body[data-role="Viewer"] .view-section .btn-action.success /* Kunci Tombol Aktifkan di Tabel */ {
            display: none !important;
        }

        /* 2. Sembunyikan Tombol Tambah, Import, Export & Template di Semua Database */
        body[data-role="Viewer"] button[onclick*="nav-item"][onclick*="click()"],
        body[data-role="Viewer"] button[onclick*="fileImport"],
        body[data-role="Viewer"] button[onclick*="downloadTemplate"] {
            display: none !important;
        }

        /* 3. Amankan Tab Progress Pembangunan untuk Viewer */
        body[data-role="Viewer"] button[onclick*="tab-input-proyek"], /* Hilangkan Tab Input Proyek */
        body[data-role="Viewer"] button[onclick*="kelolaProyekPembangunan"], /* Hilangkan Tombol Masuk ke Mode Input */
        body[data-role="Viewer"] button[onclick*="ubahStatusProyek"] /* Hilangkan Tombol Ubah Status Layer */ {
            display: none !important;
        }

        /* Glassmorphism Input Focus */
        .form-control:focus, .select2-container--default.select2-container--focus .select2-selection--single {
            background: linear-gradient(145deg, var(--bg-card), rgba(139, 92, 246, 0.02)) !important;
            border-color: var(--brand-purple) !important;
            box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15) !important;
            transform: translateY(-1px);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

/* Modern Webkit Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(82, 22, 176, 0.3); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(82, 22, 176, 0.8); }

        /* Merombak Select2 Menjadi Kekinian & Transparan */
        .select2-container--default .select2-selection--single,
        .select2-container--default .select2-selection--multiple {
            background-color: var(--glass-bg, rgba(255,255,255,0.1)) !important;
            border: 1px solid var(--glass-border, rgba(255,255,255,0.2)) !important;
            border-radius: 12px !important;
            height: 42px !important;
            display: flex !important;
            align-items: center !important;
            backdrop-filter: blur(10px) !important;
            color: var(--text-main, #333) !important;
            transition: all 0.3s ease !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--text-main, #333) !important;
            font-weight: 500 !important;
        }
        .select2-dropdown {
            background-color: var(--bg-card, #ffffff) !important;
            border: 1px solid var(--glass-border, rgba(255,255,255,0.2)) !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
            backdrop-filter: blur(20px) !important;
        }
        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: rgba(82, 22, 176, 0.7) !important;
            color: white !important;
            border-radius: 6px;
            margin: 2px 4px;
        }

@keyframes spin { to { transform: rotate(360deg); } }

/* STYLE VALIDASI & TOMBOL KEKINIAN (QUARK MODE) */
                    .btn-super-save {
                        position: relative;
                        background: linear-gradient(135deg, #10b981, #059669);
                        color: white;
                        border: none;
                        padding: 1rem 2.5rem;
                        font-size: 1.15rem;
                        font-weight: 900;
                        border-radius: 50px;
                        cursor: pointer;
                        overflow: hidden;
                        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                        box-shadow: 0 10px 20px rgba(16,185,129,0.3), inset 0 -3px 0 rgba(0,0,0,0.1);
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                    }
                    .btn-super-save:hover {
                        transform: translateY(-4px) scale(1.02);
                        box-shadow: 0 15px 30px rgba(16,185,129,0.5), inset 0 -3px 0 rgba(0,0,0,0.1);
                    }
                    .btn-super-save:active {
                        transform: translateY(2px);
                        box-shadow: 0 5px 10px rgba(16,185,129,0.4);
                    }
                    .btn-super-save .btn-glow {
                        position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
                        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
                        transform: scale(0); transition: transform 0.5s;
                    }
                    .btn-super-save:hover .btn-glow { transform: scale(1); animation: pulseGlow 2s infinite; }
                    
                    @keyframes pulseGlow { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
                    @keyframes shakeError {
                        0%, 100% { transform: translateX(0); }
                        25% { transform: translateX(-6px) rotate(-1deg); }
                        50% { transform: translateX(6px) rotate(1deg); }
                        75% { transform: translateX(-6px) rotate(-1deg); }
                    }
                    
                    /* CLASS UNTUK INPUT YANG KOSONG */
                    .field-error-glow {
                        border: 2px solid #ef4444 !important;
                        background-color: #fef2f2 !important;
                        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15) !important;
                        animation: shakeError 0.4s ease-in-out;
                        transition: all 0.2s ease;
                    }
                    /* Untuk menembus UI Select2 */
                    .field-error-glow .select2-selection {
                        border: 2px solid #ef4444 !important;
                        background-color: #fef2f2 !important;
                    }

/* CSS History Log Drawer Kekinian */
    .log-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 100000; opacity: 0; visibility: hidden; transition: var(--transition-smooth); }
    .log-drawer-overlay.show { opacity: 1; visibility: visible; }
    
    .log-drawer { position: fixed; top: 0; right: -450px; width: 450px; max-width: 100%; height: 100vh; background: var(--bg-card); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-left: 1px solid var(--border); box-shadow: -10px 0 40px rgba(0,0,0,0.1); z-index: 100001; transition: right 0.5s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
    .log-drawer.open { right: 0; }
    
    .log-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, var(--bg-body), var(--bg-card)); }
    .log-title { font-size: 1.2rem; font-weight: 900; color: var(--brand-purple); display: flex; align-items: center; gap: 10px; }
    .log-close-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; transition: 0.3s; }
    .log-close-btn:hover { color: var(--danger); transform: scale(1.1) rotate(90deg); }
    
    .log-body { flex: 1; overflow-y: auto; padding: 1.5rem; background: var(--bg-body); }
    
    /* Timeline Log Modern */
    .log-timeline { position: relative; border-left: 2px solid var(--border); padding-left: 25px; margin-left: 15px; }
    .log-item { position: relative; margin-bottom: 25px; animation: fadeInUpModern 0.4s ease forwards; opacity: 0; }
    .log-icon { position: absolute; left: -42px; top: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 900; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 3px solid var(--bg-card); z-index: 2; }
    
    /* Warna Aksi */
    .log-icon.CREATE { background: var(--success); box-shadow: 0 0 10px var(--success); }
    .log-icon.UPDATE { background: #f59e0b; box-shadow: 0 0 10px #f59e0b; }
    .log-icon.DELETE { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
    .log-icon.SYSTEM { background: var(--brand-purple); box-shadow: 0 0 10px var(--brand-purple); }
    
    .log-content { background: var(--bg-card); padding: 12px 15px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: 0.3s; position: relative; }
    .log-content:hover { border-color: var(--brand-purple); transform: translateX(5px); box-shadow: var(--shadow-card); }
    .log-content::before { content: ''; position: absolute; top: 12px; left: -6px; width: 10px; height: 10px; background: var(--bg-card); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: rotate(45deg); }
    
    .log-time { font-size: 0.7rem; color: var(--text-muted); font-family: monospace; font-weight: 600; margin-bottom: 5px; display: flex; justify-content: space-between; }
    .log-entity { font-weight: 900; color: var(--text-main); font-size: 0.95rem; margin-bottom: 2px; }
    .log-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
    .log-detail-btn { font-size: 0.7rem; font-weight: 800; color: var(--primary); cursor: pointer; display: inline-block; margin-top: 8px; border-bottom: 1px dashed var(--primary); }
    .log-detail-box { display: none; background: var(--input-disabled); padding: 10px; border-radius: 8px; font-family: monospace; font-size: 0.75rem; color: var(--text-main); margin-top: 8px; border: 1px solid var(--border); max-height: 150px; overflow-y: auto; white-space: pre-wrap; }
/* [QUARK MODE] Diff Engine CSS - UI Rincian Perubahan Ke Akar-akarnya */
    .log-diff-container { display: flex; flex-direction: column; gap: 8px; margin-top: 5px; }
    .diff-row { display: flex; flex-direction: column; background: var(--bg-body); border: 1px solid var(--border); border-radius: 8px; padding: 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
    .diff-field { font-size: 0.75rem; font-weight: 900; color: var(--brand-purple); text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; border-bottom: 1px dashed var(--border); padding-bottom: 4px; }
    .diff-values { display: flex; align-items: center; gap: 10px; font-family: monospace; font-size: 0.85rem; flex-wrap: wrap; }
    .diff-old { color: var(--danger); text-decoration: line-through; background: var(--danger-bg); padding: 3px 8px; border-radius: 6px; font-weight: 600; border: 1px solid rgba(239, 68, 68, 0.2); }
    .diff-icon { color: var(--text-muted); font-size: 0.8rem; }
    .diff-new { color: var(--success); font-weight: 800; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); padding: 3px 8px; border-radius: 6px; box-shadow: 0 2px 5px rgba(16,185,129,0.1); }

.metrix-card { background: var(--bg-body); padding: 1.2rem; border-radius: var(--radius-lg); margin-bottom: 1.2rem; border: 1px solid var(--border); transition: var(--transition-smooth); }
        .metrix-card:hover { border-color: var(--brand-purple); box-shadow: 0 5px 15px rgba(82,22,176,0.05); }
        .metrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 15px; }
        .metrix-item { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); transition: 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
        .metrix-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-color: #cbd5e1; }
        [data-theme="dark"] .metrix-item:hover { border-color: #475569; }
        
        /* Modern iOS Style Toggle Switch */
        .metrix-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
        .metrix-switch input { opacity: 0; width: 0; height: 0; }
        .metrix-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .3s; border-radius: 24px; }
        .metrix-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        input:checked + .metrix-slider { background-color: var(--success); }
        input:checked + .metrix-slider:before { transform: translateX(20px); }
/* DESAIN BADGE COUNT KEKINIAN */
        .badge-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(100, 116, 139, 0.2);
            color: inherit;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 900;
            margin-left: 6px;
            transition: all 0.3s ease;
        }
        .active .badge-count, .btn[style*="background: var(--brand-purple)"] .badge-count, .btn[style*="background: var(--danger)"] .badge-count, .btn[style*="background: var(--success)"] .badge-count {
            background: rgba(255, 255, 255, 0.25);
            color: inherit;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
        }