/**
 * ============================================================
 * TACTIC News — Systeme de themes visuels (variables CSS)
 * ============================================================
 * Fichier  : /htdocs/public/css/themes.css
 * Role     : 10 themes sombres + 1 clair, variables CSS,
 *            selecteur de theme, styles de base globaux,
 *            boutons colores globaux, combolistes sombres
 * Version  : 1.3.0
 * Cree     : 2026-01-20
 * Modifie  : 2026-03-21
 * Depend.  : Aucune (fichier racine du systeme de theming)
 * ============================================================
 * CHANGELOG v1.3.0 (2026-03-21)
 *   - Ajout classes globales .btn-green, .btn-orange, .btn-danger
 *     Police noire sur fond vert/orange, blanche sur fond rouge
 * ============================================================
 */

:root {
    --bg-primary: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 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(20,20,40,0.98);
    --border-color: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.15);
    --border-focus: #06b6d4;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --text-muted: #666;
    --accent-tac: #06b6d4;
    --accent-tic: #ef4444;
    --accent-news: #22c55e;
    --accent-gradient: linear-gradient(90deg, #06b6d4, #ef4444, #22c55e);
    --btn-primary: linear-gradient(135deg, #06b6d4, #0891b2);
    --btn-primary-hover: rgba(6,182,212,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(6,182,212,0.4);
    --theme-color: #0a0a1a;
    --select-bg: #1a1a2e;
    --select-text: #e0e0e0;
}

[data-theme="ocean"] {
    --bg-primary: linear-gradient(135deg, #0c1929 0%, #1a3a5c 50%, #0d4f6e 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(12,25,41,0.98);
    --border-color: rgba(100,180,255,0.15);
    --border-hover: rgba(100,180,255,0.25);
    --border-focus: #00b4d8;
    --accent-tac: #00b4d8;
    --accent-tic: #ff6b6b;
    --accent-news: #4ade80;
    --accent-gradient: linear-gradient(90deg, #00b4d8, #ff6b6b, #4ade80);
    --btn-primary: linear-gradient(135deg, #00b4d8, #0096c7);
    --btn-primary-hover: rgba(0,180,216,0.4);
    --shadow-btn: 0 4px 20px rgba(0,180,216,0.4);
    --theme-color: #0c1929;
    --select-bg: #0c1929;
    --select-text: #e0e0e0;
}

[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;
    --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: #e0e0e0;
}

[data-theme="twilight"] {
    --bg-primary: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #3d1a5c 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(26,10,46,0.98);
    --border-color: rgba(180,120,255,0.12);
    --border-hover: rgba(180,120,255,0.22);
    --border-focus: #a78bfa;
    --accent-tac: #a78bfa;
    --accent-tic: #f472b6;
    --accent-news: #34d399;
    --accent-gradient: linear-gradient(90deg, #a78bfa, #f472b6, #34d399);
    --btn-primary: linear-gradient(135deg, #a78bfa, #8b5cf6);
    --btn-primary-hover: rgba(167,139,250,0.4);
    --shadow-btn: 0 4px 20px rgba(167,139,250,0.4);
    --theme-color: #1a0a2e;
    --select-bg: #1a0a2e;
    --select-text: #e0e0e0;
}

[data-theme="sunset"] {
    --bg-primary: linear-gradient(135deg, #1f0a0a 0%, #3d1c1c 50%, #4a1f1f 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,10,10,0.98);
    --border-color: rgba(255,150,100,0.12);
    --border-hover: rgba(255,150,100,0.22);
    --border-focus: #f97316;
    --accent-tac: #f97316;
    --accent-tic: #ef4444;
    --accent-news: #fbbf24;
    --accent-gradient: linear-gradient(90deg, #f97316, #ef4444, #fbbf24);
    --btn-primary: linear-gradient(135deg, #f97316, #ea580c);
    --btn-primary-hover: rgba(249,115,22,0.4);
    --shadow-btn: 0 4px 20px rgba(249,115,22,0.4);
    --theme-color: #1f0a0a;
    --select-bg: #1f0a0a;
    --select-text: #e0e0e0;
}

[data-theme="aurora"] {
    --bg-primary: linear-gradient(135deg, #0a1a1a 0%, #0f2b2b 50%, #0a2a3a 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(10,26,26,0.98);
    --border-color: rgba(100,255,200,0.10);
    --border-hover: rgba(100,255,200,0.20);
    --border-focus: #2dd4bf;
    --accent-tac: #2dd4bf;
    --accent-tic: #a78bfa;
    --accent-news: #4ade80;
    --accent-gradient: linear-gradient(90deg, #2dd4bf, #a78bfa, #4ade80);
    --btn-primary: linear-gradient(135deg, #2dd4bf, #14b8a6);
    --btn-primary-hover: rgba(45,212,191,0.4);
    --shadow-btn: 0 4px 20px rgba(45,212,191,0.4);
    --theme-color: #0a1a1a;
    --select-bg: #0a1a1a;
    --select-text: #e0e0e0;
}

[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;
    --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;
}

[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;
    --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: #e0e0e0;
}

[data-theme="arctic"] {
    --bg-primary: linear-gradient(135deg, #0f1a2a 0%, #1a2d4a 50%, #1e3a5f 100%);
    --bg-card: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    --bg-input: rgba(255,255,255,0.08);
    --bg-hover: rgba(255,255,255,0.12);
    --bg-dropdown: rgba(15,26,42,0.98);
    --border-color: rgba(200,230,255,0.15);
    --border-hover: rgba(200,230,255,0.25);
    --border-focus: #60a5fa;
    --text-primary: #f0f8ff;
    --text-secondary: #94a3b8;
    --accent-tac: #60a5fa;
    --accent-tic: #38bdf8;
    --accent-news: #e0f2fe;
    --accent-gradient: linear-gradient(90deg, #60a5fa, #38bdf8, #e0f2fe);
    --btn-primary: linear-gradient(135deg, #60a5fa, #3b82f6);
    --btn-primary-hover: rgba(96,165,250,0.4);
    --shadow-btn: 0 4px 20px rgba(96,165,250,0.4);
    --theme-color: #0f1a2a;
    --select-bg: #0f1a2a;
    --select-text: #f0f8ff;
}

[data-theme="lava"] {
    --bg-primary: linear-gradient(135deg, #1a0505 0%, #2a0a0a 50%, #350d0d 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(26,5,5,0.98);
    --border-color: rgba(255,100,50,0.12);
    --border-hover: rgba(255,100,50,0.22);
    --border-focus: #ef4444;
    --accent-tac: #ef4444;
    --accent-tic: #f97316;
    --accent-news: #fbbf24;
    --accent-gradient: linear-gradient(90deg, #ef4444, #f97316, #fbbf24);
    --btn-primary: linear-gradient(135deg, #ef4444, #dc2626);
    --btn-primary-hover: rgba(239,68,68,0.4);
    --shadow-btn: 0 4px 20px rgba(239,68,68,0.4);
    --theme-color: #1a0505;
    --select-bg: #1a0505;
    --select-text: #e0e0e0;
}

[data-theme="light"] {
    --bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    --bg-card: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    --bg-input: rgba(255,255,255,0.9);
    --bg-hover: rgba(0,0,0,0.05);
    --bg-dropdown: rgba(255,255,255,0.98);
    --border-color: rgba(0,0,0,0.1);
    --border-hover: rgba(0,0,0,0.2);
    --border-focus: #0891b2;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --accent-tac: #0891b2;
    --accent-tic: #dc2626;
    --accent-news: #16a34a;
    --accent-gradient: linear-gradient(90deg, #0891b2, #dc2626, #16a34a);
    --btn-primary: linear-gradient(135deg, #0891b2, #0e7490);
    --btn-primary-hover: rgba(8,145,178,0.3);
    --alert-error-bg: rgba(239,68,68,0.1);
    --alert-error-border: rgba(239,68,68,0.4);
    --alert-error-text: #dc2626;
    --alert-success-bg: rgba(16,185,129,0.1);
    --alert-success-border: rgba(16,185,129,0.4);
    --alert-success-text: #059669;
    --shadow-card: 0 4px 30px rgba(0,0,0,0.1);
    --shadow-dropdown: 0 10px 40px rgba(0,0,0,0.15);
    --shadow-btn: 0 4px 20px rgba(8,145,178,0.3);
    --theme-color: #f8fafc;
    --select-bg: #ffffff;
    --select-text: #1e293b;
}

/* ============================================ */
/* 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                    */
/* Utilisables sur toutes les pages du projet   */
/* ============================================ */
.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 SOMBRE 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:180px;z-index:101;max-height:400px;overflow-y:auto}
.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)}
.theme-preview{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-color);flex-shrink:0}
.theme-preview.cyber{background:linear-gradient(135deg,#0a0a1a,#1a1a2e)}
.theme-preview.ocean{background:linear-gradient(135deg,#0c1929,#0d4f6e)}
.theme-preview.forest{background:linear-gradient(135deg,#0d1f0d,#0f3d2e)}
.theme-preview.twilight{background:linear-gradient(135deg,#1a0a2e,#3d1a5c)}
.theme-preview.sunset{background:linear-gradient(135deg,#1f0a0a,#4a1f1f)}
.theme-preview.aurora{background:linear-gradient(135deg,#0a1a1a,#0a2a3a)}
.theme-preview.elegant{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);border-color:#fbbf24}
.theme-preview.sakura{background:linear-gradient(135deg,#1f0f18,#3a1f35)}
.theme-preview.arctic{background:linear-gradient(135deg,#0f1a2a,#1e3a5f)}
.theme-preview.lava{background:linear-gradient(135deg,#1a0505,#350d0d)}
.theme-preview.light{background:linear-gradient(135deg,#f8fafc,#cbd5e1)}

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