/**
 * ============================================================
 * TACTIC News — Systeme de themes visuels (variables CSS)
 * ============================================================
 * Fichier  : /htdocs/public/css/themes.css
 * Role     : 5 themes (3 sombres + 2 clairs), variables CSS,
 *            selecteur de theme, styles de base globaux,
 *            boutons colores globaux, combolistes adaptatives
 * Version  : 2.1.0
 * Cree     : 2026-01-20
 * Modifie  : 2026-04-14
 * Depend.  : theme_helper.php (rendu selecteur)
 * ============================================================
 * CHANGELOG v2.1.0 (2026-04-14)
 *   - Renommage blanc-pro -> blanc-neige (refonte fond blanc pur)
 *   - Renommage blanc-doux -> chocolat (fond creme chaud)
 *   - Pastilles preview mises a jour
 * CHANGELOG v2.0.0 (2026-04-14)
 *   - Reduction a 5 themes, defaut elegant
 * CHANGELOG v1.3.0 (2026-03-21)
 *   - Ajout classes globales .btn-green, .btn-orange, .btn-danger
 * ============================================================
 */

/* ============================================================ */
/* THEME PAR DEFAUT — Noir Elegant                              */
/* ============================================================ */
:root {
    --bg-primary:      linear-gradient(135deg, #0a0a0a 0%, #151515 50%, #1a1a1a 100%);
    --bg-card:         linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    --bg-input:        rgba(255,255,255,0.04);
    --bg-hover:        rgba(255,255,255,0.06);
    --bg-dropdown:     rgba(10,10,10,0.98);
    --border-color:    rgba(255,215,0,0.10);
    --border-hover:    rgba(255,215,0,0.20);
    --border-focus:    #fbbf24;
    --text-primary:    #f5f5f5;
    --text-secondary:  #a0a0a0;
    --text-muted:      #666;
    --accent-tac:      #fbbf24;
    --accent-tic:      #ef4444;
    --accent-news:     #f5f5f5;
    --accent-gradient: linear-gradient(90deg, #fbbf24, #ef4444, #f5f5f5);
    --btn-primary:     linear-gradient(135deg, #fbbf24, #f59e0b);
    --btn-primary-hover: rgba(251,191,36,0.4);
    --btn-success:     linear-gradient(135deg, #10b981, #059669);
    --alert-error-bg:     rgba(239,68,68,0.1);
    --alert-error-border: rgba(239,68,68,0.3);
    --alert-error-text:   #fca5a5;
    --alert-success-bg:     rgba(16,185,129,0.1);
    --alert-success-border: rgba(16,185,129,0.3);
    --alert-success-text:   #6ee7b7;
    --shadow-card:     0 4px 30px rgba(0,0,0,0.3);
    --shadow-dropdown: 0 10px 40px rgba(0,0,0,0.5);
    --shadow-btn:      0 4px 20px rgba(251,191,36,0.4);
    --theme-color:     #0a0a0a;
    --select-bg:       #0a0a0a;
    --select-text:     #f5f5f5;
}

/* ============================================================ */
/* THEME SOMBRE 1 — Noir Elegant                                */
/* ============================================================ */
[data-theme="elegant"] {
    --bg-primary:      linear-gradient(135deg, #0a0a0a 0%, #151515 50%, #1a1a1a 100%);
    --bg-card:         linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    --bg-input:        rgba(255,255,255,0.04);
    --bg-hover:        rgba(255,255,255,0.06);
    --bg-dropdown:     rgba(10,10,10,0.98);
    --border-color:    rgba(255,215,0,0.10);
    --border-hover:    rgba(255,215,0,0.20);
    --border-focus:    #fbbf24;
    --text-primary:    #f5f5f5;
    --text-secondary:  #a0a0a0;
    --text-muted:      #666;
    --accent-tac:      #fbbf24;
    --accent-tic:      #ef4444;
    --accent-news:     #f5f5f5;
    --accent-gradient: linear-gradient(90deg, #fbbf24, #ef4444, #f5f5f5);
    --btn-primary:     linear-gradient(135deg, #fbbf24, #f59e0b);
    --btn-primary-hover: rgba(251,191,36,0.4);
    --shadow-btn:      0 4px 20px rgba(251,191,36,0.4);
    --theme-color:     #0a0a0a;
    --select-bg:       #0a0a0a;
    --select-text:     #f5f5f5;
}

/* ============================================================ */
/* THEME SOMBRE 2 — Rose Sakura                                 */
/* ============================================================ */
[data-theme="sakura"] {
    --bg-primary:      linear-gradient(135deg, #1f0f18 0%, #2d1a28 50%, #3a1f35 100%);
    --bg-card:         linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    --bg-input:        rgba(255,255,255,0.06);
    --bg-hover:        rgba(255,255,255,0.10);
    --bg-dropdown:     rgba(31,15,24,0.98);
    --border-color:    rgba(255,150,180,0.12);
    --border-hover:    rgba(255,150,180,0.22);
    --border-focus:    #f472b6;
    --text-primary:    #fce7f3;
    --text-secondary:  #d1a0b8;
    --text-muted:      #a07090;
    --accent-tac:      #f472b6;
    --accent-tic:      #fb7185;
    --accent-news:     #fda4af;
    --accent-gradient: linear-gradient(90deg, #f472b6, #fb7185, #fda4af);
    --btn-primary:     linear-gradient(135deg, #f472b6, #ec4899);
    --btn-primary-hover: rgba(244,114,182,0.4);
    --shadow-btn:      0 4px 20px rgba(244,114,182,0.4);
    --theme-color:     #1f0f18;
    --select-bg:       #1f0f18;
    --select-text:     #fce7f3;
}

/* ============================================================ */
/* THEME SOMBRE 3 — Foret Mystique                              */
/* ============================================================ */
[data-theme="forest"] {
    --bg-primary:      linear-gradient(135deg, #0d1f0d 0%, #1a3d1a 50%, #0f3d2e 100%);
    --bg-card:         linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    --bg-input:        rgba(255,255,255,0.05);
    --bg-hover:        rgba(255,255,255,0.08);
    --bg-dropdown:     rgba(13,31,13,0.98);
    --border-color:    rgba(100,200,100,0.12);
    --border-hover:    rgba(100,200,100,0.22);
    --border-focus:    #22c55e;
    --text-primary:    #dcfce7;
    --text-secondary:  #86c99a;
    --text-muted:      #4d7a5a;
    --accent-tac:      #22c55e;
    --accent-tic:      #f97316;
    --accent-news:     #a78bfa;
    --accent-gradient: linear-gradient(90deg, #22c55e, #f97316, #a78bfa);
    --btn-primary:     linear-gradient(135deg, #22c55e, #16a34a);
    --btn-primary-hover: rgba(34,197,94,0.4);
    --shadow-btn:      0 4px 20px rgba(34,197,94,0.4);
    --theme-color:     #0d1f0d;
    --select-bg:       #0d1f0d;
    --select-text:     #dcfce7;
}

/* ============================================================ */
/* THEME CLAIR 1 — Blanc Neige                                  */
/* Fond blanc pur, police sombre, accent bleu indigo            */
/* ============================================================ */
[data-theme="blanc-neige"] {
    --bg-primary:      #ffffff;
    --bg-card:         linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,0.95));
    --bg-input:        #f8fafc;
    --bg-hover:        rgba(99,102,241,0.05);
    --bg-dropdown:     rgba(255,255,255,0.99);
    --border-color:    rgba(0,0,0,0.10);
    --border-hover:    rgba(99,102,241,0.35);
    --border-focus:    #6366f1;
    --text-primary:    #0f172a;
    --text-secondary:  #334155;
    --text-muted:      #64748b;
    --accent-tac:      #6366f1;
    --accent-tic:      #dc2626;
    --accent-news:     #059669;
    --accent-gradient: linear-gradient(90deg, #6366f1, #dc2626, #059669);
    --btn-primary:     linear-gradient(135deg, #6366f1, #4f46e5);
    --btn-primary-hover: rgba(99,102,241,0.15);
    --btn-success:     linear-gradient(135deg, #10b981, #059669);
    --alert-error-bg:     rgba(239,68,68,0.08);
    --alert-error-border: rgba(239,68,68,0.30);
    --alert-error-text:   #dc2626;
    --alert-success-bg:   rgba(16,185,129,0.08);
    --alert-success-border: rgba(16,185,129,0.30);
    --alert-success-text: #059669;
    --shadow-card:     0 1px 8px rgba(0,0,0,0.08);
    --shadow-dropdown: 0 8px 30px rgba(0,0,0,0.12);
    --shadow-btn:      0 4px 16px rgba(99,102,241,0.30);
    --theme-color:     #ffffff;
    --select-bg:       #f8fafc;
    --select-text:     #0f172a;
}

/* ============================================================ */
/* THEME CLAIR 2 — Chocolat                                     */
/* Fond creme chaud, police sombre, accent terracotta           */
/* ============================================================ */
[data-theme="chocolat"] {
    --bg-primary:      linear-gradient(135deg, #fdf8f3 0%, #f5ede2 50%, #ede0d0 100%);
    --bg-card:         linear-gradient(145deg, rgba(255,251,245,0.98), rgba(245,237,226,0.90));
    --bg-input:        #fdf8f3;
    --bg-hover:        rgba(180,100,60,0.06);
    --bg-dropdown:     rgba(253,248,243,0.99);
    --border-color:    rgba(120,80,40,0.12);
    --border-hover:    rgba(180,100,60,0.28);
    --border-focus:    #c2693a;
    --text-primary:    #1c1410;
    --text-secondary:  #4a3728;
    --text-muted:      #8a6a50;
    --accent-tac:      #c2693a;
    --accent-tic:      #dc2626;
    --accent-news:     #2d6a4f;
    --accent-gradient: linear-gradient(90deg, #c2693a, #dc2626, #2d6a4f);
    --btn-primary:     linear-gradient(135deg, #c2693a, #a0522d);
    --btn-primary-hover: rgba(194,105,58,0.20);
    --btn-success:     linear-gradient(135deg, #2d6a4f, #1b4332);
    --alert-error-bg:     rgba(220,38,38,0.08);
    --alert-error-border: rgba(220,38,38,0.28);
    --alert-error-text:   #dc2626;
    --alert-success-bg:   rgba(45,106,79,0.08);
    --alert-success-border: rgba(45,106,79,0.28);
    --alert-success-text: #2d6a4f;
    --shadow-card:     0 2px 12px rgba(120,80,40,0.10);
    --shadow-dropdown: 0 8px 30px rgba(120,80,40,0.14);
    --shadow-btn:      0 4px 16px rgba(194,105,58,0.28);
    --theme-color:     #fdf8f3;
    --select-bg:       #fdf8f3;
    --select-text:     #1c1410;
}

/* ============================================================ */
/* STYLES DE BASE                                               */
/* ============================================================ */
body.themed { background: var(--bg-primary); color: var(--text-primary) }
.themed .card { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--shadow-card) }
.themed .card::before { background: var(--accent-gradient) }
.themed .form-input,
.themed .form-select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary) }
.themed .form-input:focus,
.themed .form-select:focus { border-color: var(--border-focus) }
.themed .form-input::placeholder { color: var(--text-muted) }
.themed .btn-primary { background: var(--btn-primary) }
.themed .btn-primary:hover { box-shadow: var(--shadow-btn) }
.themed .lang-dropdown,
.themed .theme-dropdown { background: var(--bg-dropdown); border: 1px solid var(--border-color); box-shadow: var(--shadow-dropdown) }
.themed .alert-error { background: var(--alert-error-bg); border: 1px solid var(--alert-error-border); color: var(--alert-error-text) }
.themed .alert-success { background: var(--alert-success-bg); border: 1px solid var(--alert-success-border); color: var(--alert-success-text) }
.themed .text-secondary { color: var(--text-secondary) }
.themed .text-muted { color: var(--text-muted) }
.themed .tac { color: var(--accent-tac) }
.themed .tic { color: var(--accent-tic) }
.themed .news { color: var(--accent-news) }
.themed a.link { color: var(--accent-tac) }
.themed a.link:hover { color: var(--border-focus) }

/* ============================================================ */
/* BOUTONS COLORES — GLOBAUX                                    */
/* ============================================================ */
.btn-green  { background: #10b981; color: #000 !important; font-weight: 600 }
.btn-green:hover  { box-shadow: 0 4px 15px rgba(16,185,129,0.4) }
.btn-orange { background: #f59e0b; color: #000 !important; font-weight: 600 }
.btn-orange:hover { box-shadow: 0 4px 15px rgba(245,158,11,0.4) }
.btn-danger { background: #ef4444; color: #fff !important; font-weight: 600 }
.btn-danger:hover { box-shadow: 0 4px 15px rgba(239,68,68,0.4) }

/* ============================================================ */
/* COMBOLISTES — FOND ADAPTATIF TOUS THEMES                     */
/* ============================================================ */
select,
select.fi,
.form-select,
.addrow select {
    background-color: var(--select-bg)   !important;
    color:            var(--select-text) !important;
}
select option,
select.fi option,
.form-select option,
.addrow select option {
    background-color: var(--select-bg);
    color:            var(--select-text);
}
select optgroup,
.addrow select optgroup {
    background-color: var(--select-bg);
    color:            var(--select-text);
    font-weight: 600;
}

/* ============================================================ */
/* SELECTEUR DE THEME                                           */
/* ============================================================ */
.theme-selector { position: relative; display: inline-block }
.theme-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer; font-size: 0.85rem; text-decoration: none;
}
.theme-btn:hover { border-color: var(--border-hover) }
.theme-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-dropdown);
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    min-width: 200px; z-index: 101;
}
.theme-selector:hover .theme-dropdown,
.theme-selector:focus-within .theme-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0)
}
.theme-option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    color: var(--text-primary);
    text-decoration: none; font-size: 0.85rem;
    border-bottom: 1px solid var(--border-color);
}
.theme-option:last-child { border-bottom: none }
.theme-option:hover { background: var(--bg-hover) }
.theme-option.active { background: rgba(6,182,212,0.15); color: var(--accent-tac) }

/* Pastilles de previsualisation */
.theme-preview {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border-color); flex-shrink: 0;
}
.theme-preview.elegant     { background: linear-gradient(135deg, #0a0a0a, #1a1a1a); border-color: #fbbf24 }
.theme-preview.sakura      { background: linear-gradient(135deg, #1f0f18, #3a1f35) }
.theme-preview.forest      { background: linear-gradient(135deg, #0d1f0d, #0f3d2e) }
.theme-preview.blanc-neige { background: #ffffff; border-color: #6366f1 }
.theme-preview.chocolat    { background: linear-gradient(135deg, #fdf8f3, #ede0d0); border-color: #c2693a }

@media (max-width: 480px) {
    .theme-dropdown { min-width: 170px; right: -20px }
    .theme-option   { padding: 8px 12px; font-size: 0.8rem }
}