/* ── Cross-Account · discovery-mode option cards ─────────────────────── */
/*
 * Three clickable cards replace the legacy <select>. Each card wraps a
 * radio input; the visible square (`.settings-disco-card-indicator`)
 * substitutes for the native dot so the card behaves like a tile
 * picker. Selected card gets an accent border + soft fill.
 */
.settings-disco-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.55rem;
  margin: 0.55rem 0 0.8rem;
  padding: 0;
  border: 0;
}
.settings-disco-card {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  user-select: none;
}
.settings-disco-card:hover {
  border-color: var(--accent-a35);
}
.settings-disco-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-a10);
}
.settings-disco-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-disco-card-indicator {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.settings-disco-card.is-selected .settings-disco-card-indicator {
  border-color: var(--accent);
  background: radial-gradient(circle at center, var(--accent) 0 38%, transparent 42%);
}
.settings-disco-card-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.settings-disco-card-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.settings-disco-card-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}
.settings-disco-cards.is-readonly .settings-disco-card {
  cursor: not-allowed;
  opacity: 0.85;
}

/* ── Cross-Account · delete-confirm modal ─────────────────────────────── */
.settings-account-delete-card {
  width: min(520px, calc(100% - 2rem));
}
.settings-account-delete-card .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.settings-account-delete-warn {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.settings-account-delete-warn code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--inset);
  padding: 0 0.35rem;
  border-radius: 3px;
}
.settings-account-delete-hint {
  margin: 0;
  font-size: 0.82rem;
}
.settings-account-delete-input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92rem;
}
.settings-account-delete-input:focus { border-color: var(--danger); }

/* Destructive primary action. Distinct from `.btn-primary` so colour
   alone communicates "this deletes data". Disabled state collapses to
   the muted gray (same as the other secondary buttons) so the user
   sees clearly that they haven't typed the confirmation yet. */
.btn-danger {
  background: var(--danger);
  color: var(--on-fill);
  border: 1px solid var(--danger);
  border-radius: 4px;
  padding: 0.4rem 1rem;
  font-size: 0.87rem;
  cursor: pointer;
  transition: filter 0.12s, background 0.12s;
}
.btn-danger:hover:not([disabled]) { filter: brightness(1.08); }
.btn-danger[disabled] {
  background: var(--neutral-bg);
  border-color: var(--neutral-border);
  color: var(--muted, var(--neutral));
  cursor: not-allowed;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Security · connector-secrets card ─────────────────────────────── */
.settings-secrets-modes {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.settings-secrets-modes li {
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bg);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}
.settings-secrets-modes li strong { color: var(--accent); margin-right: 0.25rem; }

/* KMS key ARN input is wide because ARNs are long. Mono font + larger
   width so the operator sees the value isn't truncated and clearly
   editable, not a read-only display. */
.settings-secrets-cmk-row {
  align-items: flex-start;
}
.settings-secrets-cmk {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  flex: 1 1 32rem;
  min-width: 24rem;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.45rem 0.6rem;
}
.settings-secrets-cmk:focus { border-color: var(--accent); }

/* Migration confirm modal — slightly wider so the warning + scope
   bullets fit without wrapping awkwardly. */
.settings-secrets-migrate-card { width: min(560px, calc(100% - 2rem)); }
.settings-secrets-migrate-warn {
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
  color: var(--text);
}

/* ── Users · toolbar + role legend ────────────────────────────────── */
.settings-users-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.55rem 0 0.75rem;
  flex-wrap: wrap;
}
.settings-users-roles {
  margin-left: auto;
}
.settings-users-roles > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--accent);
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--accent-a35);
  border-radius: 4px;
  user-select: none;
}
.settings-users-roles > summary::-webkit-details-marker { display: none; }
.settings-users-roles > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 0.2rem;
  transition: transform 0.12s;
}
.settings-users-roles[open] > summary::before { content: "▾ "; }
.settings-users-roles[open] > summary { background: var(--accent-a10); }

.settings-users-roles-tbl {
  margin-top: 0.6rem;
  border-collapse: collapse;
  width: 100%;
  font-size: 0.85rem;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bg);
  border-radius: 6px;
  overflow: hidden;
}
.settings-users-roles-tbl thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.45rem 0.65rem;
  background: var(--neutral-bg);
  text-align: left;
}
.settings-users-roles-tbl td {
  padding: 0.5rem 0.65rem;
  border-top: 1px solid var(--neutral-bg);
  vertical-align: top;
  line-height: 1.45;
}
.settings-users-roles-tbl td:first-child { white-space: nowrap; }

/* GUID row inside the edit-user modal — surfaces the user_guid as a
   copyable value without putting it in the table column. */
.settings-user-guid-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.settings-user-guid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bg);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  word-break: break-all;
  flex: 1 1 18rem;
}
.settings-user-guid-copy { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

/* ── Settings view ─────────────────────────────────────────────────────── */

#settings-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

#settings-users,
#settings-tenant-groups-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

#settings-users th,
#settings-users td,
#settings-tenant-groups-tbl th,
#settings-tenant-groups-tbl td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

#settings-users th,
#settings-tenant-groups-tbl th {
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

#settings-users tbody tr:hover,
#settings-tenant-groups-tbl tbody tr:hover { background: var(--accent-a04); }

#settings-users td:last-child,
#settings-tenant-groups-tbl td:last-child {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

#settings-users .settings-delete,
#settings-tenant-groups-tbl .settings-delete {
  color: var(--danger);
  border-color: var(--danger-bg);
}
#settings-users .settings-delete:hover,
#settings-tenant-groups-tbl .settings-delete:hover { border-color: var(--danger); }

/* Modal password input + group checkboxes */

#settings-user-modal .form-row input[type="password"],
#settings-user-modal .form-row input[type="text"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
}
#settings-user-modal .form-row input:focus { border-color: var(--accent); }
#settings-user-modal .form-row input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.settings-groups-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-group-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--text);
}

.settings-group-item:hover { border-color: var(--accent); }

.settings-group-item input[type="checkbox"] { cursor: pointer; }

/* ── Two-pane settings layout ────────────────────────────────────────── */

.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  align-items: start;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem;
  position: sticky;
  top: 0.5rem;
}
.settings-nav button {
  text-align: left;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.settings-nav button:hover {
  color: var(--text);
  background: var(--lift);
  border-color: transparent;
}
.settings-nav button.active {
  color: var(--accent);
  background: var(--accent-a10);
}

.settings-pane > .settings-section {
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0;
}
.settings-pane > .settings-section.is-active {
  display: flex;
}

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .settings-nav button { flex-shrink: 0; }
}

/* ── Global settings section (Phase A.5) ──────────────────────────────── */

.settings-section {
  margin-top: 1.25rem;
}
.settings-section h3 {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}

.settings-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.settings-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.settings-card-title {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
}
.settings-card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Per-FIELD explainer, under an input inside a card (vs .settings-card-sub,
   which subtitles the whole card). Used by the custom-control base-weight
   picker, where the author needs to know the number is a weight and not the
   severity anyone will actually see. */
.settings-field-hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
}
.settings-card-sub code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.72rem;
}

.settings-schedule-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.settings-schedule-row input[type="text"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  min-width: 220px;
}
.settings-schedule-row input[type="text"]:focus { border-color: var(--accent); }
.settings-schedule-row input[type="text"]:disabled { opacity: 0.55; cursor: not-allowed; }

/* Schedule preset chips — fast paths for common cadences so operators
   don't have to know the EventBridge `rate(...)` syntax. */
.settings-schedule-presets { gap: 0.4rem; }
.settings-preset {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.settings-preset:hover {
  background: var(--accent-a10);
  border-color: var(--accent-a35);
}
.settings-preset.is-active {
  background: var(--accent-a16);
  border-color: var(--accent);
  color: var(--text);
}

/* Segmented-control variant of the preset row used for the collector
   schedule. Buttons sit flush against each other with one shared
   rounded border so they read as a single control rather than five
   independent pills. */
.settings-segmented {
  gap: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}
.settings-segmented .settings-preset {
  border-radius: 0;
  border: 0;
  border-right: 1px solid var(--border);
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  background: transparent;
}
.settings-segmented .settings-preset:last-child {
  border-right: 0;
}
.settings-segmented .settings-preset:hover {
  background: var(--accent-a10);
  border-color: var(--border);
}
.settings-segmented .settings-preset.is-active {
  background: var(--accent-a16);
  color: var(--accent);
  font-weight: 600;
}

/* Item 8 — region picker. Chip row up top shows what's chosen,
   search input filters the (alphabetized) option list below. The
   summary line is the at-a-glance answer to "what's enabled here". */
.settings-region-summary {
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.settings-region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 1.6rem;
  margin-bottom: 0.5rem;
}
.settings-region-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem 0.2rem 0.6rem;
  background: var(--accent-a16);
  border: 1px solid var(--accent-a35);
  color: var(--accent);
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.settings-region-chip-x {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0 0.15rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.7;
}
.settings-region-chip-x:hover { opacity: 1; }
.settings-region-search {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}
.settings-region-search:focus { border-color: var(--accent); }
.settings-region-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.25rem;
  max-height: 220px;
  overflow-y: auto;
}
.settings-region-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  font-size: 0.82rem;
  cursor: pointer;
}
.settings-region-option:hover { background: var(--accent-a04); }
.settings-region-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
}
.settings-region-name { font-size: 0.78rem; }
.settings-region-empty { padding: 0.5rem; }

/* Primary region row — five common regions surfaced front-and-center
   so operators don't have to scan the full 19-region grid for the
   one they need. Compact horizontal flex with a clear selected state
   (accent border + light accent fill). */
.settings-region-grouplabel {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0.6rem 0 0.3rem;
}
.settings-region-options--primary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: none;
  overflow: visible;
}
.settings-region-options--primary .settings-region-option {
  border: 1px solid var(--border);
  padding: 0.45rem 0.65rem;
}
.settings-region-options--primary .settings-region-option.is-selected {
  background: var(--accent-a10);
  border-color: var(--accent);
}

.settings-region-home {
  margin-left: auto;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* "Add N more regions" disclosure — collapses the long tail by default
   and only reveals search + the full grid on demand. */
.settings-region-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 0;
  color: var(--accent);
  padding: 0.5rem 0;
  font-size: 0.85rem;
  cursor: pointer;
}
.settings-region-disclosure:hover { text-decoration: underline; }
.settings-region-disclosure-caret {
  display: inline-block;
  width: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.settings-region-extras {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border);
}

.settings-region-banner {
  background: var(--accent-a10);
  border: 1px solid var(--accent-a35);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0.55rem;
}
.settings-region-banner code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--inset);
  padding: 0 0.3rem;
  border-radius: 3px;
}

/* Card-to-card divider used to separate the Schedule and Regions cards
   inside the General tab. Plain <hr> reads as a section break instead
   of "two stacked boxes that look the same". */
.settings-section-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
  opacity: 0.6;
}

/* One-line callout that summarizes the difference between Inventory and
   DSPM scan regions before the operator scrolls into the table. */
.settings-region-callout {
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-bg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  line-height: 1.5;
}
.settings-region-callout-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.settings-region-callout-pill--inv  { background: var(--accent-a16);  color: var(--accent); }
.settings-region-callout-pill--dspm { background: var(--neutral-bg);  color: var(--accent); }
.settings-region-callout-sep { color: var(--muted); padding: 0 0.15rem; }

/* Two-column summary chips replacing the old "N regions selected" line.
   One for each pipeline so the operator sees at a glance how many
   regions each side has enabled. */
.settings-region-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.settings-region-summary-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: var(--neutral-bg);
  border: 1px solid var(--neutral-border);
}
.settings-region-summary-pill strong { font-variant-numeric: tabular-nums; }
.settings-region-summary-pill--inv {
  background: var(--accent-a10);
  border-color: var(--accent-a35);
  color: var(--accent);
}
.settings-region-summary-pill--dspm {
  background: var(--neutral-bg);
  border-color: var(--neutral-border);
  color: var(--accent);
}

/* Merged Inventory + DSPM region table. One row per region, two
   checkbox columns. The checkbox columns are narrow (centered) so
   the region-name column gets all available width. */
.settings-regions-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.settings-regions-tbl thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--lift);
}
.settings-regions-th-cb { text-align: center; width: 8rem; }
.settings-regions-tbl tbody tr { border-bottom: 1px solid var(--border); }
.settings-regions-tbl tbody tr:last-child { border-bottom: 0; }
.settings-regions-tbl tbody tr.is-any-selected { background: var(--accent-a04); }
.settings-regions-row-name {
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.settings-regions-row-cb {
  text-align: center;
  vertical-align: middle;
  padding: 0.5rem 0.6rem;
}
.settings-regions-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 4px;
}
.settings-regions-toggle:hover { background: var(--accent-a10); }
.settings-regions-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Two save buttons sit side-by-side; one per pipeline so the user can
   commit changes independently. */
.settings-regions-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Post-save "Run inventory now?" prompt — confirmation-style banner
   that surfaces the most likely next action after the operator
   reconfigures schedule or regions. Green accent so it reads as a
   success-followed-by-suggestion, not as a warning. */
.settings-runscan-prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
  margin: 0.5rem 0 0;
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--text);
}
.settings-runscan-prompt[hidden] { display: none; }
.settings-runscan-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ok-border);
  color: var(--ok);
  font-weight: 700;
  flex-shrink: 0;
}
.settings-runscan-prompt-text { flex: 1 1 auto; min-width: 14ch; }
.settings-runscan-prompt-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* The merged Inventory + DSPM regions container. Hosts a single table
   rendered top-to-bottom; the disclosure panel below it carries the
   long-tail regions when expanded. No outer scroll — the disclosure
   bounds growth and the page itself scrolls past that. */
.settings-regions-list {
  display: block;
  padding: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.settings-region-extras {
  max-height: 360px;
  overflow-y: auto;
}
.settings-region-extras .settings-region-search { margin-bottom: 0.5rem; }

/* H.8 — unvalidated-SLA per-framework grid */
.settings-sla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
  padding: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.settings-sla-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
}
.settings-sla-row label {
  flex: 1 1 auto;
  font-size: 0.85rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text);
}
.settings-sla-row label.is-default {
  font-weight: 600;
  color: var(--accent);
  font-family: inherit;
}
.settings-sla-row input[type="number"] {
  width: 4.5rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.85rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  text-align: right;
}
.settings-sla-row input[type="number"]:focus { border-color: var(--accent); }
.settings-sla-row input[type="number"]:disabled { opacity: 0.55; cursor: not-allowed; }
.settings-sla-row .settings-sla-unit {
  font-size: 0.78rem;
  color: var(--dim);
  min-width: 2.5rem;
}
.settings-sla-row.is-dirty {
  background: var(--warn-bg);
}
.settings-sla-row.is-dirty input[type="number"] {
  border-color: var(--warn);
}

/* Inline Retry button inside error blocks — used by the DAM panels
   when a fetch fails on initial page load (one of the 16 parallel
   panel loads hit the browser's per-host connection cap). Lets the
   user recover a single panel without reloading the whole page. */
.settings-inline-retry {
  background: var(--accent-a16);
  color: var(--accent);
  border: 1px solid var(--accent-a35);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: 0.35rem;
}
.settings-inline-retry:hover {
  background: var(--accent-a35);
}

/* H.10 — audit log list */
/* U7 — filter row above the audit list (search + connect-hide toggle). */
.settings-audit-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0 0.5rem 0;
  padding: 0.35rem 0;
}
.settings-audit-filter-row .settings-audit-search {
  flex: 1;
  padding: 0.35rem 0.55rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.85rem;
}
.settings-audit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--dim);
  user-select: none;
  cursor: pointer;
}
.settings-audit-toggle code {
  background: var(--accent-a10);
  padding: 0 0.25rem;
  border-radius: 3px;
}

.settings-audit-list {
  max-height: 380px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.settings-audit-row {
  display: grid;
  grid-template-columns: 130px 110px 110px 1fr 60px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.settings-audit-row:last-child { border-bottom: none; }
.settings-audit-row:hover { background: var(--accent-a04); }
.settings-audit-ts { color: var(--dim); }
.settings-audit-actor { color: var(--text); font-weight: 600; }
.settings-audit-action { color: var(--accent); }
.settings-audit-action.is-failure { color: var(--danger); }
.settings-audit-target {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-audit-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-audit-status.ok   { background: var(--ok-bg); color: var(--ok); }
.settings-audit-status.bad  { background: var(--danger-bg); color: var(--danger-2); }
.settings-audit-detail {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: var(--inset);
  border-radius: 3px;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.settings-audit-empty {
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--dim);
  text-align: center;
}

/* H.10 — improved disclosure summary. Replaces the old "details…" text
   that read as a typo on first glance. The chevron rotates on open. */
.settings-audit-detail-wrap {
  grid-column: 1 / -1;
}
.settings-audit-detail-summary {
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--dim);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0;
  user-select: none;
}
.settings-audit-detail-summary::-webkit-details-marker { display: none; }
.settings-audit-detail-summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  font-size: 0.65rem;
  transition: transform 0.12s;
}
.settings-audit-detail-wrap[open] .settings-audit-detail-summary::before {
  transform: rotate(90deg);
}

/* Admin actions / System events tab bar */
.settings-audit-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 0 0.1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}
.settings-audit-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0.35rem 0.75rem;
  color: var(--dim);
  font-size: 0.82rem;
  cursor: pointer;
  font: inherit;
}
.settings-audit-tab:hover {
  color: var(--text);
  background: var(--lift);
}
.settings-audit-tab.is-active {
  color: var(--text);
  background: var(--panel);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  margin-bottom: -1px;
  font-weight: 600;
}

/* Outpost agents grid — proper column headers + name/secondary stack */
.settings-outposts-grid-head,
.settings-outposts-row {
  display: grid;
  grid-template-columns: 140px 1.4fr 90px 1fr 130px;
  gap: 0.65rem;
  align-items: center;
}
.settings-outposts-grid-head {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  border-radius: 4px 4px 0 0;
  color: var(--dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.settings-outposts-row {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.settings-outposts-row:last-child { border-bottom: none; }
.settings-outposts-row:hover { background: var(--accent-a04); }
.settings-outposts-cell-ts { color: var(--dim); font-family: ui-monospace, monospace; font-size: 0.78rem; }
.settings-outposts-cell-name { display: flex; flex-direction: column; min-width: 0; }
.settings-outposts-name-primary {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-outposts-name-secondary {
  font-size: 0.7rem;
  font-family: ui-monospace, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-outposts-cell-version {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--text);
}
.settings-outposts-cell-roles {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}
.settings-outposts-cell-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}
.settings-outposts-sub {
  font-size: 0.68rem;
  color: var(--dim);
}

/* Status dot legend on the toolbar above the grid */
.settings-outposts-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  font-size: 0.72rem;
}
.settings-outposts-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}
.settings-outposts-legend-dot.ok    { background: var(--ok); }
.settings-outposts-legend-dot.warn  { background: var(--warn); }
.settings-outposts-legend-dot.bad   { background: var(--danger-2); }
.settings-outposts-legend-dot.muted { background: var(--dim, var(--dim)); }

/* "Not deployed" rows are pinned to the bottom of the agent grid and
   dimmed so they read as opt-in placeholders rather than failures. */
.settings-outposts-row.is-not-deployed {
  opacity: 0.7;
  background: var(--lift);
}
.settings-outposts-row.is-not-deployed .settings-outposts-name-primary {
  color: var(--dim);
  font-weight: 500;
}

/* Muted pill variant used by the "Not deployed" status. Coexists with
   .settings-audit-status's existing .ok / .bad / .warn pills. */
.settings-audit-status.muted {
  background: var(--neutral-bg);
  color: var(--dim, var(--muted));
}

/* Outpost revert confirmation modal — bullet list inside the warn body */
.settings-outpost-revert-list {
  margin: 0.6rem 0 0.4rem 0;
  padding-left: 1.1rem;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
}
.settings-outpost-revert-list li { margin-bottom: 0.35rem; }

.settings-drift-banner {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bg);
  color: var(--warn);
  padding: 0.55rem 0.75rem;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.settings-drift-banner code {
  background: var(--warn-bg);
  color: var(--warn);
  padding: 0 4px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
}

/* ── API endpoint card (read-only) ──────────────────────────────────── */

.settings-api-endpoint {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.45rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}

/* ── Topbar user menu ───────────────────────────────────────────────── */

#topbar-user {
  margin-left: 0.5rem;
  position: relative;
}
#topbar-user[hidden] { display: none; }

.topbar-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem 0.2rem 0.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  transition: background 0.12s, border-color 0.12s;
}
.topbar-user-btn:hover,
.topbar-user-btn[aria-expanded="true"] {
  background: var(--border);
  border-color: var(--border);
}
.topbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-fill);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.topbar-user-caret {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
}

.topbar-user-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0;
  z-index: 200;
  box-shadow: 0 4px 16px var(--shadow);
}
.topbar-user-menu[hidden] { display: none; }
.topbar-user-menu-head {
  padding: 0.35rem 0.85rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.topbar-user-menu-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-menu-tenant {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-user-menu-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.25rem 0;
}
.topbar-user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0.45rem 0.85rem;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.topbar-user-menu-item:hover {
  background: var(--border);
}

/* ── Cross-account connectivity test (POST /admin/test-assume) ────── */

.settings-test-cell {
  white-space: nowrap;
}
.settings-test {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  background: var(--border);
  color: var(--text);
  border: none;
}
.settings-test:hover:not(:disabled) {
  background: var(--accent-a16);
}
.settings-test:disabled {
  opacity: 0.6;
  cursor: wait;
}
.settings-test-result {
  margin-left: 0.4rem;
  font-size: 0.72rem;
}
.settings-test-result.ok   { color: var(--ok); }
.settings-test-result.fail { color: var(--danger); cursor: help; }

/* ── Enrollment wizard ────────────────────────────────────────────── */

.settings-account-mode {
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--accent-a04);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.settings-account-mode-buttons {
  display: flex;
  gap: 0.4rem;
}
.settings-account-mode-buttons button {
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}

.settings-wizard-callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  margin: 0.5rem 0 1rem;
}
.settings-wizard-callout-title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warn);
}
.settings-wizard-extid-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.settings-wizard-extid {
  flex: 1;
  background: var(--panel);
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--warn);
  user-select: all;
  word-break: break-all;
}

.settings-wizard-step-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.85rem 0 0.4rem;
  color: var(--text);
}

.settings-wizard-cmd-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.settings-wizard-cmd {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  user-select: all;
}

.settings-wizard-verify-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.3rem;
}
.settings-wizard-verify-row .ok   { color: var(--ok); font-weight: 600; }
.settings-wizard-verify-row .fail { color: var(--danger); font-weight: 600; }

/* Phase 4 PR-F — deployment-mode pill colors. Remote = green (current
   safe default), outpost = blue (active distinct path). Unknown stays
   on the base badge color so a failed GET is visibly different. */
.mode-pill.mode-remote  { background: var(--ok-bg); color: var(--ok); }
.mode-pill.mode-outpost { background: var(--panel-3); color: var(--accent); }

/* Phase 3 — Custom DSPM classifier table + authoring modal. */
.settings-classifier-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 0.6rem;
  font-size: 0.86rem;
}
.settings-classifier-table th,
.settings-classifier-table td {
  text-align: left;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.settings-classifier-table th {
  font-weight: 600;
  color: var(--text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-classifier-table code.mono {
  background: var(--panel-2);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
}
.settings-classifier-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}
.settings-classifier-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.7rem;
}
.settings-classifier-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.7rem;
}
.settings-classifier-field-grid label,
.settings-classifier-field label {
  font-size: 0.82rem;
  font-weight: 500;
}
.settings-classifier-field input,
.settings-classifier-field select,
.settings-classifier-field-grid select {
  padding: 0.4rem 0.5rem;
  background: var(--bg-elevated, var(--panel-2));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.86rem;
}
.settings-classifier-hint {
  font-size: 0.76rem;
  margin: 0;
}

/* Phase 4 — Custom-framework table styling. The outer table reuses
   .settings-classifier-table; per-framework control rows render in
   a nested .settings-custom-control-table. */
.settings-custom-control-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.2rem 0 0.5rem;
  font-size: 0.8rem;
}
.settings-custom-control-table th,
.settings-custom-control-table td {
  text-align: left;
  padding: 0.25rem 0.45rem;
  border-bottom: 1px dashed var(--border);
}
.settings-custom-control-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-muted, var(--text));
}
.custom-control-row td:first-child {
  padding-left: 1.2rem;
}
.settings-custom-control-rdc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.3rem 0;
}
.settings-custom-control-rdc label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
}
/* Inline tag rendered inside the Custom Frameworks card description
   so the same visual is used in the settings copy and in finding chips. */
.custom-fw-badge-inline {
  display: inline-block;
  background: var(--info-bg);
  color: var(--info);
  border-radius: 3px;
  padding: 0.02rem 0.32rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* "Custom" badge rendered next to each custom-framework chip on the
   Compliance tab. Same color tokens as the inline variant so they read
   as one visual treatment. */
.framework-chip-custom-badge {
  background: var(--info-bg);
  color: var(--info);
  border-radius: 3px;
  padding: 0 0.32rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0.25rem;
  vertical-align: middle;
}

/* Addendum A — Outpost upgrade-policy control bar + stale-version badge. */
.settings-outposts-upgrade {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0.25rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
}
.settings-inline-label {
  color: var(--dim);
  font-size: 0.8rem;
}
.settings-select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
}
.settings-select:focus { border-color: var(--accent); }
.settings-select:disabled { opacity: 0.55; cursor: not-allowed; }
.settings-outposts-stale { margin-left: 0.4rem; }

/* Wide-table containment (the #compliance-table-area precedent, table.css).
   The settings tables have no column clamping, so their min-content width can
   exceed the pane — two 36-char GUID mono columns on the Azure subscriptions
   table crossed the threshold. Without min-width: 0 the 1fr pane track grows
   to min-content instead of letting the wrapper scroll, and #content's
   overflow-x: hidden then clips the card off-screen with no scrollbar. */
#settings-accounts-table,
#settings-azure-subs-table,
#settings-users-table {
  overflow-x: auto;
  max-width: 100%;
}
.settings-card { min-width: 0; }
.settings-layout > .settings-pane { min-width: 0; }