/* ===== Sélecteur de thème (fenêtre) ===== */
.th-opt {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 12px; margin-bottom: 8px;
    border: 1.5px solid #d5dee8; border-radius: 12px;
    background: transparent; font: inherit; font-size: 15px;
    color: #0b2c48; cursor: pointer; text-align: left;
}
.th-opt.active { border-color: #4a88c5; }
.th-sw { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #d5dee8; flex-shrink: 0; }
.th-sw-light { background: #fff; }
.th-sw-dark { background: #2a3e54; }
.th-name { flex: 1; }
.th-check { display: none; color: #4a88c5; font-weight: 700; }
.th-opt.active .th-check { display: block; }

/* ===== THÈME SOMBRE ===== */
html[data-theme="dark"] {
    color-scheme: dark;
    --t-page: #222e3d;
    --t-header: #2a3f55;
    --t-card: #2a3e54;
    --t-deep: #1f2d3d;
    --t-line: #3a4f66;
    --t-muted: #8d9cab;
    --t-blue: #4a90d9;
    --t-green: #49BA66;

    --bg-app: #222e3d;
    --bg-page: #222e3d;
    --bg-card: #2a3e54;
    --text-dark: #ffffff;
    --ink: #ffffff;
    --ink-soft: #8d9cab;
    --text-muted: #8d9cab;
    --border-color: #1d2936;
    --border-dashed: #3d5269;
    --icon-steel: #74879a;
    --icon-blue: #4a90d9;
    --status-green: #49BA66;

    /* Avatar — same silhouette colour as in the reference dark screenshot */
    --avatar-ring: #7a95aa;
    --avatar-fill: #adb6bd;
}

/* --- Base --- */
html[data-theme="dark"] body { background: var(--t-page); color: #fff; }
html[data-theme="dark"] .mobile-wrapper { background: var(--t-page); box-shadow: none; }
html[data-theme="dark"] .content-scrollable,
html[data-theme="dark"] .hist-content,
html[data-theme="dark"] .cp-content { background: var(--t-page); }
html[data-theme="dark"] input::placeholder { color: #6f8296; }

/* --- En-têtes --- */
html[data-theme="dark"] .top-header,
html[data-theme="dark"] .hist-header,
html[data-theme="dark"] .hist-top { background: var(--t-header); }
html[data-theme="dark"] .top-header { border-bottom-color: #1d2936; box-shadow: none; }
html[data-theme="dark"] .hist-header.scrolled { box-shadow: 0 1px 0 #1d2936; }
html[data-theme="dark"] .top-header .header-title,
html[data-theme="dark"] .top-header .back-btn,
html[data-theme="dark"] .top-header .icon-btn,
html[data-theme="dark"] .hist-title,
html[data-theme="dark"] .hist-mini,
html[data-theme="dark"] .hist-account { color: var(--t-muted); }
html[data-theme="dark"] #open-edit-btn { color: var(--t-blue); }
html[data-theme="dark"] .hist-title-row svg path,
html[data-theme="dark"] .hist-balance svg path { stroke: var(--t-muted); }
html[data-theme="dark"] .hist-balance { color: #fff; }

/* --- Barre du bas --- */
html[data-theme="dark"] .bottom-nav { background: #263a4f; border-top-color: #1d2936; box-shadow: none; }
html[data-theme="dark"] .nav-item span,
html[data-theme="dark"] .nav-coupon-btn span { color: var(--t-muted); }
html[data-theme="dark"] .nav-item.historique-item.active span,
html[data-theme="dark"] .nav-coupon-btn.active span { color: var(--t-blue); font-weight: 700; }
html[data-theme="dark"] .coupon-circle-icon { box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }

/* --- Historique : boutons, stats, cartes --- */
html[data-theme="dark"] .hist-actions button { background: var(--t-deep); color: var(--t-blue); }
html[data-theme="dark"] .hist-actions button.deposit { background: #2d5348; color: var(--t-green); }
html[data-theme="dark"] .hist-actions .deposit svg circle { stroke: #2d5348; }
html[data-theme="dark"] .hist-actions .deposit svg path { stroke: #2d5348; }
html[data-theme="dark"] .hist-actions button:not(.deposit) svg circle { fill: var(--t-deep); }
html[data-theme="dark"] .hist-stats,
html[data-theme="dark"] .h-card,
html[data-theme="dark"] .d-card { background: var(--t-card); }
html[data-theme="dark"] .hist-stats { color: var(--t-muted); }
html[data-theme="dark"] .hist-stats b,
html[data-theme="dark"] .h-type,
html[data-theme="dark"] .d-type,
html[data-theme="dark"] .h-row .v,
html[data-theme="dark"] .d-row .v,
html[data-theme="dark"] .d-ev { color: #fff; }
html[data-theme="dark"] .h-date,
html[data-theme="dark"] .d-date,
html[data-theme="dark"] .d-num,
html[data-theme="dark"] .h-row .l,
html[data-theme="dark"] .d-row .l,
html[data-theme="dark"] .hist-empty { color: var(--t-muted); }
html[data-theme="dark"] .h-body { border-top-color: var(--t-line); }
html[data-theme="dark"] .d-sep { border-top-color: var(--border-dashed); }
html[data-theme="dark"] .d-sep::before,
html[data-theme="dark"] .d-sep::after { background: var(--t-page); }
html[data-theme="dark"] .d-ico { background: var(--t-deep); }
html[data-theme="dark"] .ico-check circle { stroke: var(--t-card); }
/* ===== Icônes (balle, combiné, bouton d'affichage) : gris doux, détails = couleur du fond ===== */

/* Parties colorées -> gris */
html[data-theme="dark"] .ico-main [fill="#5282A0"],
html[data-theme="dark"] .ico-main [fill="#577e99"],
html[data-theme="dark"] .sport-ico-esport path,
html[data-theme="dark"] .ico-fifa-main text,
html[data-theme="dark"] .events-combo-ico [fill="#577e99"],
html[data-theme="dark"] .hist-icon svg [fill="#5B86A6"],
html[data-theme="dark"] .hist-icon svg [fill="#577e99"] { fill: #8fa2b5; }
html[data-theme="dark"] .hist-icon svg [stroke="#577e99"] { stroke: #7f8e9e; }
html[data-theme="dark"] .h-count svg,
html[data-theme="dark"] .d-ev svg { fill: #7f8e9e; }

/* Parties blanches -> couleur de la carte (affichage compact + page détail) */
html[data-theme="dark"] .h-ico .ico-main [fill="#fff"],
html[data-theme="dark"] .h-ico .ico-main [fill="#ffffff"],
html[data-theme="dark"] .events-combo-ico [fill="#ffffff"] { fill: var(--t-card); }
html[data-theme="dark"] .h-ico .ico-main [stroke="#fff"],
html[data-theme="dark"] .h-ico .ico-main [stroke="#ffffff"],
html[data-theme="dark"] .events-combo-ico [stroke="#ffffff"] { stroke: var(--t-card); }

/* Parties blanches -> couleur du rond sombre (affichage détaillé) */
html[data-theme="dark"] .d-ico .ico-main [fill="#fff"],
html[data-theme="dark"] .d-ico .ico-main [fill="#ffffff"] { fill: var(--t-deep); }
html[data-theme="dark"] .d-ico .ico-main [stroke="#fff"],
html[data-theme="dark"] .d-ico .ico-main [stroke="#ffffff"] { stroke: var(--t-deep); }

/* Bouton de changement d'affichage : fentes = couleur de l'en-tête */
html[data-theme="dark"] .hist-icon svg [fill="#FFFFFF"],
html[data-theme="dark"] .hist-icon svg [fill="#fff"] { fill: var(--t-header); }
html[data-theme="dark"] .hist-icon svg [stroke="#fff"] { stroke: var(--t-header); }

/* Couleurs de statut (à garder APRÈS les règles .v ci-dessus) */
html[data-theme="dark"] .h-row .v.paid,
html[data-theme="dark"] .d-row .v.paid { color: var(--t-green); }
html[data-theme="dark"] .h-row .v.accepted,
html[data-theme="dark"] .d-row .v.accepted { color: #5b9bd5; }
html[data-theme="dark"] .h-row .v.lost,
html[data-theme="dark"] .d-row .v.lost { color: #ef5350; }

/* --- Détail du pari (index.php) --- */
html[data-theme="dark"] .match-sport-icon svg [fill="#5282A0"],
html[data-theme="dark"] .match-sport-icon svg [fill="#577e99"] { fill: #7f8e9e; }
html[data-theme="dark"] .match-sport-icon svg [fill="#fff"],
html[data-theme="dark"] .match-sport-icon svg [fill="#ffffff"] { fill: var(--bg-card); }
html[data-theme="dark"] .match-sport-icon svg [stroke="#fff"],
html[data-theme="dark"] .match-sport-icon svg [stroke="#ffffff"] { stroke: var(--bg-card); }

html[data-theme="dark"] .match-category-line,
html[data-theme="dark"] .match-category-text,
html[data-theme="dark"] .match-category-name,
html[data-theme="dark"] .score-sub-row,
html[data-theme="dark"] .live-label-text,
html[data-theme="dark"] .match-date-line,
html[data-theme="dark"] .match-time-label { color: var(--t-muted); }
html[data-theme="dark"] .team-name,
html[data-theme="dark"] .vs-text,
html[data-theme="dark"] .vs-badge,
html[data-theme="dark"] .score-main,
html[data-theme="dark"] .market-label,
html[data-theme="dark"] .market-odds,
html[data-theme="dark"] .live-elapsed-time,
html[data-theme="dark"] .fifa-badge { color: #fff; }
html[data-theme="dark"] .fifa-sport-mark { color: #8397ad; }
html[data-theme="dark"] .match-sport-col .sport-ball-ico,
html[data-theme="dark"] .match-sport-col .sport-esport-ico,
html[data-theme="dark"] .match-sport-col .sport-morpion-ico { color: var(--t-muted); }
html[data-theme="dark"] .status-badge-val.accepted,
html[data-theme="dark"] .match-status-badge.accepted { color: #5b9bd5; }
html[data-theme="dark"] .ticket-actions-container { background: var(--t-card); box-shadow: 0 -2px 8px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .btn-duplicate,
html[data-theme="dark"] .btn-unvalidate,
html[data-theme="dark"] .bal-actions .cancel { background: #34506b; color: #6fa8e6; }

/* --- Coupon (coupon.php) --- */
html[data-theme="dark"] .cp-card { background: var(--t-card); }
html[data-theme="dark"] .cp-save-bar { background: var(--t-card); box-shadow: 0 -2px 8px rgba(0, 0, 0, .25); }
html[data-theme="dark"] .cp-validate-note,
html[data-theme="dark"] .admin-section-title,
html[data-theme="dark"] .admin-form-group label { color: var(--t-muted); }
html[data-theme="dark"] .cp-validate-status { color: #fff; }
html[data-theme="dark"] .admin-form-group input,
html[data-theme="dark"] .admin-form-group select { background: var(--t-deep); color: #fff; border-color: var(--t-line); }
html[data-theme="dark"] .btn-secondary { background: var(--t-deep); color: #d5dee8; border-color: var(--t-line); }
html[data-theme="dark"] .admin-match-item { background: var(--t-deep); border-color: var(--t-line); }
html[data-theme="dark"] .admin-match-header { border-bottom-color: var(--t-line); }
html[data-theme="dark"] .admin-match-title { color: #ffffff; }
html[data-theme="dark"] .admin-sport-block { background: var(--t-card); border-color: var(--t-line); }
html[data-theme="dark"] .admin-sport-label { color: #8ec1f5; }
html[data-theme="dark"] .team-editor-box { background: var(--t-card); border-color: var(--t-line); }
html[data-theme="dark"] .team-editor-title { color: #8ec1f5; }
html[data-theme="dark"] .admin-drawer { background: var(--t-card); }
html[data-theme="dark"] .admin-drawer-header { background: var(--t-deep); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .admin-drawer-header h3 { color: #fff; }
html[data-theme="dark"] .admin-close-btn { background: var(--t-line); color: #fff; }
html[data-theme="dark"] .ss-input-row { background: var(--t-deep); border-color: var(--t-line); }
html[data-theme="dark"] .ss-input { color: #fff; }
html[data-theme="dark"] .ss-dropdown { background: var(--t-card); border-color: var(--t-line); }
html[data-theme="dark"] .ss-group-label { background: var(--t-deep); color: var(--t-muted); border-bottom-color: var(--t-line); }
html[data-theme="dark"] .ss-item { color: #fff; }
html[data-theme="dark"] .ss-item:hover { background: #34506b; color: #fff; }
html[data-theme="dark"] .ss-item img { border-color: var(--t-line); }

/* --- Fenêtres (solde + thème) --- */
html[data-theme="dark"] .bal-modal { background: var(--t-card); }
html[data-theme="dark"] .bal-head span,
html[data-theme="dark"] .bal-check,
html[data-theme="dark"] .bal-break b,
html[data-theme="dark"] .th-opt { color: #fff; }
html[data-theme="dark"] .bal-x { background: var(--t-deep); color: var(--t-muted); }
html[data-theme="dark"] .bal-tabs { background: var(--t-deep); }
html[data-theme="dark"] .bal-tabs button,
html[data-theme="dark"] .bal-field label,
html[data-theme="dark"] .bal-break { color: var(--t-muted); }
html[data-theme="dark"] .bal-tabs button.active { background: var(--t-card); color: #fff; box-shadow: none; }
html[data-theme="dark"] .bal-field input[type=number] { background: var(--t-deep); color: #fff; border-color: var(--t-line); }
html[data-theme="dark"] .bal-break { background: var(--t-deep); }
html[data-theme="dark"] .bal-break .tot { border-top-color: var(--t-line); }
html[data-theme="dark"] .bal-break .g b { color: var(--t-green); }
html[data-theme="dark"] .bal-break .r b { color: #ef5350; }
html[data-theme="dark"] .bal-add-row button { background: #2d5348; }
html[data-theme="dark"] .th-opt,
html[data-theme="dark"] .th-sw { border-color: var(--t-line); }
html[data-theme="dark"] .th-opt.active { border-color: var(--t-blue); }
html[data-theme="dark"] .th-check { color: var(--t-blue); }

/* --- Nouveaux sports (Poker, Morpion, Dés, Extra info) --- */
html[data-theme="dark"] .tvbet-poker-title { color: #fff; }
html[data-theme="dark"] .tvbet-poker-lines { color: var(--t-muted); }
html[data-theme="dark"] .morpion-score-line { color: var(--t-muted); }
html[data-theme="dark"] .morpion-grids-pre { color: var(--t-muted); }
html[data-theme="dark"] .extra-info-title { color: var(--t-blue); }
html[data-theme="dark"] .extra-info-value { color: #fff; }
html[data-theme="dark"] .match-sport-icon svg [stroke="#5282A0"],
html[data-theme="dark"] .ico-main [stroke="#5282A0"],
html[data-theme="dark"] .sport-ico-morpion *,
html[data-theme="dark"] .sport-morpion-ico * { stroke: #8fa2b5; }
html[data-theme="dark"] .score-sub-row { color: var(--t-muted); }
html[data-theme="dark"] .d-simple-event { color: var(--t-muted); }
html[data-theme="dark"] .d-sep { border-top-color: #000000; }
html[data-theme="dark"] .d-ico .sport-ico-dice .dice-front { stroke: var(--t-deep); }
html[data-theme="dark"] .h-ico .sport-ico-dice .dice-front { stroke: var(--t-card); }
html[data-theme="dark"] .sport-dice-ico { color: var(--t-muted); }
html[data-theme="dark"] .sport-dice-ico .dice-dot { fill: var(--bg-card); }
html[data-theme="dark"] .sport-dice-ico .dice-front { stroke: var(--bg-card); }
html[data-theme="dark"] .sport-poker-ico { color: var(--t-muted); }
html[data-theme="dark"] .sport-poker-ico .poker-pad { stroke: var(--bg-card); }
html[data-theme="dark"] .sport-poker-ico .poker-dot { fill: var(--bg-card); }
html[data-theme="dark"] .d-ico .sport-ico-poker .poker-pad { stroke: var(--t-deep); }
html[data-theme="dark"] .d-ico .sport-ico-poker .poker-dot { fill: var(--t-deep); }
html[data-theme="dark"] .h-ico .sport-ico-poker .poker-pad { stroke: var(--t-card); }
html[data-theme="dark"] .h-ico .sport-ico-poker .poker-dot { fill: var(--t-card); }
html[data-theme="dark"] .sport-esport-ico { color: #8fa2b5; }
html[data-theme="dark"] .player-photo-square { background: #131d2b; }