/*
 * Plugin Accessibilité GLPI — Mode sombre « Ardoise Bleu »
 *
 * Thème sombre optionnel pour l'interface helpdesk / centrale / anonyme.
 * Activé par data-a11y-dark="1" sur <html> (préférence utilisateur `dark_mode`),
 * via la bascule du widget. AUCUNE auto-activation depuis l'OS.
 *
 * Feuille autonome : elle ne dépend PAS de l'interrupteur maître
 * (data-a11y-baseline), au même titre que a11y-contrast.css, a11y-font.css,
 * a11y-motion.css ou a11y-spacing.css. Le thème s'applique dès que
 * l'utilisateur coche « Mode sombre » dans le widget. La promesse du plugin
 * — aucune modification visible sans action explicite de l'utilisateur — tient
 * par l'absence totale d'auto-activation : rien ici ne s'allume tout seul.
 *
 * Parti pris visuel : gris-ardoise neutre froid, cohérent avec l'identité GLPI,
 * avec un bleu clair comme seule note vive (actions primaires, liens, onglet
 * actif). Trois niveaux de surface bien distincts donnent du relief ; le texte
 * est franc (≈ 14:1) pour une lisibilité maximale. Contrastes vérifiés WCAG
 * 2.1 AA, la plupart AAA.
 */

html[data-a11y-dark="1"] {
    --a11y-dark-bg:        #15181d;  /* fond page — ardoise sombre */
    --a11y-dark-surface:   #1e232b;  /* cartes, navbar, modales */
    --a11y-dark-surface-2: #283039;  /* champs, lignes alternées, survol */
    --a11y-dark-border:    #3a444f;  /* bordures — séparation nette */
    --a11y-dark-text:      #e6e9ee;  /* gris très clair — ≈ 14:1 sur le fond */
    --a11y-dark-muted:     #9aa6b2;  /* gris-bleu — ≈ 7:1 sur le fond */
    --a11y-dark-accent:    #339af0;  /* bleu — actions primaires */
    --a11y-dark-accent-hi: #4dabf7;  /* bleu survol */
    --a11y-dark-link:      #6cb6f5;  /* lien bleu clair — ≈ 7:1 sur le fond */
    --a11y-dark-on-accent: #0a1016;  /* texte sur aplat bleu */

    color-scheme: dark;

    /* Le focus bleu de base (#005FCC) ne tient que ~2:1 sur fond sombre :
       on le remplace par un bleu clair (≈ 7:1) — corrige un défaut latent.
       Le token n'est consommé que par la règle :focus-visible de a11y-base.css,
       elle-même sous interrupteur maître : sans lui, il reste sans effet. */
    --a11y-focus-color:    #7cc0ff;
}

/* Barre de défilement assortie ──────────────────────────────────────────────── */
html[data-a11y-dark="1"] {
    scrollbar-color: var(--a11y-dark-border) var(--a11y-dark-bg);
}

/* ── Fond global et texte de base ──────────────────────────────────────────── */
html[data-a11y-dark="1"] body,
html[data-a11y-dark="1"] .page,
html[data-a11y-dark="1"] .page-wrapper,
html[data-a11y-dark="1"] .page-body,
html[data-a11y-dark="1"] .content-wrapper,
html[data-a11y-dark="1"] .container-fluid {
    background-color: var(--a11y-dark-bg) !important;
    color: var(--a11y-dark-text) !important;
}

/* ── Texte courant et titres ───────────────────────────────────────────────── */
html[data-a11y-dark="1"] p,
html[data-a11y-dark="1"] li,
html[data-a11y-dark="1"] dt,
html[data-a11y-dark="1"] dd,
html[data-a11y-dark="1"] span:not([style*="color"]),
html[data-a11y-dark="1"] label,
html[data-a11y-dark="1"] h1,
html[data-a11y-dark="1"] h2,
html[data-a11y-dark="1"] h3,
html[data-a11y-dark="1"] h4,
html[data-a11y-dark="1"] h5,
html[data-a11y-dark="1"] h6,
html[data-a11y-dark="1"] .page.title,
html[data-a11y-dark="1"] .page-title {
    color: var(--a11y-dark-text) !important;
}

html[data-a11y-dark="1"] .text-muted,
html[data-a11y-dark="1"] .form-hint,
html[data-a11y-dark="1"] .form-text,
html[data-a11y-dark="1"] small {
    color: var(--a11y-dark-muted) !important;
}

/* ── Surfaces : cartes, navbar, menus, modales, accordéons ─────────────────── */
html[data-a11y-dark="1"] .card,
html[data-a11y-dark="1"] .card-header,
html[data-a11y-dark="1"] .card-body,
html[data-a11y-dark="1"] .card-footer,
html[data-a11y-dark="1"] .navbar,
html[data-a11y-dark="1"] .navbar-light,
html[data-a11y-dark="1"] .dropdown-menu,
html[data-a11y-dark="1"] .modal-content,
html[data-a11y-dark="1"] .modal-header,
html[data-a11y-dark="1"] .modal-footer,
html[data-a11y-dark="1"] .offcanvas,
html[data-a11y-dark="1"] .accordion-item,
html[data-a11y-dark="1"] .accordion-button,
html[data-a11y-dark="1"] .list-group-item,
html[data-a11y-dark="1"] .popover,
html[data-a11y-dark="1"] .popover-body {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}

html[data-a11y-dark="1"] .dropdown-item {
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .dropdown-item:hover,
html[data-a11y-dark="1"] .dropdown-item:focus {
    background-color: var(--a11y-dark-surface-2) !important;
}

/* ── Liens — ambre clair + soulignement (WCAG 1.4.1 : pas la couleur seule) ── */
html[data-a11y-dark="1"] a {
    color: var(--a11y-dark-link) !important;
    text-decoration-color: color-mix(in srgb, var(--a11y-dark-link) 55%, transparent);
}
html[data-a11y-dark="1"] a:hover {
    color: var(--a11y-dark-accent-hi) !important;
}
/* Liens qui sont des boutons / éléments de nav : pas de soulignement imposé. */
html[data-a11y-dark="1"] a.btn,
html[data-a11y-dark="1"] a.nav-link,
html[data-a11y-dark="1"] a.dropdown-item,
html[data-a11y-dark="1"] a.page-link {
    text-decoration: none !important;
}

/* ── Champs de formulaire ──────────────────────────────────────────────────── */
html[data-a11y-dark="1"] input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
html[data-a11y-dark="1"] select,
html[data-a11y-dark="1"] textarea,
html[data-a11y-dark="1"] .form-control,
html[data-a11y-dark="1"] .form-select,
html[data-a11y-dark="1"] .input-group-text {
    background-color: var(--a11y-dark-surface-2) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}

html[data-a11y-dark="1"] input::placeholder,
html[data-a11y-dark="1"] textarea::placeholder {
    color: var(--a11y-dark-muted) !important;
}

/* Champs désactivés / lecture seule — chez GLPI ils portent de l'information
   (page préférences entière en lecture) : rester lisible (≥ 4.5:1) tout en
   marquant l'état par la surface plus sombre. opacity:1 neutralise le gris
   fantôme de Tabler/Bootstrap ; -webkit-text-fill-color est requis car WebKit
   ignore `color` sur les contrôles désactivés. */
html[data-a11y-dark="1"] input:disabled,
html[data-a11y-dark="1"] select:disabled,
html[data-a11y-dark="1"] textarea:disabled,
html[data-a11y-dark="1"] .form-control:disabled,
html[data-a11y-dark="1"] .form-control[readonly],
html[data-a11y-dark="1"] .form-select:disabled {
    background-color: var(--a11y-dark-surface) !important;
    color: #b8c2cd !important;               /* ≈ 8:1 sur la surface */
    -webkit-text-fill-color: #b8c2cd;
    opacity: 1 !important;
}

/* Onglets / liens de navigation désactivés — lisibles mais atténués. */
html[data-a11y-dark="1"] .nav-link.disabled,
html[data-a11y-dark="1"] .nav-link[aria-disabled="true"] {
    color: var(--a11y-dark-muted) !important;
    opacity: 1 !important;
}

/* Survol/focus de champ : liseré bleu discret. */
html[data-a11y-dark="1"] .form-control:focus,
html[data-a11y-dark="1"] .form-select:focus,
html[data-a11y-dark="1"] textarea:focus {
    border-color: var(--a11y-dark-accent) !important;
}

/* ── Select2 (listes déroulantes GLPI) — composant tiers non couvert par les
      règles input/select natives ci-dessus ────────────────────────────────── */
html[data-a11y-dark="1"] .select2-container--default .select2-selection {
    background-color: var(--a11y-dark-surface-2) !important;
    border-color: var(--a11y-dark-border) !important;
}
html[data-a11y-dark="1"] .select2-container--default .select2-selection__rendered,
html[data-a11y-dark="1"] .select2-container--default .select2-selection__placeholder {
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .select2-container--default.select2-container--disabled .select2-selection {
    background-color: var(--a11y-dark-surface) !important;
}
html[data-a11y-dark="1"] .select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: #b8c2cd !important;
}
html[data-a11y-dark="1"] .select2-dropdown,
html[data-a11y-dark="1"] .select2-search--dropdown .select2-search__field {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .select2-results__option {
    background-color: var(--a11y-dark-surface) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .select2-results__option--highlighted,
html[data-a11y-dark="1"] .select2-results__option--highlighted[aria-selected] {
    background-color: var(--a11y-dark-accent) !important;
    color: var(--a11y-dark-on-accent) !important;
}

/* Cases / radios cochés — aplat bleu. */
html[data-a11y-dark="1"] .form-check-input:checked {
    background-color: var(--a11y-dark-accent) !important;
    border-color: var(--a11y-dark-accent) !important;
}

/* ── Boutons ───────────────────────────────────────────────────────────────── */
/* Primaire : aplat bleu, texte sombre — la signature de l'identité. */
html[data-a11y-dark="1"] .btn-primary {
    background-color: var(--a11y-dark-accent) !important;
    border-color: var(--a11y-dark-accent) !important;
    color: var(--a11y-dark-on-accent) !important;
}
html[data-a11y-dark="1"] .btn-primary:hover,
html[data-a11y-dark="1"] .btn-primary:focus {
    background-color: var(--a11y-dark-accent-hi) !important;
    border-color: var(--a11y-dark-accent-hi) !important;
    color: var(--a11y-dark-on-accent) !important;
}

/* Secondaires / neutres : surface + bordure chaude. */
html[data-a11y-dark="1"] .btn-secondary,
html[data-a11y-dark="1"] .btn-light,
html[data-a11y-dark="1"] .btn-outline-secondary,
html[data-a11y-dark="1"] .btn-default {
    background-color: var(--a11y-dark-surface-2) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .btn-secondary:hover,
html[data-a11y-dark="1"] .btn-light:hover,
html[data-a11y-dark="1"] .btn-outline-secondary:hover,
html[data-a11y-dark="1"] .btn-default:hover {
    background-color: var(--a11y-dark-border) !important;
}

/* ── Badges, alertes ───────────────────────────────────────────────────────── */
html[data-a11y-dark="1"] .alert {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}

/* ── Tableaux ──────────────────────────────────────────────────────────────── */
html[data-a11y-dark="1"] table,
html[data-a11y-dark="1"] .table,
html[data-a11y-dark="1"] th,
html[data-a11y-dark="1"] td {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] thead th {
    background-color: var(--a11y-dark-surface-2) !important;
}
html[data-a11y-dark="1"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--a11y-dark-surface-2) !important;
}
html[data-a11y-dark="1"] .table-hover > tbody > tr:hover > * {
    background-color: var(--a11y-dark-border) !important;
}

/* Tabler/Bootstrap 5 peignent zébrage, survol et état actif par un
   box-shadow inset 9999px piloté par des tokens : il recouvre le
   background-color ci-dessus (lignes blanches dans la liste des tickets).
   On neutralise les tokens ET le box-shadow ; le zébrage est porté par
   background-color. */
html[data-a11y-dark="1"] {
    --tblr-table-bg: var(--a11y-dark-surface);
    --tblr-table-color: var(--a11y-dark-text);
    --tblr-table-border-color: var(--a11y-dark-border);
    --tblr-table-accent-bg: transparent;
    --tblr-table-striped-bg: var(--a11y-dark-surface-2);
    --tblr-table-striped-color: var(--a11y-dark-text);
    --tblr-table-hover-bg: var(--a11y-dark-border);
    --tblr-table-hover-color: var(--a11y-dark-text);
    --tblr-table-active-bg: var(--a11y-dark-border);
    --tblr-table-active-color: var(--a11y-dark-text);
    --bs-table-bg: var(--a11y-dark-surface);
    --bs-table-color: var(--a11y-dark-text);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-bg: var(--a11y-dark-surface-2);
    --bs-table-hover-bg: var(--a11y-dark-border);
}
html[data-a11y-dark="1"] tr,
html[data-a11y-dark="1"] .table > :not(caption) > * > * {
    box-shadow: none !important;
}
html[data-a11y-dark="1"] tr {
    background-color: transparent !important;
}
html[data-a11y-dark="1"] .search-results > tbody > tr:nth-of-type(even) > td {
    background-color: var(--a11y-dark-surface-2) !important;
}
html[data-a11y-dark="1"] .search-results > tbody > tr:hover > td {
    background-color: var(--a11y-dark-border) !important;
}

/* Pastilles à couleur métier (entité, étiquettes Tag, priorité…) : GLPI leur
   donne un fond clair en style inline. On garde ce fond (information) mais on
   rend un texte sombre lisible au lieu du texte clair forcé plus haut. */
html[data-a11y-dark="1"] span[style*="background"]:not([style^="color"]):not([style*=" color"]):not([style*=";color"]),
html[data-a11y-dark="1"] .badge.bg-light,
html[data-a11y-dark="1"] .badge.bg-white {
    color: #1a1d21 !important;
}

/* Pastilles .glpi-badge (colonne Entité…) : fond clair calculé par GLPI →
   fond sombre, bordure et texte clair. */
html[data-a11y-dark="1"] .glpi-badge {
    background-color: var(--a11y-dark-surface-2) !important;
    border: 1px solid var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}

/* Bouton « Trier » de la recherche : état actif orange → texte invisible. */
html[data-a11y-dark="1"] .show-search-sorts,
html[data-a11y-dark="1"] .show-search-sorts.btn-active-sort {
    background-color: var(--a11y-dark-surface-2) !important;
    border-color: var(--a11y-dark-accent) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .show-search-sorts * {
    color: var(--a11y-dark-text) !important;
}

/* ── Onglets, fil d'ariane, pagination ─────────────────────────────────────── */
html[data-a11y-dark="1"] .nav-tabs,
html[data-a11y-dark="1"] .breadcrumb {
    border-color: var(--a11y-dark-border) !important;
}
html[data-a11y-dark="1"] .nav-tabs .nav-link {
    color: var(--a11y-dark-muted) !important;
    border-color: transparent !important;
}
/* Onglet actif : repère bleu — pas seulement la couleur, aussi la bordure. */
html[data-a11y-dark="1"] .nav-tabs .nav-link.active {
    color: var(--a11y-dark-text) !important;
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    border-bottom-color: var(--a11y-dark-accent) !important;
    box-shadow: inset 0 -2px 0 0 var(--a11y-dark-accent);
}
html[data-a11y-dark="1"] .breadcrumb-item,
html[data-a11y-dark="1"] .breadcrumb-item.active {
    color: var(--a11y-dark-muted) !important;
}
html[data-a11y-dark="1"] .page-link {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] .page-item.active .page-link {
    background-color: var(--a11y-dark-accent) !important;
    border-color: var(--a11y-dark-accent) !important;
    color: var(--a11y-dark-on-accent) !important;
}

/* ── Code, préformaté, raccourcis clavier ──────────────────────────────────── */
html[data-a11y-dark="1"] code,
html[data-a11y-dark="1"] pre,
html[data-a11y-dark="1"] kbd {
    background-color: var(--a11y-dark-surface-2) !important;
    border-color: var(--a11y-dark-border) !important;
    color: var(--a11y-dark-text) !important;
}

/* ── Séparateurs ───────────────────────────────────────────────────────────── */
html[data-a11y-dark="1"] hr,
html[data-a11y-dark="1"] .dropdown-divider {
    border-color: var(--a11y-dark-border) !important;
}

/* ── Utilitaires bg-*-subtle (ex. cartes Marketplace « à mettre à jour ») ────
   Fond pastel clair natif → fond sombre teinté. Warning/danger gardent un
   liseré gauche : l'état n'est pas porté par la seule couleur (WCAG 1.4.1). */
html[data-a11y-dark="1"] .bg-primary-subtle   { --a11y-subtle: #339af0; }
html[data-a11y-dark="1"] .bg-secondary-subtle,
html[data-a11y-dark="1"] .bg-light-subtle     { --a11y-subtle: #9aa6b2; }
html[data-a11y-dark="1"] .bg-success-subtle   { --a11y-subtle: #51cf66; }
html[data-a11y-dark="1"] .bg-info-subtle      { --a11y-subtle: #3bc9db; }
html[data-a11y-dark="1"] .bg-warning-subtle   { --a11y-subtle: #f59f00; }
html[data-a11y-dark="1"] .bg-danger-subtle    { --a11y-subtle: #ff6b6b; }
html[data-a11y-dark="1"] :is(.bg-primary-subtle, .bg-secondary-subtle, .bg-light-subtle,
    .bg-success-subtle, .bg-info-subtle, .bg-warning-subtle, .bg-danger-subtle) {
    background-color: color-mix(in srgb, var(--a11y-subtle) 18%, var(--a11y-dark-surface)) !important;
    color: var(--a11y-dark-text) !important;
}
html[data-a11y-dark="1"] :is(.bg-warning-subtle, .bg-danger-subtle) {
    box-shadow: inset 4px 0 0 var(--a11y-subtle);
}
html[data-a11y-dark="1"] :is(.bg-primary-subtle, .bg-secondary-subtle, .bg-light-subtle,
    .bg-success-subtle, .bg-info-subtle, .bg-warning-subtle, .bg-danger-subtle) :not(a):not(i) {
    color: var(--a11y-dark-text) !important;
}

/* ── Onglets inactifs (ex. « Découvrir » de la Marketplace) ─────────────────── */
html[data-a11y-dark="1"] .nav-tabs .nav-link:not(.active) {
    background-color: transparent !important;
}
html[data-a11y-dark="1"] .nav-tabs .nav-link:not(.active):hover {
    background-color: var(--a11y-dark-surface-2) !important;
    color: var(--a11y-dark-text) !important;
}

/* ── Marketplace : cartes de plugins ────────────────────────────────────────── */
html[data-a11y-dark="1"] .marketplace .plugin {
    background-color: var(--a11y-dark-surface) !important;
    border-color: var(--a11y-dark-border) !important;
}
/* ── Accueil interface simplifiée : bandeaux recherche / tuiles / tickets ───
   Peints par des tokens GLPI (css/helpdesk_home.scss) ; on les redéfinit et
   on double par un fond explicite si une palette les fixe en dur. */
html[data-a11y-dark="1"] {
    --glpi-helpdesk-header: var(--a11y-dark-surface);
    --glpi-helpdesk-tiles-section-bg: var(--a11y-dark-bg);
    --glpi-helpdesk-tabs-section-bg: var(--a11y-dark-bg);
}
html[data-a11y-dark="1"] .search-banner {
    background: var(--a11y-dark-surface) !important;
}
html[data-a11y-dark="1"] .helpdesk-home-container,
html[data-a11y-dark="1"] .tiles-banner,
html[data-a11y-dark="1"] .tickets-banner {
    background: var(--a11y-dark-bg) !important;
}
html[data-a11y-dark="1"] .tickets-banner :is(.nav-tabs, .nav-pills) .nav-link:not(.active) {
    background-color: transparent !important;
    color: var(--a11y-dark-muted) !important;
    opacity: 1 !important;
}
html[data-a11y-dark="1"] .tickets-banner :is(.nav-tabs, .nav-pills) .nav-link:not(.active) * {
    color: var(--a11y-dark-muted) !important;
}

html[data-a11y-dark="1"] .marketplace .plugin .misc-right {
    color: var(--a11y-dark-muted) !important;
}

/* ── Widget « Encre & Craie » — variante sombre par override de tokens ──────
   Le widget suit le mode sombre en inversant simplement sa palette :
   toutes les règles de a11y-base.css consomment ces variables. */
html[data-a11y-dark="1"] {
    --aw-bg:           #0e0f14;
    --aw-bg-surface:   #1b1d26;
    --aw-bg-hover:     rgba(255 255 255 / .06);
    --aw-border:       rgba(255 255 255 / .12);
    --aw-border-hover: rgba(255 255 255 / .22);
    --aw-text:         #eef1f5;
    --aw-text-muted:   #a7b0bd;  /* ≈ 7:1 sur fond sombre (AAA) */
    --aw-accent:       #7CA9FF;  /* outremer éclairci — ≈ 7:1 sur #0e0f14 */
    --aw-accent-strong: #A8C5FF;
    --aw-accent-glow:  rgba(124 169 255 / .2);
    --aw-accent-dim:   rgba(124 169 255 / .14);
    --aw-tile-bg:      #1b1d26;
    --aw-on-accent:    #0e0f14;  /* texte sombre sur tuile sélectionnée claire ≈ 8:1 */
    --aw-trigger-bg:   #1A3FB8;
    --aw-knob-on:      #0e0f14;  /* pastille sombre sur piste claire */
    --aw-track-off:    #22232e;
    --aw-shadow-panel: 0 32px 64px rgba(0 0 0 / .65),
                       0 0 0 1px rgba(255 255 255 / .06);
}

html[data-a11y-dark="1"] #a11y-panel,
html[data-a11y-dark="1"] #a11y-trigger {
    color-scheme: dark;
}