/* ===========================================
   Smartinit Design System - CSS Variables
   Theme Support: Dark & Light
   =========================================== */

/* ===========================================
   Base Variables (theme-independent)
   =========================================== */
:root {
    /* Couleurs primaires (identiques pour les deux thèmes) */
    --color-primary: #3498db;
    --color-primary-hover: #2980b9;
    --color-success: #2ecc71;
    --color-success-hover: #27ae60;
    --color-warning: #f39c12;
    --color-warning-hover: #e67e22;
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --gradient-accent: linear-gradient(135deg, #10b981 0%, #8b5cf6 100%);

    /* Typographie */
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-body: 1.6;

    /* Espacements */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border radius */
    --radius-card: 12px;
    --radius-button: 8px;
    --radius-input: 8px;
    --radius-badge: 9999px;

    /* Layout */
    --container-max-width: 1400px;
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 64px;
    --header-height: 64px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-theme: 200ms ease;

    /* Z-index */
    --z-sidebar: 100;
    --z-header: 90;
    --z-dropdown: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* ===========================================
   Dark Theme (default)
   =========================================== */
:root,
[data-theme="dark"] {
    /* Couleurs de fond */
    --color-bg-main: #1a1a2e;
    --color-bg-card: #16213e;
    --color-bg-hover: rgba(255, 255, 255, 0.05);
    --color-bg-input: #1a1a2e;
    --color-border: #0f3460;
    --color-border-light: #1e3a5f;

    /* Couleurs de texte */
    --color-text: #eeeeee;
    --color-text-secondary: #888888;
    --color-text-muted: #666666;

    /* Ombres */
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.4);
    --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.4);

    /* Couleurs status - Dark */
    --color-status-pending-bg: rgba(234, 179, 8, 0.2);
    --color-status-pending-text: #fbbf24;
    --color-status-processing-bg: rgba(59, 130, 246, 0.2);
    --color-status-processing-text: #60a5fa;
    --color-status-waiting-bg: rgba(249, 115, 22, 0.2);
    --color-status-waiting-text: #fb923c;
    --color-status-error-bg: rgba(239, 68, 68, 0.2);
    --color-status-error-text: #f87171;
    --color-status-completed-bg: rgba(34, 197, 94, 0.2);
    --color-status-completed-text: #4ade80;
    --color-status-paused-bg: rgba(156, 163, 175, 0.2);
    --color-status-paused-text: #9ca3af;

    /* Couleurs groupes - Dark */
    --color-groupe-bt-bg: rgba(168, 85, 247, 0.2);
    --color-groupe-bt-text: #c084fc;
    --color-groupe-pbn-bg: rgba(16, 185, 129, 0.2);
    --color-groupe-pbn-text: #34d399;
    --color-groupe-annuaire-bg: rgba(34, 211, 238, 0.2);
    --color-groupe-annuaire-text: #22d3ee;
    --color-groupe-rss-bg: rgba(251, 146, 60, 0.2);
    --color-groupe-rss-text: #fb923c;
    --color-groupe-boost-bg: rgba(236, 72, 153, 0.2);
    --color-groupe-boost-text: #f472b6;

    /* Scrollbar */
    --scrollbar-track: var(--color-bg-main);
    --scrollbar-thumb: var(--color-border);
    --scrollbar-thumb-hover: var(--color-text-secondary);
}

/* ===========================================
   Light Theme
   =========================================== */
[data-theme="light"] {
    /* Couleurs de fond */
    --color-bg-main: #f5f7fa;
    --color-bg-card: #ffffff;
    --color-bg-hover: rgba(0, 0, 0, 0.04);
    --color-bg-input: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #edf2f7;

    /* Couleurs de texte */
    --color-text: #1a202c;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;

    /* Ombres - plus légères pour le thème clair */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);

    /* Couleurs status - Light (plus saturées) */
    --color-status-pending-bg: rgba(234, 179, 8, 0.15);
    --color-status-pending-text: #b45309;
    --color-status-processing-bg: rgba(59, 130, 246, 0.15);
    --color-status-processing-text: #1d4ed8;
    --color-status-waiting-bg: rgba(249, 115, 22, 0.15);
    --color-status-waiting-text: #c2410c;
    --color-status-error-bg: rgba(239, 68, 68, 0.15);
    --color-status-error-text: #b91c1c;
    --color-status-completed-bg: rgba(34, 197, 94, 0.15);
    --color-status-completed-text: #15803d;
    --color-status-paused-bg: rgba(156, 163, 175, 0.15);
    --color-status-paused-text: #475569;

    /* Couleurs groupes - Light (plus saturées) */
    --color-groupe-bt-bg: rgba(168, 85, 247, 0.15);
    --color-groupe-bt-text: #7c3aed;
    --color-groupe-pbn-bg: rgba(16, 185, 129, 0.15);
    --color-groupe-pbn-text: #059669;
    --color-groupe-annuaire-bg: rgba(34, 211, 238, 0.15);
    --color-groupe-annuaire-text: #0891b2;
    --color-groupe-rss-bg: rgba(251, 146, 60, 0.15);
    --color-groupe-rss-text: #c2410c;
    --color-groupe-boost-bg: rgba(236, 72, 153, 0.15);
    --color-groupe-boost-text: #be185d;

    /* Scrollbar */
    --scrollbar-track: var(--color-bg-main);
    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;
}

/* ===========================================
   Theme Transition
   =========================================== */
html {
    transition: background-color var(--transition-theme),
                color var(--transition-theme);
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color var(--transition-theme),
                border-color var(--transition-theme),
                color var(--transition-theme),
                box-shadow var(--transition-theme) !important;
}

/* ===========================================
   Mobile breakpoint
   =========================================== */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }
}