/* ===================== SETTINGS SHELL ===================== */

.settings-view__heading {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin-bottom: var(--sp-4, 16px);
}

.settings-shell {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-6, 32px);
  align-items: start;
}

.settings-section-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
}

.settings-section-nav__heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  color: var(--fg-3);
  margin-bottom: var(--sp-1, 4px);
}

.settings-section-nav__item {
  text-align: left;
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--fg-2);
  cursor: pointer;
}

.settings-section-nav__item--active {
  background: var(--bg-2);
  color: var(--fg-1);
  font-weight: 600;
}

.settings-section-content {
  min-width: 0;
}

/* Inactive sections stay mounted (drafts survive switching) but are never displayed — matches the
   explicit [hidden] rules app.css already uses for panels with their own display value. */
.settings-section-content[hidden] {
  display: none;
}

/* "System" group label in the section nav — same type ramp as the "Sections" heading, spaced to
   separate the group, with its items indented beneath it. */
.settings-section-nav__group {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  color: var(--fg-3);
  margin-top: var(--sp-3, 12px);
}

.settings-section-nav__item--nested {
  padding-left: var(--sp-4, 16px);
}

.settings-section-nav__item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ===================== SHARED CONFIGURATION (System) ===================== */

.settings-card--compact {
  max-width: 560px;
}

/* Technicians, Global Groups and Shared configuration (.settings-gate--wide on their gate containers
   only — Integrations is untouched). A gate shows either a short state message (checking access,
   denied, unavailable — left at its natural width, so its buttons never stretch) or the section's
   editor, which spans the content column beside the section nav instead of the 560px compact cap.
   Help text keeps a readable line length and simple inputs keep their own widths; only the search
   box grows, up to a comfortable limit. Add/Remove actions sit at the right end of every row, and
   long names, emails and object IDs wrap inside their row. */
.settings-gate--wide > .settings-card,
.settings-gate--wide > .settings-tabs,
.settings-gate--wide > [role="tabpanel"] {
  align-self: stretch;
}

.settings-gate--wide .settings-card--compact {
  max-width: none;
  gap: var(--sp-4, 16px);
  padding: var(--sp-4, 16px) var(--sp-5, 24px);
}

.settings-gate--wide > .settings-tabs {
  margin-bottom: 0;
}

.settings-gate--wide .settings-card__note,
.settings-gate--wide .settings-field-error,
.settings-gate--wide .settings-group-row__note,
.settings-gate--wide .settings-group-row__warning {
  max-width: 80ch;
}

.settings-gate--wide .settings-instance-list {
  margin-bottom: 0;
}

.settings-gate--wide .settings-instance-row > .settings-btn {
  flex: 0 0 auto;
  margin-left: auto;
}

.settings-gate--wide .settings-technician-picker {
  margin-bottom: 0;
}

.settings-gate--wide .settings-inline-field .filter-input[type="search"] {
  flex: 1 1 280px;
  min-width: 0;
  max-width: 32rem;
}

.settings-gate--wide .settings-technician-candidates__list,
.settings-gate--wide .settings-group-directory__list {
  max-height: min(60vh, 480px);
}

/* Readability (same three sections). Explanatory paragraphs use the body scale with a loose line
   height; picker counts and row metadata stay at the caption scale so lists remain compact. The
   card falls into three visually separated zones — help and editing, the status rows, and the
   actions — using the existing border token. Empty status notes take no space. */
.settings-gate--wide .settings-card > .settings-card__note,
.settings-gate--wide .settings-card > .settings-field-error {
  font-size: var(--fs-body, 16px);
  line-height: var(--lh-loose, 1.6);
}

.settings-gate--wide .settings-technician-picker .settings-card__note,
.settings-gate--wide .settings-technician-picker .settings-field-error {
  font-size: var(--fs-caption, 14px);
  line-height: var(--lh-normal, 1.45);
}

.settings-gate--wide .settings-card__note:empty {
  display: none;
}

.settings-gate--wide .settings-group-row__body,
.settings-gate--wide .settings-technician-candidate {
  gap: var(--sp-1, 4px);
}

.settings-gate--wide .settings-group-row__body .settings-instance-row__meta,
.settings-gate--wide .settings-technician-candidate .settings-instance-row__meta,
.settings-gate--wide .settings-group-row__note,
.settings-gate--wide .settings-group-row__warning,
.settings-gate--wide .settings-group-row__details summary {
  font-size: var(--fs-caption, 14px);
  line-height: var(--lh-normal, 1.45);
}

.settings-gate--wide .settings-group-row__details summary {
  padding: 2px 0;
}

.settings-gate--wide .settings-group-row__details[open] summary {
  margin-bottom: var(--sp-1, 4px);
}

.settings-gate--wide .settings-meta {
  column-gap: var(--sp-5, 24px);
  row-gap: var(--sp-2, 8px);
  line-height: var(--lh-normal, 1.45);
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--border-1, var(--fg-3));
}

.settings-gate--wide .settings-save-row {
  padding-top: var(--sp-4, 16px);
  border-top: 1px solid var(--border-1, var(--fg-3));
}

.settings-gate--wide .settings-save-row:empty {
  display: none;
}

/* Picker search: label above its input. (The Shared configuration interval keeps its inline label,
   input and unit.) */
.settings-gate--wide .settings-technician-picker .settings-inline-field {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-1, 4px);
  width: 100%;
}

.settings-gate--wide .settings-technician-picker .settings-inline-field .filter-input[type="search"] {
  flex: 0 0 auto;
  width: 100%;
}

@media (max-width: 640px) {
  .settings-gate--wide .settings-card--compact {
    padding: var(--sp-3, 12px);
  }

  .settings-gate--wide .settings-inline-field .filter-input[type="search"] {
    flex-basis: 100%;
    max-width: none;
  }
}

.settings-input-unit {
  color: var(--fg-2);
}

.settings-field-error {
  color: #c0392b;
  font-size: var(--fs-caption, 14px);
  margin: 0;
  min-height: 0;
}

.settings-field-error:empty {
  display: none;
}

.settings-card__note--warning {
  color: #b8860b;
}

/* Settings status rows (Technicians, Shared configuration): one row per label/value pair, with a
   long value wrapping inside its own row. Narrow screens stack each label above its value. */
.settings-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-2, 8px);
  row-gap: var(--sp-1, 4px);
  margin: 0;
}

.settings-meta dt {
  color: var(--fg-2);
}

.settings-meta dd {
  margin: 0;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .settings-meta {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .settings-meta dd + dt {
    margin-top: var(--sp-2, 8px);
  }
}

.settings-save-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
}

/* ===================== INTEGRATION SETTINGS ===================== */

.settings-view h2 {
  font-family: var(--font-display);
  color: var(--fg-1);
}

.settings-view__note {
  color: var(--fg-2);
  margin-bottom: var(--sp-4, 16px);
}

.settings-instance-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-4, 16px);
}

.settings-instance-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border: 1px solid var(--fg-3, #999);
  border-radius: 6px;
}

.settings-instance-row__name {
  flex: 1 1 160px;
  min-width: 0;
  font-weight: 600;
  color: var(--fg-1);
  overflow-wrap: anywhere;
}

/* The two indicator columns (Enabled, Status) — a shared min-width keeps them roughly aligned from
   row to row without a full grid; flex-wrap on the row above lets either one drop to its own line
   on narrow screens rather than truncating or overlapping the Edit button. */
.settings-instance-row__indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 150px;
  font-size: var(--fs-caption, 14px);
  color: var(--fg-2);
}

.settings-instance-row__meta {
  color: var(--fg-3);
  font-size: 12px;
}

/* Technicians → Choose technicians: the candidate panel. Groups can be large, so the candidate list
   scrolls inside the card instead of pushing Save off screen; each row stacks name over email. */
.settings-technician-picker {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-3, 12px);
}

.settings-technician-picker__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  width: 100%;
}

.settings-technician-candidates__list {
  max-height: 320px;
  overflow-y: auto;
}

.settings-technician-candidate {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* The shared row classes size their text along the ROW's main axis; in this stacked cell that
   basis would become a height, so the name and email take only their natural height here. */
.settings-technician-candidate > * {
  flex: 0 0 auto;
}

/* Global Groups: the two list tabs (Security & Microsoft 365 / Exchange), using the section nav's
   active and focus treatment, and directory/configured rows that stack name, email, type badge,
   object-ID details and any note or warning. Long names and IDs wrap inside the row. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1, 4px);
  margin-bottom: var(--sp-3, 12px);
  border-bottom: 1px solid var(--border-1, var(--fg-3));
}

.settings-tab {
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: none;
  color: var(--fg-2);
  font: inherit;
  cursor: pointer;
}

.settings-tab--active {
  background: var(--bg-2);
  color: var(--fg-1);
  font-weight: 600;
  border-bottom-color: var(--fg-1);
}

.settings-tab:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.settings-group-directory__list {
  max-height: 320px;
  overflow-y: auto;
}

.settings-group-row__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-group-row__body > * {
  flex: 0 0 auto;
}

.settings-group-badge {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.settings-group-row__details summary {
  color: var(--fg-3);
  font-size: 12px;
  cursor: pointer;
}

.settings-group-row__note {
  color: var(--fg-2);
  font-size: 12px;
}

.settings-group-row__warning {
  color: #b8860b;
  font-size: 12px;
  font-weight: 600;
}

/* Compact legend beneath the instance list explaining the two indicators above — static, never
   interactive, reusing the same .settings-status-dot color language as the indicators themselves
   and the editor's own status panel. */
.settings-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4, 16px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 6px;
  background: var(--bg-2);
  font-size: var(--fs-caption, 14px);
  color: var(--fg-2);
}

.settings-legend__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
}

.settings-legend__group strong {
  color: var(--fg-1);
}

.settings-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Forced onto its own line below the two color-key groups (a plain flex child would otherwise sit
   inline beside them and wrap awkwardly) — the one-sentence scope reminder the approved design
   calls for ("Status reflects the last API connection check"). */
.settings-legend__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--fg-3);
  font-size: 12px;
  font-style: italic;
}

.settings-editor-heading {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: var(--sp-4, 16px) 0 var(--sp-3, 12px);
}

/* Left: the editor (its own internal two-column layout below). Right: a compact status panel.
   Widened from the prior single-column-editor pass specifically so pairing Connection/Credentials
   with Source/Action no longer has to compete with the status panel for room — the panel takes a
   fixed 280px; the editor gets whatever remains, which is comfortably enough at this max-width for
   two ~320px+ cards side by side without stretching their controls. */
.settings-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp-5, 24px);
  align-items: start;
  max-width: 1320px;
}

.settings-editor-main {
  min-width: 0;
}

/* The editor's OWN internal layout: Connection & Credentials beside Source & Action; Readiness,
   Field Mappings, Sample Validation, and Save each span both columns below (.settings-card--full)
   since their content is variable-length, not a fixed small field set that pairs naturally. */
.settings-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4, 16px);
  align-items: start;
}

.settings-card--full {
  grid-column: 1 / -1;
}

/* Below this, pairing Connection/Source AND keeping the status panel beside the editor would
   squeeze both — collapse the editor's internal pairing to one column first (the status panel
   stays beside it a while longer, since 280px is a much smaller ask than a second card column). */
@media (max-width: 1100px) {
  .settings-editor-grid {
    grid-template-columns: 1fr;
  }
}

.settings-status-panel {
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 8px;
  padding: var(--sp-4, 16px);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
  /* Sticky, never fixed/overlaid — this is a SEPARATE grid column beside the content, so staying
     in view while the left column scrolls never covers anything or sits over keyboard focus. */
  position: sticky;
  top: var(--sp-4, 16px);
}

.settings-status-panel__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: var(--sp-3, 12px);
  border-bottom: 1px solid var(--border-1, var(--fg-3));
}
.settings-status-panel__section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.settings-status-panel__heading {
  font-family: var(--font-display);
  font-size: var(--fs-body, 16px);
  color: var(--fg-1);
  margin: 0;
  word-break: break-word;
}

.settings-status-panel__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  color: var(--fg-3);
}

.settings-status-panel__value {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  margin: 0;
  color: var(--fg-1);
  font-weight: 600;
}

.settings-status-panel__meta {
  margin: 0;
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
}

.settings-status-panel__meta--muted {
  font-style: italic;
}

/* Text always carries the meaning; the dot is decorative (aria-hidden) reinforcement only — never color alone. */
.settings-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.settings-status-dot--neutral { background: var(--fg-3); }
.settings-status-dot--success { background: #2e7d32; }
.settings-status-dot--warning { background: #b8860b; }
.settings-status-dot--error   { background: #c0392b; }

/*
 * Illuminated lamp-style indicator — the main instance list's Enabled/Status lights (and the
 * legend that explains them), replacing a flat dot with a small bulb: a dark rim, a glossy
 * highlight, and — only when actually lit (a color, never neutral) — a restrained colored glow.
 * ~18px per the approved design. Gray/neutral is deliberately flat and glow-free so it reads as
 * genuinely UNLIT, not merely "a dim color". No animation/flashing — a steady appearance only, and
 * text always carries the meaning (this is aria-hidden reinforcement, exactly like
 * .settings-status-dot above). Exactly ONE lamp per indicator — never a strip of every possible
 * color; only its own current color/glow is ever shown.
 */
.settings-lamp {
  display: inline-block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  flex: none;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
    var(--lamp-color, var(--fg-3));
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.settings-lamp--neutral {
  --lamp-color: #c7c9cc; /* unlit — flat, slightly darker than the surrounding surface, no glow */
}

.settings-lamp--success {
  --lamp-color: #2e7d32;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 5px 1px rgba(46, 125, 50, 0.55);
}

.settings-lamp--warning {
  --lamp-color: #b8860b;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 5px 1px rgba(184, 134, 11, 0.55);
}

.settings-lamp--error {
  --lamp-color: #c0392b;
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    0 0 5px 1px rgba(192, 57, 43, 0.55);
}

/* A small (not full 18px) lamp for the compact legend, where it sits beside its own explanatory text — keeps the legend row-height compact while still reading clearly as the same lamp style. */
.settings-legend .settings-lamp {
  width: 14px;
  height: 14px;
  min-width: 14px;
}

@media (max-width: 900px) {
  .settings-editor-layout {
    grid-template-columns: 1fr;
  }

  .settings-status-panel {
    position: static;
  }
}

#settings-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--fg-2);
}

/*
 * ROOT CAUSE of the oversized ("textarea-looking") Display name / Workspace ID / API token inputs:
 * .filter-input (app.css) carries `flex: 1 1 220px; min-width: 160px` — written for a ROW-direction
 * flex container (the Home/Zoom filter bars), where flex-basis correctly means WIDTH. Every label
 * in this form is `display:flex; flex-direction:column` (#settings-form label / .settings-advanced
 * label, above/below) so the input is a flex item on a COLUMN main axis — there, flex-basis sets
 * HEIGHT, not width, so `220px` is read as a target/minimum HEIGHT: a single-line input rendered as
 * a ~220px-tall box. Selects escaped this by accident (.filter-select never carried that extra
 * flex rule). Neutralizing flex sizing here and controlling width explicitly is the fix — scoped to
 * Settings only, never touching .filter-input's own (correct, row-context) definition in app.css.
 * settings-input--compact/--id manage their OWN explicit width in a ROW-direction context
 * (.settings-inline-field) and are excluded so this doesn't fight their sizing.
 */
#settings-editor .filter-input:not(.settings-input--compact):not(.settings-input--id) {
  flex: none;
  width: 100%;
  min-width: 0;
  height: auto;
}

/* Workspace ID — compact single-line, wide enough for a full Asana numeric GID without stretching the whole row. */
.settings-input--id {
  flex: 0 0 auto;
  width: 200px;
  min-width: 120px;
}

.settings-card {
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 8px;
  padding: var(--sp-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  background: var(--bg-2);
  /* Cards size to their own content — never a fixed height, never stretched to match a neighbor.
     Connection & Credentials / Source & Action are the one deliberate exception, below. */
  height: max-content;
}

/* Connection & Credentials and Source & Action sit side by side in row 1 of .settings-editor-grid
   — stretch BOTH to the row's own height (the taller card's natural content height) so their top
   and bottom edges align, overriding the grid's align-items:start and this card's own
   height:max-content for just these two. No child inside either card has flex-grow, so this never
   stretches an input or redistributes the gap between fields — the flex column simply packs its
   existing content at the top (the default without flex-grow) and leaves the extra room as blank
   space beneath the shorter card's last field, never a hardcoded height or spacer element. When
   .settings-editor-grid collapses to one column (see its own @media rule), each card becomes the
   sole occupant of its own grid row, so stretching to "the row's height" is then equivalent to
   its own natural height — no separate narrow-screen override is needed for that to fall away. */
#settings-connection-card,
#settings-source-card {
  align-self: stretch;
  height: auto;
}

.settings-card--save {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
}

/* The legacy Readiness notice — a compact, read-only display, never an active editable form
   section like every other card. A dashed border (rather than the shared solid .settings-card
   one) is the only visual cue needed to mark it as non-interactive; no new color token. */
.settings-card--readonly {
  border-style: dashed;
}

/* Compact footer near Save: label and switch sit together on one row, with the "Save to apply"
   hint directly beneath — never a separate floating control elsewhere on the form. */
.settings-enable-footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-enable-footer__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
}

.settings-enable-footer__label {
  color: var(--fg-1);
  font-weight: 600;
}

.settings-enable-footer__apply-hint {
  margin: 0;
  color: #b8860b;
  font-size: var(--fs-caption, 14px);
  font-weight: 600;
  min-height: 1em;
}
.settings-enable-footer__apply-hint:empty {
  display: none;
}

/* A compact WAI-ARIA switch (button[role=switch]) — a track + sliding thumb, natively
   keyboard-operable via the underlying <button> (Enter/Space need no extra handling);
   aria-checked is kept in sync in JS on every toggle. Reuses the same success/neutral color
   language as .settings-status-dot rather than inventing new tokens. */
.settings-switch {
  position: relative;
  width: 40px;
  height: 22px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: none;
}

.settings-switch__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--fg-3);
  transition: background var(--dur-fast, 120ms) var(--ease-std, ease);
}

.settings-switch--on .settings-switch__track {
  background: #2e7d32;
}

.settings-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--dur-fast, 120ms) var(--ease-std, ease);
}

.settings-switch--on .settings-switch__thumb {
  transform: translateX(18px);
}

.settings-switch:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 999px;
}

.settings-execution-status {
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
}

/* A compact field that doesn't belong in its own card — currently just Polling interval, folded
   into Source & Action since it's a property of that same source. */
.settings-inline-field {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
}

.settings-inline-field label {
  color: var(--fg-2);
  white-space: nowrap;
}

.settings-input--compact {
  flex: 0 0 auto;
  width: 90px;
  min-width: 70px;
}

/* Groups a picker's own "Search ..." box with the <select> it filters (plus that select's own
   "No matching results" hint) so all three stay visually together as one flex item — e.g. the
   Stage card's Source-field picker, which must not have its search box wrap onto a separate line
   from its own select. */
.settings-field-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  flex: 1 1 240px;
  min-width: 200px;
}

/* A picker's own local-search box (Projects, discovered fields, sample tasks, readiness options) —
   reuses .filter-input for the input itself (already neutralized to a normal full-width text input
   inside Settings, see the ROOT CAUSE comment near the top of this file) and only adds the small
   label-above-input stacking every one of these boxes shares. */
.settings-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-search-field label {
  color: var(--fg-2);
  font-size: var(--fs-caption, 14px);
}

/* Purely informational — never a validation error, never itself selects/clears anything. Collapses
   to zero height when empty (the common case: either no search is active, or the search matched
   something) so it never reserves awkward blank space above/below a picker. */
.settings-search-hint {
  margin: 0;
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
  font-style: italic;
}
.settings-search-hint:empty {
  display: none;
}

.settings-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: var(--sp-2, 8px);
  vertical-align: middle;
}

.settings-badge--required {
  background: rgba(214, 69, 69, 0.12);
  color: #c0392b;
}

.settings-badge--optional {
  background: var(--bg-3);
  color: var(--fg-3);
}

.settings-card__heading {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide, 0.05em);
  color: var(--fg-3);
  margin: 0;
}

.settings-card__note {
  color: var(--fg-2);
  font-size: var(--fs-caption, 14px);
  margin: 0;
}

.settings-card__note--muted {
  color: var(--fg-3);
}

/* Stage mapping's per-discovered-option rows — one row per option currently on the picked field,
   each assigning one of the four EXISTING NewHireSourceState meanings via a plain <select>. */
.settings-stage-options {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-2, 8px);
}

.settings-stage-options th {
  text-align: left;
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
  font-weight: 600;
  padding: 4px var(--sp-2, 8px);
}

.settings-stage-options td {
  padding: 4px var(--sp-2, 8px);
  border-top: 1px solid var(--border-1, #e5e5e5);
}

.settings-mapping-rows {
  display: flex;
  flex-direction: column;
}

.settings-mapping-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  padding: var(--sp-2, 8px) 0;
  border-top: 1px solid var(--border-1, var(--fg-3));
}

.settings-mapping-row:first-child {
  border-top: none;
  padding-top: 0;
}

/* The wide-screen row: readable destination label (+ Required/Optional badge) beside the source
   selector, using the row's available width — not stacked, not a full-width card per mapping. */
.settings-mapping-row__main {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}

.settings-mapping-row__destination {
  flex: 0 0 190px;
  font-weight: 600;
  color: var(--fg-1);
}

.settings-mapping-row__select {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 640px) {
  .settings-mapping-row__main {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-mapping-row__destination {
    flex: none;
  }
}

.settings-mapping-row__warning {
  color: #c0392b;
  font-size: var(--fs-caption, 14px);
  margin: 0;
}

.settings-mapping-row__incomplete {
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
  margin: 0;
  font-style: italic;
}

.settings-advanced {
  color: var(--fg-2);
}

.settings-advanced summary {
  cursor: pointer;
  color: var(--fg-3);
  font-size: var(--fs-caption, 14px);
}

.settings-advanced label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-2, 8px);
}

.settings-status--error {
  color: #c0392b;
}

.settings-status--success {
  color: #2e7d32;
}

.settings-gate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
}

/* Every other <p> in this file (.settings-card__note, .settings-status-panel__meta/__value,
   .settings-mapping-row__warning/__incomplete) explicitly zeroes the global `p { margin: 0 0
   var(--sp-4) }` (colors_and_type.css) and relies on the flex parent's own `gap` for spacing —
   .settings-gate__message was missed, so its message paragraph carried BOTH the parent's 12px
   gap AND the inherited 16px bottom margin, stacking to ~28px of unintended extra vertical space
   here (and, additively, on every OTHER stacked element below it) versus the ~12px everywhere
   else. Zeroed to match the established pattern — a small, real contributor to unintended page
   height, not a deliberate design choice. */
.settings-gate__message {
  margin: 0;
}

.settings-gate__message--denied {
  color: #c0392b;
}

.settings-gate__message--unavailable {
  color: var(--fg-2);
}

.settings-recovery-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
  border: 1px solid #c0392b;
  border-radius: 6px;
}

/* Same oversight as .settings-gate__message above — this banner's message <p> has no class of
   its own, so it silently inherited the global 16px bottom margin on top of the banner's own 8px
   gap. Zeroed for the same reason. */
.settings-recovery-banner p {
  margin: 0;
}

/* ===================== BUTTONS ===================== */
/* Settings-scoped, but deliberately reusing the SAME tokens as the app's existing primary
   (.btn-onboard) / secondary (.btn-neutral-outline) buttons — same visual language, without
   reaching into those onboarding-named global classes from unrelated Settings markup. Content-
   sized (no forced width) unless a field genuinely calls for a fixed compact size elsewhere. */

.settings-btn {
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-body);
  font-size: var(--fs-caption, 14px);
  font-weight: 600;
  padding: var(--sp-2, 8px) var(--sp-4, 16px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast, 120ms) var(--ease-std, ease);
}

.settings-btn--primary {
  background: var(--lp-sapphire);
  border-color: var(--lp-sapphire);
  color: var(--fg-inverse);
}
.settings-btn--primary:hover {
  background: var(--fg-link-hover, var(--lp-sapphire));
}
.settings-btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-btn--secondary {
  background: transparent;
  border-color: var(--border-1, var(--fg-3));
  color: var(--fg-1);
}
.settings-btn--secondary:hover {
  background: var(--bg-3);
}
.settings-btn--secondary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Narrow screens (matches the app's existing max-width: 640px convention elsewhere) — the fixed
   200px section rail would otherwise squeeze the editor into too little width on a phone; stack
   the rail above the content instead. */
@media (max-width: 640px) {
  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-section-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ── Settings header: pending changes / Push Pending Changes Live / Live ───────
   Text always states the state ("View pending changes (2)", "Push Pending Changes Live",
   "Live (No Pending Changes)"); color and motion only reinforce it. */

.settings-view__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-2, 8px);
}

.settings-view__header .settings-view__heading {
  margin-bottom: 0;
}

.settings-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.settings-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #2e7d32;
  background: rgba(46, 125, 50, 0.1);
  color: #2e7d32;
  font-weight: 600;
}

.settings-live-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7d32;
}

/* Bright and blinking while changes are waiting; the outline stays visible without the animation. */
.settings-push--attention {
  background: #e65100;
  border-color: #e65100;
  color: #fff;
  outline: 2px solid rgba(230, 81, 0, 0.45);
  outline-offset: 2px;
  animation: settings-push-attention 1.2s ease-in-out infinite;
}

.settings-push--attention:hover {
  background: #bf4300;
}

@keyframes settings-push-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 81, 0, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(230, 81, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-push--attention {
    animation: none;
    box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.35);
  }
}

.settings-header-panel {
  border: 1px solid var(--border-1, #d0d7de);
  border-radius: 8px;
  background: var(--bg-1, #fff);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  margin-bottom: var(--sp-3, 12px);
}

.settings-header-panel[hidden] {
  display: none;
}

.settings-header-panel__heading {
  font-size: var(--fs-body, 16px);
  margin-bottom: var(--sp-2, 8px);
  color: var(--fg-1);
}

.settings-pending-group__heading {
  font-size: var(--fs-caption, 14px);
  color: var(--fg-2);
  margin: var(--sp-2, 8px) 0 4px;
}

.settings-pending-group__list {
  margin: 0;
  padding-left: var(--sp-4, 16px);
  color: var(--fg-1);
}

.settings-pending-group__label {
  color: var(--fg-2);
}

.settings-header-status:empty {
  display: none;
}

.settings-header-status {
  margin-bottom: var(--sp-3, 12px);
}

.settings-pending-note {
  border-left: 3px solid #e65100;
  padding-left: var(--sp-2, 8px);
}

.settings-confirm-dialog {
  max-width: 480px;
  border: 1px solid var(--border-1, #d0d7de);
  border-radius: 8px;
  padding: var(--sp-4, 16px);
  background: var(--bg-1, #fff);
  color: var(--fg-1);
}

.settings-confirm-dialog::backdrop {
  background: rgba(15, 27, 45, 0.45);
}

.settings-confirm-dialog__title {
  font-size: var(--fs-body, 16px);
  margin-bottom: var(--sp-2, 8px);
}

/* ===================== PROFILES (Department / Position) ===================== */
/* The accepted wide Settings layout (.settings-gate--wide) with the same readable line length and
   spacing as Global Groups. Rows keep their saved order; several can be open at once. Long names,
   group emails and license names wrap inside their row — nothing scrolls horizontally. */

/* Below the Profiles card: the general explanation and the license-list status (with its Retry). Takes
   only the space its content needs; long text wraps at a readable line length. */
.settings-profiles-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-3, 12px);
  max-width: 72ch;
  line-height: 1.5;
}

.settings-profiles-footer__license {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.settings-profiles-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3, 12px);
}

.settings-profiles-toolbar .settings-inline-field {
  flex: 1 1 280px;
  min-width: 0;
}

.settings-profile-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.settings-profile-row {
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 6px;
  min-width: 0;
}

.settings-profile-row--open {
  border-color: var(--fg-2);
}

.settings-profile-row__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px) var(--sp-3, 12px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
}

.settings-profile-row__toggle {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2, 8px);
  flex: 1 1 240px;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--fg-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-profile-row__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.settings-profile-row__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.settings-profile-row__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1, 4px);
}

.settings-profile-row__body {
  padding: var(--sp-3, 12px) var(--sp-4, 16px) var(--sp-4, 16px);
  border-top: 1px solid var(--border-1, var(--fg-3));
}

/* State is in the badge text, never color alone. */
.settings-profile-badge {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 999px;
  font-size: 12px;
  color: var(--fg-2);
  white-space: nowrap;
}

.settings-profile-badge--pending {
  border-color: #e65100;
  color: var(--fg-1);
}

.settings-profile-badge--warning,
.settings-profile-badge--different {
  border-color: #b8860b;
  color: var(--fg-1);
}

.settings-profile-badge--unsaved {
  border-style: dashed;
}

.settings-profile-badge--primary {
  font-weight: 600;
}

.settings-profile-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
  min-width: 0;
}

/* Editor groupings as in WPF Settings; two columns of fields where there is room. */
.settings-profile-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3, 12px) var(--sp-5, 24px);
  margin: 0;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 6px;
  min-width: 0;
}

.settings-profile-section > legend {
  padding: 0 var(--sp-1, 4px);
  font-family: var(--font-display);
  color: var(--fg-1);
}

.settings-profile-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-profile-field > label,
.settings-profile-field__label {
  font-size: var(--fs-caption, 14px);
  color: var(--fg-2);
}

.settings-profile-field .filter-input,
.settings-profile-field .filter-select {
  max-width: 32rem;
  width: 100%;
}

/* .filter-input (app.css) is `flex: 1 1 220px` for ROW filter bars; as a direct control of this COLUMN
   field that basis becomes a ~220px HEIGHT (the same cause as the Integrations form fix above). Only
   direct controls are neutralized — the add-entry rows (.settings-profile-adder) keep their row sizing. */
.settings-profile-field > .filter-input {
  flex: none;
}

.settings-profile-field--check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.settings-profile-field--check > .settings-card__note {
  flex-basis: 100%;
}

/* Lists span the section so long entries have room. */
.settings-profile-field--list {
  grid-column: 1 / -1;
}

.settings-profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-profile-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 4px var(--sp-2, 8px);
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 6px;
}

.settings-profile-list__value {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-profile-list__item > .settings-btn:last-child {
  margin-left: auto;
}

.settings-profile-adder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.settings-profile-adder .filter-input,
.settings-profile-adder .filter-select {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 24rem;
}

/* Removing a whole profile is visually distinct from removing one list entry. */
.settings-btn--danger {
  border-color: #b3261e;
  color: #b3261e;
}

.settings-profile-values {
  display: grid;
  grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
  gap: 4px var(--sp-4, 16px);
  margin: 0;
}

.settings-profile-values dt {
  color: var(--fg-2);
}

.settings-profile-values dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.settings-profile-template {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
}

.settings-profile-template__label {
  font-weight: 600;
  color: var(--fg-1);
}

.settings-profile-template__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1, 4px);
}

.settings-profile-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(40vh, 320px);
  overflow-y: auto;
}

/* Comparison: Field | left | right where there is room; matching rows stay visible. */
.settings-profile-compare__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3, 12px);
}

.settings-profile-compare__table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-1, var(--fg-3));
  border-radius: 6px;
}

.settings-profile-compare__row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3, 12px);
  padding: var(--sp-2, 8px) var(--sp-3, 12px);
  border-top: 1px solid var(--border-1, var(--fg-3));
}

.settings-profile-compare__row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-profile-compare__row--head {
  border-top: none;
  background: var(--bg-2);
  font-weight: 600;
}

.settings-profile-compare__row--head .settings-instance-row__meta {
  display: block;
  font-weight: 400;
}

.settings-profile-compare__row--different {
  background: var(--bg-2);
}

.settings-profile-compare__field {
  color: var(--fg-2);
}

.settings-profile-compare__title {
  display: block;
  overflow-wrap: anywhere;
}

/* Pending review: one expandable item per profile. */
.settings-pending-profile summary {
  cursor: pointer;
}

.settings-pending-profile__fields {
  margin: 4px 0 var(--sp-2, 8px);
  padding-left: var(--sp-4, 16px);
}

/* ===================== DOMAINS ===================== */
/* The Global Domains card reuses the profile list, adder and field patterns inside the accepted wide card. The
   Profiles Domains override is one group spanning its section, directly below the name row: the switch and the
   primary-domain choice side by side where there is room, the explanation and help beneath them. */
.settings-profile-domains {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-2, 8px) var(--sp-5, 24px);
}

.settings-profile-domains > .settings-profile-field__label,
.settings-profile-domains > .settings-card__note {
  grid-column: 1 / -1;
}

.settings-profile-domains > .settings-profile-field--check {
  align-self: end;
  min-height: 2.25rem;
}

.settings-profile-domains__primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-domains-card .settings-field-error:empty {
  display: none;
}

@media (max-width: 900px) {
  .settings-profile-section,
  .settings-profile-domains {
    grid-template-columns: 1fr;
  }
}

/* Narrow screens: each compared field stacks, and every value is labelled with its profile. */
@media (max-width: 700px) {
  .settings-profile-compare__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .settings-profile-compare__row--head {
    display: none;
  }

  .settings-profile-compare__row > [data-compare-side]::before {
    content: attr(data-compare-side) ": ";
    color: var(--fg-3);
  }

  .settings-profile-values {
    grid-template-columns: 1fr;
  }

  .settings-profile-values dd {
    margin-bottom: var(--sp-2, 8px);
  }
}