/* BOS-BOURSE — Theme global (Inter + dark mode overrides) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Applique Inter partout par défaut (les pages peuvent re-définir si besoin) */
body, button, input, select, textarea {
  font-family: var(--font-main);
}

/* ─────────────────────────────────────────────────────────────
   Dark mode — overrides des CSS variables utilisées par les pages
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* Couleurs communes utilisées dans index/positions/vitrine/mes-picks/admin/aide */
  --bg: #0F172A;
  --text: #F1F5F9;
  --card: #1E293B;
  --border: #334155;
  --muted: #94A3B8;

  --grey: #1E293B;
  --white: #1E293B;
  --lgrey: #1E293B;

  --blue: #60A5FA;
  --lblue: #60A5FA;
  --primary: #60A5FA;

  --green: #34D399;
  --lgreen: #064E3B;
  --red: #F87171;
  --lred: #7F1D1D;
  --orange: #FBBF24;
  --lorng: #78350F;
  --amber: #FBBF24;
}

/* Couleurs body + cards génériques en dark */
:root[data-theme="dark"] body { background: #0F172A; color: #F1F5F9; }

:root[data-theme="dark"] header,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .table-card,
:root[data-theme="dark"] .chart-card,
:root[data-theme="dark"] .pick-card,
:root[data-theme="dark"] .login-box,
:root[data-theme="dark"] .pf-card,
:root[data-theme="dark"] .detail-header,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] aside.sidebar,
:root[data-theme="dark"] main {
  background-color: #1E293B !important;
  color: #F1F5F9;
  border-color: #334155 !important;
}

:root[data-theme="dark"] .summary,
:root[data-theme="dark"] .toolbar,
:root[data-theme="dark"] details,
:root[data-theme="dark"] .csv-import,
:root[data-theme="dark"] .valo-date-banner {
  background-color: #1E293B !important;
  color: #F1F5F9;
  border-color: #334155 !important;
}

:root[data-theme="dark"] table { background: #1E293B !important; color: #F1F5F9; }
:root[data-theme="dark"] table th { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; }
:root[data-theme="dark"] table td { color: #F1F5F9; border-color: #334155 !important; }
:root[data-theme="dark"] tr:hover { background: #334155 !important; }
:root[data-theme="dark"] tbody tr:nth-child(even) { background: #0F172A !important; }
:root[data-theme="dark"] tbody tr:nth-child(odd) { background: #1E293B !important; }

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #0F172A;
  color: #F1F5F9;
  border-color: #334155;
}
:root[data-theme="dark"] input::placeholder { color: #64748B; }

:root[data-theme="dark"] code,
:root[data-theme="dark"] pre { background: #0F172A !important; color: #F1F5F9; }

:root[data-theme="dark"] .pick-reason,
:root[data-theme="dark"] .empty,
:root[data-theme="dark"] .subtitle { color: #94A3B8; }

/* Bouton toggle mode (commun) */
.theme-toggle {
  background: transparent;
  border: none;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.15s;
}
.theme-toggle:hover {
  background: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────────
   Dark mode — Overrides ciblés pour positions.html (classes
   avec background:#fff hardcodé dans le CSS de la page)
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .summary,
:root[data-theme="dark"] .summary-block,
:root[data-theme="dark"] .summary-block.total,
:root[data-theme="dark"] .valo-date-banner,
:root[data-theme="dark"] button.secondary,
:root[data-theme="dark"] details.csv-import,
:root[data-theme="dark"] .csv-help,
:root[data-theme="dark"] .csv-body {
  background-color: #1E293B !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

:root[data-theme="dark"] .valo-date-banner { color: #93C5FD !important; }
:root[data-theme="dark"] .summary-block.total { background-color: #0F172A !important; }
:root[data-theme="dark"] .summary strong { color: #F1F5F9 !important; }

:root[data-theme="dark"] button.secondary { color: #F1F5F9 !important; }
:root[data-theme="dark"] button.secondary:hover { background-color: #0F172A !important; }

:root[data-theme="dark"] .csv-help code,
:root[data-theme="dark"] code { background: #0F172A !important; color: #FBBF24 !important; }

/* Status cell : forcer une couleur lisible pour les noms d'instruments (✓ FDJ United, ...) */
:root[data-theme="dark"] .status-cell { color: #94A3B8 !important; }
:root[data-theme="dark"] .status-cell.ok { color: #34D399 !important; }
:root[data-theme="dark"] .status-cell.warn { color: #FBBF24 !important; }
:root[data-theme="dark"] .status-cell.err { color: #F87171 !important; }

/* Inputs DANS le tableau de positions : forcer le contraste */
:root[data-theme="dark"] table input[type="text"],
:root[data-theme="dark"] table input[type="number"],
:root[data-theme="dark"] table input[type="date"],
:root[data-theme="dark"] table select {
  background: #0F172A !important;
  color: #F1F5F9 !important;
  border: 1px solid #334155 !important;
}

/* Header banner sous nav noire (positions) : "Valorisation au dernier EOD : XXX" */
:root[data-theme="dark"] .valo-date-banner strong { color: #BFDBFE !important; }

/* Card "Mon cash par enveloppe" (inline-style #fff dans positions.html) */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#FFFFFF"] {
  background: #1E293B !important;
  color: #F1F5F9 !important;
}

/* Bouton bleu vif "Modifier mon cash" : garder bleu mais texte blanc visible */
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] button:not(.secondary):not(.danger):not(.tiny):not(.theme-toggle):not(.opt-btn) {
  background: #3B82F6 !important;
  color: #fff !important;
}

/* Sidebar newsletter : boutons de filtre (.opt-btn) doivent distinguer actif vs inactif */
:root[data-theme="dark"] .opt-btn {
  background: #0F172A !important;
  color: #CBD5E1 !important;
  border: 1px solid #334155 !important;
}
:root[data-theme="dark"] .opt-btn:hover { border-color: #60A5FA !important; }
:root[data-theme="dark"] .opt-btn.active {
  background: #3B82F6 !important;
  color: #fff !important;
  border-color: #3B82F6 !important;
}

/* Header blanc de positions/admin (sous la nav noire) */
:root[data-theme="dark"] header {
  background: #1E293B !important;
  border-bottom-color: #334155 !important;
}
:root[data-theme="dark"] header h1,
:root[data-theme="dark"] header h2,
:root[data-theme="dark"] header h3 { color: #F1F5F9 !important; }
:root[data-theme="dark"] header a { color: #60A5FA !important; }

/* Tableau positions + login-box */
:root[data-theme="dark"] table.positions,
:root[data-theme="dark"] .login-box {
  background: #1E293B !important;
  color: #F1F5F9 !important;
}
:root[data-theme="dark"] table.positions input,
:root[data-theme="dark"] table.positions select { background: #0F172A !important; color: #F1F5F9 !important; border-color: #334155 !important; }

/* Couleurs muted / placeholder visibles en dark */
:root[data-theme="dark"] .csv-import summary,
:root[data-theme="dark"] .csv-help { color: #CBD5E1 !important; }
:root[data-theme="dark"] .csv-help strong { color: #F1F5F9 !important; }

/* Couleurs muted gris foncé visibles en dark */
:root[data-theme="dark"] [style*="color:#5B6573"],
:root[data-theme="dark"] [style*="color: #5B6573"],
:root[data-theme="dark"] [style*="color:#64748B"],
:root[data-theme="dark"] [style*="color: #64748B"] {
  color: #94A3B8 !important;
}

/* Tooltips info dans modals */
:root[data-theme="dark"] [style*="background:#F1F5F9"],
:root[data-theme="dark"] [style*="background: #F1F5F9"] {
  background: #0F172A !important;
}

/* Tfoot positions : ligne "Total PEA/PEA-PME/CTO" */
:root[data-theme="dark"] .positions-foot-row { background: #0F172A !important; }
:root[data-theme="dark"] .positions-foot-row td { color: #F1F5F9 !important; }

/* Bandeau "Quota global mensuel" Section 6 admin.html (Sprint S.1) */
:root[data-theme="dark"] .vision-quota-banner {
  background: #064E3B !important;
  color: #A7F3D0 !important;
  border-left-color: #34D399 !important;
}
:root[data-theme="dark"] .vision-quota-banner strong { color: #F1F5F9 !important; }

/* Bandeau privacy OCR sur positions.html (Sprint S.1) */
:root[data-theme="dark"] .ocr-privacy-banner {
  background: #78350F !important;
  color: #FED7AA !important;
  border-left-color: #FBBF24 !important;
}
:root[data-theme="dark"] .ocr-privacy-banner strong { color: #FEF3C7 !important; }

/* ─────────────────────────────────────────────────────────────
   Sprint C remarque — Callouts aide.html lisibles en dark mode
   (problème : color hardcodé #78350F sur fond var(--lorng) qui devient
    #78350F en dark = texte invisible)
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] main.content .callout {
  background: #064E3B !important;
  color: #A7F3D0 !important;
  border-left-color: #34D399 !important;
}
:root[data-theme="dark"] main.content .callout.warn {
  background: #78350F !important;
  color: #FED7AA !important;
  border-left-color: #FBBF24 !important;
}
:root[data-theme="dark"] main.content .callout.info {
  background: #1E3A8A !important;
  color: #BFDBFE !important;
  border-left-color: #60A5FA !important;
}
:root[data-theme="dark"] main.content .callout strong { color: #fff !important; }
:root[data-theme="dark"] main.content .callout a { color: #93C5FD !important; }

/* ─────────────────────────────────────────────────────────────
   Sprint D — Modal "Comparer brokers" dark mode lisible
   ───────────────────────────────────────────────────────────── */
/* Container modal (le <div> direct enfant a background:#fff inline → overridé) */
:root[data-theme="dark"] #compareBrokersModal > div {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
:root[data-theme="dark"] #compareBrokersModal h3 {
  color: #F1F5F9 !important;
}
:root[data-theme="dark"] #compareBrokersContext { color: #94A3B8 !important; }
:root[data-theme="dark"] #compareBrokersTable { color: #E2E8F0 !important; }
/* Les rows brokers (inline style background:#fff / #EFF6FF / #F0FDF4) */
:root[data-theme="dark"] #compareBrokersTable [style*="background:#fff"],
:root[data-theme="dark"] #compareBrokersTable [style*="background:#EFF6FF"],
:root[data-theme="dark"] #compareBrokersTable [style*="background:#F0FDF4"] {
  background: #0F172A !important;
  color: #F1F5F9 !important;
}
/* Highlight "Mon broker" en bleu reste mais sur fond plus contraste */
:root[data-theme="dark"] #compareBrokersTable [style*="background:#EFF6FF"] {
  background: #1E3A8A !important;
  border-color: #60A5FA !important;
}
/* Highlight "Le moins cher" en vert sombre */
:root[data-theme="dark"] #compareBrokersTable [style*="background:#F0FDF4"] {
  background: #064E3B !important;
  border-color: #34D399 !important;
}
/* Texte gris muted (libelle frais/total) — passe en clair */
:root[data-theme="dark"] #compareBrokersTable [style*="color:#64748B"],
:root[data-theme="dark"] #compareBrokersTable [style*="color: #64748B"] {
  color: #94A3B8 !important;
}
/* Note bas de modal (frais TTC, hors abonnement…) */
:root[data-theme="dark"] #compareBrokersModal [style*="color:#9AA5B4"] {
  color: #94A3B8 !important;
}
/* Bouton Fermer */
:root[data-theme="dark"] #compareBrokersModal button {
  background: #3B82F6 !important;
  color: #fff !important;
  border: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Top 3 du jour (index.html) — dark mode lisible
   ───────────────────────────────────────────────────────────── */
/* Container : remplace le gradient jaune crème par un fond sombre cohérent */
:root[data-theme="dark"] #top3Container {
  background: #1E293B !important;
  background-image: none !important;
  border-color: #92400E !important;
}
/* Titre "Top 3 du jour" en jaune lisible */
:root[data-theme="dark"] #top3Container > div:first-child strong { color: #FBBF24 !important; }
/* Sous-titre "PEA · Moyen terme · ..." en gris clair */
:root[data-theme="dark"] #top3Container > div:first-child span { color: #94A3B8 !important; }
/* Cards : déjà passées en #1E293B via override [style*=background:#fff], on raffine bordure */
:root[data-theme="dark"] #top3Cards > div { border-color: #92400E !important; }
/* Ticker + médaille (🥇 SAN.PA) en bleu clair lisible */
:root[data-theme="dark"] #top3Cards > div > div:first-child strong { color: #93C5FD !important; }
/* Nom de l'instrument (gris/marron en light) en texte clair en dark */
:root[data-theme="dark"] #top3Cards > div > div:last-child { color: #F1F5F9 !important; }
:root[data-theme="dark"] #top3Cards > div > div:last-child span { color: #FBBF24 !important; }
/* Badge "RENFORCER 8.42" — fond vert sombre, texte vert clair */
:root[data-theme="dark"] #top3Cards > div > div:first-child span {
  background: #064E3B !important;
  color: #6EE7B7 !important;
}

/* ─────────────────────────────────────────────────────────────
   Dark mode — Overrides pour admin.html (page Administration)
   ───────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .user-card {
  background: #1E293B !important;
  color: #F1F5F9 !important;
  border-color: #334155 !important;
}

:root[data-theme="dark"] .section-title { color: #F1F5F9 !important; }
:root[data-theme="dark"] .label { color: #94A3B8 !important; }
:root[data-theme="dark"] .status.info { background: #1E40AF !important; color: #DBEAFE !important; }
:root[data-theme="dark"] .status.ok   { background: #064E3B !important; color: #A7F3D0 !important; }
:root[data-theme="dark"] .status.err  { background: #7F1D1D !important; color: #FECACA !important; }
:root[data-theme="dark"] pre { background: #0F172A !important; color: #F1F5F9 !important; }