/* ═══════════════════════════════════════════════════════════════════════
   ABP Identity — User Create/Edit modal polish
   ─────────────────────────────────────────────────────────────────────
   These rules target the ABP-generated markup inside /identity/users
   modals. Scoped CSS doesn't reach base-class-rendered elements, so
   these have to live globally. Selectors stay defensive (multiple
   fallbacks) because ABP's internal ids / classes can change.
   ═════════════════════════════════════════════════════════════════ */

/* Default user edit modal is too narrow for Roles / OUs side by side
   with the form fields. Boost to 900px on desktop, keep mobile fluid. */
.modal-dialog:has(> .modal-content > .modal-header > h5:is(:where(*)):is(:where(*))) {
    /* noop to document intent; real rule below */
}
body .modal-dialog {
    max-width: min(92vw, 800px);
}
body .modal-dialog.modal-lg,
body .modal-dialog.modal-xl {
    max-width: min(94vw, 900px);
}

/* Fields inside the modal are narrow on wide screens — let them breathe. */
.modal-body .form-control,
.modal-body .form-select,
.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body input[type="number"],
.modal-body textarea {
    max-width: 100%;
}

/* Hide the userPreferences extra-property field — applied via the
   js-hidden-field class a MutationObserver tags in user-edit-hide.js. */
.js-hidden-userpreferences {
    display: none !important;
}

/* Scrollable tab bodies: roles and OU tree can be long — cap them at
   half the viewport and let the form fields above stay visible. */
.modal-body .tab-content > .tab-pane {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Role list: each role sits in a Blazorise <Field> (renders as .mb-3).
   Using :has() we promote checked items to the top of the list so the
   currently-assigned roles are always visible without scrolling. */
.modal-body .tab-pane[id*="Roles"] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.modal-body .tab-pane[id*="Roles"] > .mb-3,
.modal-body .tab-pane[id*="Roles"] > div > .mb-3 {
    margin-bottom: 0 !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.15s;
}

.modal-body .tab-pane[id*="Roles"] .mb-3:has(input[type="checkbox"]:checked) {
    order: -1;
    background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.08));
}

.modal-body .tab-pane[id*="Roles"] .mb-3:hover {
    background: var(--bs-secondary-bg-subtle, rgba(108, 117, 125, 0.08));
}

/* OU tree: same vertical cap so a deep tree doesn't push the modal
   footer off-screen. TreeView indents itself correctly, so we just
   provide the scroll frame. */
.modal-body .tab-pane[id*="OrganizationUnits"] .treeview,
.modal-body .tab-pane[id*="OrganizationUnits"] > div {
    max-height: 50vh;
    overflow-y: auto;
}

/* Slightly tighter form spacing inside the modal — default Blazorise
   margins are too airy once the tab panels scroll. */
.modal-body .tab-pane .field,
.modal-body .tab-pane .mb-3 {
    margin-bottom: 0.65rem;
}

/* ─── Hide the raw-JSON userPreferences extra-property field ───
   The ObjectExtensionManager UI.IsVisible=false flags didn't stick in
   our tenant (possibly cached DTO metadata). CSS belt-and-suspenders:
   hide any Blazorise field whose input name / id references the
   property name, case-insensitively. The `:has()` selector ships in
   every modern browser; the !important keeps this override above the
   ExtensionProperties component's own inline styles. */
.modal-body .mb-3:has([name*="userPreferences" i]),
.modal-body .mb-3:has([id*="userPreferences" i]),
.modal-body .field:has([name*="userPreferences" i]),
.modal-body .field:has([id*="userPreferences" i]),
.modal-body .row > [class*="col"]:has([name*="userPreferences" i]),
.modal-body .row > [class*="col"]:has([id*="userPreferences" i]) {
    display: none !important;
}

/* Same treatment for the user list column — the default ABP table can
   render every extension property as its own column. */
.abp-table th:has(span:is([title*="userPreferences" i])),
.abp-table td:has([data-property-name*="userPreferences" i]) {
    display: none !important;
}