/* ══════════════════════════════════════════════════════════════════════════
   Tornado Trade — refonte visuelle
   Chargée après style.css : à spécificité égale la dernière règle gagne, donc
   rien n'est modifié dans l'existant et le retour arrière tient en une ligne.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — quatre niveaux nettement distincts plutôt que trois presque
     identiques. Une hiérarchie doit se lire sans effort. */
  --bg:      #0b0e13;
  --bg1:     #0b0e13;
  --bg2:     #131922;
  --bg3:     #1c2431;
  --bg4:     #26303f;
  --border:  #263041;
  --border-fort: #36435a;

  /* Texte — trois niveaux d'importance, pas deux. */
  --text:       #e8eef6;
  --muted:      #96a3b8;
  --text-muted: #96a3b8;
  --faible:     #6b7a91;

  /* Sémantique : une teinte vive pour le trait, une surface teintée pour le
     fond. Peindre un fond avec la couleur du texte donne une bouillie. */
  --green:  #46d16f;  --green-fond:  rgba(70,209,111,.12);
  --red:    #ff5f56;  --red-fond:    rgba(255,95,86,.12);
  --orange: #e3a33a;  --orange-fond: rgba(227,163,58,.12);
  --blue:   #5aa9ff;  --blue-fond:   rgba(90,169,255,.12);
  --purple: #b98cff;  --purple-fond: rgba(185,140,255,.12);

  /* Échelle d'espacement : des pas réguliers évitent les 7, 9 et 14 px
     dispersés qui empêchent l'œil de trouver un rythme. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --gap: 12px;

  --radius: 8px;  --radius-sm: 6px;  --radius-lg: 12px;

  /* Profondeur : une ombre très douce et un liseré clair suffisent à décoller
     une carte du fond, sans effet de relief appuyé. */
  --ombre: 0 1px 2px rgba(0,0,0,.35);
  --ombre-md: 0 4px 12px rgba(0,0,0,.4);

  --transition: 140ms cubic-bezier(.4,0,.2,1);
}

html, body {
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Chiffres en chasse fixe partout : dans une colonne de prix, des glyphes de
   largeurs inégales font danser les décimales d'une ligne à l'autre. */
.num, table td, table th, input[type="number"],
.tick-price, .tick-chg, .wallet-bal, .wallet-usd,
.pos-pnl, .demo-row strong, .sim-log, .gauge-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--e4);
  box-shadow: var(--ombre);
  position: relative;
}
/* Liseré supérieur : marque la limite haute sans ajouter de trait franc. */
.card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06) 20%,
                              rgba(255,255,255,.06) 80%, transparent);
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
}

/* Un titre accompagne, il ne crie pas : les capitales grasses en gris
   attiraient davantage l'œil que les données qu'elles annoncent. */
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: var(--e3);
  display: flex; align-items: center; gap: var(--e2);
}

/* ── Barre de cotations ─────────────────────────────────────────────────── */
#ticker-bar {
  height: 52px;
  background: linear-gradient(180deg, #131922, #0b0e13);
  border-bottom: 1px solid var(--border);
}
.ticker {
  border: 1px solid transparent;
  padding: var(--e1) var(--e3);
  transition: background var(--transition), border-color var(--transition);
}
.ticker:hover { background: var(--bg3); border-color: var(--border-fort); }
.ticker.active { background: var(--blue-fond); border-color: var(--blue); }
.tick-sym { font-size: 10px; letter-spacing: .08em; color: var(--faible); }
.tick-price { font-size: 14px; font-weight: 600; }

/* ── Onglets ────────────────────────────────────────────────────────────── */
.page-nav {
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--e2);
}
.page-tab {
  color: var(--muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), background var(--transition);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.page-tab:hover { color: var(--text); background: var(--bg2); }
.page-tab.active { color: var(--blue); border-bottom-color: var(--blue); background: transparent; }

/* ── Champs ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--e3); }
.form-group label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--e1);
}
input, select, textarea {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 11px;
  font-size: 13.5px;
  transition: border-color var(--transition), box-shadow var(--transition),
              background var(--transition);
}
input:hover, select:hover { border-color: var(--border-fort); }
input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  background: var(--bg2);
  /* Anneau de focus plutôt qu'un simple changement de bordure : perceptible
     même quand on distingue mal les teintes. */
  box-shadow: 0 0 0 3px var(--blue-fond);
  outline: none;
}
/* Les flèches des champs numériques encombrent des colonnes serrées. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%2396a3b8' d='M6 8.5 2.5 5h7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-fort);
  background: var(--bg3);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: background var(--transition), border-color var(--transition), transform 80ms;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { background: var(--bg4); border-color: #465569; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-fond); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #06101f; font-weight: 600; }
.btn-primary:hover { background: #74b8ff; border-color: #74b8ff; }
.btn-buy  { background: var(--green); border-color: var(--green); color: #04170b; font-weight: 600; }
.btn-sell { background: var(--red);   border-color: var(--red);   color: #1d0503; font-weight: 600; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-xs { padding: 3px 8px;  font-size: 11px; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
}
.badge-on  { background: var(--green-fond); color: var(--green); border-color: rgba(70,209,111,.3); }
.badge-off { background: var(--red-fond);   color: var(--red);   border-color: rgba(255,95,86,.3); }

.sig-BUY  { background: var(--green-fond); color: var(--green); }
.sig-SELL { background: var(--red-fond);   color: var(--red); }
.sig-HOLD { background: var(--bg3);        color: var(--muted); }

/* ── Tableaux ───────────────────────────────────────────────────────────── */
table { font-size: 12.5px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg2);
  color: var(--faible);
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--e2);
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 7px var(--e2); border-bottom: 1px solid rgba(38,48,65,.6); }
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: rgba(90,169,255,.05); }
tbody tr:last-child td { border-bottom: none; }

/* ── Journal ────────────────────────────────────────────────────────────── */
.sim-log-line {
  border-radius: var(--radius-sm);
  padding: 6px var(--e2);
  border-left: 2px solid transparent;
  background: var(--bg1);
}
.sim-log-ts { color: var(--faible); margin-right: var(--e2); font-size: 11px; }
.sim-ind {
  background: var(--bg3); border-radius: 4px; padding: 1px 6px;
  border: 1px solid var(--border);
}

/* ── États vides ────────────────────────────────────────────────────────── */
.pos-empty, .sim-log-empty, .demo-empty {
  text-align: center; color: var(--faible);
  padding: var(--e5) var(--e4); font-size: 13px;
  background: var(--bg1); border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}

/* ── Barre d'état du bot ────────────────────────────────────────────────── */
.sim-status-bar {
  background: var(--bg1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--e2) var(--e3);
  font-size: 12.5px;
}
.sim-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faible); }
.sim-dot-running {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-fond);
  animation: pouls 2s ease-in-out infinite;
}
@keyframes pouls { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ── Accessibilité ──────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Une animation permanente gêne certaines personnes et n'apporte rien ici. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg4); border-radius: 999px;
  border: 3px solid #0b0e13;
}
::-webkit-scrollbar-thumb:hover { background: #3c4a60; }