/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 50;

    width: 100%;
    min-height: var(--header-height);

    display: flex;
    align-items: center;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.dashboard-header__inner {
    position: relative;

    width: 100%;
    min-height: var(--header-height);

    display: grid;

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

    align-items: center;

    gap: 24px;

    padding:
        0
        24px;
}


/* =========================================================
   LEFT — BRAND
   ========================================================= */

.dashboard-header__left {
    min-width: 0;

    display: flex;

    align-items: center;

    justify-content:
        flex-start;

    gap: 12px;
}


.header-brand {
    min-width: 0;

    display: flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap: 1px;

    color:
        var(--text-primary);

    font-family:
        inherit;

    text-decoration:
        none;
}


.header-brand:hover {
    color:
        var(--text-primary);
}


.header-brand__title {
    max-width: 100%;

    overflow: hidden;

    color:
        var(--text-primary);

    font-family:
        inherit;

    font-size:
        1rem;

    font-weight:
        800;

    line-height:
        1.08;

    letter-spacing:
        -0.025em;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.header-brand__tagline {
    margin: 0;

    color:
        var(--text-secondary);

    font-family:
        inherit;

    font-size:
        0.61rem;

    font-weight:
        500;

    line-height:
        1.15;

    white-space:
        nowrap;
}


/* =========================================================
   CENTER NAVIGATION
   ========================================================= */

.header-nav {
    height:
        var(--header-height);

    display: flex;

    align-items:
        stretch;

    justify-content:
        center;

    gap:
        20px;
}


.header-nav__link {
    position: relative;

    min-width:
        max-content;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        0
        8px;

    color:
        var(--text-secondary);

    font-family:
        inherit;

    font-size:
        0.72rem;

    font-weight:
        650;

    text-decoration:
        none;

    transition:
        color
        var(--transition-fast);
}


.header-nav__link:hover {
    color:
        var(--text-primary);
}


.header-nav__link--active {
    color:
        var(--text-primary);

    font-weight:
        750;
}


/* Active underline */

.header-nav__link--active::after {
    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 0;

    height: 3px;

    border-radius:
        3px
        3px
        0
        0;

    background:
        var(--brand-green);
}


.header-nav__icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        0.82rem;

    line-height:
        1;
}


/* =========================================================
   RIGHT ACTIONS
   ========================================================= */

.dashboard-header__actions {
    min-width: 0;

    display: flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap: 12px;
}


/* =========================================================
   SUPPORT / DONATE
   ========================================================= */

.header-support-button {
    min-height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 6px;

    padding:
        6px
        12px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        8px;

    color:
        var(--text-secondary);

    background:
        var(--surface);

    font-family:
        inherit;

    font-size:
        0.68rem;

    font-weight:
        650;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        color
        var(--transition-fast),
        background-color
        var(--transition-fast),
        border-color
        var(--transition-fast);
}


/*
 * Inactive state.
 *
 * Support / Donate remains visible in the shell,
 * but does not visually suggest that it is currently
 * an available action.
 */

.header-support-button--inactive,
.header-support-button:disabled {
    color:
        var(--text-muted);

    border-color:
        var(--border);

    background:
        var(--surface);

    opacity:
        0.68;

    cursor:
        default;

    pointer-events:
        none;

    box-shadow:
        none;

    -webkit-text-fill-color:
        currentColor;
}


.header-support-button--inactive:hover,
.header-support-button:disabled:hover {
    color:
        var(--text-muted);

    border-color:
        var(--border);

    background:
        var(--surface);
}


.header-support-button__icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        0.9rem;

    line-height:
        1;
}


/* =========================================================
   HELP
   ========================================================= */

.header-help-button {
    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    flex:
        0
        0
        30px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        50%;

    color:
        var(--text-primary);

    background:
        var(--surface);

    font-family:
        inherit;

    font-size:
        0.72rem;

    font-weight:
        800;

    line-height:
        1;

    text-decoration:
        none;

    transition:
        background-color
        var(--transition-fast),
        border-color
        var(--transition-fast),
        color
        var(--transition-fast);
}


.header-help-button:hover {
    color:
        var(--brand-green);

    border-color:
        var(--brand-green);

    background:
        var(--brand-green-soft);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {
    display:
        none;

    width:
        36px;

    height:
        36px;

    place-items:
        center;

    flex:
        0
        0
        36px;

    padding:
        0;

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    color:
        var(--text-primary);

    background:
        var(--surface);

    font-family:
        inherit;

    font-size:
        1rem;

    line-height:
        1;

    cursor:
        pointer;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .dashboard-header__inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            minmax(0, 1fr);

        gap:
            16px;

        padding:
            0
            18px;
    }


    .mobile-menu-button {
        display:
            grid;
    }


    .header-nav {
        gap:
            10px;
    }


    .header-brand__title {
        font-size:
            0.92rem;
    }


    .header-brand__tagline {
        font-size:
            0.58rem;
    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {

    .dashboard-header__inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap:
            12px;
    }


    .header-nav {
        display:
            none;
    }


    .dashboard-header__actions {
        justify-self:
            end;
    }


    .header-brand__title {
        font-size:
            0.88rem;
    }


    .header-brand__tagline {
        font-size:
            0.57rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .dashboard-header {
        min-height:
            60px;
    }


    .dashboard-header__inner {
        min-height:
            60px;

        padding:
            0
            14px;
    }


    .dashboard-header__left {
        gap:
            9px;
    }


    .header-brand__title {
        font-size:
            0.82rem;
    }


    .header-brand__tagline {
        display:
            none;
    }


    .header-support-button {
        min-height:
            32px;

        padding:
            5px
            9px;

        font-size:
            0.62rem;
    }


    .header-support-button__icon {
        font-size:
            0.82rem;
    }


    .header-help-button {
        width:
            28px;

        height:
            28px;

        flex-basis:
            28px;
    }


    .mobile-menu-button {
        width:
            34px;

        height:
            34px;

        flex-basis:
            34px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .header-support-button span:last-child {
        display:
            none;
    }


    .header-support-button {
        width:
            32px;

        padding:
            0;
    }

}