/* =============================================================
   Classi condivise dalle pagine di gestione utenti (.ud-*)
   -------------------------------------------------------------
   Selettore ruolo, note permessi e utility usate sia da UserDetail
   sia da UserNew. Erano duplicate nei due .razor.css perché il CSS
   scoped di Blazor non si propaga tra componenti distinti.
   ============================================================= */

.ud-mono {
    font-family: var(--its-mono);
    font-size: 12px;
    color: var(--its-text);
    opacity: 0.72;
}

.ud-divider {
    border: 0;
    border-top: 1px solid var(--its-border);
    margin: 14px 0;
}

/* ── Selettore ruolo ────────────────────────────────────────── */

.ud-role-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ud-role-option {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--its-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
    user-select: none;
}

.ud-role-option:hover {
    border-color: var(--its-gold);
}

.ud-role-option.is-on {
    background: var(--its-gold-soft);
    border-color: var(--its-gold-deep);
    box-shadow: 0 0 0 1px var(--its-gold-deep) inset;
}

/* Voce presente ma non scegliibile: il ruolo SuperAdmin quando il tetto di attivi è
   pieno. Resta a schermo perché sparire senza spiegazione è peggio — la descrizione
   viene sostituita dal motivo. Vale solo per chi È SuperAdmin: agli altri il ruolo non
   compare affatto. */
.ud-role-option.is-locked {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--its-surface2);
    border-style: dashed;
}

.ud-role-option.is-locked:hover {
    border-color: var(--its-border);
}

.ud-role-option.is-locked .ud-role-option__desc {
    color: var(--its-danger);
    opacity: 0.9;
}

.ud-role-option__radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--its-border-strong);
    background: var(--its-bg);
    flex-shrink: 0;
    position: relative;
    transition: border-color 100ms, background 100ms;
}

.ud-role-option__radio.is-on {
    border-color: var(--its-gold-deep);
}

.ud-role-option__radio.is-on::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--its-gold-deep);
}

.ud-role-option__head {
    margin-bottom: 4px;
}

.ud-role-option__desc {
    font-size: 12.5px;
    color: var(--its-text);
    opacity: 0.7;
    line-height: 1.45;
}

.ud-role-option__meta {
    font-family: var(--its-mono);
    font-size: 11px;
    color: var(--its-text);
    opacity: 0.5;
    white-space: nowrap;
}

/* ── Nota permessi ──────────────────────────────────────────── */

.ud-perm-note {
    background: var(--its-surface2);
    border: 1px solid var(--its-border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--its-text);
    opacity: 0.85;
    line-height: 1.5;
    margin-bottom: 16px;
}