/* ==========================================================================
   lovable-theme.css — MMA intake design system (Lovable UI/UX port)
   --------------------------------------------------------------------------
   Ports the locked Lovable prototype's visual language into the existing
   Bootstrap 4 + EJS app. PRESENTATION ONLY — no markup logic depends on this.

   Strategy: layered OVER Bootstrap 4.3.1 (loaded after it in head.ejs).
     1. Tokens          — :root CSS variables (mirrors src/styles.css).
     2. Base            — body, typography, links.
     3. Bootstrap remap — .btn*, .form-control, .form-check, containers, cards.
     4. Components       — new .lv-* classes for the richer Lovable controls.

   Reference: .claude/MMA Onboard Demo/src/styles.css + components/intake/*.
   Source Sans 3 is loaded via Google Fonts in views/partials/head.ejs.
   ========================================================================== */

/* 1. TOKENS ================================================================= */
:root {
  --radius: 0.5rem;

  --background: #faf9f7;       /* page background (warm off-white)            */
  --foreground: #2c3e50;       /* default strong text                        */
  --card: #fffdf9;             /* card background                            */
  --card-foreground: #2c3e50;
  --card-border: #ebe6df;      /* card / control borders                     */

  --primary: #0d4f4f;          /* primary buttons, selected state, focus ring */
  --primary-foreground: #ffffff;
  --secondary: #1a9b9b;        /* eyebrow labels, active progress segment     */

  --muted: #f3efe8;            /* hover background                            */
  --muted-foreground: #5a6c7d; /* helper / secondary text                    */

  --heading: #2c3e50;
  --body: #444444;

  --accent-gold: #d4a574;
  --success: #00a878;
  --danger: #c0392b;
  --danger-soft: #fdecea;

  --tag-teal: #e8f4f4;         /* SELECTED option / pill / chip background    */
  --tag-gold: #fdf6ed;
  --tag-green: #e6f7f2;

  --border: #ebe6df;
  --input: #ebe6df;
  --ring: #0d4f4f;

  --lv-font: "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --lv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --lv-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.10);
  --lv-content-width: 672px;   /* Lovable max-w-2xl                          */
}

/* 2. BASE =================================================================== */
html,
body {
  background: var(--background);
  color: var(--body);
  font-family: var(--lv-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The legacy questionnaire/assessment set a dark "brain" background image and
   white .title text. The port is a light theme — neutralize the image. */
body {
  background-image: none !important;
}

h1, h2, h3, h4, h5, h6,
.lv-heading {
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--primary); }
a:hover { color: var(--secondary); }

/* .title was white-on-dark in the legacy questionnaire; light theme flips it */
.title,
.title h1, .title h2, .title h3, .title p {
  color: var(--heading);
}

/* Visible focus ring for keyboard users (matches Lovable focus:ring-2) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* 3. BOOTSTRAP REMAP ======================================================== */

/* Layout shell — center content at the Lovable measure. Opt-in helper so we
   don't disturb wide appt/grid layouts that need the full width. */
.lv-shell {
  max-width: var(--lv-content-width);
  margin: 0 auto;
  padding: 24px 16px 40px;
}
@media (min-width: 640px) {
  .lv-shell { padding: 40px 16px; }
}

/* Card — the white panel each step lives in. Re-skins legacy .form-section
   (heavy drop-shadow, no radius) into the soft Lovable card. */
.lv-card,
.form-section {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--lv-shadow-card);
  padding: 24px;
}
@media (min-width: 768px) {
  .lv-card,
  .form-section { padding: 32px; }
}

/* Buttons -------------------------------------------------------------------
   Lovable: rounded-lg, font-semibold, px-5 py-2.5. Primary = teal fill,
   secondary/outline = teal border, ghost = muted text. We remap Bootstrap's
   .btn variants so existing markup picks up the look with no class changes. */
.btn {
  font-family: var(--lv-font);
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.625rem 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-primary,
.btn-success {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  opacity: 0.9;
}

/* .btn-light is the legacy "Get Started / Next" CTA — make it the primary
   teal action too (the Lovable CTA is solid teal). */
.btn-light {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: none;
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
  opacity: 0.9;
}

/* Secondary / Back button — outlined teal */
.btn-outline-primary,
.btn-secondary,
.lv-btn-secondary {
  background-color: #fff;
  border: 2px solid var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover,
.btn-secondary:hover,
.lv-btn-secondary:hover {
  background-color: var(--tag-teal);
  color: var(--primary);
  border-color: var(--primary);
}

/* Ghost / link-style back button */
.lv-btn-ghost {
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  font-weight: 600;
}
.lv-btn-ghost:hover { color: var(--foreground); }

.btn:disabled,
.btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Text inputs / textarea / select ------------------------------------------ */
.form-control,
.lv-input,
.lv-textarea,
.lv-select {
  font-family: var(--lv-font);
  color: var(--foreground);
  background-color: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  /* Let height grow with the padding + content instead of Bootstrap's fixed
     height (which, combined with the larger padding, clipped select/input text).
     line-height keeps the value vertically centered and fully visible. */
  height: auto;
  min-height: 46px;
  line-height: 1.5;
  box-shadow: none;
  -webkit-box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Native selects: reserve room for the arrow and keep the value fully visible. */
select.form-control,
select.lv-select {
  height: 46px;
  padding-right: 2rem;
}
.form-control:focus,
.lv-input:focus,
.lv-textarea:focus,
.lv-select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(13, 79, 79, 0.25);
  outline: none;
}
.form-control::placeholder,
.lv-input::placeholder,
.lv-textarea::placeholder { color: var(--muted-foreground); }
.lv-textarea { min-height: 60px; }

/* Override the legacy global input drop-shadow from formStyle.css */
input {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}

/* 4. COMPONENTS ============================================================= */

/* 4.1 Eyebrow label (uppercase section tag) */
.lv-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

/* 4.2 Step heading + helper text + question label */
.lv-step-title {
  font-size: 1.25rem;
  color: var(--heading);
  margin-bottom: 0.75rem;
}
.lv-helper {
  font-size: 0.8125rem;
  line-height: 1.375;
  color: var(--muted-foreground);
}
.lv-question {
  font-size: 1rem;
  font-weight: 500;
  color: var(--heading);
  display: block;
  margin-bottom: 1rem;
}

/* 4.3 Inline error text + invalid field state */
.lv-error,
.form-warning,
.helper-text.text-danger {
  display: block;
  color: var(--danger);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.badInput,
.inputWarning,
[aria-invalid="true"] {
  border-color: var(--danger) !important;
  background-color: var(--danger-soft);
}

/* 4.4 Timeframe chip (e.g. "Past 6 months") */
.lv-timeframe {
  display: inline-block;
  background: var(--tag-teal);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

/* 4.5 Option card — selectable bordered box (radio & checkbox single choices).
   Default = light border on white; selected = teal border on pale-teal fill.
   Markup: a <label.lv-option> wrapping the native input + content. The
   :has() selector drives the selected state from the native input; the
   .is-selected class is a fallback hook for browsers/JS without :has(). */
.lv-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lv-option:hover { background: var(--muted); }
.lv-option__label { font-weight: 500; color: var(--heading); }
.lv-option__desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
}
.lv-option.is-selected,
.lv-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--tag-teal);
}

/* 4.6 Pill toggle group — wrapping pills (multi-select) and stacked pills. */
.lv-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lv-pills--stack { flex-direction: column; }
.lv-pill {
  border: 2px solid var(--card-border);
  background: #fff;
  color: var(--body);
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 9999px;
  padding: 0.625rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lv-pills--stack .lv-pill {
  border-radius: var(--radius);
  font-size: 1rem;
  padding: 0.75rem 1rem;
}
.lv-pill:hover { background: var(--muted); }
.lv-pill.is-active,
.lv-pill[aria-pressed="true"],
.lv-pill:has(input:checked) {
  background: var(--tag-teal);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* 4.7 Likert option grid — 2 columns on mobile, 4 (or 5) on desktop. Re-skins
   the legacy inline .likert (horizontal line + stacked radios) into tiles.
   New markup uses .lv-likert; legacy .likert kept usable as a fallback. */
.lv-likert {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 640px) {
  .lv-likert { grid-template-columns: repeat(4, 1fr); }
  .lv-likert--5 { grid-template-columns: repeat(5, 1fr); }
}
.lv-likert li { margin: 0; }
.lv-likert label {
  display: block;
  width: 100%;
  text-align: center;
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 0.5rem;
  min-height: 44px;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lv-likert input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.lv-likert input[type="radio"]:checked + label,
.lv-likert label.is-active {
  background: var(--tag-teal);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* 4.8 Segmented progress bar (Lovable ProgressBar). */
.lv-progress { width: 100%; }
.lv-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lv-progress__label { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.lv-progress__section { font-size: 0.875rem; color: var(--muted-foreground); }
.lv-progress__track { display: flex; gap: 0.375rem; }
.lv-progress__seg {
  height: 0.5rem;
  flex: 1 1 0;
  border-radius: 9999px;
  background: var(--card-border);
  transition: background-color 0.2s ease;
}
.lv-progress__seg.is-done { background: var(--primary); }
.lv-progress__seg.is-current { background: var(--secondary); }

/* Continuous-bar variant (used by assessment-v3's percentage bar). */
.lv-progressbar {
  height: 0.5rem;
  background: var(--card-border);
  border-radius: 9999px;
  overflow: hidden;
}
.lv-progressbar__fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  transition: width 0.2s ease;
}

/* 4.9 Medication chip + chip input + combobox dropdown. */
.lv-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--tag-teal);
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}
.lv-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.lv-chip__remove:hover { opacity: 0.7; }

.lv-combobox { position: relative; }
.lv-combobox__menu {
  position: absolute;
  z-index: 20;
  margin-top: 0.25rem;
  width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--lv-shadow-pop);
}
.lv-combobox__group {
  position: sticky;
  top: 0;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.75rem;
}
.lv-combobox__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #fff;
  border: none;
  cursor: pointer;
}
.lv-combobox__item:hover,
.lv-combobox__item.is-active { background: var(--tag-teal); }

/* 4.10 Sticky footer navigation (assessment-v3 Back/Next bar). */
.lv-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  display: flex;
  justify-content: center;
}
.lv-footer__inner {
  width: 100%;
  max-width: var(--lv-content-width);
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

/* 4.11 Logo / header */
.lv-logo {
  height: 36px;
  width: auto;
  opacity: 0.9;
  user-select: none;
}
@media (min-width: 640px) {
  .lv-logo { height: 44px; }
}

/* 4.12 Status badges (DQ / completion / crisis). */
.lv-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}
.lv-badge--success { background: var(--tag-green); color: var(--success); }
.lv-badge--danger { background: var(--danger-soft); color: var(--danger); }

/* 4.13 Step fade-in (mirrors Lovable .step-fade). */
@keyframes lvFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lv-fade { animation: lvFadeIn 120ms ease-out; }

/* 4.14 Loader recolor — the questionnaire & legacy assessment use the
   `line-scale-pulse-out` loader from loaders.css, whose bars are white (#fff)
   for the old dark background. On the new light theme they'd be invisible, so
   recolor them to --primary here instead of editing the vendor library. */
.line-scale-pulse-out > div {
  background-color: var(--primary) !important;
}