/* =============================================================================
 * Synergy Forms — mode sombre (docs-claude/Mode-Sombre.md)
 *
 * Tout est sous :root[data-theme="dark"] : sans cet attribut, ce fichier est inerte.
 * L'attribut n'est posé que sur les pages qui déclarent $themeSupport = true avant
 * partials/header.php (les autres restent claires pendant la conversion).
 *
 * Convention des pages converties : var(--jeton, #couleur-claire-d-origine).
 * Les jetons sémantiques ne sont définis QU'ICI : en clair, la valeur de repli
 * (couleur d'origine exacte) s'applique, donc aucune régression du mode clair.
 *
 * Teintes de texte sur fond sombre (approuvées 2026-11-05) : rouge #FF5C77,
 * bleu #6FA8DC, orange #FF7A52 — versions éclaircies des couleurs de marque,
 * pour le texte seulement. Les aplats (boutons, pastilles) gardent les couleurs de marque.
 * ========================================================================== */

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces : le noir de marque devient le fond, la hauteur se lit à la luminosité */
    --surface-page:    #111111;
    --surface-card:    #1A1A1A;
    --surface-raised:  #232323;
    --surface-sunken:  #161616;
    --surface-hover:   #262626;
    --scrim-light:     rgba(17, 17, 17, 0.65);

    /* Bordures */
    --border:          #2E2E2E;
    --border-strong:   #3D3D3D;

    /* Texte */
    --text-primary:    #F2F2F2;
    --text-body:       #D4D4D4;
    --text-secondary:  #B8B8B8;
    --text-muted:      #8A8A8A;

    /* Accents (texte sur fond sombre) */
    --accent-text:     #FF5C77;
    --info-text:       #6FA8DC;
    --info-strong:     #6FA8DC;
    --info-border:     rgba(111, 168, 220, 0.35);
    --info-soft:       rgba(111, 168, 220, 0.12);
    --info-soft-strong: rgba(111, 168, 220, 0.20);
    --success-text:    #7DBA27;
    --success-soft:    rgba(125, 186, 39, 0.14);
    --warning-text:    #FF7A52;
    --warning-soft:    rgba(232, 71, 32, 0.14);
    --danger-soft:     rgba(227, 23, 62, 0.14);

    /* Variables existantes du thème, utilisées par l'en-tête partagé */
    --synergy-gray-light:  #2E2E2E;
    --synergy-gray-medium: #B8B8B8;
    --synergy-gray:        #B8B8B8;   /* gris de marque : employé en texte seulement */
    --synergy-gray-dark:   #D4D4D4;
    --synergy-red-light:   rgba(227, 23, 62, 0.14);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- base */
[data-theme="dark"] body {
    background-color: var(--surface-page) !important;
    color: var(--text-body);
}
/* Indicateur d'environnement : teinte conservée, assombrie */
[data-theme="dark"] body.env-staging     { background-color: #18130F !important; }
[data-theme="dark"] body.env-development { background-color: #0F141A !important; }

/* :where : les couleurs de lien des pages (une classe) l'emportent */
[data-theme="dark"] :where(a) { color: inherit; }

/* Spécificité basse (:where) : bat les règles d'élément du thème (input {…}) mais laisse les classes des pages
   (focus, invalide, désactivé) l'emporter sans !important */
[data-theme="dark"] :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
    background-color: var(--surface-sunken);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
[data-theme="dark"] ::placeholder { color: var(--text-muted); }
/* Titres : synergy-theme.css les met en var(--synergy-black), non redéfini en sombre */
[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) { color: var(--text-primary); }

/* ---------------------------------------------------------------- en-tête partagé */
[data-theme="dark"] .navbar {
    background: var(--surface-card) !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border);
}
/* Signature : un filet rouge de marque sous l'en-tête, dans les deux thèmes, porté par le sombre */
[data-theme="dark"] .navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--synergy-red);
}
/* Logo : version rouge posée directement sur l'en-tête sombre (choix 2026-11-05, plus de plaque claire).
   Pas de recoloration CSS (interdite par Normes-Graphiques.md). */
[data-theme="dark"] .breadcrumb-link { color: var(--text-secondary); }
[data-theme="dark"] .breadcrumb-current { color: var(--text-primary); }
[data-theme="dark"] .breadcrumb-link.home,
[data-theme="dark"] .breadcrumb-link:hover { color: var(--accent-text); }
[data-theme="dark"] .navbar .dropdown-toggle,
[data-theme="dark"] .navbar .dropdown-toggle div { color: var(--text-primary); }
[data-theme="dark"] .language-toggle,
[data-theme="dark"] .language-menu,
[data-theme="dark"] .navbar .dropdown-menu {
    background: var(--surface-raised) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Pied de page partagé (partials/footer.php) */
[data-theme="dark"] .site-footer {
    background-color: var(--surface-card) !important;
    border-top-color: var(--border) !important;
}

/* ---------------------------------------------------------------- sélecteur de thème (partials/header.php) */
.theme-switch { position: relative; }
/* Le sélecteur ajoute un bouton à l'en-tête : espacement resserré sur mobile (pas de défilement horizontal) */
@media (max-width: 768px) { .navbar .navbar-right { gap: 8px !important; } }
.theme-switch-btn {
    width: 38px; height: 38px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border, #f4f4f4); background: var(--surface-card, #ffffff);
    color: var(--text-secondary, #5D5D5D); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: color .2s, border-color .2s;
}
.theme-switch-btn:hover { color: var(--accent-text, #E3173E); border-color: var(--accent-text, #E3173E); }
.theme-switch-btn:focus-visible { outline: 2px solid var(--synergy-red); outline-offset: 2px; }
.theme-switch-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 1001; min-width: 230px; white-space: nowrap;
    background: var(--surface-raised, #ffffff); border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 4px 0;
}
.theme-switch-menu.open { display: block; }
.theme-switch-menu button {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 14px;
    background: none; border: none; cursor: pointer; text-align: left;
    font: inherit; font-size: 0.875rem; color: var(--text-body, #374151);
}
.theme-switch-menu button:hover { background: var(--surface-hover, #f3f4f6); }
.theme-switch-menu button i:first-child { width: 16px; text-align: center; color: var(--text-secondary, #6b7280); }
.theme-switch-menu button .theme-check { margin-left: auto; color: var(--synergy-red); visibility: hidden; }
.theme-switch-menu button[aria-checked="true"] .theme-check { visibility: visible; }
.theme-switch-note {
    padding: 8px 14px 6px; margin-top: 4px; border-top: 1px solid var(--border, #e5e7eb);
    font-size: 0.72rem; line-height: 1.35; color: var(--text-muted, #9ca3af); white-space: normal;
}

/* ---------------------------------------------------------------- SweetAlert2 */
[data-theme="dark"] .swal2-popup {
    background: var(--surface-raised); color: var(--text-body);
}
[data-theme="dark"] .swal2-title { color: var(--text-primary); }
[data-theme="dark"] .swal2-html-container { color: var(--text-body); }
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-strong);
}
[data-theme="dark"] .swal2-validation-message { background: var(--surface-card); color: var(--text-body); }
[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .swal2-close { color: var(--text-muted); }
[data-theme="dark"] .swal2-close:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------- flatpickr */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--surface-raised); border-color: var(--border); box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface-raised); }
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after { border-top-color: var(--surface-raised); }
[data-theme="dark"] .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
[data-theme="dark"] span.flatpickr-weekday,
[data-theme="dark"] .flatpickr-weekdays {
    background: transparent; color: var(--text-primary); fill: var(--text-primary);
}
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option { background: var(--surface-raised); }
[data-theme="dark"] .flatpickr-current-month input.cur-year { color: var(--text-primary); }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg { fill: var(--text-secondary); }
[data-theme="dark"] .flatpickr-day { color: var(--text-body); }
[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus { background: var(--surface-hover); border-color: var(--surface-hover); }
[data-theme="dark"] .flatpickr-day.today { border-color: var(--accent-text); }
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--text-muted); }
[data-theme="dark"] .flatpickr-day.inRange {
    background: var(--danger-soft); border-color: transparent; box-shadow: -5px 0 0 var(--danger-soft), 5px 0 0 var(--danger-soft);
}
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--synergy-red); border-color: var(--synergy-red); color: #FFFFFF;
}

/* flatpickr/themes/light.css (formulaires) peint ces conteneurs en blanc */
[data-theme="dark"] .flatpickr-innerContainer,
[data-theme="dark"] .flatpickr-time { background: var(--surface-raised); }
[data-theme="dark"] .flatpickr-calendar :where(input) { background-color: transparent; }
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--text-primary); }

/* ---------------------------------------------------------------- composants de synergy-theme.css */
[data-theme="dark"] .card { background: var(--surface-card); border-color: var(--border); }
[data-theme="dark"] .toast-message { color: var(--text-body); }

/* ---------------------------------------------------------------- Choices.js (listes de recherche) */
[data-theme="dark"] .choices__inner,
[data-theme="dark"] .choices__input {
    background-color: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-strong);
}
[data-theme="dark"] .choices__list--dropdown,
[data-theme="dark"] .choices__list[aria-expanded] {
    background-color: var(--surface-raised); color: var(--text-body); border-color: var(--border);
}
[data-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted,
[data-theme="dark"] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--surface-hover); }
[data-theme="dark"] .choices__placeholder { color: var(--text-muted); opacity: 1; }
[data-theme="dark"] .choices[data-type*="select-one"]::after { border-top-color: var(--text-secondary); }
[data-theme="dark"] .choices[data-type*="select-one"].is-open::after { border-top-color: transparent; border-bottom-color: var(--text-secondary); }
[data-theme="dark"] .choices[data-type*="select-one"] .choices__input { background-color: var(--surface-sunken); border-bottom-color: var(--border); }

/* ---------------------------------------------------------------- DataTables */
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--surface-hover) !important; border-color: var(--border-strong) !important; color: var(--text-primary) !important;
}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter { color: var(--text-secondary) !important; }

/* ---------------------------------------------------------------- îlot clair
 * Zone qui doit rester claire dans une page sombre (aperçu de document / PDF, rendu imprimable…) :
 * <div class="theme-light-island">. `initial` rend chaque jeton invalide → var(--jeton, #clair) reprend la
 * couleur claire d'origine. Les variables de marque et le texte reviennent aussi à leurs valeurs claires. */
[data-theme="dark"] .theme-light-island {
    color-scheme: light;
    --surface-page: initial;
    --surface-card: initial;
    --surface-raised: initial;
    --surface-sunken: initial;
    --surface-hover: initial;
    --scrim-light: initial;
    --border: initial;
    --border-strong: initial;
    --text-primary: initial;
    --text-body: initial;
    --text-secondary: initial;
    --text-muted: initial;
    --accent-text: initial;
    --info-text: initial;
    --info-strong: initial;
    --info-border: initial;
    --info-soft: initial;
    --info-soft-strong: initial;
    --success-text: initial;
    --success-soft: initial;
    --warning-text: initial;
    --warning-soft: initial;
    --danger-soft: initial;
    --synergy-gray-light: #f4f4f4;
    --synergy-gray-medium: #5D5D5D;
    --synergy-gray: #5D5D5D;
    --synergy-gray-dark: #374151;
    --synergy-red-light: #f8e8eb;
    color: #111111;
}
[data-theme="dark"] .theme-light-island :where(h1, h2, h3, h4, h5, h6) { color: var(--synergy-black, #111111); }
[data-theme="dark"] .theme-light-island :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
    background-color: #FFFFFF; color: #111111; border-color: #d1d5db;
}

/* ---------------------------------------------------------------- impression : toujours clair */
@media print {
    :root[data-theme="dark"] { color-scheme: light; }
    [data-theme="dark"] body { background: #FFFFFF !important; color: #111111; }
}