/**
 * REGULIA - Global Theme Styles
 * Ce fichier contient les variables CSS et styles pour les thèmes
 * À inclure dans toutes les pages de l'application
 */

/* ==============================
   DARK THEME (Default)
   ============================== */
:root {
    /* Main Colors */
    --primary: #00d4ff;
    --secondary: #00ff88;
    --accent: #667eea;
    --purple: #764ba2;
    --danger: #ff0055;
    --warning: #ffaa00;
    --success: #00ff88;

    /* Background Colors */
    --bg-primary: #0a0e27;
    --bg-secondary: #131836;
    --bg-surface: #1a1f42;
    --bg-card: #1a1f42;

    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    /* Border & Shadow */
    --border-color: rgba(0, 212, 255, 0.15);
    --border-light: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-glow: rgba(0, 212, 255, 0.3);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #00d4ff, #00ff88);
    --gradient-accent: linear-gradient(135deg, #667eea, #764ba2);
    --gradient-danger: linear-gradient(135deg, #ff0055, #ff6b6b);

    /* Navbar */
    --navbar-bg: rgba(10, 14, 39, 0.9);
    --navbar-blur: 20px;

    /* Inputs */
    --input-bg: rgba(255, 255, 255, 0.05);
    --input-border: rgba(0, 212, 255, 0.3);
    --input-focus: var(--primary);

    /* Legacy compatibility */
    --dark-bg: #0a0e27;
    --dark-card: #131836;
    --dark-surface: #1a1f42;
    --light: #f8fafc;
    --gray: #94a3b8;
}

/* ==============================
   LIGHT THEME - Soft & Eye-Friendly Design
   ============================== */
[data-theme="light"] {
    /* Main Colors - Muted & Soft */
    --primary: #4a7c9b;
    --secondary: #5a9a7a;
    --accent: #6b7db3;
    --purple: #8a7ab3;
    --danger: #c45c5c;
    --warning: #c49a5c;
    --success: #5a9a6a;

    /* Background Colors - Warm Cream/Paper */
    --bg-primary: #f8f6f3;
    --bg-secondary: #f3f1ee;
    --bg-surface: #eceae7;
    --bg-card: #fdfcfa;

    /* Text Colors - Soft Dark (not pure black) */
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --text-muted: #a0a8ab;

    /* Border & Shadow - Warm Gray, NO glare */
    --border-color: #ddd9d4;
    --border-light: #e8e5e0;
    --shadow-color: rgba(45, 52, 54, 0.06);
    --shadow-glow: none;

    /* Gradients - Solid muted colors (no shine) */
    --gradient-primary: #4a7c9b;
    --gradient-accent: #6b7db3;
    --gradient-danger: #c45c5c;
    --gradient-success: #5a9a6a;

    /* Navbar - Warm cream */
    --navbar-bg: #f8f6f3;
    --navbar-blur: 0;

    /* Inputs - Soft */
    --input-bg: #fdfcfa;
    --input-border: #d5d0cb;
    --input-focus: #4a7c9b;

    /* Legacy compatibility */
    --dark-bg: #f8f6f3;
    --dark-card: #fdfcfa;
    --dark-surface: #f3f1ee;
    --light: #2d3436;
    --gray: #636e72;

    /* NO neon/glow effects in light mode */
    --neon-blue: none;
    --neon-green: none;
}



/* ==============================
   GLOBAL CONTROLS STYLES
   ============================== */
.global-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Theme Toggle Button */
.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: rotate(15deg);
}

[data-theme="light"] .theme-toggle {
    background: var(--bg-card);
    color: #d97706;
}

[data-theme="light"] .theme-toggle:hover {
    color: #b45309;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    gap: 4px;
    background: var(--bg-surface);
    border-radius: 10px;
    padding: 4px;
    border: 1px solid var(--border-color);
}

.lang-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.lang-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 212, 255, 0.1);
}

.lang-btn.active {
    background: var(--gradient-primary);
    color: var(--bg-primary);
}

[data-theme="light"] .lang-switcher {
    background: var(--bg-card);
}

[data-theme="light"] .lang-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .lang-btn.active {
    color: white;
}

/* ==============================
   SMOOTH TRANSITIONS
   ============================== */
body,
.navbar,
.sidebar,
.card,
.modal,
.btn,
input,
select,
textarea {
    transition: background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ==============================
   LIGHT THEME OVERRIDES - Soft & Eye-Friendly
   ============================== */

/* Body Background - Warm Paper/Cream */
[data-theme="light"] body {
    background: #f8f6f3;
    background-attachment: fixed;
    color: var(--text-primary);
}

/* Remove ALL effects for light mode */
[data-theme="light"] body::before {
    display: none !important;
}

/* Navbar - Warm cream, no shadow glow */
[data-theme="light"] .navbar,
[data-theme="light"] header,
[data-theme="light"] .header {
    background: #f8f6f3;
    border-bottom: 1px solid #ddd9d4;
    box-shadow: none;
}

/* Sidebar - Warm cream */
[data-theme="light"] .sidebar,
[data-theme="light"] nav.sidebar {
    background: #f8f6f3;
    border-right: 1px solid #ddd9d4;
}

[data-theme="light"] .sidebar .nav-item,
[data-theme="light"] .nav-item {
    color: var(--text-secondary);
}

[data-theme="light"] .sidebar .nav-item:hover,
[data-theme="light"] .nav-item:hover {
    background: #eceae7;
    color: var(--primary);
}

[data-theme="light"] .sidebar .nav-item.active,
[data-theme="light"] .nav-item.active {
    background: #e8e5e0;
    color: var(--primary);
    border-left: 3px solid var(--primary);
}

/* Cards - Soft cream with subtle border, NO shadows */
[data-theme="light"] .card,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .pane-modern,
[data-theme="light"] .hybrid-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .section,
[data-theme="light"] .client-card {
    background: #fdfcfa;
    border: 1px solid #ddd9d4;
    box-shadow: none;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .pane-modern:hover,
[data-theme="light"] .client-card:hover {
    border-color: #ccc8c3;
    box-shadow: none;
}

/* Headers in cards */
[data-theme="light"] .pane-header-modern,
[data-theme="light"] .card-header,
[data-theme="light"] .client-header {
    background: #f3f1ee;
    border-bottom: 1px solid #ddd9d4;
}



/* Donut charts */
[data-theme="light"] .donut-chart-css {
    background: #f3f1ee;
    box-shadow: none;
}

[data-theme="light"] .donut-value {
    color: var(--text-primary);
}

/* Buttons - Soft, no glare */
[data-theme="light"] .btn-primary {
    background: #4a7c9b;
    color: white;
    border: none;
    box-shadow: none;
}

[data-theme="light"] .btn-primary:hover {
    background: #3d6a86;
    box-shadow: none;
    transform: none;
}

[data-theme="light"] .btn-secondary {
    background: #fdfcfa;
    border: 1px solid #ddd9d4;
    color: var(--text-secondary);
}

[data-theme="light"] .btn-secondary:hover {
    background: #f3f1ee;
    border-color: #ccc8c3;
    color: var(--text-primary);
}

/* Inputs - Soft cream */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: #fdfcfa;
    border: 1px solid #ddd9d4;
    color: var(--text-primary);
    box-shadow: none;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: #4a7c9b;
    box-shadow: none;
    outline: none;
}

[data-theme="light"] input::placeholder {
    color: var(--text-muted);
}

/* Progress bars - Soft */
[data-theme="light"] .progress-bar {
    background: #eceae7;
}

[data-theme="light"] .progress-fill {
    background: #5a9a7a;
    box-shadow: none;
}


/* Section titles */
[data-theme="light"] .modern-section-title,
[data-theme="light"] .section-title {
    color: var(--text-primary);
    text-shadow: none;
}

/* Status badges */
[data-theme="light"] .badge-pro {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* Urgency boxes */
[data-theme="light"] .urgency-box-modern {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Mini KPIs */
[data-theme="light"] .mini-kpi-modern {
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Tables */
[data-theme="light"] table,
[data-theme="light"] .table {
    background: white;
}

[data-theme="light"] th {
    background: rgba(248, 250, 252, 0.9);
    color: var(--text-secondary);
}

[data-theme="light"] td {
    border-color: rgba(226, 232, 240, 0.8);
}

[data-theme="light"] tr:hover td {
    background: rgba(14, 165, 233, 0.05);
}

/* Modals */
[data-theme="light"] .modal-overlay {
    background: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .modal-box {
    background: white;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15);
}

/* Toast notifications */
[data-theme="light"] .toast {
    background: white;
    color: var(--text-primary);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.15);
}

/* Links */
[data-theme="light"] a {
    color: var(--primary);
}

[data-theme="light"] a:hover {
    color: #0284c7;
}

/* Text utilities */
[data-theme="light"] .text-muted {
    color: var(--text-muted) !important;
}

/* Logo */
[data-theme="light"] .logo {
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* User profile */
[data-theme="light"] .user-profile .avatar {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

[data-theme="light"] .user-profile .info span {
    color: var(--text-primary);
}

[data-theme="light"] .user-profile .info small {
    color: var(--text-secondary);
}

/* ==============================
   UTILITY CLASSES
   ============================== */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-accent {
    color: var(--primary);
}

.text-success {
    color: var(--success);
}

.text-warning {
    color: var(--warning);
}

.text-danger {
    color: var(--danger);
}

.bg-primary {
    background: var(--bg-primary);
}

.bg-secondary {
    background: var(--bg-secondary);
}

.bg-surface {
    background: var(--bg-surface);
}

.bg-card {
    background: var(--bg-card);
}

/* ==============================
   LIGHT THEME - DASHBOARD COMPLETE OVERRIDES
   Force all dark elements to light
   ============================== */

/* Force light backgrounds on ALL containers */
[data-theme="light"] .hybrid-card,
[data-theme="light"] .pane-modern,
[data-theme="light"] .view-header,
[data-theme="light"] .hybrid-container,
[data-theme="light"] .chart-curve-container,
[data-theme="light"] .urgency-box-modern,
[data-theme="light"] .mini-kpi-modern,
[data-theme="light"] .site-selector-wrapper {
    background: #fdfcfa !important;
    border-color: #ddd9d4 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Donut chart centers */
[data-theme="light"] .donut-chart-css::after,
[data-theme="light"] .donut-chart-css.small::after,
[data-theme="light"] .donut-chart-css.hybrid-donut::after {
    background: #fdfcfa !important;
    box-shadow: none !important;
}

/* Pane headers */
[data-theme="light"] .pane-header-modern {
    background: #f3f1ee !important;
    border-color: #ddd9d4 !important;
    color: #2d3436 !important;
}

/* Chart titles */
[data-theme="light"] .chart-title {
    color: #2d3436 !important;
    border-color: #ddd9d4 !important;
    text-shadow: none !important;
}

/* Navigation sections */
[data-theme="light"] .nav-section {
    color: #4a7c9b !important;
    text-shadow: none !important;
}

/* Modern section titles */
[data-theme="light"] .modern-section-title {
    background: #f3f1ee !important;
    border-color: #4a7c9b !important;
    color: #4a7c9b !important;
    box-shadow: none !important;
}

/* H2 and H3 headings */
[data-theme="light"] h2 {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #2d3436 !important;
    background-clip: unset !important;
    color: #2d3436 !important;
}

[data-theme="light"] h3 {
    color: #2d3436 !important;
}

/* Donut values - normal text color */
[data-theme="light"] .donut-value {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #2d3436 !important;
    background-clip: unset !important;
    color: #2d3436 !important;
}

/* Mini KPI values */
[data-theme="light"] .mini-kpi-modern b {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #2d3436 !important;
    background-clip: unset !important;
    color: #2d3436 !important;
}

/* Labels */
[data-theme="light"] .donut-label,
[data-theme="light"] .mini-kpi-modern .label,
[data-theme="light"] .bar-col span,
[data-theme="light"] .hybrid-footer {
    color: #636e72 !important;
}

/* Logo - use normal dark text */
[data-theme="light"] .logo {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #4a7c9b !important;
    background-clip: unset !important;
    filter: none !important;
    animation: none !important;
}

/* Avatar */
[data-theme="light"] .avatar {
    background: #4a7c9b !important;
    box-shadow: none !important;
    border-color: #ddd9d4 !important;
}

/* Bar charts */
[data-theme="light"] .bar {
    background: #5a9a7a !important;
    box-shadow: none !important;
}

/* GREEN COLOR - Normal green for light mode */
[data-theme="light"] .env-accent {
    border-top-color: #22863a !important;
}

[data-theme="light"] .legend-dot[style*="00ff88"],
[data-theme="light"] [style*="color: #00ff88"],
[data-theme="light"] [style*="color:#00ff88"] {
    color: #22863a !important;
}

/* SST/ENV pane accents */
[data-theme="light"] .sst-accent {
    border-top-color: #d97706 !important;
}

/* Urgency items */
[data-theme="light"] .urgent-item {
    background: #fdf2f2 !important;
    border-color: #c45c5c !important;
}

/* Scrollbar for light mode */
[data-theme="light"] .content-area::-webkit-scrollbar-track {
    background: #eceae7 !important;
}

[data-theme="light"] .content-area::-webkit-scrollbar-thumb {
    background: #4a7c9b !important;
    box-shadow: none !important;
}

/* Badge Pro */
[data-theme="light"] .badge-pro {
    background: #4a7c9b !important;
    box-shadow: none !important;
    animation: none !important;
}

/* Disable all neon/glow effects */
[data-theme="light"] * {
    text-shadow: none !important;
}

[data-theme="light"] .nav-item::before {
    background: #eceae7 !important;
}

[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-item.active {
    box-shadow: none !important;
}

/* Site selector */
[data-theme="light"] #site-selector {
    color: #4a7c9b !important;
}

/* Body background override */
[data-theme="light"] body {
    background-image: none !important;
}

/* Tables in light mode */
[data-theme="light"] table,
[data-theme="light"] .table {
    background: #fdfcfa !important;
}

[data-theme="light"] th {
    background: #f3f1ee !important;
    color: #636e72 !important;
}

[data-theme="light"] td {
    border-color: #ddd9d4 !important;
}

[data-theme="light"] tr:hover td {
    background: #f3f1ee !important;
}

/* Modal in light mode */
[data-theme="light"] .modal-box,
[data-theme="light"] .modal-content {
    background: #fdfcfa !important;
    border-color: #ddd9d4 !important;
    box-shadow: 0 10px 40px rgba(45, 52, 54, 0.15) !important;
}

/* Toast in light mode */
[data-theme="light"] .toast {
    background: #fdfcfa !important;
    border-color: #ddd9d4 !important;
    box-shadow: 0 4px 20px rgba(45, 52, 54, 0.1) !important;
}