/*
 * Larger internal topbar for every logged-in profile (Developer,
 * Editor, Employee, Manager) - taller bar, button-like nav links,
 * bigger text and icons. Loaded once from templates/base.html, after
 * the shared traki base.css it overrides. Never reaches the dynamic
 * public pages' own nav panel component (wpc-nav-*): page_detail.html
 * drops this topbar entirely.
 */
.topbar {
    padding: 10px 32px;
    min-height: 60px;
    box-sizing: border-box;
}
.topbar-left { gap: 32px; }
.topbar-brand { font-size: 19px; }
.topbar-brand-lab-tag { font-size: 13px; }

.topbar-nav { gap: 6px; }
.topbar-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    transition: background .15s, opacity .15s;
}
.topbar-nav a:hover {
    background: rgba(255, 255, 255, .15);
    text-decoration: none;
}
.topbar-nav a i {
    margin-right: 0;
    font-size: 16px;
}

.topbar-account { gap: 18px; }
.topbar-account a,
.topbar-account button { font-size: 15px; }
.topbar-icon-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
}
.account-menu > summary {
    font-size: 15px;
    padding: 8px 12px;
}
.account-menu-card a,
.account-menu-card button { font-size: 15px; }

.user-badge { font-size: 14px; }
.user-badge-role {
    font-size: 12px;
    padding: 4px 12px;
}

.lang-dropdown-trigger,
.instance-switch-btn {
    font-size: .875rem;
    padding: .5rem .85rem;
    border-radius: 6px;
}

/* The portal name is a link (to the profile's dashboard, or home on
   non-profile pages) - keep it looking like plain brand text. */
a.topbar-brand,
a.topbar-brand:hover {
    color: inherit;
    text-decoration: none;
}
a.topbar-brand:hover { opacity: .85; }

/* Phone width: the right-hand area (instance switch, language, profile
   switch, account menu) wraps under the brand and nav instead of pushing
   the page sideways. The email leaves the badge (it is on the Account >
   Details page) and the account menu sits at the right edge, so its card,
   which opens leftwards, stays inside the viewport. Same behaviour as
   kibela's topbar.css. */
@media (max-width: 640px) {
    .topbar {
        padding: 10px 16px;
        gap: 8px;
    }
    .topbar-left { gap: 8px 16px; }
    .topbar-right {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
    .topbar-account {
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 8px 12px;
        min-width: 0;
    }
    .user-badge {
        flex-wrap: wrap;
        min-width: 0;
        gap: 4px 8px;
    }
    .user-badge-email { display: none; }
    .account-menu { margin-left: auto; }
}