/**
 * css/dashboard/tabs/settings.css — Phase 2 of the dashboard refactor.
 *
 * Plan: docs/architecture/dashboard-refactor.md
 *
 * Owns the Settings-tab-only selectors that used to live in
 * css/dashboard.css. Shared selectors (.dash-card, .dash-input,
 * .dash-btn-*, .dash-otp-box, .dash-phone-input, etc.) stay in the
 * monolith and will be split into tokens + shell during Phase 3-4.
 *
 * Loaded after css/dashboard.css so order in the cascade matches what
 * shipped pre-refactor (settings rules used to come last in the file).
 */

/* ─── Token Steps (CRM token + URL/Link Shortener key onboarding) ─── */
.dash-token-steps {
  background: var(--bg-surface, #141720);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.dash-token-steps-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #8b95a5);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}

.dash-token-steps-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dash-token-steps-list li {
  font-size: 0.82rem;
  color: var(--text-secondary, #a0a7b5);
  line-height: 1.45;
}

.dash-token-steps-list li::marker {
  color: var(--color-success);
  font-weight: 600;
}

.dash-token-steps-list strong {
  color: var(--text-primary, #e2e4e9);
}

/* ─── Settings layout ─── */
.dash-settings-layout { max-width: 600px; }

/* Phase 5j — .dash-settings-grid retired in favour of .dash-set2-grid
   (Phase 5i). Zero JS/HTML consumers — verified via repo-wide grep
   before deletion (mirrors Phase 5f/5h precedent). */

/* Phase 5j — .dash-setting-item / .dash-setting-item:last-child /
   .dash-setting-label retired alongside .dash-settings-grid. The new
   Settings render uses .dash-set2-card chrome instead of the legacy
   label-value row layout. Zero consumers confirmed. */

/* ─── Mobile (≤768px) overrides ─── */
@media (max-width: 768px) {
  .dash-settings-layout { max-width: 100%; }
  /* Phase 5j — mobile .dash-setting-item override retired with parent. */
  .dash-token-steps { padding: 0.65rem 0.75rem; }
  .dash-token-steps-list li { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Phase 5i — .dash-set2-* additive block. New Settings chrome:
   identity hero on top, three section headers (ACCOUNT /
   INTEGRATIONS / PREFERENCES), and a 2-col card grid per section
   that stacks at ≤768px. Status indicators on CRM + Link Shortener
   migrate to .dash-ch2-pill (unified shell from css/dashboard.css)
   plus a small benefit sentence that explains what each integration
   unlocks. Inline style="…" stamps from the legacy render pass
   (icon size, "Current:" margin, helper paragraph) are extracted to
   these classes; the render output now ships zero inline styles.

   Phase 5j retired the legacy .dash-settings-grid / .dash-setting-item
   / .dash-setting-label selectors above (post-v3.8 sign-off). The
   .dash-settings-layout wrapper and the .dash-token-steps family
   stay — both are still consumed by the new render.
   ═══════════════════════════════════════════════════════════════════ */

/* Widen the layout shell — the legacy 600px cap is too tight for the
   2-col card grid. Keep the cap on small screens so the stacked
   single-column reading width stays compact. */
.dash-settings-layout:has(.dash-set2-grid) { max-width: 1040px; }

/* ── Identity hero — single-line "Signed in as …" ─────────────── */
.dash-set2-hero { margin-bottom: 1.25rem; }
.dash-set2-hero-line {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary, #e2e4e9);
  word-break: break-word;
}
.dash-set2-hero-line strong {
  color: var(--text-primary, #e2e4e9);
  font-weight: 600;
}
.dash-set2-hero-sep {
  color: var(--text-muted, #5c6577);
  margin: 0 0.15rem;
}

/* ── Section header — small caps muted label between groups ──── */
.dash-set2-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #5c6577);
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}
.dash-set2-section-title:first-of-type { margin-top: 0; }

/* ── 2-col card grid (1-col under 768px) ─────────────────────── */
.dash-set2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.dash-set2-card { height: 100%; }

/* ── Card chrome bits (replaces inline styles) ───────────────── */
.dash-set2-card-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-green);
}
.dash-set2-current {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.dash-set2-helper {
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
  line-height: 1.45;
}
.dash-set2-input { margin-bottom: 0.5rem; }
.dash-set2-phone-input { margin-bottom: 0.5rem; }
.dash-set2-btn-row { margin-bottom: 0.5rem; margin-top: 0.5rem; }
.dash-set2-btn-icon { width: 14px; height: 14px; }
.dash-set2-result { margin-top: 0.5rem; }
.dash-set2-hidden { display: none; }

/* OTP cluster spacing — preserves the legacy flex-start alignment
   and the 40×44 box footprint without inline styles. */
.dash-set2-otp-prompt {
  font-size: 0.82rem;
  margin-bottom: 0.5rem;
}
.dash-set2-otp-inputs {
  justify-content: flex-start;
  margin-bottom: 0.5rem;
}
.dash-set2-otp-box {
  width: 40px;
  height: 44px;
  font-size: 1.1rem;
}

/* ── Status pill row (CRM + Link Shortener) ──────────────────── */
.dash-set2-status-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.dash-set2-status-pill { flex-shrink: 0; }
.dash-set2-status-benefit {
  font-size: 0.78rem;
  color: var(--text-muted, #8b95a5);
  line-height: 1.4;
  min-width: 0;
}

/* ── Notification toggle list (replaces inline flex) ─────────── */
.dash-set2-notif-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dash-set2-notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-set2-notif-row--last { border-bottom: none; }
.dash-set2-notif-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-set2-notif-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted, #5c6577);
}

/* ── Phase 7i.2 (2026-06-01) — Channel low-balance threshold inputs ──── */
.dash-set2-thresholds {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.6rem 0 0.9rem;
}
.dash-set2-threshold-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dash-set2-threshold-row:last-child { border-bottom: none; }
.dash-set2-threshold-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: var(--text-primary, #e6e8ed);
}
.dash-set2-threshold-row input[type="number"] {
  width: 110px;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--text-primary, #e6e8ed);
  font-size: 0.86rem;
  text-align: right;
}
.dash-set2-threshold-row input[type="number"]:focus {
  outline: none;
  border-color: rgba(37, 211, 102, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.dash-set2-threshold-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted, #5c6577);
}

/* ── Mobile (≤768px): stack the grid, soften the gap ─────────── */
@media (max-width: 768px) {
  .dash-settings-layout:has(.dash-set2-grid) { max-width: 100%; }
  .dash-set2-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .dash-set2-section-title { margin-top: 1.25rem; }
  .dash-set2-hero { margin-bottom: 1rem; }
  .dash-set2-hero-line { font-size: 0.9rem; }
  .dash-set2-status-row { gap: 0.5rem; }
  .dash-set2-threshold-row input[type="number"] { width: 100px; }
}