/* ===========================================================
   SETTINGS SCREEN - section nav, WhatsApp panel, Stage 7 stubs
   Reference: V2 cockpit, Documents/MVP/robi_v2_cockpit.html
   (.settings V2:390-399, 423-426; WhatsApp block V2:729-758).
   wa-connect-ui 7.5.
   =========================================================== */

.settings { display: grid; grid-template-columns: 220px 1fr; gap: var(--qb-s-24); align-items: start; }

.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav button { display: flex; align-items: center; gap: var(--qb-s-12); height: var(--qb-h-lg); padding: 0 var(--qb-s-12);
  border: 0; background: transparent; border-radius: var(--qb-r-lg); color: var(--qb-fg-2); font-family: inherit;
  font-size: 14px; font-weight: 500; cursor: pointer; text-align: start; }
.subnav button svg { width: 18px; height: 18px; flex: none; }
.subnav button:hover { background: var(--qb-surface-3); color: var(--qb-fg-1); }
.subnav button.is-active { background: var(--qb-orange-light); color: var(--qb-orange-deep); font-weight: 700; }
.subnav .qb-badge { margin-inline-start: auto; }
.qb-badge--stage { background: var(--qb-info-bg); color: var(--qb-info-2); }

.panel { background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: var(--qb-r-xl); padding: var(--qb-s-24); }
.panel__title { margin-bottom: var(--qb-s-16); }

/* ---- WhatsApp block ---- */
.wa { display: flex; flex-direction: column; gap: 16px; }
.wa__status { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--qb-border);
  border-radius: var(--qb-r-xl); background: var(--qb-surface-2); }
.wa__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--qb-surface-muted); color: var(--qb-fg-2); flex: none; }
.wa__icon svg { width: 22px; height: 22px; }
.wa__status--ok .wa__icon { background: var(--qb-success-bg); color: var(--qb-success); }
.wa__status--warn .wa__icon { background: var(--qb-warning-bg); color: var(--qb-warning); }
.wa__status--err .wa__icon { background: var(--qb-danger-bg); color: var(--qb-danger); }
.wa__status--busy .wa__icon { background: var(--qb-info-bg); color: var(--qb-info-2); }
.wa__title { font-weight: 600; font-size: 15px; }
.wa__desc { font-size: 13px; color: var(--qb-fg-2); margin-top: 2px; }
.wa__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.check { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--qb-border); border-radius: var(--qb-r-lg);
  align-items: flex-start; cursor: pointer; font-size: 14px; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--qb-orange-deep); flex: none; }
.check.is-on { border-color: var(--qb-orange); background: var(--qb-orange-lighter); }

.kvs { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; align-items: center; }
.kvs dt { color: var(--qb-fg-2); }

.steps { display: flex; flex-direction: column; gap: 8px; }
.step { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.step svg { width: 18px; height: 18px; flex: none; }
.step--done { color: var(--qb-success); }
.step--active { color: var(--qb-orange-deep); font-weight: 600; }
.step--todo { color: var(--qb-fg-3); }
.step .spin { flex: none; }

.callout { display: flex; gap: 10px; padding: 12px; border-radius: var(--qb-r-lg); background: var(--qb-surface-3);
  font-size: 13px; color: var(--qb-fg-2); }
.callout svg { width: 16px; height: 16px; flex: none; color: var(--qb-fg-2); margin-top: 2px; }
.callout--warn { background: var(--qb-warning-bg); color: var(--qb-fg-1); }
.callout--warn svg { color: var(--qb-warning); }
.callout ol { margin: 6px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }

.hint { font-size: 12px; color: var(--qb-fg-3); }
.wa a { color: var(--qb-orange-deep); font-weight: 600; }

@media (max-width: 900px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .subnav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .subnav button { white-space: nowrap; height: var(--qb-h-md); }
}
@media (max-width: 480px) {
  .panel { padding: var(--qb-s-16); }
  .kvs { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kvs dd { margin-bottom: 8px; }
}