/*
  Tokens (délibérément sobres — cet écran gère des secrets réels, la confiance
  prime sur l'effet visuel) :
    fond      #14171C  charcoal profond
    surface   #1D2128  cartes/formulaires
    texte     #EDEBE6  blanc cassé (moins fatigant qu'un blanc pur en usage prolongé)
    muet      #8B93A1
    accent    #C99A4B  ambre — clin d'œil au bandeau de cotation des salles de marché,
                       volontairement différent du orange-terracotta générique IA
    danger    #D9534F  réservé aux avertissements LIVE / argent réel
    succes    #4CAF7D  réservé au mode PAPER / états sûrs
  Typo : pile système (aucune dépendance externe — un écran de connexion vers
  un compte de trading ne doit rien charger d'un CDN qui pourrait être bloqué
  ou lent). Gros corps de texte par défaut (18px) conformément au cahier des
  charges ("gros caractères, interface simple").
*/

:root {
  --bg: #14171C;
  --surface: #1D2128;
  --surface-2: #262B33;
  --text: #EDEBE6;
  --muted: #8B93A1;
  --accent: #C99A4B;
  --accent-text: #14171C;
  --danger: #D9534F;
  --success: #4CAF7D;
  --border: #2E333D;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
}

/* Liens : empêcher le bleu/violet navigateur peu lisible sur fond sombre. */
a,
a:visited {
  color: var(--accent);
  text-decoration-color: currentColor;
}
a:hover,
a:focus {
  color: var(--accent);
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 28px;
}
.brand .mark {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.brand .env {
  color: var(--muted);
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}

h1 {
  font-size: 24px;
  margin: 0 0 6px;
}
h2 {
  font-size: 19px;
  margin: 0 0 14px;
}
p.lead {
  color: var(--muted);
  margin: 0 0 20px;
  font-size: 16px;
}

label {
  display: block;
  font-size: 15px;
  color: var(--muted);
  margin: 18px 0 6px;
}
label:first-of-type { margin-top: 0; }

input[type="text"],
input[type="email"],
input[type="password"],
select {
  width: 100%;
  font-size: 18px;
  font-family: var(--font);
  padding: 14px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  min-height: 52px;
}
input:focus, select:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

button, .btn {
  display: inline-block;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 18px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  min-height: 52px;
  margin-top: 22px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
button:focus, .btn:focus { outline: 3px solid var(--text); outline-offset: 2px; }
button:active, .btn:active { transform: translateY(1px); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.alert {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 16px;
}
.alert-error   { background: rgba(217,83,79,0.12); border: 1px solid var(--danger); color: #F3B7B5; }
.alert-success { background: rgba(76,175,125,0.12); border: 1px solid var(--success); color: #A9E0C4; }
.alert-info    { background: rgba(139,147,161,0.12); border: 1px solid var(--border); color: var(--muted); }

.tag {
  display: inline-block;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.tag-demo { color: var(--success); border-color: var(--success); }
.tag-live { color: var(--danger); border-color: var(--danger); }

.account-row {
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.account-row:first-child { border-top: none; }
.account-row .meta { color: var(--muted); font-size: 14px; margin-top: 4px; }

.key-box {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  color: var(--accent);
  word-break: break-all;
  user-select: all;
}

.footer-links {
  text-align: center;
  margin-top: 24px;
  font-size: 15px;
}
.footer-links a,
.footer-links a:visited { color: var(--accent); }

/* ------------------------------------------------------------------
   Analyse détaillée d'une valeur
   ------------------------------------------------------------------ */
.page-wide {
  max-width: 1040px;
}

.symbol-row-link {
  color: inherit;
  text-decoration: none;
  align-items: center;
  gap: 18px;
}
.symbol-row-link:hover .ticker,
.symbol-row-link:focus .ticker {
  color: var(--accent);
}
.symbol-row-link:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.symbol-row-side {
  text-align: right;
  flex: 0 0 auto;
}
.score-mini {
  font-size: 14px;
  margin-top: 2px;
}

.analysis-head,
.decision-card-top,
.chart-toolbar,
.analysis-refresh-row,
.account-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.analysis-head-price {
  text-align: right;
  min-width: 180px;
}
.analysis-head-price .label,
.decision-card .label {
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.analysis-price {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
}
.decision-card {
  border-left-width: 5px;
}
.decision-success { border-left-color: var(--success); }
.decision-danger { border-left-color: var(--danger); }
.decision-warning { border-left-color: var(--accent); }
.decision-neutral { border-left-color: var(--muted); }
.decision-label {
  font-size: 25px;
  font-weight: 700;
  margin-top: 2px;
}
.decision-score {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
}
.decision-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.analysis-grid > .card {
  min-width: 0;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.metric-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}
.metric-label {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 3px;
}
.metric-value {
  font-size: 17px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.chart-card {
  padding-bottom: 18px;
}
.chart-toolbar {
  align-items: flex-end;
  margin-bottom: 14px;
}
.timeframe-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
button.tf-btn {
  width: auto;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
}
button.tf-btn.active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
.chart-wrap {
  position: relative;
  width: 100%;
  min-height: 330px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
}
#candles-chart {
  display: block;
  width: 100%;
  touch-action: pan-y;
}
.chart-empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--muted);
}
.chart-tooltip {
  position: absolute;
  z-index: 4;
  padding: 8px 10px;
  background: rgba(20,23,28,.94);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  pointer-events: none;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-line { width: 20px; height: 2px; background: var(--accent); display: inline-block; }
.legend-buy { color: var(--success); font-style: normal; }
.legend-sell { color: var(--danger); font-style: normal; }
.legend-signal { color: var(--accent); font-style: normal; }

.score-row { margin-bottom: 14px; }
.score-row-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  margin-bottom: 5px;
}
.score-track {
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.score-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}
.risk-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.tag-risk { color: var(--danger); border-color: var(--danger); }

.gate-list { display: grid; gap: 8px; }
.gate-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.gate-row:first-child { border-top: 0; }
.gate-icon { font-weight: 800; }
.gate-ok .gate-icon { color: var(--success); }
.gate-no .gate-icon { color: var(--danger); }
.gate-title { font-weight: 650; }

.account-analysis-row,
.position-analysis-row {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.account-analysis-row:first-child,
.position-analysis-row:first-child { border-top: 0; }
.history-main { font-weight: 700; }
.history-reason { margin-top: 8px; }
.compact-btn {
  width: auto;
  min-width: 130px;
  margin-top: 0;
  padding: 10px 16px;
  min-height: 44px;
}

@media (max-width: 760px) {
  .page-wide { max-width: 520px; }
  .analysis-grid { grid-template-columns: 1fr; gap: 0; }
  .analysis-head,
  .chart-toolbar,
  .analysis-refresh-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .analysis-head-price {
    text-align: left;
    min-width: 0;
  }
  .timeframe-buttons { justify-content: flex-start; }
  .decision-card-top { align-items: flex-start; }
  .decision-label { font-size: 22px; }
  .decision-score { font-size: 22px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .chart-wrap { min-height: 330px; }
}

@media (max-width: 390px) {
  .metric-grid { grid-template-columns: 1fr; }
  .symbol-row-link { align-items: flex-start; }
  .symbol-row-side { text-align: right; }
}

.ticker-link,
.ticker-link:visited {
  color: var(--accent);
  text-decoration: none;
}
.ticker-link:hover,
.ticker-link:focus {
  color: var(--accent);
  text-decoration: underline;
}
.gate-na .gate-icon { color: var(--muted); }

.positive { color: var(--success); }
.negative { color: var(--danger); }

/* ==================================================================
   CORRECTIF VISIBILITE — MENU + VALEURS
   Le dashboard charge /assets/style*.css : les anciennes règles de
   /style.css n'étaient donc jamais appliquées à ces composants.
   ================================================================== */

/* Structures du tableau de bord qui manquaient dans assets/style.css */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 4px;
}
.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.stat .label {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stat .value { font-size: 22px; font-weight: 700; }
.stat .value.positive { color: var(--success); }
.stat .value.negative { color: var(--danger); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.pill-open { color: var(--success); border-color: var(--success); }
.pill-closed { color: var(--muted); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.symbol-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.symbol-row:first-child { border-top: none; }
.symbol-row .ticker { font-weight: 700; }
.symbol-row .price { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.symbol-row .meta { color: var(--muted); font-size: 13px; }
.symbol-row .stale { color: var(--danger); }

nav.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Plus AUCUN bleu navigateur dans les menus. */
nav.tabs a,
nav.tabs a:link,
nav.tabs a:visited,
nav.tabs a:hover,
nav.tabs a:focus,
nav.tabs a:active {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent) !important;
  background: transparent !important;
  white-space: nowrap;
}
nav.tabs a.active,
nav.tabs a.active:link,
nav.tabs a.active:visited,
nav.tabs a.active:hover,
nav.tabs a.active:focus,
nav.tabs a.active:active {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  background: rgba(201,154,75,.16) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(201,154,75,.18);
}

/* Tickers, noms cliquables et valeurs/chiffres de la liste en ambre. */
.symbol-row .ticker,
.symbol-row .ticker a,
.symbol-row .ticker a:link,
.symbol-row .ticker a:visited,
.symbol-row-link,
.symbol-row-link:link,
.symbol-row-link:visited,
.ticker-link,
.ticker-link:link,
.ticker-link:visited {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-decoration: none !important;
}
.symbol-row-link:hover .ticker,
.symbol-row-link:focus .ticker,
.symbol-row .ticker a:hover,
.symbol-row .ticker a:focus,
.ticker-link:hover,
.ticker-link:focus {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
  text-decoration: underline !important;
}
.symbol-row .price,
.symbol-row-side .price,
.score-mini:not(.positive):not(.negative),
.analysis-price,
.decision-score {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* Tous les autres liens texte héritent aussi de l'ambre au lieu du bleu Safari. */
a:not(.btn):not(.btn-secondary),
a:not(.btn):not(.btn-secondary):link,
a:not(.btn):not(.btn-secondary):visited {
  color: var(--accent);
}
.footer-links a,
.footer-links a:visited {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

@media (max-width: 480px) {
  nav.tabs a { padding: 9px 12px; font-size: 15px; }
  .symbol-row { align-items: flex-start; }
}

/* ==================================================================
   MONITEUR SCANNER + OPPORTUNITÉS LIVE
   ================================================================== */
.scan-monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.scan-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
}
.scan-state-active { color: var(--success); border-color: var(--success); }
.scan-state-delayed { color: var(--accent); border-color: var(--accent); }
.scan-state-stopped { color: var(--danger); border-color: var(--danger); }
.scan-state-paused,
.scan-state-checking { color: var(--muted); border-color: var(--border); }
.scan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.scan-metric {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.scan-metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}
.scan-metric strong {
  display: block;
  color: var(--accent);
  font-size: 16px;
}
.scan-detail { margin: 14px 0 0; }
.scan-help { margin: 12px 0 0; font-size: 13px; }
.live-updated { margin: 0 0 8px; font-size: 13px; }
.opportunity-buy-tag { color: var(--success) !important; border-color: var(--success) !important; }
.risk-flag-tag { color: var(--danger) !important; border-color: var(--danger) !important; }

@media (max-width: 760px) {
  .scan-monitor-head { flex-direction: column; }
  .scan-metrics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
  .scan-metrics { grid-template-columns: 1fr; }
}

/* ==================================================================
   RÉGLAGE DU SEUIL D'ENTRÉE
   ================================================================== */
.engine-threshold-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.threshold-form { margin-top: 16px; }
.threshold-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.threshold-scale span:first-child { text-align: left; }
.threshold-scale span:last-child { text-align: right; }
.threshold-scale small { font-size: 10px; }
#entry-score-threshold {
  width: 100%;
  accent-color: var(--accent);
  margin: 10px 0 14px;
}
.threshold-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.threshold-actions button { margin: 0; }
#entry-threshold-badge {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  font-weight: 800;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .engine-threshold-head,
  .threshold-actions { flex-direction: column; align-items: stretch; }
  .threshold-actions button { width: 100%; }
}