/* ==========================================================================
   SETTINGS VIEW — 7-tab admin settings page
   Extracted from mockups/acq-lead-pipeline-v2.html (lines 898-1575, 1825-1843)
   ========================================================================== */

/* ===== VIEW WRAPPER ===== */
.settings-view {
  max-width: 1280px; margin: 0 auto;
  padding: var(--s-6) var(--s-8);
  animation: settingsReveal 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes settingsReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page title — V5 .pg-h. Dropped the 4px brand-teal gradient accent bar
   (V5 doesn't have it). Smaller font matches V5 hierarchy. */
.set-page-title {
  font-size: 20px; font-weight: 700; color: var(--gray-900);
  margin-bottom: var(--s-5); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: var(--s-2);
}

/* ===== CONTAINER — V5 .set-wrap. Flatter; the previous outer card chrome
   (24px radius, shadow-md, 680px min-height) competed visually with the
   sidebar + content's own internal chrome. V5 has no outer card. ===== */
.set-container {
  display: grid; grid-template-columns: 220px 1fr;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
}

/* ===== SIDEBAR — V5 .set-nav. White bg (not gradient), tighter padding. ===== */
.set-sidebar {
  background: var(--white);
  padding: 10px 6px;
  border-right: 1px solid var(--gray-200);
}
/* V5 .set-ni — smaller, no left accent border, brand-wash on active. */
.set-tab {
  font-size: 12px; font-weight: 500; color: var(--gray-600);
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s, color 0.12s;
  display: flex; align-items: center; gap: 8px; margin-bottom: 1px;
  border: none; background: none; width: 100%; text-align: left;
  font-family: var(--font-sans);
}
.set-tab:hover {
  background: var(--gray-50); color: var(--gray-800);
}
.set-tab.active {
  background: var(--brand-wash); color: var(--brand); font-weight: 600;
}
.set-tab i { width: 10px; height: 10px; flex-shrink: 0; }

/* ===== CONTENT AREA — V5 .set-body. Padding matches mockup (22px 28px). ===== */
.set-content { padding: 22px 28px; }

/* .set-panel is the per-tab wrapper (one per settings tab — see settings.js).
   Kept FLAT (no outer chrome) because the tab body holds its own sections that
   render their own chrome; adding chrome here would create nested cards.
   Just animation. */
.set-panel {
  animation: panelFadeIn 250ms ease;
}

/* V5 .panel — opt-in card for grouping fields INSIDE a tab body. Use this
   class on sections that should look like distinct visual units (e.g., per-
   integration cards in the Integrations tab, per-template rows in Templates).
   Future settings.js refactors can adopt this; existing markup is unaffected. */
.set-panel-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.set-panel-card-h {
  font: 700 13px var(--font-sans);
  color: var(--gray-900);
  margin-bottom: 4px;
}
.set-panel-card-d {
  font-size: 11px; color: var(--gray-500);
  margin-bottom: 10px; line-height: 1.5;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Section headings */
.set-title {
  font-size: 20px; font-weight: 700; color: var(--gray-900);
  margin-bottom: var(--s-1-5); line-height: 1.3; letter-spacing: -0.3px;
}
.set-desc {
  font-size: 13px; color: var(--gray-500); margin-bottom: var(--s-6);
  line-height: 1.6; max-width: 640px;
}

/* ===== SHARED FORM CONTROLS ===== */
.set-label {
  font-size: 13px; font-weight: 600; color: var(--gray-700);
  margin-bottom: var(--s-1-5); display: block;
}
.set-hint {
  font-size: 12px; font-weight: 400; color: var(--gray-400); margin-left: var(--s-1);
}
/* V5 .ff-inp — 1.5px border (more present than V4's 1px), tighter padding,
   13px font, gray-900 text. Brand focus glow kept. */
.set-input, .set-select, .set-textarea {
  width: 100%; background: var(--white);
  border: 1.5px solid var(--gray-200); border-radius: 6px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  padding: 9px 12px; color: var(--gray-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none; box-sizing: border-box;
}
.set-input:focus, .set-select:focus, .set-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.set-select { cursor: pointer; }
.set-textarea {
  font-size: 13px; line-height: 1.55;
  resize: vertical; min-height: 80px;
}

/* V5 buttons — tighter (was 14px/500 + 10px×20px; now 13px/600 + 7px×14px). */
.set-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px/1 var(--font-sans); padding: 7px 14px; border-radius: 6px;
  cursor: pointer; transition: all 150ms ease; border: 1px solid transparent;
}
.set-btn:active { transform: scale(0.97); }
.set-btn i { width: 10px; height: 10px; }
.set-btn.primary {
  background: var(--brand); color: var(--white); border-color: var(--brand);
  box-shadow: var(--shadow-brand, var(--shadow-sm));
}
.set-btn.primary:hover { filter: brightness(0.92); box-shadow: 0 6px 18px rgba(72,122,123,0.25); }
.set-btn.secondary {
  background: var(--white); color: var(--brand); border-color: var(--brand);
}
.set-btn.secondary:hover { background: var(--brand-wash); }
.set-btn.ghost {
  background: transparent; color: var(--gray-600); border-color: transparent;
}
.set-btn.ghost:hover { background: var(--gray-100); color: var(--gray-800); }
.set-btn.danger {
  background: var(--white); color: var(--error); border-color: var(--error);
}
.set-btn.danger:hover { background: rgba(239,68,68,0.06); }

/* V5 .toggle — 36×20 (was 44×24). Thumb 16×16 (was 20×20). Translate 16
   (was 20). Brand-tinted track on checked (was --success). */
.set-toggle { position: relative; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; display: inline-block; }
.set-toggle input { display: none; }
.set-toggle .toggle-track {
  position: absolute; inset: 0; background: var(--gray-300); border-radius: var(--r-full);
  transition: background 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.set-toggle input:checked + .toggle-track { background: var(--brand); }
.set-toggle .toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: var(--white); border-radius: var(--r-full);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 1px 1px rgba(0,0,0,0.06);
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.set-toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }
.set-toggle:hover .toggle-thumb { box-shadow: 0 2px 6px rgba(0,0,0,0.22); }
.toggle-label-text {
  font: 600 12px/1 var(--font-mono); color: var(--gray-500); min-width: 48px; text-align: right;
}
.toggle-label-text.auto { color: var(--success); }

/* Save indicator */
.set-save-ind {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-size: 12px; color: var(--success); font-weight: 500;
  opacity: 0; transition: opacity var(--t-base);
}
.set-save-ind.visible { opacity: 1; }
.set-save-ind i { width: 14px; height: 14px; }

/* V5 .callout — tinted info/ok/warn/err notes. Opt-in: settings.js renders
   info notes as plain text + icon; can adopt these to lift visual hierarchy
   for consequential notes (e.g., "Changes take effect when..."). */
.callout {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 11px; line-height: 1.5;
  margin-bottom: 10px;
  border: 1px solid transparent;
}
.callout i { width: 10px; height: 10px; flex-shrink: 0; margin-top: 1px; }
.callout.info {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.16);
  color: var(--gray-700);
}
.callout.info i { color: rgb(59, 130, 246); }
.callout.ok {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.16);
  color: var(--gray-700);
}
.callout.ok i { color: rgb(34, 197, 94); }
.callout.warn {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.18);
  color: var(--gray-700);
}
.callout.warn i { color: rgb(245, 158, 11); }
.callout.err {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.18);
  color: var(--gray-700);
}
.callout.err i { color: rgb(239, 68, 68); }

/* ===== TAB 1: DEFAULT ASSIGNMENTS — V5 .tbl pattern ===== */
.assign-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--gray-200); border-radius: 8px;
  overflow: hidden;
}
.assign-tbl th {
  font-size: 9px; font-weight: 600; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--gray-200); background: var(--gray-50);
}
.assign-tbl td {
  padding: 10px 12px; font-size: 12px;
  border-bottom: 1px solid var(--gray-100); vertical-align: middle;
  color: var(--gray-700);
}
.assign-tbl tr:last-child td { border-bottom: none; }
.assign-tbl tr:hover td { background: var(--brand-wash); transition: background var(--t-fast); }
.stage-label {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 500; color: var(--gray-800);
}
.stage-dot {
  width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0;
}
.subtask-indent { padding-left: 28px !important; }
.subtask-label { font-weight: 400; color: var(--gray-600); font-size: 12px; }
/* V5 .ff-inp pattern for per-row dropdowns. 1.5px border + 6px radius. */
.assign-sel {
  max-width: 200px; font-size: 13px; padding: 7px 10px;
  border: 1.5px solid var(--gray-200); border-radius: 6px;
  font-family: var(--font-sans); color: var(--gray-900);
  background: var(--white); cursor: pointer; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.assign-sel:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

/* Acquisition Lead section — above subtask table in Default Assignments tab */
.set-acq-lead-section {
  margin-bottom: var(--s-6);
  padding: var(--s-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
}

/* Stage context rows — delegation-driven, no dropdown (ALN-007) */
.stage-context-row td { background: var(--gray-50); }
.stage-context-row:hover td { background: var(--gray-50) !important; }
.stage-deleg-status {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 12px;
}
.stage-deleg-names { font-weight: 500; color: var(--gray-600); }
.stage-deleg-hint { color: var(--gray-400); font-style: italic; }
.stage-deleg-via {
  font-size: 11px; color: var(--gray-300);
  padding-left: var(--s-2); border-left: 1px solid var(--gray-200);
}

/* ===== TAB 2: APPROVAL RULES ===== */
.warning-banner {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.20);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-5);
  display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-6);
  font-size: 13px; color: var(--gray-700); line-height: 1.5;
}
.warning-banner i { color: var(--warning); flex-shrink: 0; margin-top: 2px; }
.rule-card {
  background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); margin-bottom: var(--s-3);
  display: flex; align-items: center; justify-content: space-between;
  transition: all 200ms ease;
  border-left: 3px solid transparent;
}
.rule-card:hover {
  box-shadow: var(--shadow-sm);
  border-left-color: var(--brand-light);
}
.rule-info { flex: 1; padding-right: var(--s-4); }
.rule-name {
  font-size: 14px; font-weight: 600; color: var(--gray-800); margin-bottom: 3px;
}
.rule-desc { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
.toggle-wrap { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }

/* ===== TAB 3: BUY BOX =====
   .bb-info-banner removed 2026-06-10 — migrated to V5 .callout.info in
   settings.js (the "Properties failing these criteria are automatically
   declined..." note). The .callout pattern is the canonical info-callout
   class going forward; .bb-info-banner had no remaining renderers. */
.bb-criteria-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); margin-bottom: var(--s-6); overflow: hidden;
  transition: box-shadow var(--t-base);
}
.bb-criteria-card:hover { box-shadow: var(--shadow-sm); }
.bb-criteria-heading {
  font-size: 14px; font-weight: 700; color: var(--gray-800);
  padding: var(--s-3) var(--s-5);
  background: linear-gradient(135deg, var(--gray-50), rgba(72,122,123,0.03));
  border-bottom: 1px solid var(--gray-200);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.bb-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--gray-100);
  transition: background var(--t-fast);
}
.bb-row:last-child { border-bottom: none; }
.bb-row:hover { background: var(--gray-50); }
.bb-row-info { flex: 1; }
.bb-row-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.bb-row-hint { font-size: 12px; color: var(--gray-500); margin-top: 2px; line-height: 1.4; }
.bb-inline-input {
  width: 120px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  font: 600 14px/1.4 var(--font-mono); color: var(--gray-800);
  text-align: right; background: var(--white); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.bb-inline-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.bb-hoa-threshold {
  padding: 0 var(--s-5) var(--s-4); display: none;
  animation: hoaSlideIn 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hoaSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.bb-hoa-threshold.visible { display: flex; align-items: center; gap: var(--s-3); }
.bb-hoa-threshold .hoa-label {
  font-size: 13px; font-weight: 500; color: var(--gray-600); white-space: nowrap;
}
.bb-hoa-input-wrap { position: relative; width: 140px; }
.bb-hoa-input-wrap .cur-sym {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--gray-400); font: 500 14px/1 var(--font-mono); pointer-events: none;
}
.bb-hoa-input-wrap input {
  width: 100%; padding: var(--s-2) var(--s-3) var(--s-2) 24px;
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  font: 600 14px/1.4 var(--font-mono); color: var(--gray-800);
  background: var(--white); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.bb-hoa-input-wrap input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }

/* Score sliders */
.bb-scores-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-5); margin-bottom: var(--s-6);
}
.bb-score-field label {
  font-size: 13px; font-weight: 600; color: var(--gray-700);
  margin-bottom: var(--s-1-5); display: block;
}
.bb-slider-row { display: flex; align-items: center; gap: var(--s-3); }
.bb-slider-row input[type="range"] {
  flex: 1; height: 6px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-200) 100%);
  border-radius: var(--r-full); outline: none; border: none; padding: 0;
}
.bb-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  background: var(--brand); border-radius: var(--r-full); cursor: pointer;
  box-shadow: 0 2px 6px rgba(72,122,123,0.35);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.bb-slider-row input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 3px 10px rgba(72,122,123,0.45);
  transform: scale(1.1);
}
.bb-slider-row input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; background: var(--brand);
  border-radius: var(--r-full); cursor: pointer; border: none;
  box-shadow: 0 2px 6px rgba(72,122,123,0.35);
}
.bb-slider-val {
  font: 700 15px/1 var(--font-mono); color: var(--brand-dark, var(--brand));
  min-width: 40px; text-align: center;
  background: var(--brand-wash); padding: 4px 8px; border-radius: var(--r-sm);
}

/* Approved Jurisdictions */
.bb-jurisdictions-card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); margin-bottom: var(--s-6); overflow: hidden;
  transition: box-shadow var(--t-base);
}
.bb-jurisdictions-card:hover { box-shadow: var(--shadow-sm); }
.bb-jurisdictions-heading {
  font-size: 14px; font-weight: 700; color: var(--gray-800);
  padding: var(--s-3) var(--s-5);
  background: linear-gradient(135deg, var(--gray-50), rgba(72,122,123,0.03));
  border-bottom: 1px solid var(--gray-200);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.bb-jurisdictions-note {
  font-size: 12px; color: var(--gray-500); line-height: 1.5;
  padding: var(--s-3) var(--s-5) var(--s-2);
}
.bb-jurisdictions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-1-5); padding: var(--s-3) var(--s-5) var(--s-5);
}
.bb-jur-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--gray-700);
  cursor: pointer; transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
}
.bb-jur-item:hover { border-color: var(--gray-300); background: var(--gray-50); }
.bb-jur-item input {
  width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer;
  flex-shrink: 0;
}
.bb-jur-item.checked {
  border-color: var(--brand); background: var(--brand-wash);
  color: var(--brand-dark, var(--brand)); font-weight: 600;
}
.bb-save-row { display: flex; gap: var(--s-3); align-items: center; }
.bb-save-row .last-saved { font-size: 12px; color: var(--gray-400); }

/* ===== TAB 4: SUBMITTER MILESTONES ===== */
.ms-list { margin-bottom: var(--s-6); }
.ms-row {
  display: grid; grid-template-columns: 24px 1fr 1.5fr;
  gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  margin-bottom: var(--s-2); background: var(--white);
  transition: all 200ms ease;
}
.ms-row:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ms-grip {
  color: var(--gray-400); cursor: grab;
  display: flex; align-items: center;
  transition: color var(--t-fast);
}
.ms-grip:hover { color: var(--gray-600); }
.ms-grip:active { cursor: grabbing; color: var(--brand); }
.ms-field { flex: 1; }
.ms-field .field-lbl {
  font-size: 10px; font-weight: 600; color: var(--gray-400);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
.ms-field input {
  font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  width: 100%; font-family: var(--font-sans); color: var(--gray-700);
  background: var(--white); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.ms-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); }
.ms-save-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-6);
}
.ms-reset {
  font-size: 13px; color: var(--gray-500); cursor: pointer;
  text-decoration: underline; transition: color var(--t-fast);
  background: none; border: none; font-family: var(--font-sans);
}
.ms-reset:hover { color: var(--brand); }

/* DHL Preview — elevated card */
.dhl-preview-box {
  background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 20px;
  padding: var(--s-6) var(--s-8);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8);
}
.dhl-preview-label {
  font-size: 13px; font-weight: 600; color: var(--gray-800); margin-bottom: var(--s-5);
}
.dhl-track {
  display: flex; align-items: flex-start; justify-content: space-between;
  position: relative; padding: 0 var(--s-4);
}
.dhl-track::before {
  content: ''; position: absolute; top: 14px; left: 32px; right: 32px;
  height: 3px; background: var(--gray-200); border-radius: var(--r-full);
}
.dhl-track::after {
  content: ''; position: absolute; top: 14px; left: 32px;
  width: 40%; height: 3px; background: var(--brand); border-radius: var(--r-full);
  transition: width 600ms ease;
}
.dhl-ms {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; min-width: 80px;
}
.dhl-dot-set {
  width: 28px; height: 28px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2); font-size: 12px;
  transition: all var(--t-base);
}
.dhl-dot-set i { width: 14px; height: 14px; }
.dhl-dot-set.done { background: var(--brand); color: white; }
.dhl-dot-set.now {
  border: 2px solid var(--brand); background: var(--brand-wash); color: var(--brand);
  animation: dhlPulse 2s ease-in-out infinite;
}
@keyframes dhlPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-glow); }
  50% { box-shadow: 0 0 0 6px rgba(72,122,123,0); }
}
.dhl-dot-set.later {
  border: 2px solid var(--gray-300); background: var(--gray-50); color: var(--gray-300);
}
.dhl-lbl {
  font-size: 11px; font-weight: 500; color: var(--gray-400);
  text-align: center; max-width: 90px;
}
.dhl-lbl.done { color: var(--brand); }
.dhl-lbl.now { color: var(--gray-800); font-weight: 600; }
.dhl-ts {
  font-size: 10px; color: var(--gray-400);
  font-family: var(--font-mono); margin-top: 2px;
}

/* ===== TAB 5: TEAM MANAGEMENT ===== */
.team-header-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5);
}
.team-count { font-size: 13px; color: var(--gray-500); }
.team-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: var(--s-5);
  table-layout: auto;
}
/* Compact column widths when table has many columns */
.team-tbl th, .team-tbl td { white-space: nowrap; }
.team-tbl td:nth-child(4) { white-space: normal; } /* Title — allow wrap */
.team-tbl td:last-child { white-space: normal; } /* Delegated Stages — allow wrap */
.team-tbl th {
  font-size: 11px; font-weight: 600; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: var(--s-2) var(--s-3); text-align: left;
  border-bottom: 1px solid var(--gray-200); background: var(--gray-50);
}
.team-tbl th:first-child { border-radius: var(--r-md) 0 0 0; }
.team-tbl th:last-child { border-radius: 0 var(--r-md) 0 0; }
.team-tbl td {
  padding: var(--s-3); font-size: 13px;
  border-bottom: 1px solid var(--gray-100); vertical-align: middle;
}
.team-tbl tr:last-child td { border-bottom: none; }
.team-tbl tr:hover td { background: var(--brand-wash); transition: background var(--t-fast); }
.member-name-cell {
  display: flex; align-items: center; gap: var(--s-2);
  font-weight: 500; color: var(--gray-800);
}
.member-av {
  width: 30px; height: 30px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: white; flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.member-email { color: var(--gray-500); font-size: 12px; }
.member-role-sel {
  font-size: 12px; padding: 4px 8px; max-width: 140px;
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  font-family: var(--font-sans); background: var(--white); cursor: pointer;
  outline: none; transition: border-color var(--t-fast);
}
.member-role-sel:focus { border-color: var(--brand); }
.member-status-row { display: flex; align-items: center; gap: var(--s-2); }
.status-txt { font-size: 12px; font-weight: 600; }
.status-txt.on { color: var(--success); }
.status-txt.off { color: var(--gray-400); }
.deleg-badges { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.deleg-badge {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-sm);
  background: rgba(59,130,246,0.08); color: #3B82F6;
  cursor: default; transition: all var(--t-fast);
}
.deleg-badge:hover { background: rgba(59,130,246,0.15); transform: translateY(-1px); }
.deleg-badge.empty {
  background: var(--gray-100); color: var(--gray-400); font-style: italic;
}
.deleg-badge.is-primary {
  display: inline-flex; align-items: center;
  background: rgba(245,158,11,0.10); color: var(--warning);
}

/* ===== TAB 6: EMAIL TEMPLATES ===== */
.tmpl-card {
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  margin-bottom: var(--s-3); overflow: hidden;
  transition: all 200ms ease;
}
.tmpl-card:hover { box-shadow: var(--shadow-sm); }
.tmpl-header {
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; transition: background var(--t-fast);
}
.tmpl-header:hover { background: var(--gray-50); }
.tmpl-header-left { display: flex; align-items: center; gap: var(--s-3); }
.tmpl-icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tmpl-icon i { width: 18px; height: 18px; }
.tmpl-name { font-size: 14px; font-weight: 600; color: var(--gray-800); }
.tmpl-stage { font-size: 12px; color: var(--gray-500); }
.tmpl-chevron {
  color: var(--gray-400); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tmpl-card.expanded .tmpl-chevron { transform: rotate(180deg); }
.tmpl-body {
  display: none; padding: 0 var(--s-5) var(--s-5);
  border-top: 1px solid var(--gray-200);
  animation: tmplOpen 250ms ease;
}
@keyframes tmplOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.tmpl-card.expanded .tmpl-body { display: block; }
.tmpl-body .fg { margin-bottom: var(--s-4); }
.tmpl-body .fg:last-child { margin-bottom: 0; }
.tmpl-body .fg label {
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  margin-bottom: var(--s-1); display: block; margin-top: var(--s-4);
}
.tmpl-body textarea { font-size: 13px; line-height: 1.6; }
.tmpl-actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); align-items: center; }
.placeholder-hl {
  background: rgba(139,92,246,0.10); color: #7C3AED;
  padding: 1px 4px; border-radius: 3px; font: 500 12px/1 var(--font-mono);
}
.ch-selector { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.ch-option {
  display: flex; align-items: center; gap: var(--s-1-5);
  padding: var(--s-1-5) var(--s-3);
  border: 1px solid var(--gray-300); border-radius: var(--r-md);
  font-size: 12px; font-weight: 500; color: var(--gray-600);
  cursor: pointer; transition: all var(--t-fast);
  background: none;
}
.ch-option:hover { border-color: var(--gray-400); }
.ch-option.selected {
  border-color: var(--brand); background: var(--brand-wash); color: var(--brand);
}
.ch-option i { width: 14px; height: 14px; }

/* Template section headings (ALN-003) */
.tmpl-section-heading {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 14px; font-weight: 700; color: var(--gray-800);
  margin-bottom: var(--s-1); letter-spacing: -0.2px;
}
.tmpl-section-count {
  font-size: 11px; font-weight: 600; color: var(--gray-400);
  background: var(--gray-100); padding: 1px 7px; border-radius: var(--r-full);
  margin-left: var(--s-1);
}

/* ===== TAB 7: INTEGRATIONS ===== */
.integ-card {
  border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); margin-bottom: var(--s-4);
  transition: all 200ms ease;
}
.integ-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.integ-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4);
}
.integ-title-row { display: flex; align-items: center; gap: var(--s-3); }
.integ-logo {
  width: 42px; height: 42px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.integ-name { font-size: 15px; font-weight: 700; color: var(--gray-800); }
.integ-desc { font-size: 12px; color: var(--gray-500); }
.integ-status {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 13px; font-weight: 600;
}
.integ-status.ok { color: var(--success); }
.integ-status.err { color: var(--error); }
.integ-status.disconnected { color: var(--gray-400); }
.integ-dot {
  width: 10px; height: 10px; border-radius: var(--r-full); display: inline-block;
}
.integ-dot.ok { background: var(--success); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
.integ-dot.err { background: var(--error); box-shadow: 0 0 6px rgba(239,68,68,0.4); animation: dotPulse 2s ease-in-out infinite; }
.integ-dot.disconnected { background: var(--gray-300); }
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.integ-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  padding: var(--s-4); background: var(--gray-50);
  border-radius: var(--r-md); margin-bottom: var(--s-4);
}
.integ-stat-label {
  font-size: 11px; font-weight: 500; color: var(--gray-500);
  text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px;
}
.integ-stat-val { font: 600 14px/1 var(--font-mono); color: var(--gray-800); }
.integ-stat-val.err-count { color: var(--error); font-weight: 700; }
.integ-actions { display: flex; gap: var(--s-3); }

/* Integration status — connected state */
.integ-status.connected { color: var(--green-600, #16a34a); }
.integ-dot.connected { background: var(--green-500, #22c55e); box-shadow: 0 0 6px rgba(34,197,94,0.4); }

/* Integration config panel */
.integ-config { padding: var(--s-3) 0; }
.integ-config .fg { margin-bottom: var(--s-2); }
.integ-config .set-input { font-size: 13px; }
.integ-config details { border-top: 1px solid var(--gray-100); padding-top: var(--s-2); }
.integ-config details summary:hover { color: var(--brand); }

/* ===== INVITE MODAL ===== */
.set-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.set-modal {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); max-width: 480px; width: 90%;
  max-height: 85vh; display: flex; flex-direction: column;
  animation: modalEntry 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalEntry {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.set-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6) var(--s-4); flex-shrink: 0;
}
.set-modal-title { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.set-modal-close {
  width: 32px; height: 32px; border: none;
  background: var(--gray-100); border-radius: var(--r-md);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--gray-500); transition: all var(--t-fast);
  font-size: 18px; line-height: 1;
}
.set-modal-close:hover { background: var(--gray-200); color: var(--gray-700); }
.set-modal-body { padding: 0 var(--s-6) var(--s-5); overflow-y: auto; flex: 1; min-height: 0; }
.set-modal-body .fg { margin-bottom: var(--s-4); }
.set-modal-foot {
  padding: var(--s-4) var(--s-6);
  display: flex; justify-content: flex-end; gap: var(--s-3);
  border-top: 1px solid var(--gray-200); flex-shrink: 0;
}
.set-modal-deleg {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.set-modal-deleg label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-600); cursor: pointer;
}
.set-modal-deleg input {
  width: auto; padding: 0; accent-color: var(--brand);
}

/* ===== Help notes and safety messaging (ALN-011: subtle, on-theme) ===== */
.set-help-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin-bottom: var(--s-2);
  font-size: 12px; color: var(--gray-400); line-height: 1.5;
}
.set-help-note i { color: var(--gray-300); margin-top: 2px; flex-shrink: 0; }
/* .set-safety-note removed 2026-06-10 — migrated to V5 .callout (info or warn
   variant depending on tone) across 4 sites in settings.js: default-assignments
   "Changes take effect when..." (info), migration confirm "This action cannot
   be undone..." (warn), delegation modal "Applies to future stage entries..."
   (info), template library "Template library incomplete..." (warn). Compact
   variant dropped — V5 .callout is already compact (11px font, 10px×12px pad). */

/* ===== GOV-404: Stage coverage bar ===== */
.stage-coverage-bar {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--r-lg); flex-wrap: wrap;
}
.stage-coverage-label {
  font-size: 12px; font-weight: 600; color: var(--gray-600); margin-right: var(--s-2);
}
.stage-coverage-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-size: 11px; font-weight: 500;
  border-radius: var(--r-full); transition: all 0.15s;
}
.stage-coverage-chip.covered { background: rgba(16,185,129,0.08); color: var(--success); }
.stage-coverage-chip.uncovered { background: rgba(239,68,68,0.06); color: var(--error); }

/* ===== GOV-404: Inline delegation editor ===== */
.deleg-badges.clickable { cursor: pointer; }
.deleg-badges.clickable:hover .deleg-badge { background: rgba(59,130,246,0.15); }
.deleg-badges.clickable:hover i { color: var(--gray-500); }
.deleg-edit-popover {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: 10px; background: white;
  border: 1px solid var(--gray-200); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); min-width: 200px;
}
.deleg-edit-popover label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-600); cursor: pointer; padding: 2px 0;
}
.deleg-edit-popover label:hover { color: var(--gray-800); }
.deleg-edit-actions {
  display: flex; gap: var(--s-2); margin-top: var(--s-2);
  padding-top: var(--s-2); border-top: 1px solid var(--gray-100);
  justify-content: flex-end;
}
.set-btn.sm { padding: 4px 10px; font-size: 11px; }

/* ===== ALN-000-UX1: Delegation cell summary ===== */
.deleg-cell-summary {
  cursor: pointer; display: flex; flex-direction: column; gap: 3px;
}
.deleg-cell-summary:hover .deleg-badge { background: rgba(59,130,246,0.12); }
.deleg-cell-summary:hover i[data-lucide="pencil"] { color: var(--gray-500) !important; }
.deleg-cell-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.deleg-badge.more {
  background: var(--gray-100); color: var(--gray-500);
  padding: 2px 6px; border-radius: var(--r-full); font-size: 11px; font-weight: 600;
}
.deleg-cell-primary {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--warning); font-weight: 500;
}
.deleg-cell-primary i { color: var(--warning); }

/* ===== ALN-000-UX1: Delegation modal ===== */
.set-modal.deleg-modal { width: 420px; max-width: 95vw; }
.set-modal-subtitle {
  font-size: 12px; color: var(--gray-400); margin-top: 2px; font-weight: 400;
}
.deleg-modal-hint {
  font-size: 12px; color: var(--gray-500); margin: 0 0 var(--s-3) 0; line-height: 1.5;
}
.deleg-modal-grid {
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
.deleg-modal-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-radius: var(--r-md);
  border: 1px solid transparent; transition: all 0.12s;
}
.deleg-modal-row:hover { background: var(--gray-50); border-color: var(--gray-100); }
.deleg-modal-row.active {
  background: rgba(59,130,246,0.04); border-color: rgba(59,130,246,0.14);
}
.deleg-modal-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--gray-700); cursor: pointer; flex: 1;
}
.deleg-modal-check input { cursor: pointer; accent-color: var(--primary); width: 14px; height: 14px; }
.deleg-primary-btn {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--r-md);
  border: 1px solid var(--gray-200); background: transparent;
  cursor: pointer; color: var(--gray-300); transition: all 0.12s; flex-shrink: 0;
}
.deleg-primary-btn:hover { border-color: var(--warning); color: var(--warning); background: rgba(245,158,11,0.06); }
.deleg-primary-btn.is-primary { border-color: var(--warning); color: var(--warning); background: rgba(245,158,11,0.1); }

/* ===== ALN-000-UX2: Invite modal delegation ===== */
.invite-deleg-hint {
  font-size: 12px; color: var(--gray-500); margin: 0 0 var(--s-2) 0; line-height: 1.4;
}
.set-modal-deleg.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1) var(--s-3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .settings-view { padding: var(--s-4); }
  .set-container { grid-template-columns: 1fr; min-height: auto; }
  .set-sidebar {
    border-right: none; border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-2);
    -webkit-overflow-scrolling: touch;
  }
  .set-tab {
    white-space: nowrap; margin-bottom: 0;
    border-left: none !important; border-bottom: 2px solid transparent;
    border-radius: var(--r-sm);
  }
  .set-tab.active { border-bottom-color: var(--brand); border-left-color: transparent !important; }
  .set-content { padding: var(--s-5); }
  .bb-scores-grid { grid-template-columns: 1fr; }
  .bb-jurisdictions-grid { grid-template-columns: repeat(2, 1fr); }
  .bb-row { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .ms-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .ms-grip { display: none; }
  .ms-field { width: 100%; }
  .dhl-track { flex-direction: column; align-items: center; gap: var(--s-3); }
  .dhl-track::before, .dhl-track::after { display: none; }
  .integ-stats { grid-template-columns: 1fr; }
  .team-tbl { font-size: 12px; }
  .team-tbl th:nth-child(5), .team-tbl td:nth-child(5) { display: none; }
}

/* ===== INTAKE CONTROLS TAB (Phase 1) ===== */
.set-section {
  margin-top: var(--s-2);
}
.set-section-title {
  font-size: 15px; font-weight: 700; color: var(--gray-800);
  margin-bottom: var(--s-3); letter-spacing: -0.2px;
  display: flex; align-items: center; gap: var(--s-2);
}
.set-section-title::before {
  content: ''; width: 3px; height: 16px;
  background: var(--brand); border-radius: 2px;
}

/* ===== GOV-403: MIGRATION CONTROL SECTION ===== */
.set-migration-section {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border: 1px dashed var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
}
.set-migration-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: var(--s-2);
}
.set-migration-desc {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}
.set-migration-preview {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12px;
  color: var(--gray-600);
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--gray-50);
  border-radius: var(--r-md);
}
.set-migration-preview.set-migration-capped {
  color: var(--warning);
  background: rgba(245,158,11,0.08);
}
.set-migration-sep {
  color: var(--gray-300);
}
.set-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn 150ms ease;
}
.set-confirm-dialog {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  max-width: 440px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  animation: scaleIn 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.set-confirm-actions {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: var(--s-4);
}

/* ===== SENDER IDENTITY — compact table cell + modal ===== */
.sender-display-cell {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; cursor: pointer; border-radius: var(--r-md);
  transition: background var(--t-fast);
  white-space: nowrap;
}
.sender-display-cell:hover { background: var(--gray-50); }
.sender-status-dot {
  width: 7px; height: 7px; border-radius: var(--r-full); flex-shrink: 0;
}
.sender-status-dot.ok { background: var(--success); }
.sender-status-dot.warn { background: var(--warning); }
.sender-status-dot.off { background: var(--gray-300); }
.sender-email-truncate {
  font-size: 12px; color: var(--gray-600); max-width: 120px;
  overflow: hidden; text-overflow: ellipsis;
}

/* Sender identity modal — mirrors deleg-modal pattern */
.set-modal.sender-modal { width: 440px; max-width: 95vw; }
.sender-modal-row {
  display: flex; flex-direction: column; gap: var(--s-1-5);
  margin-bottom: var(--s-4);
}
.sender-modal-row:last-child { margin-bottom: 0; }
.sender-modal-label {
  font-size: 12px; font-weight: 600; color: var(--gray-600);
}
.sender-modal-hint {
  font-size: 11px; color: var(--gray-400); line-height: 1.4; margin-top: -2px;
}
.sender-modal-row .set-input { font-size: 13px; }
.sender-detect-row {
  display: flex; gap: var(--s-2); align-items: center;
}
.sender-detect-row .set-input { flex: 1; }
.sender-inbox-check {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 13px; color: var(--gray-700); cursor: pointer;
  padding: var(--s-2) 0;
}
.sender-inbox-check input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

/* Horizontal scroll wrapper for team table when columns are many */
.team-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }