/* ============================================================================
   منصة استبيان قياس الأداء الفني — plain CSS (no build step, no Tailwind)
   Ported utility-class-by-utility-class from the verified Next.js/Tailwind
   version so the rendered UI is pixel-identical. Organized by
   component/page for traceability back to the original .tsx source.
   ============================================================================ */

/* ============================================================================
   BRAND COMPLIANCE NOTE
   Colors below are the verified official palette from "MEWA Brand
   Guidelines v03" (sections 2.1–2.3): primary greens/gold by exact HEX,
   secondary accent colors, and the rule that primary colors must
   visually dominate over secondary ones.

   Typography: the guideline specifies Lina Sans (Arabic) + IBM Plex Sans
   (Latin) — section 3.1/3.2. Lina Sans is a commercial typeface (Zaza Type
   foundry). Licensed font files were provided by the client and are used
   here directly (wwwroot/fonts/lina-sans/) — this was previously a
   documented deviation using IBM Plex Sans Arabic as a substitute; that
   substitution has been resolved now that licensed files are available.
   IBM Plex Sans continues to be used for Latin text, per the guideline's
   own specification for that half of the typography system, loaded from
   Google Fonts (open-source, no licensing concern).

   LICENSING: the font files under wwwroot/fonts/lina-sans/ are licensed
   for this project by the client (Zaza Type foundry). Do not redistribute
   them outside this project or reuse them in unrelated projects without
   separately confirming license terms with the client/foundry.

   PERFORMANCE NOTE (avoiding both a fallback-font flash AND a stuck
   fallback font on first load)
   Each weight ships as WOFF2 (primary — smaller and faster to parse than
   OTF) with the original .otf as a fallback source for the rare browser
   without WOFF2 support. font-display is set to `block`:
     - `swap` (tried first) shows the fallback font immediately and swaps
       to Lina Sans once it downloads — visible on every single page
       load/refresh, not just the first one.
     - `optional` (tried next) avoided that swap-flash, but overcorrected:
       on a cold cache it gives the font only a very short window to
       arrive (spec-recommended ~100ms) before permanently committing to
       the fallback for that entire page view, even though the font
       finishes downloading moments later — this is what caused the "the
       correct font never appears until I manually refresh" issue on
       first visit.
     - `block` gives the browser a short window (browser-dependent, spec
       ceiling ~3s) to fetch the font before painting any text at all,
       then always renders in Lina Sans once it arrives — no fallback
       flash, and no stuck-on-fallback first load either. Combined with
       the <link rel="preload"> tags in _Layout.cshtml (which fetch the
       two most-used weights, Regular/SemiBold, at the highest priority)
       and the WOFF2 files being small (~20KB each), the actual wait in
       practice is well under that ceiling.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-Thin.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-ExtraLight.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-Light.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-Regular.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-Medium.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-SemiBold.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'Lina Sans';
  src: url('/fonts/lina-sans/LinaSans-Bold.woff2') format('woff2'),
       url('/fonts/lina-sans/LinaSans-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---------------------------------------------------------------------------
   Design tokens — official MEWA brand palette (Brand Guidelines v03, §2.1–2.3)
--------------------------------------------------------------------------- */
:root {
  /* ---- Primary palette (§2.1) — use most prominently, per the §2.3 ratio rule ---- */
  --mewa-primary-dark-green: #005D45;   /* PANTONE 336-C */
  --mewa-primary-green:      #46C752;   /* PANTONE 2270-C */
  --mewa-primary-gold:       #FFC629;   /* PANTONE 116-C */

  /* ---- Secondary palette (§2.2) — accent use only, must not dominate primary ---- */
  --mewa-secondary-brown:  #873518;  /* PANTONE 484-C */
  --mewa-secondary-orange: #DB7432;  /* PANTONE 7578-C */
  --mewa-secondary-blue:   #1C95D6;  /* PANTONE 2925-C */
  --mewa-secondary-navy:   #00406B;  /* PANTONE 2187-C */
  --mewa-secondary-cyan:   #02CCDF;  /* PANTONE 311-C */
  --mewa-secondary-lime:   #9AEC23;  /* PANTONE 2290-C */

  /* ---- Tonal ramp derived from the primary dark green, for UI states
         (hover/active/borders) that the brand guide itself doesn't specify
         numerically — kept close to the true brand green rather than the
         previous arbitrary greens. ---- */
  --mewa-green-950: #002E22;
  --mewa-green-900: #00402F;
  --mewa-green-800: #00503B;
  --mewa-green-700: var(--mewa-primary-dark-green); /* #005D45 — true brand green */
  --mewa-green-600: #0B7A5B;
  --mewa-green-500: var(--mewa-primary-green);       /* #46C752 — true brand green */
  --mewa-green-100: #E1F5E7;
  --mewa-green-50:  #F1FAF4;

  --mewa-sand-50: #f7f7f5;
  --mewa-sand-100: #eef0ec;

  /* Gold accent — used sparingly (dividers, small highlights), consistent
     with §2.3's rule that primary colors dominate over accents. */
  --mewa-gold-500: var(--mewa-primary-gold); /* #FFC629 — true brand gold */
  --mewa-gold-600: #E0A800;

  --ink-900: #16211b;
  --ink-700: #3b4a41;
  --ink-500: #6b7a71;
  --ink-300: #b6c2ba;
  --ink-100: #e6ece8;

  --danger: #c0392b;
  --danger-50: #fbeceb;

  --radius-md: 10px;
  --radius-lg: 16px;

  --background: var(--mewa-sand-50);
  --foreground: var(--ink-900);

  --font-arabic: 'Lina Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-latin: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   Reset / base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-arabic);
  font-weight: 600; /* brand guide favors Medium/SemiBold for headings over pure Bold */
  letter-spacing: -0.01em;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
:focus-visible {
  outline: 2px solid var(--mewa-green-600);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Layout helpers (replace max-w-*, mx-auto, px-*, py-* utilities)
--------------------------------------------------------------------------- */
.min-h-screen { min-height: 100vh; }
.bg-sand-50 { background: var(--mewa-sand-50); }

.container-md { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; } /* max-w-2xl */
.container-lg { max-width: 64rem; margin-inline: auto; padding-inline: 1rem; } /* max-w-4xl */
.container-xl { max-width: 72rem; margin-inline: auto; padding-inline: 1rem; } /* max-w-5xl */
.container-2xl { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; } /* max-w-6xl */
@media (min-width: 640px) {
  .container-md, .container-lg, .container-xl, .container-2xl { padding-inline: 1.5rem; }
}

.page-py { padding-block: 1.5rem; }         /* py-6 */
.page-py-lg { padding-block: 2.5rem 4rem; } /* py-10 pb-16 */

/* ---------------------------------------------------------------------------
   Card / buttons / form fields / badges (verbatim from @layer components)
--------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 61, 44, 0.04), 0 8px 24px -12px rgba(15, 61, 44, 0.08);
}
.card-pad { padding: 1.25rem; }
@media (min-width: 640px) { .card-pad { padding: 2rem; } }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.5rem; padding: 0.625rem 1.25rem; font-weight: 600; font-size: 0.875rem;
  transition: background-color 0.15s; background: var(--mewa-green-700); color: #fff;
  border: none;
}
.btn-primary:hover { background: var(--mewa-green-800); }
.btn-primary:disabled { background: var(--ink-300); cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.5rem; padding: 0.625rem 1.25rem; font-weight: 600; font-size: 0.875rem;
  transition: background-color 0.15s; background: #fff; color: var(--mewa-green-800);
  border: 1px solid var(--mewa-green-700);
}
.btn-secondary:hover { background: var(--mewa-green-50); }
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0.5rem; padding: 0.5rem 1rem; font-weight: 500; font-size: 0.875rem;
  transition: background-color 0.15s; color: var(--ink-700); background: transparent; border: none;
}
.btn-ghost:hover { background: var(--ink-100); }

.btn-text-xs { font-size: 0.75rem; padding: 0.5rem 0.875rem; }

.field-label {
  display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; color: var(--ink-900);
}
.field-required { color: var(--danger); }

.field-input {
  width: 100%; border-radius: 0.5rem; border: 1px solid var(--ink-300);
  padding: 0.625rem 0.875rem; font-size: 0.875rem; background: #fff; transition: border-color 0.15s;
}
.field-input:focus {
  border-color: var(--mewa-green-600);
  box-shadow: 0 0 0 3px var(--mewa-green-100);
  outline: none;
}
.field-input.has-error { border-color: var(--danger); }
.field-hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--ink-500); }

.badge {
  display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px;
  padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600;
}
.badge-ink { background: var(--ink-100); color: var(--ink-700); }
.badge-mewa { background: var(--mewa-green-50); color: var(--mewa-green-800); }
.badge-remove { margin-inline-start: 0.25rem; color: var(--danger); background: none; border: none; font-size: 0.875rem; }
.badge-remove:hover { opacity: 0.7; }

.alert-danger {
  border-radius: 0.5rem; background: var(--danger-50); padding: 0.75rem;
  font-size: 0.875rem; font-weight: 500; color: var(--danger);
}

/* ---------------------------------------------------------------------------
   MinistryHeader.tsx
--------------------------------------------------------------------------- */
.site-header-strip { background: var(--mewa-green-950); }
.site-header-strip-inner {
  max-width: 80rem; margin-inline: auto; display: flex; align-items: center;
  justify-content: space-between; padding: 0.375rem 1rem; font-size: 11px; color: rgba(255,255,255,0.85);
}
@media (min-width: 640px) { .site-header-strip-inner { padding-inline: 1.5rem; } }

.site-header-main { background: var(--mewa-green-800); }
.site-header-main-inner {
  max-width: 80rem; margin-inline: auto; display: flex; align-items: center;
  justify-content: flex-start; gap: 1.5rem; padding: 1.75rem 1.5rem;
}
.site-header-main-inner.compact { padding-block: 1rem; gap: 1rem; }
@media (min-width: 640px) {
  /* Brand guide §1.3: minimum clear space around the logo should equal the
     logo's own height. A literal 72px gap on every side isn't practical in
     a compact site header without the header becoming disproportionately
     tall, so padding/gap here are increased well beyond the previous
     values to move meaningfully closer to that rule while staying
     web-appropriate — not a literal 1:1 clear-space implementation. */
  .site-header-main-inner { padding-inline: 2rem; padding-block: 2rem; gap: 2rem; }
  .site-header-main-inner.compact { padding-block: 1rem; gap: 1rem; }
}

.site-header-logo { position: relative; flex-shrink: 0; width: 4rem; height: 4rem; }
@media (min-width: 640px) { .site-header-logo { width: 72px; height: 72px; } }
.site-header-logo.compact { width: 2.75rem; height: 2.75rem; }
.site-header-logo img { width: 100%; height: 100%; object-fit: contain; }

.site-header-titles { min-width: 0; text-align: right; }
.site-header-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; color: #fff; font-size: 1.25rem;
}
@media (min-width: 640px) { .site-header-title { font-size: 1.5rem; } }
.site-header-title.compact { font-size: 1rem; }
@media (min-width: 640px) { .site-header-title.compact { font-size: 1.125rem; } }
.site-header-subtitle {
  margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 0.75rem; color: rgba(255,255,255,0.8);
}
@media (min-width: 640px) { .site-header-subtitle { font-size: 0.875rem; } }

.site-header-divider { height: 0.25rem; background: var(--mewa-gold-500); }

/* ---------------------------------------------------------------------------
   StepProgress.tsx (right-hand vertical sidebar)
--------------------------------------------------------------------------- */
.step-sidebar {
  position: sticky; top: 1rem; width: 100%; flex-shrink: 0; overflow: hidden;
}
@media (min-width: 1024px) { .step-sidebar { width: 18rem; } }

.step-sidebar-head { border-bottom: 1px solid var(--ink-100); padding: 0.875rem 1rem; }
.step-sidebar-head-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; }
.step-sidebar-head-label { font-weight: 600; color: var(--ink-700); }
.step-sidebar-head-percent { font-weight: 700; color: var(--mewa-green-800); }
.step-sidebar-head-detail { margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-500); }

.step-sidebar-bar { margin-top: 0.5rem; height: 0.375rem; width: 100%; overflow: hidden; border-radius: 9999px; background: var(--ink-100); }
.step-sidebar-bar-fill { height: 100%; border-radius: 9999px; background: var(--mewa-green-700); transition: width 0.2s; }

.step-sidebar-nav { padding: 0.5rem; }
.step-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.step-sidebar-item {
  display: flex; align-items: center; gap: 0.75rem; border-radius: 0.75rem;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 600; transition: background-color 0.15s;
  color: var(--ink-500);
}
.step-sidebar-item.done { color: var(--ink-900); }
.step-sidebar-item.active { color: #fff; background: var(--mewa-green-800); }
.step-sidebar-item svg { flex-shrink: 0; }
.step-sidebar-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.step-sidebar-item-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: var(--ink-100);
  transition: background-color 0.15s;
}
.step-sidebar-item.done .step-sidebar-item-icon { background: var(--mewa-green-100); }
.step-sidebar-item.active .step-sidebar-item-icon { background: rgba(255, 255, 255, 0.18); }

/* ---------------------------------------------------------------------------
   SurveyLayout.tsx (content + sidebar two-column shell)
--------------------------------------------------------------------------- */
.survey-shell { display: flex; flex-direction: column-reverse; gap: 1.25rem; }
@media (min-width: 1024px) { .survey-shell { flex-direction: row; align-items: flex-start; } }
.survey-content { min-width: 0; flex: 1 1 0%; display: flex; flex-direction: column; gap: 1rem; }

/* ---------------------------------------------------------------------------
   QuestionCard.tsx
--------------------------------------------------------------------------- */
.question-card { padding: 1.25rem; }
@media (min-width: 640px) { .question-card { padding: 1.5rem; } }

.question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.question-text { font-size: 1rem; font-weight: 700; line-height: 1.7; color: var(--ink-900); }
@media (min-width: 640px) { .question-text { font-size: 17px; } }
.question-index-badge {
  display: flex; height: 1.75rem; width: 1.75rem; flex-shrink: 0; align-items: center;
  justify-content: center; border-radius: 9999px; font-size: 0.75rem; font-weight: 700;
  background: var(--ink-100); color: var(--ink-700);
}

.question-help {
  margin-top: 0.375rem; display: flex; align-items: flex-start; gap: 0.375rem;
  font-size: 0.75rem; line-height: 1.6; color: var(--ink-500);
}
.question-help svg { margin-top: 0.125rem; flex-shrink: 0; }

.answer-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.answer-pill {
  position: relative;
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-radius: 9999px; border: 1px solid var(--ink-100); padding: 0.625rem 1rem;
  font-size: 0.875rem; line-height: 1.6; background: rgba(238,240,236,0.6); color: var(--ink-700);
  transition: border-color 0.15s; text-align: right; cursor: pointer;
}
.answer-pill:hover { border-color: var(--ink-300); }
.answer-pill.selected { border-color: var(--mewa-green-700); background: var(--mewa-green-50); color: var(--ink-900); }
.answer-pill-badge {
  display: flex; height: 1.5rem; width: 1.5rem; flex-shrink: 0; align-items: center;
  justify-content: center; border-radius: 9999px; font-size: 0.75rem; font-weight: 700;
  color: #fff; background: var(--ink-300);
}
.answer-pill.selected .answer-pill-badge { background: var(--mewa-green-700); }
.answer-pill-label { flex: 1 1 0%; text-align: right; }

.attachment-box {
  margin-top: 1rem; border-radius: 0.5rem; border: 1px dashed var(--mewa-gold-500);
  background: #fbf7ec; padding: 0.875rem;
}
.attachment-box-title { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ink-900); }
.attachment-box-hint { margin-bottom: 0.625rem; font-size: 0.8125rem; color: #8a6d1a; line-height: 1.6; }
.attachment-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.attachment-hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--ink-500); }
.answer-pill-radio {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.file-input-visually-hidden {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}

.field-error { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--danger); }

/* ---------------------------------------------------------------------------
   ReviewerNav.tsx
--------------------------------------------------------------------------- */
.reviewer-nav { border-bottom: 1px solid var(--ink-100); background: #fff; }
.reviewer-nav-inner {
  max-width: 80rem; margin-inline: auto; display: flex; align-items: center;
  justify-content: space-between; padding-inline: 1rem;
}
@media (min-width: 640px) { .reviewer-nav-inner { padding-inline: 1.5rem; } }
.reviewer-nav-tabs { display: flex; gap: 0.25rem; }
.reviewer-nav-tab {
  border-bottom: 2px solid transparent; padding: 0.75rem 1rem; font-size: 0.875rem;
  font-weight: 600; color: var(--ink-500); transition: color 0.15s, border-color 0.15s;
}
.reviewer-nav-tab:hover { color: var(--ink-900); }
.reviewer-nav-tab.active { border-color: var(--mewa-green-700); color: var(--mewa-green-800); }

/* ---------------------------------------------------------------------------
   Organization account bar (_OrgAccountBar.cshtml) — shows the logged-in
   organization's name and a logout control on every beneficiary-facing page.
--------------------------------------------------------------------------- */
.org-account-bar {
  border-bottom: 1px solid var(--ink-100); background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 1rem;
}
@media (min-width: 640px) { .org-account-bar { padding-inline: 1.5rem; } }
.org-account-bar-name { font-size: 0.8125rem; color: var(--ink-700); }

/* ---------------------------------------------------------------------------
   Classification badge colors (ClassificationBadge.tsx)
--------------------------------------------------------------------------- */
.cls-badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; }
.cls-very-high { background: #e6f4ea; color: #1e7d32; }
.cls-high      { background: #eef7e9; color: #4c8c2b; }
.cls-medium    { background: #fdf6e3; color: #a17f14; }
.cls-low       { background: #fdeee3; color: #b5601c; }
.cls-very-low  { background: #fbeaea; color: #b53232; }
.cls-none      { background: var(--ink-100); color: var(--ink-500); }

/* ---------------------------------------------------------------------------
   Generic utility replacements used inline across pages
--------------------------------------------------------------------------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.stack-4 > * + * { margin-top: 1rem; }
.stack-5 > * + * { margin-top: 1.25rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-ink-500 { color: var(--ink-500); }
.text-ink-700 { color: var(--ink-700); }
.text-ink-900 { color: var(--ink-900); }
.text-danger { color: var(--danger); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.7; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.row-actions { display: flex; flex-direction: column-reverse; gap: 0.75rem; }
@media (min-width: 640px) { .row-actions { flex-direction: row; justify-content: space-between; } }

/* ---------------------------------------------------------------------------
   Dashboard grid (Dashboard.cshtml)
--------------------------------------------------------------------------- */
.dashboard-kpis {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .dashboard-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dashboard-kpis { grid-template-columns: repeat(5, 1fr); } }
.dashboard-kpi-highlight {
  background: var(--mewa-green-50); border: 1px solid #b7dfc4;
}
.dashboard-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr 1fr; } }
.dashboard-full-width { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Weekly trend chart (Dashboard.cshtml)
--------------------------------------------------------------------------- */
.trend-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; height: 12rem; }
.trend-chart-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; }
.trend-chart-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 0.25rem;
  flex: 1; width: 100%;
}
.trend-chart-bar-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%;
}
.trend-chart-bar-value { font-size: 0.6875rem; font-weight: 700; color: var(--ink-700); margin-bottom: 0.25rem; }
.trend-chart-bar { width: 0.875rem; min-height: 2px; border-radius: 2px 2px 0 0; transition: height 0.2s; }
.trend-chart-bar-submitted { background: var(--mewa-green-600); }
.trend-chart-bar-finalized { background: var(--mewa-gold-500); }
.trend-chart-label { margin-top: 0.5rem; font-size: 0.6875rem; color: var(--ink-500); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Clickable dashboard chart elements (Dashboard.cshtml) — link into a
   pre-filtered Results page instead of being purely decorative.
--------------------------------------------------------------------------- */
.dashboard-chart-slice { cursor: pointer; transition: opacity 0.15s; }
.dashboard-chart-slice:hover { opacity: 0.85; }
.dashboard-legend-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem;
  border-radius: 0.375rem; padding: 0.25rem 0.375rem; margin: -0.25rem -0.375rem;
  transition: background-color 0.15s;
}
.dashboard-legend-row:hover { background: var(--ink-100); }
.dashboard-region-row {
  border-radius: 0.375rem; padding: 0.25rem 0.375rem; margin: -0.25rem -0.375rem;
  transition: background-color 0.15s;
}
.dashboard-region-row:hover { background: var(--ink-100); }

/* ---------------------------------------------------------------------------
   Vertical bar chart (Dashboard.cshtml) — classification % / count charts,
   matching the layout in the reference dashboard mockup.
--------------------------------------------------------------------------- */
.dashboard-bar-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; height: 12rem; }
.dashboard-bar-chart-col {
  display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%;
  border-radius: 0.375rem; padding: 0.25rem; transition: background-color 0.15s;
}
.dashboard-bar-chart-col:hover { background: var(--ink-100); }
.dashboard-bar-chart-value { font-size: 0.75rem; font-weight: 700; color: var(--ink-900); margin-bottom: 0.25rem; }
.dashboard-bar-chart-track {
  flex: 1; width: 1.75rem; display: flex; align-items: flex-end; background: var(--ink-100);
  border-radius: 0.25rem 0.25rem 0 0; overflow: hidden;
}
.dashboard-bar-chart-fill { width: 100%; min-height: 2px; transition: height 0.2s; }
.dashboard-bar-chart-label {
  margin-top: 0.5rem; font-size: 0.6875rem; color: var(--ink-500); text-align: center;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
   Results pagination (Results.cshtml)
--------------------------------------------------------------------------- */
.results-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 1rem;
}
.results-pagination-summary { font-size: 0.8125rem; color: var(--ink-500); }
.results-pagination-controls { display: flex; align-items: center; gap: 0.75rem; }
.results-pagination-current { font-size: 0.8125rem; font-weight: 600; color: var(--ink-700); }

.results-bulk-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem; padding: 0 0.25rem;
}
.results-bulk-count { font-size: 0.8125rem; color: var(--ink-500); }

/* ---------------------------------------------------------------------------
   Landing / instructions page (page.tsx)
--------------------------------------------------------------------------- */
.landing-main { padding-block: 2.5rem; }
@media (min-width: 640px) { .landing-main { padding-block: 4rem; } }
.landing-card { padding: 1.5rem; }
@media (min-width: 640px) { .landing-card { padding: 2.5rem; } }
.landing-icon-circle {
  margin-inline: auto; margin-bottom: 1.5rem; display: flex; height: 3.5rem; width: 3.5rem;
  align-items: center; justify-content: center; border-radius: 9999px; background: var(--mewa-green-100);
}
.landing-title { text-align: center; font-size: 1.5rem; font-weight: 700; color: var(--ink-900); }
@media (min-width: 640px) { .landing-title { font-size: 1.875rem; } }
.landing-lead { margin-top: 1rem; text-align: center; line-height: 1.7; color: var(--ink-700); }
.landing-notes { margin-top: 1.5rem; border-radius: 0.75rem; background: var(--mewa-sand-100); padding: 1rem; }
.landing-notes-title { font-size: 0.875rem; font-weight: 700; color: var(--ink-900); }
.landing-notes-list { list-style: none; margin: 0.625rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; line-height: 1.7; color: var(--ink-700); }
.landing-notes-list li { display: flex; gap: 0.5rem; }
.landing-notes-bullet { margin-top: 0.125rem; color: var(--mewa-green-700); }
.landing-whatsapp { direction: ltr; font-weight: 600; color: var(--mewa-green-800); }
.landing-submit { margin-top: 1.75rem; width: 100%; padding-block: 0.875rem; font-size: 1rem; }
.landing-footer { margin-top: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--ink-500); }
.alert-danger-center { text-align: center; }

/* ---------------------------------------------------------------------------
   Draft-saved confirmation toast (_SurveyShellStart.cshtml)
--------------------------------------------------------------------------- */
.draft-saved-toast {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  border-radius: 0.5rem; border: 1px solid #b7dfc4; background: var(--mewa-green-50);
  color: var(--mewa-green-800); padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 600;
  animation: draft-toast-fade 4s ease forwards;
}
@keyframes draft-toast-fade {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .draft-saved-toast { animation: none; }
}