/* User administration drawer refinements. */
.ua-dialog .ua-section-form:has(select[name="role"]) {
    align-items: flex-end;
    column-gap: 12px;
    row-gap: 12px;
}

.ua-dialog select[name="role"] {
    min-height: 44px;
    line-height: 1.45;
}

.ua-dialog select[name="role"] option {
    padding-block: 8px;
}

/* Chromium's customizable select gives the four role choices comfortable,
   app-native spacing instead of the cramped operating-system picker. */
@supports (appearance: base-select) {
    .ua-dialog select[name="role"],
    .ua-dialog select[name="role"]::picker(select) {
        appearance: base-select;
    }

    .ua-dialog select[name="role"] {
        padding: 10px 12px;
    }

    .ua-dialog select[name="role"]::picker(select) {
        margin-top: 6px;
        padding: 6px;
        border: 1px solid #cbd5dc;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(31, 41, 51, .16);
    }

    .ua-dialog select[name="role"] option {
        min-height: 40px;
        padding: 10px 12px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        line-height: 1.4;
    }

    .ua-dialog select[name="role"] option + option {
        margin-top: 3px;
    }

    .ua-dialog select[name="role"] option:hover,
    .ua-dialog select[name="role"] option:focus-visible {
        background: #edf6fb;
    }

    .ua-dialog select[name="role"] option:checked {
        background: #e9f4fb;
        color: #056fae;
        font-weight: 700;
    }

    .ua-dialog select[name="role"] option::checkmark {
        display: none;
    }
}