/**
 * theme.css - KYM Game Next-Gen Theme System
 * Supports seamless switching between Night (Dark), Day (Light), Sunset (Twilight), and Auto (Time-driven)
 */

/* ========================================================================= */
/* --- 1. Dark Theme (Night Mode - Deep Cyberpunk Navy) --- */
/* ========================================================================= */
:root,
[data-theme="dark"],
:root[data-theme="dark"],
html[data-theme="dark"] {
    --theme-mode: dark;

    /* Base Backgrounds */
    --bg-base: #0a0e17;
    --bg-primary: #0a0e17;
    --bg-surface: #111827;
    --bg-secondary: #0f172a;
    --bg-sidebar: #0a0f1d;
    --bg-navbar: rgba(10, 15, 29, 0.92);
    --bg-card: rgba(18, 25, 44, 0.85);
    --bg-card-solid: #12192c;
    --bg-card-header: rgba(30, 41, 69, 0.5);
    --bg-card-hover: rgba(28, 38, 66, 0.9);
    --bg-input: rgba(15, 23, 42, 0.85);
    --bg-dropdown: #12192c;
    --bg-modal: #10172b;
    --bg-code: #0b1120;
    --bg-table-stripe: rgba(255, 255, 255, 0.02);
    --bg-table-hover: rgba(99, 102, 241, 0.08);

    /* Text Colors */
    --text-main: #f8fafc;
    --text-primary: #f8fafc;
    --text-muted: #94a3b8;
    --text-secondary: #94a3b8;
    --text-sub: #64748b;
    --text-inverse: #0f172a;
    --text-highlight: #818cf8;
    --text-gold: #facc15;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-card: rgba(99, 102, 241, 0.18);
    --border-card-hover: rgba(99, 102, 241, 0.45);
    --border-input: rgba(255, 255, 255, 0.12);

    /* Accents & Gradients */
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-glow: rgba(99, 102, 241, 0.35);
    --accent: #10b981;
    --accent-glow: rgba(16, 185, 129, 0.25);
    --puffer-color: #0ea5e9;
    --accent-secondary: #a855f7;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);

    /* Status Colors */
    --status-active-bg: rgba(16, 185, 129, 0.15);
    --status-active-text: #34d399;
    --status-active-border: rgba(16, 185, 129, 0.3);
    
    --status-stopped-bg: rgba(100, 116, 139, 0.15);
    --status-stopped-text: #94a3b8;
    --status-stopped-border: rgba(100, 116, 139, 0.3);

    --status-warning-bg: rgba(245, 158, 11, 0.15);
    --status-warning-text: #fbbf24;
    --status-warning-border: rgba(245, 158, 11, 0.3);

    --status-danger-bg: rgba(239, 68, 68, 0.15);
    --status-danger-text: #f87171;
    --status-danger-border: rgba(239, 68, 68, 0.3);

    /* Shadows & Overlays */
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
    --card-shadow-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 15px rgba(99, 102, 241, 0.25);
    --modal-backdrop: rgba(4, 7, 14, 0.82);
}

/* ========================================================================= */
/* --- 2. Light Theme (Day Mode - Ultra-Bright Pure White & High-Contrast) --- */
/* ========================================================================= */
[data-theme="light"],
:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"] {
    --theme-mode: light;

    /* Base Backgrounds - Pure White & Crisp Slate */
    --bg-base: #f8fafc;
    --bg-primary: #f8fafc;
    --bg-surface: #ffffff;
    --bg-secondary: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-navbar: rgba(255, 255, 255, 0.98);
    --bg-card: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-card-header: #f1f5f9;
    --bg-card-hover: #f8fafc;
    --bg-input: #ffffff;
    --bg-dropdown: #ffffff;
    --bg-modal: #ffffff;
    --bg-code: #f1f5f9;
    --bg-table-stripe: #f8fafc;
    --bg-table-hover: #eef2ff;

    /* Text Colors - Ultra High-Contrast & Legibility */
    --text-main: #0f172a;
    --text-primary: #0f172a;
    --text-muted: #64748b;
    --text-secondary: #334155;
    --text-sub: #475569;
    --text-inverse: #ffffff;
    --text-highlight: #4338ca;
    --text-gold: #b45309; /* Rich dark amber on light backgrounds */

    /* Borders */
    --border-color: #e2e8f0;
    --border-card: #e2e8f0;
    --border-card-hover: #cbd5e1;
    --border-input: #cbd5e1;

    /* Accents & Gradients */
    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-glow: rgba(79, 70, 229, 0.2);
    --accent: #059669;
    --accent-glow: rgba(5, 150, 105, 0.15);
    --puffer-color: #0284c7;
    --accent-secondary: #9333ea;
    --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

    /* Status Colors - Deep readable text & soft backgrounds */
    --status-active-bg: #ecfdf5;
    --status-active-text: #047857;
    --status-active-border: #a7f3d0;

    --status-stopped-bg: #f1f5f9;
    --status-stopped-text: #475569;
    --status-stopped-border: #cbd5e1;

    --status-warning-bg: #fffbeb;
    --status-warning-text: #b45309;
    --status-warning-border: #fde68a;

    --status-danger-bg: #fef2f2;
    --status-danger-text: #b91c1c;
    --status-danger-border: #fecaca;

    /* Shadows & Overlays */
    --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --card-shadow-hover: 0 12px 28px -4px rgba(0, 0, 0, 0.1), 0 4px 10px -2px rgba(79, 70, 229, 0.15);
    --modal-backdrop: rgba(15, 23, 42, 0.6);
}

/* ========================================================================= */
/* --- 3. Sunset Theme (Twilight / Evening Mode - Warm Amber & Rose Violet) --- */
/* ========================================================================= */
[data-theme="sunset"],
:root[data-theme="sunset"],
html[data-theme="sunset"],
body[data-theme="sunset"] {
    --theme-mode: sunset;

    /* Base Backgrounds - Twilight Gradient Base */
    --bg-base: #140e24;
    --bg-primary: #140e24;
    --bg-surface: #20143a;
    --bg-secondary: #1c1334;
    --bg-sidebar: #17102b;
    --bg-navbar: rgba(20, 14, 36, 0.94);
    --bg-card: rgba(35, 22, 60, 0.85);
    --bg-card-solid: #23163c;
    --bg-card-header: rgba(55, 33, 90, 0.5);
    --bg-card-hover: rgba(48, 30, 80, 0.9);
    --bg-input: rgba(28, 18, 48, 0.9);
    --bg-dropdown: #23163c;
    --bg-modal: #1e1335;
    --bg-code: #130d24;
    --bg-table-stripe: rgba(255, 255, 255, 0.03);
    --bg-table-hover: rgba(249, 115, 22, 0.12);

    /* Text Colors - Warm Twilight */
    --text-main: #fff7ed;
    --text-primary: #fff7ed;
    --text-muted: #cbd5e1;
    --text-secondary: #fed7aa;
    --text-sub: #94a3b8;
    --text-inverse: #140e24;
    --text-highlight: #fb923c;
    --text-gold: #fde047;

    /* Borders - Sunset Glow */
    --border-color: rgba(249, 115, 22, 0.2);
    --border-card: rgba(244, 63, 94, 0.25);
    --border-card-hover: rgba(251, 146, 60, 0.5);
    --border-input: rgba(249, 115, 22, 0.25);

    /* Accents & Gradients */
    --primary: #f97316;
    --primary-hover: #ea580c;
    --primary-glow: rgba(249, 115, 22, 0.4);
    --accent: #ec4899;
    --accent-glow: rgba(236, 72, 153, 0.3);
    --puffer-color: #fb923c;
    --accent-secondary: #a855f7;
    --accent-gradient: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);

    /* Status Colors */
    --status-active-bg: rgba(16, 185, 129, 0.2);
    --status-active-text: #6ee7b7;
    --status-active-border: rgba(16, 185, 129, 0.4);
    
    --status-stopped-bg: rgba(100, 116, 139, 0.2);
    --status-stopped-text: #cbd5e1;
    --status-stopped-border: rgba(100, 116, 139, 0.4);

    --status-warning-bg: rgba(245, 158, 11, 0.2);
    --status-warning-text: #fde047;
    --status-warning-border: rgba(245, 158, 11, 0.4);

    --status-danger-bg: rgba(239, 68, 68, 0.2);
    --status-danger-text: #fca5a5;
    --status-danger-border: rgba(239, 68, 68, 0.4);

    /* Shadows & Overlays */
    --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(249, 115, 22, 0.15);
    --card-shadow-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 25px rgba(249, 115, 22, 0.3);
    --modal-backdrop: rgba(10, 6, 20, 0.85);
}

/* ========================================================================= */
/* --- 4. Light Mode Component Color Overrides (Points, Badges, Plans) --- */
/* ========================================================================= */
[data-theme="light"] .points-balance-card {
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%) !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08) !important;
}

[data-theme="light"] .points-balance-label {
    color: #92400e !important;
    font-weight: 700 !important;
}

[data-theme="light"] .points-balance-value {
    color: #0f172a !important;
}

[data-theme="light"] .points-balance-unit {
    color: #b45309 !important;
}

[data-theme="light"] .point-charge-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

[data-theme="light"] .point-charge-btn:hover {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
}

[data-theme="light"] .point-charge-btn .pts-amount {
    color: #b45309 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .point-charge-btn .pts-price {
    color: #475569 !important;
}

[data-theme="light"] .btn-points-use {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.3) !important;
}

/* Base Body & Layouts */
[data-theme="light"] body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(168, 85, 247, 0.04) 0%, transparent 40%) !important;
}

[data-theme="sunset"] body {
    background-color: #140e24 !important;
    color: #fff7ed !important;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(249, 115, 22, 0.15) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(236, 72, 153, 0.12) 0%, transparent 45%) !important;
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

[data-theme="sunset"] .navbar {
    background: rgba(20, 14, 36, 0.94) !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.25) !important;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.1) !important;
}

[data-theme="light"] .brand { color: #0f172a !important; }
[data-theme="sunset"] .brand { color: #fff7ed !important; }

[data-theme="sunset"] .brand-icon {
    background: linear-gradient(135deg, #f97316, #ec4899) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4) !important;
}

[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="sunset"] .sidebar {
    background: #17102b !important;
    border-right: 1px solid rgba(249, 115, 22, 0.2) !important;
}

[data-theme="light"] .sidebar-link { color: #475569 !important; }
[data-theme="sunset"] .sidebar-link { color: #fed7aa !important; }

[data-theme="light"] .sidebar-link:hover {
    background: #f1f5f9 !important;
    color: #4f46e5 !important;
}

[data-theme="sunset"] .sidebar-link:hover {
    background: rgba(249, 115, 22, 0.12) !important;
    color: #fb923c !important;
}

[data-theme="light"] .sidebar-link.active {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border-left: 3px solid #4f46e5 !important;
    font-weight: 700 !important;
}

[data-theme="sunset"] .sidebar-link.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25), rgba(236, 72, 153, 0.25)) !important;
    color: #ffffff !important;
    border-left: 3px solid #f97316 !important;
    font-weight: 700 !important;
}

[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .panorama-card,
[data-theme="light"] div[style*="background: var(--bg-card)"],
[data-theme="light"] div[style*="background:var(--bg-card)"] {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

[data-theme="sunset"] .card,
[data-theme="sunset"] .stat-card,
[data-theme="sunset"] .panorama-card,
[data-theme="sunset"] div[style*="background: var(--bg-card)"],
[data-theme="sunset"] div[style*="background:var(--bg-card)"] {
    background: rgba(35, 22, 60, 0.9) !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 15px rgba(249, 115, 22, 0.1) !important;
    color: #fff7ed !important;
}

[data-theme="light"] .dashboard-title h1,
[data-theme="light"] .hero-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 { color: #0f172a !important; }

[data-theme="sunset"] .dashboard-title h1,
[data-theme="sunset"] .hero-title,
[data-theme="sunset"] h1,
[data-theme="sunset"] h2,
[data-theme="sunset"] h3,
[data-theme="sunset"] h4 {
    color: #fff7ed !important;
    background: linear-gradient(135deg, #fff7ed 40%, #fed7aa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="light"] p,
[data-theme="light"] .dashboard-title p,
[data-theme="light"] .hero-subtitle { color: #334155 !important; }

[data-theme="sunset"] p,
[data-theme="sunset"] .dashboard-title p,
[data-theme="sunset"] .hero-subtitle { color: #cbd5e1 !important; }

[data-theme="light"] .table-dark {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}

[data-theme="sunset"] .table-dark {
    background: #23163c !important;
    color: #fff7ed !important;
    border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

[data-theme="light"] .table-dark th {
    background: #f8fafc !important;
    color: #334155 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="sunset"] .table-dark th {
    background: #2b1c4b !important;
    color: #fed7aa !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.3) !important;
}

[data-theme="light"] .table-dark td {
    border-bottom: 1px solid #f1f5f9 !important;
    color: #0f172a !important;
}

[data-theme="sunset"] .table-dark td {
    border-bottom: 1px solid rgba(249, 115, 22, 0.1) !important;
    color: #fff7ed !important;
}

[data-theme="sunset"] .btn-primary {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4) !important;
}

/* ========================================================================= */
/* --- 5. Ultra-Sleek Pill Segmented Switcher UI --- */
/* ========================================================================= */
.theme-switcher-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    padding: 3px;
    gap: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .theme-switcher-pill {
    background: #e2e8f0;
    border-color: #cbd5e1;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

[data-theme="sunset"] .theme-switcher-pill {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.35);
}

.theme-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    line-height: 1;
}

.theme-pill-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .theme-pill-btn:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #0f172a;
}

/* Active State: Day */
.theme-pill-btn[data-theme-target="light"].active {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Active State: Sunset */
.theme-pill-btn[data-theme-target="sunset"].active {
    background: linear-gradient(135deg, #f97316, #ec4899) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4) !important;
}

/* Active State: Dark */
.theme-pill-btn[data-theme-target="dark"].active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !important;
}

/* Active State: Auto */
.theme-pill-btn[data-theme-target="auto"].active {
    background: linear-gradient(135deg, #10b981, #06b6d4) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35) !important;
}

@media (max-width: 1100px) {
    .theme-switcher-pill {
        padding: 2px !important;
        gap: 2px !important;
    }
    .theme-pill-btn .pill-label {
        display: none !important;
    }
    .theme-pill-btn {
        padding: 0.32rem 0.45rem !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 640px) {
    .theme-switcher-pill {
        padding: 2px !important;
        gap: 1px !important;
    }
    .theme-pill-btn {
        padding: 0.28rem 0.35rem !important;
        font-size: 0.8rem !important;
    }
}

/* Smooth Universal Transitions */
body, 
.navbar, 
.sidebar, 
.card, 
.modal-content, 
.btn, 
.sidebar-link, 
.stat-card, 
.table, 
.form-input,
.form-select,
.form-control,
.nav-tab,
.badge {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}