/* ============================================================
   Bac à Sable Crypto — thème sombre façon Revolut X
   ============================================================ */
:root {
  --bg: #0b0d12;            /* fond principal */
  --panel: #131720;         /* panneaux */
  --card: #181d29;          /* cartes / lignes */
  --border: #262c3a;        /* bordures */
  --text: #eef1f6;          /* texte principal */
  --muted: #8b94a7;         /* texte atténué */
  --accent: #00ffab;        /* vert Revolut X — gains / achat */
  --accent-2: #3ddc97;      /* vert secondaire */
  --danger: #ff5c6c;        /* rouge — perte / vente */
  --blue: #4d8cff;          /* accent neutre */
  --radius: 12px;
  --shadow: 0 8px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.45;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(11,13,18,.92); backdrop-filter: blur(8px); z-index: 5;
}
.brand { font-size: 17px; letter-spacing: .3px; }
.logo-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 12px var(--accent); }
.topbar-right { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--muted); }
.topbar-right a { text-decoration: none; color: var(--text); }

.chip { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.chip strong { color: var(--accent-2); margin-left: 4px; }

/* ---------- layout ---------- */
.grid { display: grid; grid-template-columns: 380px 1fr; gap: 18px; padding: 0 22px; align-items: start; }
.trade-section     { grid-column: 1; grid-row: 1; }          /* bac à sable — colonne gauche, haut */
.portfolio-panel   { grid-column: 1; grid-row: 2; }          /* portefeuille simulé — colonne gauche, bas */
.market-panel      { grid-column: 2; grid-row: 1 / span 3; } /* marché — colonne droite, sur toute la hauteur */
@media (max-width: 960px) { .grid { grid-template-columns: 1fr; } .trade-section, .portfolio-panel, .market-panel { grid-column: auto; grid-row: auto; } }

.dash-main { max-width: none; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 6px; font-size: 18px; font-weight: 650; letter-spacing: .2px; }
.subhead { font-size: 13px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); margin: 18px 0 8px; }

.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }

/* ---------- portfolio ---------- */
.portfolio-summary { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.metric { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.metric span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.metric strong { display: block; margin-top: 3px; font-size: 20px; font-weight: 650; }
.metric-pnl strong { color: var(--accent-2); }
.metric-pnl em { font-style: normal; font-size: 14px; color: var(--muted); margin-left: 8px; }

.pos-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.pos-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid rgba(38,44,58,.6); gap: 8px; }
.pos-left { display: flex; flex-direction: column; }
.pos-asset { font-weight: 700; font-size: 15px; }
.pos-right { text-align: right; font-variant-numeric: tabular-nums; }

.panel-actions { margin-top: 14px; }

/* ---------- trade box ---------- */
.trade-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 8px; }
label { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); display: block; margin-top: 8px; }
input, select { width: 100%; padding: 9px 11px; background: #0e1117; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 15px; margin-top: 4px; }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,255,171,.18); }

.trade-btns { display: flex; gap: 10px; margin-top: 12px; }
.btn { flex: 1; padding: 11px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: transform .1s ease, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-buy  { background: var(--accent-2); color: #04150c; }
.btn-sell { background: var(--danger);    color: #fff; }
.btn-danger { background: transparent; border: 1px solid var(--danger); color: var(--danger); padding: 8px 16px; font-size: 13px; cursor: pointer; border-radius: 10px; }
.btn-primary { background: var(--accent-2); color: #04150c; width: 100%; padding: 12px; border-radius: 10px; font-size: 16px; font-weight: 650; cursor: pointer; border: none; }
.btn-primary:hover { filter: brightness(1.08); }

.trade-msg { min-height: 18px; font-size: 13px; margin-top: 10px; word-break: break-word; }

/* ---------- cash-move (dépose / relevé de cash — visible par tous) ---------- */
.cash-move-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 8px; }
.cash-btns { display: flex; gap: 10px; margin-top: 12px; }
.btn-deposit   { background: #6a7bff; color: #fff; }
.btn-withdraw  { background: var(--danger); color: #fff; }
.badge-deposit    { background: rgba(106,123,255,.14); color: #8f9aff; }
.badge-withdraw   { background: rgba(255,92,108,.14);  color: var(--danger); }
.row-deposit td    { background: rgba(106,123,255,.06); }
.row-withdraw td   { background: rgba(255,92,108,.06);  }
.cash-amt          { font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; padding: 6px 8px; }
td { padding: 9px 8px; border-bottom: 1px solid rgba(38,44,58,.5); font-size: 14px; }
tr:hover td { background: rgba(255,255,255,.02); }

.badge { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.badge-buy  { background: rgba(61,220,151,.14); color: var(--accent-2); }
.badge-sell { background: rgba(255,92,108,.14); color: var(--danger); }

/* prix */
.price-up   { color: var(--accent-2); font-weight: 650; }
.price-down { color: var(--danger);    font-weight: 650; }
.rev-var.pos{ color: var(--accent-2); font-weight: 700; }
.rev-var.neg{ color: var(--danger);    font-weight: 700; }
.rev-var.zero{ color: var(--blue);     font-weight: 700; }

.market-body td:first-child { font-weight: 700; letter-spacing: .3px; }

/* ---------- Portefeuille Revolut X (données réelles — admin) ---------- */
.revx-panel { margin: 18px 22px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.row-missing td { opacity: .55; }
.revx-table th, .revx-table td { text-align: center; }   /* toutes les valeurs centrées */

/* Barre de contrôle : filtre + tri + pagination (max 30 lignes / page) */
.revx-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.revx-search { background: var(--bg); border: 1px solid var(--border); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; width: 240px; max-width: 55%; }
.revx-search:focus { outline: none; border-color: var(--accent-2); }
.revx-pager { display: flex; gap: 10px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.revx-pagebtns { display: inline-flex; gap: 4px; }
.revx-pagebtn { background: transparent; border: 1px solid var(--border); color: #fff; padding: 3px 8px; border-radius: 7px; cursor: pointer; font-size: 12px; line-height: 1.6; }
.revx-pagebtn.active { background: var(--accent-2); color: #04150c; border-color: var(--accent-2); font-weight: 700; }
.revx-pagegap { padding: 3px 2px; }

/* ---------- Conseils d'investissement (admin — actifs crypto) ---------- */
.advisory-panel { margin: 18px 22px; }

/* ---------- responsive : scroll horizontal (tables larges) ---------- */
/* Wrapper dédié : sur mobile, la table déborde → on scrolle horizontalement au lieu d'écraser la mise en page.
   Desktop : aucune altération (la largeur du panneau dépasse 640 px). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; min-width: 640px; }

.badge-hold { background: rgba(240,200,63,.14); color: #f0c83f; }
.advisory-table td.num { text-align: center; }   /* pourcentages centrés */
.advisory-table th[data-h] { text-align: center; }   /* en-têtes d'horizons centrés */
.advisory-table .val-eur { text-align: center; font-variant-numeric: tabular-nums; }   /* valeur EUR centrée */
.row-buy td { background: rgba(61,220,151,.06); }
.row-sell td { background: rgba(255,92,108,.06); }

/* ---------- login ---------- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #14203a 0%, var(--bg) 60%); }
.login-card { width: 340px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 34px 30px; box-shadow: var(--shadow); text-align: center; }
.logo { font-size: 24px; margin-bottom: 4px; letter-spacing: .3px; }
.logo span { color: var(--accent-2); }
.tagline { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.login-card label { text-align: left; margin-top: 14px; }
.login-card input[type="password"] { margin-bottom: 18px; }   /* marge sous le champ password */
.hint { font-size: 12px; color: var(--muted); margin-top: 18px; }

.alert { border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 12px; }
.alert-error { background: rgba(255,92,108,.12); color: var(--danger); border: 1px solid rgba(255,92,108,.4); }

.footer { padding: 16px 22px; font-size: 12.5px; color: var(--muted); text-align: center; border-top: 1px solid var(--border); margin-top: 24px; }

/* live dot */
.dot-live { display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff5c6c; margin-right:6px; animation:pulse 1.2s infinite; vertical-align:middle; }
@keyframes pulse { 0%{opacity:.4} 50%{opacity:1} 100%{opacity:.4} }

/* ---------- graphique d'évaluation des valeurs ---------- */
.chart-panel { margin: 18px 22px 0; padding-bottom: 8px; margin-bottom: 18px; }
.chart-head h2 { display:inline-block; }
.chart-ranges { display:flex; gap:8px; flex-wrap:wrap; margin: 14px 0 6px; }
.range-btn { background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 13px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.range-btn.active { background: rgba(0,255,171,.14); border-color: var(--accent); color: var(--accent-2); font-weight:650; }

.chart-legends { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom: 10px; min-height: 30px; }
.legend-chip { display:inline-flex; align-items:center; gap:7px; background: var(--card); border:1px solid var(--border); border-radius:999px; padding:5px 12px 5px 8px; font-size:13px; cursor:pointer; }
.legend-swatch { width:14px; height:14px; border-radius:50%; display:inline-block; flex-shrink:0; }
.legend-chip input[type=color] { width:20px; height:20px; padding:0; margin:-3px 0 -3px; background:none; cursor:pointer; border:none; }
.legend-close { background:transparent; border:none; color: var(--muted); font-size:16px; line-height:1; cursor:pointer; padding:0 2px; }

/* Onglets type de graphique (Courbes / Chandeliers) */
.chart-modes { display:inline-flex; gap:6px; background: var(--card); border:1px solid var(--border); border-radius: 999px; padding:3px; margin-bottom: 14px; }
.mode-btn { background: transparent; border:none; color: var(--muted); font-size: 13px; font-weight:500; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .18s ease; }
.mode-btn.active { background: rgba(0,255,171,.14); color: var(--accent-2); font-weight: 650; }

/* Select de paire — visible uniquement en mode Chandeliers */
.candle-sel-wrap { display:none; margin: 0 0 10px; max-width: 340px; }
#chart-section.candles-mode .candle-sel-wrap { display:block; }
#chart-section.candles-mode .chart-legends { display:none; }

.chart-wrap { position:relative; width:100%; }
#price-chart { display:block; width:100%; height:auto; }
.chart-tooltip { position:absolute; top:8px; left:50%; transform:translateX(-50%); background: rgba(19,23,32,.96); border:1px solid var(--border); border-radius:8px; padding:8px 12px; font-size:12.5px; pointer-events:none; display:none; white-space:nowrap; z-index:4; }
.chart-status { margin-top: 10px; word-break: break-word; }   /* limite multi-sélection / statut chandeliers */
.chart-empty { text-align:center; color:var(--muted); font-size:13px; margin-top: 8px; padding: 24px; border-radius:8px; background: rgba(0,0,0,.25); }

/* Tableau de lecture sous le graphique */
.chart-readout { width:auto; margin: 12px auto 0; font-size:13px; }
.chart-readout td, .chart-readout th { padding:6px 10px; border-bottom:1px solid rgba(38,44,58,.5); text-align:center; }

/* ---------- tableau marché : cellules Δ (du plus court au plus long) ---------- */
.dlt { font-size:12.5px; font-variant-numeric: tabular-nums; white-space:nowrap; }
tr.sel td:first-child::after { content:" ●"; color: var(--accent); font-size:9px; vertical-align:middle; }

/* ---------- Toolbar marché/positions (filtre/tri/pagination ≤30/page) ---------- */
.market-toolbar, .pos-toolbar { margin-bottom: 8px; }
.market-table th[data-h], .market-table th[data-sort] { cursor: pointer; user-select: none; }
.market-table th.sorted-asc::after { content: ' ▲'; font-size: 9px; color: var(--accent); }
.market-table th.sorted-desc::after { content: ' ▼'; font-size: 9px; color: var(--danger); }

/* ---------- Catalogue Revolut X complet (EUR / USD / USDC) ---------- */
.revx-bar select { flex: 0 1 auto; max-width: 260px; }
.mk-quote { font-weight: 600; white-space: nowrap; }
/* couleur par devise — titres + cellules alignés à gauche (comme les autres colonnes) */
#market-table th[data-sort="quote"] { text-align: left; }
.mk-quote.mk-eur   { color: #4da3ff; }    /* EUR = bleu */
.mk-quote.mk-usd   { color: #2ee5a8; }    /* USD = vert */
.mk-quote.mk-usdc  { color: #ffa04d; }    /* USDC = orange */
.mk-pair { white-space: nowrap; }
.revx-pagebtns .revx-nav { font-weight: 700; }