/* ===========================================================
   BigBang2 — style.css
   Thème : sombre (dark)
   Layout : CSS Grid + Flexbox, desktop uniquement
   =========================================================== */

/* ---- Variables globales ---- */
:root {
  --color-bg-base:       #0d0f14;
  --color-bg-panel:      #141720;
  --color-bg-panel-alt:  #1a1d27;
  --color-bg-topbar:     #0a0c10;

  --color-border:        #252a38;
  --color-border-accent: #2e3650;

  --color-text-primary:  #e2e6f0;
  --color-text-secondary:#8892a8;
  --color-text-muted:    #4e5670;

  --color-accent:        #3b6ef5;
  --color-accent-hover:  #4d7fff;
  --color-success:       #29d97a;
  --color-warning:       #f5a623;
  --color-danger:        #e84c4c;

  /* HF-TIMELINE-PERSEG — Timeline multi-segments source + gap RTH
     Choix utilisateur : IB=vert, Databento=bleu (le vert n'est plus réservé
     au front-month live, qui utilise désormais une pulsation outline). */
  --color-source-ib:         #29d97a;  /* vert IB */
  --color-source-databento:  #3b6ef5;  /* bleu Databento */
  --color-source-mixed:      #a569bd;  /* violet sources mixtes/inconnues */
  --color-source-other:      #f0a830;  /* slot autre provider (TwelveData, FRED, ...) */
  --color-gap-rth-border:    #f5a623;  /* orange bordure gap intra-session */

  --topbar-height:       44px;
  --panel-right-width:   340px;
  --gap:                 6px;
  --radius:              6px;

  --font-mono:  "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --transition-fast:     0.12s ease;
}

/* ---- Reset de base ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* DÉFAUT 1 — Garantit que l'attribut HTML [hidden] l'emporte sur tout display
   déclaré par l'auteur (ex: display:grid sur .backtest-layout). Les styles UA
   [hidden]{display:none} ont une spécificité 0-0-0 et sont écrasés par les
   styles auteur ; !important rétablit l'ordre correct. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   Coque globale de l'application
   ========================================================= */
.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
  width: 100vw;
}

/* DÉFAUT 2 — Conteneur de vues principales.
   Occupe la 2e rangée (1fr) du grid .app-shell en tant qu'enfant unique.
   Résout le problème de rangée implicite auto créée quand les deux <main>
   étaient enfants directs de .app-shell. La vue visible (non [hidden])
   prend 100% de la hauteur disponible. */
.view-container {
  overflow: hidden;
  position: relative;
  height: 100%;
}

/* =========================================================
   Topbar
   ========================================================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--color-bg-topbar);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}

.topbar__title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  margin-right: 8px;
}
/* "Bang" en rouge (identite BigBang2, reprise du spike QG) */
.topbar__title b {
  color: var(--color-danger);
  font-weight: inherit;
}

.topbar__controls {
  display: flex;
  gap: 6px;
}

.topbar__status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: 12px;
}

/* =========================================================
   Widget horloges + statut marchés (FEATURE-UI-CLOCK-MARKET-STATUS-WIDGET-01)
   ========================================================= */
.topbar__market {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.market-clock {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.market-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: default;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* open → vert */
.market-chip--open {
  background: rgba(41, 217, 122, 0.18);
  color: var(--color-success);
  border: 1px solid rgba(41, 217, 122, 0.35);
}

/* pre_market → jaune */
.market-chip--pre {
  background: rgba(245, 166, 35, 0.18);
  color: var(--color-warning);
  border: 1px solid rgba(245, 166, 35, 0.35);
}

/* post_market → jaune doux */
.market-chip--post {
  background: rgba(245, 166, 35, 0.12);
  color: var(--color-warning);
  border: 1px solid rgba(245, 166, 35, 0.25);
  opacity: 0.85;
}

/* maintenance → jaune (identique pre pour l'utilisateur) */
.market-chip--maintenance {
  background: rgba(245, 166, 35, 0.18);
  color: var(--color-warning);
  border: 1px solid rgba(245, 166, 35, 0.35);
}

/* closed / weekend / holiday / inconnu → gris neutre */
.market-chip--closed {
  background: rgba(120, 120, 140, 0.12);
  color: var(--color-text-secondary);
  border: 1px solid rgba(120, 120, 140, 0.25);
}

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  background: var(--color-bg-panel-alt);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.btn:hover {
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}

.btn--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn--active:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.btn--icon {
  padding: 4px 8px;
  font-size: 14px;
}

/* =========================================================
   Layout principal — 2 colonnes (chart | panel-right)
   ========================================================= */
.main-layout {
  display: grid;
  grid-template-columns: 1fr var(--panel-right-width);
  gap: var(--gap);
  padding: var(--gap);
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* =========================================================
   Panel générique
   ========================================================= */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  flex-shrink: 0;
}

.panel__title {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.panel__subtitle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-primary);
}

/* ---- Contrôles chart (sélecteurs symbol/timeframe) ---- */
.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.selector {
  padding: 3px 8px;
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.selector:hover {
  border-color: var(--color-accent);
}

.timeframe-selector {
  display: flex;
  gap: 2px;
}

.timeframe-selector input[type="radio"] {
  display: none;
}

.timeframe-btn {
  padding: 3px 8px;
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.timeframe-btn:first-of-type {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.timeframe-btn:last-of-type {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.timeframe-selector input[type="radio"]:checked + .timeframe-btn {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.timeframe-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

/* =========================================================
   Panel Chart (colonne gauche)
   ========================================================= */
.panel--chart {
  height: 100%;
}

.chart-container {
  flex: 1;
  min-height: 0;         /* important pour flexbox + TradingView Charts */
  width: 100%;
  position: relative;    /* requis pour positionnement absolu de l'overlay */
}

/* =========================================================
   Contrôles REPLAY
   ========================================================= */
.replay-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  flex-shrink: 0;
}

.replay-controls--hidden {
  display: none;
}

.replay-speed-label {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: 8px;
}

.speed-slider {
  width: 120px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

#speed-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-primary);
  min-width: 28px;
}

/* =========================================================
   Panel droite — 3 panels empilés (quotes + risk + calendar)
   Indicateurs ÉCON. désormais sous-vue du module Calendrier (T_P005)
   ========================================================= */
.panel-right {
  display: flex;
  flex-direction: column;
  min-height: 550px;
  max-height: calc(100vh - var(--topbar-height) - var(--gap));
  gap: var(--gap);
  overflow-y: auto;
}

/* Panel collapsé : seulement le header visible, pas d'espace réservé */
.panel--collapsed {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* =========================================================
   Table Quotes
   ========================================================= */
.panel--quotes {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#quotes-body-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.quotes-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
}

.quotes-table thead tr {
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.quotes-table th {
  padding: 5px 8px;
  text-align: right;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quotes-table th:first-child,
.quotes-table td:first-child {
  text-align: left;
  white-space: nowrap;
}

/* Badge sec_type compact (IND / FUT / CASH) */
.qt-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 3px;
  border-radius: 3px;
  vertical-align: middle;
  font-weight: 700;
  line-height: 1.3;
  margin-left: 3px;
}
.qt-badge--ind  { background: rgba(100, 200, 100, 0.15); color: #7bc97b; }
.qt-badge--fut  { background: rgba(100, 150, 240, 0.15); color: #6fa8f5; }
.qt-badge--cash { background: rgba(240, 200, 60,  0.15); color: #e8b84b; }

.quotes-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.quotes-table tr:hover td {
  background: var(--color-bg-panel-alt);
}

/* Ligne active (click-to-switch) */
.quotes-table tr.quotes-active td {
  background: rgba(59, 110, 245, 0.12);
  border-left: 2px solid var(--color-accent);
}

.quotes-table tr.quotes-active:hover td {
  background: rgba(59, 110, 245, 0.18);
}

.quotes-table tbody tr {
  cursor: pointer;
}

/* Couleurs tick */
.tick--up   { color: var(--color-success); }
.tick--down { color: var(--color-danger); }

/* =========================================================
   Quotes — en-têtes de catégorie repliables (accordéon)
   Vocabulaire visuel aligné sur la Vue globale Data.
   ========================================================= */
.quotes-table tr.qcat-header td {
  padding: 6px 8px;
  text-align: left;
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
}
.quotes-table tr.qcat-header:hover td {
  background: var(--color-bg-base);
}
.qcat-chevron {
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  color: var(--color-text-muted);
  font-size: 9px;
  transition: transform 0.12s ease;
}
.qcat-header.is-collapsed .qcat-chevron { transform: rotate(-90deg); }
.qcat-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.qcat-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  vertical-align: middle;
}
.qcat-count {
  margin-left: 6px;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 400;
}
/* Indentation des symboles sous leur catégorie */
.quotes-table tr.qcat-row td:first-child { padding-left: 24px; }

/* =========================================================
   Chart Loading Overlay
   ========================================================= */
.chart-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 10;
  align-items: center;
  justify-content: center;
}

.chart-loading-overlay.is-loading {
  display: flex;
}

.chart-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: chart-spinner-rotate 0.8s linear infinite;
}

@keyframes chart-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* =========================================================
   Bouton overlay source données (Combined / Historical / Live)
   ========================================================= */
.chart-datasource-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(20, 23, 32, 0.85);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  backdrop-filter: blur(2px);
}

.chart-datasource-btn:hover {
  background: rgba(59, 110, 245, 0.3);
  color: var(--color-text-primary);
}

.chart-datasource-btn[data-mode="historical"] {
  color: #f0a050;
  border-color: rgba(240, 160, 80, 0.35);
}

.chart-datasource-btn[data-mode="live"] {
  color: #29d97a;
  border-color: rgba(41, 217, 122, 0.35);
}

/* Message aucune donnée live disponible */
.chart-no-data-msg {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 13px;
  font-family: var(--font-mono);
  pointer-events: none;
  z-index: 4;
  background: rgba(20, 23, 32, 0.6);
}

/* =========================================================
   Toggle overlay qualité données OHLCV (T_DC005)
   ========================================================= */
.btn-quality-toggle {
  padding: 2px 8px;
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.btn-quality-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.btn-quality-toggle[aria-pressed="true"] {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa500;
  border-color: rgba(255, 165, 0, 0.5);
}

/* =========================================================
   Bouton Certifier + barre progression (T_DCV2_006)
   ========================================================= */
.btn-certify {
  padding: 2px 8px;
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.btn-certify:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.btn-certify[aria-disabled="true"],
.btn-certify:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.certify-progress-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  background: var(--color-bg-panel-alt);
  border-top: 1px solid var(--color-border);
  height: 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.certify-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--color-success);
  opacity: 0.25;
  transition: width 0.4s ease;
  pointer-events: none;
}

.certify-progress-label {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-success);
  font-weight: 600;
  letter-spacing: 0.04em;
  user-select: none;
}

.marker-filters__sep {
  color: var(--color-border-accent);
  font-size: 12px;
  user-select: none;
}

/* [QG-DEGRAISSAGE T_QGD_001] CSS du panneau calendrier économique retiré du QG
   (regles panel-calendrier, calendar-table*, cal-filters*, btn-cal-reset, cal-day-banner,
   btn-cal-back-week, impact-indicator*) — panneau supprimé, doublon de la page Data. */

/* =========================================================
   Indicateur de statut connexion
   ========================================================= */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-dot--connected    { background: var(--color-success); }
.status-dot--disconnected { background: var(--color-danger); }
.status-dot--connecting   {
  background: var(--color-warning);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* =========================================================
   Contrôles REPLAY
   ========================================================= */
.replay-controls {
  display: flex;
  flex-direction: column;
  /* HF-OD001-04 (Option A) : compactage padding+gap pour reduire empreinte
     verticale toolbar replay (~30-40px gagnes vs 12/12). */
  gap: 6px;
  padding: 8px;
  background: var(--color-bg-panel-alt);
  border-top: 1px solid var(--color-border);
  transition: opacity var(--transition-fast);
}

.replay-controls--hidden {
  display: none;
}

/* HF-OD001-04 (Option B) : auto-collapse de .replay-config quand le replay
   est lance (classe posee/retiree par app.js sur replaySocket.onopen et
   onclose / playback_completed). Pendant le playback, l'utilisateur n'a plus
   besoin du symbole/dates/timeframe -- gain ~70-80px. */
.replay-controls--running .replay-config {
  display: none;
}

/* HF-OD001-05 : pendant le playback, regrouper [Options | Play/Pause/Stop |
   Vitesse | Progress] sur 1 SEULE LIGNE (row au lieu de column). Gain ~50-60px
   supplementaires. flex-wrap garde un fallback propre sur ecran etroit. */
.replay-controls--running {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

/* HF-OD001-05 : Options en premier (le bouton est appendChild en dernier par
   backtest_replay.js, on inverse via CSS order pour eviter de toucher le JS). */
.replay-controls--running #replay-options-toggle {
  order: -1;
}

/* HF-OD001-05 : la barre de progression occupe l'espace restant sur la ligne. */
.replay-controls--running .replay-progress {
  flex: 1;
  min-width: 180px;
}

/* HF-OD001-05 : override du margin-left: auto (qui fait n'importe quoi en
   ligne unique multi-blocs). On laisse le gap parent gerer l'espacement. */
.replay-controls--running .replay-speed-label {
  margin-left: 0;
}

.replay-config {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  /* HF-OD001-04 (Option A) : gap reduit (4/8 au lieu de 8/12). */
  gap: 4px 8px;
  align-items: center;
}

.replay-label {
  /* HF-OD001-04 (Option A) : font-size 10px (au lieu de 11px). */
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.replay-selector,
.replay-date-input {
  padding: 4px 8px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color var(--transition-fast);
}

.replay-selector:focus,
.replay-date-input:focus {
  border-color: var(--color-accent);
}

.replay-selector:disabled,
.replay-date-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.replay-playback {
  display: flex;
  align-items: center;
  gap: 8px;
}

.replay-speed-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: auto;
}

.speed-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border-accent);
  border-radius: 2px;
  outline: none;
}

.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.speed-slider::-webkit-slider-thumb:hover {
  background: var(--color-accent-hover);
}

.speed-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast);
}

.speed-slider::-moz-range-thumb:hover {
  background: var(--color-accent-hover);
}

#speed-value {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  min-width: 32px;
}

.replay-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
  width: 0%;
  transition: width 0.3s ease;
}

.progress-label {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: right;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   T_DL2_06 — Rebuild chain manuel Databento (Data Library > Timeline)
   ========================================================= */
.rebuild-chain-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  margin: 12px 0;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: 4px;
}

.rebuild-chain-panel__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rebuild-chain-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.rebuild-chain-panel__hint {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.rebuild-chain-panel__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.rebuild-chain-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.rebuild-chain-select,
.rebuild-chain-input {
  padding: 4px 6px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  min-width: 140px;
}

/* Liste déroulante (options) — thème sombre cohérent. Chromium/Firefox respectent
   background-color + color sur <option>. Sans ces règles, l'UA rend le menu en blanc. */
.rebuild-chain-select option {
  background-color: var(--color-bg-panel);
  color: var(--color-text-primary);
}

.rebuild-chain-panel__progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rebuild-chain-panel__status {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  min-height: 14px;
}

.rebuild-chain-panel__status--success {
  color: var(--color-accent);
}

.rebuild-chain-panel__status--error {
  color: #e65a5a;
}

/* =========================================================
   Scrollbars personnalisées (WebKit)
   ========================================================= */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-border-accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* =========================================================
   Topbar — Onglets de navigation (Dashboard / Instruments)
   ========================================================= */
.topbar__tabs {
  display: flex;
  gap: 2px;
  margin-left: 16px;
}

.tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.tab-btn:hover {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
}

.tab-btn--active {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
  border-bottom-color: var(--color-accent);
}

/* Tabs modal Instruments */
.inst-tab-nav {
  display: flex;
  gap: 6px;
  padding: 10px 20px 0;
  background: var(--color-bg-topbar);
  border-bottom: 1px solid var(--color-border);
}

.inst-tab-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.inst-tab-btn:hover {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
}

.inst-tab-btn--active {
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
  border-bottom-color: var(--color-bg-panel);
}

.inst-tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.inst-tab-content--active {
  display: flex;
}

/* =========================================================
   Vue Instruments — layout principal
   ========================================================= */
.instruments-layout {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
  padding: var(--gap);
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-base);
}

/* Rangée basse : Mes Instruments + Sync côte à côte */
.inst-bottom-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--gap);
  overflow: hidden;
  min-height: 0;
}

.inst-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* =========================================================
   Instruments — Formulaire de recherche
   ========================================================= */
.inst-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-left: auto;
}

.inst-input {
  padding: 3px 8px;
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  font-size: 12px;
  font-family: var(--font-mono);
  outline: none;
  width: 130px;
  transition: border-color var(--transition-fast);
}

.inst-input:focus {
  border-color: var(--color-accent);
}

.inst-select {
  width: 80px;
  font-size: 12px;
}

/* =========================================================
   Instruments — Tables de données partagées
   ========================================================= */
.inst-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0;
}

.inst-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.inst-table thead tr {
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 1;
}

.inst-table th {
  padding: 4px 8px;
  text-align: left;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.inst-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.inst-table tr:hover td {
  background: var(--color-bg-panel-alt);
}

.inst-empty {
  padding: 14px 8px;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  font-family: var(--font-sans);
}

/* =========================================================
   Instruments — Badges et feedbacks
   ========================================================= */
.inst-feedback {
  font-size: 11px;
  font-family: var(--font-mono);
  margin-left: 4px;
  min-width: 140px;
  white-space: nowrap;
}

.inst-feedback--ok {
  color: var(--color-success);
}

.inst-feedback--err {
  color: var(--color-danger);
}

.inst-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inst-badge--active {
  background: rgba(41, 217, 122, 0.18);
  color: var(--color-success);
  border: 1px solid rgba(41, 217, 122, 0.35);
}

.inst-badge--inactive {
  background: rgba(232, 76, 76, 0.15);
  color: var(--color-danger);
  border: 1px solid rgba(232, 76, 76, 0.3);
}

/* Toggle button is_active */
.btn-toggle-active {
  padding: 2px 8px;
  font-size: 10px;
  cursor: pointer;
}

/* =========================================================
   Instruments — Footer Sync auto-refresh label
   ========================================================= */
.inst-sync-footer {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  flex-shrink: 0;
}

.inst-muted {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* Colonne lag : couleurs selon retard */
.lag--ok      { color: var(--color-success); }
.lag--warn    { color: var(--color-warning); }
.lag--danger  { color: var(--color-danger); }

/* [QG-DEGRAISSAGE T_QGD_001] CSS du calendrier mensuel (T_K005/T_K_BF01/T_K_S2_02) retiré :
   panneau + modal supprimés du QG (.btn-cal-toggle*, .cal-view-btns, .cal-subview, .cal-monthly*,
   .cal-day*, .badge--*, .btn-cal-today, .btn-cal-close). Doublon de la page Data. */

/* ===========================================================
   MODAL INSTRUMENTS [CHANTIER_L] — Overlay plein-écran
   v20260223_l003
   =========================================================== */

/* Bouton dans la topbar */
.btn--instruments-modal {
  margin-left: 12px;
  font-size: 13px;
  padding: 4px 10px;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn--instruments-modal:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Overlay plein-écran */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 10, 16, 0.88);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.modal-overlay[hidden] {
  display: none;
}

/* Conteneur modal instruments */
.inst-modal {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: 10px;
  width: 100%;
  max-width: 1200px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}

/* Bibliothèque OHLCV coverage */
.inst-library-pane {
  padding: 20px;
  overflow: hidden;     /* pas de scroll ici — le scroll est dans .timeline-rows */
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inst-library-intro {
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}

.inst-library-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.inst-library-table thead th {
  background: var(--color-bg-topbar);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.inst-library-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
}

.inst-library-table tbody tr:hover {
  background: var(--color-bg-panel-alt);
}

.badge-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-status--ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-status--stale {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
}

.badge-status--empty {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

/* ---- Library sub-tabs (Timeline / Legacy) [T_1MIN_007] ---- */
.lib-subtab-nav {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  flex-shrink: 0;  /* ne rétrécit pas — le scroll est dans les rows */
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
}
.lib-subtab-btn {
  padding: 4px 14px;
  font-size: 12px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-bg-panel-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.lib-subtab-btn--active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.lib-subtab-content { display: none; }
.lib-subtab-content--active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ---- Timeline légende ---- */
.timeline-legend {
  display: flex;
  gap: 16px;
  padding: 6px 0;
  font-size: 11px;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.timeline-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tl-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.tl-swatch--complete { background: var(--color-accent); opacity: 0.75; }
.tl-swatch--live { background: var(--color-success); opacity: 0.8; }
.tl-swatch--missing { background: var(--color-bg-panel-alt); border: 1px dashed var(--color-border-accent); }

/* ---- Timeline 1min [T_1MIN_007] ---- */
.timeline-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-height: calc(100vh - 200px); /* contraint à la fenêtre visible */
  position: relative;
}
.timeline-header {
  display: flex;
  align-items: flex-end;
  height: 28px;
  /* background-color explicite + z-index élevé : le header doit rester visible
     au-dessus de l'ombre projetée par .timeline-label sticky lors du scroll */
  background-color: var(--color-bg-panel);
  border-bottom: 2px solid var(--color-border-accent); /* visible même sous l'ombre label */
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 120px; /* align with label width */
  scrollbar-width: none; /* Firefox — hide header scrollbar */
  position: relative;
  z-index: 10; /* au-dessus des labels sticky (z-index:3) et de leur box-shadow */
  flex-shrink: 0; /* ne se réduit jamais, même si les rows poussent */
}
.timeline-header::-webkit-scrollbar { display: none; }
.timeline-header-inner {
  display: flex;
  position: relative;
  height: 100%;
}
.timeline-month-tick {
  position: absolute;
  top: 0;
  height: 100%;
  font-size: 10px;
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  padding-left: 4px;
  white-space: nowrap;
  line-height: 28px;
}
.timeline-rows {
  overflow-x: scroll;  /* scrollbar horizontal toujours visible */
  overflow-y: auto;
  flex: 1;
  min-height: 0;       /* crucial pour que flex: 1 limite la hauteur */
  scrollbar-width: thin; /* Firefox : barre fine mais visible */
  position: relative;  /* ancre le contexte sticky des .timeline-label enfants */
}
/* Webkit : scrollbar horizontal toujours visible, style cohérent dark theme */
.timeline-rows::-webkit-scrollbar {
  height: 10px;
}
.timeline-rows::-webkit-scrollbar-track {
  background: var(--color-bg-panel-alt);
  border-radius: 4px;
}
.timeline-rows::-webkit-scrollbar-thumb {
  background: var(--color-border-accent);
  border-radius: 4px;
}
.timeline-rows::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}
.timeline-row {
  display: flex;
  align-items: center;
  height: 32px;
  border-bottom: 1px solid var(--color-border);
  /* CRUCIAL : garantit que la ligne occupe toute la largeur scrollable (label + bar).
     Sans ça, la ligne fait la taille du viewport et le sticky perd son ancrage après
     scroll horizontal → le symbole "disparaît" en fin de scroll. */
  min-width: max-content;
}
.timeline-label {
  width: 120px;
  min-width: 120px;
  flex-shrink: 0;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  position: sticky;
  left: 0;
  /* background-color explicite (pas shorthand) — garantit opacité pendant scroll horizontal
     même si un autre 'background' réapparaît via cascade sur .timeline-row */
  background-color: var(--color-bg-panel);
  /* z-index 3 : au-dessus des .timeline-segment (sibling, non sticky donc stack par défaut)
     mais en-dessous du header (z-index:10) pour que celui-ci reste prioritaire visuellement */
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  /* bordure droite marquée — signal visuel du sticky sans box-shadow qui pollue le header */
  border-right: 2px solid var(--color-border-accent);
}
.timeline-bar {
  position: relative;
  height: 20px;
  flex-shrink: 0;
}
.timeline-segment {
  position: absolute;
  height: 100%;
  border-radius: 2px;
  font-size: 9px;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}
.timeline-segment--complete {
  background: var(--color-accent);
  opacity: 0.75;
}
/* Dates approximatives (seed manuel) → bord pointillé orange subtil */
.timeline-segment--approx {
  border-bottom: 2px dotted rgba(255, 165, 0, 0.5);
}
.timeline-segment--missing {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  cursor: pointer;
  color: var(--color-text-muted);
}
.timeline-segment--live {
  /* HF-TIMELINE-PERSEG — plus de background vert (collision avec IB).
     Marqueur visuel non-couleur : pulsation outline + glow. */
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 0;
  animation: timeline-live-pulse 1.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes timeline-live-pulse {
  0%, 100% {
    outline-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
  }
  50% {
    outline-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
}
.timeline-segment--missing:hover {
  background: rgba(232, 76, 76, 0.2);
  border-color: var(--color-danger);
}
.timeline-segment-label {
  position: relative;
  z-index: 2;
  padding: 0 3px;
  pointer-events: none;
  font-size: 9px;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.75), 0 1px 1px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline-segment--missing .timeline-segment-label {
  color: rgba(255, 255, 255, 0.55);
  text-shadow: none;
}
/* Certified rollover source (Databento exact dates) — subtle bottom accent */
.timeline-segment--certified {
  border-bottom: 2px solid rgba(0, 200, 120, 0.7);
}

/* ---- T_DL2_04bis.3 : Multi-segments source + gap RTH + warning qualité ---- */

/* Bordure orange : gap RTH détecté (details.in_session=true dans data_quality_issues) */
.timeline-segment--rth-gap {
  border: 2px solid var(--color-gap-rth-border);
}

/* Warning orange : 8% <= corrupt_pct < 15% (barres CORRUPT + SUSPECT_SPIKE) */
.timeline-segment--warning {
  box-shadow: inset 0 0 0 1px var(--color-warning);
}

/* Contrat entier exclu : corrupt_pct >= 15% (exclu backtest par défaut) */
.timeline-segment--excluded {
  opacity: 0.35 !important;
  filter: grayscale(0.6);
}

/* Sous-segments proportionnels par source — rendus en absolute dans le .timeline-segment parent */
.timeline-subseg {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;  /* laisse le tooltip du parent actif, click passe au parent */
  opacity: 0.9;
}
.timeline-subseg--ib {
  background: var(--color-source-ib);
}
.timeline-subseg--databento {
  background: var(--color-source-databento);
}
.timeline-subseg--mixed {
  background: var(--color-source-mixed);
  /* Motif rayé pour sources mixtes/inconnues */
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-source-mixed),
    var(--color-source-mixed) 4px,
    rgba(255, 255, 255, 0.15) 4px,
    rgba(255, 255, 255, 0.15) 8px
  );
}

/* Badge "N% corrompu" en haut-droite du segment */
.timeline-segment-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 8px;
  line-height: 10px;
  padding: 0 3px;
  background: var(--color-warning);
  color: #000;
  border-radius: 2px;
  font-weight: 600;
  z-index: 2;
}

/* ---- Databento modal [T_1MIN_007] ---- */
.databento-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.databento-modal {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  width: 420px;
  max-width: 90vw;
}
.databento-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.databento-modal__title {
  font-size: 14px;
  font-weight: 700;
}
.databento-modal__close {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 18px;
  cursor: pointer;
}
.databento-modal__close:hover { color: var(--color-text-primary); }
.databento-modal__body {
  padding: 16px;
}
.databento-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
}
.databento-field label {
  color: var(--color-text-muted);
  font-weight: 600;
}
.databento-field span {
  color: var(--color-text-primary);
}
.databento-modal__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
}

.btn-icon {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.btn-icon:hover {
  color: var(--color-text-primary);
}

.btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.btn-databento-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.btn-dl-databento {
  color: #f0a030;
  font-weight: bold;
  font-size: 0.75rem;
}
.btn-dl-databento:hover {
  color: #ffc060;
  background: rgba(240, 160, 48, 0.15);
}

/* =========================================================
   Bibliothèque OHLCV — Hiérarchie 3 niveaux (W_EXT_003)
   ========================================================= */

/* Niveau 1 : Familles d'instruments */
.family-group {
  padding: 1rem;
  background: #2a2e3a;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border);
}

.family-header {
  font-size: 1.1rem;
  color: #61dafb;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background var(--transition-fast);
  font-weight: 600;
  user-select: none;
}

.family-header:hover {
  background: #3a3e4a;
}

.family-icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.family-name {
  flex: 1;
  font-weight: 600;
}

.family-count {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.family-content {
  margin-top: 0.5rem;
}

/* Niveau 2 : Instruments */
.instrument-group {
  margin-left: 2rem;
  border-left: 2px solid #3a3e4a;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
}

.instrument-header {
  font-size: 1rem;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
  user-select: none;
}

.instrument-header:hover {
  background: #2a2e3a;
}

.instrument-symbol {
  font-weight: 700;
  color: #61dafb;
  font-family: var(--font-mono);
}

.instrument-name {
  flex: 1;
  color: var(--color-text-secondary);
}

.instrument-bar-count {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* [CHANTIER_OPTIONS_UI T_OU001] Badge coverage options dans la Data Library.
   Hidden par defaut (l'attribut HTML `hidden` est pose au render) ; revele
   par JS uniquement si /api/options/coverage retourne un date_max valide. */
.options-coverage-badge {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: rgba(59, 110, 245, 0.18);
  border: 1px solid rgba(59, 110, 245, 0.35);
}

.instrument-content {
  margin-top: 0.5rem;
}

/* Niveau 3 : Tableau bar_sizes */
.bar-sizes-table {
  margin-left: 4rem;
  width: calc(100% - 4rem);
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
  margin-bottom: 1rem;
}

.bar-sizes-table thead tr {
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
}

.bar-sizes-table th {
  padding: 8px 10px;
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bar-sizes-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.bar-sizes-table tbody tr:hover td {
  background: var(--color-bg-panel-alt);
}

/* Progress inline téléchargement IB [T_W007] */
.dl-inline-progress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.dl-spinner-icon {
  display: inline-block;
  animation: dl-spin 1s linear infinite;
  font-style: normal;
  font-size: 13px;
  color: var(--color-accent);
}

@keyframes dl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Notifications toast Data Library [T_W007] */
#lib-notification-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.lib-notification {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: lib-notif-in 0.2s ease-out;
  pointer-events: auto;
  max-width: 360px;
  word-break: break-word;
}

.lib-notification--success {
  background: rgba(41, 217, 122, 0.15);
  border: 1px solid var(--color-success);
  color: var(--color-success);
}

.lib-notification--error {
  background: rgba(232, 76, 76, 0.15);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

@keyframes lib-notif-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Niveau 3b : Futures Contracts (sous instruments FUT) [CHANTIER_W — W_EXT_004] */
.futures-contracts {
  margin-left: 4rem;
  border-left: 2px solid var(--color-accent, #3a7bd5);
  padding-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.futures-contracts-header {
  font-size: 0.9rem;
  color: var(--color-text-secondary, #9ca3af);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem;
  border-radius: 4px;
  transition: background var(--transition-fast);
  user-select: none;
}

.futures-contracts-header:hover {
  background: var(--color-bg-panel-alt, #1a1a2e);
}

.futures-count {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.85rem;
}

.contracts-list {
  list-style: none;
  margin: 0.5rem 0 0.5rem 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contracts-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-mono);
  border-bottom: 1px solid var(--color-border, #2d2d44);
}

.contracts-list-item--front {
  background: rgba(58, 123, 213, 0.1);
  border-left: 2px solid var(--color-accent, #3a7bd5);
  padding-left: calc(0.5rem - 2px);
}

.contracts-list-item:hover {
  background: rgba(97, 218, 251, 0.08);
  cursor: pointer;
}

.contracts-list-item--selected {
  background: rgba(97, 218, 251, 0.18);
  border-left: 2px solid #61dafb;
  padding-left: calc(0.5rem - 2px);
}

.contracts-list-item--selected .contracts-local-symbol {
  color: #fff;
}

.contracts-back-continuous {
  padding: 0.3rem 0.5rem;
  margin: 0.3rem 0 0 1rem;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-accent, #3a7bd5);
  cursor: pointer;
  border-radius: 4px;
}

.contracts-back-continuous:hover {
  background: rgba(58, 123, 213, 0.12);
  text-decoration: underline;
}

.contracts-local-symbol {
  font-weight: 700;
  color: #61dafb;
  min-width: 5rem;
}

.contracts-expiry,
.contracts-rollover {
  color: var(--color-text-secondary, #9ca3af);
}

.badge-primary {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-accent, #3a7bd5);
  color: #ffffff;
  border-radius: 3px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.futures-loading,
.futures-empty,
.futures-error {
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  font-size: 11px;
  margin: 4px 1rem;
}

.futures-error {
  color: var(--color-danger, #f87171);
  font-style: normal;
}

/* Responsive mobile : réduction indentation */
@media (max-width: 768px) {
  .instrument-group {
    margin-left: 1rem;
    padding-left: 0.5rem;
  }

  .bar-sizes-table {
    margin-left: 2rem;
    width: calc(100% - 2rem);
    font-size: 10px;
  }

  .family-header {
    font-size: 1rem;
  }

  .instrument-header {
    font-size: 0.9rem;
  }

  .bar-sizes-table th,
  .bar-sizes-table td {
    padding: 6px 8px;
  }
}

/* En-tête modal */
.inst-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-topbar);
}
.inst-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}
.inst-modal__close {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.inst-modal__close:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

/* Corps : 3 colonnes */
.inst-modal__body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.inst-modal__col {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 14px;
}
.inst-modal__col:last-child {
  border-right: none;
}
.inst-modal__col--search  { flex: 0 0 220px; min-width: 180px; gap: 12px; }
.inst-modal__col--results { flex: 0 0 320px; min-width: 240px; }
.inst-modal__col--detail  { flex: 1; }

/* Colonne 1 — zone recherche */
.inst-search-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inst-search-pane .inst-input {
  width: 100%;
}
.inst-search-pane .btn {
  width: 100%;
}

/* Filtre de type */
.inst-type-filter {
  padding: 8px 10px;
  background: var(--color-bg-input);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-size: 12px;
  transition: border-color var(--transition-fast);
}
.inst-type-filter:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Colonne 1 — historique */
.inst-history-pane {
  margin-top: 4px;
}
.inst-history-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 6px;
}
.inst-history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inst-history-empty {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}
.inst-history-btn {
  width: 100%;
  text-align: left;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inst-history-btn:hover {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* Colonne 2 — liste résultats */
.inst-results-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inst-result-item {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inst-result-item:hover {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-border-accent);
}
.inst-result-item--selected {
  background: rgba(59, 110, 245, 0.15);
  border-color: var(--color-accent);
}
.inst-result__symbol {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Badges type instrument */
.inst-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-fut {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.badge-stk {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}
.badge-ind {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}
.badge-continuous {
  background: rgba(139, 92, 246, 0.25);
  color: #8b5cf6;
  font-weight: 700;
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.badge-other {
  background: rgba(156, 163, 175, 0.2);
  color: #9ca3af;
}
.inst-result__meta {
  font-size: 11px;
  color: var(--color-text-muted);
}
.inst-result__desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Colonne 3 — fiche détail */
.inst-detail-pane {
  height: 100%;
}
.inst-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inst-detail__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.inst-detail__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  font-size: 13px;
}
.inst-detail__dl dt {
  color: var(--color-text-muted);
  font-weight: 600;
}
.inst-detail__dl dd {
  color: var(--color-text-primary);
}
.inst-detail__note {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  background: var(--color-bg-panel-alt);
  border-radius: var(--radius);
  border-left: 3px solid var(--color-accent);
}
.inst-detail__note--ok {
  border-left-color: var(--color-success);
  color: var(--color-success);
}

/* Resync from IB button + spinner [CHANTIER_SYMSYNC T006] */
.btn--resync {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.btn--resync:hover {
  filter: brightness(1.15);
}
.btn--resync:disabled {
  opacity: 0.6;
  cursor: wait;
}
.resync-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: resync-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes resync-spin {
  to { transform: rotate(360deg); }
}
.inst-detail__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fav-symbol-cell:hover {
  color: var(--color-accent);
}

/* Panel bas — favoris */
.inst-modal__footer {
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inst-modal__footer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.inst-modal__footer-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.inst-fav-table-wrap {
  overflow-y: auto;
  flex: 1;
}
.inst-fav-table-wrap .inst-table {
  width: 100%;
}

/* =========================================================
   Panel Risk STATUS (ANO-03)
   ========================================================= */
.panel--risk {
  flex: 0 0 auto;
  overflow: hidden;
}
.risk-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.risk-badge--active   { color: #4ade80; border-color: #4ade80; }
.risk-badge--paused   { color: #f97316; border-color: #f97316; }
.risk-badge--recovery { color: #facc15; border-color: #facc15; }
.risk-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  padding: 6px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
}
.risk-kv-label { color: var(--color-text-secondary); white-space: nowrap; }
.risk-kv-value { color: var(--color-text-primary); font-weight: 600; }

/* =========================================================
   Panel Indicateurs ÉCONOMIQUES (ANO-04)
   ========================================================= */
/* Panel Indicateurs ÉCONOMIQUES (ANO-04) — déplacé en sous-vue Calendrier (T_P005) */
.panel--indicators { display: none; } /* masqué : la sous-vue intégrée du Calendrier remplace ce panel */
.indicators-container { flex: 1; overflow-y: auto; }
.indicators-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}
.indicators-table thead tr {
  background: var(--color-bg-panel-alt);
  border-bottom: 1px solid var(--color-border);
}
.indicators-table th {
  padding: 4px 6px;
  text-align: left;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.indicators-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.indicators-empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 10px;
  font-style: italic;
}

/* =========================================================
   Rollover accordion (T_U005)
   ========================================================= */

.rollover-accordion-row td {
  padding: 0;
  background: var(--color-bg-panel-alt, #1a1a2e);
  border-bottom: 2px solid var(--color-accent, #3a7bd5);
}

.rollover-accordion-content {
  padding: 8px 12px;
}

.rollover-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin: 0;
}

.rollover-table th {
  padding: 4px 8px;
  text-align: left;
  color: var(--color-text-secondary, #9ca3af);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border, #2d2d44);
  background: var(--color-bg-panel, #12122a);
}

.rollover-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-border, #2d2d44);
  color: var(--color-text-primary, #e2e8f0);
  vertical-align: middle;
}

.rollover-fallback-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-warning-bg, #422006);
  color: var(--color-warning-text, #fbbf24);
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.rollover-edit-cell {
  background: var(--color-bg-input, #0f0f23);
  padding: 6px 8px !important;
}

.rollover-date-input {
  background: var(--color-bg-input, #0f0f23);
  color: var(--color-text-primary, #e2e8f0);
  border: 1px solid var(--color-border, #2d2d44);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  margin-right: 4px;
}

.rollover-loading,
.rollover-empty,
.rollover-error {
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  font-size: 11px;
  margin: 4px 0;
}

.rollover-error {
  color: var(--color-danger, #f87171);
}

.btn-rollover {
  margin-right: 4px;
  font-size: 11px;
  padding: 2px 6px;
}

/* =========================================================
   Vue Backtest [CHANTIER_R — T_R002]
   ========================================================= */

/**
 * Layout 2 colonnes : formulaire (gauche fixe) + résultats/chart (droite flexible).
 * Utilise les mêmes variables CSS que .main-layout pour la cohérence visuelle.
 */
.backtest-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--gap);
  padding: var(--gap);
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* --- Formulaire paramètres --- */
.bt-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  overflow-y: auto;
}

.bt-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bt-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bt-input {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.bt-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.bt-submit-btn {
  margin-top: 8px;
  align-self: stretch;
  justify-content: center;
  font-size: 12px;
  padding: 7px 12px;
}

/* Bouton désactivé pendant un run */
.bt-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Conteneur actions (Lancer Batch + Annuler côte à côte) */
.bt-batch-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.bt-batch-actions .bt-submit-btn {
  margin-top: 0;
  flex: 1;
}

/* Bouton Annuler */
.bt-cancel-btn {
  flex-shrink: 0;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--color-danger, #e84c4c);
  border-color: var(--color-danger, #e84c4c);
}

.bt-cancel-btn:hover {
  background: rgba(232, 76, 76, 0.12);
  color: var(--color-danger, #e84c4c);
  border-color: var(--color-danger, #e84c4c);
}

/* Compteur de combinaisons */
.bt-combo-count {
  font-size: 11px;
  color: var(--color-accent, #29d97a);
  text-align: right;
  padding: 2px 0 4px;
  min-height: 16px;
}

/* Avertissement période trop courte */
.bt-period-warning {
  margin: 4px 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.5);
  color: #ffc107;
  font-size: 11px;
  line-height: 1.4;
}

/* --- Zone résultats (panel droit) --- */
.bt-results-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Barre de progression backtest */
.bt-progress {
  padding: 18px 16px 12px;
}

.bt-progress__label {
  font-size: 12px;
  color: var(--color-text-secondary, #8892a8);
  margin-bottom: 8px;
  text-align: center;
}

.bt-progress__track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-3, #1e2330);
  overflow: hidden;
}

.bt-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-accent, #29d97a), #5ceea0);
  transition: width 0.3s ease;
}

/* Animation indéterminée — active quand width=100% (batch en cours) */
@keyframes bt-progress-indeterminate {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.bt-progress__fill[style*="width: 100%"],
.bt-progress__fill[style*="width:100%"] {
  background: linear-gradient(90deg,
    var(--color-accent, #29d97a) 0%,
    #5ceea0 30%,
    var(--color-accent, #29d97a) 60%,
    #5ceea0 100%
  );
  background-size: 200% 100%;
  animation: bt-progress-indeterminate 1.4s linear infinite;
}

.bt-progress__pct {
  font-size: 11px;
  color: var(--color-text-secondary, #8892a8);
  text-align: center;
  margin-top: 6px;
}

/* Zone erreur */
.bt-error {
  padding: 12px 16px;
  margin: 12px;
  border-radius: var(--radius);
  background: rgba(232, 76, 76, 0.12);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font-size: 12px;
}

/* Wrapper tableau résultats */
.bt-results-wrap {
  padding: 12px;
  overflow-y: auto;
}

/* Tableau métriques backtest */
.bt-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.bt-results-table th {
  text-align: left;
  padding: 6px 10px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bt-results-table td {
  padding: 6px 10px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.bt-results-table tr:last-child td {
  border-bottom: none;
}

.bt-results-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Conteneur chart equity curve (Lightweight Charts — T_R003) */
.bt-chart-container {
  flex: 1;
  min-height: 200px;
  margin: 0 12px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-panel-alt);
}

/* =========================================================
   Onglets Backtest Single / Grid Search [CHANTIER_BT — BT-B007]
   ========================================================= */

/* Conteneur extérieur #backtest-view — flex colonne */
.backtest-outer {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* Barre d'onglets */
.bt-tabs-nav {
  display: flex;
  gap: 0;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.bt-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 16px 7px;
  font-weight: 500;
  transition: color var(--transition-fast, 0.15s ease);
  margin-bottom: -1px;
}

.bt-tab-btn:hover {
  color: var(--color-text-primary);
}

.bt-tab-btn--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent, #29d97a);
  font-weight: 600;
}

/* Sous-vue (wrappant chaque backtest-layout) */
.bt-sub-view {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Formulaire batch ── */

/* Scroll wrapper colonne gauche formulaire batch */
.bt-batch-form-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Groupe de range (min/max/pas) pour un paramètre */
.bt-param-range-group {
  gap: 6px;
}

.bt-param-range-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.bt-param-range-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bt-param-range-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Table ranking batch ── */

/* Badge comptage hypothèses */
.bt-batch-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(41, 217, 122, 0.15);
  color: var(--color-success, #29d97a);
  border: 1px solid rgba(41, 217, 122, 0.3);
}

/* Wrapper résultats batch (remplit panel droit) */
.bt-batch-results-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.bt-ranking-overflow {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  padding: 0 12px 12px;
}

/* Table de ranking */
.bt-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}

.bt-ranking-table th {
  position: sticky;
  top: 0;
  background: var(--color-bg-panel, #1a1f2e);
  padding: 6px 10px;
  text-align: left;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  user-select: none;
  z-index: 1;
}

.bt-ranking-table th[data-col] {
  cursor: pointer;
}

.bt-ranking-table th[data-col]:hover {
  color: var(--color-text-primary);
}

.bt-ranking-table th.bt-th--sorted {
  color: var(--color-accent, #29d97a);
}

.bt-ranking-table .bt-th--num {
  text-align: right;
}

.bt-ranking-table td {
  padding: 5px 10px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.bt-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.bt-cell--params {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--color-text-secondary);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Code couleur FDR */
.bt-ranking-row--fdr-ok {
  background: rgba(41, 217, 122, 0.08);
}

.bt-ranking-row--fdr-ok td {
  color: var(--color-success, #29d97a);
}

/* =========================================================
   Panel Hypothesis Builder [CHANTIER_HYPOTHESIS_UI — T_HUI002]
   ========================================================= */

/* Conteneur extérieur #hyp-panel — flex colonne (miroir de .backtest-outer) */
.hyp-outer {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* Barre d'onglets 5 blocs */
.hyp-tabs-nav {
  display: flex;
  gap: 0;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.hyp-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 16px 7px;
  font-weight: 500;
  transition: color var(--transition-fast, 0.15s ease);
  margin-bottom: -1px;
}

.hyp-tab-btn:hover {
  color: var(--color-text-primary);
}

.hyp-tab-btn--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent, #29d97a);
  font-weight: 600;
}

/* Panneau de chaque onglet — hauteur bornée, scroll interne */
.hyp-tab-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Empêche le pane de grossir au-delà de l'espace disponible */
  max-height: calc(100vh - 220px);
}

/* Section panel dans un onglet */
.hyp-section-panel {
  min-height: 0;
  overflow: visible;
}

/* Corps d'une section */
.hyp-section-body {
  padding: 12px 16px;
  overflow-y: auto;
}

/* Texte placeholder en attente d'implémentation */
.hyp-placeholder {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-style: italic;
  margin: 0;
  padding: 8px 0;
}

/* ── Formulaires Vecteur + Sizing (T_HUI003) ─────────────── */

/* Conteneur formulaire hypothèse (même pattern que .bt-form) */
.hyp-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Champ individuel (label + input + message erreur) */
.hyp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label champ (même style que .bt-label) */
.hyp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Input / Select (même style que .bt-input) */
.hyp-input {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.hyp-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* État erreur : bordure rouge sur le champ */
.hyp-field--error .hyp-input {
  border-color: var(--color-danger, #e84c4c);
}

/* Message d'erreur inline */
.hyp-error-msg {
  font-size: 11px;
  color: var(--color-danger, #e84c4c);
  margin: 0;
  padding: 0;
}

/* Liste briques chargée depuis /api/hypothesis/bricks */
.hyp-brick-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Carte individuelle d'une brique */
.hyp-brick-card {
  background: var(--color-bg-panel, #1a1f2e);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 12px;
}

.hyp-brick-card__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.hyp-brick-card__meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ── Condition Builder (T_HUI004) ──────────────────────────── */

/* En-tête : titre + bouton "+Ajouter" */
.hyp-condition-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.hyp-condition-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hyp-condition-add-btn {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 3px 10px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hyp-condition-add-btn:hover {
  background: var(--color-bg-panel);
  border-color: var(--color-accent);
}

/* Texte affiché quand la liste est vide */
.hyp-condition-empty {
  color: var(--color-text-muted);
  font-size: 12px;
  font-style: italic;
  margin: 0;
  padding: 4px 0;
}

/* Badge AND entre conditions */
.hyp-condition-and-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin-bottom: 4px;
}

/* Un bloc condition */
.hyp-condition-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 10px;
  margin-bottom: 6px;
}

/* Ligne principale : [left] [op] [right] [×] */
.hyp-condition-main {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Wrapper variable gauche / droite */
.hyp-condition-var-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.hyp-condition-var-sel {
  flex: 1;
  min-width: 0;
}

.hyp-condition-op-sel {
  flex: 1.4;
  min-width: 120px;
}

/* Champ numérique pour les constantes */
.hyp-condition-const-input {
  width: 72px;
  flex-shrink: 0;
}

/* Bouton suppression (×) */
.hyp-condition-remove-btn {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.hyp-condition-remove-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Section paramètres opérateur */
.hyp-condition-params-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  margin-top: 4px;
}

/* Champ individuel dans la grille params */
.hyp-condition-param-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 100px;
}

/* Zone démo ConditionBuilder dans l'onglet Contexte (T_HUI004) — supprimée T_HUI005 */

/* ── Brick Selector + Filtres (T_HUI005) ────────────────── */

/* Sélecteur de brique (ligne dropdown + bouton Ajouter) */
.hyp-brick-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.hyp-brick-selector-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hyp-brick-selector-select {
  flex: 1;
}

/* Bouton "+ Ajouter" filtre */
.hyp-btn-add-filter {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 5px 12px;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hyp-btn-add-filter:hover {
  background: var(--color-bg-panel);
  border-color: var(--color-accent);
}

/* Liste des filtres ajoutés dans l'onglet Contexte */
.hyp-filter-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bloc d'un filtre individuel */
.hyp-filter-item {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* En-tête du filtre : nom + bouton suppression */
.hyp-filter-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hyp-filter-item__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.hyp-filter-item__remove {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.hyp-filter-item__remove:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Zone paramètres et conditions dans un filtre */
.hyp-filter-item__params,
.hyp-filter-item__conditions,
.hyp-entry-params,
.hyp-entry-conditions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hyp-filter-item__conditions,
.hyp-entry-conditions {
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* Champ param individuel (ajouté par _renderParamSchema) */
.hyp-param-field {
  flex-direction: column;
  gap: 3px;
}

/* Zone paramètres entrée */
.hyp-entry-params {
  margin: 8px 0;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}

/* =========================================================
   Hypothesis Builder — Onglet Ordres (SL/TP) [T_HUI006]
   ========================================================= */

/* Section SL ou TP */
.hyp-ordres-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.hyp-ordres-section:last-child {
  border-bottom: none;
}

.hyp-ordres-section__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Zone paramètres dynamiques d'une brique de sortie */
.hyp-ordres-params {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

/* ── Zone YAML + Preview Dataset (T_HUI007) ──────────────── */

/* Section YAML — en dehors des onglets, toujours visible */
.hyp-yaml-section {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg-base);
}

/* En-tête de la section YAML */
.hyp-yaml-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hyp-yaml-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}

/* Bouton Preview Dataset */
.hyp-preview-btn {
  background: var(--color-accent, #29d97a);
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 4px 12px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.hyp-preview-btn:hover {
  opacity: 0.85;
}

.hyp-preview-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea YAML — lecture seule, monospace */
.hyp-yaml-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  background: var(--color-bg-elevated, #1a1a2e);
  color: var(--color-text-primary, #e0e0e0);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 11px;
  line-height: 1.5;
  box-sizing: border-box;
  cursor: default;
}

.hyp-yaml-textarea:focus {
  outline: 1px solid var(--color-accent, #29d97a);
}

/* Zone résultat Preview Dataset */
.hyp-preview-result {
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 10px;
  background: var(--color-bg-elevated, #1a1a2e);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hyp-preview-result--loading {
  color: var(--color-text-secondary);
  font-style: italic;
}

.hyp-preview-result--error {
  border-color: var(--color-danger, #e84c4c);
  color: var(--color-danger, #e84c4c);
}

/* Ligne label : valeur */
.hyp-preview-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.hyp-preview-label {
  color: var(--color-text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.hyp-preview-value {
  color: var(--color-text-primary);
  word-break: break-word;
}

/* Bloc warnings */
.hyp-preview-warnings {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hyp-preview-warning-item {
  color: var(--color-warning, #f5a623);
  font-size: 11px;
  padding-left: 12px;
  position: relative;
}

.hyp-preview-warning-item::before {
  content: "⚠";
  position: absolute;
  left: 0;
}

/* ── Zone Grid Search (T_HUI008) ──────────────────────────── */

.hyp-grid-section {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-bg-base);
}

.hyp-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hyp-grid-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
}

.hyp-grid-combo-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Conteneur des param ranges — scrollable pour ne pas écraser les onglets */
#hyp-grid-params-container {
  max-height: 200px;
  overflow-y: auto;
}

/* Groupe de champs min/max/step pour un paramètre de brique */
.hyp-grid-param-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.hyp-grid-brick-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #29d97a);
  margin-top: 6px;
}

.hyp-grid-param-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.hyp-grid-param-row {
  display: flex;
  gap: 6px;
}

.hyp-grid-param-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hyp-grid-param-cell label {
  font-size: 10px;
  color: var(--color-text-secondary);
}

.hyp-grid-param-cell input {
  width: 100%;
  background: var(--color-bg-elevated, #1a1a2e);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: inherit;
  box-sizing: border-box;
}

.hyp-grid-param-cell input:focus {
  outline: 1px solid var(--color-accent, #29d97a);
}

/* ── Grid Search — checkbox opt-in + fixed/range rows ── */
.hyp-grid-param-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.hyp-grid-vary-cb {
  cursor: pointer;
  accent-color: var(--color-accent, #29d97a);
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Valeur fixe — visible par défaut */
.hyp-grid-fixed-row {
  display: flex;
  gap: 6px;
}

/* Range Min/Max/Pas — caché par défaut, affiché si .is-vary */
.hyp-grid-range-row {
  display: none;
  gap: 6px;
}

.hyp-grid-param-group.is-vary .hyp-grid-fixed-row {
  display: none;
}

.hyp-grid-param-group.is-vary .hyp-grid-range-row {
  display: flex;
}

/* Label plus saillant quand le paramètre est activé */
.hyp-grid-param-header .hyp-grid-param-label {
  transition: color 0.15s;
}

.hyp-grid-param-group.is-vary .hyp-grid-param-header .hyp-grid-param-label {
  color: var(--color-text-primary);
}

.hyp-grid-fdr-warning {
  font-size: 11px;
  color: var(--color-warning, #f5a623);
  background: rgba(245, 166, 35, 0.08);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: 4px;
  padding: 5px 8px;
}

.hyp-grid-high-risk {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--color-danger, #e84c4c);
  border-radius: 4px;
  padding: 4px 8px;
  letter-spacing: 0.04em;
  display: inline-block;
}

.hyp-grid-error {
  font-size: 11px;
  color: var(--color-danger, #e84c4c);
  background: rgba(232, 76, 76, 0.08);
  border: 1px solid rgba(232, 76, 76, 0.25);
  border-radius: 4px;
  padding: 5px 8px;
}

.hyp-grid-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.hyp-grid-run-btn {
  background: var(--color-accent, #29d97a);
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 14px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.hyp-grid-run-btn:hover {
  opacity: 0.85;
}

.hyp-grid-run-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hyp-grid-cancel-btn {
  background: transparent;
  color: var(--color-danger, #e84c4c);
  border: 1px solid var(--color-danger, #e84c4c);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hyp-grid-cancel-btn:hover {
  background: rgba(232, 76, 76, 0.1);
}

.hyp-grid-placeholder {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ── Picker Features embarqué (TALIB-ZOO T_A3 — pane Entrée) ── */

.sp-feat-picker {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  background: var(--color-bg-panel);
}

.sp-feat-picker__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.sp-feat-top {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.sp-search {
  flex: 1;
  min-width: 200px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-accent);
  color: var(--color-text-primary);
  padding: 7px 11px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font-sans);
}

.sp-search:focus {
  outline: none;
  border-color: var(--color-accent);
}

.sp-selcount {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.sp-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 760px) {
  .sp-cats { grid-template-columns: 1fr; }
}

.sp-cat {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: start;
}

.sp-cat__head {
  background: var(--color-bg-panel-alt);
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  user-select: none;
}

.sp-cat__head:hover {
  color: var(--color-accent);
}

.sp-cat__chev {
  transition: transform 0.15s ease;
  color: var(--color-text-secondary);
}

.sp-cat.collapsed .sp-cat__chev {
  transform: rotate(-90deg);
}

.sp-cat.collapsed .sp-cat__body {
  display: none;
}

.sp-cat__body {
  padding: 6px 0;
}

.sp-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
}

.sp-feat:hover {
  background: var(--color-bg-panel-alt);
}

.sp-feat label {
  font-family: var(--font-mono);
  cursor: pointer;
  color: var(--color-text-primary);
}

.sp-feat input {
  cursor: pointer;
  accent-color: var(--color-accent);
}

.sp-feat .sp-warmup {
  color: var(--color-text-muted);
  font-size: 11px;
}

.sp-badge-vif {
  background: #4a3a12;
  color: var(--color-warning);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid #6a5418;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.sp-cat__more {
  padding: 5px 12px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-style: italic;
}

.sp-feat-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sp-feat-cur {
  flex: 1;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.sp-feat-cur b {
  color: var(--color-text-primary);
}

/* ── fin Picker Features ─────────────────────────────────────── */


  background: rgba(232, 76, 76, 0.07);
}

.bt-ranking-row--fdr-ko td {
  color: var(--color-danger, #e84c4c);
}

.bt-ranking-row--error {
  background: rgba(180, 120, 0, 0.08);
  opacity: 0.75;
}

.bt-ranking-row--error td {
  color: var(--color-muted, #888);
}

.bt-cell--error-msg {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-muted, #888);
  padding-left: 0.5rem;
}


/* =========================================================
   Panel IB Queue Monitor [CHANTIER_SCHED — T_SCHED_006]
   ========================================================= */

/* Panel IB Queue — déplacé du QG (colonne droite) vers la vue Admin,
   section du pane Services [T_QGD_002]. Le pane Services est en layout
   bloc et bien plus large que l'ancienne colonne droite (340px) :
   on borne la largeur pour éviter un étirement sur toute la largeur
   et on espace du bloc "Services" au-dessus. */
.panel--ib-queue {
  flex-shrink: 0;
  margin-top: 12px;
  max-width: 480px;
}

/* Bouton toggle collapsible générique (panels) */
.panel-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.panel-toggle:hover {
  color: var(--color-text-primary);
}

/* Bouton toggle collapsible (AC_F5) */
.ib-queue-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 4px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.ib-queue-toggle:hover {
  color: var(--color-text-primary);
}

/* Badge statut (LIVE / OFFLINE / RECONNEXION) */
.ib-queue-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ib-queue-badge--live {
  background: rgba(41, 217, 122, 0.15);
  color: var(--color-success);
  border: 1px solid rgba(41, 217, 122, 0.3);
}

.ib-queue-badge--offline {
  background: rgba(232, 76, 76, 0.15);
  color: var(--color-danger);
  border: 1px solid rgba(232, 76, 76, 0.3);
}

/* Corps panel */
.ib-queue-body {
  padding: 6px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  max-height: 380px;
}

/* Section générique (label + valeur sur une ligne) */
.ib-queue-section {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ib-queue-section--list {
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.ib-queue-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 90px;
}

.ib-queue-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-primary);
}

/* Circuit breaker (AC_F4) */
.ib-queue-cb-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.ib-queue-cb--closed {
  color: var(--color-success);
}

.ib-queue-cb--open {
  color: var(--color-danger);
}

.ib-queue-cb--half-open {
  color: var(--color-warning);
}

/* Liste queue / historique (AC_F2) */
.ib-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ib-queue-item,
.ib-queue-hist-item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-secondary);
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ib-queue-empty {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  font-style: italic;
}

.ib-queue-more {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Priorité dans la queue */
.ib-queue-priority {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  text-transform: uppercase;
  margin-right: 4px;
}

.ib-queue-priority--immediate {
  background: rgba(232, 76, 76, 0.2);
  color: var(--color-danger);
}

.ib-queue-priority--normal {
  background: rgba(59, 110, 245, 0.2);
  color: var(--color-accent);
}

.ib-queue-priority--low {
  background: rgba(78, 86, 112, 0.2);
  color: var(--color-text-muted);
}

/* Historique — couleur selon statut */
.ib-queue-hist--ok {
  color: var(--color-text-secondary);
}

.ib-queue-hist--err {
  color: var(--color-danger);
  opacity: 0.8;
}

.ib-queue-hist-time {
  color: var(--color-text-muted);
  margin-right: 4px;
}

/* =========================================================
   Constellations — Onglet Instrument Manager (T_CST005)
   ========================================================= */

.inst-constellations-pane {
  padding: 16px 20px;
  overflow-y: auto;
  /* Hôte = section Data (.data-section height:100% overflow:hidden, NON flex).
     height:100% + box-sizing borne la pane → le scroll interne s'active (T_DCU_005 GATE 2). */
  height: 100%;
  box-sizing: border-box;
}

.constellation-card {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  padding: 14px 16px;
}

.constellation-card__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.constellation-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.constellation-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  flex: 1;
}

.constellation-members-count {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.constellation-members-by-role {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.role-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 150px;
}

.role-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.role-members {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.constellation-member-item {
  font-size: 11px;
  color: var(--color-text-primary);
  font-family: var(--font-mono, monospace);
}

.constellation-certify-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.cert-label {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.cert-label input[type="date"] {
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
}

.cert-feedback {
  font-size: 11px;
  color: var(--color-text-muted);
}

.constellation-coverage-result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.coverage-report {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.coverage-report__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coverage-report__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.coverage-report__table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}

.coverage-report__table th {
  text-align: left;
  padding: 5px 8px;
  color: var(--color-text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coverage-report__table td {
  padding: 5px 8px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.coverage-report__footer {
  font-size: 10px;
  color: var(--color-text-muted);
  text-align: right;
}

.badge-status--pass {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.badge-status--fail {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* =========================================================
   Research Lab — T_RL005
   ========================================================= */

/* Conteneur extérieur — miroir de .hyp-outer */
.rl-outer {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* Barre d'onglets internes */
.rl-tabs-nav {
  display: flex;
  gap: 0;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.rl-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  padding: 6px 16px 7px;
  font-weight: 500;
  transition: color var(--transition-fast, 0.15s ease);
  margin-bottom: -1px;
  white-space: nowrap;
}

.rl-tab-btn:hover {
  color: var(--color-text-primary);
}

.rl-tab-btn--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent, #3b6ef5);
  font-weight: 600;
}

/* Panneau onglet */
.rl-tab-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  padding: var(--gap, 6px);
}

/* Section panel générique */
.rl-section-panel {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rl-section-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- Funnel ---- */
.rl-funnel-summary {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.rl-funnel-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rl-funnel-row {
  display: grid;
  grid-template-columns: 200px 1fr 140px;
  align-items: center;
  gap: 10px;
}

.rl-funnel-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-funnel-bar-wrap {
  flex: 1;
  background: var(--color-bg-panel-alt, #1a1d27);
  border-radius: 3px;
  height: 16px;
  overflow: hidden;
}

.rl-funnel-bar {
  display: flex;
  height: 100%;
  border-radius: 3px;
  overflow: hidden;
  transition: width 0.3s ease;
}

.rl-funnel-bar__alive {
  background: var(--color-success, #29d97a);
  opacity: 0.8;
  height: 100%;
}

.rl-funnel-bar__dead {
  background: var(--color-danger, #e84c4c);
  opacity: 0.7;
  height: 100%;
}

.rl-funnel-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.rl-funnel-total {
  color: var(--color-text-primary);
  font-weight: 600;
  min-width: 24px;
}

.rl-funnel-conv {
  color: var(--color-success, #29d97a);
  font-size: 11px;
}

.rl-funnel-dead-count {
  color: var(--color-danger, #e84c4c);
  font-size: 11px;
}

/* ---- Journal ---- */
.rl-journal-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.rl-journal-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rl-journal-entry {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent, #3b6ef5);
  border-radius: var(--radius, 6px);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rl-journal-entry__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rl-journal-entry__date {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.rl-phase-killed {
  font-size: 11px;
  background: rgba(232, 76, 76, 0.15);
  color: var(--color-danger, #e84c4c);
  border: 1px solid rgba(232, 76, 76, 0.3);
  border-radius: 3px;
  padding: 2px 6px;
}

.rl-alive-badge {
  font-size: 11px;
  color: var(--color-success, #29d97a);
}

.rl-journal-entry__mechanism {
  font-size: 12px;
  color: var(--color-text-primary);
}

.rl-journal-entry__field {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.rl-field-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}

.rl-field-value {
  color: var(--color-text-primary);
}

.rl-insight-gained {
  color: var(--color-warning, #f5a623);
}

.rl-journal-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ---- Insights ---- */
.rl-insight-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.rl-insights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rl-insight-card {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 6px);
  padding: 10px 14px;
}

.rl-insight-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.rl-insight-type {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rl-insight-type--pattern       { background: rgba(59,110,245,0.15); color: #5f8fff; }
.rl-insight-type--anti_pattern  { background: rgba(232,76,76,0.15);  color: var(--color-danger, #e84c4c); }
.rl-insight-type--data_quality  { background: rgba(245,166,35,0.15); color: var(--color-warning, #f5a623); }
.rl-insight-type--methodology   { background: rgba(41,217,122,0.15); color: var(--color-success, #29d97a); }

.rl-conf {
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 2px 5px;
  border-radius: 3px;
}

.rl-conf--high   { background: rgba(41,217,122,0.15); color: var(--color-success, #29d97a); }
.rl-conf--medium { background: rgba(245,166,35,0.15); color: var(--color-warning, #f5a623); }
.rl-conf--low    { background: rgba(78,86,112,0.15);  color: var(--color-text-muted); }

.rl-insight-date {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-left: auto;
}

.rl-insight-card__content {
  font-size: 12px;
  color: var(--color-text-primary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.rl-insight-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.rl-src-hyp {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-left: 8px;
}

/* ---- Clusters tags ---- */
.rl-clusters-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rl-cluster-row {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border);
  border-radius: var(--radius, 6px);
  padding: 10px 14px;
}

.rl-cluster-tag-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rl-tag--cluster {
  font-weight: 600;
}

.rl-cluster-count {
  font-size: 11px;
  color: var(--color-text-muted);
}

.rl-cluster-previews {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rl-cluster-preview {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: block;
  padding-left: 8px;
  border-left: 2px solid var(--color-border-accent);
}

/* ---- Tags génériques ---- */
.rl-tag {
  font-size: 10px;
  background: rgba(59,110,245,0.12);
  color: #7da0ff;
  border: 1px solid rgba(59,110,245,0.25);
  border-radius: 3px;
  padding: 1px 5px;
  display: inline-block;
}

.rl-tag--empty {
  color: var(--color-text-muted);
  background: none;
  border: none;
}

/* ---- Formulaires ---- */
.rl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.rl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rl-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rl-label--required {
  color: var(--color-text-primary);
  font-weight: 600;
}

.rl-label-hint {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.rl-required {
  color: var(--color-danger, #e84c4c);
}

.rl-input {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius, 6px);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 6px 10px;
  outline: none;
  transition: border-color var(--transition-fast, 0.12s ease);
}

.rl-input:focus {
  border-color: var(--color-accent, #3b6ef5);
}

.rl-input--error {
  border-color: var(--color-danger, #e84c4c) !important;
}

.rl-input--narrow {
  max-width: 120px;
}

.rl-textarea {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius, 6px);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 6px 10px;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition-fast, 0.12s ease);
  line-height: 1.5;
}

.rl-textarea:focus {
  border-color: var(--color-accent, #3b6ef5);
}

.rl-select {
  background: var(--color-bg-panel-alt, #1a1d27);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius, 6px);
  color: var(--color-text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast, 0.12s ease);
}

.rl-select:focus {
  border-color: var(--color-accent, #3b6ef5);
}

.rl-submit-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ---- Feedback ---- */
.rl-feedback {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius, 6px);
  border: 1px solid transparent;
}

.rl-feedback--success {
  background: rgba(41,217,122,0.10);
  color: var(--color-success, #29d97a);
  border-color: rgba(41,217,122,0.2);
}

.rl-feedback--error {
  background: rgba(232,76,76,0.10);
  color: var(--color-danger, #e84c4c);
  border-color: rgba(232,76,76,0.2);
}

.rl-feedback--info {
  background: rgba(59,110,245,0.10);
  color: #7da0ff;
  border-color: rgba(59,110,245,0.2);
}

/* ---- États vides / chargement / erreur ---- */
.rl-loading,
.rl-empty,
.rl-error {
  font-size: 12px;
  padding: 16px 0;
  text-align: center;
}

.rl-loading { color: var(--color-text-muted); }
.rl-empty   { color: var(--color-text-muted); }
.rl-error   { color: var(--color-danger, #e84c4c); }

/* --- Help button + overlay --- */
.rl-help-btn {
  margin-left: auto;
  background: none;
  border: 1.5px solid var(--color-text-muted);
  color: var(--color-text-muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.rl-help-btn:hover {
  color: var(--color-accent, #3b6ef5);
  border-color: var(--color-accent, #3b6ef5);
  background: rgba(59,110,245,0.08);
}

.rl-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rl-help-modal {
  background: var(--color-bg-panel, #1e1f2b);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  width: 720px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.rl-help-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.rl-help-modal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.rl-help-modal__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.rl-help-modal__close:hover { color: var(--color-text-primary); }

.rl-help-modal__body {
  overflow-y: auto;
  padding: 20px 24px 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.rl-help-section {
  margin-bottom: 24px;
}
.rl-help-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.rl-help-quote {
  border-left: 3px solid var(--color-accent, #3b6ef5);
  padding: 8px 14px;
  margin: 10px 0;
  background: rgba(59,110,245,0.06);
  font-style: italic;
  color: var(--color-text-primary);
}
.rl-help-list {
  padding-left: 20px;
  margin: 8px 0;
}
.rl-help-list li {
  margin-bottom: 5px;
}
.rl-help-list code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.rl-help-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 12.5px;
}
.rl-help-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 12px;
}
.rl-help-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: top;
}
.rl-help-table em {
  color: var(--color-text-muted);
}
.rl-help-alive { color: var(--color-success, #29d97a); font-weight: 600; }
.rl-help-dead  { color: var(--color-danger, #e84c4c); font-weight: 600; }

/* =========================================================
   Visual Replay Panel — T_VIS007
   ========================================================= */

.vr-outer {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
  overflow: hidden;
  height: 100%;
}

/* ---- Barre de contrôle ---- */
.vr-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--color-bg-panel);
}

.vr-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.vr-selector {
  max-width: 300px;
  min-width: 180px;
}

.vr-playback-btns {
  display: flex;
  gap: 4px;
}

.vr-speed-slider {
  width: 80px;
}

.vr-speed-val {
  font-size: 12px;
  color: var(--color-text-primary);
  min-width: 28px;
  text-align: right;
}

.vr-bar-counter {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: 8px;
  white-space: nowrap;
}

.vr-status-msg {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-left: 4px;
  font-style: italic;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Layout principal ---- */
.vr-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Zone chart — 70% */
.vr-chart-area {
  flex: 0 0 70%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vr-chart-container {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* Colonne droite — 30% */
.vr-right-column {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-bg-panel);
}

/* ---- Panneaux droite ---- */
.vr-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vr-panel + .vr-panel {
  border-top: 1px solid var(--color-border);
}

.vr-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 12px;
}

.vr-stub-badge {
  font-size: 10px;
  color: var(--color-text-secondary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: auto;
}

.vr-stub-empty {
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ---- État stratégie (stub T_VIS008) ---- */
.vr-state-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.vr-state-key {
  color: var(--color-text-secondary);
  font-size: 11px;
  margin-right: 8px;
  flex-shrink: 0;
}

.vr-state-val {
  color: var(--color-text-primary);
  font-size: 11px;
  font-family: monospace;
  text-align: right;
}

.vr-state-sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.vr-cond-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
}

.vr-cond-true  { background: rgba(38, 166, 154, 0.2); color: #26a69a; }
.vr-cond-false { background: rgba(239, 83, 80, 0.2);  color: #ef5350; }

/* ---- Navigateur trades (T_VIS009) ---- */
.vr-trade-row {
  display: flex;
  gap: 6px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  align-items: baseline;
  cursor: pointer;
}

.vr-trade-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Couleurs gagnant / perdant — bordure gauche colorée */
.vr-trade-row--win {
  border-left: 3px solid #26a69a;
}

.vr-trade-row--loss {
  border-left: 3px solid #ef5350;
}

.vr-trade-row--win .vr-trade-pnl  { color: #26a69a; font-weight: 600; }
.vr-trade-row--loss .vr-trade-pnl { color: #ef5350; font-weight: 600; }

/* Highlight du trade courant */
.vr-trade-row--current {
  background: rgba(59, 110, 245, 0.18);
  outline: 1px solid var(--color-accent, #3b6ef5);
}

.vr-trade-idx {
  color: var(--color-text-secondary);
  font-family: monospace;
  min-width: 28px;
  flex-shrink: 0;
}

.vr-trade-dir {
  font-weight: 600;
  text-transform: uppercase;
  min-width: 38px;
  flex-shrink: 0;
}

.vr-trade-entry,
.vr-trade-exit,
.vr-trade-pnl {
  font-family: monospace;
  flex-shrink: 0;
}

.vr-trade-entry,
.vr-trade-exit {
  color: var(--color-text-primary);
}

.vr-trade-pnl {
  margin-left: auto;
}

/* Compatibilité ascendante — anciennes classes (clients pré-T_VIS009) */
.vr-trade-action {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-accent, #3b6ef5);
  min-width: 40px;
  flex-shrink: 0;
}

.vr-trade-price {
  color: var(--color-text-primary);
  font-family: monospace;
  flex-shrink: 0;
}

.vr-trade-reason {
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* ---- Journal list table (T_VRB_002) ---- */

.vr-journal-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 600px;
  max-width: 900px;
}

.vr-journal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  user-select: none;
  width: fit-content;
  max-width: 100%;
}

.vr-journal-toggle:hover {
  color: var(--color-text-primary);
}

.vr-journal-toggle-chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.15s ease-out;
}

.vr-journal-section--collapsed .vr-journal-toggle-chevron {
  transform: rotate(-90deg);
}

.vr-journal-section--collapsed .vr-journal-list {
  display: none;
}

.vr-journal-summary {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}

.vr-journal-list {
  position: relative;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg-base);
}

.vr-journal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  table-layout: fixed;
}

.vr-journal-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-panel);
}

.vr-journal-table th,
.vr-journal-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-text-primary);
}

.vr-journal-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  user-select: none;
}

.vr-journal-th--sortable {
  cursor: pointer;
}

.vr-journal-th--sortable:hover {
  color: var(--color-text-primary);
}

.vr-journal-row {
  cursor: pointer;
  transition: background 0.1s;
}

.vr-journal-row:hover {
  background: var(--color-bg-panel-alt);
}

.vr-journal-row--selected {
  background: rgba(59, 110, 245, 0.15);
  border-left: 2px solid var(--color-accent);
}

.vr-journal-cell--pnl-positive {
  color: var(--color-success);
  font-weight: 600;
}

.vr-journal-cell--pnl-negative {
  color: var(--color-danger);
  font-weight: 600;
}

.vr-journal-empty,
.vr-journal-error {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.vr-journal-error {
  color: var(--color-danger);
}

/* =========================================================
   ML Regime Panel — T_RG007
   ========================================================= */

/* Conteneur extérieur — grille 2x2 (HF-RML-LAYOUT-GRID-01 2026-05-01)
   Remplace flex-direction:column + flex-wrap:wrap (instable sans hauteur
   determine, 3eme colonne hors viewport observee Registry/Monitor).
   Grid 2x2 deterministe : Training | Results / Registry | Monitor.
   minmax(0, 1fr) autorise le shrink intra-cellule sans push hors grille. */
.rml-outer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  background: var(--color-bg-base);
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* -- Panel card -- */
.rml-panel {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  /* HF-RML-LAYOUT-GRID-01 : min-width/min-height 0 obligatoires pour
     que le shrink intra-cellule fonctionne avec grid (sinon contenu
     interieur tableau Registry 9 col / drift-grid Monitor pousse la
     cellule hors 1fr). overflow:hidden delegue le scroll a __body. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* -- Panel header -- */
.rml-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-panel);
}

.rml-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* -- Panel body -- */
.rml-panel__body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  /* HF-RML-LAYOUT-WRAP-01 : empeche le contenu interieur (tableau Registry 9 col,
     drift-grid Monitor, etc) de pousser le panel au-dela de sa flex-basis 50% */
  min-width: 0;
  min-height: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}

/* -- Placeholder (stubs) -- */
.rml-panel__placeholder {
  display: block;
  text-align: center;
  padding: 32px 0;
  color: var(--color-text-secondary);
  font-style: italic;
  opacity: 0.6;
}

/* =========================================================
   Training Console — T_RG008
   ========================================================= */

/* Wrapper */
.rml-tc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

/* ---- Config form section ---- */
.rml-tc__config {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Inline row (version + seed) */
.rml-tc__row--inline {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.rml-tc__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rml-tc__field--grow {
  flex: 1 1 auto;
  min-width: 140px;
}

.rml-tc__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rml-tc__input {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-accent);
  border-radius: 3px;
  color: var(--color-text-primary);
  font-size: 13px;
  padding: 5px 8px;
  outline: none;
  transition: border-color var(--transition-fast);
}

.rml-tc__input:focus {
  border-color: var(--color-accent);
}

.rml-tc__input--sm {
  width: 80px;
}

.rml-tc__field-err {
  font-size: 11px;
  color: var(--color-danger);
}

/* ---- Section block ---- */
.rml-tc__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rml-tc__section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Preset radios ---- */
.rml-tc__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rml-tc__preset-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

/* =========================================================
   Admin Panel — T_ADM007
   ========================================================= */

/* Conteneur extérieur */
.adm-outer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--color-bg-base);
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

/* En-tête admin */
.adm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.adm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.adm-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adm-controls-status {
  font-size: 12px;
  color: var(--color-danger);
  margin-left: 8px;
}

/* Badge PAUSED */
.adm-paused-badge {
  display: inline-block;
  background: var(--color-warning);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
}

/* Bouton Pause */
.adm-btn--pause {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.adm-btn--pause:hover {
  background: rgba(245, 166, 35, 0.15);
  color: var(--color-warning);
}

/* Bouton Killswitch */
.adm-btn--killswitch {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-danger);
  color: var(--color-danger);
  font-weight: 700;
}

.adm-btn--killswitch:hover {
  background: rgba(232, 76, 76, 0.15);
  color: var(--color-danger);
}

/* Bouton Killswitch après activation */
.adm-btn--killed {
  background: var(--color-danger) !important;
  color: #fff !important;
  border-color: var(--color-danger) !important;
  cursor: not-allowed;
}

/* Bouton Confirmer killswitch (dans la modale) */
.adm-btn--killswitch-confirm {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
  font-weight: 700;
}

.adm-btn--killswitch-confirm:hover {
  background: #cf3232;
  border-color: #cf3232;
  color: #fff;
}

/* Bouton Annuler (dans la modale) */
.adm-btn--cancel {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-border-accent);
  color: var(--color-text-secondary);
}

/* ---- Sections ---- */
.adm-section {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.adm-section__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
}

.adm-section__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}

.adm-section__body {
  padding: 12px;
  overflow-x: auto;
}

/* ---- Pastilles de statut ---- */
.adm-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.adm-dot--healthy     { background: var(--color-success); }
.adm-dot--warning     { background: var(--color-warning); }
.adm-dot--unreachable { background: var(--color-danger); }
.adm-dot--inactive    { background: var(--color-text-muted); }
.adm-dot--unknown     { background: var(--color-border-accent); }

/* ---- Overall banner ---- */
.adm-overall {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  border: 1px solid currentColor;
}

.adm-overall--healthy     { color: var(--color-success); }
.adm-overall--warning     { color: var(--color-warning); }
.adm-overall--unreachable { color: var(--color-danger); }
.adm-overall--unknown     { color: var(--color-text-secondary); }

/* ---- Grille services ---- */
.adm-services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adm-service-card {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 360px;
}

.adm-service-card--healthy     { border-left: 3px solid var(--color-success); }
.adm-service-card--warning     { border-left: 3px solid var(--color-warning); }
.adm-service-card--unreachable { border-left: 3px solid var(--color-danger); }

.adm-service-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-service-card__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  flex: 1;
}

.adm-service-card__status {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.adm-service-card__age {
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.adm-service-card__meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adm-meta-item {
  font-size: 11px;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 2px 6px;
  display: inline-flex;
  gap: 4px;
}

.adm-meta-key {
  color: var(--color-text-muted);
}

.adm-meta-val {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

/* ---- En-tête flux ---- */
.adm-flows-header {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.adm-flows-header--alert {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---- Table flux ---- */
.adm-flows-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.adm-flows-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.adm-flows-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-secondary);
}

.adm-flows-table tr:last-child td {
  border-bottom: none;
}

.adm-flows-table tr:hover td {
  background: var(--color-bg-panel-alt);
}

.adm-flow-label {
  font-weight: 500;
  color: var(--color-text-primary) !important;
}

.adm-flow-status--fresh             { color: var(--color-success) !important; }
.adm-flow-status--stale             { color: var(--color-danger) !important; font-weight: 600; }
.adm-flow-status--expected_inactive { color: var(--color-text-muted) !important; }
.adm-flow-status--error             { color: var(--color-warning) !important; }

.adm-flow-age      { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.adm-flow-exchange { font-size: 11px; color: var(--color-text-muted) !important; }
.adm-flow-session  { font-size: 11px; color: var(--color-text-muted) !important; }

/* ---- Messages ---- */
.adm-loading,
.adm-empty {
  color: var(--color-text-secondary);
  font-style: italic;
  padding: 8px 0;
  font-size: 13px;
}

.adm-error {
  color: var(--color-danger);
  font-size: 13px;
  padding: 8px 0;
}

/* ---- Modale Killswitch ---- */
.adm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adm-modal {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.adm-modal__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
}

.adm-modal__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-danger);
  letter-spacing: 0.04em;
}

.adm-modal__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.adm-modal__body strong {
  color: var(--color-danger);
}

.adm-modal__footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}

/* =========================================================
   Admin — sous-onglets + Rollover Live (T_SRL_007)
   ========================================================= */
.adm-subtabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
}

.adm-subtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}

.adm-subtab:hover { color: var(--color-text-primary); }

.adm-subtab--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

.adm-subtab__pill {
  font-size: 9px;
  background: var(--color-danger);
  color: #fff;
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 5px;
  vertical-align: middle;
}

.adm-pane { display: block; }
.adm-pane[hidden] { display: none; }

/* Badges rollover */
.adm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.adm-badge--shadow { background: #3a2f0b; color: var(--color-warning); border: 1px solid #5c4a12; }
.adm-badge--watch  { background: rgba(38, 166, 154, 0.12); color: var(--color-success); border: 1px solid rgba(38, 166, 154, 0.4); }
.adm-badge--roll   { background: rgba(232, 76, 76, 0.12); color: var(--color-danger); border: 1px solid rgba(232, 76, 76, 0.4); }
.adm-badge--idle   { background: var(--color-bg-panel-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.adm-badge--stale  { background: #3a2f0b; color: var(--color-warning); border: 1px solid #5c4a12; }
.adm-badge--open   { background: rgba(88, 166, 255, 0.12); color: var(--color-accent); border: 1px solid rgba(88, 166, 255, 0.4); }

/* Barre d'en-tête rollover */
.adm-rollbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 9px 13px;
}
.adm-rollbar__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-rollbar__title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.adm-rollbar__window { font-size: 12px; }

.adm-helpbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  color: var(--color-accent);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}
.adm-helpbtn:hover { border-color: var(--color-accent); }

/* Conteneur scrollable des familles (Phase 2 T_SRL2_006 — N familles) */
.adm-roll-grid {
  margin-top: 14px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* Groupe de famille */
.adm-roll-fam { margin-bottom: 18px; }
.adm-roll-fam:last-child { margin-bottom: 0; }
.adm-roll-fam__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  background: var(--color-bg-panel-alt, var(--color-bg-panel));
  z-index: 1;
}
.adm-roll-fam__name { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.adm-roll-fam__meta { font-size: 11px; color: var(--color-text-muted); }
.adm-roll-fam__roll {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-danger);
  margin-left: auto;
}
.adm-roll-fam__active {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Grille cartes rollover (au sein d'une famille) */
.adm-roll-grid__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}

.adm-roll-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.adm-roll-card--roll { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) inset; }
.adm-roll-card--idle { opacity: 0.62; }

.adm-roll-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.adm-roll-sym { font-size: 15px; font-weight: 700; color: var(--color-text-primary); }
.adm-roll-chain { color: var(--color-text-muted); font-size: 12px; margin-bottom: 10px; }
.adm-roll-chain b { color: var(--color-text-primary); }
.adm-roll-arr { color: var(--color-success); padding: 0 4px; }

.adm-roll-row { display: flex; justify-content: space-between; margin: 5px 0; font-size: 12px; }
.adm-roll-k { color: var(--color-text-muted); }

.adm-roll-gwrap { margin: 10px 0 4px; }
.adm-roll-glabel { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); margin-bottom: 3px; }
.adm-roll-gbar {
  position: relative;
  height: 16px;
  background: var(--color-bg-panel-alt);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.adm-roll-gfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; }
.adm-roll-gthr { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-warning); }
.adm-roll-gval { position: absolute; right: 5px; top: 1px; font-size: 11px; font-weight: 700; color: var(--color-text-primary); }

.adm-roll-dots { letter-spacing: 3px; }
.adm-dot-on { color: var(--color-success); }
.adm-dot-off { color: var(--color-border); }
.adm-stale { color: var(--color-warning); }
.adm-mono { font-family: var(--font-mono); }
.adm-r { text-align: right; }

.adm-roll-journal { margin-top: 18px; }
.adm-roll-journal-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.adm-roll-journal-table th,
.adm-roll-journal-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--color-border); }
.adm-roll-journal-table th { color: var(--color-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }

/* Modale help rollover */
.adm-modal--help { max-width: 680px; }
.adm-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 16px;
  background: none;
  border: none;
}
.adm-help-body h3 { margin: 0 0 4px; font-size: 16px; color: var(--color-text-primary); }
.adm-help-body h4 { margin: 15px 0 4px; font-size: 13px; color: var(--color-accent); }
.adm-help-body p, .adm-help-body li { font-size: 12px; line-height: 1.6; }
.adm-help-muted { color: var(--color-text-muted); }
.adm-help-body code { color: var(--color-accent); }
.adm-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  margin-right: 2px;
}

.rml-tc__preset-label:hover {
  border-color: var(--color-border-accent);
  background: var(--color-bg-panel-alt);
}

.rml-tc__preset-label input[type="radio"]:checked + span {
  color: var(--color-accent);
}

.rml-tc__preset-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Hyperparameter sliders ---- */
.rml-tc__sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.rml-tc__slider-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rml-tc__slider-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.rml-tc__slider-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

.rml-tc__slider-val {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  min-width: 40px;
  text-align: right;
}

.rml-tc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border-accent);
  outline: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.rml-tc__slider:disabled {
  opacity: 0.5;
  cursor: default;
}

.rml-tc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}

.rml-tc__slider:disabled::-webkit-slider-thumb {
  background: var(--color-text-muted);
  cursor: default;
}

.rml-tc__slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ---- Features checkboxes ---- */
.rml-tc__features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.rml-tc__feat-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
}

.rml-tc__feat-cat {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2px;
}

.rml-tc__feat-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 2px 0;
}

.rml-tc__feat-label--disabled {
  opacity: 0.55;
  cursor: default;
}

.rml-tc__feat-cb {
  accent-color: var(--color-accent);
  cursor: pointer;
}

.rml-tc__feat-cb:disabled {
  cursor: default;
}

.rml-tc__feat-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-primary);
}

.rml-tc__feat-desc {
  font-size: 10px;
  color: var(--color-text-muted);
}

.rml-tc__feat-badge {
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(232, 76, 76, 0.18);
  color: var(--color-danger);
  border: 1px solid rgba(232, 76, 76, 0.35);
  white-space: nowrap;
}

.rml-tc__features-status {
  font-size: 10px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Action bar ---- */
.rml-tc__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.rml-tc__btn {
  padding: 7px 20px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.rml-tc__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.rml-tc__btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.rml-tc__btn--primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.rml-tc__btn--danger {
  background: var(--color-danger);
  color: #fff;
}

.rml-tc__btn--danger:hover:not(:disabled) {
  background: #f06060;
}

/* ---- Progress section ---- */
.rml-tc__progress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
}

/* Info bar */
.rml-tc__info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 11px;
  padding: 6px 8px;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}

.rml-tc__info-item {
  color: var(--color-text-secondary);
}

.rml-tc__info-item b {
  color: var(--color-text-primary);
}

.rml-tc__info-item--warn {
  color: var(--color-warning);
}

/* Progress bar */
.rml-tc__progress-track {
  height: 6px;
  background: var(--color-border-accent);
  border-radius: 3px;
  overflow: hidden;
}

.rml-tc__progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.rml-tc__progress-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  text-align: right;
}

/* Fold metrics table */
.rml-tc__fold-wrap {
  overflow-x: auto;
}

.rml-tc__fold-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
}

.rml-tc__fold-table th,
.rml-tc__fold-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.rml-tc__fold-table th {
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--color-bg-panel-alt);
}

.rml-tc__fold-table td {
  color: var(--color-text-primary);
}

.rml-tc__fold-table tbody tr:last-child td {
  border-bottom: none;
}

/* Summary block */
.rml-tc__summary {
  padding: 10px;
  background: rgba(41, 217, 122, 0.07);
  border: 1px solid rgba(41, 217, 122, 0.25);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rml-tc__summary-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success);
}

.rml-tc__summary-grid {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 3px 16px;
  font-size: 11px;
}

.rml-tc__summary-grid span {
  color: var(--color-text-secondary);
}

.rml-tc__summary-grid b {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.rml-tc__warn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rml-tc__warn-item {
  font-size: 11px;
  color: var(--color-warning);
  padding-left: 12px;
  position: relative;
}

.rml-tc__warn-item::before {
  content: "\26a0";
  position: absolute;
  left: 0;
}

/* Message block (error / cancel) */
.rml-tc__msg-block {
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 12px;
}

.rml-tc__msg-block--error {
  background: rgba(232, 76, 76, 0.12);
  border: 1px solid rgba(232, 76, 76, 0.35);
  color: var(--color-danger);
}

.rml-tc__msg-block--cancelled {
  background: rgba(245, 166, 35, 0.10);
  border: 1px solid rgba(245, 166, 35, 0.30);
  color: var(--color-warning);
}

/* Inline message (features loading / error) */
.rml-tc__msg-inline {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

.rml-tc__msg-inline--error {
  color: var(--color-danger);
  font-style: normal;
}

/* =========================================================
   Results Dashboard — T_RG009
   ========================================================= */

/* Wrapper column */
.rml-rd {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Controls row (version select + refresh) */
.rml-rd__controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rml-rd__version-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rml-rd__ctl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rml-rd__select {
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-accent);
  border-radius: 3px;
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  min-width: 150px;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.rml-rd__select:focus {
  border-color: var(--color-accent);
}

.rml-rd__select:disabled {
  opacity: 0.5;
  cursor: default;
}

.rml-rd__btn-refresh {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-secondary);
  font-size: 14px;
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  line-height: 1.2;
}

.rml-rd__btn-refresh:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-accent);
}

/* Status messages */
.rml-rd__msg {
  padding: 8px 10px;
  border-radius: 3px;
  font-size: 12px;
}

.rml-rd__msg--info {
  color: var(--color-text-muted);
  font-style: italic;
}

.rml-rd__msg--error {
  background: rgba(232, 76, 76, 0.12);
  border: 1px solid rgba(232, 76, 76, 0.35);
  color: var(--color-danger);
  font-style: normal;
}

/* Section block */
.rml-rd__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rml-rd__section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.rml-rd__subsection-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

/* ---- RCSD bars ---- */
.rml-rd__rcsd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.rml-rd__rcsd-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  width: 72px;
  flex-shrink: 0;
}

.rml-rd__rcsd-track {
  flex: 1;
  height: 8px;
  background: var(--color-border-accent);
  border-radius: 4px;
  overflow: hidden;
}

.rml-rd__rcsd-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.rml-rd__rcsd-val {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  width: 44px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Accuracy heatmap (3 régimes × 1 col) ---- */
.rml-rd__heatmaps-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rml-rd__heatmap-block {
  flex: 1 1 160px;
  min-width: 140px;
}

.rml-rd__heatmap {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.rml-rd__hm-th-lbl,
.rml-rd__hm-th-val {
  padding: 3px 6px;
  background: var(--color-bg-panel-alt);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.rml-rd__hm-th-lbl {
  text-align: left;
}

.rml-rd__hm-th-val {
  text-align: center;
  width: 80px;
}

.rml-rd__hm-label {
  padding: 4px 6px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.rml-rd__hm-cell {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

/* Accuracy color classes — partagées heatmap + fold table */
.rml-rd__cell--hi,
.rml-rd__hm-cell.rml-rd__cell--hi {
  color: var(--color-success);
  background: rgba(41, 217, 122, 0.10);
}

.rml-rd__cell--mid,
.rml-rd__hm-cell.rml-rd__cell--mid {
  color: var(--color-warning);
  background: rgba(245, 166, 35, 0.10);
}

.rml-rd__cell--lo,
.rml-rd__hm-cell.rml-rd__cell--lo {
  color: var(--color-danger);
  background: rgba(232, 76, 76, 0.10);
}

/* ---- Feature importance horizontal bars ---- */
.rml-rd__imp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.rml-rd__imp-name {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  width: 128px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rml-rd__imp-track {
  flex: 1;
  height: 10px;
  background: var(--color-border-accent);
  border-radius: 3px;
  overflow: hidden;
}

.rml-rd__imp-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.rml-rd__imp-val {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  width: 50px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Walk-forward stability table ---- */
.rml-rd__fold-wrap {
  overflow-x: auto;
}

.rml-rd__fold-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-mono);
}

.rml-rd__fold-table th {
  padding: 4px 8px;
  text-align: right;
  background: var(--color-bg-panel-alt);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.rml-rd__fold-table td {
  padding: 4px 8px;
  text-align: right;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.rml-rd__fold-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Comparison table (side-by-side) ---- */
.rml-rd__cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 4px;
}

.rml-rd__cmp-table th {
  padding: 4px 8px;
  background: var(--color-bg-panel-alt);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.rml-rd__cmp-table td {
  padding: 4px 8px;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 11px;
}

.rml-rd__cmp-table tbody tr:last-child td {
  border-bottom: none;
}

/* ---- Delta indicators (comparaison) ---- */
.rml-rd__delta--pos {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-success);
}

.rml-rd__delta--neg {
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-danger);
}

/* =========================================================
   [CHANTIER_OPTIONS_UI T_OU002] Options Chain Panel
   ========================================================= */

/* Bouton toggle Options injecte comme dernier enfant de #panel-chart
   (.panel = flex column). Le bouton se pose en bas du panel chart, le
   panel options se replie en dessous. On evite ainsi d'ajouter une row
   au grid .main-layout (qui laisserait la colonne sidebar vide a droite). */
.options-panel-toggle-btn {
  align-self: flex-start;
  margin: 6px 12px;
  padding: 0.35rem 0.9rem;
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.options-panel-toggle-btn:hover {
  background: var(--color-bg-panel);
  border-color: var(--color-accent);
}

.options-panel-toggle-btn[aria-expanded="true"] {
  background: rgba(59, 110, 245, 0.18);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.options-panel {
  margin: 0 12px 12px;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem 0.75rem;
  max-height: 45vh;
  overflow: auto;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  flex-shrink: 0;
}

.options-panel[hidden] {
  display: none;
}

.options-panel__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.5rem;
}

.options-panel__title {
  font-weight: 600;
  color: var(--color-text-primary);
}

.options-panel__symbol {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-weight: 600;
}

/* T_OD003 (CHANTIER_OPTIONS_UI_DYN) -- Badge LIVE quand polling 30s actif. */
.options-panel__live-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0d0f14;
  background-color: var(--color-success);
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
}

.options-panel__live-badge[hidden] {
  display: none;
}

.options-panel__snapshot-ts {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-right: auto;
}

.options-panel__columns-wrapper {
  position: relative;
}

.options-panel__columns-toggle {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
}

.options-panel__columns-toggle:hover {
  border-color: var(--color-accent);
}

.options-panel__columns-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 180px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.options-panel__columns-menu[hidden] {
  display: none;
}

.options-panel__columns-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.78rem;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 2px;
}

.options-panel__columns-item:hover {
  background: var(--color-bg-panel-alt);
}

.options-panel__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.options-panel__placeholder {
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0.5rem 0;
}

.options-panel__placeholder--empty {
  color: var(--color-text-secondary);
}

.options-panel__expiry-group {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem 0.6rem 0.6rem;
}

.options-panel__expiry-title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.options-panel__type-block {
  margin-top: 0.4rem;
}

.options-panel__type-title {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.options-panel__type-title--calls {
  color: #4caf50;
}

.options-panel__type-title--puts {
  color: #ef5350;
}

.options-panel__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.options-panel__table thead tr {
  background: var(--color-bg-base);
}

.options-panel__table th,
.options-panel__table td {
  padding: 0.25rem 0.5rem;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
}

.options-panel__table th {
  color: var(--color-text-secondary);
  font-weight: 600;
  text-align: right;
}

.options-panel__table th[data-col="expiry"],
.options-panel__table td[data-col="expiry"] {
  text-align: left;
}

.options-panel__table tbody tr:hover {
  background: rgba(59, 110, 245, 0.08);
}

/* T_OD004 (CHANTIER_OPTIONS_UI_DYN) -- Navigation interactive (scroll + filtres). */
.options-panel__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.options-panel__nav-btn {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-accent);
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  cursor: pointer;
}

.options-panel__nav-btn:hover {
  border-color: var(--color-accent);
}

.options-panel__nav-offset {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  min-width: 2.5rem;
  text-align: center;
}

.options-panel__type-filter {
  margin-left: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.options-panel__expiry-title[data-expiry] {
  cursor: pointer;
  user-select: none;
}

.options-panel__expiry-title[data-expiry]:hover {
  color: var(--color-accent);
}

.options-panel__expiry-title--active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
  padding-bottom: 2px;
}

/* =========================================================================
 * Model Registry panel (T_RG010) — table versions + actions promote/archive/delete
 * ========================================================================= */

/* Toolbar (refresh button + prod info) */
.rml-reg__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
}
.rml-reg__btn-refresh {
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.rml-reg__btn-refresh:hover {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rml-reg__prod-info {
  color: var(--color-text-secondary);
  font-size: 12px;
}

/* Messages (loading / empty / error) */
.rml-reg__msg {
  padding: 12px 16px;
  margin: 12px;
  border-radius: 4px;
  font-size: 13px;
}
.rml-reg__msg--info {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.rml-reg__msg--error {
  background: rgba(232, 76, 76, 0.12);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

/* Table */
.rml-reg__table-wrap {
  padding: 0 12px 12px 12px;
  overflow-x: auto;
}
.rml-reg__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--color-text-primary);
}
.rml-reg__table thead {
  background: var(--color-bg-panel-alt);
}
.rml-reg__table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-accent);
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.rml-reg__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.rml-reg__row {
  transition: background-color 0.12s ease;
}
.rml-reg__row:hover {
  background: var(--color-bg-panel-alt);
}
.rml-reg__row--prod {
  background: rgba(41, 217, 122, 0.05);
}
.rml-reg__row--prod:hover {
  background: rgba(41, 217, 122, 0.10);
}

/* Version cell (expand button + label) */
.rml-reg__cell-ver {
  white-space: nowrap;
}
.rml-reg__btn-expand {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0 6px;
  font-size: 11px;
  line-height: 1;
}
.rml-reg__btn-expand:hover {
  color: var(--color-accent);
}
.rml-reg__ver-label {
  font-family: 'Courier New', Consolas, monospace;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Numeric / date cells */
.rml-reg__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rml-reg__date {
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

/* Accuracy color thresholds (cf. accCls() — hi >= 0.60, mid >= 0.40, lo < 0.40) */
.rml-reg__acc--hi  { color: var(--color-success); font-weight: 600; }
.rml-reg__acc--mid { color: var(--color-warning); font-weight: 600; }
.rml-reg__acc--lo  { color: var(--color-danger);  font-weight: 600; }

/* Status badges */
.rml-reg__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.rml-reg__badge--prod {
  background: var(--color-success);
  color: var(--color-bg-base);
}
.rml-reg__badge--draft {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.rml-reg__badge--archived {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
}

/* Actions cell + buttons */
.rml-reg__cell-actions {
  white-space: nowrap;
}
.rml-reg__btn {
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 4px;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.rml-reg__btn:hover:not([disabled]) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rml-reg__btn--promote:hover:not([disabled]) {
  border-color: var(--color-success);
  color: var(--color-success);
}
.rml-reg__btn--archive:hover:not([disabled]) {
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.rml-reg__btn--delete:hover:not([disabled]) {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.rml-reg__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Detail expand row */
.rml-reg__detail-row {
  background: var(--color-bg-base);
}
.rml-reg__detail-cell {
  padding: 0 !important;
  background: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-accent) !important;
}
.rml-reg__detail-loading {
  display: block;
  padding: 12px 16px;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 12px;
}
.rml-reg__detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
}
.rml-reg__detail-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rml-reg__detail-title {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rml-reg__detail-pre {
  margin: 0;
  padding: 10px 12px;
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

/* Responsive : stack detail blocks on narrow screens */
@media (max-width: 900px) {
  .rml-reg__detail {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================
   ML Regime — Production Monitor panel (T_RG011)
   Conteneur racine : .rml-mon
   Sections : prediction courante, actions, historique, drift report
   =========================================================== */

.rml-mon {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

/* ---- Messages d'etat (loading / empty / error) partages ---- */
.rml-mon__msg {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  margin: 4px 0;
}
.rml-mon__msg--info {
  background: var(--color-bg-panel-alt);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.rml-mon__msg--error {
  background: rgba(232, 76, 76, 0.10);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

/* ---- Section 1 : prediction courante ---- */

.rml-mon__current {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
}
.rml-mon__current-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rml-mon__current-meta {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--color-text-secondary);
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}
.rml-mon__current-meta code {
  font-family: 'Courier New', Consolas, monospace;
  color: var(--color-text-primary);
}

/* Carte regime (trend / vol) */
.rml-mon__regime-card {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition-fast);
}
.rml-mon__regime-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  font-weight: 600;
}
.rml-mon__regime-value {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: 'Courier New', Consolas, monospace;
}

/* Couleurs de regime — fond + texte selon valeur (DoD T_RG011) */
.rml-mon__regime-card--trending-up {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-bg-base);
}
.rml-mon__regime-card--trending-up .rml-mon__regime-label,
.rml-mon__regime-card--trending-up .rml-mon__regime-value,
.rml-mon__regime-card--trending-up .rml-mon__bar-pct {
  color: var(--color-bg-base);
}

.rml-mon__regime-card--trending-down {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}
.rml-mon__regime-card--trending-down .rml-mon__regime-label,
.rml-mon__regime-card--trending-down .rml-mon__regime-value,
.rml-mon__regime-card--trending-down .rml-mon__bar-pct {
  color: #ffffff;
}

.rml-mon__regime-card--mean-reverting {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-bg-base);
}
.rml-mon__regime-card--mean-reverting .rml-mon__regime-label,
.rml-mon__regime-card--mean-reverting .rml-mon__regime-value,
.rml-mon__regime-card--mean-reverting .rml-mon__bar-pct {
  color: var(--color-bg-base);
}

.rml-mon__regime-card--vol-compressed {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
}
.rml-mon__regime-card--vol-compressed .rml-mon__regime-label,
.rml-mon__regime-card--vol-compressed .rml-mon__regime-value,
.rml-mon__regime-card--vol-compressed .rml-mon__bar-pct {
  color: #ffffff;
}

.rml-mon__regime-card--vol-normal {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-border-accent);
  color: var(--color-text-secondary);
}
.rml-mon__regime-card--vol-normal .rml-mon__regime-value {
  color: var(--color-text-primary);
}

.rml-mon__regime-card--vol-expanded {
  background: var(--color-source-other);
  border-color: var(--color-source-other);
  color: var(--color-bg-base);
}
.rml-mon__regime-card--vol-expanded .rml-mon__regime-label,
.rml-mon__regime-card--vol-expanded .rml-mon__regime-value,
.rml-mon__regime-card--vol-expanded .rml-mon__bar-pct {
  color: var(--color-bg-base);
}

.rml-mon__regime-card--unknown {
  background: var(--color-bg-panel-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Barre confidence dans la carte */
.rml-mon__regime-conf {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rml-mon__bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(13, 15, 20, 0.35);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(13, 15, 20, 0.20);
}
.rml-mon__bar {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  width: 0%;
  transition: width 0.25s ease;
}
.rml-mon__bar-pct {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 48px;
  text-align: right;
}

/* ---- Section 2 : action footer ---- */

.rml-mon__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.rml-mon__btn {
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.rml-mon__btn:hover:not([disabled]) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rml-mon__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.rml-mon__btn--predict {
  border-color: var(--color-border-accent);
}
.rml-mon__btn--predict:hover:not([disabled]) {
  border-color: var(--color-success);
  color: var(--color-success);
}

.rml-mon__action-status {
  font-size: 12px;
  color: var(--color-text-secondary);
}
.rml-mon__action-status--ok {
  color: var(--color-success);
}
.rml-mon__action-status--err {
  color: var(--color-danger);
}

/* ---- Sections generiques (historique + drift) ---- */

.rml-mon__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rml-mon__section-title {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

/* ---- Section 3 : historique ---- */

.rml-mon__hist-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.rml-mon__hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rml-mon__hist-table thead {
  background: var(--color-bg-panel-alt);
}
.rml-mon__hist-table thead th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rml-mon__hist-row {
  border-bottom: 1px solid var(--color-border);
}
.rml-mon__hist-row:last-child {
  border-bottom: none;
}
.rml-mon__hist-row:hover {
  background: var(--color-bg-panel-alt);
}
.rml-mon__hist-table td {
  padding: 6px 10px;
  vertical-align: middle;
}
.rml-mon__hist-ts {
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-family: 'Courier New', Consolas, monospace;
}
.rml-mon__hist-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-primary);
}
.rml-mon__hist-ver {
  font-size: 11px;
  color: var(--color-text-secondary);
}
.rml-mon__hist-ver code {
  font-family: 'Courier New', Consolas, monospace;
}

/* Cellules trend / vol historique colorees par regime */
.rml-mon__hist-cell {
  font-weight: 600;
  white-space: nowrap;
}
.rml-mon__hist-cell--trending-up    { color: var(--color-success); }
.rml-mon__hist-cell--trending-down  { color: var(--color-danger); }
.rml-mon__hist-cell--mean-reverting { color: var(--color-warning); }
.rml-mon__hist-cell--vol-compressed { color: var(--color-accent); }
.rml-mon__hist-cell--vol-normal     { color: var(--color-text-secondary); }
.rml-mon__hist-cell--vol-expanded   { color: var(--color-source-other); }
.rml-mon__hist-cell--unknown        { color: var(--color-text-muted); }

/* ---- Section 4 : drift report ---- */

.rml-mon__drift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rml-mon__drift-card {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  word-break: break-word;
}
.rml-mon__drift-card--alert {
  border-color: var(--color-border-accent);
}
.rml-mon__drift-card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 4px;
}
.rml-mon__drift-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.rml-mon__drift-key {
  color: var(--color-text-secondary);
}
.rml-mon__drift-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-primary);
}
.rml-mon__drift-props {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rml-mon__drift-empty-note {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}
.rml-mon__drift-missing {
  font-size: 11px;
  color: var(--color-warning);
  margin-top: 4px;
}
.rml-mon__drift-missing-label {
  font-weight: 600;
}
.rml-mon__drift-missing code {
  font-family: 'Courier New', Consolas, monospace;
  background: rgba(245, 166, 35, 0.10);
  padding: 1px 4px;
  border-radius: 2px;
}

/* Badge retrain alert */
.rml-mon__retrain-badge-wrap {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.rml-mon__retrain-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rml-mon__retrain-badge--ok {
  background: var(--color-success);
  color: var(--color-bg-base);
}
.rml-mon__retrain-badge--alert {
  background: var(--color-danger);
  color: #ffffff;
  animation: rml-mon-pulse 2s ease-in-out infinite;
}
@keyframes rml-mon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 76, 76, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 76, 76, 0); }
}

/* Responsive : stack drift cards et current grid sur ecrans etroits */
@media (max-width: 900px) {
  .rml-mon__current-grid,
  .rml-mon__drift-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ML Regime — Help button + overlay [T_RG013]
   Pattern adapté de .rl-help-* (Research Lab, style.css L5134-5264)
   Préfixe BEM .rml-help__* pour isoler du Research Lab.
   ========================================================= */

.rml-help__btn {
  margin-left: auto;
  background: none;
  border: 1.5px solid var(--color-text-muted);
  color: var(--color-text-muted);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.rml-help__btn:hover {
  color: var(--color-accent, #3b6ef5);
  border-color: var(--color-accent, #3b6ef5);
  background: rgba(59, 110, 245, 0.08);
}

.rml-help__overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rml-help__overlay[hidden] {
  display: none;
}

.rml-help__modal {
  background: var(--color-bg-panel, #1e1f2b);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  width: 720px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.rml-help__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.rml-help__modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.rml-help__modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.rml-help__modal-close:hover {
  color: var(--color-text-primary);
}

.rml-help__modal-body {
  overflow-y: auto;
  padding: 20px 24px 28px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.rml-help__section {
  margin-bottom: 22px;
}
.rml-help__section:last-child {
  margin-bottom: 0;
}
.rml-help__section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.rml-help__list {
  padding-left: 20px;
  margin: 8px 0;
}
.rml-help__list li {
  margin-bottom: 5px;
}
.rml-help__list code,
.rml-help__section code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.rml-help__section p {
  margin: 8px 0;
}
.rml-help__section strong {
  color: var(--color-text-primary);
}

/* =========================================================
   Panneau Ticket d'ordre + readout live [T_ELC_012]
   Réutilise .panel / .panel__header / .btn / .modal-overlay.
   Ajout minimal : boutons BUY/SELL colorés, bandeau mode, tables readout.
   ========================================================= */
#panel-orders #panel-orders-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Corps du panneau défilable : ticket + wallet + readouts (positions/ordres/
     pnl/compte) dépassent souvent la hauteur visible -> scroll du panneau entier
     (le fix #5 ne scrollait QUE la sous-liste "Ordres ouverts"). min-height:0 =
     autoriser le rétrécissement en flex ; max-height viewport = plafond -> scroll. */
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.ot-banner {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: 9px;
  padding: 1px 8px;
  background: rgba(41, 217, 122, 0.10);
  white-space: nowrap;
}
.ot-banner--live {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(232, 76, 76, 0.12);
}

.ot-ticket { display: flex; flex-direction: column; gap: 8px; }

.ot-field-row { display: flex; align-items: center; gap: 8px; }
.ot-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ot-field { display: flex; flex-direction: column; gap: 3px; }

.ot-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}
.ot-input {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-size: 12px;
  padding: 4px 8px;
  width: 100%;
}
.ot-field-row .ot-input { flex: 1; }
.ot-input:focus { outline: none; border-color: var(--color-accent); }

.ot-actions { display: flex; gap: 8px; }
.ot-actions--secondary { flex-wrap: wrap; }
.ot-actions .btn { flex: 1; }

.ot-btn-buy {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #06210f;
}
.ot-btn-buy:hover { background: #34e88a; border-color: #34e88a; color: #06210f; }
.ot-btn-sell {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #260808;
}
.ot-btn-sell:hover { background: #ff5e5e; border-color: #ff5e5e; color: #260808; }

.ot-result {
  font-size: 11px;
  font-family: var(--font-mono);
  min-height: 14px;
  word-break: break-word;
}
.ot-result--ok { color: var(--color-success); }
.ot-result--err { color: var(--color-danger); }
.ot-result--pending { color: var(--color-accent); }

.ot-readout { display: flex; flex-direction: column; gap: 10px; }
.ot-readout-section { border-top: 1px solid var(--color-border); padding-top: 8px; }
.ot-readout-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}
.ot-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ot-table th, .ot-table td {
  padding: 3px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ot-table th {
  color: var(--color-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  border-bottom: 1px solid var(--color-border);
}
.ot-table td:first-child, .ot-table th:first-child { text-align: left; }
.ot-sym { font-weight: 600; }
.ot-muted { color: var(--color-text-muted); }
.ot-pos { color: var(--color-success); }
.ot-neg { color: var(--color-danger); }

.ot-pnl-section { display: flex; flex-direction: column; align-items: flex-start; }
.ot-pnl-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* En-tête Compte / Wallet [T_ELC_014] : GET /api/live/account */
.ot-wallet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 12px;
  padding: 11px 13px;
  margin-bottom: 2px;
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-border-accent);
  border-radius: 8px;
}
.ot-wallet-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ot-wallet-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.ot-wallet-val {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ot-wallet-val.ot-pos { color: var(--color-success); }
.ot-wallet-val.ot-neg { color: var(--color-danger); }
.ot-wallet-val.ot-muted { color: var(--color-text-muted); font-weight: 600; }

/* Modale confirmation ordre */
.ot-confirm-modal {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  border-radius: 10px;
  width: 100%;
  max-width: 420px;
  align-self: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.ot-confirm-header {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-panel-alt);
  color: var(--color-text-primary);
}
.ot-confirm-body { padding: 14px 16px; font-size: 12px; }
.ot-recap { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.ot-recap dt { color: var(--color-text-muted); }
.ot-recap dd { margin: 0; color: var(--color-text-primary); font-weight: 600; }
.ot-cancel-list {
  margin: 8px 0 0; padding-left: 16px; font-size: 11px;
  color: var(--color-text-secondary); max-height: 160px; overflow-y: auto;
}
.ot-cancel-list code { font-size: 10px; color: var(--color-text-muted); }
.ot-confirm-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--color-border);
}