/* ============================================================
   THEME.CSS — Aurora Mesh & Glass System (Complete Redesign)
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   ROOT DESIGN TOKENS (LIGHT MODE SYSTEM)
   ============================================================ */

:root {
    /* ── Layout & Dimensions ── */
    --sidebar-w: 230px;
    --header-h: 60px;
    --trans: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    /* ── Surface & Mesh Ambient Backgrounds ── */
    --bg: #f8fafc;
    --bg-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.08) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(236, 72, 153, 0.04) 0px, transparent 50%);
    --surface: #ffffff;
    --surface-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
    --surface-glass: rgba(255, 255, 255, 0.82);
    /* ── Borders & Glass Highlights ── */
    --border: #e2e8f0;
    --border-2: #f1f5f9;
    --border-glass: rgba(255, 255, 255, 0.7);
    /* ── Dynamic Elevation & Glows ── */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
    --glow-primary: 0 8px 24px -4px rgba(79, 70, 229, 0.35);
    /* ── Typography Colors ── */
    --text: #0f172a;
    --text-2: #475569;
    --text-3: #94a3b8;
    --choosefile: #0f172a;
    /* ── Core Gradient Palette (Aurora Blend) ── */
    --accent: #6366f1;
    --accent-2: #06b6d4;
    --grad-primary: linear-gradient(135deg, #4f46e5 0%, #6366f1 35%, #0284c7 70%, #06b6d4 100%);
    --grad: var(--grad-primary);
    --grad-hero: linear-gradient(135deg, #4338ca 0%, #6d28d9 35%, #0284c7 70%, #10b981 100%);
    --grad-surface-soft: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    /* ── Status Gradients & Ambient Glows ── */
    --green: #10b981;
    --green-grad: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    --green-glow: 0 4px 14px rgba(16, 185, 129, 0.3);
    --green-l: #d1fae5;
    --orange: #f97316;
    --orange-grad: linear-gradient(135deg, #fb923c 0%, #f97316 50%, #ea580c 100%);
    --orange-glow: 0 4px 14px rgba(249, 115, 22, 0.3);
    --orange-l: #ffedd5;
    --red: #ef4444;
    --red-grad: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    --red-glow: 0 4px 14px rgba(239, 68, 68, 0.3);
    --red-l: #fee2e2;
    --yellow: #f59e0b;
    --yellow-grad: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #d97706 100%);
    --yellow-glow: 0 4px 14px rgba(245, 158, 11, 0.3);
    --yellow-l: #fef3c7;
    /* ── Sidebar Theme ── */
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --sidebar-border: #e2e8f0;
    --sidebar-active-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
    --sidebar-active-color: #4f46e5;
    --sidebar-hover-bg: rgba(241, 245, 249, 0.85);
    /* ── Header System ── */
    --header-bg: #0369a1;
    --header-text: #ffffff;
    --header-grad: linear-gradient(135deg, #0f172a 0%, #0369a1 40%, #06b6d4 75%, #10b981 100%);
    --header-bg-light: #e0f2fe;
    --header-text-dark: #0c4a6e;
    /* ── Table & Form Component Variables ── */
    --table-header-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --table-header-text: #334155;
    --table-header-border: #cbd5e1;
    --accent-color: #4f46e5;
    --accent-light: #e0e7ff;
    --accent-dark: #312e81;
}

/* ============================================================
   DARK MODE SYSTEM (MIDNIGHT AURORA)
   ============================================================ */

[data-theme="dark"] {
    --bg: #070a12;
    --bg-mesh: radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.18) 0px, transparent 50%), radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%), radial-gradient(at 50% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
    --surface: #0f172a;
    --surface-grad: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.88) 100%);
    --surface-glass: rgba(15, 23, 42, 0.8);
    --border: #1e293b;
    --border-2: #334155;
    --border-glass: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.75);
    --glow-primary: 0 8px 32px -4px rgba(99, 102, 241, 0.55);
    --text: #f8fafc;
    --text-2: #94a3b8;
    --text-3: #64748b;
    --choosefile: #f8fafc;
    /* Sidebar Dark Variables */
    --sidebar-bg: linear-gradient(180deg, #090d16 0%, #0f172a 100%);
    --sidebar-border: #1e293b;
    --sidebar-active-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.28) 0%, rgba(6, 182, 212, 0.15) 100%);
    --sidebar-active-color: #818cf8;
    --sidebar-hover-bg: rgba(30, 41, 59, 0.65);
    /* Table Dark Variables */
    --table-header-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --table-header-text: #cbd5e1;
    --table-header-border: #334155;
    /* Header Dark System */
    --header-bg: #0f172a;
    --header-bg-light: #1e293b;
    --header-text: #f8fafc;
    --header-text-dark: #38bdf8;
    --header-grad: linear-gradient(135deg, #020617 0%, #0f172a 40%, #1e1b4b 80%, #0284c7 100%);
}

/* ============================================================
   GLOBAL RESET & INTERACTIVE BASES
   ============================================================ */

body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background var(--trans), color var(--trans);
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--trans);
}

svg {
    display: block;
}

button {
    font-family: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-3);
    }

/* ============================================================
   COMPONENT SYSTEM OVERRIDES
   ============================================================ */

/* Section Headers */
.section-hdr {
    background: var(--table-header-bg) !important;
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

/* Table Headers */
.data-tbl th {
    background: var(--table-header-bg) !important;
    color: var(--header-text-dark) !important;
    border-bottom: 2px solid var(--table-header-border) !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Modal Header System */
.modal-hdr {
    background: var(--header-grad) !important;
    position: relative;
    overflow: hidden;
}

    .modal-hdr::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }

.modal-ttl {
    color: var(--header-text, #ffffff) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    font-weight: 700;
}

.modal-sub {
    color: rgba(255, 255, 255, 0.85) !important;
}

.modal-x {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--header-text, #ffffff) !important;
    backdrop-filter: blur(6px);
    border-radius: var(--radius-sm);
    transition: all var(--trans);
}

    .modal-x:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: scale(1.05);
    }

/* Table Controls Bar */
.tbl-controls {
    background: var(--table-header-bg) !important;
    border-bottom: 1px solid var(--border);
}

/* Page Titles & Headers */
.pg-title,
.al-title,
.dlg-title {
    color: var(--header-text-dark) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Interactive Panel Buttons */
.panel-btn {
    color: var(--header-text-dark) !important;
    background: var(--surface-grad);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--trans);
}

    .panel-btn:hover {
        border-color: var(--accent);
        background: var(--sidebar-active-bg);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

/* ============================================================
   FORM CONTROLS & INPUT SYSTEM
   ============================================================ */

.form-ctrl,
input,
select,
textarea {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 14px;
    transition: border-color var(--trans), box-shadow var(--trans);
}

    .form-ctrl:focus,
    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
        outline: none;
    }

/* ============================================================
   DYNAMIC THEME PRESETS (`data-color`)
   ============================================================ */

/* Blue Theme */
[data-color="blue"] {
    --accent: #2563eb;
    --accent-2: #06b6d4;
    --grad-primary: linear-gradient(135deg, #1d4ed8 0%, #0284c7 50%, #06b6d4 100%);
    --grad: var(--grad-primary);
    --header-grad: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #0284c7 100%);
    --header-text-dark: #1d4ed8;
    --sidebar-active-color: #2563eb;
}

/* Violet Theme */
[data-color="violet"] {
    --accent: #7c3aed;
    --accent-2: #c084fc;
    --grad-primary: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #c084fc 100%);
    --grad: var(--grad-primary);
    --header-grad: linear-gradient(135deg, #4c1d95 0%, #6d28d9 50%, #7c3aed 100%);
    --header-text-dark: #6d28d9;
    --sidebar-active-color: #7c3aed;
}

/* Rose Theme */
[data-color="rose"] {
    --accent: #f43f5e;
    --accent-2: #fb923c;
    --grad-primary: linear-gradient(135deg, #be123c 0%, #f43f5e 50%, #fb923c 100%);
    --grad: var(--grad-primary);
    --header-grad: linear-gradient(135deg, #881337 0%, #e11d48 50%, #f43f5e 100%);
    --header-text-dark: #e11d48;
    --sidebar-active-color: #f43f5e;
}

/* Emerald Theme */
[data-color="emerald"] {
    --accent: #059669;
    --accent-2: #10b981;
    --grad-primary: linear-gradient(135deg, #065f46 0%, #059669 50%, #34d399 100%);
    --grad: var(--grad-primary);
    --header-grad: linear-gradient(135deg, #022c22 0%, #065f46 50%, #10b981 100%);
    --header-text-dark: #059669;
    --sidebar-active-color: #059669;
}

/* Slate Metallic Theme */
[data-color="slate"] {
    --accent: #475569;
    --accent-2: #0f172a;
    --grad-primary: linear-gradient(135deg, #1e293b 0%, #475569 50%, #64748b 100%);
    --grad: var(--grad-primary);
    --header-grad: linear-gradient(135deg, #020617 0%, #0f172a 50%, #334155 100%);
    --header-text-dark: #0f172a;
    --sidebar-active-color: #334155;
}

/* ============================================================
   LAYOUT DENSITY ADJUSTMENTS (`data-density`)
   ============================================================ */

[data-density="compact"] {
    --sidebar-w: 200px;
    --header-h: 50px;
    --radius: 6px;
    --radius-lg: 10px;
}

[data-density="spacious"] {
    --sidebar-w: 260px;
    --header-h: 68px;
    --radius: 14px;
    --radius-lg: 20px;
}