.user-list {
    display: flex;
    padding-left: 20px;
}

.user-list .user-list-item {
    margin-left: -20px;
}

.avatar-sm {
    object-fit: cover;
    width: 36px;
    height: 36px;
    box-shadow: 0 0 0 1px var(--bs-border-color);
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
    overflow: hidden;
    vertical-align: middle;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}
/* AdminKit overrides Bootstrap's alert with `display: flex; padding: 0` and a
   hard-coded colour. This used to be patched by commenting the rule out inside
   app.css, which was silently lost whenever AdminKit was upgraded — and was
   never applied to dark.css, so alerts rendered differently per theme.
   Neutralised here instead so it survives upgrades and covers both themes.
   Layout only: colour is deliberately left to AdminKit. Overriding it with
   var(--bs-alert-color) resolves to --bs-warning-text-emphasis (#654a12) in
   BOTH bundles, since AdminKit's dark build never re-derives the emphasis
   palette — which made dark-mode warning alerts dark-on-dark. */
.alert {
    display: block;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
}

/* Body font: Poppins, replacing AdminKit's Inter. AdminKit declares the family
   once as --bs-font-sans-serif on :root and every rule derives from it via
   var(), so overriding that single variable retypes the whole theme. Kept here
   rather than patched into app.css/dark.css so it survives AdminKit upgrades.
   The webfont itself is loaded by the <link> in Layout*.liquid. */
:root {
    --bs-font-sans-serif: "Poppins", "Helvetica Neue", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ---- Split "cover" auth layout -----------------------------------------
   Used by Layout-Login.liquid: a full-bleed image on one half, the auth form
   on the other, collapsing to form-only below the xl breakpoint. AdminKit
   ships no .auth-* classes, so these are ours. Long-hand offsets rather than
   `inset`, which AdminKit's browserslist (Safari/iOS >= 12) predates. */
.auth-pane {
    min-height: 100vh;
}

.auth-cover {
    overflow: hidden;
}

.auth-cover-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sits over the photo; the gradient keeps text legible whatever the image. */
.auth-cover-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.5rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}

/* Force white rather than using .text-white: AdminKit's dark build inverts the
   palette (--bs-white-rgb becomes 34,46,60), so .text-white renders dark navy
   under data-bs-theme="dark". This caption sits on a photo that is dark in
   both themes, so it must stay white regardless of theme. */
.auth-cover-caption,
.auth-cover-caption h1,
.auth-cover-caption h2,
.auth-cover-caption h3,
.auth-cover-caption p {
    color: #fff;
}

/* Caps the form width so it stays readable when the pane is half a wide
   monitor; margin-inline keeps it centred under both LTR and RTL cultures. */
.auth-form {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
}

/* Layout-TwoFactor shares this layout but also serves the 2FA settings screen,
   which lists methods and recovery codes rather than one code field. */
.auth-form-wide {
    max-width: 560px;
}

/* OrchardCore's Register / ForgotPassword / ResetPassword drivers wrap their form
   in `<div class="row"><div class="col-md-offset-4 col-md-8">`. col-md-offset-4 is
   Bootstrap 3 syntax with no Bootstrap 5 equivalent, so it is inert and leaves a
   bare col-md-8 rendering the fields at 67% of the pane — visibly narrower than
   Login, which this theme overrides directly. The pane is already width-capped by
   .auth-form, so flatten any column back to full width. Direct children only, so a
   form that deliberately nests its own grid is left alone. */
.auth-form > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* --- OrchardCore two-factor settings, shown through Layout-TwoFactor --------
   That view is assembled from OrchardCore admin-theme markup this theme never
   styles. Two consequences, both corrected below and scoped to .auth-form so
   the admin's own rendering is untouched:

   1. Method rows are `.card-body.p-0 > .row.mx-0` with p-3 on only the middle
      column. The outer columns keep the default half-gutter (0.375rem), so the
      icon and the action buttons sit hard against the card edge and misalign
      with the card header text at 1.25rem. Pinned to the card's own spacer so
      the list lines up with everything above it.
   2. .ocat-wrapper / .ocat-label come from OrchardCore's admin theme and are
      undefined here, leaving the preferred-method control butted against the
      alert above it and its label against the select. */
.auth-form .card-body > .row > .col-auto:first-child {
    padding-left: var(--bs-card-spacer-x, 1.25rem);
}

.auth-form .card-body > .row > .col-auto:last-child {
    padding-right: var(--bs-card-spacer-x, 1.25rem);
}

.auth-form .ocat-wrapper {
    margin-top: 1rem;
}

.auth-form .ocat-label {
    display: block;
    margin-bottom: .5rem;
}

/* Space above the submit button (Update on the two-factor settings form), set on
   the button itself rather than its .mb-3 wrapper so it does not depend on how
   OrchardCore happens to wrap it. The wrapper's trailing margin is dropped
   separately: it stacks with the card body's bottom padding and the next
   card-header's top padding into a ~3rem gap before "Two-factor methods". */
.auth-form .card-body form button[type="submit"] {
    margin-top: 1rem;
}

.auth-form .card-body > form > .mb-3:last-child {
    margin-bottom: 0;
}

/* OrchardCore's ReCaptcha module emits a bare <div class="g-recaptcha"> with no
   spacing utility, so the widget butts straight against the submit button below
   it. Matches the 1rem rhythm of the .mb-3 fields around it. Set here rather
   than on the element because the markup comes from the module, not the theme. */
.auth-form .g-recaptcha {
    margin-bottom: 1rem;
}