/* ============================================================
   SamScreen - Thèmes saisonniers (Halloween / Noël / Neutre)
   Compatible TailwindCSS & Flowbite
   Utilisation : bg-[var(--bg)] / text-[var(--text)] / etc.
   ============================================================ */

/* 🎃 Thème Halloween */
:root[data-theme="halloween"] {
    --bg: #111827; /* Fond global (gris très foncé) */
    --surface: #1f2937; /* Sections (nav/footer) */
    --text: #ffffff; /* Texte principal */
    --text-muted: #9ca3af; /* Texte secondaire */
    --accent: #f97316; /* Orange citrouille */
    --accent-hover: #fb923c; /* Orange clair au survol */
    --accent-strong: #ea580c; /* Orange foncé pour boutons */
    --secondary: #8b5cf6; /* Violet mystique */
    --secondary-hover: #a78bfa; /* Violet clair */
    --danger: #dc2626; /* Rouge alerte */
    --border: #2d2d3a; /* Bordures discrètes */
    --shadow: 0 0 20px rgba(249, 115, 22, 0.15); /* Ombre orangée légère */
}

/* 🎄 Thème Noël */
:root[data-theme="noel"] {
    --bg: #0c0f0a; /* Fond global vert sombre */
    --surface: #182c25; /* Sections */
    --text: #f8fafc; /* Blanc neige */
    --text-muted: #cbd5e1; /* Gris neige */
    --accent: #e11d48; /* Rouge principal */
    --accent-hover: #f43f5e; /* Rouge clair */
    --accent-strong: #be123c; /* Rouge foncé */
    --secondary: #22c55e; /* Vert sapin */
    --secondary-hover: #4ade80; /* Vert clair */
    --danger: #dc2626;
    --border: #1e293b;
    --shadow: 0 0 20px rgba(225, 29, 72, 0.15);
}

/* ☀️ Thème Neutre (hors saison) */
:root[data-theme="default"] {
    --bg: #f9fafb; /* Fond gris clair */
    --surface: #ffffff; /* Sections / cartes */
    --text: #111827; /* Texte principal */
    --text-muted: #4b5563; /* Texte secondaire */
    --accent: #2563eb; /* Bleu principal */
    --accent-hover: #3b82f6; /* Bleu clair */
    --accent-strong: #1d4ed8; /* Bleu foncé */
    --secondary: #7c3aed; /* Violet moderne */
    --secondary-hover: #a78bfa; /* Violet clair */
    --danger: #dc2626;
    --border: #e5e7eb;
    --shadow: 0 0 20px rgba(37, 99, 235, 0.1);
}

/* ============================================================
   Styles globaux & utilitaires communs
   ============================================================ */

html,
body {
    scroll-behavior: smooth;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Conteneurs principaux */
body {
    background-color: var(--bg);
    color: var(--text);
}

/* Sections principales */
nav,
footer,
.surface {
    background-color: var(--surface);
    box-shadow: var(--shadow);
    border-color: var(--border);
}

/* Liens et accents */
a,
.text-accent {
    color: var(--accent);
    transition: color 0.3s ease;
}
a:hover,
.text-accent:hover {
    color: var(--accent-hover);
}

/* Boutons principaux */
.btn-primary {
    background-color: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--accent-strong);
}

/* Boutons secondaires */
.btn-secondary {
    background-color: var(--secondary);
    color: #fff;
    font-weight: 500;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    transition: background-color 0.3s ease;
}
.btn-secondary:hover {
    background-color: var(--secondary-hover);
}

/* Texte secondaire */
.text-muted {
    color: var(--text-muted);
}

/* Tags / badges */
.tag {
    display: inline-block;
    border-radius: 9999px;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    color: #fff;
    font-weight: 500;
}
.tag-orange {
    background-color: var(--accent);
}
.tag-violet {
    background-color: var(--secondary);
}
.tag-blue {
    background-color: #3b82f6;
}

/* Alertes / notifications */
.alert-danger {
    background-color: var(--danger);
    color: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-weight: 500;
}

/* Cartes / blocs */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease;
}
.card:hover {
    transform: translateY(-4px);
}

/* Animations de survol */
.transition {
    transition: all 0.3s ease;
}

:root[data-theme="halloween"] {
    --status-vu: #10b981;
    --status-retard: #dc2626;
    --status-telecharger: #f59e0b;
    --status-dispo: #3b82f6;
}

:root[data-theme="noel"] {
    --status-vu: #22c55e;
    --status-retard: #e11d48;
    --status-telecharger: #facc15;
    --status-dispo: #38bdf8;
}

:root[data-theme="default"] {
    --status-vu: #10b981;
    --status-retard: #ef4444;
    --status-telecharger: #f59e0b;
    --status-dispo: #2563eb;
}

/* Classes génériques basées sur ces variables */
.status-vu {
    border-color: var(--status-vu);
}

.status-retard {
    border-color: var(--status-retard);
}

.status-telecharger {
    border-color: var(--status-telecharger);
}

.status-dispo {
    border-color: var(--status-dispo);
}

/* Exemple pour un fond (badge ou bulle) */
.bg-status-vu {
    background-color: var(--status-vu);
}

.bg-status-retard {
    background-color: var(--status-retard);
}

.bg-status-telecharger {
    background-color: var(--status-telecharger);
}

.bg-status-dispo {
    background-color: var(--status-dispo);
}

/* Boutons de bascule entre vues */
.view-toggle-btn {
    border: none;
    transition: all 0.3s ease;
}

.view-toggle-btn.active-view {
    background-color: var(--accent);
    color: white;
    font-weight: 600;
}

.view-toggle-btn:not(.active-view):hover {
    background-color: var(--accent-hover);
    color: white;
}