/*
 * ALBARON OPTIONS V35
 *
 * MOBILE HEADER:
 *
 * Row 1:
 * Brand
 *
 * Row 2:
 * Home | Ai Bot | Logout | Shadow | Refresh
 *
 * Desktop unchanged.
 */

@media (max-width: 760px) {

    /*
     * Keep brand as row one.
     */

    .topbar > .brand {
        flex:
            1 1 100% !important;

        width:
            100% !important;
    }

    /*
     * All controls become a single grid row.
     */

    .top-actions {
        display: grid !important;

        grid-template-columns:
            .95fr
            .90fr
            1.25fr
            1.45fr
            .85fr !important;

        width:
            100% !important;

        flex:
            1 1 100% !important;

        align-items:
            stretch !important;

        gap:
            4px !important;

        overflow:
            visible !important;
    }

    /*
     * Remove the intermediate navigation wrapper
     * from layout only, so its three links become
     * direct grid items beside Shadow + Refresh.
     */

    .portal-nav-actions {
        display:
            contents !important;
    }

    /*
     * All five controls stay visible.
     */

    .portal-nav-actions .portal-nav-button,
    .mode-badge,
    .refresh-button {
        display:
            inline-flex !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        width:
            100% !important;

        min-width:
            0 !important;

        min-height:
            40px !important;

        margin:
            0 !important;

        padding:
            0
            4px !important;

        box-sizing:
            border-box !important;

        line-height:
            1.08 !important;

        text-align:
            center !important;
    }

    /*
     * Navigation labels.
     */

    .portal-nav-actions .portal-nav-button {
        font-size:
            9.5px !important;

        white-space:
            nowrap !important;
    }

    /*
     * Shadow is the longest label.
     * Allow it to use two compact lines
     * without creating a third header row.
     */

    .mode-badge {
        gap:
            3px !important;

        font-size:
            8.2px !important;

        white-space:
            normal !important;

        text-align:
            center !important;
    }

    .mode-badge i {
        flex:
            0 0 auto !important;

        width:
            6px !important;

        height:
            6px !important;
    }

    .refresh-button {
        font-size:
            9.5px !important;

        white-space:
            nowrap !important;
    }
}

/*
 * Very narrow phones.
 */

@media (max-width: 390px) {

    .topbar {
        padding:
            7px !important;
    }

    .top-actions {
        grid-template-columns:
            .95fr
            .88fr
            1.22fr
            1.50fr
            .82fr !important;

        gap:
            3px !important;
    }

    .portal-nav-actions .portal-nav-button,
    .refresh-button {
        padding:
            0
            2px !important;

        font-size:
            8.6px !important;
    }

    .mode-badge {
        padding:
            0
            2px !important;

        font-size:
            7.6px !important;

        gap:
            2px !important;
    }
}