/* LE THÈME HUD (v1.47) — d'après le terminal CHART/OPS (le dossier « _HUD THEME TEST »), comme TrackMyFund (v2.25, v2.26 :
   static/app/mq/hud.css). Deux choses à part, chargées APRÈS themes.css et gitops.css :

   1. LES COULEURS « HUD — terminal » (data-ht-theme="hud") : menthe et bleu acier sur un fond bleu-vert très sombre. Écrites à la
      main sur le modèle des blocs de themes.css (qui est GÉNÉRÉ : ne pas les y mettre, elles seraient effacées).
   2. LE STYLE HUD (data-ht-style="hud", posé par themes.js) : la FORME seulement — angles droits, équerres aux coins des cartes,
      petits titres en capitales espacées, fine trame de fond, boutons à filet, icônes du menu à coins coupés. Il ne prend que les
      variables du thème actif (--ht-primary…) : il marche avec chaque thème de couleur, en clair comme en sombre.
   Le choix se fait dans « 🎨 Thèmes de couleur » (static/js/themes-ui.js) : Style « Classique / HUD ».
   Le code (fichiers, diffs, adresses, empreintes) garde sa police à chasse fixe : ici, on la garde pour le lire. */

/* ── 1. Les couleurs « HUD — terminal » ─────────────────────────────────────────────────────────────────────────────── */
:root[data-ht-theme="hud"] {
  --ht-primary: #0f9e78; --ht-primary-rgb: 15, 158, 120;
  --ht-link-color: #0f9e78; --ht-link-color-rgb: 15, 158, 120; --ht-link-hover-color: #0c7e60;
  --ht-primary-text-emphasis: #0a6f55;
  --ht-primary-bg-subtle: #d7f2ea;
  --ht-primary-border-subtle: #a0dcca;
  --ht-btn-ht-primary-color: #0f9e78;
  --ht-btn-ht-primary-hover-color: #0c8564;
  --ht-btn-ht-primary-active-background: #d2efe6;
  --ht-info: #2f86b8; --ht-info-rgb: 47, 134, 184;
  --ht-accent: #2f86b8; --ht-accent-rgb: 47, 134, 184;
  --ht-body-bg: #e6eef0; --ht-body-bg-rgb: 230, 238, 240;
  --ht-tertiary-bg: #eff5f6; --ht-tertiary-bg-rgb: 239, 245, 246;
  --ht-gray-100: #edf3f4; --ht-gray-200: #dbe5e8;
  --ht-emphasis-bg: #fafcfc; --ht-navbar-vertical-card-bg-color: #fafcfc;
  --ht-bg-navbar-glass: rgba(230, 238, 240, 0.96);
}
:root[data-ht-theme="hud"][data-bs-theme="dark"] {
  --ht-primary: #4de0b0; --ht-primary-rgb: 77, 224, 176;
  --ht-link-color: #4de0b0; --ht-link-color-rgb: 77, 224, 176; --ht-link-hover-color: #7be9c4;
  --ht-primary-text-emphasis: #b2f3dd;
  --ht-primary-bg-subtle: #1d3d3a;
  --ht-primary-border-subtle: #2b5c52;
  --ht-btn-ht-primary-color: #4de0b0;
  --ht-btn-ht-primary-hover-color: #7be9c4;
  --ht-btn-ht-primary-active-background: #12221f;
  --ht-info: #50a5d5; --ht-info-rgb: 80, 165, 213;
  --ht-accent: #50a5d5; --ht-accent-rgb: 80, 165, 213;
  --ht-success: #3fd6a4; --ht-success-rgb: 63, 214, 164;
  --ht-danger: #f08086; --ht-danger-rgb: 240, 128, 134;
  --ht-body-color: #b4c3cb; --ht-body-color-rgb: 180, 195, 203;
  --ht-body-bg: #17242b; --ht-body-bg-rgb: 23, 36, 43; --ht-quaternary-bg: #17242b; --ht-quaternary-bg-rgb: 23, 36, 43;
  --ht-emphasis-bg: #1c2b33; --ht-emphasis-bg-rgb: 28, 43, 51; --ht-navbar-vertical-card-bg-color: #1c2b33;
  --ht-tertiary-bg: #203039; --ht-tertiary-bg-rgb: 32, 48, 57;
  --ht-gray-100: #1a2830; --ht-gray-200: #2a3b44; --ht-gray-300: #364852;
  --ht-gray-600: #83959f; --ht-gray-900: #dce6eb;
  --ht-bg-navbar-glass: rgba(23, 36, 43, 0.96); --fc-page-bg-color: #17242b;
}
:root[data-ht-theme="hud"][data-ht-tint="strong"] {
  --ht-body-bg: #d8e8e6; --ht-body-bg-rgb: 216, 232, 230;
  --ht-tertiary-bg: #e6f2f0; --ht-tertiary-bg-rgb: 230, 242, 240;
  --ht-gray-100: #e2efed; --ht-gray-200: #cfe0dd;
  --ht-emphasis-bg: #f4faf8; --ht-navbar-vertical-card-bg-color: #f4faf8;
  --ht-bg-navbar-glass: rgba(216, 232, 230, 0.96);
}
:root[data-ht-theme="hud"][data-bs-theme="dark"][data-ht-tint="strong"] {
  --ht-body-bg: #132a2c; --ht-body-bg-rgb: 19, 42, 44; --ht-quaternary-bg: #132a2c; --ht-quaternary-bg-rgb: 19, 42, 44;
  --ht-emphasis-bg: #183234; --ht-emphasis-bg-rgb: 24, 50, 52; --ht-navbar-vertical-card-bg-color: #183234;
  --ht-tertiary-bg: #1c393a; --ht-tertiary-bg-rgb: 28, 57, 58;
  --ht-gray-100: #17302f; --ht-gray-200: #26443f; --ht-gray-300: #315049;
  --ht-bg-navbar-glass: rgba(19, 42, 44, 0.96); --fc-page-bg-color: #132a2c;
}
:root[data-ht-theme="hud"] .btn-primary { --ht-btn-bg: #0f9e78; --ht-btn-border-color: #0f9e78; --ht-btn-hover-bg: #0d8766; --ht-btn-hover-border-color: #0c7e60;
  --ht-btn-active-bg: #0c7e60; --ht-btn-active-border-color: #0b765a; --ht-btn-disabled-bg: #0f9e78; --ht-btn-disabled-border-color: #0f9e78; --ht-btn-focus-shadow-rgb: 15, 158, 120; }
/* En sombre, le bouton menthe porte un texte FONCÉ (le blanc sur la menthe se lit mal). */
:root[data-ht-theme="hud"][data-bs-theme="dark"] .btn-primary { --ht-btn-bg: #4de0b0; --ht-btn-border-color: #4de0b0; --ht-btn-hover-bg: #6be7be; --ht-btn-hover-border-color: #6be7be;
  --ht-btn-active-bg: #3cc89b; --ht-btn-disabled-bg: #4de0b0; --ht-btn-disabled-border-color: #4de0b0; --ht-btn-focus-shadow-rgb: 77, 224, 176;
  --ht-btn-color: #10201c; --ht-btn-hover-color: #10201c; --ht-btn-active-color: #10201c; --ht-btn-disabled-color: #10201c; }
:root[data-ht-theme="hud"] .form-check-input:checked, :root[data-ht-theme="hud"] .form-check-input[type=checkbox]:indeterminate { background-color: #0f9e78; border-color: #0f9e78; }
:root[data-ht-theme="hud"][data-bs-theme="dark"] .form-check-input:checked, :root[data-ht-theme="hud"][data-bs-theme="dark"] .form-check-input[type=checkbox]:indeterminate { background-color: #4de0b0; border-color: #4de0b0; }
:root[data-ht-theme="hud"] body { background-image: radial-gradient(ellipse at 65% 0, rgba(47, 134, 184, 0.07), transparent 60%); background-attachment: fixed; }
:root[data-ht-theme="hud"][data-bs-theme="dark"] body { background-image: radial-gradient(ellipse at 65% 10%, rgba(42, 59, 64, 0.65), transparent 65%), linear-gradient(125deg, #17252d, #1d292f); background-attachment: fixed; }
:root[data-ht-theme="hud"]:not([data-bs-theme="dark"]) .card { --ht-card-bg: #fafcfc; }
:root[data-ht-theme="hud"][data-ht-tint="strong"]:not([data-bs-theme="dark"]) .card { --ht-card-bg: #f4faf8; }

/* ── 2. Le style HUD ────────────────────────────────────────────────────────────────────────────────────────────────── */
:root[data-ht-style="hud"] {
  --hud-line: rgba(40, 70, 85, 0.17);
  --hud-faint: rgba(40, 70, 85, 0.08);
  --hud-grid: rgba(40, 70, 85, 0.035);
  --hud-corner: rgba(var(--ht-primary-rgb), 0.85);
  --hud-cut: polygon(0 0, 74% 0, 100% 26%, 100% 100%, 26% 100%, 0 74%);
  --hud-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ht-body-font-family: var(--hud-font); --ht-font-sans-serif: var(--hud-font);
  --ht-border-radius: 0; --ht-border-radius-sm: 0; --ht-border-radius-lg: 0; --ht-border-radius-xl: 0;
  --ht-border-radius-xxl: 0; --ht-border-radius-2xl: 0; --ht-border-radius-pill: 2px; --ht-card-border-radius: 0;
}
:root[data-ht-style="hud"][data-bs-theme="dark"] {
  --hud-line: rgba(177, 203, 215, 0.17);
  --hud-faint: rgba(177, 203, 215, 0.08);
  --hud-grid: rgba(159, 187, 204, 0.03);
  --ht-border-color: rgba(177, 203, 215, 0.12);
}
:root[data-ht-style="hud"] body { font-family: var(--hud-font); }

/* La trame : un quadrillage de 6 px, à peine visible, fixe derrière la page (sous les motifs des fêtes, s'ils sont allumés). */
:root[data-ht-style="hud"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--hud-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hud-grid) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* La marque : GIT/OPS dans la couleur du texte, la barre oblique à la couleur du thème ; et le LOGO HUD (v1.48, celui de
   static/img/favicon.svg) : la plaque à coins coupés, les équerres des cartes, la branche aux nœuds carrés — dessiné dans brand()
   (server/views.php, .lg-hud) et peint ici aux couleurs du thème actif (un HUD Halloween a son logo orange). Le style classique garde
   l'ancien (.lg-classic). Le badge des décorations (.ht-logo::after) reste par-dessus. */
:root[data-ht-style="hud"] .ht-brand { color: var(--ht-gray-900); font-weight: 600; letter-spacing: 0.08em; }
:root[data-ht-style="hud"] .ht-brand span { color: inherit; }
:root[data-ht-style="hud"] .ht-brand .co-slash { color: var(--ht-primary); transform: none; margin: 0 0.04em; }
:root[data-ht-style="hud"] .ht-ver { border: 1px solid var(--hud-line); padding: 0 0.3rem; margin-left: -0.2rem; letter-spacing: 0.04em; align-self: center; }
:root[data-ht-style="hud"] .ht-logo { background: none; box-shadow: none; }
:root[data-ht-style="hud"] .ht-logo svg { stroke-linecap: butt; stroke-linejoin: miter; }
:root[data-ht-style="hud"] .ht-logo .lg-classic { display: none; }
:root[data-ht-style="hud"] .ht-logo .lg-hud { display: inline; }
:root[data-ht-style="hud"] .ht-logo .hud-plate { fill: rgba(var(--ht-primary-rgb), 0.1); stroke: none; }
:root[data-ht-style="hud"] .ht-logo .hud-rim { fill: none; stroke: var(--ht-primary); stroke-opacity: 0.35; stroke-width: 1.5; }
:root[data-ht-style="hud"] .ht-logo .hud-eq { fill: none; stroke: var(--ht-primary); stroke-width: 3; }
:root[data-ht-style="hud"] .ht-logo .hud-main { fill: none; stroke: var(--ht-primary); stroke-width: 4.2; }
:root[data-ht-style="hud"] .ht-logo .hud-br { fill: none; stroke: var(--ht-info); stroke-width: 4.2; }
:root[data-ht-style="hud"] .ht-logo .hud-node { fill: var(--ht-primary); stroke: none; }
:root[data-ht-style="hud"] .ht-logo .hud-tip { fill: var(--ht-info); stroke: none; }
:root[data-ht-style="hud"] .ht-logo .hud-hole { fill: var(--ht-body-bg); stroke: none; }

/* LES CARTES : à plat, un filet, et les équerres (deux coins pleins, deux à moitié). Les dépôts de la liste aussi. */
:root[data-ht-style="hud"] :is(.card, .go-repo, .go-repos > .go-empty) {
  border-radius: 0; border: 1px solid var(--hud-line); box-shadow: none; position: relative;
}
:root[data-ht-style="hud"] :is(.card, .go-repo)::before, :root[data-ht-style="hud"] :is(.card, .go-repo)::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 6;
  background:
    linear-gradient(var(--hud-corner), var(--hud-corner)) left top / 9px 2px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) left top / 2px 9px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) right bottom / 9px 2px no-repeat,
    linear-gradient(var(--hud-corner), var(--hud-corner)) right bottom / 2px 9px no-repeat;
}
:root[data-ht-style="hud"] :is(.card, .go-repo)::after { transform: scaleX(-1); opacity: 0.5; }
/* Une carte dans une carte : pas d'équerres en cascade. */
:root[data-ht-style="hud"] .card .card::before, :root[data-ht-style="hud"] .card .card::after { display: none; }
:root[data-ht-style="hud"] .card-header, :root[data-ht-style="hud"] .go-cardhead { border-bottom: 1px solid var(--hud-line); background-color: transparent; }
:root[data-ht-style="hud"] .go-cardhead { letter-spacing: 0.03em; }
:root[data-ht-style="hud"] .go-cardhead > .go-ic { color: var(--ht-primary); }
:root[data-ht-style="hud"] :is(.go-dfile, .go-readme) .go-cardhead { background-color: var(--ht-card-bg); }
:root[data-ht-style="hud"] .card-header :is(h5, h6) { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem !important; font-weight: 600; }
:root[data-ht-style="hud"] .card-footer { border-top: 1px solid var(--hud-line); background-color: transparent; }
:root[data-ht-style="hud"] .go-latest { background: rgba(var(--ht-primary-rgb), 0.04); box-shadow: inset 2px 0 0 var(--ht-primary); }
:root[data-ht-style="hud"] .go-repo:hover { transform: none; border-color: rgba(var(--ht-primary-rgb), 0.6); }
:root[data-ht-style="hud"] .go-repoic { background: rgba(var(--ht-primary-rgb), 0.08); border-color: var(--hud-line); }

/* LES TITRES : le titre d'une page suivi de « // » à la couleur du thème ; les petits titres en capitales espacées. */
:root[data-ht-style="hud"] .go-pagehead h2 { font-weight: 500; letter-spacing: 0.01em; }
:root[data-ht-style="hud"] .go-pagehead h2::after { content: " //"; color: var(--ht-primary); font-weight: 400; font-size: 0.8em; }
:root[data-ht-style="hud"] .go-repotitle h1 { font-weight: 600; }
:root[data-ht-style="hud"] :is(.go-h6, .go-dayhead, .go-feednote, .htt-h) { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 600; color: var(--ht-gray-700); }
:root[data-ht-style="hud"] .htt-h .htt-calw { letter-spacing: 0; }
/* Les étiquettes des champs : petites capitales espacées (« MONTANT », « LEVIER » dans le terminal de référence). */
:root[data-ht-style="hud"] .form-label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem !important; font-weight: 600; color: var(--ht-gray-700); }

/* Les alertes : angles droits, un filet à gauche, et des hachures pour les avertissements. */
:root[data-ht-style="hud"] .alert { border-radius: 0; }
:root[data-ht-style="hud"] .alert-warning {
  background-image: repeating-linear-gradient(135deg, rgba(var(--ht-warning-rgb), 0.07) 0 10px, transparent 10px 20px);
}

/* LES BOUTONS : un filet, pas d'ombre ; la couleur du thème au survol. */
:root[data-ht-style="hud"] .btn { border-radius: 0; }
:root[data-ht-style="hud"] [class*="btn-ht-"] { box-shadow: none !important; border: 1px solid var(--hud-line); background-color: rgba(var(--ht-primary-rgb), 0.025); }
:root[data-ht-style="hud"] [class*="btn-ht-"]:hover { border-color: rgba(var(--ht-primary-rgb), 0.6); }
:root[data-ht-style="hud"] .btn-ht-default:hover { color: var(--ht-primary); }
:root[data-ht-style="hud"] .btn-ht-default.active, :root[data-ht-style="hud"] .btn-ht-default:active, :root[data-ht-style="hud"] .ht-seg .btn.active {
  color: var(--ht-primary) !important; background-color: rgba(var(--ht-primary-rgb), 0.13) !important; border-color: rgba(var(--ht-primary-rgb), 0.45) !important; box-shadow: none;
}
:root[data-ht-style="hud"] .btn-ht-warning { border-color: rgba(var(--ht-warning-rgb), 0.45); }
:root[data-ht-style="hud"] .btn-ht-danger { border-color: rgba(var(--ht-danger-rgb), 0.4); }
:root[data-ht-style="hud"] .btn-group > .btn + .btn { margin-left: -1px; }
:root[data-ht-style="hud"] .ht-seg { background: transparent; padding: 0; box-shadow: inset 0 0 0 1px var(--hud-line); }
/* Les onglets pleins (Code / Aperçu, Windows / Linux) : la couleur du thème en teinte et en filet, pas en aplat. */
:root[data-ht-style="hud"] :is(.go-seg a.on, .go-os button.on) { background: rgba(var(--ht-primary-rgb), 0.13); color: var(--ht-primary); box-shadow: inset 0 0 0 1px rgba(var(--ht-primary-rgb), 0.45); }
:root[data-ht-style="hud"] :is(.go-seg, .go-os) { border-color: var(--hud-line); }

/* Champs, menus, fenêtres : angles droits, la couleur du thème au focus. */
:root[data-ht-style="hud"] .form-control:focus, :root[data-ht-style="hud"] .form-select:focus {
  border-color: rgba(var(--ht-primary-rgb), 0.6); box-shadow: 0 0 0 2px rgba(var(--ht-primary-rgb), 0.15);
}
:root[data-ht-style="hud"] :is(.dropdown-menu, .go-menu) { border: 1px solid var(--hud-line); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); }
:root[data-ht-style="hud"] .modal-content { border: 1px solid rgba(var(--ht-primary-rgb), 0.35); box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45); }
:root[data-ht-style="hud"] .modal-header { border-bottom: 1px solid var(--hud-line); }
:root[data-ht-style="hud"] .modal-footer { border-top: 1px solid var(--hud-line); }
:root[data-ht-style="hud"] .modal-title { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; font-weight: 600; }
:root[data-ht-style="hud"] .modal-backdrop.show { opacity: 0.7; }
:root[data-ht-style="hud"] .badge { border-radius: 0; letter-spacing: 0.04em; font-weight: 600; }
:root[data-ht-style="hud"] .table thead th { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

/* LA BARRE DU HAUT : un filet dessous ; la recherche à filet. */
:root[data-ht-style="hud"] .ht-top { border-bottom: 1px solid var(--hud-line); box-shadow: none; }
:root[data-ht-style="hud"] .go-search { background: rgba(var(--ht-primary-rgb), 0.025); border-color: var(--hud-line); }
:root[data-ht-style="hud"] .go-search:focus-within { border-color: rgba(var(--ht-primary-rgb), 0.6); box-shadow: 0 0 0 2px rgba(var(--ht-primary-rgb), 0.15); }

/* LE MENU DE GAUCHE : titres de section espacés ; icônes à coins coupés, la page active en dégradé avec un filet à gauche. */
:root[data-ht-style="hud"] .ht-side { border-right-color: var(--hud-line); }
:root[data-ht-style="hud"] .htn-sec { letter-spacing: 0.16em; font-weight: 600; }
:root[data-ht-style="hud"] .htn-link { margin: 0; }
:root[data-ht-style="hud"] .htn-link .ic { clip-path: var(--hud-cut); }
:root[data-ht-style="hud"] .htn-link.active { background: linear-gradient(90deg, rgba(var(--ht-primary-rgb), 0.13), rgba(var(--ht-primary-rgb), 0.02)); box-shadow: inset 2px 0 0 var(--ht-primary); }
:root[data-ht-style="hud"] .htn-link.active::before { display: none; }
:root[data-ht-style="hud"] .htn-link.active .ic { background: var(--ht-primary); color: var(--ht-body-bg); box-shadow: none; }
:root[data-ht-style="hud"] .htn-link .pill { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--ht-primary-rgb), 0.35); font-weight: 600; }

/* L'aide : les guides à filet, rien ne se soulève au survol ; leur numéro à coins coupés. */
:root[data-ht-style="hud"] .go-guide { border-color: var(--hud-line); }
:root[data-ht-style="hud"] .go-guide:hover { transform: none; border-color: rgba(var(--ht-primary-rgb), 0.6); }
:root[data-ht-style="hud"] .go-guidenum { clip-path: var(--hud-cut); }
:root[data-ht-style="hud"] .go-guide:hover .go-guidenum { color: var(--ht-body-bg); }

/* La fenêtre des thèmes et le journal des modifications : rien ne se soulève, les versions à filet. */
:root[data-ht-style="hud"] .htt-card:hover { transform: none; }
:root[data-ht-style="hud"] .htc-dayh { letter-spacing: 0.14em; font-weight: 600; }
:root[data-ht-style="hud"] .ht-newver { box-shadow: 0 0.8rem 2.2rem rgba(0, 0, 0, 0.5); border-width: 1px; }

/* PARTOUT : angles droits sur TOUT le reste — pastilles, avatars, points de couleur, étiquettes, réactions, boîtes de code… Comme le
   terminal de référence, où même l'avatar et les puces sont carrés. Restent ronds : ce qui n'a de sens que rond — les indicateurs
   qui tournent, les interrupteurs et les boutons radio. */
:root[data-ht-style="hud"] *:not(.spinner-border):not(.spinner-grow):not(.form-switch .form-check-input):not([type="radio"]),
:root[data-ht-style="hud"] *::before, :root[data-ht-style="hud"] *::after { border-radius: 0 !important; }

/* Les barres de défilement : fines, de la couleur des filets. */
:root[data-ht-style="hud"] * { scrollbar-width: thin; scrollbar-color: var(--hud-line) transparent; }