/* ==========================================================================
   Trading Terminal
   --------------------------------------------------------------------------
   Parti pris : un terminal, pas un tableau de bord SaaS. Le chiffre est le
   héros — tout le reste (libellés, bordures, fonds) s'efface d'un ton pour
   le laisser passer. Palette froide et sourde, un seul accent, les couleurs
   sémantiques réservées aux montants. Densité élevée mais rythmée : les
   respirations sont rares et donc lisibles.

   Tout passe par des variables : l'onglet Réglages les réécrit à chaud.
   ========================================================================== */

:root {
  /* pilotables depuis Réglages */
  --accent: #6d63f5;
  --positive: #2dd4a7;
  --negative: #ff5d73;
  --surface: #14161f;
  --radius: 12px;
  --font-scale: 1;

  /* socle sombre */
  --bg: #08090e;
  --bg-elevated: #101219;
  --bg-sunken: #0b0c12;
  --border: #23262f;
  --border-soft: #191c24;
  --hairline: #14161d;

  --text: #edeff4;
  --text-dim: #949cae;
  --text-faint: #5f6675;

  --gap: 14px;
  --pad: 18px;

  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --positive-soft: color-mix(in srgb, var(--positive) 13%, transparent);
  --negative-soft: color-mix(in srgb, var(--negative) 13%, transparent);

  /* relief : un liseré clair en haut, jamais d'ombre portée lourde */
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --float: 0 18px 40px -18px rgba(0, 0, 0, 0.75);

  --num: "SF Mono", "JetBrains Mono", "Menlo", ui-monospace, monospace;
}

:root[data-theme="light"] {
  --bg: #f6f7fa;
  --bg-elevated: #ffffff;
  --bg-sunken: #eef0f5;
  --surface: #ffffff;
  --border: #dde1e9;
  --border-soft: #e9ecf2;
  --hairline: #eef0f5;
  --text: #12151c;
  --text-dim: #5a6475;
  --text-faint: #8d95a5;
  --lift: none;
  --float: 0 14px 34px -20px rgba(20, 25, 40, 0.28);
}

:root[data-density="compact"] { --gap: 9px; --pad: 12px; }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: calc(14px * var(--font-scale));
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* halo discret en haut de page — donne une direction à la lumière */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 340px; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 100% at 50% 0%,
              color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%);
}

/* ===================== structure ===================== */

.app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

nav#nav {
  width: 212px; flex-shrink: 0;
  background: var(--bg-sunken);
  border-right: 1px solid var(--hairline);
  padding: 22px 11px 16px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; height: 100vh;
}

.brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 26px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(145deg, var(--accent),
              color-mix(in srgb, var(--accent) 45%, #05060a));
  display: grid; place-items: center;
  box-shadow: 0 5px 16px -6px var(--accent), var(--lift);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.brand-text .name { font-weight: 620; font-size: 0.94em; letter-spacing: -0.02em; }
.brand-text .sub {
  font-size: 0.66em; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.13em; font-weight: 520;
}

nav#nav button[data-tab] {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--text-dim);
  padding: 8px 11px; border-radius: 8px; cursor: pointer;
  font-size: 0.89em; font-family: inherit; font-weight: 500;
  text-align: left; width: 100%;
  transition: color 0.15s, background 0.15s;
}
nav#nav button[data-tab] svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.85; }
nav#nav button[data-tab]:hover { color: var(--text); background: var(--border-soft); }
nav#nav button[data-tab].active { color: var(--text); background: var(--accent-soft); font-weight: 560; }
nav#nav button[data-tab].active svg { opacity: 1; color: var(--accent); }
nav#nav button[data-tab].active::before {
  content: ""; position: absolute; left: -11px; top: 9px; bottom: 9px;
  width: 2px; border-radius: 0 2px 2px 0; background: var(--accent);
}

.nav-foot { margin-top: auto; padding: 13px 9px 0; border-top: 1px solid var(--hairline); }
.nav-status { font-size: 0.72em; color: var(--text-faint); display: flex; align-items: center; gap: 7px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.dot.ok { background: var(--positive); box-shadow: 0 0 0 3px var(--positive-soft); }
.dot.ko { background: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }

main { flex: 1; padding: 34px 38px 80px; max-width: 1560px; min-width: 0; }

/* ===================== titres ===================== */

h1 {
  font-size: 1.72em; font-weight: 640; margin: 0 0 6px;
  letter-spacing: -0.032em; line-height: 1.15;
}
h2 { font-size: 1.1em; font-weight: 600; margin: 32px 0 12px; letter-spacing: -0.02em; }
h3 {
  font-size: 0.78em; font-weight: 620; margin: 26px 0 11px;
  text-transform: uppercase; letter-spacing: 0.085em; color: var(--text-dim);
}
.lede { color: var(--text-dim); margin: 0 0 24px; max-width: 74ch; font-size: 0.92em; }
.lede strong { color: var(--text); font-weight: 560; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 4px;
}

/* ===================== cartes ===================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--lift);
}

.grid { display: grid; gap: var(--gap); }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat .label {
  font-size: 0.68em; color: var(--text-faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em;
}
.stat .value {
  font-size: 1.62em; font-weight: 600; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.stat .value.sm { font-size: 1.2em; letter-spacing: -0.025em; }
.stat .sub { font-size: 0.775em; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.pos { color: var(--positive); }
.neg { color: var(--negative); }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.card.clickable { cursor: pointer; transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s; }
.card.clickable:hover {
  border-color: var(--accent-line); transform: translateY(-2px);
  box-shadow: var(--float), var(--lift);
}
.card.clickable:hover .more { opacity: 1; transform: translateX(2px); }

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 13px; gap: 10px;
}
.card-head .title {
  font-size: 0.7em; font-weight: 620; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.card-head .more {
  font-size: 0.75em; color: var(--accent); font-weight: 540;
  opacity: 0.55; transition: opacity 0.16s, transform 0.16s; cursor: pointer;
}

/* ===================== accordéons ===================== */

.acc {
  border: 1px solid var(--border-soft); border-radius: var(--radius);
  margin-bottom: 10px; background: var(--surface); overflow: hidden;
  box-shadow: var(--lift);
}
.acc > summary {
  padding: 13px 17px; cursor: pointer; display: flex; align-items: center; gap: 11px;
  font-weight: 560; font-size: 0.93em; list-style: none; user-select: none;
  transition: background 0.14s;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before {
  content: ""; width: 5px; height: 5px; flex-shrink: 0;
  border-right: 1.6px solid var(--text-faint); border-bottom: 1.6px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform 0.2s ease; margin-left: 2px;
}
.acc[open] > summary::before { transform: rotate(45deg); }
.acc > summary:hover { background: var(--border-soft); }
.acc > summary:hover::before { border-color: var(--accent); }
.acc > summary .meta {
  margin-left: auto; font-size: 0.78em; color: var(--text-faint); font-weight: 420;
}
.acc-body { padding: 2px 17px 20px; border-top: 1px solid var(--hairline); }
.acc .acc { background: var(--bg-elevated); }

/* ===================== formulaires ===================== */

.form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 0.73em; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 560;
}
label.inline {
  flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; font-size: 0.86em;
  color: var(--text-dim); font-weight: 420;
}

input, select, textarea {
  background: var(--bg-sunken); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 0.94rem; font-family: inherit;
  letter-spacing: -0.005em; min-width: 0;
  transition: border-color 0.14s, box-shadow 0.14s;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:hover, select:hover, textarea:hover { border-color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="color"] { padding: 2px; width: 44px; height: 32px; cursor: pointer; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); cursor: pointer; }
input[type="range"] { accent-color: var(--accent); cursor: pointer; }
input[type="file"] { padding: 6px; font-size: 0.84rem; }
textarea { resize: vertical; min-height: 68px; width: 100%; line-height: 1.6; }
::placeholder { color: var(--text-faint); opacity: 0.75; }

button {
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; padding: 8px 15px; cursor: pointer;
  font-size: 0.86em; font-weight: 550; font-family: inherit;
  letter-spacing: -0.005em;
  box-shadow: 0 5px 14px -8px var(--accent), var(--lift);
  transition: filter 0.14s, transform 0.1s, box-shadow 0.14s;
}
button:hover { filter: brightness(1.12); box-shadow: 0 7px 18px -8px var(--accent), var(--lift); }
button:active { transform: translateY(1px); filter: brightness(0.96); }
button:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; filter: none; }
button.ghost {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); box-shadow: none;
}
button.ghost:hover {
  border-color: var(--accent-line); color: var(--accent);
  background: var(--accent-soft); filter: none;
}
button.danger { background: var(--negative); box-shadow: 0 5px 14px -8px var(--negative), var(--lift); }
button.sm { padding: 5px 10px; font-size: 0.78em; }

.seg {
  display: inline-flex; background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 9px; padding: 2px; gap: 2px;
}
.seg button {
  background: transparent; color: var(--text-faint); padding: 5px 12px;
  border-radius: 7px; font-size: 0.79em; font-weight: 540; box-shadow: none;
}
.seg button.active { background: var(--accent); color: #fff; box-shadow: var(--lift); }
.seg button:hover:not(.active) {
  color: var(--text); background: var(--border-soft); filter: none; box-shadow: none;
}

/* ===================== tableaux ===================== */

.table-wrap {
  overflow-x: auto; border-radius: var(--radius);
  border: 1px solid var(--border-soft); background: var(--bg-elevated);
}
table { border-collapse: collapse; width: 100%; font-size: 0.855em; }
thead th {
  text-align: left; padding: 9px 13px;
  font-weight: 620; font-size: 0.76em; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.075em;
  background: var(--bg-sunken); border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
thead th.sortable { cursor: pointer; user-select: none; transition: color 0.13s; }
thead th.sortable:hover { color: var(--accent); }
tbody td {
  padding: 8px 13px; border-bottom: 1px solid var(--hairline);
  white-space: nowrap; transition: background 0.1s;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--border-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td strong { font-weight: 570; }

.bar-cell { position: relative; }
.bar-cell .bar {
  position: absolute; right: 0; top: 5px; bottom: 5px;
  border-radius: 3px; opacity: 0.15;
}
.bar-cell span:not(.bar) { position: relative; }

/* ===================== badges ===================== */

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 5px;
  font-size: 0.71em; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; border: 1px solid transparent; vertical-align: middle;
}
.badge.ok { background: var(--positive-soft); color: var(--positive);
            border-color: color-mix(in srgb, var(--positive) 24%, transparent); }
.badge.ko { background: var(--negative-soft); color: var(--negative);
            border-color: color-mix(in srgb, var(--negative) 24%, transparent); }
.badge.neutral { background: var(--border-soft); color: var(--text-faint); border-color: var(--border); }
.badge.accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge.master { background: var(--accent); color: #fff; }

.rank-pill {
  display: inline-grid; place-items: center; width: 21px; height: 21px;
  border-radius: 6px; font-size: 0.75em; font-weight: 650;
  background: var(--border-soft); color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.rank-pill.top { background: var(--accent); color: #fff; box-shadow: 0 3px 9px -4px var(--accent); }

/* ===================== graphiques ===================== */

.chart-wrap { position: relative; margin: 4px 0 2px; }
.chart-wrap svg { display: block; width: 100%; border-radius: 9px; }
.chart-tooltip {
  position: absolute; pointer-events: none; opacity: 0; z-index: 6;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 11px; font-size: 0.78em;
  transform: translate(-50%, -138%); white-space: nowrap;
  box-shadow: var(--float); transition: opacity 0.1s;
}
.chart-tooltip .t-date {
  color: var(--text-faint); font-size: 0.9em;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.chart-tooltip .t-val {
  font-weight: 640; font-variant-numeric: tabular-nums; font-size: 1.1em; margin-top: 1px;
}
.chart-tooltip .t-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.92em; font-weight: 560; margin-top: 3px; white-space: nowrap;
}
.chart-tooltip .t-row .mono { margin-left: 10px; font-weight: 640; }
.chart-tooltip .t-row i, .chart-legend-item i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.chart-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8em; color: var(--text-dim); font-variant-numeric: tabular-nums;
}

/* ===================== calendrier ===================== */

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal .dow {
  text-align: center; font-size: 0.68em; color: var(--text-faint);
  padding-bottom: 5px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.1em;
}
.cal .day {
  aspect-ratio: 1 / 0.86; border-radius: 9px; padding: 6px 7px;
  border: 1px solid var(--hairline); background: var(--bg-elevated);
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 0.72em; min-height: 54px; transition: transform 0.13s, border-color 0.13s;
}
.cal .day:not(.empty):hover { transform: scale(1.045); border-color: var(--border); z-index: 2; }
.cal .day.empty { border-color: transparent; background: transparent; }
.cal .day .dnum { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal .day .dpnl { font-weight: 640; font-variant-numeric: tabular-nums; font-size: 1.02em; }
.cal .day.win { background: var(--positive-soft);
                border-color: color-mix(in srgb, var(--positive) 26%, transparent); }
.cal .day.loss { background: var(--negative-soft);
                 border-color: color-mix(in srgb, var(--negative) 26%, transparent); }
.cal .day.win .dpnl { color: var(--positive); }
.cal .day.loss .dpnl { color: var(--negative); }
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 15px; gap: 14px; flex-wrap: wrap;
}

/* ===================== arborescence ===================== */

.tree-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; border-radius: 7px; }
.tree-row .tlabel { font-weight: 550; min-width: 100px; }
.tree-row .tmeta { color: var(--text-faint); font-size: 0.85em; margin-left: auto; }
.tree-row .tpnl { font-weight: 640; font-variant-numeric: tabular-nums; }
.acc > summary .tlabel {
  min-width: 130px; font-weight: 570; text-transform: capitalize;
}
.acc > summary .tpnl {
  font-weight: 640; font-variant-numeric: tabular-nums; min-width: 92px; text-align: right;
}

/* ===================== messages ===================== */

.notice {
  border-radius: var(--radius); padding: 13px 16px; font-size: 0.865em;
  border: 1px solid var(--border); background: var(--bg-elevated);
  margin-bottom: 14px; line-height: 1.6; box-shadow: var(--lift);
  border-left-width: 3px;
}
.notice strong { font-weight: 600; }
.notice.warn {
  border-color: color-mix(in srgb, #f0a33c 32%, var(--border));
  border-left-color: #f0a33c;
  background: color-mix(in srgb, #f0a33c 6%, var(--bg-elevated));
}
.notice.info {
  border-color: var(--accent-line); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
}
.notice.err {
  border-color: color-mix(in srgb, var(--negative) 32%, var(--border));
  border-left-color: var(--negative);
  background: color-mix(in srgb, var(--negative) 6%, var(--bg-elevated));
}

.skeleton {
  background: linear-gradient(90deg, var(--border-soft) 25%, var(--border) 50%, var(--border-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: 6px; height: 13px; margin: 8px 0;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.empty-state {
  text-align: center; padding: 38px 20px; color: var(--text-faint);
  font-size: 0.88em; border: 1px dashed var(--border); border-radius: var(--radius);
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.tab { animation: rise 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===================== glisser-déposer ===================== */

.drag-list { display: flex; flex-direction: column; gap: 5px; }
.drag-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 13px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 8px; cursor: grab; font-size: 0.87em;
  transition: border-color 0.13s, transform 0.13s;
}
.drag-item:hover { border-color: var(--accent-line); }
.drag-item.dragging { opacity: 0.35; cursor: grabbing; transform: scale(0.99); }
.drag-item .handle { color: var(--text-faint); cursor: grab; letter-spacing: -2px; }

/* ===================== toast ===================== */

.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 12px 18px; font-size: 0.86em;
  box-shadow: var(--float); max-width: 420px; line-height: 1.5;
  animation: slideIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.25s;
}
.toast.ok { border-left-color: var(--positive); }
.toast.err { border-left-color: var(--negative); }
@keyframes slideIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ===================== accessibilité ===================== */

:root[data-animations="false"] * {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  nav#nav { width: 100%; height: auto; position: static; flex-direction: row;
            overflow-x: auto; padding: 12px; align-items: center; }
  .brand { padding: 0 14px 0 4px; }
  nav#nav button[data-tab] { width: auto; white-space: nowrap; }
  nav#nav button[data-tab].active::before { display: none; }
  .nav-foot { display: none; }
  main { padding: 22px 18px 60px; }
}

/* ===================== écran de connexion ===================== */

#login-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  background: var(--bg);
}

#login-overlay .card { width: 300px; }

#login-form .form { margin-bottom: 10px; }

#login-form label { width: 100%; }

#login-form input { width: 100%; }

#login-form button { width: 100%; margin-top: 4px; }