/* =============================================================================
   SIGNALNEST — DONNÉES DE MARCHÉ
   .sn-price-header · .sn-candlestick-chart · .sn-orderbook
   .sn-performance-chart · .sn-sparkline
   ============================================================================= */

/* ---- sn-price-header --------------------------------------------------------
   En-tête d'instrument : symbole, prix, variation, statistiques 24h.
   Écran source : BTC/USD 63 825,4  -0,29 %.                            */
.sn-price-header__symbol-row { display: flex; align-items: center; justify-content: space-between; }
.sn-price-header__symbol { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sn-text-lg); font-weight: var(--sn-weight-bold); }
.sn-price-header__price {
  font-family: var(--sn-font-mono);
  font-size: var(--sn-text-3xl);
  font-weight: var(--sn-weight-bold);
  letter-spacing: var(--sn-tracking-tight);
  margin-top: var(--sn-space-1);
}
.sn-price-header__sub { display: flex; align-items: center; gap: var(--sn-space-2); margin-top: 2px; font-family: var(--sn-font-mono); font-size: var(--sn-text-sm); }
.sn-price-header__change--positive { color: var(--sn-color-positive-600); }
.sn-price-header__change--negative { color: var(--sn-color-negative-600); }
.sn-price-header__badges { display: flex; gap: var(--sn-space-2); margin-top: var(--sn-space-2); }
.sn-price-header__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-2) var(--sn-space-5);
  margin-top: var(--sn-space-4);
}
.sn-price-header__stat-row { display: flex; justify-content: space-between; font-size: var(--sn-text-sm); }
.sn-price-header__stat-label { color: var(--sn-color-text-tertiary); }
.sn-price-header__stat-value { font-family: var(--sn-font-mono); font-weight: var(--sn-weight-medium); }

/* ---- sn-candlestick-chart ----------------------------------------------------
   Cadre de graphique en chandeliers : sélecteur de période, légende de
   moyennes mobiles, zone de tracé, rangée d'indicateurs.
   Le tracé lui-même est injecté par une lib de charting (ex. Lightweight
   Charts) dans .sn-candlestick-chart__canvas — non recréé ici.        */
.sn-candlestick-chart { border-radius: var(--sn-radius-md); overflow: hidden; background: var(--sn-color-bg-canvas); }
.sn-candlestick-chart__timeframes { display: flex; align-items: center; gap: var(--sn-space-4); padding: var(--sn-space-3) 0; overflow-x: auto; scrollbar-width: none; }
.sn-candlestick-chart__timeframes::-webkit-scrollbar { display: none; }
.sn-candlestick-chart__tf { font-size: var(--sn-text-sm); color: var(--sn-color-text-tertiary); flex-shrink: 0; }
.sn-candlestick-chart__tf--active { color: var(--sn-color-text-primary); font-weight: var(--sn-weight-bold); }
.sn-candlestick-chart__ma-legend { display: flex; gap: var(--sn-space-3); font-family: var(--sn-font-mono); font-size: var(--sn-text-xs); padding-bottom: var(--sn-space-2); flex-wrap: wrap; }
.sn-candlestick-chart__ma-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sn-candlestick-chart__ma-legend i { width: 8px; height: 2px; display: inline-block; border-radius: 1px; }
.sn-candlestick-chart__canvas { position: relative; height: 260px; background: var(--sn-color-bg-canvas); }
.sn-candlestick-chart__crosshair {
  position: absolute; top: var(--sn-space-2); right: var(--sn-space-2);
  padding: 4px 6px; border-radius: var(--sn-radius-xs);
  background: var(--sn-color-bg-surface);
  font-family: var(--sn-font-mono); font-size: var(--sn-text-2xs); text-align: right;
  box-shadow: inset 0 0 0 1px var(--sn-color-border-subtle);
}
.sn-candlestick-chart__indicators { display: flex; gap: var(--sn-space-4); padding: var(--sn-space-3) 0; overflow-x: auto; border-top: 1px solid var(--sn-color-border-subtle); scrollbar-width: none; }
.sn-candlestick-chart__indicators::-webkit-scrollbar { display: none; }
.sn-candlestick-chart__indicator { font-size: var(--sn-text-xs); font-weight: var(--sn-weight-medium); color: var(--sn-color-text-tertiary); flex-shrink: 0; }
.sn-candlestick-chart__indicator--active { color: var(--sn-color-text-primary); font-weight: var(--sn-weight-bold); }

/* ---- sn-orderbook --------------------------------------------------------------
   Carnet d'ordres à deux colonnes (achat/vente).
   Écran source : "Carnet d'ordres" sous le graphique BTC/USD.          */
.sn-orderbook__header { display: flex; justify-content: space-between; align-items: center; font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); padding-bottom: var(--sn-space-2); }
.sn-orderbook__precision { font-family: var(--sn-font-mono); font-weight: var(--sn-weight-medium); color: var(--sn-color-text-primary); }
.sn-orderbook__row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; padding: 5px 0; font-family: var(--sn-font-mono); font-size: var(--sn-text-sm); }
.sn-orderbook__qty--bid { color: var(--sn-color-text-secondary); }
.sn-orderbook__price--bid { color: var(--sn-color-positive-600); text-align: center; font-weight: var(--sn-weight-semibold); }
.sn-orderbook__price--ask { color: var(--sn-color-negative-600); text-align: center; font-weight: var(--sn-weight-semibold); }
.sn-orderbook__qty--ask { color: var(--sn-color-text-secondary); text-align: right; }

/* ---- sn-performance-chart -------------------------------------------------------------
   Courbe de rendement à remplissage bicolore (vert au-dessus de zéro,
   négatif en dessous) + résumé 3j/7j.
   Écran source : détail "Rendement" du bot ZEC/USD (+10,87 %).        */
.sn-performance-chart__headline { display: flex; justify-content: space-between; gap: var(--sn-space-4); }
.sn-performance-chart__label { font-size: var(--sn-text-sm); color: var(--sn-color-text-tertiary); margin-bottom: 4px; }
.sn-performance-chart__value { font-family: var(--sn-font-mono); font-size: var(--sn-text-2xl); font-weight: var(--sn-weight-bold); }
.sn-performance-chart__canvas { height: 220px; margin: var(--sn-space-5) 0; }
.sn-performance-chart__axis { display: flex; justify-content: space-between; font-size: var(--sn-text-xs); color: var(--sn-color-text-tertiary); font-family: var(--sn-font-mono); }
.sn-performance-chart__summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sn-space-3); margin-top: var(--sn-space-5); }
.sn-performance-chart__summary-card { padding: var(--sn-space-4); border-radius: var(--sn-radius-md); box-shadow: inset 0 0 0 1px var(--sn-color-border-subtle); }

/* ---- sn-sparkline -----------------------------------------------------------------
   Mini-courbe de tendance intégrée aux cartes de bot / marché.        */
.sn-sparkline { display: block; }
.sn-sparkline__line { fill: none; stroke-width: 1.75; }
.sn-sparkline__fill { stroke: none; opacity: 0.14; }