/* STAK onboarding — additions for the Laravel views (server messages, terms
   dialog) and [data-bs-theme="dark"] support. Loaded after onboarding.css. */

/* ---------- Server messages ---------- */
.onb-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 12px 14px; border-radius: 12px; font-size: 14px; border: 1px solid; }
.onb-alert ul { margin: 4px 0 0; padding-left: 18px; list-style: disc; }
.onb-alert--error { background: #FEF2F2; border-color: #FECACA; color: #B91C1C; }
.onb-alert--success { background: #EFF8F6; border-color: #CDE7E1; color: var(--brand); }
.onb-alert--info { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.form-grid .field-err { display: block; }
.onb__card form { margin: 0; }
.inline-form { display: inline; margin: 0; }
.onb__fine form { display: inline; }

/* Terms / Privacy / Billing dialog */
.modal__card .terms-content {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  overflow-anchor: none;
  margin-top: 14px;
  padding-right: 6px;
  font-size: 14px;
  color: var(--ink-2);
  scroll-behavior: auto;
}
.modal__card .terms-content[hidden] { display: none !important; }
.modal__card .terms-content h3 { margin: 16px 0 6px; font-size: 16px; scroll-margin-top: 0; }
.modal__card .terms-content h3:first-child { margin-top: 0; }
.modal__card .terms-content p { margin: 0 0 8px; }
.modal__card .btn-row { justify-content: flex-end; }

/* Locked summary: the select / toggle are disabled */
.summary__field select:disabled { opacity: .6; cursor: not-allowed; }

/* Payment: method radio in a server form */
.methods .method input:checked ~ span b { color: var(--brand); }
.method.is-off { opacity: .55; cursor: not-allowed; }
.method.is-off small::after { content: " · Coming soon"; }

/* Setup list of existing users */
.invites .inv-actions { display: flex; gap: 10px; justify-content: flex-end; }
.setup__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* =====================================================================
   Dark theme — follows the app setting (data-bs-theme on <html>)
   ===================================================================== */
[data-bs-theme="dark"] {
  color-scheme: dark;
}
[data-bs-theme="dark"] body.auth {
  --brand: #5EC9B6;
  --brand-2: #0E7A6F;
  --accent: #2BB894;
  --ink: #E6EEF0;
  --ink-2: #C3D0D4;
  --muted: #8FA3AB;
  --line: #24363C;
  --bg: #0E1A1E;
  --tint: #0B1518;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  background: var(--tint);
  color: var(--ink);
}
[data-bs-theme="dark"] .auth__bar,
[data-bs-theme="dark"] .onb__card,
[data-bs-theme="dark"] .summary,
[data-bs-theme="dark"] .method,
[data-bs-theme="dark"] .modal { background: #132227; }
[data-bs-theme="dark"] .modal { color: var(--ink); }
[data-bs-theme="dark"] .logo { color: #E6EEF0; }
[data-bs-theme="dark"] .btn--primary { background: linear-gradient(135deg, #0B5D5B, #0E7A6F); color: #fff; }
[data-bs-theme="dark"] .btn--ghost { background: transparent; border-color: var(--ink-2); color: var(--ink); }
[data-bs-theme="dark"] .btn--ghost:hover { background: var(--ink); color: #0E1A1E; }
[data-bs-theme="dark"] .form-grid input,
[data-bs-theme="dark"] .form-grid select,
[data-bs-theme="dark"] .form-grid textarea,
[data-bs-theme="dark"] .summary__field select,
[data-bs-theme="dark"] .invite input,
[data-bs-theme="dark"] .invite select,
[data-bs-theme="dark"] .otp input { background: #0E1A1E; color: var(--ink); border-color: #2C4248; }
[data-bs-theme="dark"] .form-grid input[readonly] { background: #10201F; color: var(--muted); }
[data-bs-theme="dark"] .pw__toggle { background: #1B2E33; color: var(--brand); }
[data-bs-theme="dark"] .seg { background: #0E1A1E; }
[data-bs-theme="dark"] .seg button.is-on { background: #1B2E33; color: var(--brand); }
[data-bs-theme="dark"] .progress li { color: #5F7880; }
[data-bs-theme="dark"] .progress li::before { background: #24363C; }
[data-bs-theme="dark"] .progress li.done::before { background: var(--accent); }
[data-bs-theme="dark"] .progress li.current::before { background: linear-gradient(90deg, var(--accent) 50%, #24363C 50%); }
[data-bs-theme="dark"] .summary__rows div,
[data-bs-theme="dark"] .review div { border-bottom-color: #1E3036; }
[data-bs-theme="dark"] .summary__rows s,
[data-bs-theme="dark"] .review s { color: #6F858C; }
[data-bs-theme="dark"] .summary__saving,
[data-bs-theme="dark"] .step__kicker,
[data-bs-theme="dark"] .pw-rules li.ok,
[data-bs-theme="dark"] .import-ok,
[data-bs-theme="dark"] .checklist li.ok span { color: #4ADE80; }
[data-bs-theme="dark"] .notice { background: #10282A; border-color: #1F4A47; color: #9FE3D6; }
[data-bs-theme="dark"] .notice--warn,
[data-bs-theme="dark"] .onb-alert--error { background: #2A1215; border-color: #5B2328; color: #FCA5A5; }
[data-bs-theme="dark"] .onb-alert--success { background: #10282A; border-color: #1F4A47; color: #9FE3D6; }
[data-bs-theme="dark"] .onb-alert--info { background: #0F1F35; border-color: #1E3A5F; color: #93C5FD; }
[data-bs-theme="dark"] details.optional { border-color: #2C4248; }
[data-bs-theme="dark"] .logo-up__preview { background: #0E1A1E; }
[data-bs-theme="dark"] .method:hover { border-color: #2F6B60; }
[data-bs-theme="dark"] .method__ic--momo { background-color: #3A2E10; }
[data-bs-theme="dark"] .method__ic--card { background-color: #1E2347; }
[data-bs-theme="dark"] .method__ic--bank { background-color: #0F2A3A; }
[data-bs-theme="dark"] .method__ic--shrinqpay { background-color: #10282A; }
[data-bs-theme="dark"] .status__ic--ok,
[data-bs-theme="dark"] .done__ic svg { background: #12301F; color: #4ADE80; }
[data-bs-theme="dark"] .status__ic--wait { background: #3A2E10; color: #FBBF24; }
[data-bs-theme="dark"] .status__ic--bad { background: #3A1518; color: #F87171; }
[data-bs-theme="dark"] .status__ic--off { background: #1B2A30; color: #94A3B8; }
[data-bs-theme="dark"] .spinner { border-color: #24363C; border-top-color: var(--accent); }
[data-bs-theme="dark"] .prov-bar,
[data-bs-theme="dark"] .seats__bar { background: #1E3036; }
[data-bs-theme="dark"] .prov li { color: #5F7880; }
[data-bs-theme="dark"] .prov li.active { color: var(--ink); }
[data-bs-theme="dark"] .prov li.done { color: var(--ink-2); }
[data-bs-theme="dark"] .prov__dot { border-color: #2C4248; }
[data-bs-theme="dark"] .mod-chips .chip { background: #0E1A1E; }
[data-bs-theme="dark"] .mod-chips .chip--on { background: #10282A; border-color: #1F4A47; color: #9FE3D6; }
[data-bs-theme="dark"] .setup__nav li { color: #5F7880; }
[data-bs-theme="dark"] .setup__nav li[tabindex="0"] { color: var(--ink-2); }
[data-bs-theme="dark"] .setup__nav li::before { border-color: #2C4248; }
[data-bs-theme="dark"] .setup__nav li.current { background: #0E1A1E; color: var(--brand); }
[data-bs-theme="dark"] .setup__nav li.current::before { border-color: var(--accent); background: var(--accent); color: #0E1A1E; }
[data-bs-theme="dark"] .invites li:first-child { background: #10201F; }
[data-bs-theme="dark"] .mod-toggles li.locked { background: #10201F; }
[data-bs-theme="dark"] .mod-toggles li.locked b { color: #6F858C; }
[data-bs-theme="dark"] .lock-pill { background: #1E2347; color: #A5B4FC; }
[data-bs-theme="dark"] .inv-state { background: #3A2E10; color: #FBBF24; }
[data-bs-theme="dark"] .inv-state--ok { background: #12301F; color: #4ADE80; }
[data-bs-theme="dark"] .checklist li.later span { color: #FBBF24; }
[data-bs-theme="dark"] .switch span[aria-hidden] { background: #2C4248; }
[data-bs-theme="dark"] .modal__close { background: #0E1A1E; color: var(--ink-2); }

/* Progress: completed stages link back */
.progress li a { display: block; color: inherit; }

/* Native [hidden] must win over component display rules (e.g. .field-err). */
.onb [hidden], body.auth [hidden] { display: none !important; }