/* theme.css - Universal Theme Variables */

:root {
    /* Light Mode (White Mode - Refined) */
    --bg-gradient: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
    --bg-main: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(15, 23, 42, 0.05);
    --glass-shadow: 0 10px 40px -10px rgba(31, 38, 135, 0.05);
    --card-bg: rgba(255, 255, 255, 0.9);
    --card-border: rgba(15, 23, 42, 0.03);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --accent-blue: #3b82f6;
    --accent-emerald: #10b981;
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: rgba(15, 23, 42, 0.12);
    --input-text: #0f172a;
    --select-bg: #ffffff;
    --table-row-bg: rgba(255, 255, 255, 0.6);
    --table-row-border: rgba(15, 23, 42, 0.07);
}

html.dark {
    color-scheme: dark !important;
    /* Night Mode (Pure Black Style) */
    --bg-gradient: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #111111 100%);
    --bg-main: #000000;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --card-bg: rgba(22, 22, 22, 0.7);
    --card-border: rgba(255, 255, 255, 0.05);
    --nav-bg: rgba(0, 0, 0, 0.8);
    --accent-blue: #3b82f6;
    --accent-emerald: #10b981;
    --input-bg: rgba(15, 23, 42, 0.6);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-text: #f8fafc;
    --select-bg: #0f172a;
    --table-row-bg: rgba(255, 255, 255, 0.05);
    --table-row-border: rgba(255, 255, 255, 0.08);
}

body {
    background: var(--bg-gradient);
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}

.glass {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    transition: background 0.3s ease, border 0.3s ease;
}

.glass-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: all 0.3s ease;
}

/* Global Form Input Style */
.form-input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    font-family: inherit;
    transition: all 0.3s ease;
}
.form-input:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* ===== GLOBAL DARK MODE FORM FIXES ===== */

/* Native Select - critical fix for dropdown */
select {
    background-color: var(--select-bg);
    color: var(--input-text);
    border-color: var(--input-border);
    transition: background 0.3s ease, color 0.3s ease;
    color-scheme: inherit;
}

/* Use color-scheme to theme native option list */
html.dark select,
html.dark select * {
    color-scheme: dark !important;
    background-color: #0f172a !important;
    color: #f8fafc !important;
}
html:not(.dark) select,
html:not(.dark) select * {
    color-scheme: light !important;
}

/* Date/Time inputs */
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"] {
    color-scheme: dark;
}

/* Bg-white overrides for dark mode (Tailwind utility classes) */
html.dark .bg-white\/60 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
html.dark .bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
html.dark .bg-white\/30 {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
/* For <details> summary header in crawlrd */
html.dark .bg-white\/30,
html.dark [class*="bg-white/"] {
    --tw-bg-opacity: 0.04;
}

/* Border colors in dark mode */
html.dark .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* CKEditor Dark Mode Fixes */
html.dark .ck-reset_all, 
html.dark .ck.ck-editor__main > .ck-editor__editable {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
html.dark .ck.ck-editor__top .ck-sticky-panel .ck-toolbar {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
html.dark .ck.ck-toolbar .ck-toolbar__items {
    background: transparent !important;
}
html.dark .ck.ck-button {
    color: #f8fafc !important;
    cursor: pointer;
}
html.dark .ck.ck-button:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}
html.dark .ck.ck-button.ck-on {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #a78bfa !important;
}
html.dark .ck.ck-dropdown__panel {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* bg-blob for main hub */
.bg-blob {
    position: fixed; inset: 0; z-index: -1;
    background: var(--bg-gradient);
    transition: background 0.3s ease;
}

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3); border-radius: 10px; }