/*
==========================================================
STATISTICS — COLLABORATION ACTIVITY OVER TIME
==========================================================
*/

.statistics-activity-panel {

    overflow:
        hidden;

    padding:
        28px 30px 24px;

    border:
        1px solid
        rgba(
            205,
            214,
            231,
            .85
        );

    border-radius:
        28px;

    background:
        rgba(
            255,
            255,
            255,
            .9
        );

    box-shadow:
        0 14px 34px
        rgba(
            64,
            72,
            115,
            .06
        );

}


/*
==========================================================
TOOLBAR
==========================================================
*/

.statistics-activity-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}

.statistics-activity-toolbar > div:first-child {

    display:
        grid;

    gap:
        4px;

}

.statistics-activity-toolbar strong {

    font-size:
        16px;

    font-weight:
        800;

    color:
        var(
            --text,
            #202333
        );

}

.statistics-activity-toolbar span {

    color:
        var(
            --text-muted,
            #74798b
        );

    font-size:
        13px;

}


.statistics-activity-toggle {

    display:
        flex;

    gap:
        6px;

    padding:
        4px;

    border:
        1px solid
        rgba(
            112,
            125,
            155,
            .22
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .72
        );

}

.statistics-activity-toggle button {

    min-width:
        0;

    padding:
        10px 18px;

    border:
        0;

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(
            --text,
            #202333
        );

    cursor:
        pointer;

    font:
        inherit;

    transition:
        background .15s ease,
        color .15s ease,
        box-shadow .15s ease;

}

.statistics-activity-toggle button:hover,
.statistics-activity-toggle button:focus-visible {

    outline:
        none;

}

.statistics-activity-toggle button.is-active {

    background:
        #7666e8;

    color:
        white;

    box-shadow:
        0 5px 14px
        rgba(
            118,
            102,
            232,
            .24
        );

}


/*
==========================================================
CHART
==========================================================
*/


.statistics-activity-chart-scroll {

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        thin;

}

.statistics-activity-chart {

    min-width:
        100%;

}

.statistics-activity-svg {

    display:
        block;

    min-width:
        100%;

    max-width:
        none;

    overflow:
        visible;

}

.statistics-activity-grid-line {

    stroke:
        #e7ebf3;

    stroke-width:
        1;

}

.statistics-activity-y-label,
.statistics-activity-x-label {

    fill:
        #858b9d;

    font-family:
        inherit;

    font-size:
        11px;

    font-weight:
        700;

}

.statistics-activity-area {

    fill:
        url(
            #activityAreaGradient
        );

}

.statistics-activity-line {

    fill:
        none;

    stroke:
        #6f7ff5;

    stroke-width:
        4;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(
                111,
                127,
                245,
                .12
            )
        );

}

.statistics-activity-point {

    fill:
        #fff;

    stroke:
        #6f7ff5;

    stroke-width:
        4;

    cursor:
        pointer;

    transition:
        r .15s ease,
        stroke-width .15s ease,
        filter .15s ease;

}

.statistics-activity-point:hover,
.statistics-activity-point:focus-visible {

    r:
        8;

    stroke-width:
        5;

    filter:
        drop-shadow(
            0 4px 7px
            rgba(
                70,
                78,
                150,
                .18
            )
        );

    outline:
        none;

}


/*
==========================================================
SUMMARY
==========================================================
*/

.statistics-activity-summary {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        12px;

    margin-top:
        18px;

}

.statistics-activity-summary > div {

    min-width:
        0;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(
            205,
            214,
            231,
            .72
        );

    border-radius:
        16px;

    background:
        rgba(
            248,
            249,
            253,
            .82
        );

}

.statistics-activity-summary span,
.statistics-activity-summary small {

    display:
        block;

    color:
        var(
            --text-muted,
            #74798b
        );

}

.statistics-activity-summary span {

    margin-bottom:
        5px;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .06em;

    text-transform:
        uppercase;

}

.statistics-activity-summary strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(
            --text,
            #202333
        );

    font-size:
        21px;

    font-weight:
        850;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}

.statistics-activity-summary small {

    margin-top:
        3px;

    font-size:
        12px;

}


/*
==========================================================
EMPTY
==========================================================
*/

.statistics-activity-empty {

    display:
        grid;

    min-height:
        260px;

    place-items:
        center;

    color:
        var(
            --text-muted,
            #74798b
        );

    font-size:
        14px;

}


/*
==========================================================
RESPONSIVE
==========================================================
*/

@media(max-width:850px) {

    .statistics-activity-panel {

        padding:
            22px 18px 20px;

        border-radius:
            24px;

    }

    .statistics-activity-toolbar {

        align-items:
            flex-start;

        flex-direction:
            column;

        margin-bottom:
            18px;

    }

    .statistics-activity-toggle {

        width:
            100%;

    }

    .statistics-activity-toggle button {

        flex:
            1 1 0;

    }

    .statistics-activity-summary {

        grid-template-columns:
            1fr;

    }

}


/*
==========================================================
ACTIVITY SUMMARY — TWO COMPACT CARDS
==========================================================
*/

.statistics-activity-summary {

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    width:
        min(
            100%,
            900px
        );

    margin:
        18px auto 0;

    gap:
        14px;

}

.statistics-activity-summary > div {

    padding:
        15px 18px;

}

.statistics-activity-summary strong {

    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        6px;

    font-size:
        20px;

    line-height:
        1.35;

    white-space:
        normal;

}

.statistics-activity-summary strong b {

    font-weight:
        700;

    color:
        var(
            --text-muted,
            #74798b
        );

}

.statistics-activity-summary strong small {

    display:
        inline;

    margin:
        0;

    font-size:
        12px;

    font-weight:
        700;

    color:
        var(
            --text-muted,
            #74798b
        );

}

@media(max-width:850px) {

    .statistics-activity-summary {

        width:
            100%;

        grid-template-columns:
            1fr;

    }

}


/*
==========================================================
ACTIVITY PEAK SUMMARY POLISH
==========================================================
*/

.statistics-activity-summary-separator {
    color: var(--text-muted, #74798b);
    font-size: .58em;
    font-weight: 700;
}

.statistics-activity-summary strong > small {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #74798b);
}


/* =========================
   DARK THEME
========================= */

html[data-theme="dark"] .statistics-activity-panel {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

html[data-theme="dark"] .statistics-activity-toolbar strong,
html[data-theme="dark"] .statistics-activity-toggle button,
html[data-theme="dark"] .statistics-activity-summary strong {
    color: var(--text-primary);
}

html[data-theme="dark"] .statistics-activity-toolbar span,
html[data-theme="dark"] .statistics-activity-y-label,
html[data-theme="dark"] .statistics-activity-x-label,
html[data-theme="dark"] .statistics-activity-summary span,
html[data-theme="dark"] .statistics-activity-summary small {
    color: var(--text-muted);
}

html[data-theme="dark"] .statistics-activity-toggle {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .statistics-activity-grid-line {
    stroke: var(--border-primary);
}

html[data-theme="dark"] .statistics-activity-point {
    stroke: var(--surface-primary);
}

html[data-theme="dark"] .statistics-activity-summary > div {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}