/* header.css - top bar: title, role badge, user name */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 77px;
    padding: env(safe-area-inset-top, 0px) max(var(--pad-x), env(safe-area-inset-right, 0px)) 0 max(var(--pad-x), env(safe-area-inset-left, 0px));
    background: var(--header);
    color: #fff;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.brand h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge {
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 6px;
    background: #1f2a44;
    color: #f5b301;
    font-size: 0.85rem;
    font-weight: 700;
}

.user { display: flex; align-items: center; gap: 20px; font-size: 1.05rem; min-width: 0; }
.user .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 640px) {
    .topbar { min-height: 60px; padding-top: max(10px, env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
    .brand { gap: 8px; }
    .brand h1 { font-size: 1.15rem; }
    .badge { padding: 3px 8px; font-size: 0.75rem; }
    .user { gap: 10px; font-size: 0.9rem; }
    .user .name { max-width: 110px; }
}

/* Very small phones: drop the name, keep Logout */
@media (max-width: 400px) {
    .user .name { display: none; }
}