/* Temaskift-knap */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.9rem;
    margin-left: auto;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #2c3e50;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-toggle-floating {
    position: fixed;
    bottom: max(1rem, env(safe-area-inset-bottom));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 200;
    margin-left: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .theme-toggle {
    background: #334155;
    border-color: #475569;
    color: #f1f5f9;
}

/* —— Artikler og program-sider —— */
html[data-theme="dark"] {
    --primary-color: #e2e8f0;
    --secondary-color: #60a5fa;
    --dark-color: #f8fafc;
}

html[data-theme="dark"] body {
    background-color: #0f1419 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] label,
html[data-theme="dark"] .intro-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .intro-text,
html[data-theme="dark"] .highlight,
html[data-theme="dark"] .tips,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .coach-note {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] strong,
html[data-theme="dark"] b {
    color: #ffffff !important;
}

html[data-theme="dark"] header {
    background: linear-gradient(to right, #1e3a5f, #2563eb) !important;
    color: #fff !important;
    border-bottom-color: #ef4444 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: #ffffff !important;
}

html[data-theme="dark"] h2 {
    border-bottom-color: #3b82f6;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .intro-card,
html[data-theme="dark"] .interactive-zone,
html[data-theme="dark"] .program-section,
html[data-theme="dark"] .program-overview,
html[data-theme="dark"] .intensity-guide,
html[data-theme="dark"] .week-card {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .card h3,
html[data-theme="dark"] .intro-card h2 {
    border-bottom-color: #3b82f6;
}

html[data-theme="dark"] .training-day {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .week-header {
    border-bottom-color: #334155 !important;
}

/* Side-CSS sætter ofte #666/#777 på tekst i hvide bokse */
html[data-theme="dark"] .intro-card :is(p, li, span, div, td, th, label, em, small),
html[data-theme="dark"] .card :is(p, li, span, div, td, th, label, em, small),
html[data-theme="dark"] .week-card :is(p, li, span, div, td, th, label, em, small),
html[data-theme="dark"] .interactive-zone :is(p, li, span, div),
html[data-theme="dark"] .program-section :is(p, li, span, div),
html[data-theme="dark"] .program-overview :is(p, li, span, div),
html[data-theme="dark"] .program-description,
html[data-theme="dark"] .training-description,
html[data-theme="dark"] .pace-overview-intro,
html[data-theme="dark"] .zone-guide-note {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .zone-guide-note {
    background-color: #1e3a5f !important;
    border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] .pace-overview-table {
    background-color: #1e293b !important;
}

html[data-theme="dark"] .pace-overview-caption,
html[data-theme="dark"] .pace-overview-table thead th {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .pace-overview-table tbody th {
    color: #f1f5f9 !important;
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .pace-overview-table tbody td {
    color: #f8fafc !important;
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .pace-overview-row--goal th,
html[data-theme="dark"] .pace-overview-row--goal td {
    background-color: #14532d !important;
}

html[data-theme="dark"] .pace-overview-row--program th,
html[data-theme="dark"] .pace-overview-row--program td {
    background-color: #431407 !important;
}

html[data-theme="dark"] .intro-card strong,
html[data-theme="dark"] .card strong,
html[data-theme="dark"] .week-card strong,
html[data-theme="dark"] .coach-note strong {
    color: #ffffff !important;
}

/* Inline hvide / gule bokse i artikler */
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background-color:white"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] [style*="background-color: white"] :is(p, li, span, div, strong, em),
html[data-theme="dark"] [style*="background-color:white"] :is(p, li, span, div, strong, em) {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] [style*="background-color: #fff9e6"],
html[data-theme="dark"] [style*="background-color:#fff9e6"] {
    background-color: #422006 !important;
    color: #fef3c7 !important;
}

html[data-theme="dark"] [style*="background-color: #eaeef2"],
html[data-theme="dark"] [style*="background-color:#eaeef2"],
html[data-theme="dark"] [style*="background-color: var(--light-color)"],
html[data-theme="dark"] [style*="background-color:var(--light-color)"],
html[data-theme="dark"] [style*="background-color: #f0f7ff"],
html[data-theme="dark"] [style*="background-color:#f0f7ff"],
html[data-theme="dark"] [style*="background-color: #f9f9e0"],
html[data-theme="dark"] [style*="background-color:#f9f9e0"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Løbeteori-artikler: øvelser, teknik, ernæring, tabeller */
html[data-theme="dark"] :is(
    .exercise-card,
    .technique-element,
    .pro-con,
    .competition-card,
    .carb-item,
    .science-box,
    .exercise-box,
    .stat-item,
    .zone-info,
    .distance-btn
) {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .coach-note {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] .warning-box {
    background-color: #450a0a !important;
    color: #fecaca !important;
    border-left-color: #ef4444 !important;
}

html[data-theme="dark"] .caffeine-box {
    background-color: #3b0764 !important;
    color: #e9d5ff !important;
    border-left-color: #a855f7 !important;
}

html[data-theme="dark"] .vitamin-box {
    background-color: #0c4a6e !important;
    color: #e0f2fe !important;
    border-left-color: #38bdf8 !important;
}

html[data-theme="dark"] .creatine-box {
    background-color: #14532d !important;
    color: #dcfce7 !important;
    border-left-color: #4ade80 !important;
}

html[data-theme="dark"] :is(
    .exercise-card,
    .technique-element,
    .pro-con,
    .competition-card,
    .carb-item,
    .science-box,
    .exercise-box,
    .stat-item,
    .coach-note,
    .warning-box,
    .caffeine-box,
    .vitamin-box,
    .creatine-box,
    .zone-info
) :is(p, li, span, div, td, th, label, em, small) {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .energy-table th,
html[data-theme="dark"] .table th {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .energy-table td,
html[data-theme="dark"] .table td {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .energy-table tr:nth-child(even) td,
html[data-theme="dark"] .table tr:nth-child(even) td {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .energy-table-wrapper {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .stat-label {
    color: #cbd5e1 !important;
}

/* Basis træning (basic.html, begynder.html) */
html[data-theme="dark"] .coach-card,
html[data-theme="dark"] .muscle-group {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .training-section h2 {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .training-section.marathon-section h2 {
    background-color: #2e1065 !important;
    border-left-color: #a855f7 !important;
}

html[data-theme="dark"] .training-section.outdoor-section h2 {
    background-color: #134e4a !important;
    border-left-color: #2dd4bf !important;
}

html[data-theme="dark"] .training-section.strength-section h2 {
    background-color: #422006 !important;
    border-left-color: #f59e0b !important;
}

html[data-theme="dark"] .card .training-day {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .highlight.marathon {
    background-color: #2e1065 !important;
    color: #e9d5ff !important;
    border-left-color: #a855f7 !important;
}

html[data-theme="dark"] .highlight.extra-day,
html[data-theme="dark"] .highlight.strength {
    background-color: #14532d !important;
    color: #dcfce7 !important;
    border-left-color: #4ade80 !important;
}

html[data-theme="dark"] .highlight.info {
    background-color: #1e3a5f !important;
    color: #e0f2fe !important;
    border-left-color: #3b82f6 !important;
}

html[data-theme="dark"] .marathon-features {
    background-color: #2e1065 !important;
    color: #e9d5ff !important;
    border-left-color: #a855f7 !important;
}

html[data-theme="dark"] .extra-day-features {
    background-color: #14532d !important;
    color: #dcfce7 !important;
    border-left-color: #4ade80 !important;
}

html[data-theme="dark"] .recruitment-box {
    background-color: #134e4a !important;
    color: #ccfbf1 !important;
    border-color: #2dd4bf !important;
}

html[data-theme="dark"] .image-fallback {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .self-training-note {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .distance-options {
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .marathon-features h4 {
    color: #e9d5ff !important;
}

html[data-theme="dark"] .extra-day-features h4 {
    color: #86efac !important;
}

html[data-theme="dark"] .muscle-group h4 {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .week-card h4 {
    color: #5eead4 !important;
}

html[data-theme="dark"] :is(
    .coach-card,
    .muscle-group,
    .marathon-features,
    .extra-day-features,
    .recruitment-box,
    .card .training-day
) :is(p, li, span, div, td, th, label, em, small) {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .distance-table td {
    background-color: #1e293b !important;
}

html[data-theme="dark"] .distance-table tr:hover td {
    background-color: #334155 !important;
}

html[data-theme="dark"] .zone-table tr:nth-child(even) td {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .zone-table tr:hover td {
    background-color: #334155 !important;
}

html[data-theme="dark"] .route-table tr:nth-child(even) td {
    background-color: #0f172a !important;
}

html[data-theme="dark"] .route-table tr:hover td {
    background-color: #334155 !important;
}

html[data-theme="dark"] .intro-text,
html[data-theme="dark"] .highlight,
html[data-theme="dark"] .info-box {
    background-color: #1e3a5f !important;
    color: #f1f5f9 !important;
    border-left-color: #3b82f6;
}

html[data-theme="dark"] .tips {
    background-color: #422006 !important;
    color: #fef3c7 !important;
    border-left-color: #f59e0b !important;
}

html[data-theme="dark"] .footer {
    color: #cbd5e1 !important;
    border-top-color: #334155 !important;
}

html[data-theme="dark"] .subtitle {
    color: #f1f5f9 !important;
    opacity: 1 !important;
}

html[data-theme="dark"] .portal-nav.portal-nav-sticky {
    background: rgba(15, 20, 25, 0.95) !important;
    border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .portal-nav a {
    background: #1e293b;
    border-color: #475569;
    color: #f8fafc;
}

html[data-theme="dark"] .portal-nav a:hover {
    background: #334155;
}

html[data-theme="dark"] .portal-nav a.portal-nav-home {
    background: linear-gradient(135deg, #2563eb, #1e3a5f);
    color: #fff;
}

html[data-theme="dark"] .table-scroll {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .route-table th,
html[data-theme="dark"] .distance-table th,
html[data-theme="dark"] .zone-table th,
html[data-theme="dark"] .time-table th {
    background-color: #1e3a5f !important;
    color: #fff !important;
}

html[data-theme="dark"] .route-table td,
html[data-theme="dark"] .distance-table td,
html[data-theme="dark"] .zone-table td,
html[data-theme="dark"] .time-table td {
    border-color: #334155;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .route-table tr:nth-child(even),
html[data-theme="dark"] .distance-table tr:nth-child(even),
html[data-theme="dark"] .zone-table tr:nth-child(even),
html[data-theme="dark"] .time-table tr:nth-child(even) {
    background-color: #1e293b;
}

html[data-theme="dark"] .route-table tr:hover,
html[data-theme="dark"] .distance-table tr:hover {
    background-color: #334155 !important;
}

html[data-theme="dark"] .time-table-container {
    background: transparent;
}

html[data-theme="dark"] .legend {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* Zone-kort (mobil) – artikler med .zone-1 … .zone-5 */
html[data-theme="dark"] .zone-card.zone-1 { background-color: #14532d !important; }
html[data-theme="dark"] .zone-card.zone-2 { background-color: #166534 !important; }
html[data-theme="dark"] .zone-card.zone-3 { background-color: #854d0e !important; }
html[data-theme="dark"] .zone-card.zone-4 { background-color: #9f1239 !important; }
html[data-theme="dark"] .zone-card.zone-5 { background-color: #7f1d1d !important; }

html[data-theme="dark"] .zone-card,
html[data-theme="dark"] .zone-info,
html[data-theme="dark"] .zone-btn {
    background-color: #1e293b !important;
    border-color: #475569;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .zone-card.zone-1,
html[data-theme="dark"] .zone-card.zone-2,
html[data-theme="dark"] .zone-card.zone-3,
html[data-theme="dark"] .zone-card.zone-4,
html[data-theme="dark"] .zone-card.zone-5,
html[data-theme="dark"] .zone-card :is(p, li, span, div) {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .zone-btn.active {
    background-color: #2563eb;
    color: #fff;
}

/* —— Portal-forsider (index, index2, index3) —— */
html[data-theme="dark"][data-page="hub"] body {
    background: linear-gradient(135deg, #0d1b2a, #1b3a4b) !important;
    background-attachment: scroll !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"][data-page="hub"] body::before,
html[data-theme="dark"][data-page="hub"] body::after {
    display: none !important;
}

html[data-theme="dark"][data-page="hub"] .container {
    background-color: rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"][data-page="hub"] .instructions {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"][data-page="hub"] .nav-button {
    background: rgba(30, 41, 59, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
}

html[data-theme="dark"][data-page="hub"] .button-title {
    color: #ffffff !important;
}

html[data-theme="dark"][data-page="hub"] .button-description {
    color: #e2e8f0 !important;
    opacity: 1 !important;
}

html[data-theme="dark"][data-page="hub"] .badge {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"][data-page="hub"] .instructions,
html[data-theme="dark"][data-page="hub"] .instructions p {
    color: #f1f5f9 !important;
}

html[data-theme="dark"][data-page="hub"] .back-link {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
}

html[data-theme="dark"][data-page="hub"] .footer {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"][data-page="hub"] .footer p {
    color: #e2e8f0 !important;
}

/* index2 / index3 farvede baggrunde */
html[data-theme="dark"][data-page="hub"].page-theory body {
    background: linear-gradient(135deg, #2a2310, #3d3018) !important;
}

html[data-theme="dark"][data-page="hub"].page-programs body {
    background: linear-gradient(135deg, #0a2e33, #145a52) !important;
}

/* —— Løbsberegner —— */
html[data-theme="dark"] .app {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] h1 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .section-title {
    color: #ffffff !important;
}

html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] .chip {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .toggle {
    background: #0f172a;
}

html[data-theme="dark"] .chip.active {
    background: #334155 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .chip:not(.active) {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .result-box,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .kadence-box,
html[data-theme="dark"] .zone-card,
html[data-theme="dark"] .status-box {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .big,
html[data-theme="dark"] .stat-value,
html[data-theme="dark"] .kadence-value {
    color: #7dd3fc !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .small,
html[data-theme="dark"] p.lead,
html[data-theme="dark"] .stat-label,
html[data-theme="dark"] .kadence-label,
html[data-theme="dark"] .field-hint,
html[data-theme="dark"] .zone-indicator,
html[data-theme="dark"] .zone {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .tab {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .tab.active {
    color: #ffffff !important;
    font-weight: 700;
}

html[data-theme="dark"] .btn.secondary {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .efficiency-calculation,
html[data-theme="dark"] .cadence-guide,
html[data-theme="dark"] .efficiency-calculation li {
    background: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .zone-name,
html[data-theme="dark"] .zone-pulse,
html[data-theme="dark"] .zone-description {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #paceVerification,
html[data-theme="dark"] #paceInfo {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .form-error {
    background: #450a0a;
    border-color: #991b1b;
    color: #fecaca;
}

html[data-theme="dark"] .share-feedback {
    color: #86efac;
}

html[data-theme="dark"] .share-feedback.error {
    color: #fca5a5;
}

/* Del-resultat */
.share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.share-feedback {
    font-size: 0.875rem;
    font-weight: 600;
    color: #27ae60;
    min-height: 1.25rem;
}

.share-feedback.error {
    color: #e74c3c;
}

#shareBtn {
    flex: 0 1 auto;
    min-width: 140px;
}