.activity-page {
    --accent: #9AB646;
    --danger: #e02d2d;

    --available: #ffe45b;
    --break: #86be7d;
    --rest: #c2debe;
    --driving: #b2b7e8;
    --work: #4286f5;
    --unknown: #b2b7e8;

    i.pa {
        color: var(--accent);

        &::before {
            vertical-align: middle;
        }
    }

    .skeleton {
        min-height: 25rem;

        &:empty {
            background: linear-gradient(90deg,
                    var(--background) 25%,
                    var(--light) 50%,
                    var(--background) 75%);
            background-size: 200% 100%;
            animation: skeleton-loading 3s infinite;
        }
    }

    .view-toggle {
        input {
            display: none;

            &+label {
                padding: 0.25rem 1rem;
                cursor: pointer;
                transition: background-color 0.15s, color 0.15s;
            }

            &:checked+label {
                background-color: var(--primary);
                color: white;
                border-radius: 50rem;
            }

            &:disabled+label {
                opacity: 0.4;
                cursor: not-allowed;
            }
        }

    }

    /* Timeline row structure */
    .timeline-container {
        padding-top: 1rem;
        --activity-bar-height: 5rem;
    }

    .timeline-band--activities {
        height: var(--activity-bar-height);
    }

    .timeline-row--hours {
        height: 1.25rem;
    }

    /* Single-container timeline: markers + pills + activities */
    .timeline {
        position: relative;
    }

    .marker,
    .pill {
        position: absolute;
        top: 0;
        bottom: 0;
        pointer-events: none;
    }

    .marker:hover,
    .pill:hover {
        z-index: 50 !important;
    }

    .marker__line,
    .pill__line {
        position: absolute;
        bottom: 0;
        width: 1px;
        background-color: #bbb;
        opacity: 0.4;
        pointer-events: none;
        transition: background-color 0.15s, opacity 0.15s;
    }

    .marker:hover > .marker__line,
    .pill:hover > .pill__line {
        background-color: #222;
        opacity: 0.8;
    }

    .marker__line--danger {
        background-color: var(--danger);
        opacity: 1;
    }

    .marker__line--warning {
        background-color: var(--warning);
        opacity: 1;
    }

    .marker__line--dark {
        background-color: var(--dark);
    }

    .marker__icon,
    .pill__icon {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.85);
        transform-origin: top center;
        transition: transform 0.15s;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background-color: #f5f5f5;
        border-radius: 100px;
        padding: 3px 8px;
        font-size: 12px;
        color: #333;
        cursor: pointer;
        pointer-events: auto;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .marker__icon:hover,
    .pill__icon:hover {
        background-color: #e8e8e8;
    }

    .pill__icon:hover {
        transform: translate(-50%, -50%) scale(0.95);
    }

    .marker__icon i,
    .pill__icon i {
        font-size: 16px;
        color: #333;
    }

    /* Infringement marker — red bordered pill */
    .marker__icon--danger {
        background-color: #fff;
        border: 1.5px solid var(--danger);
        color: var(--danger);
    }

    .marker__icon--danger:hover {
        background-color: #fff5f5;
    }

    .marker__icon--danger i {
        color: var(--danger);
        font-size: 10px;
    }

    /* Warning marker — amber bordered pill (overspeeding, VU misuse events) */
    .marker__icon--warning {
        background-color: #fff;
        border: 1.5px solid var(--warning);
        color: var(--warning);
    }

    .marker__icon--warning:hover {
        background-color: #fff8ea;
    }

    .marker__icon--warning i {
        color: var(--warning);
        font-size: 10px;
    }

    .timeline-row--overlays .shift-bar-container {
        height: 0.75rem;
    }

    .timeline-row--overlays .shift-bar {
        height: 0.75rem;
        background-color: var(--primary);
        transition: opacity 0.15s, filter 0.15s;
    }

    .timeline-row--overlays .shift-bar__icon {
        transform: translate(-100%, 0%);
        font-size: 0.6rem;
    }

    .timeline-row--overlays .infringement-bar-container {
        height: 0.4rem;
    }

    .timeline-row--overlays .infringement-bar {
        height: 100%;
        background-color: var(--danger);
        opacity: 0.6;
        transition: opacity 0.15s;
    }

    .timeline-row--overlays .vehicle-record-bar-container {
        height: 0.5rem;
    }

    .timeline-row--overlays .vehicle-record-bar {
        height: 100%;
        background-color: var(--info);
        opacity: 0.6;
    }

    .timeline-row--overlays .vehicle-record-label {
        top: 0.5rem;
        white-space: nowrap;
    }

    .timeline-hour-label {
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .timeline-gridlines {
        pointer-events: none;
    }

    .pill__arrow {
        font-size: 0.6rem;
    }

    .pill__flag {
        width: 20px;
        height: 14px;
        object-fit: cover;
        border-radius: 2px;
        vertical-align: middle;
        flex-shrink: 0;
    }

    /* Hour gridlines behind activity bars */
    .timeline-row--activities .z-0 {
        z-index: -1 !important;
    }

    .activity-bar {
        border-radius: 2px 2px 0 0;
        cursor: pointer;

        &:hover,
        &.hint-hover {
            filter: brightness(1.15);
        }
    }

    .activity-bar--available {
        background-color: var(--available);
        height: 3rem;
    }

    .activity-bar--break {
        background-color: var(--break);
        height: 2rem;
    }

    .activity-bar--rest {
        background-color: var(--rest);
        height: 1.5rem;
    }

    .activity-bar--driving {
        background-color: var(--driving);
        height: 5rem;
    }

    .activity-bar--work {
        background-color: var(--work);
        height: 4rem;
    }

    .activity-bar--unknown {
        background-color: #F7F8FB;
        height: 2.5rem;
        border: 1px solid #e0e0e0;

        &:hover,
        &.hint-hover {
            filter: brightness(0.92);
        }
    }

    .text-accent {
        color: var(--accent);
    }

    .overview-grid {
        overflow-x: auto;
        min-width: max-content;
    }

    .overview-column {
        min-width: 6.5rem;
        width: 6.5rem;
        flex-shrink: 0;
    }

    .overview-card {
        background-color: var(--background, #f7f8fb);
    }

    .overview-card .zero-value {
        opacity: 0.3;
    }

    .overview-stat {
        position: relative;
        padding-left: 1.25rem;
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .overview-stat > i {
        position: absolute;
        left: -0.1rem;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 0.85rem;
    }

    .overview-stat__value {
        font-family: 'Roboto Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
        font-size: 0.75rem;
    }

    .vehicle-span-bar {
        min-height: 1.5rem;
    }

    .vehicle-span {
        border-bottom: 2px solid var(--primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 8rem;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s;
    }

    .vehicle-span:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
    }

    /* Timeline markers — base class for absolutely positioned elements above/below the bar */
    .timeline-marker {
        position: absolute;
        z-index: 2;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .timeline-marker--time-label {
        top: -1.3rem;
        font-size: 0.6rem;
        color: var(--bs-secondary);
        opacity: 0.7;
    }

    .timeline-annotation {
        position: absolute;
        left: 0.5rem;
        bottom: 1.6rem;
        z-index: 2;
        font-size: 13px;
        white-space: nowrap;
        font-weight: 700;
    }

    .timeline-annotation--normal {
        color: #4caf50;
    }

    .timeline-annotation--shortened {
        color: #eb9e2a;
    }

    .timeline-annotation--too_short {
        color: var(--danger);
    }

    /* Infringement group — bar below timeline for duration infringements */
    .infringement-group {
        display: block;
        cursor: pointer;
        min-height: 0.25rem;
    }

    .infringement-group__bar {
        display: block;
        height: 0.5rem;
        background-color: var(--danger);
        border-radius: 2px;
        opacity: 0.6;
    }

    .infringement-group:hover .infringement-group__bar {
        opacity: 1;
    }

    /* Shift + infringement bar hover */
    .shift-bar:hover,
    .shift-bar.bar-hover {
        opacity: 1 !important;
        filter: brightness(1.2);
    }

    .infringement-bar:hover,
    .infringement-bar.bar-hover {
        opacity: 1 !important;
    }

    /* Infringement pill marker — !! icon in the overlay */
    .marker[data-marker-type="infringement"] i {
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .infringement-highlighted > .marker__icon--danger {
        animation: infringement-blink 0.3s step-end 3, infringement-pulse 1.5s ease-in-out infinite;
    }

}

@keyframes infringement-blink {
    0%, 100% {
        background-color: var(--danger);
        color: #fff;
    }
    50% {
        background-color: #fff;
        color: var(--danger);
    }
}

@keyframes infringement-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 53, 69, 0);
    }
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Stats → timeline scroll navigation */
[data-scroll-to] {
    cursor: pointer;
}

[data-scroll-to]:hover {
    opacity: 0.8;
}

.timeline-card--flash {
    animation: card-flash 1.5s ease;
}

.timeline-marker--flash {
    animation: marker-flash 1.5s ease;
}

@keyframes card-flash {
    0%, 100% { box-shadow: none; }
    25% { box-shadow: 0 0 0 3px var(--accent); }
}

@keyframes marker-flash {
    0%, 100% { filter: none; }
    25%, 75% { filter: brightness(1.5) drop-shadow(0 0 4px var(--danger)); }
}

/* ──────────────────────────────────────────────────────────────
   Dark-mode activity palette.
   Rule: keep each activity-status hue so "yellow = available, green = break,
   blue-ish = driving" identity reads identically. Saturate + darken rather than
   lighten — the goal is "same system of colours, evening version".
   ────────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .activity-page {
    --accent:    #b8d05e;  /* hsl(72,52%,59%) — was #9AB646 (hsl 72,46%,49%); olive lifted slightly so it pops on dark */
    --danger:    #ff6b6b;  /* hsl(0,100%,71%) — matches global dark-mode --danger; was #e02d2d */

    --available: #d9b82d;  /* hsl(49,68%,51%) — was #ffe45b (hsl 49,100%,68%); richer, darker yellow */
    --break:     #5a9050;  /* hsl(113,28%,44%) — was #86be7d (hsl 113,34%,62%); darker green, same hue */
    --rest:      #6d8f6a;  /* hsl(114,14%,49%) — was #c2debe (hsl 113,30%,80%); same hue, halved lightness */
    --driving:   #6a73c4;  /* hsl(236,43%,59%) — was #b2b7e8 (hsl 236,53%,80%); deepened indigo */
    --work:      #2a66d6;  /* hsl(218,67%,50%) — was #4286f5 (hsl 218,90%,61%); slightly darker, still clearly blue */
    --unknown:   #4a5575;  /* hsl(222,23%,37%) — was #b2b7e8; a distinctly muted indigo for "no data" */
}

/* Timeline grid lines — hsl(0,0%,73%) (#bbb) → hsl(0,0%,27%) on dark. */
[data-bs-theme="dark"] .activity-page .marker__line,
[data-bs-theme="dark"] .activity-page .pill__line {
    background-color: #444;  /* hsl(0,0%,27%) */
}

/* Hovered grid line — hsl(0,0%,13%) (#222) → hsl(0,0%,87%) on dark. */
[data-bs-theme="dark"] .activity-page .marker:hover > .marker__line,
[data-bs-theme="dark"] .activity-page .pill:hover > .pill__line {
    background-color: #ddd;  /* hsl(0,0%,87%) */
}

/* Pill/marker icon chips — light-mode used #f5f5f5 bg with #333 text.
 * Dark-mode: invert both so the chip stays legible against a dark timeline. */
[data-bs-theme="dark"] .activity-page .marker__icon,
[data-bs-theme="dark"] .activity-page .pill__icon {
    background-color: #2a2a2a;  /* hsl(0,0%,16%) — was #f5f5f5 (hsl 0,0%,96%); inverted lightness */
    color: #ddd;                /* hsl(0,0%,87%) — was #333 (hsl 0,0%,20%) */
}

[data-bs-theme="dark"] .activity-page .marker__icon:hover,
[data-bs-theme="dark"] .activity-page .pill__icon:hover {
    background-color: #3a3a3a;  /* hsl(0,0%,23%) — was #e8e8e8 (hsl 0,0%,91%); one step lighter than rest */
}

[data-bs-theme="dark"] .activity-page .marker__icon i,
[data-bs-theme="dark"] .activity-page .pill__icon i {
    color: #ddd;  /* matches chip text */
}

/* Danger marker — light-mode used white pill with red border; dark uses dark pill with red border. */
[data-bs-theme="dark"] .activity-page .marker__icon--danger {
    background-color: #1a1a1a;  /* hsl(0,0%,10%) — was #fff; near-black */
    border: 1.5px solid var(--danger);
    color: var(--danger);
}

[data-bs-theme="dark"] .activity-page .marker__icon--danger:hover {
    background-color: #2a1515;  /* subtle red-tinted dark — was #fff5f5 (very pale pink); inverted spirit */
}

[data-bs-theme="dark"] .activity-page .marker__icon--warning {
    background-color: #1a1a1a;
    border: 1.5px solid var(--warning);
    color: var(--warning);
}

[data-bs-theme="dark"] .activity-page .marker__icon--warning:hover {
    background-color: #2a2515;
}

/* Unknown activity bar — light-mode #F7F8FB with #e0e0e0 border. Dark-mode: near-black bar. */
[data-bs-theme="dark"] .activity-page .activity-bar--unknown {
    background-color: #1c1d22;  /* hsl(230,8%,12%) — was #F7F8FB (hsl 230,27%,98%); inverted */
    border: 1px solid #35383e;  /* hsl(220,7%,22%) — was #e0e0e0 (hsl 0,0%,88%); inverted */
}

/* Rest bar — solid colour in dark mode, no stripe pattern needed. */

/* Skeleton loader — light-mode shimmer uses --background/--light.
 * Those vars already flip via the :root[data-bs-theme="dark"] block in custom.css,
 * so the shimmer inherits correct colours automatically. No override needed. */

/* Timeline annotation colours — semantic meaning preserved; lightness nudged for dark bg. */
[data-bs-theme="dark"] .activity-page .timeline-annotation--normal {
    color: #6fce73;  /* hsl(123,49%,62%) — was #4caf50 (hsl 123,39%,49%); brighter for dark bg */
}

[data-bs-theme="dark"] .activity-page .timeline-annotation--shortened {
    color: #f5b566;  /* hsl(32,88%,68%) — was #eb9e2a (hsl 35,83%,54%); softened for dark bg */
}

/* Overview card — light-mode fallback was #f7f8fb (matches --background var).
 * Var flip already handles it; no override needed here. */

/* View-toggle checked label — light-mode was `color: white` on --primary (dark green).
 * In dark mode --primary flips to pale mint #EBF3EB, so white is illegible. Swap to --light
 * (which is #121212 near-black in dark mode) so the contrast inverts cleanly with the bg. */
[data-bs-theme="dark"] .activity-page .view-toggle input:checked + label {
    color: var(--light);  /* near-black text on pale-mint --primary; mirrors light-mode's white-on-green contrast */
}