/**
 * HarmoQuali — Override Habilec Light Theme
 * v3.0 — Audit complet : lisibilité, contraste, poids de police
 *
 * Problème racine : le bundle Vite est compilé avec un thème dark
 * (fond #0a0e1a / #252b37, texte #fff / #e5e5e5 / #0f8).
 * Ce fichier surcharge TOUS les sélecteurs codés en dur pour un
 * thème clair cohérent avec la charte Habilec/Caly-Quiz.
 */

/* ============================================================
   1. VARIABLES CSS — Thème clair Habilec
   ============================================================ */

:root {
    /* Couleurs principales */
    --primary: #f59e0b !important;
    --primary-dark: #d97706 !important;
    --primary-light: #fbbf24 !important;
    --secondary: #8b5cf6 !important;
    --secondary-dark: #7c3aed !important;
    --secondary-light: #a78bfa !important;

    /* Accents */
    --accent-blue: #3b82f6 !important;
    --accent-purple: #8b5cf6 !important;
    --accent-pink: #ec4899 !important;
    --accent-orange: #f59e0b !important;
    --accent-green: #22c55e !important;
    --accent-red: #ef4444 !important;
    --accent-yellow: #eab308 !important;

    /* Fonds */
    --background: #f5f5f5 !important;
    --background-secondary: #ffffff !important;
    --background-tertiary: #f8f9fa !important;
    --card: #ffffff !important;
    --card-hover: #f8f9fa !important;

    /* Bordures */
    --border: #e5e7eb !important;
    --border-light: #f3f4f6 !important;

    /* Texte — palette sombre pour fond clair */
    --text-primary: #1f2937 !important;
    --text-secondary: #4b5563 !important;
    --text-muted: #6b7280 !important;
    --text-disabled: #9ca3af !important;

    /* Gradients & Glass */
    --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%) !important;
    --glass-bg: rgba(255, 255, 255, 0.85) !important;
    --glass-border: rgba(0, 0, 0, 0.08) !important;
    --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12) !important;
    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

body {
    background: #f5f5f5 !important;
    color: #1f2937 !important;
}


/* ============================================================
   2. PANNEAU SYNTHESE GLOBALE
      Fond dark #252b37 → blanc
      Texte #e5e5e5 → gris foncé
   ============================================================ */

.lab-summary-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.lab-summary-panel h3 {
    color: #1e3a5f !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-weight: 700 !important;
}

.summary-panel-wrapper {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid #e5e7eb !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.summary-panel-wrapper .panel-header h3 {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

/* Titres de section */
.summary-section-title {
    color: #374151 !important;
    font-weight: 700 !important;
    font-size: .88rem !important;
}

/* Cartes */
.summary-card {
    background: #f8f9fa !important;
    border: 1px solid #e5e7eb !important;
}

.summary-card:hover {
    background: #f1f5f9 !important;
    border-color: #d1d5db !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.summary-card-title {
    color: #1f2937 !important;
    font-weight: 700 !important;
    border-bottom: 1px dashed #d1d5db !important;
}

/* Labels — renforcés en gras */
.summary-label {
    color: #374151 !important;
    font-weight: 600 !important;
}

.summary-subitem .summary-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
}

/* Valeurs — garder statut, renforcer défaut */
.summary-value {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.summary-value.good {
    color: #15803d !important;
}

.summary-value.warning {
    color: #b45309 !important;
}

.summary-value.danger {
    color: #b91c1c !important;
}

.summary-value-small {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

/* Row */
.summary-row {
    color: #1f2937 !important;
}


/* ============================================================
   3. HEADER PRINCIPAL — texte #fff → sombre
   ============================================================ */

.header-title h1 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.header-title h2 {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.header-title .subtitle {
    color: #4b5563 !important;
    font-weight: 500 !important;
    font-size: .8rem !important;
}

.header-subtitle {
    color: #4b5563 !important;
    font-weight: 500 !important;
}

.lab-header-compact h1 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.lab-header h1 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}


/* ============================================================
   4. INFO LABELS & VALEURS (scope / mesures)
      #fff9 → gris, #0f8 → bleu foncé
   ============================================================ */

.info-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
}

.info-value {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}


/* ============================================================
   5. THD — LABELS & VALEURS
      Texte #ffffffb3 → sombre, valeurs couleur renforcée
   ============================================================ */

.thd-label {
    color: #1f2937 !important;
    font-weight: 700 !important;
    font-size: .8rem !important;
}

.thd-value {
    font-weight: 700 !important;
}

.thd-value.ok {
    background: rgba(21, 128, 61, 0.10) !important;
    color: #15803d !important;
}

.thd-value.warning {
    background: rgba(180, 83, 9, 0.10) !important;
    color: #b45309 !important;
}

.thd-value.danger {
    background: rgba(185, 28, 28, 0.10) !important;
    color: #b91c1c !important;
}

.thd-status {
    font-weight: 600 !important;
}

.thd-status.danger {
    color: #b91c1c !important;
}


/* ============================================================
   6. METRIC LABELS / VALEURS (panneaux mesures)
      Tailles trop petites (.65rem) → agrandies
   ============================================================ */

.metric-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
}

.metric-value {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

.metric-unit {
    color: #6b7280 !important;
}

.metric-count {
    color: #4b5563 !important;
    font-weight: 600 !important;
}


/* ============================================================
   7. CONTROLES (sliders, labels, groupes)
      Tailles trop petites (.7rem) → agrandies + gras
   ============================================================ */

.control-group label {
    font-size: .85rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.control-label {
    color: #1f2937 !important;
    font-weight: 600 !important;
    font-size: .9rem !important;
}

.control-label strong {
    font-weight: 700 !important;
}

/* Sliders HarmoScope */
.hs-slider-label {
    color: #374151 !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
}

.hs-slider-value {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

/* Slider container */
.slider-value {
    color: #d97706 !important;
    font-weight: 700 !important;
    background: #fef3c7 !important;
}


/* ============================================================
   8. HS-PANEL (panneaux HarmoScope)
   ============================================================ */

.hs-panel h3 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.hs-header-left h2 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.hs-header-left p {
    color: #4b5563 !important;
    font-weight: 500 !important;
}

.hs-metric-label {
    color: #374151 !important;
    font-weight: 600 !important;
}

.hs-metric-value {
    color: #1f2937 !important;
    font-weight: 700 !important;
}


/* ============================================================
   9. BOUTON POP-OUT — invisible (#ffffff0d) → visible
   ============================================================ */

.pop-out-button {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
}

.pop-out-button:hover {
    background: rgba(245, 158, 11, 0.10) !important;
    border-color: #f59e0b !important;
    color: #d97706 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
}

.pop-out-button:active {
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.1) !important;
}


/* ============================================================
   10. OSCILLOSCOPE PANEL
   ============================================================ */

.oscilloscope-panel {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid #e5e7eb !important;
}


/* ============================================================
   11. TOOLTIPS / POPUPS D'AIDE
       Garder le fond dark pour les tooltips (meilleur contraste)
       mais fixer les icônes de déclenchement
   ============================================================ */

.tooltip-icon {
    background-color: rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
    border: 1px solid #d1d5db !important;
    font-weight: 700 !important;
}

.tooltip-container:hover .tooltip-icon {
    background-color: #f59e0b !important;
    color: #fff !important;
    border-color: #f59e0b !important;
}

/* Le tooltip-text garde fond sombre = lisible */
/* Mais on fixe les rows quand même si le tooltip est clair */
.tooltip-row span {
    color: inherit !important;
}

.tooltip-row strong {
    color: inherit !important;
    font-weight: 700 !important;
}

.tooltip-content strong {
    font-weight: 700 !important;
}


/* ============================================================
   12. LEGENDES (graphiques)
       #a3adc2 → plus sombre
   ============================================================ */

.legend-item span:last-child {
    color: #374151 !important;
    font-weight: 500 !important;
}

.waveform-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
}

.ideal-line {
    color: #6b7280 !important;
}


/* ============================================================
   13. STATUS BADGES — renforcer les couleurs de statut
       Vert #4ade80 trop clair → #15803d foncé
   ============================================================ */

.status-badge.ok {
    background: rgba(21, 128, 61, 0.12) !important;
    color: #15803d !important;
    font-weight: 700 !important;
}

.status-badge.limite,
.status-badge.warning {
    background: rgba(180, 83, 9, 0.12) !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

.status-badge.anormal {
    background: rgba(185, 28, 28, 0.12) !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
}


/* ============================================================
   14. STAT CARDS (tableaux de bord)
   ============================================================ */

.stat-value {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.stat-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
}

.stat-card.success .stat-value {
    color: #15803d !important;
}

.stat-card.warning .stat-value {
    color: #b45309 !important;
}

.stat-card.danger .stat-value {
    color: #b91c1c !important;
}


/* ============================================================
   15. NAV TABS
   ============================================================ */

.nav-tab {
    color: #374151 !important;
    font-weight: 600 !important;
}

.nav-tab.active {
    color: #fff !important;
}


/* ============================================================
   16. MESURES (measurements)
   ============================================================ */

.measurement-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .8rem !important;
}

.measurement-value {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.measurement-value .unit {
    color: #6b7280 !important;
}

.measurements-panel {
    border-color: #e5e7eb !important;
}


/* ============================================================
   17. PROGRESS / NAVIGATION
   ============================================================ */

.progress-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
}

.version-badge {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
    font-weight: 700 !important;
}


/* ============================================================
   18. STATE (badge d'état CP)
   ============================================================ */

.state-letter {
    font-weight: 700 !important;
}

.state-name {
    color: #4b5563 !important;
    font-weight: 600 !important;
    font-size: .78rem !important;
}

.state-voltage {
    color: #6b7280 !important;
    font-size: .7rem !important;
}


/* ============================================================
   19. HARMONIQUES (barres, labels)
   ============================================================ */

.harmonic-rank {
    font-weight: 700 !important;
}

.harmonic-freq {
    color: #6b7280 !important;
    font-size: .78rem !important;
}


/* ============================================================
   20. PERTURBATION TAGS & COMPACT
   ============================================================ */

.perturbation-tag {
    font-weight: 600 !important;
    font-size: .78rem !important;
}

.compact-btn {
    color: #4b5563 !important;
    font-weight: 700 !important;
}


/* ============================================================
   21. KPI (indicateurs de performance)
   ============================================================ */

.kpi-label {
    font-weight: 600 !important;
    font-size: .78rem !important;
    color: #4b5563 !important;
}

.kpi-sub {
    color: #6b7280 !important;
    font-weight: 500 !important;
}


/* ============================================================
   22. SEPARATEURS
   ============================================================ */

.separator {
    color: #d1d5db !important;
}


/* ============================================================
   23. SECTION TITLES (caly-section-title etc.)
   ============================================================ */

.caly-section-title {
    font-weight: 700 !important;
}

.caly-stat-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
}

.caly-dc-stat-label {
    color: #4b5563 !important;
    font-weight: 600 !important;
}


/* ============================================================
   24. TABLES (limites, impédance)
       Renforcer les cellules
   ============================================================ */

.limits-table {
    font-size: .78rem !important;
}

.limits-table th,
.limits-table td {
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.impedance-table {
    font-size: .78rem !important;
}


/* ============================================================
   25. CARDS (info, analyzer, measurement)
   ============================================================ */

.info-card h3 {
    color: #1f2937 !important;
    font-weight: 700 !important;
}

.analyzer-card {
    font-weight: 500 !important;
}

.measurement-card {
    border-width: 2px !important;
}

.measurement-card.ok {
    border-color: #15803d !important;
}

.measurement-card.warning {
    border-color: #b45309 !important;
}

.measurement-card.danger {
    border-color: #b91c1c !important;
}


/* ============================================================
   26. DETAILS / PROCESS / STEP HEADERS
       Texte #fff → contexte : garder dark quand il y a un
       fond gradient coloré, sinon rendre sombre
   ============================================================ */

/* Ces éléments ont souvent un fond gradient → garder #fff */
/* .process-header h2, .step-header h3, .details-header h2,
   .content-header h3, .calc-header h2 = fond coloré = OK */


/* ============================================================
   27. FOCUS HINT & MODE BADGES
   ============================================================ */

.focus-hint {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

.mode-badge {
    font-weight: 700 !important;
}


/* ============================================================
   28. TAILLES MINIMALES
       Empêcher les textes < .7rem sur les éléments importants
   ============================================================ */

.control-group label,
.metric-label,
.thd-status,
.kpi-label,
.state-name,
.progress-label,
.waveform-label,
.harmonic-freq,
.perturbation-tag,
.limits-table,
.impedance-table {
    font-size: max(0.78rem, inherit) !important;
}


/* ============================================================
   29. CANVAS SPECTRUM — garder fond sombre (c'est un oscilloscope)
   ============================================================ */

.spectrum-canvas {
    background: #0a0e1a !important;
}


/* ============================================================
   30. API EXPLORER (si visible)
   ============================================================ */

.api-explorer-header h2 {
    color: inherit !important;
    font-weight: 700 !important;
}

.api-explorer-header p {
    color: inherit !important;
}


/* ============================================================
   31. Fallback message quand React crash
   ============================================================ */

#root:empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f5f5f5;
}

#root:empty::after {
    content: "Le module HarmoQuali est en cours de maintenance. Veuillez r\00e9essayer plus tard.";
    font-family: 'Inter', 'Segoe UI', sans-serif;
    font-size: 1.1rem;
    color: #6b7280;
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    max-width: 500px;
}