/* Solid identity colours remain the same in both themes. Text is calculated
   from the database colour for maximum black/white contrast. */
html body .badge[hidden] {
    display: none !important;
}
html body .role-colour.role-colour,
html body [data-bs-theme="dark"] .role-colour.role-colour,
html[data-bs-theme="dark"] body .role-colour.role-colour {
    background: var(--role-background, #6B7280) !important;
    color: var(--role-foreground, #FFFFFF) !important;
    border-color: var(--role-background, #6B7280) !important;
    --tblr-btn-color: var(--role-foreground, #FFFFFF);
    --tblr-btn-hover-color: var(--role-foreground, #FFFFFF);
    --tblr-btn-active-color: var(--role-foreground, #FFFFFF);
    --tblr-btn-hover-bg: var(--role-background, #6B7280);
    --tblr-btn-active-bg: var(--role-background, #6B7280);
    opacity: 1;
}
html body .role-colour.role-colour :is(i, svg, .text-muted, .text-secondary) {
    color: inherit !important;
}
html body a.role-colour.role-colour:hover,
html body button.role-colour.role-colour:hover {
    box-shadow: inset 0 0 0 2px var(--role-foreground, #FFFFFF);
}
html body .role-colour.role-colour:focus-visible {
    outline: 2px solid var(--tblr-body-color, #182433);
    outline-offset: 3px;
}
html body .form-check-label.role-colour {
    padding: .15rem .4rem;
    border-radius: .25rem;
}
html body select.form-select.role-colour {
    /* Native arrow contrasts with either calculated foreground colour. */
    background-image: none !important;
    appearance: auto;
}

/* Tabler positions generic navbar badges as notification counters. The role
   label belongs in the account text column, beneath the name. */
.navbar .user-menu-trigger {
    line-height: 1.25;
}
.navbar .user-menu-avatar {
    flex: 0 0 auto;
}
.navbar .user-menu-details {
    gap: .25rem;
    min-width: 0;
}
.navbar .user-menu-role {
    display: flex;
    line-height: 1;
}
.navbar .user-menu-trigger .user-menu-role > .badge {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    min-width: 0;
    font-size: .6875rem;
    line-height: 1.1;
    padding: .2rem .4rem;
}

@media (max-width: 767.98px) {
    .navbar .user-menu-name { display: none; }
}