/* ===================== */
/* Thèmes (variables)    */
/* ===================== */

/* Sombre (défaut) */
:root{
  --bg:#0b1020; --text:#e6e9ef;

  --panel-bg:rgba(255,255,255,.04);
  --panel-border:rgba(255,255,255,.10);
  --divider:rgba(255,255,255,.08);

  --tab-bg:rgba(255,255,255,.06);
  --tab-border:rgba(255,255,255,.16);
  --tab-bg-hover:rgba(255,255,255,.10);
  --tab-border-hover:rgba(255,255,255,.24);
  --tab-bg-active:rgba(255,255,255,.16);
  --tab-border-active:rgba(255,255,255,.32);

  --border:var(--panel-border);
  --chip-bg:rgba(255,255,255,.08);
  --chip-border:rgba(255,255,255,.16);

  --ok-bg:rgba(0,200,100,.15);
  --ok-border:rgba(0,200,100,.35);
  --warn-bg:rgba(255,180,0,.15);
  --warn-border:rgba(255,180,0,.35);
  --ko-bg:rgba(200,50,50,.2);
  --ko-text:#ff6b6b;

  /* Tooltip opaque lisible en sombre */
  --tooltip-bg:#0f1424;
}

/* Clair */
.theme-light{
  --bg:#f7f8fa; --text:#1d2433;

  --panel-bg:#fff;
  --panel-border:rgba(0,0,0,.10);
  --divider:rgba(0,0,0,.06);

  --tab-bg:#fff;
  --tab-border:rgba(0,0,0,.12);
  --tab-bg-hover:#f2f4f7;
  --tab-border-hover:rgba(0,0,0,.24);
  --tab-bg-active:#e6eaf0;
  --tab-border-active:rgba(0,0,0,.32);

  --border:var(--panel-border);
  --chip-bg:#eef1f6;
  --chip-border:rgba(0,0,0,.12);

  /* Tooltip opaque lisible en clair */
  --tooltip-bg:#ffffff;
}

/* ===================== */
/* Global & accessibilité*/
/* ===================== */
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

html,body{height:100%}
body{
  margin:0; min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:var(--bg); color:var(--text);
}

/* ===================== */
/* Layout principal      */
/* ===================== */
main.layout{
  display:grid; grid-template-columns:minmax(0,1fr) 8px var(--admin-w, 320px);
  gap:4px; height:100vh; padding:12px;
}

/* Poignée de redimensionnement entre graphique et panneau admin */
.split-handle{
  cursor:col-resize; align-self:stretch; position:relative;
  touch-action:none; user-select:none; border-radius:4px;
}
.split-handle::after{
  content:""; position:absolute; top:0; bottom:0; left:3px; width:2px;
  background:var(--divider); border-radius:2px;
  transition:background 120ms ease, width 120ms ease, left 120ms ease;
}
.split-handle:hover::after,
.split-handle.dragging::after{
  background:var(--tab-border-active); width:4px; left:2px;
}

/* ===================== */
/* Panels génériques     */
/* ===================== */
.panel,
.panel-graphic,.panel-admin{
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:10px;
  display:flex; flex-direction:column;
  min-height:0; overflow:hidden;
}

.panel__header, .panel-header{
  padding:10px 12px;
  border-bottom:1px solid var(--divider);
  font-weight:600;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.spacer{flex:1}

.panel__body, .panel-body{
  padding:12px;
  flex:1 1 auto;
  min-height:0; /* indispensable pour scroll interne */
  display:flex; flex-direction:column; gap:8px;
}

/* Le panneau admin scrolle verticalement quand un onglet dépasse
   (Supervision à 3 blocs, listes d'incidents…) et horizontalement quand un
   contenu impose une largeur minimale (sélecteur de paires: 205px). Le panneau
   graphique garde sa gestion interne (chart et logs ont leur propre layout). */
.panel-admin .panel__body{
  overflow-y:auto;
  overflow-x:auto;
}

/* ===================== */
/* Contrôles / Boutons   */
/* ===================== */
.panel__header select, .panel-header select,
.symbol-editor input, .btn{
  border:1px solid var(--panel-border);
  background:transparent; color:inherit; border-radius:8px; font:inherit;
}
.btn{padding:6px 10px; cursor:pointer}
.btn-sm{padding:4px 8px; font-size:12px}
.btn-xs{padding:2px 6px; font-size:11px}
.muted{opacity:.7}
.error{color:var(--ko-text)}

/* ===================== */
/* Toggle thème          */
/* ===================== */
.theme-toggle{
  position:relative; width:46px; height:24px; background:var(--tab-bg);
  border:1px solid var(--tab-border); border-radius:12px; cursor:pointer; margin-left:auto;
  transition:background .3s,border-color .3s;
}
.theme-toggle::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px;
  background:var(--text); border-radius:50%; transition:transform .3s,background .3s;
}
.theme-toggle.active{background:var(--tab-bg-active); border-color:var(--tab-border-active)}
.theme-toggle.active::after{transform:translateX(22px)}

/* ===================== */
/* Onglets               */
/* ===================== */
.tab-button{
  background:var(--tab-bg); border:1px solid var(--tab-border);
  color:inherit; padding:6px 12px; border-radius:8px; cursor:pointer; line-height:1.2;
}
.tab-button:hover{background:var(--tab-bg-hover); border-color:var(--tab-border-hover)}
.tab-button.active{background:var(--tab-bg-active); border-color:var(--tab-border-active); font-weight:600}
.tab-button:focus{outline:2px solid rgba(165,216,255,.5); outline-offset:2px}
.tab-button svg{width:16px; height:16px; display:block}
/* ===================== */
/* Monitoring            */
/* ===================== */
.adm-box{display:grid; gap:8px}
.adm-header{display:flex; align-items:center; gap:8px; font-weight:600}
.adm-row{display:grid; grid-template-columns:1fr auto; align-items:center}
.adm-key{opacity:.8}
.adm-value{font-variant-numeric:tabular-nums}
.adm-value--right{text-align:right} /* valeurs longues qui replient (ex: file d'attente) */
.adm-subheader{grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-weight:600; font-size:.9rem; opacity:.85; padding-top:6px; margin-top:4px; border-top:1px solid rgba(0,0,0,.12)}
.adm-subheader::before{content:""; width:6px; height:6px; border-radius:999px; background:currentColor; opacity:.35}
.badge{display:inline-block; padding:2px 8px; border-radius:9999px; font-size:12px}
.badge.ok{background:var(--ok-bg); border:1px solid var(--ok-border)}
.badge.warn{background:var(--warn-bg); border:1px solid var(--warn-border)}
.sys-sep{border:0; border-top:1px solid var(--border); margin:12px 0; opacity:.5}

/* ===================== */
/* Collectors (vignettes)*/
/* ===================== */
.subpanel-header{display:flex; align-items:center; gap:8px}
.subpanel-title{margin:0; font-size:14px; font-weight:600}
.table-wrap{overflow:auto}

.collector-badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:18px}
.collector-badge.ok{background:rgba(0,180,90,.2); color:#00c26e}
.collector-badge.warn{background:rgba(255,180,0,.2); color:#ffb400}
.collector-badge.ko{background:var(--ko-bg); color:var(--ko-text)}

.symbol-editor{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center}
.symbol-editor input{padding:6px 8px; font-size:13px; min-width:0}
.symbol-editor .error{grid-column:1 / -1}

/* Une vignette par ligne, quelle que soit la largeur du panneau */
.collector-grid{display:grid; grid-template-columns:1fr; gap:12px}
.collector-card{border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--panel-bg); box-shadow:0 1px 3px rgba(0,0,0,.05)}
.collector-card__head{display:flex; align-items:center; gap:8px}
.collector-card__id{font-weight:600; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.collector-card__countdown{margin-left:6px}
.collector-card__status{margin-left:auto}
.icon-btn.caret{border:none; background:transparent; cursor:pointer; font-size:14px; line-height:1; padding:2px 4px}
.collector-card__body{margin-top:10px; padding-top:8px; border-top:1px dashed var(--border); display:grid; gap:8px}
.collector-card__row{display:flex; align-items:center; gap:8px}
.collector-card__row .label{width:80px; color:#666; font-size:12px}
.collector-card__row .grow{flex:1}

/* ===================== */
/* Compte à rebours      */
/* ===================== */
.countdown-badge{
  display:inline-block; padding:2px 6px; border-radius:999px; font-size:12px; line-height:1;
  border:1px solid var(--chip-border); background:var(--chip-bg); color:inherit; font-variant-numeric:tabular-nums;
}
.countdown-badge.warn{border-color:#d9a600; background:#fff8e1}
.countdown-badge.due{border-color:#c62828; background:#ffebee; font-weight:600}

/* ===================== */
/* Panneau Graphique     */
/* ===================== */
.panel-graphic .panel__body, .panel-graphic .panel-body{
  display:flex; flex-direction:column; gap:8px; min-height:0;
}
.chart-wrap{ flex:1 1 auto; min-height:260px; }
.chart-wrap .ohlc-container{ width:100%; height:100%; }

/* ===================== */
/* Logs + liste          */
/* ===================== */
.logs-section{
  flex:0 0 220px; display:flex; flex-direction:column;
  border-top:1px solid var(--divider); padding-top:8px; min-height:0;
}
.logs-section .subpanel-header{ flex:0 0 auto; }
.logs-section .logs-list{
  flex:1 1 auto; min-height:0; overflow:auto;
  display:grid; gap:4px; padding-right:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; line-height:1.35;
}

.log-row{display:grid; grid-template-columns:140px 60px 120px 120px 1fr; gap:8px}
.log-row .lvl{font-weight:600; text-transform:uppercase;}
.log-row .lvl.warn{color:#ffb400}
.log-row .lvl.err{color:#ff6b6b}
.log-row .ts{font-variant-numeric:tabular-nums; opacity:.85; white-space:nowrap;}
.log-row .comp{opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}
.log-row .evt{opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.log-row .msg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.log-row .comp:hover, .log-row .evt:hover, .log-row .msg:hover{ overflow:visible; }

/* ===================== */
/* Badges (globaux)      */
/* ===================== */
.badge-err { color:#c62828; border-color:#c62828; background:#ffebee; }
.badge-warn{ color:#b58900; border-color:#d9a600; background:#fff8e1; }
.badge-ok  { color:#2e7d32; border-color:#388e3c; background:#e8f5e9; }

/* ============================== */
/* Bandeau alerte + Tooltip       */
/* ============================== */
.alert-banner{
  position:relative;
  width:100%;
  box-sizing:border-box;
  padding:8px 12px;
  margin-bottom:8px;
  border:1px solid var(--border);
  background:var(--panel-bg);
  border-radius:10px;
  display:flex; align-items:center; gap:8px;
  max-width:100%;
}
.alert-banner:focus{ outline:2px solid rgba(165,216,255,.5); outline-offset:2px; }
.alert-banner__dot{ width:8px; height:8px; border-radius:50%; background:#ff6b6b; display:inline-block; flex:0 0 auto; }
.alert-banner.is-empty .alert-banner__dot{ background:#8a8f98; }
.alert-banner__text{ line-height:1.2; opacity:.95; }

/* Tooltip étroit & opaque */
.alert-tooltip{
  position:absolute; top:calc(100% + 8px); right:0; z-index:50;
  width:min(340px, 90vw); max-height:45vh; overflow:auto;
  background:var(--tooltip-bg); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  padding:10px; display:grid; gap:8px;
}
.alert-tooltip::before{
  content:""; position:absolute; top:-6px; right:18px;
  width:10px; height:10px; background:var(--tooltip-bg);
  border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform:rotate(45deg);
}
.alert-banner:focus-within .alert-tooltip{ display:block; }

/* ============================== */
/* Lignes d’incident (unifiées)   */
/* – utilisées dans tooltip ET onglet */
/* ============================== */
.incident-row,
.alert-tooltip__item{
  display:grid;
  grid-template-columns:auto auto 1fr auto; /* [LEVEL] [time] [comp] [evt] */
  grid-template-areas:"lvl ts comp evt";
  align-items:center; gap:8px;
  padding:6px 8px;
  border:1px solid transparent; border-radius:8px;
}
.incident-row:hover,
.alert-tooltip__item:hover{
  background:var(--chip-bg); border-color:var(--chip-border);
}
.incident-row .badge,
.alert-tooltip__item .badge{
  grid-area:lvl; padding:2px 6px; font-size:11px; font-weight:700;
  border:1px solid var(--chip-border); border-radius:9999px; background:var(--chip-bg);
}
.incident-row .i-ts,
.alert-tooltip__item .i-ts{
  grid-area:ts; white-space:nowrap; font-variant-numeric:tabular-nums; opacity:.8;
}
.incident-row .i-comp,
.alert-tooltip__item .i-comp{
  grid-area:comp; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:.9; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.incident-row .i-evt,
.alert-tooltip__item .i-evt{
  grid-area:evt; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.9;
}

/* Responsive étroit pour incidents */
@media (max-width:400px){
  .incident-row,
  .alert-tooltip__item{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "lvl ts"
      "comp comp"
      "evt  evt";
    row-gap:4px;
  }
  .incident-row .i-comp,
  .incident-row .i-evt,
  .alert-tooltip__item .i-comp,
  .alert-tooltip__item .i-evt{
    white-space:normal; overflow-wrap:anywhere;
  }
}

/* ===================== */
/* Vue Incidents (onglet)*/
/* ===================== */
.incidents-list{ display:grid; gap:8px; }
.incidents-item{ composes: incident-row; } /* si PostCSS; sinon, ajoute class="incidents-item incident-row" */

.inc-grid { display: grid; gap: 8px; }
.inc-card {
  background: var(--panel-bg); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 8px 10px;
}
.inc-head { display: flex; align-items: center; gap: 8px; }
.inc-title { font-weight: 600; font-size: 0.85em; }
.i-sep { opacity: .6; margin: 0 4px; }
.i-ts { font-variant-numeric: tabular-nums; opacity: .8; margin-right: 6px; }
.btn-icon {
  border: 1px solid var(--border); background: var(--chip-bg);
  padding: 2px 6px; border-radius: 8px; cursor: pointer;
}
.btn-icon:hover { background: var(--tab-bg-hover); }
.inc-body { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--divider); }
.inc-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin: 4px 0; }
.inc-k { opacity: .7; }
.inc-v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.inc-msg { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chev { width: 1em; text-align: center; }

.btn-icon.btn-danger { padding: 2px 6px; }
.btn-icon.btn-danger:disabled { opacity: .6; cursor: not-allowed; }

/* ===================== */
/* Onglet Paires         */
/* ===================== */
.pairs-table{width:100%; border-collapse:collapse; font-size:13px}
.pairs-table th{
  text-align:left; padding:6px 10px; font-weight:600; white-space:nowrap;
  opacity:.7; border-bottom:1px solid var(--border);
}
.pairs-table td{padding:6px 10px; white-space:nowrap; border-bottom:1px solid var(--divider)}
.pairs-table .num{text-align:right; font-variant-numeric:tabular-nums}
.pairs-table .pair-sym{font-weight:600}
/* Paire absente de toute config collector: données figées, ligne atténuée
   (le badge "non collectée" reste à pleine opacité pour attirer l'œil) */
.pairs-table tr.pair-orphan td{opacity:.55}
.pairs-table tr.pair-orphan .badge{opacity:1}

/* ============================== */
/* Sélecteur de paires (Collecteurs) */
/* ============================== */
/* Zone de saisie (et liste de suggestions) à largeur fixe de 190px,
   choisie par l'utilisateur. Les boutons Enr./Stop restent accolés. */
.pair-picker{display:flex; flex-direction:column; gap:6px; width:100%}
.pair-picker__row{display:flex; align-items:center; gap:8px}
.pair-picker__field{position:relative; flex:1; min-width:190px; max-width:190px}
.pair-picker__field input{width:100%; padding:6px 8px; font-size:12px}
.pair-picker__chips{display:flex; flex-wrap:wrap; gap:6px}
.pair-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px 2px 8px; border-radius:9999px;
  background:var(--chip-bg); border:1px solid var(--chip-border);
  font-size:11.5px; font-weight:600;
}
.pair-chip__x{
  border:none; background:transparent; cursor:pointer; color:inherit;
  font-size:13px; line-height:1; padding:0 2px; opacity:.7;
}
.pair-chip__x:hover{opacity:1; color:#ff6b6b}
.pair-suggest{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  max-height:260px; overflow-y:auto;
  background:var(--tooltip-bg); border:1px solid var(--panel-border);
  border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pair-suggest__item{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; cursor:pointer; font-size:12px;
}
.pair-suggest__item:hover{background:var(--tab-bg-hover)}
.pair-suggest__item.blocked{cursor:not-allowed; opacity:.5}
.pair-suggest__sym{font-weight:600}
.pair-suggest__vol{margin-left:auto; opacity:.65; font-variant-numeric:tabular-nums}
.pair-suggest__lock{font-size:10.5px; padding:1px 6px; border-radius:9999px;
  background:var(--warn-bg); border:1px solid var(--warn-border); white-space:nowrap}

/* Détail des trous (affiché dans les cartes d'incident) */
.gaps-summary{display:flex; align-items:center; gap:8px; font-size:12px; opacity:.85; margin-bottom:6px}
.gap-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.gap-item{display:flex; gap:16px; font-size:12.5px}
.gap-range{font-variant-numeric:tabular-nums}
.gap-qty{opacity:.75}

/* ===================== */
/* Onglet Incidents      */
/* ===================== */
.inc-section-title{margin:10px 0 6px; font-size:13px; font-weight:600; opacity:.8}
.cond-card .inc-title{white-space:normal}

/* Pastille compteur sur l'onglet Incidents */
.tab-button{position:relative}
.tab-count{
  position:absolute; top:-5px; right:-5px;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:9999px; background:#c62828; color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

/* ============================== */
/* Panneau admin: typo compacte   */
/* ============================== */
/* Base héritée (16px navigateur -> 13px) + ajustement proportionnel des
   tailles explicites. Scopé au panneau de droite uniquement. */
.panel-admin{font-size:13px}
.panel-admin input,
.panel-admin select,
.panel-admin button{font-size:12px} /* les contrôles de formulaire n'héritent pas */
.panel-admin .adm-subheader{font-size:12px} /* était en rem (insensible au parent) */
.panel-admin .subpanel-title{font-size:13px}
.panel-admin .inc-section-title{font-size:12px}
.panel-admin .badge,
.panel-admin .collector-badge{font-size:11px}
.panel-admin .pairs-table{font-size:12px}
.panel-admin .symbol-editor input{font-size:12px}
.panel-admin .gaps-summary{font-size:11px}
.panel-admin .gap-item{font-size:11.5px}

/* ===================== */
/* Responsif général     */
/* ===================== */
@media (max-width:900px){
  .panel-graphic .logs-section{flex-basis:180px}
}
@media (max-width:600px){
  .symbol-editor{grid-template-columns:1fr}
  .symbol-editor .btn{justify-self:start}
}