/* Portal pages inside the app shell (tokens in app.css), plus the self set-up page,
   which is pre-sign-in and uses the Darbi sign-in kit in a single column.
   Grammar: white workspace, ruled rows instead of boxes, one blue for action. */

/* ── Page frame ──────────────────────────────────────────────────────────── */
.admin-page { display: grid; gap: 28px; align-content: start; max-width: 1120px; padding: 36px 48px 72px; }
.admin-page--narrow { max-width: 880px; }
.admin-page--enhanced { width: 100%; max-width: 1240px; margin-inline: auto; gap: 24px; }
.admin-page--enhanced.admin-page--narrow { max-width: 960px; }

.admin-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--rule);
}
.admin-head h1 { font: 800 28px/1.2 var(--font); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.admin-page--enhanced .admin-head { padding-bottom: 24px; }
.page-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page-title__icon {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(145deg, var(--blue-wash), #dbeafe); color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}
.page-title__icon .rzi { font-size: 25px !important; }
.page-eyebrow { display: block; margin-bottom: 2px; color: var(--blue); font: 700 11px/16px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.admin-sub { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.admin-sub b { font-weight: 600; color: var(--ink-2); }
.admin-lead { max-width: 70ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.admin-note { max-width: 80ch; font-size: 13px; line-height: 1.55; color: var(--muted); }
.admin-card { display: grid; gap: 16px; }
.admin-card h2, .admin-section h2 { font: 700 17px/24px var(--font); letter-spacing: -.01em; color: var(--ink); }
.admin-section { display: grid; gap: 16px; }
.admin-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-actions .admin-note { margin-right: auto; }
.admin-actions--start { justify-content: flex-start; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.section-body { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.section-body b { font-weight: 600; color: var(--ink); }

/* Sticky save bar at the foot of long forms */
.form-footer {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  margin-top: -8px; padding: 16px 0; border-top: 1px solid var(--rule); background: var(--paper);
}
.form-footer .form-status { margin-right: auto; font-size: 14px; color: var(--muted); }
.form-footer .form-status--ok { color: var(--ok); font-weight: 600; }

/* ── Grouped settings: title and explanation on the left, rows on the right ── */
.settings-groups { display: grid; }
.settings-group { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 16px 48px; padding: 28px 0; border-top: 1px solid var(--rule); }
.settings-groups > .settings-group:first-child { border-top: 0; padding-top: 4px; }
.settings-group__head h2 { font: 700 16px/24px var(--font); color: var(--ink); }
.settings-group__head p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.settings-group__body { display: grid; gap: 20px; align-content: start; min-width: 0; }
.admin-page--enhanced .settings-groups { gap: 16px; }
.admin-page--enhanced .settings-group {
  padding: 24px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .025);
}
.admin-page--enhanced .settings-groups > .settings-group:first-child { padding-top: 24px; }
.settings-group__icon {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px;
  border-radius: 10px; background: var(--blue-wash); color: var(--blue);
}
.settings-group__icon .rzi { font-size: 20px !important; }
.admin-page--enhanced .form-footer {
  margin: 0; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 -6px 24px rgba(15, 23, 42, .05);
}

.setting-list, .settings-group__body.setting-list { display: grid; gap: 0; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; padding: 16px 0; border-top: 1px solid var(--wash-2); }
.setting-list > .setting-row:first-child { border-top: 0; padding-top: 0; }
.setting-row > div:first-child { display: grid; gap: 2px; min-width: 0; }
.setting-row b, .plain-label { font: 600 14px/20px var(--font); color: var(--ink); }
.setting-row .hint { max-width: 58ch; }
.setting-row .num, .setting-row input[type="number"] { width: 96px; }
.setting-row .date { width: 180px; }
.setting-row .wide { width: 260px; }
.setting-row > :last-child { flex: none; }   /* controls never shrink, so the control column stays aligned */
.setting-control { display: flex; align-items: center; gap: 10px; flex: none; }
.setting-control .state { min-width: 24px; font-size: 13px; font-weight: 600; color: var(--muted); }
.inline-inputs { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.inline-inputs label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.stack-inputs { display: grid; gap: 8px; width: 260px; }

.status-line { display: flex; gap: 8px; flex-wrap: wrap; }

/* Radio groups */
.radio-row { display: flex; gap: 8px 20px; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 500 14px/20px var(--font); color: var(--ink); cursor: pointer; }
.radio-row input { width: 16px; height: 16px; margin: 0; }
.radio-row input:disabled + span, .radio-row label:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.radio-row--stack { flex-direction: column; gap: 4px; }
fieldset { border: 0; min-width: 0; }
.field-legend { padding: 0; margin-bottom: 6px; font: 600 13px/18px var(--font); color: var(--ink-2); }

/* ── Inline summary (Users): counts in one ruled line ─────────────────────── */
.summary-inline { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--muted); }
.summary-inline li { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 16px; border-left: 1px solid var(--rule); }
.summary-inline li:first-child { padding-left: 0; border-left: 0; }
.summary-inline b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Dashboard-like account totals on the Users page */
.summary-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.summary-cards li {
  position: relative; display: grid; gap: 3px; min-height: 112px; padding: 18px 20px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.summary-cards li::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rule-strong); }
.summary-cards li:nth-child(1)::after { background: #22c55e; }
.summary-cards li:nth-child(2)::after { background: #f59e0b; }
.summary-cards li:nth-child(3)::after { background: #60a5fa; }
.summary-cards li:nth-child(4)::after { background: #ef4444; }
.summary-cards span { color: var(--muted); font: 600 12px/18px var(--font); text-transform: uppercase; letter-spacing: .045em; }
.summary-cards b { color: var(--ink); font: 800 28px/34px var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.summary-cards small { color: var(--muted); font-size: 12px; line-height: 17px; }

.content-card { overflow: hidden; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); box-shadow: 0 2px 12px rgba(15, 23, 42, .04); }
.content-card__head { padding: 20px; }
.content-card__head h2 { color: var(--ink); font: 700 17px/24px var(--font); letter-spacing: -.01em; }
.th-hint { display: inline-flex; vertical-align: -3px; margin-left: 2px; color: var(--muted); cursor: help; }
.th-hint .rzi { font-size: 15px !important; }
.user-directory .table-scroll { border-bottom: 0; }
.connection-notice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 20px; border-top: 1px solid #fde68a; background: #fffbeb; color: var(--warn); font-size: 13px; }
.connection-notice .rzi { flex: none; margin-top: 1px; font-size: 18px !important; }
.setting-warn { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 8px; background: var(--warn-wash); color: var(--warn); font-size: 13px; line-height: 18px; }
.setting-warn .rzi { flex: none; font-size: 18px !important; }
.setting-warn b { color: inherit; }

.security-overview {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid #bfdbfe;
  border-radius: 14px; background: linear-gradient(135deg, #eff6ff, #f8fbff); color: var(--ink);
}
.security-overview__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--paper); color: var(--blue); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.security-overview__icon .rzi { font-size: 22px !important; }
.security-overview > div { display: grid; flex: 1; min-width: 0; }
.security-overview__label { color: var(--muted); font-size: 12px; line-height: 17px; }
.security-overview b { font-size: 15px; line-height: 21px; }

/* Per-browser light/dark appearance picker */
.appearance-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .025);
}
.appearance-card__copy { display: flex; align-items: center; gap: 14px; }
.appearance-card__copy .settings-group__icon { flex: none; margin: 0; }
.appearance-card h2 { color: var(--ink); font: 700 16px/22px var(--font); }
.appearance-card p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.theme-options { display: flex; gap: 8px; padding: 4px; border: 1px solid var(--rule); border-radius: 10px; background: var(--wash); }
.theme-option {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 94px; height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted);
  font: 600 13px/18px var(--font); cursor: pointer;
}
.theme-option:hover { color: var(--ink); }
.theme-option.selected { border-color: var(--rule); background: var(--paper); color: var(--blue); box-shadow: var(--shadow-control); }
.theme-option .rzi { font-size: 18px !important; }

html[data-theme="dark"] .admin-table tbody tr:hover td { background: #131e30; }
html[data-theme="dark"] .page-title__icon { background: linear-gradient(145deg, #172b46, #1d3554); }
html[data-theme="dark"] .admin-page--enhanced .form-footer { background: rgba(16, 24, 39, .96); }
html[data-theme="dark"] .connection-notice { border-color: #664d19; background: #2d2413; }
html[data-theme="dark"] .security-overview { border-color: #244a73; background: linear-gradient(135deg, #13263e, #101c2d); }
html[data-theme="dark"] .chip-bad { background: #3d1b22; color: #fca5a5; }
html[data-theme="dark"] .chip-info { color: #93c5fd; }

/* Toolbar above a table */
.table-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.table-toolbar .field { width: min(360px, 100%); }
.search-input { position: relative; }
.search-input .rzi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px !important; color: var(--muted); pointer-events: none; }
.search-input input.no-razden { padding-left: 36px !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table-scroll .admin-table { min-width: 880px; }
.table-scroll .admin-table--compact { min-width: 0; }
.admin-table th {
  padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--wash);
  font: 600 12px/16px var(--font); letter-spacing: .04em; text-transform: uppercase; text-align: left; color: var(--muted); white-space: nowrap;
}
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: middle; color: var(--ink); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: #fbfcfe; }
.admin-table .sub { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.admin-table .cell-action { width: 1%; white-space: nowrap; text-align: right; }
.admin-table .cell-name { font-weight: 600; }
.admin-table td.num { white-space: nowrap; }
.admin-table--compact td:first-child { min-width: 190px; }
.admin-table .not-linked { color: var(--muted); font-style: italic; }

/* Stacked rows on phones: each row becomes a ruled entry with its own labels */
@media (max-width: 760px) {
  .table-scroll .admin-table--stack { min-width: 0; }
  .admin-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .admin-table--stack tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .admin-table--stack tbody tr:last-child { border-bottom: 0; }
  .admin-table--stack td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; border: 0; text-align: left; }
  .admin-table--stack td[data-label]::before { content: attr(data-label); flex: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .admin-table--stack td:first-child { display: block; font-size: 15px; }
  .admin-table--stack td.cell-action { width: auto; justify-content: flex-start; padding-top: 4px; }
  .admin-table--stack .row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .admin-table--stack tbody tr:hover td { background: none; }
  .admin-table--stack .empty-row { display: block; }

  /* Users directory: one card per person. Name and status on top, the email under it,
     a two-column grid of facts (label above value), then actions on their own ruled row. */
  .user-directory .admin-table--stack tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "name name" "email email" "legacy role" "twofa last" "actions actions";
    gap: 14px 16px; padding: 18px 16px; position: relative;
  }
  .user-directory .admin-table--stack td { display: block; min-width: 0; }
  .user-directory .admin-table--stack td[data-label]::before { display: block; margin-bottom: 4px; font-size: 11px; line-height: 16px; }
  .user-directory .admin-table--stack td:nth-child(1) { grid-area: name; padding-right: 96px; font-size: 16px; line-height: 22px; }   /* room for the status chip */
  .user-directory .admin-table--stack td:nth-child(1) .sub { display: inline; margin-left: 6px; font-size: 13px; }
  .user-directory .admin-table--stack td:nth-child(2) { grid-area: email; margin-top: -10px; overflow-wrap: anywhere; color: var(--ink-2); }
  .user-directory .admin-table--stack td:nth-child(2)::before,
  .user-directory .admin-table--stack td:nth-child(7)::before { content: none; }
  .user-directory .admin-table--stack td:nth-child(3) { grid-area: legacy; }
  .user-directory .admin-table--stack td:nth-child(4) { grid-area: role; }
  .user-directory .admin-table--stack td:nth-child(5) { grid-area: twofa; }
  .user-directory .admin-table--stack td:nth-child(6) { grid-area: last; color: var(--ink); }
  .user-directory .admin-table--stack td:nth-child(7) { position: absolute; top: 18px; right: 16px; }
  .user-directory .admin-table--stack td.cell-action { grid-area: actions; padding-top: 14px; border-top: 1px solid var(--wash-2); }
  .user-directory .admin-table--stack td.cell-action:not(:has(.row-actions)) { display: none; }   /* your own row */
  .user-directory .admin-table--stack tr.empty-row { display: block; padding: 0; }
  .user-directory .admin-table--stack tr.empty-row td { font-size: 14px; text-align: center; }
  .user-directory .admin-table--stack .admin-select { width: 100%; height: 40px; }
  .user-directory .admin-table--stack .row-actions { gap: 8px; }
  .user-directory .admin-table--stack .row-actions > * { min-height: 36px; }
  .user-directory .admin-table--stack .btn-icon { width: 40px; height: 40px; }   /* touch size */
}
.admin-table .empty-row td { padding: 32px 16px; text-align: center; color: var(--muted); }
.admin-table .admin-select { width: 128px; height: 34px; }
.cell-stack { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }

/* Account: trusted devices. Fits its column; when the column is narrow each row stacks instead of scrolling */
.device-table { container-type: inline-size; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); }
.device-table .admin-table td:first-child { min-width: 0; }
@container (max-width: 600px) {
  .device-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .device-table tr { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px 16px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .device-table tbody tr:last-child { border-bottom: 0; }
  .device-table td { padding: 0; border: 0; }
  .device-table td:first-child { grid-column: 1 / 3; }
  .device-table td.cell-action { grid-column: 3; grid-row: 1 / 3; width: auto; align-self: center; }
  .device-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 11px/16px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .device-table tbody tr:hover td { background: none; }
}

/* Account: avatar picker. Real radios (visually hidden) so arrow keys move between avatars */
.avatar-picker { display: grid; gap: 10px; }
.avatar-picker__row { display: flex; flex-wrap: wrap; gap: 12px; }
.avatar-picker__label { margin-top: 6px; font: 600 11px/16px var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.avatar-option { position: relative; display: block; border-radius: 50%; cursor: pointer; }
.avatar-option__img {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--wash-2); color: var(--ink-2); font: 700 16px/1 var(--font);
  transition: transform .12s ease, box-shadow .12s ease;
}
.avatar-option:hover .avatar-option__img { transform: scale(1.06); }
.avatar-option:has(input:checked) .avatar-option__img { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--blue); }
.avatar-option:has(input:focus-visible) .avatar-option__img { outline: 2px solid var(--blue); outline-offset: 4px; }
.avatar-picker__more { justify-self: start; width: auto; gap: 4px; }
.avatar-picker__more .rzi { transition: transform .15s ease; }
.avatar-picker__more[aria-expanded="true"] .rzi { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .avatar-option__img, .avatar-picker__more .rzi { transition: none; }
  .avatar-option:hover .avatar-option__img { transform: none; }
}

/* Pager under a short list (trusted devices) */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 0 0; }
.pager__status { margin-right: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pager .btn-small { gap: 4px; }
.pager .btn-small:first-of-type { padding-left: 8px; }
.pager .btn-small:last-of-type { padding-right: 8px; }
.user-directory .pager { padding: 12px 20px; border-top: 1px solid var(--rule); }

.people-table td { vertical-align: top; }
.people-table input.no-razden, .people-table .admin-select { min-width: 160px; }
.people-table .admin-select { width: 100%; height: 40px; }
.people-editor { display: grid; gap: 8px; }
.people-editor .table-scroll .admin-table { min-width: 640px; }
.add-person { justify-self: start; }

/* ── Chips ───────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--wash-2); color: var(--ink-2); font: 600 12px/16px var(--font); white-space: nowrap; vertical-align: middle; }
.chip-ok   { background: var(--ok-wash);   color: var(--ok); }
.chip-warn { background: var(--warn-wash); color: var(--warn); }
.chip-bad  { background: #fee2e2;          color: #991b1b; }
.chip-info { background: var(--blue-wash); color: var(--blue-hover); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form-grid .full { grid-column: 1 / -1; }
.form-panel { display: grid; gap: 24px; }

/* Modal form used by the Users screen */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  overflow-y: auto; background: rgba(15, 23, 42, .56);
}
.modal-panel {
  width: min(760px, 100%); max-height: calc(100vh - 48px); overflow-y: auto;
  border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
  outline: none;
}
.modal-panel:focus-visible { box-shadow: 0 0 0 3px var(--blue), 0 24px 64px rgba(15, 23, 42, .28); }
.modal-content { display: grid; gap: 24px; padding: 28px; }
.modal-content .admin-head { align-items: flex-start; }
.modal-close {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--wash);
  color: var(--ink-2); font: 400 26px/34px Arial, sans-serif; cursor: pointer;
}
.modal-close:hover:not(:disabled) { background: var(--wash-2); color: var(--ink); }
.modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.modal-close:disabled { opacity: .5; cursor: not-allowed; }

/* Legacy user picker: a search box and a list of options below it */
.picker { max-height: 300px; overflow-y: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper); box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.picker--selected { box-shadow: none; border-color: var(--blue); background: var(--blue-wash); }
.picker-option { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 10px 14px;
  border: 0; border-bottom: 1px solid var(--wash-2); background: none; color: var(--ink); font: 14px/20px var(--font); text-align: left; cursor: pointer; }
.picker-option:last-child { border-bottom: 0; }
.picker-option:hover:not(:disabled), .picker-option:focus-visible { background: var(--wash); outline: none; }
.picker-option:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.picker--selected .picker-option { cursor: default; }
.picker--selected .picker-option:hover { background: none; }
.picker-option:disabled { color: var(--muted); cursor: not-allowed; }
.picker-option b { font-weight: 600; }
.picker-option .meta { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.picker-option .linked { color: var(--warn); }
.picker-empty { padding: 12px 14px; font-size: 14px; color: var(--muted); }

/* Account strip: fixed details from the legacy account */
.account-strip { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.account-strip > div { display: grid; gap: 2px; align-content: start; padding: 14px 18px; background: var(--paper); }
.account-strip span { font-size: 13px; color: var(--muted); }
.account-strip b { font: 700 16px/22px var(--font); color: var(--ink); }

/* Password rules checklist */
.pw-rules { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.pw-rules li { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--wash-2); color: var(--ink-2); font: 500 12px/16px var(--font); transition: background-color .15s, color .15s; }
.pw-rules li .rzi { flex: none; font-size: 14px !important; }
.pw-rules li.met { background: var(--ok-wash); color: var(--ok); }

/* Done state */
.done-list { display: grid; border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.done-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.done-list > div:last-child { border-bottom: 0; }

/* Acting-as banner (SuperAdmin managing another supplier) */
.acting-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 48px; background: var(--warn-wash); border-bottom: 1px solid #fde68a; color: var(--warn); font-size: 14px; }
.acting-banner b { color: var(--ink); }

@media (max-width: 1080px) {
  .admin-page { padding: 32px 32px 64px; }
  .settings-group { grid-template-columns: 1fr; gap: 16px; }
  .settings-group__icon { margin-bottom: 8px; }
}
@media (max-width: 760px) {
  .admin-page { padding: 24px 16px 56px; gap: 24px; }
  .admin-head h1 { font-size: 24px; }
  .admin-head > .btn-primary { width: 100%; }
  .acting-banner { padding: 10px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .account-strip { grid-template-columns: 1fr; }
  .setting-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .setting-row .wide, .stack-inputs { width: 100%; }
  .inline-inputs { justify-content: flex-start; }
  .setting-control { justify-content: flex-start; }
  .form-footer .btn-primary, .form-footer .btn-ghost { flex: 1; }
  .form-footer .form-status { width: 100%; }
  input.no-razden, select.admin-select { font-size: 16px !important; }   /* stops iOS zooming on focus */
  .modal-backdrop { place-items: end center; padding: 0; }
  .modal-panel { width: 100%; max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-content { padding: 22px 16px 16px; }
  .page-title__icon { width: 42px; height: 42px; border-radius: 12px; }
  .summary-cards { grid-template-columns: 1fr 1fr; }
  .summary-cards li { min-height: 100px; padding: 14px 16px; }
  .admin-page--enhanced .settings-group { padding: 18px 16px; }
  .content-card__head { align-items: stretch; padding: 16px; }
  .content-card__head .field { width: 100%; }
  .security-overview { align-items: flex-start; flex-wrap: wrap; }
  .appearance-card { align-items: stretch; flex-direction: column; padding: 18px 16px; }
  .theme-options { width: 100%; }
  .theme-option { flex: 1; }
}
@media (max-width: 420px) {
  .summary-cards { grid-template-columns: 1fr; }
}

/* ── Self set-up: the Darbi sign-in look, one column ──────────────────── */
.dz-login.dz-login--solo { grid-template-columns: 1fr; grid-template-areas: "panel"; background: var(--wash); }
.dz-login--solo .dz-login__panel { width: 100%; max-width: 620px; margin: 0 auto; min-height: 100vh; }
.dz.dz-login--solo .dz-login__panel[data-theme="light"] { box-shadow: 0 0 0 1px #e2e8f0, 0 8px 32px rgba(15, 23, 42, .06); }
.dz-login--solo .dz-login__photo { height: clamp(120px, 18vh, 180px); }
/* Top-aligned, not centred: each step is a different height, so centring made the heading jump between steps and left a tall gap above short ones. */
.dz-login--solo .dz-login__main { align-items: flex-start; padding-top: clamp(32px, 7vh, 64px); padding-bottom: 48px; }
.dz-login--solo .dz-login__form { max-width: 460px; }
.dz-login__loading { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--ink-muted); }
.dz a.dz-btn--primary { color: #fff; text-decoration: none; }
/* Informational (not an error) callout: blue tint, same shape as .dz-alert. */
.dz-notice { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; font-size: 14px; line-height: 20px; color: #1e293b; }
.dz-notice .rzi { flex: none; margin-top: 1px; font-size: 20px !important; color: var(--v2-blue); }
.dz-notice b { display: block; margin-bottom: 4px; font: 700 14px/20px var(--font-display); color: #0f172a; }
.dz-notice ul { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 2px; }
.dz-notice p { margin: 0; color: #475569; }
.dz-steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; padding: 0; list-style: none; }
.dz-steps li { padding: 3px 8px; border-radius: 4px; background: #eef2f7; color: #475569; font: 600 12px/16px var(--font-display); }
.dz-steps li.done { background: #e2f1e8; color: #276749; }
.dz-steps li.done::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.dz-steps li[aria-current="step"] { background: var(--v2-blue); color: #fff; }
.dz-account { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.dz-account span { font-size: 12px; color: #64748b; }
.dz-account b { font: 700 15px/1.35 var(--font-display); color: #0f172a; }
.dz-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dz-row .dz-btn { flex: 1; }
.dz-login .pw-rules li { background: #f1f5f9; color: #334155; }
.dz-login .pw-rules li.met { background: #e2f1e8; color: #276749; }
.dz-team { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 8px; align-items: start; }
.dz-team .dz-link { align-self: center; }
@media (max-width: 520px) { .dz-team { grid-template-columns: 1fr; } }