/* FitPub - 80s Aerobic Style (Static Edition) */

:root {
    /* Original neon palette — these stay as the canonical values used in dark mode
       and as the brand identity. They're still referenced everywhere via var(). */
    --neon-pink: #ff1493;
    --neon-purple: #9d00ff;
    --neon-cyan: #00ffff;
    --neon-yellow: #ffff00;
    --neon-orange: #ff6600;
    --neon-green: #39ff14;
    --neon-blue: #00d4ff;

    /* Deeper light-mode variants — same hue identity but darker and more saturated
       so they read on white surfaces without washing out. The neons were designed
       for CRT/dark backgrounds and look juvenile on white at full intensity. */
    --pink-deep: #d4107a;
    --cyan-deep: #0099a8;
    --purple-deep: #8500d4;
    --orange-deep: #d45500;
    --green-deep: #2eb812;

    /* Warm purple-tinted neutrals for light mode. Replaces pure white/gray so the
       light theme stays thematically consistent with the dark purple brand color. */
    --light-bg: #ffffff;
    --light-surface: #faf6ff;        /* very subtle purple tint */
    --light-border: #e8e0f0;         /* purple-gray, replaces #dee2e6 */
    --light-text: #1a0033;           /* dark purple, alias of --dark-color */
    --light-text-muted: #6b5a7e;     /* purple-gray */
    --light-text-hint: #8a7a9e;      /* lighter purple-gray for timestamps, labels */

    /* Semantic aliases. In light mode these resolve to the deeper variants;
       the dark-mode media query below remaps them back to the full neons.
       Calling code should prefer these semantic names over raw --neon-* so
       components automatically adapt across themes. */
    --primary-color: var(--pink-deep);
    --secondary-color: var(--cyan-deep);

    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --dark-color: #1a0033;
    --light-color: #f8f9fa;
    --accent-orange: var(--orange-deep);
    --accent-lime: var(--green-deep);
    --border-radius: 0.5rem;
}

/* Base styles
   Body uses regular Arial for readability — the Heavy "Arial Black + uppercase"
   treatment is applied only to elements that benefit from the 80s shout (headings,
   buttons, brand, badges, nav links, card headers, metric labels). Body text and
   form controls use a normal sentence-case stack so the design scales without
   visual fatigue. See SPEC-fitpub-design-refinement.md §1. */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: var(--dark-color);
    background: var(--light-bg);
}

/* Heavy tier — applied only to elements that should "shout" the 80s aesthetic. */
h1, h2, h3, h4, h5, h6,
.btn,
.navbar-brand,
.card-header,
.metric-label,
.activity-type-badge,
.race-badge,
.sect-label,
.nav-link {
    font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Regular tier — explicitly reset elements that might inherit Heavy treatment
   from a parent and need normal readable text. */
.card-body,
.timeline-date,
.empty-state-message,
.form-control,
.form-label,
.form-text,
.dropdown-item,
p,
.tl-desc,
.text-muted {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Navigation */
.navbar {
    background: linear-gradient(135deg, var(--dark-color) 0%, #2d0052 100%) !important;
    border-bottom: 2px solid var(--primary-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
    font-weight: 900;
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--neon-cyan) !important;
}

/* Map container */
.map-container {
    height: 400px;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.map-container-large {
    height: 600px;
}

/* Cards
   Subtle 1px borders by default — heavy borders are reserved for emphasis states
   like race cards. The 80s personality comes from the gradient header background,
   not from a 3px neon ring around every card. See SPEC §3. */
.card {
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    border-color: #d4c5e6;                            /* slightly brighter purple-gray */
    box-shadow: 0 4px 12px rgba(26, 0, 51, 0.08);     /* neutral lift, not a color explosion */
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-deep) 100%) !important;
    color: white !important;
    /* The Heavy treatment (font + uppercase + letter-spacing) comes from the
       global rule at the top of the file. The orange bottom border has been
       removed — the gradient is enough visual separation. */
    border-bottom: none;
}

/* Activity cards */
.activity-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--light-border);
    box-shadow: none;
}

.activity-card:hover {
    border-color: #d4c5e6;
    box-shadow: 0 4px 12px rgba(26, 0, 51, 0.08);
}

.activity-type-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    /* Heavy tier (font + uppercase + spacing) inherited from the global rule. */
    border: 1px solid;
}

/* Translucent tint badges — readable on light card surfaces without overwhelming
   them. Race badges keep the full gradient treatment because they're meant to be
   special. See SPEC §4. */
.activity-type-run {
    background: rgba(212, 16, 122, 0.10);
    color: var(--pink-deep);
    border-color: rgba(212, 16, 122, 0.30);
}

.activity-type-ride {
    background: rgba(212, 85, 0, 0.10);
    color: var(--orange-deep);
    border-color: rgba(212, 85, 0, 0.30);
}

.activity-type-hike {
    background: rgba(0, 153, 168, 0.08);
    color: var(--cyan-deep);
    border-color: rgba(0, 153, 168, 0.25);
}

/* Metrics display
   Solid surface (no gradient) with a single 3px pink left-accent stripe.
   The previous design had two competing accent colors (pink ring + orange
   left bar) plus a colored shadow — too noisy at scale. See SPEC §3 + §5. */
.metric-card {
    background: var(--light-bg);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--light-border);
    border-left: 3px solid var(--primary-color);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
    box-shadow: 0 2px 8px rgba(26, 0, 51, 0.06);
}

.metric-card .fw-bold {
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Solid color instead of gradient text — gradient clip-text loses legibility
   at the small sizes used in metric grids. Gradient text stays only for
   the navbar brand and the h1 page heading. See SPEC §5. */
.metric-value {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary-color);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--light-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* File upload area */
.file-upload-area {
    border: 4px dashed var(--neon-cyan);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
    background: linear-gradient(135deg, #ffffff 0%, #f0ffff 100%);
}

.file-upload-area:hover,
.file-upload-area.drag-over {
    border-color: var(--neon-pink);
    background: linear-gradient(135deg, #fff0ff 0%, #f0ffff 100%);
    box-shadow: 0 4px 12px rgba(255, 20, 147, 0.2);
}

.file-upload-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Timeline */
.timeline-item {
    border-left: 3px solid var(--light-color);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid white;
}

.timeline-date {
    color: var(--light-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Timeline Cards
   Same restraint as .card / .activity-card. The orange→green gradient ring
   was visually heavy on a feed of 10+ cards. Race cards (.timeline-card.race-card)
   override this with the full neon treatment further down in the file. See SPEC §3. */
.timeline-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--light-border);
    background: var(--light-bg);
    box-shadow: none;
}

.timeline-card:hover {
    border-color: #d4c5e6;
    box-shadow: 0 4px 12px rgba(26, 0, 51, 0.08);
}

.timeline-card .user-avatar {
    flex-shrink: 0;
}

.timeline-card .avatar-placeholder {
    width: 48px;
    height: 48px;
    background-color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--light-text-hint);
}

.activity-preview-map {
    background-color: var(--light-color);
    position: relative;
}

.activity-preview-map .leaflet-container {
    border-radius: 8px;
}

/* Timeline Metrics */
.timeline-card .metric-card {
    padding: 0.75rem;
    margin-bottom: 0;
}

.timeline-card .metric-value {
    font-size: 1.25rem;
}

.timeline-card .metric-label {
    font-size: 0.75rem;
}

/* Profile Pages */
.avatar-placeholder-large {
    width: 120px;
    height: 120px;
    background-color: var(--light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--light-text-hint);
}

.stat-card {
    padding: 1rem;
}

.stat-card-hover {
    transition: background-color 0.2s;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.stat-card-hover:hover {
    background-color: var(--light-color);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--light-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.activity-item {
    transition: background-color 0.2s;
}

.activity-item:hover {
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    margin: -0.5rem;
}

/* Charts */
.chart-container {
    position: relative;
    height: 300px;
    margin-bottom: 1rem;
}

/* Loading states */
.loading-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Utility classes */
.text-muted {
    color: var(--light-text-muted);
}

.text-small {
    font-size: 0.875rem;
}

.visibility-public {
    color: var(--secondary-color);
}

.visibility-followers {
    color: var(--warning-color);
}

.visibility-private {
    color: var(--danger-color);
}

/* Empty State Illustrations */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--light-text-muted);
}

.empty-state-icon {
    font-size: 5rem;
    color: var(--light-text-hint);
    margin-bottom: 1.5rem;
    display: inline-block;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--light-text);
    margin-bottom: 0.5rem;
}

.empty-state-message {
    font-size: 1rem;
    color: var(--light-text-muted);
    margin-bottom: 1.5rem;
}

.empty-state-action {
    margin-top: 1.5rem;
}

/* Empty state variants */
.empty-state-activities .empty-state-icon {
    color: var(--primary-color);
}

.empty-state-notifications .empty-state-icon {
    color: var(--warning-color);
}

.empty-state-timeline .empty-state-icon {
    color: var(--secondary-color);
}

.empty-state-users .empty-state-icon {
    color: var(--accent-lime);
}

.empty-state-search .empty-state-icon {
    color: var(--danger-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .map-container {
        height: 300px;
    }

    .map-container-large {
        height: 400px;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .empty-state {
        padding: 3rem 1rem;
    }

    .empty-state-icon {
        font-size: 4rem;
    }

    .empty-state-title {
        font-size: 1.25rem;
    }
}

/* Footer — light mode
   Same pink top border and brand treatment as dark mode, so the light theme
   doesn't feel like an afterthought. See SPEC §7. */
footer.bg-light {
    background-color: var(--light-surface) !important;
    border-top: 1px solid var(--light-border);
}

footer.bg-light h5 {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

footer.bg-light .text-muted {
    color: var(--light-text-muted) !important;
}

footer.bg-light a {
    color: var(--primary-color);
}

footer.bg-light a:hover {
    color: var(--purple-deep);
}

/* Buttons
   Heavy typography stays (font + uppercase + spacing come from the global rule).
   Border width drops from 3px to 2px and the hover translateY is removed —
   the lift was playful in isolation but felt janky after repeated interaction.
   See SPEC §3. */
.btn {
    border-width: 2px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
    transform: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-deep) 100%) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(212, 16, 122, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(212, 16, 122, 0.35);
}

.btn-success {
    background: linear-gradient(135deg, var(--green-deep) 0%, var(--cyan-deep) 100%) !important;
    border-color: var(--green-deep) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(46, 184, 18, 0.25);
}

.btn-success:hover {
    box-shadow: 0 4px 12px rgba(46, 184, 18, 0.35);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c92333 100%) !important;
    border-color: #dc3545 !important;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25);
}

.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.35);
}

.btn-outline-primary {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    border-width: 2px !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Headings — Heavy typography is set globally; this just sets color and the
   special h1 gradient. h2–h6 use solid dark color so they don't compete with
   the h1 page heading. See SPEC §1 + §5. */
h1, h2, h3, h4, h5, h6 {
    color: var(--dark-color);
}

h1 {
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 50%,
        var(--orange-deep) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   DARK MODE (CSS-Only, OS Preference)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode color overrides */
    :root {
        --dark-bg: #0f0520;
        --dark-bg-alt: #1a0a30;
        --dark-surface: #251040;
        --dark-surface-hover: #301550;
        --dark-text: #e8e8f0;
        --dark-text-muted: #a8a8c0;
        --dark-border: #3d2060;

        /* Remap the semantic aliases back to the full-intensity neons —
           dark backgrounds need the bright versions to read properly. */
        --primary-color: var(--neon-pink);
        --secondary-color: var(--neon-cyan);
        --accent-orange: var(--neon-orange);
        --accent-lime: var(--neon-green);
    }

    /* Base */
    body {
        background: var(--dark-bg);
        color: var(--dark-text);
    }

    /* Override Bootstrap utility classes */
    .bg-light {
        background-color: var(--dark-surface) !important;
    }

    .text-dark {
        color: var(--dark-text) !important;
    }

    /* Cards — subtle dark borders, same restraint as light mode. */
    .card {
        background: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text);
        box-shadow: none;
    }

    .card:hover {
        border-color: #5a3080;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .card-body {
        background: var(--dark-surface);
        color: var(--dark-text);
    }

    .activity-card {
        background: var(--dark-surface);
        border-color: var(--dark-border);
        box-shadow: none;
    }

    .activity-card:hover {
        border-color: #5a3080;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    /* Timeline */
    .timeline-card {
        background: var(--dark-surface) !important;
        color: var(--dark-text);
        border-color: var(--dark-border);
        box-shadow: none;
    }

    .timeline-card:hover {
        border-color: #5a3080;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .timeline-card .text-dark {
        color: var(--dark-text) !important;
    }

    .timeline-card .card-title a {
        color: var(--dark-text) !important;
    }

    .timeline-card .fw-bold {
        color: var(--dark-text) !important;
    }

    .timeline-item {
        border-left-color: var(--dark-border);
    }

    .timeline-item::before {
        border-color: var(--dark-surface);
    }

    .timeline-date {
        color: var(--dark-text-muted);
    }

    /* Metrics — solid surface, single pink left-accent stripe. */
    .metric-card {
        background: var(--dark-surface);
        border: 1px solid var(--dark-border);
        border-left: 3px solid var(--neon-pink);
        box-shadow: none;
    }

    .metric-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .metric-value {
        color: var(--neon-pink);
    }

    .metric-label {
        color: var(--dark-text-muted);
    }

    /* Activity type badges — translucent tints, dark mode variants. */
    .activity-type-run {
        background: rgba(255, 20, 147, 0.15);
        color: var(--neon-pink);
        border-color: rgba(255, 20, 147, 0.30);
    }

    .activity-type-ride {
        background: rgba(255, 102, 0, 0.15);
        color: var(--neon-orange);
        border-color: rgba(255, 102, 0, 0.30);
    }

    .activity-type-hike {
        background: rgba(0, 255, 255, 0.12);
        color: var(--neon-cyan);
        border-color: rgba(0, 255, 255, 0.25);
    }

    /* File upload */
    .file-upload-area {
        background: linear-gradient(135deg, var(--dark-surface) 0%, var(--dark-bg-alt) 100%);
        border-color: var(--neon-cyan);
    }

    .file-upload-area:hover,
    .file-upload-area.drag-over {
        background: linear-gradient(135deg, var(--dark-surface-hover) 0%, var(--dark-bg-alt) 100%);
        box-shadow: 0 4px 12px rgba(255, 20, 147, 0.3);
    }

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

    /* Text utilities */
    .text-muted {
        color: var(--dark-text-muted) !important;
    }

    /* Avatar placeholders */
    .avatar-placeholder,
    .avatar-placeholder-large {
        background-color: var(--dark-surface-hover);
        color: var(--dark-text-muted);
    }

    /* Stats */
    .stat-label {
        color: var(--dark-text-muted);
    }

    .stat-card-hover:hover {
        background-color: var(--dark-surface-hover);
    }

    .activity-item:hover {
        background-color: var(--dark-surface-hover);
    }

    /* Empty states */
    .empty-state {
        color: var(--dark-text-muted);
    }

    .empty-state-icon {
        color: var(--dark-border);
    }

    .empty-state-title {
        color: var(--dark-text);
    }

    .empty-state-message {
        color: var(--dark-text-muted);
    }

    /* Activity preview map */
    .activity-preview-map {
        background-color: var(--dark-surface);
    }

    /* Loading spinner */
    .loading-spinner {
        border-color: rgba(255, 255, 255, 0.1);
        border-top-color: var(--neon-pink);
    }

    /* Forms */
    .form-control,
    .form-select {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--dark-surface-hover);
        border-color: var(--neon-cyan);
        color: var(--dark-text);
        box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
    }

    .form-control::placeholder {
        color: var(--dark-text-muted);
        opacity: 0.7;
    }

    /* Input groups */
    .input-group-text {
        background-color: var(--dark-surface-hover);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    /* Modal */
    .modal-content {
        background-color: var(--dark-surface);
        border-color: var(--neon-pink);
        color: var(--dark-text);
    }

    .modal-header {
        border-bottom-color: var(--dark-border);
    }

    .modal-footer {
        border-top-color: var(--dark-border);
    }

    .modal-title {
        color: var(--dark-text);
    }

    /* Close button */
    .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* Dropdowns */
    .dropdown-menu {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
    }

    .dropdown-item {
        color: var(--dark-text);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--dark-surface-hover);
        color: var(--dark-text);
    }

    .dropdown-divider {
        border-top-color: var(--dark-border);
    }

    /* Alerts */
    .alert-success {
        background-color: rgba(57, 255, 20, 0.15);
        border-color: var(--neon-green);
        color: var(--neon-green);
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.15);
        border-color: #dc3545;
        color: #ff6b7a;
    }

    .alert-info {
        background-color: rgba(0, 255, 255, 0.15);
        border-color: var(--neon-cyan);
        color: var(--neon-cyan);
    }

    .alert-warning {
        background-color: rgba(255, 193, 7, 0.15);
        border-color: var(--warning-color);
        color: var(--warning-color);
    }

    /* Tables */
    .table {
        color: var(--dark-text);
        border-color: var(--dark-border);
    }

    .table-striped > tbody > tr:nth-of-type(odd) > * {
        background-color: rgba(255, 255, 255, 0.02);
    }

    .table-hover > tbody > tr:hover > * {
        background-color: var(--dark-surface-hover);
    }

    /* List groups */
    .list-group-item {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    .list-group-item:hover {
        background-color: var(--dark-surface-hover);
    }

    /* Pagination */
    .pagination .page-link {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    .pagination .page-link:hover {
        background-color: var(--dark-surface-hover);
        border-color: var(--neon-cyan);
        color: var(--neon-cyan);
    }

    .pagination .page-item.active .page-link {
        background-color: var(--neon-pink);
        border-color: var(--neon-pink);
        color: white;
    }

    .pagination .page-item.disabled .page-link {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text-muted);
    }

    /* Badges */
    .badge {
        color: var(--dark-text);
    }

    /* Links */
    a {
        color: var(--neon-cyan);
    }

    a:hover {
        color: var(--neon-pink);
    }

    /* HR */
    hr {
        border-top-color: var(--dark-border);
        opacity: 1;
    }

    /* Breadcrumb */
    .breadcrumb {
        background-color: var(--dark-surface);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        color: var(--dark-text-muted);
    }

    .breadcrumb-item.active {
        color: var(--dark-text-muted);
    }

    /* Toast */
    .toast {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    .toast-header {
        background-color: var(--dark-surface-hover);
        border-bottom-color: var(--dark-border);
        color: var(--dark-text);
    }

    /* Progress bars */
    .progress {
        background-color: var(--dark-surface-hover);
    }

    /* Accordion */
    .accordion-item {
        background-color: var(--dark-surface);
        border-color: var(--dark-border);
    }

    .accordion-button {
        background-color: var(--dark-surface);
        color: var(--dark-text);
    }

    .accordion-button:not(.collapsed) {
        background-color: var(--dark-surface-hover);
        color: var(--dark-text);
    }

    .accordion-button:focus {
        border-color: var(--neon-cyan);
        box-shadow: 0 0 0 0.25rem rgba(0, 255, 255, 0.25);
    }

    .accordion-body {
        background-color: var(--dark-surface);
        color: var(--dark-text);
    }

    /* Code blocks */
    code {
        background-color: var(--dark-surface-hover);
        color: var(--neon-cyan);
    }

    pre {
        background-color: var(--dark-surface-hover);
        border-color: var(--dark-border);
        color: var(--dark-text);
    }

    /* Offcanvas */
    .offcanvas {
        background-color: var(--dark-surface);
        color: var(--dark-text);
    }

    .offcanvas-header {
        border-bottom-color: var(--dark-border);
    }

    .offcanvas-title {
        color: var(--dark-text);
    }

    /* Footer */
    footer,
    footer.bg-light {
        background-color: var(--dark-surface) !important;
        border-top: 3px solid var(--neon-pink);
    }

    footer h5,
    footer.bg-light h5 {
        color: var(--dark-text) !important;
    }

    footer .text-muted,
    footer.bg-light .text-muted {
        color: var(--dark-text-muted) !important;
    }

    footer a,
    footer.bg-light a {
        color: var(--neon-cyan) !important;
    }

    footer a:hover,
    footer.bg-light a:hover {
        color: var(--neon-pink) !important;
    }

    footer p,
    footer.bg-light p {
        color: var(--dark-text) !important;
    }

    /* Indoor Activity Placeholder - Dark Mode */
    #indoorPlaceholder .card {
        background: var(--dark-surface);
        border-color: var(--neon-cyan);
    }

    #indoorPlaceholder .card-body {
        background: var(--dark-surface);
    }

    #indoorPlaceholder .text-muted,
    #indoorPlaceholder h4 {
        color: var(--dark-text) !important;
    }

    #indoorPlaceholder p.text-muted {
        color: var(--dark-text-muted) !important;
    }

    /* Indoor activity placeholder for timeline - Dark Mode */
    .indoor-activity-placeholder {
        background-color: var(--dark-surface) !important;
    }

    .indoor-activity-placeholder .text-muted {
        color: var(--dark-text-muted) !important;
    }

    .indoor-activity-placeholder .fw-bold {
        color: var(--dark-text) !important;
    }

    /* Form elements - Dark Mode Fix */
    .form-label {
        color: var(--dark-text) !important;
    }

    .form-check-label {
        color: var(--dark-text) !important;
    }

    .form-text {
        color: var(--dark-text-muted) !important;
    }

    /* Typography - Dark Mode Fix */
    strong {
        color: var(--dark-text);
    }

    b {
        color: var(--dark-text);
    }

    small {
        color: var(--dark-text);
    }

    /* Indoor badge - Dark Mode */
    .badge.bg-warning.text-dark {
        background: rgba(255, 165, 0, 0.25) !important;  /* Orange with transparency */
        color: var(--neon-orange) !important;
        border: 1px solid var(--neon-orange);
    }

    /* Race badge - Dark Mode - Use standard colors */
    .race-badge {
        background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
        color: #ffffff !important;
        border: 2px solid var(--neon-pink) !important;
        text-shadow: 0 0 10px rgba(255, 20, 147, 0.8) !important;
        box-shadow: 0 0 12px rgba(255, 20, 147, 0.4) !important;
    }

    /* Race activity card - Dark Mode */
    .timeline-card.race-card {
        background: linear-gradient(135deg, rgba(255, 20, 147, 0.08) 0%, rgba(157, 0, 255, 0.08) 100%);
        border: 3px solid var(--neon-pink) !important;
        border-top-width: 15px !important;
        box-shadow: 0 0 25px rgba(255, 20, 147, 0.4);
    }

    .timeline-card.race-card::before {
        background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
        text-shadow: 0 0 15px rgba(255, 20, 147, 1) !important;
        box-shadow: 0 2px 10px rgba(255, 20, 147, 0.6) !important;
    }

    .timeline-card.race-card::after {
        color: var(--neon-pink) !important;
        opacity: 0.05 !important;
    }

    /* Race Detail Page - Dark Mode - Use standard colors */
    #activityContent.race-detail h2 {
        border-image-source: repeating-linear-gradient(
            0deg,
            #1a0033 0px,
            #1a0033 15px,
            var(--neon-pink) 15px,
            var(--neon-pink) 30px
        ) !important;
    }

    #activityContent.race-detail .card.race-metrics {
        border: 4px solid var(--neon-pink) !important;
        background:
            linear-gradient(#1a0033, #1a0033) padding-box,
            repeating-linear-gradient(
                45deg,
                #1a0033 0px,
                #1a0033 10px,
                var(--neon-pink) 10px,
                var(--neon-pink) 20px
            ) border-box !important;
        box-shadow: 0 0 25px rgba(255, 20, 147, 0.3) !important;
    }

    #activityContent.race-detail .card.race-metrics::before {
        color: var(--neon-pink) !important;
        opacity: 0.08 !important;
    }

    #activityContent.race-detail .card-header {
        background:
            repeating-conic-gradient(
                #1a0033 0% 25%,
                var(--neon-pink) 0% 50%
            ) 0 0 / 12px 12px !important;
        border-bottom-color: var(--neon-pink) !important;
        border-top-color: var(--neon-pink) !important;
    }

    #activityContent.race-detail .card-header::before {
        background: rgba(26, 0, 51, 0.5) !important;
    }

    #activityContent.race-detail .card-header h5,
    #activityContent.race-detail .card-header h6 {
        color: var(--neon-pink) !important;
        text-shadow:
            0 0 8px rgba(26, 0, 51, 0.9),
            1px 1px 2px rgba(26, 0, 51, 1),
            0 0 10px rgba(255, 20, 147, 0.5) !important;
    }

    #activityContent.race-detail .card-header i {
        color: var(--neon-pink) !important;
        filter: drop-shadow(0 0 3px rgba(26, 0, 51, 0.9)) drop-shadow(0 0 5px rgba(255, 20, 147, 0.5)) !important;
    }

    #activityContent.race-detail #mapSection .card {
        border: 3px solid var(--neon-pink) !important;
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.3) !important;
    }

    .activity-type-badge.race-activity {
        background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%) !important;
        color: #ffffff !important;
        border: 2px solid var(--neon-pink) !important;
        box-shadow: 0 0 10px rgba(255, 20, 147, 0.3) !important;
    }

    /* Race Activity List Card - Dark Mode */
    .activity-card.race-list-card {
        border: 3px solid var(--neon-pink) !important;
        background: linear-gradient(135deg, rgba(255, 20, 147, 0.05) 0%, rgba(157, 0, 255, 0.05) 100%);
        box-shadow: 0 0 20px rgba(255, 20, 147, 0.2);
    }

    .activity-card.race-list-card::before {
        color: var(--neon-pink) !important;
    }

    .activity-card.race-list-card .card-title a {
        color: var(--neon-cyan) !important;
        font-weight: 900;
    }
}

/* Race Badge Styling - Matches activity type badge exactly */
.race-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
    color: #ffffff;
    border: 2px solid currentColor;
    vertical-align: baseline;
}

/* Race Activity Type Badge - Uses standard pink/purple gradient */
.activity-type-badge.race-activity {
    background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
    color: #ffffff;
    border: 2px solid currentColor;
    font-weight: 900;
}

/* Race Timeline Card - Special Styling with Checkered Top Border */
.timeline-card.race-card {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.05) 0%, rgba(157, 0, 255, 0.05) 100%);
    border: 3px solid var(--neon-pink);
    border-top-width: 15px;
    border-top-style: solid;
    border-image: repeating-linear-gradient(
        90deg,
        var(--neon-pink) 0px,
        var(--neon-pink) 20px,
        var(--neon-purple) 20px,
        var(--neon-purple) 40px
    ) 15 3 3 3;
    box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3);
    position: relative;
}

.timeline-card.race-card::before {
    content: '\F277 RACE';  /* Bootstrap Icons flag-checkered + text */
    font-family: 'bootstrap-icons', 'Arial Black', sans-serif;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    font-weight: 900;
    color: #ffffff;
    background: var(--neon-pink);
    padding: 0.25rem 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.8);
    box-shadow: 0 2px 8px rgba(255, 20, 147, 0.4);
    z-index: 10;
    letter-spacing: 0.15em;
}

.timeline-card.race-card::after {
    content: '\F277';  /* Bootstrap Icons flag-checkered watermark */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 8rem;
    opacity: 0.03;
    color: var(--neon-pink);
    z-index: 0;
    pointer-events: none;
}

.timeline-card.race-card .card-body {
    padding-top: 1.5rem;
}

/* Race Activity Detail Page - Complete Theme */
#activityContent.race-detail {
    position: relative;
}

/* Race Title - Readable with checkered flag accent */
#activityContent.race-detail h2 {
    border-left: 8px solid transparent;
    border-image: repeating-linear-gradient(
        0deg,
        var(--neon-pink) 0px,
        var(--neon-pink) 15px,
        var(--neon-purple) 15px,
        var(--neon-purple) 30px
    ) 8;
    padding-left: 1rem;
    position: relative;
}

/* Race Metrics Card with Border */
#activityContent.race-detail .card.race-metrics {
    border: 4px solid var(--neon-pink);
    box-shadow: 0 4px 20px rgba(255, 20, 147, 0.3);
    position: relative;
}

#activityContent.race-detail .card.race-metrics::before {
    content: '\F277';  /* Bootstrap Icons flag-checkered */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 4rem;
    opacity: 0.05;
    color: var(--neon-pink);
    z-index: 0;
}

#activityContent.race-detail .card.race-metrics .card-body {
    position: relative;
    z-index: 1;
}

/* Race Card Headers with Checkered Flag Pattern */
#activityContent.race-detail .card-header {
    background:
        repeating-conic-gradient(
            #1a0033 0% 25%,
            var(--neon-pink) 0% 50%
        ) 0 0 / 12px 12px !important;
    border-bottom: 3px solid var(--neon-pink) !important;
    border-top: 3px solid var(--neon-pink) !important;
    position: relative;
}

#activityContent.race-detail .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 0, 51, 0.5) !important;
    z-index: 0;
}

#activityContent.race-detail .card-header h5,
#activityContent.race-detail .card-header h6 {
    color: var(--neon-pink) !important;
    font-weight: 900;
    position: relative;
    z-index: 1;
    text-shadow:
        0 0 8px rgba(26, 0, 51, 0.9),
        1px 1px 2px rgba(26, 0, 51, 1),
        0 0 10px rgba(255, 20, 147, 0.3) !important;
}

#activityContent.race-detail .card-header i {
    color: var(--neon-pink) !important;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 3px rgba(26, 0, 51, 0.9)) drop-shadow(0 0 5px rgba(255, 20, 147, 0.3)) !important;
}

/* Race Map Section Border */
#activityContent.race-detail #mapSection .card {
    border: 3px solid var(--neon-pink);
    box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3);
}

/* Race Activity List Card */
.activity-card.race-list-card {
    border: 3px solid var(--neon-pink);
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.05) 0%, rgba(157, 0, 255, 0.05) 100%);
    box-shadow: 0 4px 15px rgba(255, 20, 147, 0.2);
    position: relative;
}

.activity-card.race-list-card::before {
    content: '\F277';  /* Bootstrap Icons flag-checkered */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 3rem;
    opacity: 0.06;
    color: var(--neon-pink);
    z-index: 0;
}

.activity-card.race-list-card .card-body {
    position: relative;
    z-index: 1;
}

.activity-card.race-list-card .card-title a {
    color: #000000;
    font-weight: 900;
}

/* Hashtag links inside titles, descriptions, and detail pages */
.hashtag-link {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 500;
}

.hashtag-link:hover {
    text-decoration: underline;
}

/* Reaction chips and picker on activity cards / detail pages */
.reactions-block {
    position: relative;
}

.reaction-chip {
    padding: 0.15rem 0.55rem;
    line-height: 1.2;
    border-radius: 999px;
    font-size: 0.9rem;
}

.reaction-chip .reaction-emoji {
    margin-right: 0.25rem;
}

.reaction-add-btn {
    padding: 0.15rem 0.55rem;
    line-height: 1.2;
    border-radius: 999px;
}

.reaction-picker {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    gap: 0.25rem;
}

.reaction-picker.d-none {
    display: none !important;
}

.reaction-picker-option {
    padding: 0.25rem 0.5rem;
    font-size: 1.15rem;
    line-height: 1;
    border: none;
    background: transparent;
}

.reaction-picker-option:hover {
    background: #f1f3f5;
}

/* ============================================================================
   Unified activity chart
   Self-contained component used on the activity detail page. Uses its own
   dark palette (defined as local CSS custom properties) so the chart can be
   styled independently of the rest of the site theme.
   ============================================================================ */

.activity-overview-chart {
    /* Light-mode defaults — chart blends into the page's white card surfaces.
       The metric line colors are saturated enough to read on either background,
       so they stay constant; only the chrome (background, text, grid, borders)
       flips between modes. */
    --aoc-bg: #ffffff;
    --aoc-surface: #f7f3fb;
    --aoc-border: #e2d6ee;
    --aoc-text: #1a0033;
    --aoc-text-muted: #6b5b80;
    --aoc-grid: rgba(26, 0, 51, 0.08);
    --aoc-accent: #9d00ff;
    --aoc-elevation: #0099b3;
    --aoc-heart-rate: #d63450;
    --aoc-pace: #5b48d6;
    --aoc-cadence: #d97706;

    background: var(--aoc-bg);
    border: 1px solid var(--aoc-border);
    border-radius: 0.75rem;
    color: var(--aoc-text);
    padding: 1rem 1.25rem 1.25rem;
}

@media (prefers-color-scheme: dark) {
    .activity-overview-chart {
        /* Dark-mode palette per the spec. */
        --aoc-bg: #1a1028;
        --aoc-surface: #231638;
        --aoc-border: #3a2855;
        --aoc-text: #f3eaff;
        --aoc-text-muted: #a18bb8;
        --aoc-grid: rgba(152, 130, 181, 0.08);
        --aoc-accent: #e040fb;
        --aoc-elevation: #00e5ff;
        --aoc-heart-rate: #ff5277;
        --aoc-pace: #7c6bff;
        --aoc-cadence: #ffab40;
    }
}

.activity-overview-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.activity-overview-chart__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--aoc-text);
    letter-spacing: 0.02em;
}

.activity-overview-chart__axis-toggle {
    display: inline-flex;
    background: var(--aoc-surface);
    border: 1px solid var(--aoc-border);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
}

.activity-overview-chart__axis-toggle button {
    border: none;
    background: transparent;
    color: var(--aoc-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.activity-overview-chart__axis-toggle button.is-active {
    background: var(--aoc-accent);
    color: #ffffff;
}

.activity-overview-chart__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 500px) {
    .activity-overview-chart__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.activity-overview-chart__card {
    background: var(--aoc-surface);
    border: 1.5px solid transparent;
    border-radius: 0.6rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s;
    user-select: none;
    position: relative;
}

.activity-overview-chart__card:hover {
    transform: translateY(-1px);
}

.activity-overview-chart__card.is-active[data-metric="elevation"] { border-color: var(--aoc-elevation); }
.activity-overview-chart__card.is-active[data-metric="heartRate"] { border-color: var(--aoc-heart-rate); }
.activity-overview-chart__card.is-active[data-metric="pace"]      { border-color: var(--aoc-pace); }
.activity-overview-chart__card.is-active[data-metric="cadence"]   { border-color: var(--aoc-cadence); }

.activity-overview-chart__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.activity-overview-chart__card-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aoc-text-muted);
    font-weight: 600;
}

.activity-overview-chart__card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.activity-overview-chart__card[data-metric="elevation"] .activity-overview-chart__card-dot { background: var(--aoc-elevation); }
.activity-overview-chart__card[data-metric="heartRate"] .activity-overview-chart__card-dot { background: var(--aoc-heart-rate); }
.activity-overview-chart__card[data-metric="pace"]      .activity-overview-chart__card-dot { background: var(--aoc-pace); }
.activity-overview-chart__card[data-metric="cadence"]   .activity-overview-chart__card-dot { background: var(--aoc-cadence); }

.activity-overview-chart__card-check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--aoc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    color: transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.activity-overview-chart__card.is-active .activity-overview-chart__card-check {
    background: var(--aoc-accent);
    border-color: var(--aoc-accent);
    color: #ffffff;
}

.activity-overview-chart__card-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--aoc-text);
    line-height: 1.1;
}

.activity-overview-chart__card-secondary {
    font-size: 0.72rem;
    color: var(--aoc-text-muted);
    margin-top: 0.15rem;
}

.activity-overview-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--aoc-text-muted);
}

.activity-overview-chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.activity-overview-chart__legend-bar {
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.activity-overview-chart__canvas-wrapper {
    position: relative;
    height: 320px;
    background: var(--aoc-bg);
    border-radius: 0.4rem;
}

@media (max-width: 500px) {
    .activity-overview-chart__canvas-wrapper {
        height: 240px;
    }
}

.activity-overview-chart__empty {
    color: var(--aoc-text-muted);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 0.9rem;
}