/* Native dialogs use browser-specific positioning unless all four geometry
   properties are set explicitly. Keep this modal centered even when the
   page is zoomed or another modal stylesheet is loaded. */
dialog.admin-users {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(720px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 28px);
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: #1e293b;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .24);
}

.admin-users::backdrop { background: rgba(15, 23, 42, .48); }
.admin-users__header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 26px 8px; }
.admin-users__eyebrow { margin:0 0 3px; color:#64748b; font-size:.78rem; }
.admin-users h2 { margin:0; font-size:1.45rem; }
.admin-users h3 { margin:0 0 10px; font-size:1rem; }
.admin-users__intro { margin:0 26px 16px; color:#64748b; font-size:.86rem; line-height:1.5; }
.admin-users__message { min-height:20px; margin:0 26px 12px; color:#b42318; font-size:.84rem; }
.admin-users__message[data-kind="success"] { color:#15803d; }
.admin-users__field, .admin-users__form, .admin-users__list-wrap { margin:0 26px 18px; }
.admin-users__field label, .admin-users__form label { display:block; margin-bottom:6px; font-weight:600; font-size:.84rem; }
.admin-users__select, .admin-users__input { width:100%; box-sizing:border-box; min-height:40px; border:1px solid #cbd5e1; border-radius:7px; padding:8px 10px; font:inherit; background:#fff; }
.admin-users__password-row { display:flex; align-items:center; gap:8px; }
.admin-users__password-row .admin-users__input { flex:1; }
.admin-users__button { border:1px solid #cbd5e1; border-radius:7px; background:#fff; color:#334155; padding:9px 12px; cursor:pointer; font:inherit; white-space:nowrap; }
.admin-users__button:hover { border-color:#2563eb; color:#1d4ed8; }
.admin-users__button--primary { margin-top:12px; border-color:#2563eb; background:#2563eb; color:#fff; }
.admin-users__help { display:block; margin-top:6px; color:#64748b; font-size:.76rem; line-height:1.4; }
.admin-users__list-wrap { border-top:1px solid #e2e8f0; padding-top:16px; min-height:0; }
.admin-users__list { display:grid; gap:8px; max-height:230px; overflow:auto; }
.admin-users__user { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #e2e8f0; border-radius:7px; font-size:.82rem; }
.admin-users__user-main { min-width:0; }
.admin-users__user-name { font-weight:600; overflow-wrap:anywhere; }
.admin-users__user-meta { color:#64748b; font-size:.75rem; overflow-wrap:anywhere; }
.admin-users__badge { border-radius:999px; padding:3px 8px; background:#eff6ff; color:#1d4ed8; font-size:.72rem; white-space:nowrap; }
.admin-users__badge--off { background:#fef2f2; color:#b91c1c; }
@media (max-width: 640px) {
  dialog.admin-users {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }
  .admin-users__header, .admin-users__field, .admin-users__form, .admin-users__list-wrap { margin-left:18px; margin-right:18px; }
  .admin-users__intro, .admin-users__message { margin-left:18px; margin-right:18px; }
  .admin-users__password-row { flex-wrap:wrap; }
  .admin-users__password-row .admin-users__input { flex-basis:100%; }
  .admin-users__user { align-items:flex-start; flex-direction:column; }
}
