/* DELORA — compact mobile topbars across panel surfaces */
.panel-global-logout{display:flex;align-items:center;flex:0 0 auto}
.panel-global-logout[hidden]{display:none}
.panel-global-logout form{margin:0;display:flex;align-items:center}
.panel-global-logout button{
    height:42px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid color-mix(in srgb,var(--danger,#c94b68) 22%,var(--line,#e9dfea));
    border-radius:13px;
    color:var(--danger,#b93f5d);
    background:color-mix(in srgb,var(--danger,#c94b68) 7%,var(--surface,#fff));
    font:inherit;
    font-size:.72rem;
    font-weight:900;
    cursor:pointer;
    transition:.18s ease;
}
.panel-global-logout button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--danger,#c94b68) 42%,var(--line,#e9dfea));background:color-mix(in srgb,var(--danger,#c94b68) 12%,var(--surface,#fff))}
.panel-global-logout svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.panel-global-logout.is-floating{position:fixed;left:16px;bottom:18px;z-index:220;padding:5px;border-radius:16px;background:var(--surface,#fff);box-shadow:0 15px 45px rgba(38,20,48,.18)}

@media (max-width:700px){
    body.panel-body .topbar{
        height:68px;
        min-height:68px;
        padding:0 12px;
        gap:8px;
        overflow:visible;
    }
    body.panel-body .topbar-heading{
        flex:1 1 auto;
        min-width:0;
        gap:9px;
    }
    body.panel-body .topbar-heading>div{
        flex:1 1 auto;
        min-width:0;
    }
    body.panel-body .topbar-heading h1{
        margin:0;
        overflow:hidden;
        font-size:1.04rem;
        line-height:1.35;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    body.panel-body .today-label{display:none!important}

    body.panel-body .topbar-actions{
        flex:0 0 auto;
        display:flex;
        align-items:center;
        gap:6px!important;
    }

    /* On phones the context/user card only becomes an empty square after its text is hidden. */
    body.panel-body .topbar-actions .user-chip,
    body.panel-body .topbar-actions .trial-chip{
        display:none!important;
    }
    body.platform-body .topbar-actions>.button{
        display:none!important;
    }

    body.panel-body .mobile-menu,
    body.panel-body .topbar-actions>.icon-button,
    body.panel-body .salon-notification-trigger,
    body.panel-body .panel-global-logout button{
        width:42px!important;
        min-width:42px!important;
        max-width:42px!important;
        height:42px!important;
        min-height:42px!important;
        padding:0!important;
        border-radius:13px!important;
        line-height:1!important;
        display:inline-grid!important;
        place-items:center!important;
        flex:0 0 42px!important;
        box-sizing:border-box;
    }
    body.panel-body .mobile-menu{
        margin:0;
        font-size:1.08rem;
    }
    body.panel-body [data-theme-toggle]{
        font-size:1.08rem;
    }
    body.panel-body .salon-notification{
        width:42px;
        height:42px;
        flex:0 0 42px;
    }
    body.panel-body .salon-notification-trigger svg,
    body.panel-body .topbar-actions>.icon-button svg{
        width:20px!important;
        height:20px!important;
        margin:0!important;
        display:block;
    }
    body.panel-body .panel-global-logout,
    body.panel-body .panel-global-logout form{
        width:42px;
        height:42px;
        flex:0 0 42px;
    }
    body.panel-body .panel-global-logout button span{display:none!important}
    body.panel-body .panel-global-logout button svg{width:19px;height:19px}

    /* Keep the notification popover anchored below the compact header. */
    body.panel-body .salon-notification-panel{
        top:74px;
    }

    /* Customer portal: same icon geometry, without the previous floating logout button. */
    body.portal-body .portal-header-inner{
        padding-inline:12px;
        gap:8px;
    }
    body.portal-body .portal-header-actions{
        display:flex;
        align-items:center;
        gap:6px!important;
        flex:0 0 auto;
    }
    body.portal-body .portal-header-actions .panel-global-logout{
        position:static!important;
        left:auto!important;
        bottom:auto!important;
        z-index:auto!important;
        width:40px;
        height:40px;
        padding:0!important;
        border-radius:0!important;
        background:transparent!important;
        box-shadow:none!important;
    }
    body.portal-body .portal-header-actions .panel-global-logout form{width:40px;height:40px}
    body.portal-body .portal-header-actions .panel-global-logout button,
    body.portal-body .portal-cart-button,
    body.portal-body .portal-header .salon-pill{
        width:40px!important;
        min-width:40px!important;
        max-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0!important;
        display:grid!important;
        place-items:center!important;
        border-radius:12px!important;
        flex:0 0 40px!important;
        box-sizing:border-box;
    }
    body.portal-body .portal-header-actions .panel-global-logout button span,
    body.portal-body .portal-header .salon-pill span{display:none!important}
    body.portal-body .portal-header-actions .panel-global-logout svg,
    body.portal-body .portal-cart-button svg,
    body.portal-body .portal-header .salon-pill svg{
        width:18px!important;
        height:18px!important;
        margin:0!important;
    }
}

@media (max-width:410px){
    body.panel-body .topbar{padding-inline:9px;gap:6px}
    body.panel-body .topbar-heading{gap:7px}
    body.panel-body .topbar-heading h1{font-size:.96rem}
    body.panel-body .topbar-actions{gap:4px!important}
    body.panel-body .mobile-menu,
    body.panel-body .topbar-actions>.icon-button,
    body.panel-body .salon-notification-trigger,
    body.panel-body .panel-global-logout button{
        width:40px!important;
        min-width:40px!important;
        max-width:40px!important;
        height:40px!important;
        min-height:40px!important;
        flex-basis:40px!important;
        border-radius:12px!important;
    }
    body.panel-body .salon-notification,
    body.panel-body .panel-global-logout,
    body.panel-body .panel-global-logout form{width:40px;height:40px;flex-basis:40px}
}