/**
 * Cash Scanner - Dark Mode Styles (shared across all pages)
 * Version: 4.7.17
 */

/* ============================================================================
   CSS VARIABLES (light defaults now in main.css :root — source unique)
   ============================================================================ */

/* Dark mode variables */
html.dark-mode,
body.dark-mode {
    --bg-color: #0d1117;
    --bg-secondary: #161b22;
    --bg-gradient: var(--bg-color);
    --text-color: #e6edf3;
    --text-primary: var(--text-color);
    --text-secondary: #8b949e;
    --card-bg: #21262d;
    --border-color: #30363d;
    --chart-grid-color: rgba(71,85,105,0.3);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --input-bg: #0d1117;
    --input-border: #30363d;
    --accent-primary: #58a6ff;
    --accent-secondary: #60a5fa;
    --accent-success: #3fb950;
    --accent-danger: #f85149;
    --accent-warning: #d29922;
    --accent-teal: #39c5cf;
    --accent-indigo: #7986ff;
    --brief-bg: #161b22;
    --opp-score-bg: rgba(88, 166, 255, 0.15);
    --opp-score-text: #58a6ff;
    --hover-bg: #1c2128;
    --secondary-text: #8b949e;
    --header-bg: #21262d;
    --card-bg-solid: #21262d;
    --success-bg: rgba(63, 185, 80, 0.15);
    --success-text: #3fb950;
    --badge-bg: rgba(88, 166, 255, 0.1);
    --badge-text: #8b949e;
    --msg-error-bg: rgba(248, 81, 73, 0.15);
    --msg-error-text: #f85149;
    --msg-success-bg: rgba(63, 185, 80, 0.15);
    --msg-success-text: #3fb950;
    --msg-info-bg: rgba(88, 166, 255, 0.15);
    --msg-info-text: #58a6ff;
    --warning-bg: rgba(210, 153, 34, 0.15);
    --warning-text: #d29922;
    --msg-warning-bg: rgba(210, 153, 34, 0.15);
    --msg-warning-text: #d29922;
    /* Variables guide indicateurs */
    --guide-heading: #58a6ff;
    --guide-section: #60a5fa;
    --guide-table-row: #0d1117;
    --guide-penalty: #f85149;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --card-border-radius: 12px;
    /* V4.7.97 — vars signal badges, chart et contextuels */
    --dm-white: #ffffff;            /* texte blanc pur (boutons colorés) */
    --dm-chart-bg: #171717;         /* fond conteneur chart Performance */
    --dm-plotly-text: #c9d1d9;      /* texte axes/légendes Plotly */
    --dm-link-hover: #79c0ff;       /* liens en survol (bleu clair) */
    --dm-star-gold: #f59e0b;        /* étoile favoris + gradient scan */
    --dm-chart-gold: #f2cc60;       /* tracé chart or (Plotly) */
    --dm-sig-support: #fcd34d;      /* badge signal support (jaune clair) */
    --dm-sig-breakout: #6ee7b7;     /* badge signal breakout (vert clair) */
    --dm-sig-macd: #93c5fd;         /* badge signal MACD (bleu clair) */
    --dm-sig-bb: #93c5fd;           /* badge signal BB (bleu clair) */
    --dm-sig-rr: #5eead4;           /* badge signal RR (teal clair) */
    --dm-sig-kst: #a5b4fc;          /* badge signal KST (indigo clair) */
    --dm-sig-risk: #fca5a5;         /* badge signal risk/divergence */
    --dm-badge-gold-text: #3a2000;  /* texte badge gold (fond doré) */
    --dm-badge-green-text: #052a15; /* texte badge green (fond vert) */
    --dm-badge-blue-text: #001a33;  /* texte badge blue (fond bleu) */
    --dm-card-purple: #60a5fa;      /* bordure supérieure carte .purple (bleu) */
    --dm-scan-gradient-end: #f97316; /* fin dégradé bouton scan (orange) */
}

/* V4.7.19 — Score badge color-gradient dark overrides */
body.dark-mode .opp-score[data-score-range="low"] {
    background: var(--badge-bg);
    color: var(--badge-text);
}
body.dark-mode .opp-score[data-score-range="high"] {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-success);
}
body.dark-mode .opp-score[data-score-range="excellent"] {
    background: rgba(210, 153, 34, 0.20);
    color: var(--accent-warning);
    font-weight: 700;
}
body.dark-mode .score-mode-m { background: rgba(59, 130, 246, 0.18); color: #60a5fa; border-color: rgba(59, 130, 246, 0.3); }
body.dark-mode .score-mode-p { background: rgba(168, 85, 247, 0.18); color: #c084fc; border-color: rgba(168, 85, 247, 0.3); }
body.dark-mode .score-mode-badge.score-mode-active.score-mode-m { background: rgba(59, 130, 246, 0.28); }
body.dark-mode .score-mode-badge.score-mode-active.score-mode-p { background: rgba(168, 85, 247, 0.28); }
body.dark-mode .score-mode-active-badge { border-color: var(--accent-primary, #60a5fa); }
body.dark-mode .score-mode-active-badge .score-mode-label { color: var(--text-color); }
body.dark-mode .preset-mode-m { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
body.dark-mode .preset-mode-p { background: rgba(168, 85, 247, 0.2); color: #c084fc; }

/* ============================================================================
   BODY STYLES
   ============================================================================ */
html.dark-mode body,
body.dark-mode {
    background: linear-gradient(180deg, var(--bg-color) 0%, var(--bg-secondary) 100%) !important;
    min-height: 100vh;
    color: var(--text-color) !important;
}

/* ============================================================================
   COMMON ELEMENTS
   ============================================================================ */

/* Cards and containers */
body.dark-mode .card,
body.dark-mode .header,
body.dark-mode .section,
body.dark-mode .panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Header shadow (V4.7.47 — migré depuis main.css) */
body.dark-mode .header {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Grille et conteneurs - fond transparent pour laisser voir le fond principal */
body.dark-mode .grid,
body.dark-mode #dashboard-grid,
body.dark-mode .container > div:not(.card):not(.header):not(.opportunities):not(.config-section) {
    background: transparent !important;
}

/* Inputs, selects, textareas */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--text-secondary) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
}

/* Labels and text */
body.dark-mode label {
    color: var(--text-color) !important;
}

body.dark-mode p,
body.dark-mode span:not(.emoji) {
    color: var(--text-color);
}

body.dark-mode small,
body.dark-mode .hint,
body.dark-mode .secondary-text {
    color: var(--text-secondary) !important;
}

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-color) !important;
}

/* Tables */
body.dark-mode table {
    border-color: var(--border-color) !important;
}

body.dark-mode th {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode td {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode tr:hover td {
    background: var(--bg-secondary) !important;
}

/* Buttons - secondary */
body.dark-mode .btn-secondary,
body.dark-mode button.secondary {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode button.secondary:hover {
    background: var(--border-color) !important;
}

/* Btn box-shadows (V4.7.47 — migré depuis main.css) */
body.dark-mode .btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.dark-mode .btn:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
body.dark-mode .btn.success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Links */
body.dark-mode a {
    color: var(--accent-primary);
}

/* Modals */
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .dialog {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Modal buttons (V4.7.47 — migré depuis main.css) */
body.dark-mode .modal-button-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}
body.dark-mode .modal-button-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Alert/Info boxes */
body.dark-mode .alert,
body.dark-mode .info-box,
body.dark-mode .message {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Stats cards with colored backgrounds - keep legibility */
body.dark-mode .stat-positive {
    background: rgba(16, 185, 129, 0.15) !important;
    color: var(--accent-success) !important;
}

body.dark-mode .stat-negative {
    background: rgba(239, 68, 68, 0.15) !important;
    color: var(--accent-danger) !important;
}

/* Override inline styles for dynamically created elements */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background: var(--dm-white)"],
body.dark-mode div[style*="background:var(--dm-white)"] {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background: #f5f5f5"],
body.dark-mode div[style*="background:#f5f5f5"],
body.dark-mode div[style*="background: #f8f9fa"],
body.dark-mode div[style*="background:#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"] {
    color: var(--text-color) !important;
}

body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #666"],
body.dark-mode [style*="color:#666"] {
    color: var(--text-secondary) !important;
}

body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color:#475569"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#6b7280"],
body.dark-mode [style*="color: #999"],
body.dark-mode [style*="color:#999"],
body.dark-mode [style*="color: #94a3b8"],
body.dark-mode [style*="color:#94a3b8"] {
    color: var(--text-secondary) !important;
}

body.dark-mode [style*="color: #2c3e50"],
body.dark-mode [style*="color:#2c3e50"],
body.dark-mode [style*="color: #0f172a"],
body.dark-mode [style*="color:#0f172a"],
body.dark-mode [style*="color: #334155"],
body.dark-mode [style*="color:#334155"],
body.dark-mode [style*="color: #856404"],
body.dark-mode [style*="color:#856404"],
body.dark-mode [style*="color: #1565c0"],
body.dark-mode [style*="color:#1565c0"] {
    color: var(--text-color) !important;
}

body.dark-mode div[style*="background: #e3f2fd"],
body.dark-mode div[style*="background:#e3f2fd"],
body.dark-mode div[style*="background: #fff3cd"],
body.dark-mode div[style*="background:#fff3cd"],
body.dark-mode div[style*="background: #e8f5e8"],
body.dark-mode div[style*="background:#e8f5e8"],
body.dark-mode div[style*="background: #fff8e1"],
body.dark-mode div[style*="background:#fff8e1"],
body.dark-mode div[style*="background: #e5e7eb"],
body.dark-mode div[style*="background:#e5e7eb"],
body.dark-mode div[style*="background: #f1f5f9"],
body.dark-mode div[style*="background:#f1f5f9"],
body.dark-mode div[style*="background: #e2e8f0"],
body.dark-mode div[style*="background:#e2e8f0"],
body.dark-mode div[style*="background: #dcfce7"],
body.dark-mode div[style*="background:#dcfce7"],
body.dark-mode div[style*="background: #fee2e2"],
body.dark-mode div[style*="background:#fee2e2"],
body.dark-mode div[style*="background: #dbeafe"],
body.dark-mode div[style*="background:#dbeafe"] {
    background: var(--bg-secondary) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   PLOTLY CHARTS DARK MODE
   ============================================================================ */
/* Force Plotly charts background to dark */
body.dark-mode .plotly,
body.dark-mode .js-plotly-plot,
body.dark-mode .plot-container,
body.dark-mode .chart-panel .plotly,
body.dark-mode div[id^="chart-"],
body.dark-mode div[id$="-chart"] {
    background: var(--bg-color) !important;
}

/* Conteneur du graphique Performance portefeuille (Chart.js) : fond sombre */
body.dark-mode div:has(> #performance-chart) {
    background: var(--dm-chart-bg) !important;
    border-radius: 8px;
}

/* Force all Plotly background elements to dark */
body.dark-mode .plotly .bg,
body.dark-mode .plotly rect.bg,
body.dark-mode .js-plotly-plot .bg,
body.dark-mode .plotly .plot,
body.dark-mode .plotly .subplot,
body.dark-mode svg.main-svg,
body.dark-mode .main-svg .bg {
    fill: var(--bg-color) !important;
}

/* Force paper background to dark */
body.dark-mode .plotly rect[style*="fill: rgb(255, 255, 255)"],
body.dark-mode .plotly rect[style*="fill: white"],
body.dark-mode .plotly rect[style*="fill:#fff"] {
    fill: var(--bg-color) !important;
}

/* Text colors for better visibility */
body.dark-mode .plotly text,
body.dark-mode .js-plotly-plot text,
body.dark-mode .plotly .xtick text,
body.dark-mode .plotly .ytick text,
body.dark-mode .plotly .legendtext,
body.dark-mode .plotly .g-xtitle text,
body.dark-mode .plotly .g-ytitle text {
    fill: var(--dm-plotly-text) !important;
}

/* Grid lines subtle but visible */
body.dark-mode .plotly .gridlayer path,
body.dark-mode .plotly .crisp,
body.dark-mode .plotly .xlines-above path,
body.dark-mode .plotly .ylines-above path {
    stroke: var(--card-bg) !important;
    stroke-opacity: 0.5 !important;
}

/* Zero lines more visible */
body.dark-mode .plotly .zerolinelayer path {
    stroke: var(--border-color) !important;
    stroke-width: 1.5 !important;
}

/* Chart modals in dark mode */
body.dark-mode .chart-modal {
    background-color: rgba(0, 0, 0, 0.95) !important;
}

body.dark-mode .modal-content {
    background: var(--card-bg) !important;
    color: var(--text-color) !important;
}

body.dark-mode .modal-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .close-modal {
    color: var(--text-color) !important;
}

body.dark-mode .close-modal:hover {
    color: var(--accent-danger) !important;
}

/* ============================================================================
   TICKER PAGE SPECIFIC DARK MODE
   ============================================================================ */

/* Buttons */
body.dark-mode .btn {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .btn:hover {
    background: var(--accent-primary) !important;
    color: var(--dm-white) !important;
}

body.dark-mode .btn.primary {
    background: var(--accent-primary) !important;
    color: var(--dm-white) !important;
}

body.dark-mode .btn.secondary {
    background: var(--border-color) !important;
}

body.dark-mode .btn.success {
    background: var(--accent-success) !important;
    color: var(--dm-white) !important;
}

/* Select dropdowns */
body.dark-mode select {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
    color-scheme: dark;
}
body.dark-mode select option {
    background: var(--card-bg);
    color: var(--text-color);
}

/* Preset description badge — visibility dark mode */
body.dark-mode .preset-description-badge {
    color: var(--text-secondary);
    opacity: 0.9;
}

/* Chart panels */
body.dark-mode .chart-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .chart-header {
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

body.dark-mode .chart-title {
    color: var(--text-color) !important;
}

/* Score panel */
body.dark-mode #score-panel {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .score-section {
    background: var(--bg-secondary) !important;
    border-left-color: var(--accent-primary) !important;
}

body.dark-mode .score-section:hover {
    background: var(--hover-bg) !important;
}

/* Header */
body.dark-mode header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* ============================================================================
   FAVORITE, PORTFOLIO AND ALERT ICONS - HARMONIZED ACROSS ALL PAGES
   Style identique à ticker.html pour cohérence visuelle
   ============================================================================ */

/* STARS - Favorite icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #favorite-icon,
body.dark-mode button.watchlist-star,
body.dark-mode .watchlist-star,
body.dark-mode button[class*="watchlist-star"],
body.dark-mode button.watchlist-star[data-ticker],
body.dark-mode button[class*="watchlist-star"][data-ticker],
body.dark-mode button.watchlist-star[style],
body.dark-mode button[class*="watchlist-star"][style],
body.dark-mode .opp-item button.watchlist-star,
body.dark-mode .opp-item .watchlist-star,
body.dark-mode .card button.watchlist-star,
body.dark-mode .card .watchlist-star {
    color: var(--text-color) !important; /* Blanc cassé pour étoile vide */
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Stars filled state - Or doré pour rempli (comme ticker.html) */
/* Surcharge même les styles inline avec style="color: ..." */
body.dark-mode #favorite-icon.filled,
body.dark-mode button.watchlist-star.filled,
body.dark-mode .watchlist-star.filled,
body.dark-mode button[class*="watchlist-star"].filled,
body.dark-mode button.watchlist-star[data-ticker].filled,
body.dark-mode button[class*="watchlist-star"][data-ticker].filled,
body.dark-mode button.watchlist-star[style*="color"].filled,
body.dark-mode button[class*="watchlist-star"][style*="color"].filled,
body.dark-mode button.watchlist-star[style].filled,
body.dark-mode button[class*="watchlist-star"][style].filled,
body.dark-mode .opp-item button.watchlist-star.filled,
body.dark-mode .opp-item .watchlist-star.filled,
body.dark-mode .card button.watchlist-star.filled,
body.dark-mode .card .watchlist-star.filled {
    color: var(--dm-star-gold) !important; /* Or doré pour étoile remplie */
    filter: none !important;
}

/* Stars hover - Surcharge même les styles inline */
body.dark-mode #toggle-favorite-btn:hover #favorite-icon,
body.dark-mode button.watchlist-star:hover,
body.dark-mode .watchlist-star:hover,
body.dark-mode button[class*="watchlist-star"]:hover,
body.dark-mode button.watchlist-star[data-ticker]:hover,
body.dark-mode button[class*="watchlist-star"][data-ticker]:hover {
    color: var(--accent-primary) !important; /* Bleu au survol */
}

/* BRIEFCASES - Portfolio icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #portfolio-icon,
body.dark-mode button.portfolio-btn,
body.dark-mode .portfolio-btn,
body.dark-mode button[class*="portfolio-btn"],
body.dark-mode button.portfolio-btn[data-ticker],
body.dark-mode button[class*="portfolio-btn"][data-ticker] {
    filter: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Briefcase empty (not in portfolio) - Blanc avec contour */
body.dark-mode #portfolio-icon:not(.filled),
body.dark-mode button.portfolio-btn:not(.filled),
body.dark-mode .portfolio-btn:not(.filled),
body.dark-mode button[class*="portfolio-btn"]:not(.filled),
body.dark-mode button.portfolio-btn[data-ticker]:not(.filled),
body.dark-mode button[class*="portfolio-btn"][data-ticker]:not(.filled) {
    color: white !important;
    filter: grayscale(100%) brightness(2) contrast(1) !important;
    -webkit-text-stroke: 1px var(--text-color) !important;
}

/* Briefcase filled (in portfolio) - Bleu vif pour visibilité */
/* Surcharge même les styles inline avec style="color: ..." */
body.dark-mode #portfolio-icon.filled,
body.dark-mode button.portfolio-btn.filled,
body.dark-mode .portfolio-btn.filled,
body.dark-mode button[class*="portfolio-btn"].filled,
body.dark-mode button.portfolio-btn[data-ticker].filled,
body.dark-mode button[class*="portfolio-btn"][data-ticker].filled,
body.dark-mode button.portfolio-btn[style*="color"].filled,
body.dark-mode button[class*="portfolio-btn"][style*="color"].filled {
    color: var(--accent-primary) !important; /* Bleu pour rempli */
    filter: grayscale(0%) brightness(1.2) !important;
    -webkit-text-stroke: 0 !important;
}

/* Briefcase hover - Surcharge même les styles inline */
body.dark-mode #toggle-portfolio-btn:hover #portfolio-icon,
body.dark-mode button.portfolio-btn:hover,
body.dark-mode .portfolio-btn:hover,
body.dark-mode button[class*="portfolio-btn"]:hover,
body.dark-mode button.portfolio-btn[data-ticker]:hover,
body.dark-mode button[class*="portfolio-btn"][data-ticker]:hover {
    color: var(--dm-link-hover) !important; /* Bleu clair au survol */
}

/* BELLS - Alert icons (ticker.html, index.html, portfolio.html) */
/* Surcharge des styles inline et des styles de index.html avec spécificité maximale */
body.dark-mode #alert-btn,
body.dark-mode #alert-btn span,
body.dark-mode .bell-icon,
body.dark-mode [class*="bell"],
body.dark-mode [title*="Alerte"],
body.dark-mode [title*="Alerte"] span,
body.dark-mode [title*="alerte"],
body.dark-mode [title*="alerte"] span,
body.dark-mode button[data-action="open-alert"],
body.dark-mode button[data-action="open-alert"] span,
body.dark-mode .alert-btn {
    filter: none !important;
    -webkit-text-stroke: 0 !important;
    opacity: 1 !important;
}

/* Bell empty (no alert) - Gris clair avec contour */
body.dark-mode #alert-btn:not(.has-alert),
body.dark-mode #alert-btn:not(.has-alert) span,
body.dark-mode .bell-icon:not(.active),
body.dark-mode button[data-action="open-alert"]:not(.has-alert),
body.dark-mode button[data-action="open-alert"]:not(.has-alert) span,
body.dark-mode .alert-btn:not(.has-alert) {
    filter: grayscale(100%) brightness(1.2) contrast(1.3) !important;
    -webkit-text-stroke: 1.5px var(--text-secondary) !important;
    color: var(--text-secondary) !important;
}

/* Bell filled (has alert) - Vert */
body.dark-mode #alert-btn.has-alert,
body.dark-mode #alert-btn.has-alert span,
body.dark-mode .bell-icon.active,
body.dark-mode .has-alert,
body.dark-mode .has-alert span,
body.dark-mode .btn.has-alert,
body.dark-mode .btn.has-alert span,
body.dark-mode button[data-action="open-alert"].has-alert,
body.dark-mode button[data-action="open-alert"].has-alert span,
body.dark-mode .alert-btn.has-alert {
    color: var(--accent-success) !important;
    filter: brightness(1.2) !important;
    -webkit-text-stroke: 0 !important;
}

/* Expand buttons */
body.dark-mode .expand-btn {
    color: var(--text-secondary) !important;
}

body.dark-mode .expand-btn:hover {
    color: var(--accent-primary) !important;
    background: transparent !important;
}

/* Ticker info */
body.dark-mode .ticker-isin {
    background: transparent !important;
    color: var(--accent-primary) !important;
}

/* Status messages */
body.dark-mode #status {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   CONFIG CARD - Pas de rectangles blancs (heure, minutes, scheduler)
   ============================================================================ */
body.dark-mode #recette-daily-job-hour,
body.dark-mode #recette-daily-job-minute,
body.dark-mode #card-config input,
body.dark-mode #card-config select,
body.dark-mode .config-section input,
body.dark-mode .config-section select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-status-box {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #scheduler-status-box span {
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-toggle-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode #scheduler-toggle-btn:hover {
    background: var(--border-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* ============================================================================
   PORTFOLIO PAGE - INVESTMENT ITEMS DARK MODE
   ============================================================================ */

/* Portfolio items background - Fond sombre uniforme */
/* Surcharge maximale pour forcer le fond sombre même avec styles inline */
body.dark-mode .portfolio-item,
body.dark-mode div.portfolio-item,
body.dark-mode [class*="portfolio-item"],
body.dark-mode div[class*="portfolio-item"] {
    background: var(--bg-secondary) !important; /* Fond sombre */
    background-color: var(--bg-secondary) !important; /* Double surcharge */
    border: none !important; /* Pas de bordure */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

body.dark-mode .portfolio-item:hover,
body.dark-mode div.portfolio-item:hover,
body.dark-mode [class*="portfolio-item"]:hover,
body.dark-mode div[class*="portfolio-item"]:hover {
    background: var(--hover-bg) !important; /* Légèrement plus clair au survol */
    background-color: var(--hover-bg) !important; /* Double surcharge */
    border: none !important; /* Pas de bordure */
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

/* Lien ticker (AI.PA 📊) : pas de fond contrasté, transparent comme l'arrière-plan */
body.dark-mode .portfolio-item-info h3 a,
body.dark-mode .portfolio-item-info h3 a[href*="ticker.html"] {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--accent-primary) !important;
}

body.dark-mode .portfolio-item-info h3 a:hover {
    background: transparent !important;
    color: var(--dm-link-hover) !important;
}

/* Boutons d'action (Analyser, Modifier, etc.) : fond aligné sur la carte, pas de bloc gris */
body.dark-mode .portfolio-item-actions .btn,
body.dark-mode .portfolio-item-actions a.btn,
body.dark-mode .portfolio-item-actions .btn-success,
body.dark-mode .portfolio-item-actions .btn-secondary,
body.dark-mode .portfolio-item-actions .btn-danger,
body.dark-mode .portfolio-item-actions button.btn {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

body.dark-mode .portfolio-item-actions .btn-success,
body.dark-mode .portfolio-item-actions a.btn-success {
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
}

body.dark-mode .portfolio-item-actions .btn:hover,
body.dark-mode .portfolio-item-actions a.btn:hover {
    background: var(--card-bg) !important;
    border-color: var(--text-secondary) !important;
    color: var(--text-color) !important;
}

body.dark-mode .portfolio-item-actions .btn-success:hover,
body.dark-mode .portfolio-item-actions a.btn-success:hover {
    border-color: var(--accent-success) !important;
    color: var(--accent-success) !important;
    background: rgba(63, 185, 80, 0.1) !important;
}

/* Icône alerte (cloche) : pas de fond */
body.dark-mode .portfolio-item-actions button[data-action="open-alert"] {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .portfolio-item-actions button[data-action="open-alert"]:hover {
    background: transparent !important;
    color: var(--text-color) !important;
}

/* Portfolio item info text */
body.dark-mode .portfolio-item-info h3 {
    color: var(--text-color) !important; /* Titre / ticker zone */
}

body.dark-mode .portfolio-item-info h3 a {
    color: var(--accent-primary) !important; /* Lien ticker reste bleu */
}

body.dark-mode .portfolio-item-info p {
    color: var(--text-secondary) !important; /* Texte secondaire */
}

/* Performance summary cards - Fond sombre */
body.dark-mode #performance-summary > div {
    background: var(--bg-secondary) !important; /* Fond sombre au lieu de blanc */
    border: 1px solid var(--border-color) !important;
}

/* Override inline styles with !important - Surcharge maximale */
body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"],
body.dark-mode div[style*="background: #f8fafc;"],
body.dark-mode div[style*="background:#f8fafc;"],
body.dark-mode [style*="background: #f8fafc"],
body.dark-mode [style*="background:#f8fafc"] {
    background: var(--bg-secondary) !important; /* Force fond sombre */
    background-color: var(--bg-secondary) !important; /* Double surcharge */
}

/* Surcharge des couleurs de texte inline */
body.dark-mode [style*="color: #1e293b"],
body.dark-mode [style*="color:#1e293b"],
body.dark-mode [style*="color: #1e293b;"],
body.dark-mode [style*="color:#1e293b;"] {
    color: var(--text-color) !important; /* Texte clair */
}

body.dark-mode [style*="color: #64748b"],
body.dark-mode [style*="color:#64748b"],
body.dark-mode [style*="color: #64748b;"],
body.dark-mode [style*="color:#64748b;"] {
    color: var(--text-secondary) !important; /* Texte secondaire */
}

body.dark-mode #performance-summary > div > div:first-child,
body.dark-mode #performance-summary > div[style*="background"] > div:first-child {
    color: var(--text-secondary) !important; /* Labels en gris */
}

body.dark-mode #performance-summary > div > div:last-child,
body.dark-mode #performance-summary > div[style*="background"] > div:last-child {
    color: var(--text-color) !important; /* Valeurs en blanc */
}

/* Cards dark mode — source unique (ex main.css) */
body.dark-mode .card {
    background: var(--card-bg) !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-top: 3px solid; /* couleur définie par .card.blue/green/etc. ci-dessous */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.03),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Carte "Mes Investissements" : même fond que les items pour pas de contraste */
body.dark-mode .card:has(.portfolio-list) {
    background: var(--bg-secondary) !important;
}

/* Lignes colorées au-dessus des cartes (couleurs vives sur fond sombre) */
body.dark-mode .card.blue { border-top: 3px solid var(--accent-primary) !important; }
body.dark-mode .card.green { border-top: 3px solid var(--accent-success) !important; }
body.dark-mode .card.purple { border-top: 3px solid var(--dm-card-purple) !important; }
body.dark-mode .card.orange { border-top: 3px solid var(--accent-warning) !important; }
body.dark-mode .card.red { border-top: 3px solid var(--accent-danger) !important; }
body.dark-mode .card.teal { border-top: 3px solid var(--accent-teal) !important; }
body.dark-mode .card.indigo { border-top: 3px solid var(--accent-indigo) !important; }

body.dark-mode .card:hover {
    border-color: rgba(88, 166, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(88, 166, 255, 0.2) !important;
}

body.dark-mode .card h2 {
    color: var(--text-color) !important; /* Titres en clair */
}

/* Portfolio page header */
body.dark-mode .header {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}

/* Portfolio page benchmark select */
body.dark-mode .benchmark-select {
    background: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Performance summary cards - override inline styles */
body.dark-mode #performance-summary > div[style*="background: #f8fafc"],
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode #performance-summary > div[style*="background: #f8fafc"] > div:first-child,
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] > div:first-child {
    color: var(--text-secondary) !important;
}

body.dark-mode #performance-summary > div[style*="background: #f8fafc"] > div:last-child,
body.dark-mode #performance-summary > div[style*="background:#f8fafc"] > div:last-child {
    color: var(--text-color) !important;
}

/* Opportunity items */
body.dark-mode .opp-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
}

body.dark-mode .opp-item:hover {
    background: rgba(88, 166, 255, 0.05);
    border-color: rgba(88, 166, 255, 0.2);
}

/* Brief display */
body.dark-mode .brief-display {
    background: var(--brief-bg) !important;
    border-left-color: var(--accent-success) !important;
}

/* Version / env / status badges */
body.dark-mode .version-badge {
    background: rgba(88, 166, 255, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(88, 166, 255, 0.2);
}
body.dark-mode .env-badge.env-prod {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-success);
    border-color: rgba(63, 185, 80, 0.35);
}
body.dark-mode .env-badge.env-rec {
    background: rgba(210, 153, 34, 0.2);
    color: var(--dm-chart-gold);
    border-color: rgba(210, 153, 34, 0.35);
}

body.dark-mode .status-badge {
    background: color-mix(in srgb, var(--accent-success) 15%, transparent);
    color: var(--accent-success);
    border: 1px solid color-mix(in srgb, var(--accent-success) 30%, transparent);
}

/* Scheduler span */
body.dark-mode #scheduler-status span {
    color: var(--text-color) !important;
}

/* Rank badges (V4.7.47 — migré depuis main.css) */
html.dark-mode .rank-badge,
body.dark-mode .rank-badge {
    background: color-mix(in srgb, var(--accent-success) 12%, var(--card-bg));
    color: var(--accent-success);
}
html.dark-mode .rank-badge.rank-top5,
body.dark-mode .rank-badge.rank-top5 {
    background: color-mix(in srgb, var(--accent-warning) 10%, var(--card-bg));
    color: var(--accent-warning);
}



/* Theme toggle buttons (V4.7.62 — migré depuis main.css) */
body.dark-mode #theme-toggle {
    background: linear-gradient(135deg, var(--dm-star-gold) 0%, var(--dm-scan-gradient-end) 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

body.dark-mode #theme-toggle:hover {
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

body.dark-mode #theme-toggle-mobile {
    background: linear-gradient(135deg, var(--dm-star-gold) 0%, var(--dm-scan-gradient-end) 100%);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

body.dark-mode #theme-toggle-mobile:hover {
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   ui-extras.css groupe 1 — migrés V4.7.69
   Modal + user-info badges + tabs + settings-input option
   ========================================================================== */

/* border additive sur modals (base sans border) */
body.dark-mode .modal-content,
body.dark-mode .settings-modal-content {
    border: 1px solid var(--border-color);
}

/* User-name badge */
body.dark-mode .user-name-badge {
    color: var(--text-primary);
}

/* Role badges — couleurs claires pour fond sombre */
body.dark-mode .role-badge.role-admin {
    background: transparent;
    color: var(--dm-sig-risk);
    border-color: rgba(252, 165, 165, 0.35);
}

body.dark-mode .role-badge.role-user {
    background: transparent;
    color: var(--dm-sig-macd);
    border-color: rgba(147, 197, 253, 0.35);
}

body.dark-mode .role-badge {
    border-color: var(--border-color);
}

/* API budgets display */
body.dark-mode #api-budgets-display {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Header user info text */
body.dark-mode #header-user-info span {
    color: var(--text-primary) !important;
}

/* Tabs */
body.dark-mode .tabs {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

body.dark-mode .tab-btn {
    color: var(--text-secondary);
    background: transparent;
}

body.dark-mode .tab-btn.active {
    background: var(--accent-success);
    color: var(--dm-white);
}

body.dark-mode .tab-btn:hover:not(.active) {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* Mobile header border */
@media (max-width: 768px) {
    body.dark-mode #header-user-info {
        border-top-color: var(--border-color) !important;
    }
}

/* select option bg — propriété additive non couverte par les vars de base */
body.dark-mode .settings-input option {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* ==========================================================================
   ui-extras.css groupe 2 — migrés V4.7.70
   Setup badges + signal badges + skeleton
   ========================================================================== */

/* Setup quality badges — text contrast on gradient backgrounds */
body.dark-mode .badge-gold { color: var(--dm-badge-gold-text); }
body.dark-mode .badge-green { color: var(--dm-badge-green-text); }
body.dark-mode .badge-blue { color: var(--dm-badge-blue-text); }

/* Signal badges */
body.dark-mode .sig-badge { background: var(--border-color); color: var(--text-secondary); }
body.dark-mode .sig-support { background: color-mix(in srgb, var(--accent-warning) 20%, var(--card-bg)); color: var(--dm-sig-support); }
body.dark-mode .sig-breakout { background: color-mix(in srgb, var(--accent-success) 20%, var(--card-bg)); color: var(--dm-sig-breakout); border-color: color-mix(in srgb, var(--accent-success) 35%, transparent); }
body.dark-mode .sig-macd { background: color-mix(in srgb, var(--accent-primary) 18%, var(--card-bg)); color: var(--dm-sig-macd); border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent); }
body.dark-mode .sig-bb { background: color-mix(in srgb, var(--accent-secondary) 18%, var(--card-bg)); color: var(--dm-sig-bb); border-color: color-mix(in srgb, var(--accent-secondary) 35%, transparent); }
body.dark-mode .sig-rr { background: color-mix(in srgb, var(--accent-teal) 18%, var(--card-bg)); color: var(--dm-sig-rr); border-color: color-mix(in srgb, var(--accent-teal) 35%, transparent); }
body.dark-mode .sig-kst { background: color-mix(in srgb, var(--accent-indigo) 18%, var(--card-bg)); color: var(--dm-sig-kst); border-color: color-mix(in srgb, var(--accent-indigo) 35%, transparent); }
body.dark-mode .sig-risk { background: color-mix(in srgb, var(--accent-danger) 20%, var(--card-bg)); color: var(--dm-sig-risk); border-color: color-mix(in srgb, var(--accent-danger) 35%, transparent); }

/* Signal key-preset badge (V4.7.12) */
body.dark-mode .sig-badge.sig-key-preset {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Skeleton loading */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--border-color) 50%, var(--card-bg) 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}