/* =============================================
   GEMILANG VIRTUAL DESK - Custom Stylesheet
   Pengadilan Agama Magelang
   ============================================= */

/* --- Scrollbar --- */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Body --- */
body {
    background-color: #0a0f1c;
    color: #e2e8f0;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- High-tech Background Grid Pattern --- */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image:
        linear-gradient(rgba(42, 59, 92, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42, 59, 92, 0.3) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -2;
    opacity: 0.5;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* --- Glowing Orbs Background --- */
.glow-orb-1 {
    position: fixed; top: -150px; left: -150px;
    width: 500px; height: 500px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 50%; filter: blur(100px);
    z-index: -1; pointer-events: none;
}
.glow-orb-2 {
    position: fixed; bottom: -200px; right: -100px;
    width: 600px; height: 600px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 50%; filter: blur(120px);
    z-index: -1; pointer-events: none;
}

/* --- Glass Panel --- */
.glass-dark {
    background: rgba(21, 30, 50, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* --- View Sections (SPA routing) --- */
.view-section { display: none; }
.view-section.active { display: block; animation: fadeIn 0.4s ease-out; }

/* --- App Container Fade --- */
#app-container { animation: fadeIn 0.4s ease-out; }

/* --- Form Inputs Dark Mode --- */
input, select, textarea {
    background: rgba(10, 15, 28, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    transition: all 0.3s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

/* Warna icon kalender agar terlihat di dark mode */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
    cursor: pointer;
}

/* --- Tab Navigation --- */
.tab-btn { color: #64748b; border-bottom: 2px solid transparent; transition: all 0.3s; }
.tab-btn.active { color: #fff; border-bottom: 2px solid #8b5cf6; text-shadow: 0 0 10px rgba(139,92,246,0.5); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: slideUp 0.4s ease-out; }

/* --- Custom Scrollbar for Modals --- */
.custom-scroll::-webkit-scrollbar { display: block; width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }


/* ==============================================
   LIGHT THEME OVERRIDES
   ============================================== */
body.light-theme {
    background-color: #e2e8f0;
    color: #1e293b;
}
body.light-theme::before { filter: invert(1); opacity: 0.03; }

body.light-theme .glass-dark {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
}

body.light-theme .hover\:text-white:hover { color: #0f172a !important; }
body.light-theme .text-white { color: #0f172a !important; }

/* Teks dalam tombol/badge tetap putih di light mode */
body.light-theme .bg-blue-600, body.light-theme .bg-blue-600 *,
body.light-theme .bg-pink-600, body.light-theme .bg-pink-600 *,
body.light-theme .bg-purple-600, body.light-theme .bg-purple-600 *,
body.light-theme .bg-red-600, body.light-theme .bg-red-600 *,
body.light-theme .bg-gradient-to-br, body.light-theme .bg-gradient-to-br *,
body.light-theme .bg-gradient-to-tr, body.light-theme .bg-gradient-to-tr *,
body.light-theme .bg-gradient-to-r, body.light-theme .bg-gradient-to-r *,
body.light-theme .bg-emerald-600, body.light-theme .bg-emerald-600 * {
    color: #ffffff !important;
}

/* Teks bergradasi tetap transparan */
body.light-theme .text-transparent { color: transparent !important; }

/* Glow hover di light mode */
body.light-theme .hover\:shadow-glow-primary:hover { box-shadow: 0 15px 35px -5px rgba(59, 130, 246, 0.25) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
body.light-theme .hover\:shadow-glow-accent:hover { box-shadow: 0 15px 35px -5px rgba(139, 92, 246, 0.25) !important; border-color: rgba(139, 92, 246, 0.3) !important; }
body.light-theme .hover\:shadow-glow-success:hover { box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.25) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
body.light-theme .hover\:shadow-glow-danger:hover { box-shadow: 0 15px 35px -5px rgba(239, 68, 68, 0.25) !important; border-color: rgba(239, 68, 68, 0.3) !important; }
body.light-theme .hover\:shadow-glow-pink:hover { box-shadow: 0 15px 35px -5px rgba(236, 72, 153, 0.25) !important; border-color: rgba(236, 72, 153, 0.3) !important; }

/* Warna teks di light mode */
body.light-theme .text-gray-400 { color: #475569 !important; }
body.light-theme .text-gray-300 { color: #334155 !important; }
body.light-theme .text-gray-500 { color: #64748b !important; }

/* Warna pastel jadi pekat di light mode */
body.light-theme .text-purple-200, body.light-theme .text-purple-300, body.light-theme .text-purple-400 { color: #6d28d9 !important; }
body.light-theme .text-blue-200, body.light-theme .text-blue-300, body.light-theme .text-blue-400 { color: #1d4ed8 !important; }
body.light-theme .text-pink-200, body.light-theme .text-pink-300, body.light-theme .text-pink-400 { color: #be185d !important; }
body.light-theme .text-emerald-200, body.light-theme .text-emerald-300, body.light-theme .text-emerald-400, body.light-theme .text-emerald-500 { color: #047857 !important; }
body.light-theme .text-green-200, body.light-theme .text-green-300, body.light-theme .text-green-400 { color: #15803d !important; }
body.light-theme .text-red-200, body.light-theme .text-red-300, body.light-theme .text-red-400 { color: #b91c1c !important; }
body.light-theme .text-indigo-200, body.light-theme .text-indigo-300, body.light-theme .text-indigo-400 { color: #3730a3 !important; }
body.light-theme .text-amber-200, body.light-theme .text-amber-300, body.light-theme .text-amber-400 { color: #b45309 !important; }

/* Background panels di light mode */
body.light-theme .bg-desk-bg { background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; }
body.light-theme .bg-desk-panel { background-color: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.05) !important; }
body.light-theme .border-white\/10 { border-color: rgba(0, 0, 0, 0.1) !important; }
body.light-theme .border-white\/5 { border-color: rgba(0, 0, 0, 0.05) !important; }
body.light-theme .border-white\/20 { border-color: rgba(0, 0, 0, 0.15) !important; }

/* Input di light mode */
body.light-theme input, body.light-theme select, body.light-theme textarea { background: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
body.light-theme input:focus, body.light-theme select:focus, body.light-theme textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important; }
body.light-theme .tab-btn.active { color: #8b5cf6 !important; text-shadow: none !important; }
body.light-theme .tab-btn:not(.active) { color: #64748b !important; }
body.light-theme input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0); }

/* Modal overlay di light mode */
body.light-theme #aduan-modal,
body.light-theme #disclaimer-modal,
body.light-theme #curhat-disclaimer-modal { background-color: rgba(15, 23, 42, 0.6); }
body.light-theme #aduan-success-overlay { background-color: rgba(255,255,255,0.95); }

/* Tombol theme toggle di light mode */
body.light-theme #theme-toggle-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #3b82f6 !important;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4) !important;
}

/* ==============================================
   LIGHT THEME: Timeline Riwayat Keluhan
   Teks inline hardcoded warna dark-mode
   dioverride agar terbaca di background terang
   ============================================== */
body.light-theme #track-result-container {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1e293b !important;
}

/* Nama status (font-weight:800, color:#e2e8f0) */
body.light-theme #track-result-container span[style*="color:#e2e8f0"],
body.light-theme #track-result-container div[style*="color:#e2e8f0"] {
    color: #0f172a !important;
}

/* Keterangan teks (color:#94a3b8) */
body.light-theme #track-result-container div[style*="color:#94a3b8"] {
    color: #475569 !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

/* Timestamp / label (color:#475569) */
body.light-theme #track-result-container div[style*="color:#475569"] {
    color: #64748b !important;
}

/* Duration badge */
body.light-theme #track-result-container span[style*="color:#64748b"],
body.light-theme #track-result-container div[style*="color:#64748b"] {
    color: #64748b !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Info card: no tiket, kategori, dll (color:#60a5fa) */
body.light-theme #track-result-container div[style*="color:#60a5fa"] {
    color: #1d4ed8 !important;
}

/* Ticket number mono */
body.light-theme #track-result-container div[style*="color:#60a5fa"][style*="monospace"] {
    color: #1d4ed8 !important;
}

/* Info card bg */
body.light-theme #track-result-container div[style*="rgba(59,130,246,0.05)"] {
    background: rgba(59, 130, 246, 0.05) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

/* Total Langkah (color:#818cf8) */
body.light-theme #track-result-container div[style*="color:#818cf8"] {
    color: #4f46e5 !important;
}

/* Eviden block (link color:#34d399) */
body.light-theme #track-result-container a[style*="color:#34d399"] {
    color: #047857 !important;
}
body.light-theme #track-result-container span[style*="color:#6ee7b7"] {
    color: #047857 !important;
}
body.light-theme #track-result-container div[style*="rgba(16,185,129,0.06)"] {
    background: rgba(16, 185, 129, 0.07) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

/* Icon clock (color:#475569) */
body.light-theme #track-result-container i[style*="color:#475569"] {
    color: #64748b !important;
}

/* Badge SAAT INI tetap hijau */
body.light-theme #track-result-container span[style*="color:#34d399"] {
    color: #047857 !important;
}

/* Garis pemisah timeline */
body.light-theme #track-result-container div[style*="rgba(255,255,255,0.05)"] {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* Duration badge background */
body.light-theme #track-result-container div[style*="rgba(255,255,255,0.04)"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}