/* idp-only rules. Loads after theme.css from the idp-theme webjar, which holds the shared tokens and components. */

/* =============================================================
   Org admin (users & groups) — ported from design mock
   ============================================================= */

/* --- Header org-bar --------------------------------------- */
.org-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.org-bar-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.navbar-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

/* --- Detail form cards ------------------------------------ */
/* The body sits on the page surface; only the header (and tables, credentials) carry the subtle fill. */
.form-card { padding: 0; }
.form-card .card-header {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: transparent;
}
.form-card .card-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.form-card .card-title { font-size: 0.9375rem; line-height: 1.25rem; margin: 0; }
.form-card .card-footer {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  border-top: 0;
  background: transparent;
  justify-content: flex-end;
  align-items: center;
}

/* --- Backup page ------------------------------------------ */
.backup-card + .backup-card { margin-top: var(--space-4); }
/* The file field carries two hint lines, so its blocks need more air than a plain form. */
.backup-card-import { border-top: 1px solid var(--color-border); }
.form-card .card-body.backup-card-import { gap: var(--space-6); }
.backup-key {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.backup-recent { margin-top: var(--space-4); }

/* Inside a .table-card (theme.css) these rows highlight a step off the card's fill, like .table rows. */
.table-card :is(.group-table, .signin-table) tbody tr:hover { background: var(--color-row-hover); }
/* The batch row's subject cell is a disclosure: it lines up with the plain subject text of
   single-subject rows and turns its chevron over once the subjects are listed below. */
.batch-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.batch-toggle-chevron {
  flex: none;
  color: var(--color-fg-muted);
  transition: transform 120ms;
}
[data-batch-open] .batch-toggle-chevron { transform: rotate(180deg); }

/* --- Key/value table (user attributes) -------------------- */
.kv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.kv-table th, .kv-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.kv-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.kv-table .form-control { padding: 0.3rem var(--space-2); }
.invite-table .form-control { height: 2rem; }
.invite-updating { display: none; align-items: center; gap: var(--space-2); margin-right: var(--space-2); font-size: 13px; color: var(--color-fg-muted); }
#invite-panel[data-busy] .invite-updating { display: inline-flex; }
#invite-panel[data-busy] form[inert] { opacity: 0.85; }
.invite-formats th { width: 9rem; vertical-align: top; text-align: left; font-weight: 500; color: var(--color-fg); }
.invite-formats td { vertical-align: top; color: inherit; }
.invite-formats td > div { margin-top: var(--space-1); }
.invite-formats .cert-pem { margin: 0; }
.kv-table-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kv-table-edit .form-control { flex: 1; width: auto; }
/* The save state sits inside the input's right edge, so a saved row keeps the same input width. */
.kv-table-edit { position: relative; }
.kv-table-edit .save-state {
  position: absolute;
  right: var(--space-3);
  margin-left: 0;
  pointer-events: none;
}
.kv-table-edit:has(.save-state:not([data-state="idle"])) .form-control { padding-right: 5.5rem; }
.row-actions { width: 3rem; text-align: right; }
/* Several row actions stay on one line instead of stacking in the icon-sized column. */
td.row-actions:has(> .btn + .btn) { width: auto; white-space: nowrap; }
/* Built-in names share one width so their badges line up; firstName/lastName are the longest. */
.kv-table-name { display: inline-block; min-width: 10ch; }

/* --- Group switch list (user detail) ---------------------- */
.toggle-list { display: flex; flex-direction: column; }
/* The switch (or the "member" chip standing in for it) leads the row; a fixed slot keeps the names aligned. */
.toggle-list-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.toggle-list-row:last-child { border-bottom: none; }
.toggle-list-row > .form-check.form-switch,
.toggle-list-row > .toggle-list-chip { flex: none; width: 2.75rem; }
.toggle-list-name { font-weight: 500; }
.toggle-list-desc {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}
.toggle-list-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toggle-list-chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-fg-subtle);
}
.toggle-list-name .toggle-list-chip { margin-left: var(--space-2); }

/* --- Member table (group detail) -------------------------- */
.member-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.member-table th, .member-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
.member-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-subtle);
  font-weight: 500;
  background: var(--color-surface-subtle);
  border-top: 1px solid var(--color-border);
}
.member-table tbody tr:hover { background: var(--color-surface-subtle); }

/* --- Auto-save state (htmx) ------------------------------- */
.save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
  font-size: var(--text-xs);
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.save-state[data-state="saving"],
.save-state[data-state="saved"],
.save-state[data-state="error"] { opacity: 1; }

/* In a card header, sit next to the title and push the section meta to the right. */
.card-header .save-state { margin-left: 0; margin-right: auto; }

.save-state .spinner-border.spinner-border-sm { display: none; }
.save-state[data-state="saving"] .spinner-border.spinner-border-sm { display: inline-block; }

/* Slow actions: htmx puts its requestClass (htmx-request) on the element for the whole request,
   so the label and the spinner swap without any JS. */
.btn-busy { display: inline-flex; align-items: center; gap: var(--space-2); }
.btn-busy > .spinner-border.spinner-border-sm,
.btn-busy > [data-busy-label] { display: none; }
.btn-busy.htmx-request > .spinner-border.spinner-border-sm { display: inline-block; }
.btn-busy.htmx-request > [data-busy-label] { display: inline; }
.btn-busy.htmx-request > [data-busy-idle] { display: none; }

.save-state-label { color: var(--color-fg-subtle); }
.save-state[data-state="saved"] .save-state-label {
  color: var(--color-accent);
  font-weight: 500;
}
.save-state[data-state="saved"] .save-state-label::before { content: "✓ "; }
.save-state[data-state="error"] .save-state-label {
  color: var(--color-danger-fg);
  font-weight: 500;
}

/* --- Inline edit (read-only → pencil → Save/Cancel) ------- */
.editable-head {
  display: flex;
  justify-content: flex-end;
}
.editable-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.icon-btn { display: inline-flex; align-items: center; gap: var(--space-2); }

.kv-view { margin: 0; display: flex; flex-direction: column; }
.kv-view-row {
  display: grid;
  grid-template-columns: minmax(8rem, 30%) 1fr;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.kv-view-row:last-child { border-bottom: 0; }
.kv-view-key {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg);
  word-break: break-word;
}
.kv-view-val {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  word-break: break-word;
}

/* =============================================================
   Org admin list views + app form — ported from design mock
   (panel head, toolbar, chips, app cards, form groups, tables)
   ============================================================= */

/* --- Panel header (list pages) ---------------------------- */
.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.panel-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.panel-lede {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin: var(--space-1) 0 0;
}

/* --- Toolbar (search + filter + sort) on list pages ------- */
.admin-main .toolbar { align-items: center; margin-bottom: 0; }
.admin-main .toolbar-search { flex: 1 1 22rem; min-width: 16rem; }
.admin-main .toolbar-search .form-control,
.dlg-filter .form-control,
.dlg-list .toolbar-search .form-control {
  padding-left: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat;
  background-position: 0.5rem center;
}
.toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
/* Sort icon inside the select, like the search icon, so no separate label competes with the filter. */
.toolbar-sort .form-select {
  width: auto;
  padding-left: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/></svg>"), var(--select-chevron);
  background-position: 0.5rem center, right var(--space-3) center;
}
/* Once TomSelect takes over, the icon moves to its control; the list opens leftwards from the toolbar's edge. */
.toolbar-sort .ts-wrapper.no-search .ts-control {
  padding-left: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 4v16M3 8l4-4 4 4M17 20V4M13 16l4 4 4-4'/></svg>"), var(--select-chevron) !important;
  background-position: 0.5rem center, right var(--space-3) center !important;
}
.toolbar-sort .ts-dropdown { left: auto; right: 0; }
/* --- App grid (applications list) ------------------------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.app-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* the head sits 32px down: the space two (now removed) corner-mark spans took above it */
  padding: var(--space-8) var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-subtle);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: border-color .15s;
}
.app-card:hover { border-color: var(--color-border-strong); }
.app-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.app-card-name { font-weight: 600; }
.app-card-entity {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  word-break: break-all;
}
.app-card-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  margin-top: var(--space-2);
}
.app-card-meta strong { color: var(--color-fg); font-weight: 600; }

/* --- Key/value + mapping tables --------------------------- */
.map-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.map-table th, .map-table td {
  padding: var(--space-2) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-divider);
}
.map-table th {
  padding-block: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
  font-weight: 400;
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-divider);
}
.map-table .form-control, .map-table .form-select { padding: 0.3rem var(--space-2); }
.map-arrow {
  text-align: center;
  font-family: var(--font-mono);
  color: var(--color-fg-subtle);
  width: 2rem;
}

/* --- Group / session / signing tables (share member-table look) --- */
.group-table, .session-table, .signin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.group-table th, .group-table td,
.session-table th, .session-table td,
.signin-table th, .signin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-divider);
}
.group-table th, .session-table th, .signin-table th {
  padding-block: 10px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
  font-weight: 400;
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-divider);
}
.group-table tbody tr:hover, .signin-table tbody tr:hover { background: var(--color-surface-subtle); }
.cell-detail { overflow-wrap: anywhere; }
.cell-detail-fix { margin-top: var(--space-1); color: var(--color-fg); }

/* --- Member picker (group detail) ------------------------- */
.member-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.member-toolbar .field { flex: 1 1 18rem; min-width: 14rem; }
.picker { position: relative; }
.picker-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 16rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  z-index: 10;
}
.picker.is-open .picker-menu { display: block; }
.picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.picker-row:hover { background: var(--color-surface-subtle); }

/* --- App tabs (detail page) ------------------------------- */
.app-tabs { margin-top: 0; }
.app-tabs .nav.nav-tabs { flex-wrap: wrap; }
.nav-link-danger { color: var(--color-danger-fg); }
.nav-link-danger[aria-selected="true"] {
  color: var(--color-danger-fg);
  border-bottom-color: var(--color-danger-fg);
}
/* Mode switch pinned to the right of the tab bar (SSO / Provisioning).
   The switch sits outside the tab list, so tabs may wrap while the
   switch stays on the first line. */
nav.app-tabs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-tabs .nav.nav-tabs { flex: 1 1 auto; min-width: 0; }
.nav-mode-switch {
  flex: none;
  margin-left: auto;
  align-self: center;
}
/* Compact density so all SSO tabs plus the switch share one line. */
nav.app-tabs .nav-link { padding: 13px 0.875rem; }
/* Danger zone stands apart at the far end of the tab row. */
.app-tabs .nav.nav-tabs > li:has(> .nav-link-danger) { margin-left: auto; }
/* Verified-connection checkmark in the Connection tab. */
[data-conn-check] {
  color: var(--color-success-fg);
  font-weight: 700;
}
/* Provisioning tabs stay visible but dimmed until a connection test passes. */
.nav-link-locked { opacity: 0.55; }
/* SCIM gate: fieldset wrapper disabling a whole panel until the connection test passes. */
.scim-gate {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}
.scim-gate[disabled] { opacity: 0.6; }
/* Native <dialog> using the .modal card look — UA centering, dimmed backdrop. Content stays inside
   the box; overflow: visible keeps the UA's overflow: auto from adding scrollbars of its own. */
dialog.modal {
  position: fixed;
  margin: auto;
  color: var(--color-fg);
  overflow: visible;
}
dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); }
/* A dialog must never outgrow the viewport. The overflow: visible above (which lets the corner
   decorations sit outside the box) means the dialog itself cannot scroll, and a modal makes the
   page behind inert — so a tall body pushes the footer, and every way out, past the fold with
   nothing able to scroll to it. The body scrolls instead, keeping header and footer reachable at
   any content length. The :not([open]) rule puts back what the UA gives closed dialogs: setting
   display here would otherwise leave a closed dialog laid out and swallowing every click. */
dialog.modal {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}
dialog.modal:not([open]) { display: none; }
/* The body takes whatever is left and is the ONE scroller. Capping the payload pane instead
   would give two nested scrollbars and still let the footer slide off a short viewport. */
dialog.modal > .modal-body { flex: 1; overflow: auto; min-height: 0; }
/* Wide enough for a SCIM resource; 28rem wraps every URL in the payload over three lines. */
dialog.modal-wide { max-width: min(44rem, 92vw); }
.modal-list {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  display: grid;
  gap: var(--space-1);
}
/* Attention mark on the Provisioning switch/sidebar group. */
[data-activity-attention] {
  color: var(--color-warn-fg);
  font-weight: 700;
}
select.scim-user-picker,
select.scim-user-picker + .ts-wrapper {
  min-width: 22rem;
}
/* A fixed-width picker (form-select-inline) keeps its width once TomSelect takes over. */
.ts-wrapper.form-select-inline { min-width: 19.625rem; }
/* Job details: a zero-width wrapper keeps the wide transcript from stretching the table
   columns, and grid items need min-width: 0 or long JSON lines push past the table edge. */
[data-job-detail] .job-detail {
  width: 0;
  min-width: 100%;
}
[data-job-detail] .grid-2 { min-width: 0; }
[data-job-detail] .grid-2 > div { min-width: 0; }
/* Wire transcripts: one step per exchange, so a failed test shows which call broke. */
.wire-log { margin-top: var(--space-2); }
.wire-log-step {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}
.wire-log-step + .wire-log-step { margin-top: var(--space-4); }
.wire-log-step-failed { border-left-color: var(--color-danger-fg); }
.wire-log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.wire-log-call {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.wire-log-pane { min-width: 0; }
.wire-log-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
}
.wire-log-label + .cert-pem { margin-top: var(--space-1); }
/* Provisioning jobs table: fixed layout so the 3s refresh cannot shuffle column widths as
   relative times and error lines change length. Widths come from the <th> styles. */
.scim-jobs-table { table-layout: fixed; }
.scim-jobs-table td { overflow-wrap: anywhere; }

/* Icon-only copy button: the checkmark replaces the glyph, so the button never resizes. */
[data-copy-pane] { padding: 0 var(--space-1); }
[data-copy-pane].is-copied > svg { display: none; }
[data-copy-pane].is-copied::before {
  content: "✓";
  color: var(--color-success-fg);
}

/* Wire transcripts: the same box wherever a raw request/response is shown — Activity job
   details, the connection test diagnostics, the user lookup result. */
.cert-pem {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* .form-group / .field set display, which beats the user-agent [hidden] rule; restore it. */
[data-tab-panel][hidden] { display: none !important; }
[data-meta-panel][hidden] { display: none !important; }
[data-search-toolbar][hidden] { display: none !important; }
/* .btn sets display, which beats the user-agent [hidden] rule; a hidden button must really go. */
.btn[hidden] { display: none; }
[data-app-prov-field][hidden] { display: none !important; }
[data-protocol-note][hidden] { display: none !important; }
.badge[hidden] { display: none !important; }
[data-sp-badges][hidden] { display: none !important; }
button.badge { cursor: pointer; }
button.badge:hover { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
button.badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.scope-groups-table { table-layout: fixed; }
.scope-groups-table th:nth-child(1) { width: 22%; }
.scope-groups-table th:nth-child(2) { width: 8%; }
.scope-groups-table th:nth-child(3) { width: 30%; }
.scope-groups-table .cluster-tight { flex-wrap: nowrap; }
.scope-groups-table .checkbox-row { white-space: nowrap; }
.scope-groups-table select.js-searchable + .ts-wrapper { width: 100%; min-width: 0; }
/* The id beats the themed .ts-control rule above, which is !important itself. */
#scim-scope-region .group-table .ts-wrapper .ts-control {
  background: transparent !important;
  border-color: transparent !important;
  border-bottom-color: var(--color-border) !important;
  padding: var(--space-1) var(--space-2);
  min-height: 0;
}
#scim-scope-region .group-table .ts-wrapper:hover .ts-control,
#scim-scope-region .group-table .ts-wrapper.focus .ts-control,
#scim-scope-region .group-table .ts-wrapper.dropdown-active .ts-control {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
#scim-scope-region .group-table select.js-searchable + .ts-wrapper { min-width: 0; }
.scope-groups-table .ts-control { overflow: hidden; flex-wrap: nowrap; }
.scope-groups-table .ts-control .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-groups-table [data-sp-effect] { display: block; white-space: normal; }
.scope-groups-table .badge { white-space: nowrap; }
[data-meta-panel] { margin-top: var(--space-4); }

/* --- Sidebar: applications list (app detail pages) ---------- */
/* On an application's page the Applications entry is an open parent: no fill, accent icon, chevron. */
.admin-nav-link.is-open { color: var(--color-fg-strong); font-weight: 500; }
.admin-nav-link.is-open > .icon { color: var(--color-accent); }
/* The group folds: the row is a <summary>, its chevron turns sideways while closed. */
.admin-nav-group > summary { list-style: none; cursor: pointer; }
.admin-nav-group > summary::-webkit-details-marker { display: none; }
.admin-nav-group > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.admin-nav-chevron { display: grid; place-items: center; color: var(--color-fg-muted); transition: transform 150ms; }
.admin-nav-group:not([open]) .admin-nav-chevron { transform: rotate(-90deg); }
.admin-nav-group:not([open]) > summary.is-open { color: var(--color-fg-muted); font-weight: 400; }
.admin-nav-group:not([open]) > summary.is-open > .icon { color: inherit; }
/* The label is a link of its own; the chevron gets a hit area wide enough to aim at. */
.admin-nav-group > summary > a.admin-nav-label { color: inherit; text-decoration: none; align-self: stretch; display: flex; align-items: center; }
.admin-nav-chevron { width: 1.5rem; height: 1.5rem; margin-right: -4px; border-radius: var(--radius-md); }
.admin-nav-chevron:hover { color: var(--color-fg); background: color-mix(in srgb, var(--color-fg) 8%, transparent); }
.admin-nav-apps { display: flex; flex-direction: column; }
.admin-nav-app {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 2.5rem; padding: 0 var(--space-3) 0 var(--space-2);
  font-size: var(--text-sm); color: var(--color-fg-muted);
  text-decoration: none;
  border-radius: var(--radius-lg);
}
.admin-nav-app:hover { color: var(--color-fg); background: var(--color-nav-active); }
.admin-nav-app.is-active { color: var(--color-fg-strong); font-weight: 500; background: var(--color-accent-soft); }
.admin-nav-mark {
  flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-fg-muted);
  background: var(--avatar-neutral-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
}
.admin-nav-app.is-active .admin-nav-mark {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 30%, var(--color-surface));
  border-color: var(--color-accent-line);
}
.admin-nav-app .admin-nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-proto {
  flex: none;
  padding: 2px 6px;
  font: 0.6875rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-fg-subtle);
  background: var(--color-btn-secondary-bg);
  border-radius: var(--radius-sm);
}


/* --- Card anatomy: heading with a subtitle, flush bodies ----- */
.card-heading { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.card-subtitle { line-height: normal; }
.card-title-note { font-weight: 400; color: var(--color-fg-muted); }
.card-header-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); margin: 0; white-space: nowrap; }
.card-intro { margin: 0; max-width: 42.5rem; font-size: var(--text-sm); line-height: 1.55; color: var(--color-fg-muted); }
/* A table or list runs edge to edge; the rows carry their own side padding. */
.form-card .card-body-flush { padding: 0; gap: 0; }
.form-card .card-body-row { padding: var(--space-4) var(--space-5); }
.card-strip { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.card-strip .field-aliases { margin-top: 0; }
.sub-block:has(> .sub-block-title) { display: flex; flex-direction: column; gap: var(--space-4); }
.sub-block-title { font-size: 0.8125rem; font-weight: 500; color: var(--color-fg-secondary); }
/* !important to outrank Bootstrap's .text-secondary utility, which has the same name */
.text-secondary { color: var(--color-fg-secondary) !important; }

/* Every table in a card runs edge to edge: its scroll box steps out over the card body's
   padding, and the outer cells take that padding back so text stays aligned with the rest. */
.form-card .card-body:not(.card-body-flush) .table-responsive { margin-inline: calc(var(--space-5) * -1); }
.form-card .card-body:not(.card-body-flush) .table-responsive :is(th, td):first-child { padding-left: var(--space-5); }
.form-card .card-body:not(.card-body-flush) .table-responsive :is(th, td):last-child { padding-right: var(--space-5); }
.card:not(.form-card) .table-responsive { margin-inline: calc(var(--space-8) * -1); }
.card:not(.form-card) .table-responsive :is(th, td):first-child { padding-left: var(--space-8); }
.card:not(.form-card) .table-responsive :is(th, td):last-child { padding-right: var(--space-8); }

/* Edge-to-edge tables inside a flush card body. */
.table-flush th:first-child, .table-flush td:first-child { padding-left: var(--space-5); }
.table-flush th:last-child, .table-flush td:last-child { padding-right: var(--space-5); }
.table-flush th { border-top: 0; }
.table-flush tbody tr:last-child td { border-bottom: 0; }
.table-flush td { font-size: 0.8125rem; }
.keys-table { table-layout: fixed; }
.keys-table th { padding-top: 10px; padding-bottom: 11px; line-height: 14px; }
/* The fingerprint is cut at its column, as in the design; the cell's title holds the whole value. */
.keys-table td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.keys-table td { padding-top: 14px; padding-bottom: 14px; }
/* Columns from the design: status 110px and actions 280px, the middle ones 2 : 1.2 : 1.7,
   a 16px gutter between them (each cell's right padding) and 20px at the card edges. */
.keys-table th, .keys-table td { padding-left: 0; padding-right: var(--space-4); }
.keys-table th:nth-child(1) { width: calc(var(--space-5) + 110px + var(--space-4)); }
.keys-table th:nth-child(2) { width: 23.85%; }
.keys-table th:nth-child(3) { width: 14.9%; }
.keys-table th:nth-child(4) { width: 20.5%; }
.keys-table th:nth-child(5) { width: calc(280px + var(--space-5)); }
/* .signin-table cells align left, which beats .row-actions; the actions sit at the right edge. */
.keys-table td.row-actions { text-align: right; }
.keys-table .fingerprint { max-width: 22ch; }
.acs-table td { padding-top: 10px; padding-bottom: 11px; }
.acs-table-default { width: 6.5rem; }
.acs-table-index { width: 4rem; }
.acs-table-binding { width: 11rem; }
.acs-table-source { width: 8rem; }
.acs-table-source-value::first-letter { text-transform: uppercase; }
/* Mapping rows read source -> target from the left, as in the design: a fixed source column. */
#attributes-region .map-table th:first-child, #attributes-region .map-table td:first-child { width: 17.5rem; }
#attributes-region .map-table .map-arrow { width: 2.5rem; padding-inline: 0; }
#attributes-region .map-table td { padding-top: 18px; padding-bottom: 19px; }
.map-arrow .icon { display: inline-block; vertical-align: middle; }

.field-row { display: flex; align-items: center; gap: var(--space-3); }
.btn-field { flex: none; height: 2.75rem; padding: 0 18px; }
.form-select-inline { width: auto; min-width: 19.625rem; height: 2.75rem; }

/* --- Settings switches (checkbox-field.jte) ------------------- */
.toggle-group { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
/* The switch sits where a checkbox would, before the label (as .form-check.form-switch in theme.html). */
.field.toggle-row { flex-direction: row-reverse; align-items: flex-start; justify-content: flex-end; gap: var(--space-3); }
.toggle-row .form-switch-input { margin-top: 1px; }
.toggle-row-text { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.toggle-row-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-fg); }
.toggle-row-hint { max-width: 56rem; font-size: 0.8125rem; line-height: 1.55; color: var(--color-fg-muted); }
/* Same look as .form-check.form-switch (theme.html), drawn on the input itself: an outlined track with a square knob
   that slides right and takes the accent when on. */
input.form-switch-input {
  --switch-w: 2.25rem;
  --switch-h: 1.25rem;
  position: relative;
  width: var(--switch-w); height: var(--switch-h);
  border: 1px solid var(--color-border-strong); border-radius: 4px;
  background: var(--color-surface);
  box-shadow: none;
  transition: border-color 120ms;
}
input.form-switch-input::before {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: calc(var(--switch-h) - 6px); height: calc(var(--switch-h) - 6px); border-radius: 2px;
  background: var(--color-border-strong);
  transition: transform 120ms, background 120ms;
}
input.form-switch-input:checked { border-color: var(--color-accent); background: var(--color-surface); box-shadow: none; }
input.form-switch-input:checked::before {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
  background: var(--color-accent);
}

/* --- Choice cards (one-of settings with a description) -------- */
.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.choice-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: var(--space-4);
  border: 1px solid var(--color-control-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.choice-card:hover { border-color: var(--color-border-strong); }
.choice-card:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.choice-card:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.choice-card-head { display: flex; align-items: center; gap: 10px; }
.choice-card-head input[type="radio"]:focus-visible { outline: 0; }
/* Unchecked radios are hollow, so the card shows through, and a shade lighter-edged than the card's border. */
.choice-card-head input[type="radio"]:not(:checked) { background: transparent; border-color: color-mix(in srgb, var(--color-border-strong), var(--color-fg) 8%); }
.choice-card-title { font-size: var(--text-sm); line-height: normal; font-weight: 500; color: var(--color-fg); }
.choice-card-desc { font-size: 0.8125rem; line-height: 1.55; color: var(--color-fg-muted); }

/* --- Metadata source row -------------------------------------- */
.icon-tile {
  flex: none; display: grid; place-items: center;
  width: 2.375rem; height: 2.375rem;
  color: var(--color-fg-muted);
  background: var(--avatar-neutral-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-lg);
}
.source-row { display: flex; align-items: center; gap: var(--space-3); }
.source-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.source-row-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-fg); }
.source-row-sub { font-size: 0.8125rem; color: var(--color-fg-muted); }
.source-row-actions { flex: none; display: flex; gap: var(--space-2); }


/* --- Add panels inside form cards ----------------------------- */
/* The toggle joins the card header's right edge; the opened form spans the card under the table. */
.form-card:has(.add-panel-bar) > .card-header { min-height: 4.75rem; padding-right: 13rem; }
.form-card:has(.add-panel-bar) > .card-header .section-meta { display: none; }
.form-card > .card-body .add-panel { margin-top: 0; }
.form-card > .card-body .add-panel-bar { position: absolute; top: 1.125rem; right: var(--space-5); }
/* Collapsed, the panel leaves nothing in the body, so it takes no room; a table that then closes the body
   runs to the card's bottom edge as it runs to the sides. */
.form-card > .card-body .add-panel:has(> .add-panel-body[hidden]) { display: contents; }
.form-card > .card-body:has(> .table-responsive:last-child, > .table-responsive + .add-panel:last-child > .add-panel-body[hidden]) {
  padding-bottom: 0;
}
.form-card > .card-body:has(> .table-responsive:last-child, > .table-responsive + .add-panel:last-child > .add-panel-body[hidden]) > .table-responsive tbody tr:last-child {
  & > td { border-bottom: 0; }
  /* The row hover fill follows the card's rounded corners. */
  & > td:first-child { border-bottom-left-radius: calc(var(--radius-xl) - 1px); }
  & > td:last-child { border-bottom-right-radius: calc(var(--radius-xl) - 1px); }
}
.form-card > .card-body-flush .add-panel-body {
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--color-accent-line);
  border-radius: 0;
  padding: var(--space-4) var(--space-5);
}
.add-panel-title { margin-bottom: var(--space-4); font-size: 0.9375rem; font-weight: 600; }
.add-panel-body .add-panel-form { align-items: flex-start; gap: var(--space-6); }
.add-panel-body .add-panel-form > .field { flex: 1 1 12rem; min-width: 0; }
.add-panel-body .add-panel-form > .map-arrow { align-self: center; margin-top: 1.5rem; }
.add-panel-actions { margin-top: var(--space-1); }
.acs-form-index { flex: 0 0 6rem !important; }
.acs-form-binding { flex: 0 0 13rem !important; }
.acs-form-location { flex: 1 1 18rem !important; }
.badge-nodot::before { display: none; }

/* --- Form section groups (app detail tabs) ---------------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  /* Cards carry their own frame, so the group adds none; the top padding plus the
     main column's gap keeps them 24px below the tab bar. */
  padding: var(--space-2) 0 0;
  background: transparent;
}
.form-group-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-group-head { margin-bottom: var(--space-3); }
.form-group-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.005em;
}
.form-group-hint {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--color-fg-muted);
  margin: 2px 0 0;
}

/* --- Credential rows (OIDC client id / secret) ------------- */
.credential {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.credential-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  word-break: break-all;
}
.credential-value-masked { color: var(--color-fg-muted); letter-spacing: 0.15em; }
.credential-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* Sub-groupings inside a single card body. */
.sub-block { padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.sub-block:first-child { padding-top: 0; border-top: 0; }

/* --- Checkbox / radio + label row ------------------------- */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  width: fit-content;
}

.checkbox-row:has(input:disabled) {
  cursor: default;
  color: var(--color-fg-muted);
}

.form-control:disabled,
.form-control:disabled,
.form-select:disabled {
  color: var(--color-fg-subtle);
  background: var(--color-surface-subtle);
  cursor: not-allowed;
}

/* --- Group-access table selects ------------------ */
.form-select-narrow { width: 12rem; }

/* --- Field aliases (Also known as pills) ------------------- */
.field-aliases {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.field-aliases-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-fg-subtle);
  margin-right: var(--space-1);
}
.field-aliases .badge { background: transparent; text-transform: none; }

/* --- Collapsed add-panel (add-panel.jte + add-panel.js) ---- */
.add-panel { margin-top: var(--space-4); }
.add-panel-bar { display: flex; justify-content: flex-end; }
.add-panel-body {
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent-line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}
.add-panel-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.add-panel-form-stack { display: block; }
.add-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.add-panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: inherit;
  background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
.add-panel.is-loading .add-panel-overlay { display: flex; }
.add-panel.is-loading .add-panel-body > :not(.add-panel-overlay) {
  pointer-events: none;
}

/* --- Two-factor enrolment --------------------------------- */
.mfa-qr {
  display: block;
  width: 12rem;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-2);
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-secret { letter-spacing: 0.12em; }

/* Device approval (/device) */
.device-request { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.device-request dt { color: var(--color-fg-muted); }
.device-request dd { margin: 0; overflow-wrap: anywhere; }
.device-request code { font-size: var(--text-xs); }
.device-warning { margin: 0 0 var(--space-5); font-size: var(--text-sm); font-weight: 600; }
/* The scopes read as one list: areas as small mono labels, rows close together. */
.scope-list { display: flex; flex-direction: column; }
.scope-area {
  margin: var(--space-4) 0 var(--space-1);
  font: 400 0.6875rem var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
}
.scope-list > .scope-area:first-child { margin-top: 0; }
.scope { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); cursor: pointer; }
.scope-name { font-family: var(--font-mono); }
.scope small { flex-basis: 100%; padding-left: calc(1rem + var(--space-2)); font-size: var(--text-xs); color: var(--color-fg-muted); }
.scope-danger .scope-name { color: var(--color-danger-fg); }
.scope-all { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); margin-bottom: var(--space-1); }
/* With access, the deny form only carries its fields; its button sits beside Approve. */
.device-deny { display: none; }

/* API access pages */
.api-grants-row-ended { opacity: 0.6; }
.api-grants form { display: inline; }
.api-grants time { white-space: nowrap; }
/* Seven or eight columns: tighter gutters, the card's own edges kept. */
.table-card .api-grants :is(th, td) { padding-inline: var(--space-3); }
/* "Last 24 h" over "Revoke": side by side they would widen an already wide table. */
.api-grants td.text-end.text-nowrap > .btn,
.api-grants td.text-end.text-nowrap > form { display: flex; justify-content: flex-end; margin-left: auto; width: max-content; }
.api-grants td.text-end.text-nowrap > * + * { margin-top: var(--space-1); }
/* Each grant has a row below it that "Last 24 h" fills; until then it takes no room,
   and the grant above it closes the card without a divider when it is the last one. */
.api-grants-usage:has(td:empty) { display: none; }
.table-card .api-grants tbody tr:has(+ .api-grants-usage:last-child td:empty) td { border-bottom: 0; }
.api-usage { padding: 0.5rem 0; }
.code-inline.scope-unused { text-decoration: line-through; opacity: 0.7; }
.code-inline.scope-used { font-weight: 600; }
.table-tight td, .table-tight th { padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.85rem; }

/* Branding admin page */
/* Each theme is a column: a live header bar, then labels beside their controls (as in ownhq). */
.form-card .card-body.branding-themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--space-8) var(--space-12); }
.branding-theme { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; margin: 0; padding: 0; border: 0; }
/* A floated legend drops out of the fieldset's border slot and lays out like a heading. */
.branding-theme-title { float: left; width: 100%; margin: 0; padding: 0; font-size: var(--text-sm); font-weight: 600; }
.branding-rows { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.branding-rows-label { color: var(--color-fg-muted); font-size: var(--text-sm); }
.branding-icon-preview,
.branding-preview-logo {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent) center / contain no-repeat; color: #ffffff; font-weight: 700;
}
.upload-tile-tile:has(.branding-icon-preview) { border-radius: var(--radius-md); overflow: hidden; }
.upload-tile-tile .branding-icon-preview { width: 100%; height: 100%; border-radius: 0; font-size: var(--text-xs); }
.branding-preview-logo { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.branding-preview {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 3rem; padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  font-weight: 600;
}
.branding-preview-nav { margin-left: auto; font-size: var(--text-xs); font-weight: 400; opacity: 0.7; }
.branding-footer { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.branding-footer-status { margin-right: auto; color: var(--color-fg-muted); font-size: var(--text-sm); }
/* !important: the error also carries .d-block */
.invalid-feedback:empty { display: none !important; }

/* --- Home (signed-in landing) ------------------------------------------ */

.home { position: relative; display: flex; flex-direction: column; gap: var(--space-12); width: 100%; max-width: 55rem; margin: 0 auto; }
/* Top right, level with the eyebrow; out of the flow so the hero keeps its place. */
.home-account-slot { position: absolute; top: 0; right: 0; z-index: 2; }

/* An ambient glow along the top of the page, behind the header: green, violet, blue. */
body:has(.home) { position: relative; }
body:has(.home)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 250px;
  z-index: -1;
  pointer-events: none;
  opacity: var(--home-glow-opacity);
  background:
    radial-gradient(20% 225px at 100% 0, rgb(37 83 144 / 0.76), transparent),
    radial-gradient(36% 175px at 67% 0, rgb(93 43 116 / 0.4), transparent),
    radial-gradient(33% 200px at 25% 0, rgb(16 126 87 / 0.6), transparent);
}
/* The landing page has no header bar: sign-out closes the page, admin has its own section.
   The content keeps a centred column; the footer runs the full width. */
.shell:has(> .home) { max-width: none; min-height: 100dvh; padding: 5.5rem var(--space-10) var(--space-5); gap: var(--space-12); }
.shell:has(> .home) > .navbar { display: none; }
/* A short page still ends at the viewport's bottom edge. */
.shell:has(> .home) > .shell-footer { margin-top: auto; border-top: 0; padding-top: 0; }

/* Hero: plain type on the page, the glow above does the atmosphere. */
.home-hero { position: relative; display: flex; align-items: flex-end; }
.home-hero.bg-mix { background: transparent; }
.home-hero.bg-mix::before,
.home-hero.bg-mix::after,
.home-hero > .bg-aurora-blob { display: none; }
.home-hero-inner { position: relative; display: flex; flex-direction: column; gap: 18px; }
.home-hero .shell-eyebrow { font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-fg-muted); }
.home-hero-title { margin: 0; font-size: 3.75rem; line-height: 61px; letter-spacing: -0.05em; font-weight: 600; }
.home-hero-name { color: var(--color-accent); }
.home-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: 0.8125rem; color: var(--color-fg-muted);
}
.home-hero-meta a { color: inherit; }
/* The hero and the nudge under it read as one group. */
.home-hero:has(+ .home-nudge) { margin-bottom: calc(var(--space-12) * -1 + 36px); }

/* Security nudge: the theme's warning icon, the message in body text, the fix as the one accent button on the page.
   The row is centred, so the icon is too (the theme pins it to the first line of a multi-line alert). */
.home-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 3.625rem;
  padding: 10px 11px 10px 2.875rem;
  font-size: var(--text-sm);
  color: var(--color-fg);
}
.home-nudge::before { top: 50%; translate: 0 -50%; }
.home-nudge .btn { flex: none; font-weight: 600; }

.home-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.home-section-title { margin: 0; font-size: 0.8125rem; font-weight: 400; color: var(--color-fg-muted); }
.home-section-count { font-size: var(--text-xs); color: var(--color-fg-muted); }

.home-filter { position: relative; width: 16rem; max-width: 100%; }
.home-filter .form-control { height: 2.25rem; padding-right: 2.25rem; }
.home-filter .kbd { position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%; pointer-events: none; }

/* App list: one card, a row per app - monogram, name over activity, an open button on the right. */
.home-apps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  overflow: hidden;
}
.home-apps > li + li { border-top: 1px solid var(--color-border); }
.home-apps > li[hidden] { display: none; }
.home-apps form { margin: 0; }
.home-tile {
  all: unset; box-sizing: border-box; cursor: pointer;
  width: 100%; min-height: 5.25rem;
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-4) 19px var(--space-4) 21px;
  color: inherit; font: inherit; text-align: left;
  transition: background .15s;
}
.home-tile:hover, .home-tile:focus-visible { background: var(--color-surface-sunken); }
.home-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.home-tile-mark {
  flex: none;
  width: 3.125rem; height: 3.125rem; display: grid; place-items: center;
  background: var(--color-btn-secondary-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-weight: 700; font-size: 1.0625rem;
}
.home-tile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.home-tile-name { font-size: 0.9375rem; font-weight: 600; }
.home-tile-desc, .home-tile-foot {
  font-size: 0.8125rem; color: var(--color-fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-tile-foot::first-letter { text-transform: uppercase; }
.home-tile-go {
  flex: none; display: grid; place-items: center;
  width: 2.125rem; height: 2.125rem;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-full);
  transition: color .15s, border-color .15s;
}
.home-tile:hover .home-tile-go { color: var(--color-fg); border-color: var(--color-border-strong); }
/* Link under the tile's text: "or as Anna K." opens the account chooser for a shared account. It cannot
   sit inside the tile (a link in a link or a button), so it is laid over a strip the tile keeps free at its
   bottom, lined up with the text column (tile padding + mark + gap) and clear of the arrow. */
.home-apps-item { position: relative; --alt-line: 1.125rem; --alt-left: calc(21px + 3.125rem + 14px); --alt-right: calc(19px + 2.125rem + 14px); }
/* The strip is the link's line plus a gap above it, so the tile's footer text always ends above the link. */
.home-apps-item-shared .home-tile { padding-bottom: calc(var(--space-4) + var(--alt-line) + var(--space-2)); }
.home-tile-alt {
  position: absolute; left: var(--alt-left); right: var(--alt-right); bottom: var(--space-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: var(--alt-line);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-muted);
}
.home-tile-alt:hover { color: var(--color-fg); }

.home-empty {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center; color: var(--color-fg-muted); font-size: 0.8125rem;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.home-empty-title { color: var(--color-fg); font-weight: 500; font-size: var(--text-sm); }
.home-nomatch { color: var(--color-fg-muted); font-size: 0.8125rem; padding: var(--space-4) 0; }

/* Account shortcuts: a row of cards, each an icon tile over its label and state. */
.home-account {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.home-shortcut {
  display: flex; flex-direction: column; gap: 5px;
  min-height: 8rem;
  padding: 17px var(--space-4) 15px 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  color: inherit; text-decoration: none;
  transition: border-color .15s;
}
.home-shortcut:hover { border-color: var(--color-border-strong); }
.home-shortcut-warn, .home-shortcut-warn:hover { border-color: var(--color-warn-border); }
.home-shortcut-icon {
  display: grid; place-items: center;
  width: 2.375rem; height: 2.375rem;
  margin-bottom: 11px;
  color: var(--color-accent);
  background: var(--color-btn-secondary-bg);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
}
.home-shortcut-label { font-weight: 600; font-size: 0.9375rem; }
.home-shortcut-hint { font-size: 0.8125rem; color: var(--color-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-shortcut-hint::first-letter { text-transform: uppercase; }
.home-shortcut-hint-warn { display: inline-flex; align-items: center; gap: 6px; color: var(--color-warn-fg); }
.home-shortcut-hint-warn::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

/* Admin strip: the account cards' frame, numbers instead of icons */
.home-admin {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.home-admin-stat {
  display: flex; flex-direction: column; gap: 5px;
  padding: 17px var(--space-4) 15px 17px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle); color: inherit; text-decoration: none;
  transition: border-color .15s;
}
a.home-admin-stat:hover { border-color: var(--color-border-strong); }
.home-admin-value { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.home-admin-label { font-size: 0.8125rem; color: var(--color-fg-muted); }
.home-admin-label-warn { color: var(--color-warn-fg); }

/* Who is signed in, and the way out, closing the page. */
.home-signed-in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: calc(var(--space-12) * -1 + 32px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.home-signed-in form { margin: 0; }
.home-signed-in-login { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-muted); }
.home-signed-in-out {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 0.8125rem var(--font-sans); color: var(--color-fg-muted);
}
.home-signed-in-out:hover { color: var(--color-fg); }

@media (max-width: 40rem) {
  .home { gap: var(--space-8); }
  .home-hero-title { font-size: 2.5rem; line-height: 1.05; }
  .home-section-head { flex-wrap: wrap; }
  .home-filter { width: 100%; }
  .home-nudge { flex-direction: column; align-items: flex-start; }
  /* stacked, the icon goes back beside the message */
  .home-nudge::before { top: 12px; translate: none; }
  .home-tile { padding: var(--space-3); }
  .home-tile-desc { display: none; }
  .home-account { grid-template-columns: repeat(2, 1fr); }
  /* The tile's own padding is smaller here; the link follows it. */
  .home-apps-item { --alt-left: calc(var(--space-3) + 3.125rem + 14px); --alt-right: calc(var(--space-3) + 2.125rem + 14px); }
  .home-apps-item-shared .home-tile { padding-bottom: calc(var(--space-3) + var(--alt-line) + var(--space-2)); }
  .home-tile-alt { bottom: var(--space-3); }
}

/* ===== Invitations (IDP-18): last invite mail on the users list and user page ===== */
.invite-mail { margin-top: 2px; font-size: 12px; color: var(--color-fg-muted); white-space: nowrap; }
.invite-mail-failed { color: var(--color-danger-fg); }
.invite-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.invite-row-hint { font-size: 13px; color: var(--color-fg-muted); }
.invite-link { display: flex; gap: var(--space-2); align-items: center; }
.invite-link .form-control { flex: 1; min-width: 0; }

/* =============================================================
   Settings that depend on a switch (SAML and OIDC sign-out)
   ============================================================= */

/* Settings that only apply while their box is ticked (SAML and OIDC sign-out): unticked, they stay
   visible but inactive. Not [disabled]: a disabled control drops out of the posted form. */
[data-enable-scope]:has([data-enable-toggle] input:not(:checked)) [data-enabled-only] {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  interactivity: inert;
}
.slo-checks { display: flex; flex-direction: column; gap: var(--space-4); }
.slo-checks-title { font-size: var(--text-sm); font-weight: 600; }
.actions-field > .backup-key { max-width: none; align-self: center; }

/* --- Custom domain ------------------------------------------ */
.domain-sub { margin: var(--space-1) 0 0; max-width: 42rem; }
/* Status words read as written ("Wrong target"), not title-cased by the theme badge. */
#domain-region .badge { text-transform: none; }
#domain-region .card-header { flex-wrap: wrap; }
.domain-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}
.domain-head-host { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.domain-head-title { margin: 0; font-size: var(--text-lg); font-weight: 500; overflow-wrap: anywhere; }
.domain-head-lede { margin: var(--space-1) 0 0; max-width: 40rem; }
.domain-head > :first-child { flex: 1 1 26rem; min-width: 0; }
.domain-head-aside { flex: none; display: flex; align-items: center; gap: var(--space-3); color: var(--color-fg-muted); }
.domain-alert-acts { margin-top: var(--space-2); }

/* Three steps in a row, titles only on a phone: done is solid, the current one carries the accent ring. */
.domain-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-subtle);
}
.step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-fg-muted);
  background: var(--color-fill-quiet);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.step-t { font-size: 0.8125rem; font-weight: 500; }
.step-d { font-size: var(--text-xs); color: var(--color-fg-muted); }
.step.is-done .step-n { color: var(--color-on-accent); background: var(--color-accent); border-color: var(--color-accent); }
.step.is-now { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.step.is-now .step-n { color: var(--color-accent); background: var(--color-accent-soft); border-color: var(--color-accent); }

/* A value people copy: mono, wraps rather than widening the table, copy button right after it. */
.domain-val { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; }
.domain-val code { font-family: var(--font-mono); font-size: 0.8125rem; overflow-wrap: anywhere; }
.domain-note { margin-left: var(--space-2); }
.domain-detail { overflow-wrap: anywhere; }

/* A record name as DNS panels ask for it, relative to the zone, with the zone after it in grey. */
.domain-zone { color: var(--color-fg-subtle); }
/* Record values stay on one line; the table scrolls on a phone instead of breaking a name at a hyphen. */
.domain-records .domain-val code { white-space: nowrap; overflow-wrap: normal; }
.domain-records td { height: auto; }
.form-card .card-footer.domain-foot { align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.domain-foot-note { margin-right: auto; }
.domain-foot-acts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* Label column and value column, rows separated by hairlines. */
.domain-kv { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); margin: 0; }
.domain-kv > dt,
.domain-kv > dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.domain-kv > dt { font-size: var(--text-sm); color: var(--color-fg-muted); }
.domain-kv > dd { font-size: var(--text-sm); }

.domain-modal .modal-body { display: flex; flex-direction: column; gap: var(--space-4); }
.domain-modal .modal-body p { margin: 0; }

/* Activate dialog: what changes, old value struck through, arrow, new value; stacked on a phone. */
#domain-promote-modal { width: min(780px, calc(100vw - 2rem)); max-width: none; }
.act-changes { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: var(--space-3) 0.875rem; padding: 0.875rem var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.8125rem; }
.act-k { color: var(--color-fg-muted); }
.act-old { color: var(--color-fg-subtle); overflow-wrap: anywhere; }
.act-old s { text-decoration-thickness: 1px; }
.act-arrow { color: var(--color-fg-muted); }
.act-new { display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.act-why { font-size: var(--text-xs); color: var(--color-fg-subtle); }
#domain-promote-modal code { font-family: var(--font-mono); font-size: var(--text-xs); }
.act-apps { margin-top: 0.375rem; }
.act-apps .chip { font-family: inherit; letter-spacing: 0; text-transform: none; }
.act-note { margin: 0; font-size: var(--text-xs); color: var(--color-fg-muted); }
.act-note code { overflow-wrap: anywhere; }
.act-foot { justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.act-foot-btns { display: flex; gap: var(--space-2); margin-left: auto; }
@media (max-width: 620px) {
  .act-changes { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-2); }
  .act-k { grid-column: 1 / -1; margin-top: var(--space-2); }
  .act-k:first-child { margin-top: 0; }
  .act-old { grid-column: 1 / -1; }
}
.domain-health td:first-child { white-space: nowrap; }
.affix { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--color-control-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.affix:focus-within { border-color: var(--color-accent); }
.affix-pre { display: flex; align-items: center; padding: 0 var(--space-3); font: 0.8125rem var(--font-mono); color: var(--color-fg-muted); background: var(--color-surface-subtle); border-right: 1px solid var(--color-control-border); }
.affix .form-control { border: 0; border-radius: 0; box-shadow: none; min-width: 0; flex: 1; }
.field-error .affix { border-color: var(--color-danger-strong); }

/* Verify step: one line per record, then the certificate, each with its own state. */
.domain-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.domain-check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.domain-check-icon { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); display: grid; place-items: center; border: 1px solid var(--color-border-strong); color: var(--color-fg-muted); }
.domain-check-ok .domain-check-icon { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.domain-check-bad .domain-check-icon { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-fg); }
.domain-check-busy .domain-check-icon { border-color: var(--color-accent-line); }
.domain-check-todo { opacity: .6; }
.domain-check-t { font-weight: 500; line-height: 1.5rem; }
.domain-check-d { font-size: var(--text-sm); color: var(--color-fg-muted); overflow-wrap: anywhere; }
.domain-check-code { display: block; font: 0.75rem var(--font-mono); color: var(--color-fg-muted); overflow-wrap: anywhere; }
.domain-danger-link { color: var(--color-danger-fg); }
.domain-later { margin: 0; }

@media (max-width: 720px) {
  .domain-steps .step-d { display: none; }
  /* records stack: type on the left, name over target, so nothing scrolls sideways */
  .domain-records thead { display: none; }
  .domain-records tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
  .domain-records td { padding: 0; border: 0; }
  .domain-records td:first-child { grid-row: span 2; }
  .domain-records td:nth-child(3) { display: flex; gap: var(--space-1); }
  .domain-records td:nth-child(3)::before { content: "→"; color: var(--color-fg-muted); }
  .domain-records .domain-val code { white-space: normal; overflow-wrap: anywhere; }
  .domain-kv { grid-template-columns: minmax(0, 1fr); }
  .domain-kv > dt { padding-bottom: 0; border-top: 1px solid var(--color-divider); }
  .domain-kv > dd { border-top: 0; }
}

/* --- Narrow viewport ---------------------------------------- */
/* The shared shell's own narrow rules are in theme.css. The mock (docs/design/mock) loads this file as is. */
@media (max-width: 1024px) {
  /* The list of applications would crowd the nav row; the Applications entry leads to it. */
  .admin-nav-apps { display: none; }
  .admin-nav-chevron { display: none; }
  .app-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .app-grid { grid-template-columns: 1fr; }
  /* Headers stack: title first, its actions on their own row at the right edge. */
  .panel-head { flex-direction: column; align-items: stretch; }
  .panel-head > .cluster,
  .panel-head > .actions { justify-content: flex-end; }
  /* App tabs: the SSO / Provisioning switch takes its own row above the tabs. */
  nav.app-tabs { flex-wrap: wrap; }
  nav.app-tabs .nav.nav-tabs { flex-basis: 100%; }
  .nav-mode-switch { order: -1; }
}

/* Group picking: the user page's group chips and picker, the groups list's bulk changes. */
.add-row { display: flex; gap: var(--space-2); align-items: flex-start; flex-wrap: wrap; }
.add-row > select,
.add-row > .ts-wrapper { flex: 1 1 22rem; min-width: 0; }
.opt { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.opt-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.opt-name { font-weight: 500; }
.opt-desc { color: var(--color-fg-subtle); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-subtle); white-space: nowrap; }
.ts-dropdown .option.disabled { opacity: 0.5; cursor: default; }

.gchips-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-2); flex-wrap: wrap; }
.gchips-head .form-control { max-width: 16rem; height: 2rem; }
.gchips-head .form-control[hidden] { display: none; }
.gchips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gchip {
  display: inline-flex; align-items: center; gap: 2px; height: 1.75rem; padding: 0 2px 0 var(--space-2);
  border: 1px solid var(--color-border); background: var(--color-surface-subtle); font-size: var(--text-sm);
  border-radius: var(--radius-md); max-width: 100%;
}
.gchip[hidden] { display: none; }
.gchip a { color: var(--color-fg); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gchip a:hover { text-decoration: underline; }
.gchip button { background: none; border: 0; cursor: pointer; color: var(--color-fg-subtle); font-size: 1rem; line-height: 1; padding: 0 6px; height: 100%; }
.gchip button:hover { color: var(--color-danger-fg); }
.gchip-system { border-style: dashed; }
.gchip-tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-subtle); padding: 0 6px 0 4px; }
.gchips-more { margin-top: var(--space-2); }
.linkish { background: none; border: 0; padding: 0; color: var(--color-accent); cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; }
.linkish:hover, .linkish:focus-visible { text-decoration: underline; }
.linkish[hidden] { display: none; }

.bulkbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  min-height: 2.75rem; padding: 5px 5px 5px var(--space-4); margin-bottom: var(--space-2);
  border: 1px solid var(--color-border); border-radius: 0.625rem; background: var(--color-surface-subtle);
  font-size: var(--text-sm);
}
.bulkbar[hidden] { display: none; }
.bulkbar-count { font-weight: 500; color: var(--color-fg-strong); margin-right: var(--space-2); }
.bulkbar-spacer { flex: 1; }
/* The bulk bar sits in the toolbar's cell and swaps with it, so ticking a row never moves the table. */
.toolbar-swap { display: grid; }
.toolbar-swap > * { grid-area: 1 / 1; min-width: 0; }
.toolbar-swap > .bulkbar { margin-bottom: 0; }
.toolbar-swap:not(.is-bulk) > .bulkbar, .toolbar-swap.is-bulk > .toolbar { visibility: hidden; }
.bulkbar-note { color: var(--color-fg-muted); }
.table-check input[type="checkbox"] { display: block; width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-fg); cursor: pointer; }
.table tr.is-selected { background: var(--color-surface-subtle); }
#group-bulk-form > .chips { margin-bottom: var(--space-3); }
#group-bulk-form > [data-bulk-preview] { margin: var(--space-2) 0 0; }
/* The modal body is the dialog's scroller: an absolute list would be clipped, so it pushes down instead. */
[data-bulk-dialog] .ts-dropdown, [data-members-dialog] .ts-dropdown { position: static; margin-top: var(--space-1); box-shadow: none; }
[data-bulk-dialog] .ts-dropdown-content, [data-members-dialog] .ts-dropdown-content { max-height: 12rem; }

/* Group page: header avatar, members just added, the "Add members" side panel, toasts with Undo. */
.page-header-top > .avatar-xl { flex: none; }
.table tr.is-new td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
.user-cell > .chip { margin-left: var(--space-2); }
[data-group-panel][hidden] { display: none; }

/* The modal card pinned to the right edge at full height; the body between tools and footer scrolls. */
dialog.modal.side-panel {
  margin: 0 0 0 auto; width: min(32rem, 100vw); max-width: none; height: 100dvh; max-height: 100dvh;
  border-radius: 0; border-width: 0 0 0 1px;
}
.side-panel .modal-header .form-text { margin: var(--space-1) 0 0; }
.side-panel .modal-footer { align-items: center; }
.side-panel .ts-wrapper { width: 100%; }
.side-panel-tools { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.side-panel-tools[hidden] { display: none; }
.side-panel-section { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 var(--space-2); }
.side-panel-section .form-label { margin: 0 auto 0 0; }
.side-panel-section .btn[hidden] { display: none; }
.side-panel-paste { margin-bottom: var(--space-2); }
.side-panel-paste .modal-list { margin-top: var(--space-1); }
.side-panel-groupbar { margin-bottom: var(--space-2); }
.side-panel-hide { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-fg-muted); }
.members-dialog-move { margin-top: var(--space-3); }
.scim-impact { margin-top: var(--space-3); }
.side-panel-count { margin-right: auto; font-size: var(--text-sm); color: var(--color-fg-muted); }
.side-panel-error { color: var(--color-danger-fg); }
.side-panel label.user-cell { cursor: pointer; }
.side-panel tr.is-off { opacity: 0.55; }
/* The list fits the panel: fixed columns, long names and emails cut with an ellipsis. */
.side-panel .table { table-layout: fixed; width: 100%; }
.side-panel .table td.table-check { width: 3rem; }
.side-panel .table td.text-end.text-nowrap { width: 8.5rem; }
.side-panel .user-cell { min-width: 0; }
.side-panel .user-cell-meta { min-width: 0; overflow: hidden; }
.side-panel .user-cell-meta > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-panel .table-responsive { overflow-x: hidden; }
/* "Show N more" fills its whole row, so the row is the click target. */
.table-card table td.side-panel-more { padding: 0; }
.side-panel-more > .btn { display: flex; width: 100%; height: 100%; min-height: 2.75rem; justify-content: center; border-radius: 0; }

/* Toast with an action: text and button centred on one row. */
.toast-actionable { align-items: center; }
.toast-actionable .toast-text { flex: 1; min-width: 0; }
.toast-actionable .toast-body { overflow-wrap: anywhere; }
.toast-actionable .btn { flex: none; }

/* Account chooser: sign in to an application as someone who shared their account */
.dlg-choices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dlg-choice {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); cursor: pointer;
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.dlg-choice:hover { border-color: var(--color-border-strong); }
.dlg-choice:has(input:checked) { border-color: var(--color-fg); box-shadow: 0 0 0 3px var(--color-accent-ring); }
.dlg-choice:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dlg-choice:has(input:disabled) { cursor: not-allowed; background: var(--color-surface-subtle); }
.dlg-choice:has(input:disabled) .dlg-choice-name { color: var(--color-fg-muted); }
.dlg-choice input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-fg); }
.dlg-choice-name { font-weight: 500; display: block; }
.dlg-choice-sub { display: block; font-size: var(--text-xs); color: var(--color-fg-muted); }
.dlg-choice-sub-warn { color: var(--color-warn-fg); }
.dlg-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.dlg-fieldset > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dlg-choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.dlg-choices-scroll { max-height: 19rem; overflow-y: auto; overflow-x: hidden; padding: 4px; margin: -4px;
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.dlg-choice > :last-child { min-width: 0; }
.dlg-choice-name, .dlg-choice-sub { overflow-wrap: anywhere; }

/* Shared accounts (profile): lists, inline confirms, share dialog */
.dlg-tabs { margin-top: calc(var(--space-2) * -1); }
.dlg-who { display: flex; align-items: center; gap: var(--space-2); }
.dlg-sub { display: block; font-size: var(--text-xs); color: var(--color-fg-muted); }
.dlg-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; }
.dlg-bar-spaced { margin-bottom: var(--space-3); }
.dlg-empty { padding: var(--space-6); text-align: center; color: var(--color-fg-muted); font-size: var(--text-sm); }
.dlg-actions { text-align: right; white-space: nowrap; }
.dlg-confirm { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; font-size: var(--text-sm); }
.dlg-confirm[hidden] { display: none; }
.dlg-inline-error { margin-left: var(--space-2); font-size: var(--text-sm); }
.dlg-confirm .dlg-inline-error { margin-left: 0; }
.dlg-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.dlg-cards-wrap .dlg-cards { margin-bottom: var(--space-2); }
.dlg-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.dlg-list .toolbar { align-items: center; margin-bottom: var(--space-3); }
.dlg-list td .badge { white-space: nowrap; }
/* A date stays on one line ("19 Oct, 22:25"), so From and Until never stack into three lines next to a long
   status badge. What still does not fit scrolls inside the frame instead of sticking out of the card. */
.dlg-list td.font-monospace { white-space: normal; }
.dlg-list .table-frame { overflow-x: auto; }
/* A framed table already has its border, so it does not bleed to the card edge like a bare card table. */
.card .table-frame .table-responsive { margin-inline: 0; }
.card .table-frame .table-responsive :is(th, td):first-child { padding-left: var(--space-3); }
.card .table-frame .table-responsive :is(th, td):last-child { padding-right: var(--space-3); }
.table-dlg th, .table-dlg td { padding-left: var(--space-3); padding-right: var(--space-3); }
/* A list that is reloading dims and ignores clicks: whatever started the request (search box, pager, a
   button in a row) carries .htmx-request, and the list is its ancestor. */
.dlg-list [id^="dlg-"][id$="-region"] { transition: opacity .15s ease; }
.dlg-list:has(.htmx-request) [id^="dlg-"][id$="-region"] { opacity: .5; pointer-events: none; cursor: progress; }
.table-dlg th:last-child { width: 1%; }
.dlg-list .table .dlg-who > span:last-child { min-width: 0; max-width: 7rem; }
.dlg-list .table th, .dlg-list .table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.dlg-list .table .dlg-who > span:last-child, .dlg-list .table .dlg-who .dlg-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-cards .dlg-who > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.dlg-dialog { padding: var(--space-6); max-width: 36rem; width: calc(100% - 2rem); margin: auto; color: var(--color-fg); max-height: calc(100vh - 2rem); overflow: auto; }
.dlg-dialog .modal-body { color: var(--color-fg); }
.dlg-dialog .ts-wrapper { min-width: 0; width: 100%; }
.dlg-form { display: flex; flex-direction: column; gap: var(--space-4); }
.dlg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 30rem) { .dlg-grid2 { grid-template-columns: 1fr; } }
.dlg-dialog .modal-footer { align-items: center; }

/* Admin delegations page: policy card, protected groups, events. */
/* .card.card-body is display:block and gives its children a bottom margin; the double class keeps the
   policy card a column with only the gap between rows. */
.dlg-policy, .card.dlg-policy { display: flex; flex-direction: column; gap: var(--space-4); }
.card.dlg-policy > * { margin-bottom: 0; }
/* What "Delegation is off" greys out; inside the policy card it also stops taking clicks. */
.dlg-dim { opacity: 0.5; }
.dlg-title { margin-bottom: var(--space-3); }
/* The delegations cards head with a card title at the size a dialog title has. */
.dlg-heading { font-size: var(--text-lg); line-height: inherit; }
.dlg-add-group { margin-top: var(--space-2); }
.dlg-policy .dlg-dim { pointer-events: none; }
.dlg-policy-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.dlg-days { width: 6rem; }
.dlg-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-subtle); font-weight: 400; margin-left: var(--space-2); }
.dlg-groups-table { width: 100%; max-width: 34rem; }
.dlg-groups-table .ts-wrapper { width: 100%; min-width: 0; }
.dlg-groups-table select.js-searchable + .ts-wrapper { width: 100%; min-width: 0; }
.dlg-groups-table .ts-control { overflow: hidden; flex-wrap: nowrap; }
.dlg-switch-form { display: flex; align-items: center; gap: var(--space-2); }
.dlg-list td.dlg-by { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-reason { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-list .toolbar-grow { margin-left: auto; display: inline-flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.dlg-list .ts-wrapper { min-width: 14rem; }
.dlg-event { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); font-size: var(--text-sm); flex-wrap: wrap; }
.dlg-event-when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-subtle); min-width: 6.5rem; }
/* Applications card: the switch column keeps one width, so the pill that appears after a toggle, or
   "On" turning into "Off", does not move the next row's switch. */
.table-dlg-apps th:last-child { width: 14rem; }
.table-dlg-apps [data-app-state] { display: inline-block; min-width: 2ch; }