/* ============================================
   REPORT-SHARED.CSS
   Mockup-matching overrides for R1 reports.
   Loaded AFTER modern-design.css / base.html styles.
   ============================================ */

/* ═══════════════════════════════════════════
   1. REPORT-CONTENT WRAPPER — remove white box
   Cards float on page background, not inside a white panel.
   ═══════════════════════════════════════════ */
.report-content {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Override inline card bg too */
.report-content .card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ═══════════════════════════════════════════
   2. REPORT HEADER — more compact (mockup style)
   ═══════════════════════════════════════════ */
.report-header {
    padding: 1.25rem 2rem !important;
    border-radius: 16px 16px 0 0 !important;
}
.report-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.25rem !important;
    border-width: 2px !important;
}
.report-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.report-athlete-name {
    font-size: 1.35rem !important;
    margin-bottom: 0.25rem !important;
}
.report-type-label {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.6rem !important;
    margin-bottom: 0.4rem !important;
}
.report-meta {
    gap: 1rem !important;
    margin-bottom: 0.25rem !important;
}
.report-meta-item {
    font-size: 0.8rem !important;
}
.report-badges {
    margin-top: 0.4rem !important;
    gap: 0.3rem !important;
}
.report-badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.65rem !important;
}
/* Remove decorative circles */
.report-header::before,
.report-header::after {
    display: none !important;
}

/* ═══════════════════════════════════════════
   3. CARD HEADERS — thin accent bar (8px)
   ═══════════════════════════════════════════ */
.report-content .card-header-gradient {
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.report-content .card-header-gradient h5,
.report-content .card-header-gradient h6 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}
.report-content .card-header-gradient i {
    font-size: 0.8rem !important;
}

/* ═══════════════════════════════════════════
   4. CARDS — clean floating style
   ═══════════════════════════════════════════ */
.report-content .card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 24px;
    position: relative;
}
.report-content .card .card-body {
    padding: 24px;
}

/* ═══════════════════════════════════════════
   5. TABLES — compact, uppercase headers, NO colored bg
   ═══════════════════════════════════════════ */
.report-content .table th,
.report-content .table thead th,
.report-content .table thead.table-report th,
.report-content .table thead.table-dark th {
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #64748B !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-bottom: 2px solid #E2E8F0 !important;
    background: transparent !important;
    text-align: left;
}
.report-content .table td {
    padding: 6px 16px !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-size: 0.85rem;
    color: #64748B;
}
.report-content .table td:first-child {
    color: #1E293B;
    font-weight: 500;
}
.report-content .table tr:hover {
    background: rgba(0,0,0,0.015) !important;
}
/* Strip Bootstrap zebra and background classes */
.report-content .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent !important;
}
.report-content .table > :not(caption) > * > * {
    background-color: transparent;
}

/* ═══════════════════════════════════════════
   6. KPI CARDS — white bg + left border accent (override inline styles)
   ═══════════════════════════════════════════ */
.report-content .energetic-kpis .card,
.report-content #fatigue-summary .card {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--report-color-start, #0066CC) !important;
}
.report-content .energetic-kpis .card h2,
.report-content #fatigue-summary .card h4,
.report-content #fatigue-summary .card h5 {
    color: #1E293B !important;
    font-weight: 700;
}
.report-content .energetic-kpis .card small,
.report-content #fatigue-summary .card small {
    color: #64748B !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Color-coded left borders for KPI cards */
.report-content .energetic-kpis .col-md-3:nth-child(1) .card {
    border-left-color: var(--report-color-start, #0066CC) !important;
}
.report-content .energetic-kpis .col-md-3:nth-child(2) .card {
    border-left-color: #10B981 !important;
}
.report-content .energetic-kpis .col-md-3:nth-child(2) .card h2 { color: #10B981 !important; }
.report-content .energetic-kpis .col-md-3:nth-child(3) .card {
    border-left-color: #089ba6 !important;
}
.report-content .energetic-kpis .col-md-3:nth-child(3) .card h2 { color: #089ba6 !important; }
.report-content .energetic-kpis .col-md-3:nth-child(4) .card {
    border-left-color: #F59E0B !important;
}
.report-content .energetic-kpis .col-md-3:nth-child(4) .card h2 { color: #F59E0B !important; }

/* Fatigue KPI color-coded borders */
.report-content #fatigue-summary .card.bg-danger {
    border-left-color: #DC2626 !important;
}
.report-content #fatigue-summary .card[style*="ffc107"],
.report-content #fatigue-summary .card.text-dark {
    border-left-color: #F59E0B !important;
}
.report-content #fatigue-summary .card.bg-info {
    border-left-color: #089ba6 !important;
}
.report-content #fatigue-summary .card.bg-success {
    border-left-color: #10B981 !important;
}
.report-content #fatigue-summary .card.bg-secondary {
    border-left-color: #6c757d !important;
}

/* ═══════════════════════════════════════════
   7. HELP TOGGLE (i) — report color badge, white text
   ═══════════════════════════════════════════ */
.help-toggle-btn {
    position: absolute;
    bottom: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--report-color-start, #0066CC), var(--report-color-end, #004C99));
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    z-index: 2;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,102,204,0.3);
    line-height: 1;
}
.help-toggle-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 10px rgba(0,102,204,0.4);
}

/* ═══════════════════════════════════════════
   8. HELP TOGGLE CONTENT (collapsible)
   ═══════════════════════════════════════════ */
.help-toggle-content {
    display: none;
    background: #f0f7ff;
    border: 1px solid #d0e3f7;
    border-radius: 8px;
    padding: 16px;
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 16px;
    line-height: 1.7;
}
.help-toggle-content.show {
    display: block;
}
.help-toggle-content strong {
    color: #1E293B;
}
.help-toggle-content ul {
    margin: 8px 0 8px 24px;
    padding: 0;
}
.help-toggle-content li {
    margin-bottom: 4px;
}

/* ═══════════════════════════════════════════
   9. COACHING HIGHLIGHT (report-color accent)
   ═══════════════════════════════════════════ */
.coaching-highlight {
    background: linear-gradient(135deg, rgba(0,102,204,0.04), rgba(0,102,204,0.08));
    border: 1px solid rgba(0,102,204,0.2);
    border-left: 4px solid var(--report-color-start, #0066CC);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.coaching-highlight h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--report-color-start, #0066CC);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════
   10. OBSERVATION HIGHLIGHT (amber — visually distinct)
   ═══════════════════════════════════════════ */
.observation-highlight {
    background: linear-gradient(135deg, rgba(255,193,7,0.06), rgba(255,152,0,0.08));
    border: 1px solid rgba(255,152,0,0.25);
    border-left: 4px solid #F59E0B;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}
.observation-highlight h6 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #B45309;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══════════════════════════════════════════
   11a. "WAT BETEKENT DIT" — content styling
   Herkenning + Coaching Advies als accent tegels
   ═══════════════════════════════════════════ */
/* R1 Profile box — badge + detail side by side */
.r1-profile-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(135deg, rgba(0,102,204,0.03), rgba(0,102,204,0.06));
    border: 1px solid rgba(0,102,204,0.15);
    border-radius: 12px;
    padding: 20px;
}
.r1-profile-badge {
    color: white;
    border-radius: 12px;
    padding: 24px 20px;
    min-width: 110px;
    min-height: 110px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.r1-profile-detail {
    flex: 1;
    min-width: 0;
}
.r1-profile-detail h6 {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin: 12px 0 4px 0;
}
.r1-profile-detail h6:first-child { margin-top: 0; }
.r1-profile-detail p {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 6px;
}
[data-bs-theme="dark"] .r1-profile-box {
    background: linear-gradient(135deg, rgba(0,102,204,0.04), rgba(0,102,204,0.08));
    border-color: rgba(0,102,204,0.25);
}
[data-bs-theme="dark"] .r1-profile-detail h6 { color: #e2e8f0; }
[data-bs-theme="dark"] .r1-profile-detail p { color: #94a3b8; }
@media (max-width: 576px) {
    .r1-profile-box { flex-direction: column; }
    .r1-profile-badge { align-self: center; }
}

/* Profile meaning content (hidden, extracted by JS) */
#profile-meaning h5 { display: none; }
#profile-meaning h5:first-child {
    margin-top: 0;
}

/* Herkenning & Waarom dit profiel — accent tile */
#profile-meaning h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1E293B;
    background: none;
    border-left: none;
    border-radius: 0;
    padding: 0;
    margin: 16px 0 4px 0;
}
#profile-meaning h5 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--report-color-start, #0066CC);
    margin: 20px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

/* Coaching advies list items — green accent cards */
#profile-meaning .card-body ul {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}
#profile-meaning .card-body ul li {
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.15);
    border-left: 3px solid #10B981;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #1E293B;
}
#profile-meaning .coaching-tip ul {
    padding-left: 20px !important;
    margin: 8px 0 0 0 !important;
}
#profile-meaning .coaching-tip ul li {
    background: none !important;
    border: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    padding: 2px 0 !important;
    margin-bottom: 4px !important;
    list-style: disc !important;
    color: inherit !important;
}

/* Herkenning values — colored inline highlights */
#profile-meaning .card-body p {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.7;
}

/* Dark mode — h5 handled by [dark] #profile-meaning h5 below */
[data-bs-theme="dark"] #profile-meaning h6 {
    color: #e2e8f0 !important;
    background: none !important;
    border-left: none !important;
}
[data-bs-theme="dark"] #profile-meaning h5 {
    color: #60a5fa !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
@media (max-width: 576px) {
    #profile-meaning + .help-toggle-btn { /* keep i button */ }
}
[data-bs-theme="dark"] #profile-meaning .card-body ul li {
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.15) !important;
    border-left-color: #34d058 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] #profile-meaning .coaching-tip ul li {
    background: none !important;
    border: none !important;
    border-left: none !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] #profile-meaning .coaching-tip ul {
    padding-left: 20px !important;
}
[data-bs-theme="dark"] #profile-meaning .card-body p {
    color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════
   11. TARGET VALUES CARD — accent border
   ═══════════════════════════════════════════ */
.report-content .card.card-accent-target,
.report-content .card.card-accent-target .card-body {
    border: 2px solid rgba(0,102,204,0.25) !important;
    background: linear-gradient(135deg, rgba(0,102,204,0.04), rgba(0,102,204,0.08)) !important;
}
.report-content .card.card-accent-target .card-body {
    border: none !important;
}
.report-content .card.card-accent-target .table,
.report-content .card.card-accent-target .table td,
.report-content .card.card-accent-target .table tr {
    background: transparent !important;
}

/* ═══════════════════════════════════════════
   12. PROFILE HERO — report-color frame, centered
   ═══════════════════════════════════════════ */
.profile-hero.profile-hero-framed {
    background: linear-gradient(135deg, rgba(0,102,204,0.03), rgba(0,102,204,0.08)) !important;
    border: 2px solid rgba(0,102,204,0.25) !important;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 12px rgba(0,102,204,0.08);
    margin-bottom: 24px;
}
.profile-hero-framed .profile-name {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--report-color-start, #0066CC) !important;
    margin-bottom: 8px;
}
.profile-hero-framed .profile-description {
    font-size: 0.85rem !important;
    color: #64748B !important;
    max-width: 600px;
    margin: 0 auto 16px !important;
}
.profile-hero-framed .confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   13. COACHING ADVICE SECTIONS (colored levels)
   ═══════════════════════════════════════════ */
.report-content .advice-section {
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.report-content .advice-section h6 {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.advice-section-green {
    background: rgba(16,185,129,0.08);
    border-left: 3px solid #10B981;
}
.advice-section-green h6 { color: #059669 !important; }
.advice-section-blue {
    background: rgba(0,102,204,0.06);
    border-left: 3px solid #0066CC;
}
.advice-section-blue h6 { color: #0066CC !important; }
.advice-section-orange {
    background: rgba(245,158,11,0.08);
    border-left: 3px solid #F59E0B;
}
.advice-section-orange h6 { color: #B45309 !important; }
.advice-section-red {
    background: rgba(220,38,38,0.06);
    border-left: 3px solid #DC2626;
}
.advice-section-red h6 { color: #DC2626 !important; }

/* ═══════════════════════════════════════════
   13b. COACHING TIP — unified purple balloon
   ═══════════════════════════════════════════ */
.coaching-tip {
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: rgba(124, 58, 237, 0.07);
    border-left: 4px solid #7c3aed;
}
.coaching-tip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.coaching-tip-header i.fa-lightbulb { color: #7c3aed; }
.coaching-tip-header strong { color: #5b21b6; font-size: 0.85rem; }
.coaching-tip p { margin-bottom: 4px; font-size: 0.9rem; }
.coaching-tip p:last-child { margin-bottom: 0; }
.coaching-tip .severity-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: auto;
}
.severity-badge-mild { background: rgba(25, 135, 84, 0.15); color: #146c43; }
.severity-badge-moderate { background: rgba(255, 152, 0, 0.15); color: #b45309; }
.severity-badge-severe { background: rgba(220, 53, 69, 0.15); color: #b91c1c; }
.severity-badge-good { background: rgba(25, 135, 84, 0.15); color: #146c43; }
.severity-badge-warning { background: rgba(255, 152, 0, 0.15); color: #b45309; }
.severity-badge-danger { background: rgba(220, 53, 69, 0.15); color: #b91c1c; }
.severity-badge-info { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.severity-badge-high { background: rgba(220, 53, 69, 0.15); color: #b91c1c; }
.severity-badge-medium { background: rgba(255, 152, 0, 0.15); color: #b45309; }
.severity-badge-low { background: rgba(25, 135, 84, 0.15); color: #146c43; }

[data-bs-theme="dark"] .coaching-tip {
    background: rgba(167, 139, 250, 0.18);
    border-left-color: #c4b5fd;
}
[data-bs-theme="dark"] .coaching-tip-header strong { color: #ede9fe; }
[data-bs-theme="dark"] .coaching-tip-header i.fa-lightbulb { color: #c4b5fd; }
[data-bs-theme="dark"] .coaching-tip p { color: #e2e8f0; }
.coaching-tip ul { margin: 0; padding-left: 20px; }
.coaching-tip ul li { font-size: 0.9rem; margin-bottom: 4px; }
[data-bs-theme="dark"] .coaching-tip ul li { color: #e2e8f0; }
[data-bs-theme="dark"] .severity-badge-mild { background: rgba(25, 135, 84, 0.2); color: #4ade80; }
[data-bs-theme="dark"] .severity-badge-moderate { background: rgba(255, 152, 0, 0.2); color: #fbbf24; }
[data-bs-theme="dark"] .severity-badge-severe { background: rgba(220, 53, 69, 0.2); color: #f87171; }
[data-bs-theme="dark"] .severity-badge-good { background: rgba(25, 135, 84, 0.2); color: #4ade80; }
[data-bs-theme="dark"] .severity-badge-warning { background: rgba(255, 152, 0, 0.2); color: #fbbf24; }
[data-bs-theme="dark"] .severity-badge-danger { background: rgba(220, 53, 69, 0.2); color: #f87171; }
[data-bs-theme="dark"] .severity-badge-high { background: rgba(220, 53, 69, 0.2); color: #f87171; }
[data-bs-theme="dark"] .severity-badge-medium { background: rgba(255, 152, 0, 0.2); color: #fbbf24; }
[data-bs-theme="dark"] .severity-badge-low { background: rgba(25, 135, 84, 0.2); color: #4ade80; }

/* ═══════════════════════════════════════════
   14. PERSONALIZED COACHING — softer focus cards
   ═══════════════════════════════════════════ */
.report-content .card.border-danger {
    border-color: rgba(220,38,38,0.2) !important;
    border-left: 4px solid #DC2626 !important;
}
.report-content .card-header.bg-danger {
    background: rgba(220,38,38,0.06) !important;
    color: #DC2626 !important;
    border-bottom: none;
}
.report-content .card-header.bg-danger h5 { color: #DC2626 !important; }
.report-content .card-header.bg-danger i { color: #DC2626 !important; }
.report-content .card.border-danger .card-body.bg-light {
    background: rgba(220,38,38,0.03) !important;
}
.report-content .card.border-warning {
    border-color: rgba(245,158,11,0.2) !important;
    border-left: 4px solid #F59E0B !important;
}
.report-content .card-header.bg-warning {
    background: rgba(245,158,11,0.06) !important;
    color: #B45309 !important;
    border-bottom: none;
}
.report-content .card-header.bg-warning h5 { color: #B45309 !important; }
.report-content .card-header.bg-warning i { color: #B45309 !important; }
.report-content .card.border-warning .card-body.bg-light {
    background: rgba(245,158,11,0.03) !important;
}

/* Coaching summary → coaching-card style */
.report-content .alert.alert-success {
    background: linear-gradient(135deg, rgba(0,102,204,0.04), rgba(0,102,204,0.08));
    border: 1px solid rgba(0,102,204,0.2);
    border-left: 4px solid var(--report-color-start, #0066CC);
    border-radius: 12px;
    color: #1E293B;
}
.report-content .alert.alert-success h6 {
    color: var(--report-color-start, #0066CC);
}
.report-content .alert.alert-info {
    background: rgba(0,102,204,0.04);
    border: 1px solid rgba(0,102,204,0.15);
    border-radius: 8px;
    color: #1E293B;
}

/* QFC layer styling */
.report-content .fatigue-layer-header td {
    padding: 8px 16px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white !important;
}

/* Fatigue KPI cards equal height */
#fatigue-summary {
    align-items: stretch !important;
}
#fatigue-summary > div {
    display: flex;
}
#fatigue-summary .card {
    width: 100%;
}

/* Fatigue row colors — softer tints */
.report-content .fatigue-param-row.relevant-positive {
    background-color: rgba(16,185,129,0.08) !important;
    border-left: 3px solid #10B981 !important;
}
.report-content .fatigue-param-row.relevant-negative {
    background-color: rgba(220,38,38,0.06) !important;
    border-left: 3px solid #DC2626 !important;
}
.report-content .fatigue-param-row.important {
    background-color: rgba(245,158,11,0.08) !important;
    border-left: 3px solid #F59E0B !important;
}
.report-content .fatigue-layer-description td {
    padding: 6px 16px !important;
    font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════
   15. TAB NAVIGATION — match mockup underline style
   ═══════════════════════════════════════════ */
.report-tabs {
    background: #FFFFFF !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    margin-bottom: 24px !important;
}

/* ═══════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content {
    background: transparent !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .report-content .card {
    background: #1e1e1e !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .report-content .card .card-body {
    background: transparent !important;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .report-content .table th,
[data-bs-theme="dark"] .report-content .table thead th,
[data-bs-theme="dark"] .report-content .table thead.table-report th,
[data-bs-theme="dark"] .report-content .table thead.table-dark th {
    color: #94a3b8 !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
}
[data-bs-theme="dark"] .report-content .table td {
    color: #94a3b8;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] .report-content .table td:first-child {
    color: #e2e8f0;
}

/* Dark KPI cards */
[data-bs-theme="dark"] .report-content .energetic-kpis .card,
[data-bs-theme="dark"] .report-content #fatigue-summary .card,
[data-bs-theme="dark"] .report-content .kpi-card,
[data-bs-theme="dark"] .report-content .interval-summary-item,
[data-bs-theme="dark"] .report-content .summary-stat .card,
[data-bs-theme="dark"] .report-content .card.text-center {
    background: #1e1e1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .energetic-kpis .card h2,
[data-bs-theme="dark"] .report-content #fatigue-summary .card h4,
[data-bs-theme="dark"] .report-content #fatigue-summary .card h5 {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .energetic-kpis .card small,
[data-bs-theme="dark"] .report-content #fatigue-summary .card small {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .help-toggle-btn {
    box-shadow: 0 2px 6px rgba(0,102,204,0.4);
}
[data-bs-theme="dark"] .help-toggle-content {
    background: rgba(30,30,30,0.95) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .help-toggle-content strong {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .coaching-highlight {
    background: linear-gradient(135deg, rgba(0,102,204,0.08), rgba(0,102,204,0.12)) !important;
    border-color: rgba(0,102,204,0.25) !important;
}
[data-bs-theme="dark"] .coaching-highlight h6 { color: #60a5fa; }
[data-bs-theme="dark"] .observation-highlight {
    background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.12)) !important;
    border-color: rgba(245,158,11,0.25) !important;
}
[data-bs-theme="dark"] .observation-highlight h6 { color: #fbbf24; }
[data-bs-theme="dark"] .report-content .card.card-accent-target,
[data-bs-theme="dark"] .report-content .card.card-accent-target .card-body {
    background: linear-gradient(135deg, rgba(0,102,204,0.06), rgba(0,102,204,0.1)) !important;
    border-color: rgba(0,102,204,0.25) !important;
}
[data-bs-theme="dark"] .report-content .card.card-accent-target .table td,
[data-bs-theme="dark"] .report-content .card.card-accent-target .table tr {
    background: transparent !important;
}
[data-bs-theme="dark"] .profile-hero.profile-hero-framed {
    background: linear-gradient(135deg, rgba(0,102,204,0.08), rgba(0,102,204,0.12)) !important;
    border-color: rgba(0,102,204,0.25) !important;
}
[data-bs-theme="dark"] .profile-hero-framed .profile-name { color: #60a5fa !important; }
[data-bs-theme="dark"] .profile-hero-framed .profile-description { color: #94a3b8 !important; }

[data-bs-theme="dark"] .advice-section-green { background: rgba(16,185,129,0.06); border-left-color: #34d058; }
[data-bs-theme="dark"] .advice-section-green h6 { color: #4ade80 !important; }
[data-bs-theme="dark"] .advice-section-blue { background: rgba(0,102,204,0.06); border-left-color: #3b82f6; }
[data-bs-theme="dark"] .advice-section-blue h6 { color: #60a5fa !important; }
[data-bs-theme="dark"] .advice-section-orange { background: rgba(245,158,11,0.06); border-left-color: #f59e0b; }
[data-bs-theme="dark"] .advice-section-orange h6 { color: #fbbf24 !important; }
[data-bs-theme="dark"] .advice-section-red { background: rgba(220,38,38,0.06); border-left-color: #ef4444; }
[data-bs-theme="dark"] .advice-section-red h6 { color: #f87171 !important; }

[data-bs-theme="dark"] .report-content .card.border-danger { border-color: rgba(220,38,38,0.15) !important; }
[data-bs-theme="dark"] .report-content .card-header.bg-danger { background: rgba(220,38,38,0.08) !important; }
[data-bs-theme="dark"] .report-content .card-header.bg-danger h5,
[data-bs-theme="dark"] .report-content .card-header.bg-danger i { color: #f87171 !important; }
[data-bs-theme="dark"] .report-content .card.border-danger .card-body.bg-light { background: rgba(220,38,38,0.04) !important; }
[data-bs-theme="dark"] .report-content .card.border-warning { border-color: rgba(245,158,11,0.15) !important; }
[data-bs-theme="dark"] .report-content .card-header.bg-warning { background: rgba(245,158,11,0.08) !important; }
[data-bs-theme="dark"] .report-content .card-header.bg-warning h5,
[data-bs-theme="dark"] .report-content .card-header.bg-warning i { color: #fbbf24 !important; }
[data-bs-theme="dark"] .report-content .card.border-warning .card-body.bg-light { background: rgba(245,158,11,0.04) !important; }

[data-bs-theme="dark"] .report-content .alert.alert-success {
    background: rgba(0,102,204,0.08) !important;
    border-color: rgba(0,102,204,0.2) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .alert.alert-success h6 { color: #60a5fa; }
[data-bs-theme="dark"] .report-content .alert.alert-info {
    background: rgba(0,102,204,0.06) !important;
    border-color: rgba(0,102,204,0.15) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .alert.alert-danger {
    background: rgba(220,38,38,0.1) !important;
    border-color: rgba(220,38,38,0.25) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .alert.alert-danger strong,
[data-bs-theme="dark"] .report-content .alert.alert-danger i { color: #f87171; }
[data-bs-theme="dark"] .report-content .alert.alert-warning {
    background: rgba(245,158,11,0.1) !important;
    border-color: rgba(245,158,11,0.25) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .report-content .alert.alert-warning strong,
[data-bs-theme="dark"] .report-content .alert.alert-warning i { color: #fbbf24; }
[data-bs-theme="dark"] .report-content .advice-section {
    background: rgba(255,255,255,0.03) !important;
}
[data-bs-theme="dark"] .report-content .advice-section p,
[data-bs-theme="dark"] .report-content .advice-section span,
[data-bs-theme="dark"] .report-content .advice-section small,
[data-bs-theme="dark"] .report-content .advice-section strong,
[data-bs-theme="dark"] .report-content .advice-section li {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .report-tabs {
    background: var(--bs-card-bg, #1e1e1e) !important;
}

/* --- Challenge cards (consistency page) --- */
[data-bs-theme="dark"] .challenge-card {
    background: #1e1e1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .challenge-streak {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .challenge-metric,
[data-bs-theme="dark"] .challenge-label,
[data-bs-theme="dark"] .challenge-details,
[data-bs-theme="dark"] .challenge-location {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .challenge-summary {
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.2) !important;
    color: #e2e8f0 !important;
}

/* --- Filtering blok (bg-light) --- */
[data-bs-theme="dark"] .report-content .bg-light,
[data-bs-theme="dark"] .report-content .p-3.bg-light {
    background: rgba(255,255,255,0.04) !important;
    color: #e2e8f0 !important;
}

/* --- QFC/fatigue table row backgrounds --- */
[data-bs-theme="dark"] .report-content .fatigue-param-row[style*="background-color: #d4edda"] {
    background-color: rgba(16,185,129,0.1) !important;
}
[data-bs-theme="dark"] .report-content .fatigue-param-row[style*="background-color: #f8d7da"] {
    background-color: rgba(220,38,38,0.1) !important;
}
[data-bs-theme="dark"] .report-content .fatigue-param-row[style*="background-color: #fff3cd"] {
    background-color: rgba(245,158,11,0.1) !important;
}
[data-bs-theme="dark"] .report-content tr[style*="background-color: #d4edda"] {
    background-color: rgba(16,185,129,0.1) !important;
}
[data-bs-theme="dark"] .report-content tr[style*="background-color: #f8d7da"] {
    background-color: rgba(220,38,38,0.1) !important;
}
[data-bs-theme="dark"] .report-content tr[style*="background-color: #fff3cd"] {
    background-color: rgba(245,158,11,0.1) !important;
}

/* --- Fatigue layer headers --- */
[data-bs-theme="dark"] .report-content .fatigue-layer-header td {
    color: white !important;
}
[data-bs-theme="dark"] .report-content .fatigue-layer-description td {
    color: #94a3b8 !important;
    background: rgba(255,255,255,0.03) !important;
}

/* --- General text in report-content --- */
[data-bs-theme="dark"] .report-content p,
[data-bs-theme="dark"] .report-content span,
[data-bs-theme="dark"] .report-content small,
[data-bs-theme="dark"] .report-content label,
[data-bs-theme="dark"] .report-content li {
    color: #c8d0da;
}
[data-bs-theme="dark"] .report-content strong {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .report-content .text-muted {
    color: #94a3b8 !important;
}

/* --- Block cards (R2/R3 per-block) --- */
[data-bs-theme="dark"] .block-card {
    border-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .block-card-hdr {
    background: rgba(255,255,255,0.04) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .block-card-body {
    background: #1e1e1e !important;
}

/* --- Param cards (per-block 5-parameter grid) --- */
[data-bs-theme="dark"] .param-card,
[data-bs-theme="dark"] .param-item {
    background: #1e1e1e !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}

/* --- Back button in header --- */
[data-bs-theme="dark"] .btn-header,
[data-bs-theme="dark"] .btn-header-primary {
    border-color: rgba(255,255,255,0.3) !important;
    color: white !important;
    background: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .btn-header:hover,
[data-bs-theme="dark"] .btn-header-primary:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* --- Badges readable in dark mode --- */
[data-bs-theme="dark"] .report-content .badge.bg-success {
    background-color: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-danger {
    background-color: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-warning {
    background-color: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-info {
    background-color: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .report-content .badge-ok {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content .badge-warn {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .report-content .badge-bad {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}
[data-bs-theme="dark"] .report-content .badge-info {
    background: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .report-content .block-type-work {
    background: rgba(25,135,84,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content .block-type-rest {
    background: rgba(255,255,255,0.06) !important;
    color: #94a3b8 !important;
}

/* --- R3 rust rijen (opacity 0.6 is onleesbaar in dark) --- */
[data-bs-theme="dark"] .report-content tr[style*="opacity: 0.6"],
[data-bs-theme="dark"] .report-content tr[style*="opacity:0.6"] {
    opacity: 0.75 !important;
}

/* --- QFC fatigue rows — override inline background-color more aggressively --- */
[data-bs-theme="dark"] .report-content .fatigue-param-row.relevant-positive,
[data-bs-theme="dark"] .report-content tr.relevant-positive {
    background-color: rgba(16,185,129,0.1) !important;
    border-left-color: #10B981 !important;
}
[data-bs-theme="dark"] .report-content .fatigue-param-row.relevant-negative,
[data-bs-theme="dark"] .report-content tr.relevant-negative {
    background-color: rgba(220,38,38,0.1) !important;
    border-left-color: #DC2626 !important;
}
[data-bs-theme="dark"] .report-content .fatigue-param-row.important,
[data-bs-theme="dark"] .report-content tr.fatigue-param-row.important {
    background-color: rgba(245,158,11,0.1) !important;
    border-left-color: #F59E0B !important;
}
[data-bs-theme="dark"] .report-content .fatigue-param-row.not-relevant,
[data-bs-theme="dark"] .report-content tr.not-relevant {
    opacity: 0.5 !important;
}

/* --- Tabel header rij (eerste rij soms wit/lichtgrijs) --- */
[data-bs-theme="dark"] .report-content .table > thead > tr > th,
[data-bs-theme="dark"] .report-content .table > :not(caption) > * > th {
    background: transparent !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* --- FVL (first vs last) knop/element --- */
[data-bs-theme="dark"] .fvl-bar-center {
    background: rgba(255,255,255,0.15) !important;
}
[data-bs-theme="dark"] .fvl-param {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .fvl-pct {
    color: #e2e8f0 !important;
}

/* --- Tol buttons (consistency tolerance selector) --- */
[data-bs-theme="dark"] .tol-btn {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .tol-btn.tol-active {
    background: #089ba6 !important;
    color: white !important;
    border-color: #089ba6 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — table header rows (white/light grey → dark)
   These have inline color-mix() backgrounds or class-based bg.
   Must override ALL variants aggressively.
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content thead th,
[data-bs-theme="dark"] .report-content .table thead th,
[data-bs-theme="dark"] .report-content .table > thead > tr > th,
[data-bs-theme="dark"] .report-content thead.table-report th,
[data-bs-theme="dark"] .report-content thead.table-dark th,
[data-bs-theme="dark"] #target-values-table .table thead th,
[data-bs-theme="dark"] #reference-values-content .table thead th,
[data-bs-theme="dark"] .report-content .mobile-sticky-col thead th {
    background: rgba(255,255,255,0.04) !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — ALL badges readable (dark bg + bright text)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content .badge,
[data-bs-theme="dark"] .report-content [class*="badge"] {
    border: none !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-success,
[data-bs-theme="dark"] .report-content .badge-ok {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-danger,
[data-bs-theme="dark"] .report-content .badge-bad {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-warning,
[data-bs-theme="dark"] .report-content .badge-warn {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-info,
[data-bs-theme="dark"] .report-content .badge-info {
    background: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-secondary {
    background: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .report-content .badge.bg-dark {
    background: rgba(255,255,255,0.1) !important;
    color: #e2e8f0 !important;
}
/* Block type badges */
[data-bs-theme="dark"] .report-content .block-type-work {
    background: rgba(25,135,84,0.25) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content .block-type-rest {
    background: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
}
/* Severity/IOF badges in block headers */
[data-bs-theme="dark"] .report-content .badge[style*="background"],
[data-bs-theme="dark"] .report-content span[style*="background-color: #d4edda"],
[data-bs-theme="dark"] .report-content span[style*="background: #d4edda"] {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .report-content span[style*="background-color: #ffc107"],
[data-bs-theme="dark"] .report-content span[style*="background: #ffc107"] {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Chart.js text (axes, legends, tooltips)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content canvas {
    filter: none;
}
/* Chart container background */
[data-bs-theme="dark"] .report-content .chart-container-sq {
    background: transparent;
}

/* ═══════════════════════════════════════════
   DARK MODE — QFC fatigue analysis (inline bg colors)
   Override via parent + child, not just attribute selectors
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content .fatigue-param-row td,
[data-bs-theme="dark"] .report-content .fatigue-param-row {
    color: #c8d0da;
}
[data-bs-theme="dark"] .report-content tr[style*="border-left: 3px solid #28a745"] {
    background-color: rgba(16,185,129,0.1) !important;
}
[data-bs-theme="dark"] .report-content tr[style*="border-left: 3px solid #dc3545"] {
    background-color: rgba(220,38,38,0.1) !important;
}
[data-bs-theme="dark"] .report-content tr[style*="border-left: 3px solid #ffc107"] {
    background-color: rgba(245,158,11,0.1) !important;
}
/* Stability badges in cross-block */
[data-bs-theme="dark"] .report-content span[style*="background: rgba(40, 167, 69"],
[data-bs-theme="dark"] .report-content span[style*="background-color: rgba(40, 167, 69"] {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Fade hero
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .fade-hero {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] .fade-hero-name {
    color: var(--report-color-start) !important;
}
[data-bs-theme="dark"] .fade-hero-desc,
[data-bs-theme="dark"] .fade-hero-label {
    color: #94a3b8 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Degradation bars track
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .deg-bar-track,
[data-bs-theme="dark"] .report-content .param-fade-bar-track {
    background: rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Streefwaarden card accent (target card)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content .card.card-accent-target .card-header-gradient ~ .card-body {
    background: rgba(0,102,204,0.06) !important;
}

/* ═══════════════════════════════════════════
   NUCLEAR DARK MODE OVERRIDES
   No .report-content prefix — catches everything
   ═══════════════════════════════════════════ */

/* Force ALL table headers dark */
[data-bs-theme="dark"] thead th {
    background: rgba(255,255,255,0.04) !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
[data-bs-theme="dark"] thead {
    background: transparent !important;
}

/* Force ALL badges readable */
[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
    border: none !important;
}
[data-bs-theme="dark"] .badge.bg-danger {
    background-color: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
    border: none !important;
}
[data-bs-theme="dark"] .badge.bg-warning {
    background-color: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
    border: none !important;
}
[data-bs-theme="dark"] .badge.bg-info {
    background-color: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
    border: none !important;
}
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
}

/* Force inline-styled rows dark (QFC fatigue) */
[data-bs-theme="dark"] tr[style*="background-color: #d4edda"],
[data-bs-theme="dark"] tr[style*="background-color:#d4edda"] {
    background-color: rgba(16,185,129,0.1) !important;
}
[data-bs-theme="dark"] tr[style*="background-color: #f8d7da"],
[data-bs-theme="dark"] tr[style*="background-color:#f8d7da"] {
    background-color: rgba(220,38,38,0.1) !important;
}
[data-bs-theme="dark"] tr[style*="background-color: #fff3cd"],
[data-bs-theme="dark"] tr[style*="background-color:#fff3cd"] {
    background-color: rgba(245,158,11,0.1) !important;
}
[data-bs-theme="dark"] tr[style*="background: linear-gradient(135deg, #667eea"],
[data-bs-theme="dark"] tr[style*="background: linear-gradient(135deg, #f093fb"],
[data-bs-theme="dark"] tr[style*="background: linear-gradient(135deg, #4facfe"] {
    /* Layer headers keep their gradient but text must be white */
}
[data-bs-theme="dark"] tr[style*="background: #f8f9fa"] {
    background: rgba(255,255,255,0.03) !important;
}

/* Force inline-styled badges/spans dark (scoped to report-content to avoid overriding selfcoach workout badges) */
[data-bs-theme="dark"] .report-content span.badge[style*="background"],
[data-bs-theme="dark"] span[style*="background-color: #d4edda"],
[data-bs-theme="dark"] span[style*="background: #d4edda"],
[data-bs-theme="dark"] span[style*="background-color: #e2e3e5"],
[data-bs-theme="dark"] span[style*="background: #e2e3e5"] {
    background: rgba(255,255,255,0.08) !important;
    color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — inline-styled badges (catch ALL inline bg colors)
   These badges use style="background: #xxx" not CSS classes
   ═══════════════════════════════════════════ */

/* Green inline badges */
[data-bs-theme="dark"] span[style*="background-color: #198754"],
[data-bs-theme="dark"] span[style*="background: #198754"],
[data-bs-theme="dark"] span[style*="background-color: #28a745"],
[data-bs-theme="dark"] span[style*="background: #28a745"],
[data-bs-theme="dark"] span[style*="background-color: #0d6832"],
[data-bs-theme="dark"] span[style*="background: #0d6832"],
[data-bs-theme="dark"] .badge[style*="#198754"],
[data-bs-theme="dark"] .badge[style*="#28a745"],
[data-bs-theme="dark"] .badge.fs-6.bg-success {
    background-color: rgba(16,185,129,0.2) !important;
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}

/* Red inline badges */
[data-bs-theme="dark"] span[style*="background-color: #dc3545"],
[data-bs-theme="dark"] span[style*="background: #dc3545"],
[data-bs-theme="dark"] span[style*="background: rgb(220, 53, 69)"],
[data-bs-theme="dark"] .badge[style*="#dc3545"],
[data-bs-theme="dark"] .badge.fs-6.bg-danger {
    background-color: rgba(220,38,38,0.2) !important;
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}

/* Yellow/warning inline badges */
[data-bs-theme="dark"] span[style*="background-color: #ffc107"],
[data-bs-theme="dark"] span[style*="background: #ffc107"],
[data-bs-theme="dark"] .badge[style*="#ffc107"],
[data-bs-theme="dark"] .badge.fs-6.bg-warning {
    background-color: rgba(245,158,11,0.2) !important;
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}

/* IOF badge (light pink/red bg) */
[data-bs-theme="dark"] span[style*="background-color: #f8d7da"],
[data-bs-theme="dark"] span[style*="background: #f8d7da"],
[data-bs-theme="dark"] span[style*="background-color: #fff3cd"],
[data-bs-theme="dark"] span[style*="background: #fff3cd"] {
    background: rgba(245,158,11,0.15) !important;
    color: #fbbf24 !important;
}

/* Profiel stability badge */
[data-bs-theme="dark"] span[style*="background-color: #d4edda"],
[data-bs-theme="dark"] span[style*="background: #d4edda"] {
    background: rgba(16,185,129,0.15) !important;
    color: #4ade80 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — R1 Secundaire Focus card (dark text on dark bg)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .report-content .card.border-warning .text-dark,
[data-bs-theme="dark"] .report-content .text-dark {
    color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — white bg elements that should be dark
   (FVL comparison, peak power summary, toggle areas)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .fvl-row,
[data-bs-theme="dark"] [class*="fvl-"] {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .fvl-bar-wrap {
    background: rgba(255,255,255,0.06) !important;
}
[data-bs-theme="dark"] div[style*="background: #f8f9fa"],
[data-bs-theme="dark"] div[style*="background-color: #f8f9fa"],
[data-bs-theme="dark"] div[style*="background: #f1f5f9"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"] {
    background: rgba(255,255,255,0.04) !important;
    color: #e2e8f0 !important;
}

/* Peak power daling summary bar */
[data-bs-theme="dark"] .peak-power-block {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .peak-power-val {
    color: #c8d0da !important;
}
[data-bs-theme="dark"] .peak-power-label {
    color: #94a3b8 !important;
}

/* Halftime comparison elements */
[data-bs-theme="dark"] .halftime-compare {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .halftime-label {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .halftime-value {
    color: #e2e8f0;
}

/* ═══════════════════════════════════════════
   DARK MODE — degradation bar track backgrounds
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .param-fade-bar-track,
[data-bs-theme="dark"] .param-fade-row .param-fade-bar-track,
[data-bs-theme="dark"] [class*="bar-track"] {
    background: rgba(255,255,255,0.06) !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Custom badge classes (R2/R3 per-page CSS)
   These use hardcoded light bg colors in extra_css blocks
   ═══════════════════════════════════════════ */

/* IOF badges (per_block) */
[data-bs-theme="dark"] .iof-high {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .iof-medium {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .iof-low {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}

/* Stability badges (cross_block) */
[data-bs-theme="dark"] .stability-stable {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .stability-shift {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}

/* Severity badges (degradatie) */
[data-bs-theme="dark"] .severity-mild {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .severity-moderate {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .severity-severe {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}

/* Power distribution pattern badges (per_block) */
[data-bs-theme="dark"] .pd-front_loaded {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .pd-even {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .pd-back_loaded {
    background: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
}

/* Warning banner (per_block) */
[data-bs-theme="dark"] .warning-banner {
    background: rgba(245,158,11,0.1) !important;
    border-color: rgba(245,158,11,0.3) !important;
    color: #fbbf24 !important;
}

/* Catch-all: any element with hardcoded light green/yellow/red bg */
[data-bs-theme="dark"] [style*="background: #d4edda"],
[data-bs-theme="dark"] [style*="background-color: #d4edda"] {
    background: rgba(16,185,129,0.15) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] [style*="background: #fff3cd"],
[data-bs-theme="dark"] [style*="background-color: #fff3cd"] {
    background: rgba(245,158,11,0.15) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] [style*="background: #f8d7da"],
[data-bs-theme="dark"] [style*="background-color: #f8d7da"] {
    background: rgba(220,38,38,0.15) !important;
    color: #f87171 !important;
}
[data-bs-theme="dark"] [style*="background: #cfe2ff"],
[data-bs-theme="dark"] [style*="background-color: #cfe2ff"] {
    background: rgba(0,102,204,0.15) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] [style*="background: #e2e3e5"],
[data-bs-theme="dark"] [style*="background-color: #e2e3e5"] {
    background: rgba(255,255,255,0.08) !important;
    color: #94a3b8 !important;
}

/* Degradatie per parameter — param-fade toggle/track elements */
[data-bs-theme="dark"] .param-fade-row {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .param-fade-label {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .param-fade-pct {
    color: #e2e8f0 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Reliability badges (R2/R3 per_block)
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .reliability-high {
    background: rgba(16,185,129,0.2) !important;
    color: #4ade80 !important;
}
[data-bs-theme="dark"] .reliability-medium {
    background: rgba(0,102,204,0.2) !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .reliability-low {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}
[data-bs-theme="dark"] .reliability-very_low {
    background: rgba(220,38,38,0.2) !important;
    color: #f87171 !important;
}

/* ═══════════════════════════════════════════
   DARK MODE — Degradatie param-fade bar track (R3)
   #e9ecef bg → dark
   ═══════════════════════════════════════════ */
[data-bs-theme="dark"] .param-fade-bar {
    background: rgba(255,255,255,0.08) !important;
}
[data-bs-theme="dark"] .param-fade-name {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .param-fade-value {
    color: #e2e8f0 !important;
}

/* R2 degradation bar track (#e9ecef) */
[data-bs-theme="dark"] .report-content [style*="background: #e9ecef"],
[data-bs-theme="dark"] .report-content [style*="background-color: #e9ecef"],
[data-bs-theme="dark"] [style*="background: #e9ecef"] {
    background: rgba(255,255,255,0.08) !important;
}

/* Breakdown card backgrounds */
[data-bs-theme="dark"] .breakdown-card {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .breakdown-alert {
    background: rgba(220,38,38,0.08) !important;
    border-color: rgba(220,38,38,0.2) !important;
}
[data-bs-theme="dark"] .breakdown-ok {
    background: rgba(16,185,129,0.08) !important;
    border-color: rgba(16,185,129,0.2) !important;
}

/* ═══════════════════════════════════════════
   MOBILE — compact header back button
   ═══════════════════════════════════════════ */
.compact-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s;
}
.compact-back:hover {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* ═══════════════════════════════════════════
   MOBILE — rapporten overzicht kaart layout fix
   ═══════════════════════════════════════════ */
@media (max-width: 576px) {
    .rc-expanded {
        grid-template-columns: 1fr !important;
    }
    .rc-profile-inline {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
    }
    .rc-actions {
        justify-content: center !important;
    }
}

/* ═══════════════════════════════════════════
   MOBILE REPORT TAB DROPDOWN
   Hidden on desktop, shown at ≤768px
   ═══════════════════════════════════════════ */
.report-tab-mobile { display: none; }
.report-tab-select {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--color-border, #E2E8F0); border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--card-bg, #fff); color: var(--color-text, #1E293B);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
[data-bs-theme="dark"] .report-tab-select {
  background: var(--card-bg, #1e1e1e); color: #e2e8f0;
  border-color: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
  .report-tab-mobile { display: block; }
  .report-tabs-nav { display: none !important; }
}