/* ═══════════════════════════════════════
   KEEN PRO — Shared Theme  (keen.css)
   ═══════════════════════════════════════ */

/* ── Common ── */
html, body { font-family: 'Cairo', sans-serif; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { display: none; }

/* ── Dark mode (default) ── */
html.dark, html.dark body { background: #0a0118 !important; color: #f1f5f9 !important; }

html.dark .bg-scene {
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(124,58,237,0.32) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(109,40,217,0.22) 0%, transparent 60%) !important;
}
html.dark .dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px) !important;
}
html.dark .orb-1 { background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 70%) !important; }
html.dark .orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%) !important; }

html.dark .glass-panel {
    background: rgba(15,5,40,0.65) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(124,58,237,0.15) !important;
}
html.dark .glass-header { background: rgba(10,1,24,0.82) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
html.dark .glass-nav    { background: rgba(10,1,24,0.85) !important; border-top:    1px solid rgba(255,255,255,0.08) !important; }

/* ── Light mode ── */
html.light {
    background: linear-gradient(135deg, #f3e8ff 0%, #fefce8 55%, #ede9fe 100%) !important;
    min-height: 100vh;
}
html.light body { background: transparent !important; color: #1e1b4b !important; }

html.light .bg-scene {
    background:
        radial-gradient(ellipse 80% 50% at 15% -5%, rgba(124,58,237,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 70% 45% at 85% 105%, rgba(234,179,8,0.14) 0%, transparent 55%) !important;
}
html.light .dot-grid {
    background-image: radial-gradient(circle, rgba(124,58,237,0.1) 1px, transparent 1px) !important;
}
html.light .orb-1 { background: radial-gradient(circle, rgba(124,58,237,0.14), transparent 70%) !important; }
html.light .orb-2 { background: radial-gradient(circle, rgba(234,179,8,0.2),  transparent 70%) !important; }

html.light .glass-panel {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(124,58,237,0.18) !important;
    color: #1e1b4b !important;
}
html.light .glass-header {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(124,58,237,0.12) !important;
}
html.light .glass-nav {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(124,58,237,0.12) !important;
}

/* Base text — covers html element too */
html.light { color: #1e1b4b !important; }

/* Text — doubled specificity with `body` to beat page-inline !important rules */
html.light .text-slate-800, html.light .text-slate-900,
html.light .text-slate-700, html.light .text-secondary,
html.light body .text-slate-800, html.light body .text-slate-900,
html.light body .text-slate-700, html.light body .text-secondary { color: #1e1b4b !important; }

html.light .text-slate-600,
html.light body .text-slate-600 { color: rgba(30,27,75,0.75) !important; }

html.light .text-slate-500, html.light .text-slate-400,
html.light body .text-slate-500, html.light body .text-slate-400 { color: rgba(30,27,75,0.62) !important; }

/* Backgrounds */
html.light .bg-white, html.light .bg-slate-50,
html.light .bg-slate-100, html.light .bg-slate-200 { background: rgba(255,255,255,0.55) !important; }
html.light .bg-white\/60 { background: rgba(255,255,255,0.6) !important; }

/* Borders */
html.light .border-slate-200, html.light .border-slate-300 { border-color: rgba(124,58,237,0.14) !important; }
html.light .dark\:border-slate-700, html.light .dark\:border-slate-800 { border-color: rgba(124,58,237,0.14) !important; }
html.light .divide-slate-200 > * + *, html.light .dark\:divide-slate-700 > * + * { border-color: rgba(124,58,237,0.1) !important; }

/* Dark-specific overrides in light mode */
html.light .dark\:bg-slate-800, html.light .dark\:bg-slate-900 { background: rgba(124,58,237,0.07) !important; }
html.light .dark\:text-slate-400 { color: rgba(30,27,75,0.5) !important; }

/* Inputs & selects */
html.light input:not([type=range]):not([type=checkbox]):not([type=radio]),
html.light select, html.light textarea {
    color: #1e1b4b !important;
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(124,58,237,0.2) !important;
}
html.light input::placeholder, html.light textarea::placeholder { color: rgba(30,27,75,0.38) !important; }
html.light select option { background: #f3e8ff; color: #1e1b4b; }

/* Buttons with dark bg */
html.light button.dark\:bg-slate-800 { background: rgba(124,58,237,0.08) !important; }

/* Sidebar/menu in light mode */
html.light #side-menu > div:last-child {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(32px) !important;
    border-left: 1px solid rgba(124,58,237,0.15) !important;
}

/* Popup/modal backdrops */
html.light .leaflet-popup-content-wrapper {
    background: rgba(255,255,255,0.95) !important;
    color: #1e1b4b !important;
    border: 1px solid rgba(124,58,237,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════
   Light mode — override hardcoded white INLINE text colors
   Uses [style^=] (first property) + [style*=";color:"] (later property)
   These selectors safely ignore background-color / border-color
   because those prefixes break the ";color:" substring match
   ═══════════════════════════════════════════════════════════ */

/* ── #f1f5f9 (main white text) → dark ── */
html.light [style^="color:#f1f5f9"],
html.light [style*=";color:#f1f5f9"],
html.light [style*="; color:#f1f5f9"],
html.light [style^="color: #f1f5f9"],
html.light [style*="; color: #f1f5f9"] { color: #1e1b4b !important; }

/* ── rgba(255,255,255,0.6+) → readable dark ── */
html.light [style^="color:rgba(255,255,255,0.9"],
html.light [style*=";color:rgba(255,255,255,0.9"],
html.light [style*="; color:rgba(255,255,255,0.9"],
html.light [style^="color:rgba(255,255,255,0.8"],
html.light [style*=";color:rgba(255,255,255,0.8"],
html.light [style*="; color:rgba(255,255,255,0.8"],
html.light [style^="color:rgba(255,255,255,0.75"],
html.light [style*=";color:rgba(255,255,255,0.75"],
html.light [style*="; color:rgba(255,255,255,0.75"],
html.light [style^="color:rgba(255,255,255,0.7"],
html.light [style*=";color:rgba(255,255,255,0.7"],
html.light [style*="; color:rgba(255,255,255,0.7"],
html.light [style^="color:rgba(255,255,255,0.65"],
html.light [style*=";color:rgba(255,255,255,0.65"],
html.light [style*="; color:rgba(255,255,255,0.65"],
html.light [style^="color:rgba(255,255,255,0.6"],
html.light [style*=";color:rgba(255,255,255,0.6"],
html.light [style*="; color:rgba(255,255,255,0.6"] { color: rgba(30,27,75,0.85) !important; }

/* ── rgba(255,255,255,0.4–0.59) → medium-dark ── */
html.light [style^="color:rgba(255,255,255,0.5"],
html.light [style*=";color:rgba(255,255,255,0.5"],
html.light [style*="; color:rgba(255,255,255,0.5"],
html.light [style^="color:rgba(255,255,255,0.45"],
html.light [style*=";color:rgba(255,255,255,0.45"],
html.light [style*="; color:rgba(255,255,255,0.45"],
html.light [style^="color:rgba(255,255,255,0.4"],
html.light [style*=";color:rgba(255,255,255,0.4"],
html.light [style*="; color:rgba(255,255,255,0.4"] { color: rgba(30,27,75,0.6) !important; }

/* ── rgba(255,255,255,0.1–0.39) → muted dark ── */
html.light [style^="color:rgba(255,255,255,0.38"],
html.light [style*=";color:rgba(255,255,255,0.38"],
html.light [style*="; color:rgba(255,255,255,0.38"],
html.light [style^="color:rgba(255,255,255,0.35"],
html.light [style*=";color:rgba(255,255,255,0.35"],
html.light [style*="; color:rgba(255,255,255,0.35"],
html.light [style^="color:rgba(255,255,255,0.3"],
html.light [style*=";color:rgba(255,255,255,0.3"],
html.light [style*="; color:rgba(255,255,255,0.3"],
html.light [style^="color:rgba(255,255,255,0.2"],
html.light [style*=";color:rgba(255,255,255,0.2"],
html.light [style*="; color:rgba(255,255,255,0.2"],
html.light [style^="color:rgba(255,255,255,0.1"],
html.light [style*=";color:rgba(255,255,255,0.1"],
html.light [style*="; color:rgba(255,255,255,0.1"] { color: rgba(30,27,75,0.45) !important; }

/* ── Cards / panels with white backgrounds in dark mode → clean in light ── */
html.light [style*="background:rgba(255,255,255,0.04)"],
html.light [style*="background:rgba(255,255,255,0.05)"],
html.light [style*="background:rgba(255,255,255,0.06)"],
html.light [style*="background:rgba(255,255,255,0.07)"],
html.light [style*="background:rgba(255,255,255,0.08)"],
html.light [style*="background:rgba(255,255,255,0.09)"] {
    background: rgba(255,255,255,0.6) !important;
    border-color: rgba(124,58,237,0.1) !important;
}

/* ── Page/header backgrounds in dark mode ── */
html.light [style*="background:rgba(10,1,24,"],
html.light [style*="background:rgba(10,1,32,"],
html.light [style*="background:rgba(12,3,30,"],
html.light [style*="background:rgba(15,5,40,"],
html.light [style*="background:rgba(8,1,20,"] {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(20px) !important;
}

/* ── Nav bar bottom ── */
html.light nav[style*="background"],
html.light [class*="glass-nav"] {
    background: rgba(255,255,255,0.92) !important;
    border-top: 1px solid rgba(124,58,237,0.12) !important;
}

/* ── Text that is already a themed accent (keep as-is) ── */
html.light [style*="color:#a78bfa"] { color: #6D28D9 !important; }
html.light [style*="color:#c4b5fd"] { color: #5b21b6 !important; }
html.light [style*="color:#34d399"] { color: #059669 !important; }
html.light [style*="color:#6ee7b7"] { color: #059669 !important; }
html.light [style*="color:#fbbf24"] { color: #d97706 !important; }
html.light [style*="color:#fcd34d"] { color: #b45309 !important; }
html.light [style*="color:#60a5fa"] { color: #2563eb !important; }
html.light [style*="color:#7dd3fc"] { color: #0284c7 !important; }
html.light [style*="color:#38bdf8"] { color: #0284c7 !important; }
html.light [style*="color:#f87171"] { color: #dc2626 !important; }
html.light [style*="color:#fca5a5"] { color: #b91c1c !important; }
html.light [style*="color:#fb923c"] { color: #c2410c !important; }
html.light [style*="color:#fdba74"] { color: #c2410c !important; }