/* /public_html/assets/css/dashboard-topbar.css */

:root {
    --dashboard-shell-utility-size: 2.8rem;
    --dashboard-shell-profile-size: 3rem;
    --dashboard-shell-utility-gap: 0.45rem;
    --dashboard-shell-glass-bg: color-mix(in srgb, var(--color-bg, #ffffff) 62%, transparent);
    --dashboard-shell-glass-border: color-mix(in srgb, var(--color-border-subtle, rgba(15,23,42,0.12)) 72%, transparent);
    --dashboard-shell-glass-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

body.is-dashboard-shell-visible .app-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    background: var(--dashboard-shell-glass-bg);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    border-bottom: 1px solid var(--dashboard-shell-glass-border);
    box-shadow: none;
}

body.is-dashboard-shell-visible .app-header-left,
body.is-dashboard-shell-visible .app-header-right {
    position: relative;
    z-index: 2;
    min-width: 0;
}

body.is-dashboard-shell-visible .app-header-left {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: var(--dashboard-shell-utility-size);
}

body.is-dashboard-shell-visible .app-header-brand {
    display: none !important;
}

body.is-dashboard-shell-visible .dashboard-topbar-left {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: var(--dashboard-shell-utility-size);
    min-height: var(--dashboard-shell-utility-size);
}

body.is-dashboard-shell-visible .dashboard-topbar-left:empty {
    visibility: hidden;
}

body.is-dashboard-shell-visible .app-header-nav {
    position: static;
    transform: none;
    width: auto;
    min-width: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.dashboard-topbar-context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-width: 0;
    pointer-events: auto;
}

.dashboard-topbar-context__title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-topbar-context__title.is-logo-mode {
    min-height: 2rem;
}

.dashboard-topbar-context__logo {
    display: block;
    max-height: 2.05rem;
    width: auto;
}

.dashboard-topbar-context__subtitle {
    margin: 0.12rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dashboard-topbar-context__subtitle.is-hidden {
    display: none;
}

body.is-dashboard-shell-visible .app-header-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dashboard-shell-utility-gap);
    min-width: 0;
}

body.is-dashboard-shell-visible .dashboard-topbar-extras {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dashboard-shell-utility-gap);
    min-width: 0;
    flex-wrap: nowrap;
}

body.is-dashboard-shell-visible .dashboard-topbar-left-action,
body.is-dashboard-shell-visible .dashboard-topbar-extra-action,
body.is-dashboard-shell-visible .icon-btn[data-notifications-navbar-btn],
body.is-dashboard-shell-visible .icon-btn[data-chat-navbar-btn] {
    width: var(--dashboard-shell-utility-size) !important;
    min-width: var(--dashboard-shell-utility-size) !important;
    height: var(--dashboard-shell-utility-size) !important;
    min-height: var(--dashboard-shell-utility-size) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    gap: 0 !important;
    justify-content: center !important;
    flex: 0 0 var(--dashboard-shell-utility-size);
    border: 1px solid var(--dashboard-shell-glass-border) !important;
    background: color-mix(in srgb, var(--color-surface, #fff) 62%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    box-shadow: var(--dashboard-shell-glass-shadow);
}

body.is-dashboard-shell-visible .icon-btn[data-profile-btn] {
    width: var(--dashboard-shell-profile-size) !important;
    min-width: var(--dashboard-shell-profile-size) !important;
    height: var(--dashboard-shell-profile-size) !important;
    min-height: var(--dashboard-shell-profile-size) !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    flex: 0 0 var(--dashboard-shell-profile-size);
    border: 1px solid var(--dashboard-shell-glass-border) !important;
    background: color-mix(in srgb, var(--color-surface, #fff) 62%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.06);
    -webkit-backdrop-filter: blur(14px) saturate(1.06);
    box-shadow: var(--dashboard-shell-glass-shadow);
}

body.is-dashboard-shell-visible .dashboard-topbar-left-action .ui-btn__label,
body.is-dashboard-shell-visible .dashboard-topbar-left-action .ui-btn__label--full,
body.is-dashboard-shell-visible .dashboard-topbar-left-action .ui-btn__label--short,
body.is-dashboard-shell-visible .dashboard-topbar-extra-action .ui-btn__label,
body.is-dashboard-shell-visible .dashboard-topbar-extra-action .ui-btn__label--full,
body.is-dashboard-shell-visible .dashboard-topbar-extra-action .ui-btn__label--short {
    display: none !important;
}

body.is-dashboard-shell-visible .dashboard-topbar-left-action .ui-btn__icon,
body.is-dashboard-shell-visible .dashboard-topbar-extra-action .ui-btn__icon {
    margin: 0 !important;
    font-size: 1.05rem;
}

body.is-dashboard-shell-visible .icon-btn[data-profile-btn] .profile-avatar,
body.is-dashboard-shell-visible .icon-btn[data-profile-btn] .profile-initials,
body.is-dashboard-shell-visible .icon-btn[data-profile-btn] .profile-icon {
    width: 100%;
    height: 100%;
}

body.is-dashboard-shell-visible .ui-btn.ui-btn--ghost,
body.is-dashboard-shell-visible .ui-btn.ui-btn--soft,
body.is-dashboard-shell-visible .ui-btn.ui-btn--neutral,
body.is-dashboard-shell-visible .icon-btn[data-notifications-navbar-btn],
body.is-dashboard-shell-visible .icon-btn[data-chat-navbar-btn] {
    border-color: var(--dashboard-shell-glass-border) !important;
}

@media (max-width: 1099px) {
    .dashboard-topbar-context__title {
        font-size: 1rem;
    }
}

@media (max-width: 719px) {
    :root {
        --dashboard-shell-utility-size: 2.55rem;
        --dashboard-shell-profile-size: 2.85rem;
        --dashboard-shell-utility-gap: 0.3rem;
    }

    body.is-dashboard-shell-visible .app-header {
        gap: 0.4rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    body.is-dashboard-shell-visible .app-header-nav {
        justify-content: center;
    }

    .dashboard-topbar-context__title,
    .dashboard-topbar-context__subtitle {
        display: none !important;
    }
}

body.is-dashboard-shell-visible[data-dashboard-shell-topbar-mode="short"] .dashboard-topbar-context__subtitle,
body.is-dashboard-shell-visible[data-dashboard-shell-topbar-mode="icon"] .dashboard-topbar-context__subtitle {
    display: none !important;
}