/* Dashboard overzicht ≤1023px — laadt als laatste stylesheet in head (ná main + dashboard_v2 + settings-hub).
 * #view-overview zonder .active: .active wordt pas door JS gezet; verborgen tab heeft display:none maar
 * flex/grid-layout voor ticker/activity helpt WebKit al bij eerste paint zodra overview actief wordt. */
@media (max-width: 1023px) {
    #view-overview .kpi-ticker {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body:not(.light-mode) #view-overview .kpi-ticker {
        background: rgba(22, 22, 22, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

    body:not(.light-mode) #view-overview .kpi-ticker .lk-val {
        color: #d8ff5a !important;
        text-shadow:
            0 0 8px rgba(204, 255, 0, 0.52),
            0 0 20px rgba(204, 255, 0, 0.3),
            0 0 34px rgba(204, 255, 0, 0.14) !important;
    }

    #view-overview .kpi-ticker__viewport {
        min-width: 0;
        min-height: 48px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    #view-overview .kpi-ticker__track {
        display: flex !important;
        display: -webkit-flex !important;
        -webkit-flex-direction: row;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
        align-items: center !important;
        min-height: 44px;
        width: max-content;
    }

    #view-overview .kpi-ticker__seg {
        display: flex !important;
        display: -webkit-flex !important;
        -webkit-flex-direction: row;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
        -webkit-flex: 0 0 auto !important;
        align-items: stretch !important;
    }

    #view-overview .kpi-ticker .lk-item {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    #view-overview .activity-item {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: start;
    }

    #view-overview .activity-content {
        display: flex !important;
        flex-direction: column !important;
        flex: initial !important;
        min-width: 0 !important;
    }

    #view-overview .activity-icon-wrap,
    #view-overview .activity-time {
        flex-shrink: 0 !important;
    }

    #view-overview .overview-quadrant-grid > .overview-q .card-x {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        width: 100%;
        box-sizing: border-box;
        background: var(--color-bg-card) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    #view-overview .dashboard-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Telefoon: KPI-ticker als horizontaal swipe-baar lint (geen marquee-transform op track) */
@media (max-width: 768px) {
    #view-overview .kpi-ticker__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        -webkit-overflow-scrolling: touch;
    }
    #view-overview .kpi-ticker__track {
        animation: none !important;
        transform: none !important;
        will-change: auto;
    }
}