/* =========================================================
   02 — DASHBOARD CONTROLS
   ========================================================= */

.dashboard-controls {
    width: 100%;

    margin-top: 1.25rem;
    margin-bottom: 1rem;

    padding: 0.85rem 0;

    border-top: 1px solid
        var(--border-color, #dbe2ea);

    border-bottom: 1px solid
        var(--border-color, #dbe2ea);
}


/* =========================================================
   PRIMARY CONTROL GRID
   ========================================================= */

.dashboard-controls__grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(180px, 1.35fr)
        minmax(170px, 1fr)
        minmax(135px, 0.72fr)
        minmax(155px, 0.9fr)
        minmax(155px, 0.9fr)
        minmax(165px, 0.9fr);

    gap: 0.85rem;

    align-items: end;
}


/* =========================================================
   FILTER
   ========================================================= */

.dashboard-filter {
    min-width: 0;
}


.dashboard-filter__label {
    min-height: 17px;

    display: flex;
    align-items: center;

    gap: 0.3rem;

    margin: 0 0 0.35rem;

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

    font-size: 0.64rem;
    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.01em;
}


/* =========================================================
   INFO INDICATOR
   ========================================================= */

.dashboard-filter__info {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        var(
            --border-strong,
            #aeb8c5
        );

    border-radius: 50%;

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

    font-size: 0.48rem;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   SEGMENTED BUTTON GROUP
   ========================================================= */

.dashboard-segmented {
    width: 100%;

    min-height: 34px;

    display: grid;

    overflow: hidden;

    border: 1px solid
        var(
            --border-color,
            #dbe2ea
        );

    border-radius: 6px;

    background:
        var(
            --surface,
            #ffffff
        );
}


.dashboard-segmented--two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.dashboard-segmented--three {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.dashboard-segmented__button {
    min-width: 0;
    min-height: 32px;

    padding:
        0.4rem
        0.45rem;

    border: 0;

    border-right: 1px solid
        var(
            --border-color,
            #dbe2ea
        );

    background: transparent;

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

    font: inherit;

    font-size: 0.62rem;
    font-weight: 600;

    line-height: 1.1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.dashboard-segmented__button:last-child {
    border-right: 0;
}


.dashboard-segmented__button:hover {
    background:
        var(
            --surface-subtle,
            #f5f7fa
        );

    color:
        var(
            --text-primary,
            #0f172a
        );
}


.dashboard-segmented__button.is-active {
    position: relative;

    z-index: 1;

    background:
        var(
            --dashboard-accent,
            #079455
        );

    color: #ffffff;

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.03);
}


.dashboard-segmented__icon {
    margin-right: 0.25rem;

    font-size: 0.58rem;
}


/* =========================================================
   SELECTS
   ========================================================= */

.dashboard-filter__select {
    width: 100%;
    height: 34px;

    min-width: 0;

    padding:
        0
        1.9rem
        0
        0.65rem;

    border: 1px solid
        var(
            --border-color,
            #dbe2ea
        );

    border-radius: 6px;

    background-color:
        var(
            --surface,
            #ffffff
        );

    color:
        var(
            --text-primary,
            #0f172a
        );

    font: inherit;

    font-size: 0.68rem;
    font-weight: 500;

    outline: none;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}


.dashboard-filter__select:hover {
    border-color:
        var(
            --border-strong,
            #aeb8c5
        );
}


.dashboard-filter__select:focus {
    border-color:
        var(
            --dashboard-accent,
            #079455
        );

    box-shadow:
        0 0 0 2px
        rgba(7, 148, 85, 0.12);
}


.dashboard-filter__select:disabled {
    color:
        var(
            --text-soft,
            #94a3b8
        );

    background:
        var(
            --surface-subtle,
            #f6f8fa
        );

    cursor: not-allowed;

    opacity: 0.8;
}


/* =========================================================
   CURRENT CONTEXT
   ========================================================= */

.dashboard-current-context {
    min-width: 0;

    padding-left: 0.85rem;

    border-left: 1px solid
        var(
            --border-color,
            #dbe2ea
        );
}


.dashboard-current-context__body {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 0.5rem;
}


.dashboard-current-context__copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 0.18rem;
}


.dashboard-current-context__title {
    overflow: hidden;

    color:
        var(
            --text-primary,
            #0f172a
        );

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1.1;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.dashboard-current-context__period {
    color:
        var(
            --text-muted,
            #64748b
        );

    font-size: 0.62rem;
    font-weight: 600;

    line-height: 1;
}


.dashboard-current-context__icon {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid
        var(
            --border-color,
            #dbe2ea
        );

    border-radius: 6px;

    background:
        var(
            --surface,
            #ffffff
        );

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

    font-size: 0.72rem;
}


/* =========================================================
   SECONDARY CONTROLS
   ========================================================= */

.dashboard-controls__secondary {
    margin-top: 0.75rem;

    padding-top: 0.75rem;

    border-top: 1px solid
        var(
            --border-color,
            #e5e9ef
        );
}


.dashboard-controls__secondary[hidden] {
    display: none;
}


.dashboard-secondary-control {
    width: min(220px, 100%);
}


/* =========================================================
   COMPARE CONTROLS
   ========================================================= */

.dashboard-compare-controls {
    display: flex;
    align-items: end;

    gap: 0.75rem;
}


.dashboard-compare-controls
.dashboard-secondary-control {
    width: 220px;
}


.dashboard-compare-divider {
    min-height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 0.1rem;

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

    font-size: 0.68rem;
    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================
   DARK MODE
   ========================================================= */

[data-theme="dark"]
.dashboard-segmented,

[data-theme="dark"]
.dashboard-filter__select,

[data-theme="dark"]
.dashboard-current-context__icon {
    background-color:
        var(
            --surface,
            #161b22
        );

    border-color:
        var(
            --border-color,
            #30363d
        );

    color:
        var(
            --text-primary,
            #e5e7eb
        );
}


[data-theme="dark"]
.dashboard-filter__select:disabled {
    background:
        var(
            --surface-subtle,
            #11161d
        );

    color:
        var(
            --text-muted,
            #7d8590
        );
}


[data-theme="dark"]
.dashboard-segmented__button {
    border-color:
        var(
            --border-color,
            #30363d
        );
}


[data-theme="dark"]
.dashboard-segmented__button:hover {
    background:
        var(
            --surface-subtle,
            #1c2128
        );
}


[data-theme="dark"]
.dashboard-segmented__button.is-active {
    background:
        var(
            --dashboard-accent,
            #079455
        );

    color: #ffffff;
}


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

@media (max-width: 1180px) {

    .dashboard-controls__grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .dashboard-current-context {
        padding-left: 0;

        border-left: 0;
    }

}


@media (max-width: 720px) {

    .dashboard-controls__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 0.8rem;
    }

}


@media (max-width: 640px) {

    .dashboard-compare-controls {
        flex-direction: column;
        align-items: stretch;
    }


    .dashboard-compare-controls
    .dashboard-secondary-control {
        width: 100%;
    }


    .dashboard-compare-divider {
        min-height: auto;

        justify-content: flex-start;
    }

}


@media (max-width: 520px) {

    .dashboard-controls__grid {
        grid-template-columns: 1fr;
    }

}