/* ── v12 design tokens ──────────────────────────────────────────
       Named CSS variables so screens can react to system dark-mode and
       (later) high-contrast without recomputing every className. The
       tailwind palette above still drives utility classes; these tokens
       cover the non-utility surfaces (splash, scrollbars, focus, print). */
    :root {
      --bc-forest-50:  #EEF4EF;
      --bc-forest-100: #D8E8DB;
      --bc-forest-500: #3F7D58;
      --bc-forest-600: #2E6344;
      --bc-forest-700: #234D35;
      --bc-forest-950: #0B1F14;
      --bc-surface: #f8fafc;
      --bc-ink: #0f172a;
      --bc-ink-soft: #334155;
      --bc-radius: 14px;
    }
    @media (prefers-color-scheme: dark) {
      :root { --bc-surface: #0B1F14; --bc-ink: #E5F0E8; --bc-ink-soft: #B2D1B9; }
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; overflow-x: hidden; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body {
      font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      background: var(--bc-surface);
      color: var(--bc-ink);
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    /* Slim, brand-tinted scrollbars — same in every screen */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--bc-forest-600); border-radius: 6px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--bc-forest-700); }
    * { scrollbar-width: thin; scrollbar-color: var(--bc-forest-600) transparent; }

    /* Accessibility — visible focus ring for keyboard navigation. Two-tone
       ring (dark inner + light outer) so it's visible on both light and
       dark backgrounds without a media query. */
    a:focus-visible, button:focus-visible, input:focus-visible,
    textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
      outline: 2px solid var(--bc-forest-600);
      outline-offset: 2px;
      border-radius: 6px;
      box-shadow: 0 0 0 4px rgba(46,99,68,.15);
    }
    /* Comfortable minimum tap target for icon-only controls */
    .tap-target { min-width: 44px; min-height: 44px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* Native date-picker legibility — the default calendar icon on many
       Android browsers is nearly black and vanishes on the dark theme;
       tint it forest-green so the affordance is visible in both themes. */
    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(35%) sepia(28%) saturate(590%) hue-rotate(89deg) brightness(94%) contrast(88%);
      cursor: pointer;
    }
    input[type="date"], input[type="time"] { min-height: 44px; }

    /* Motion — respect reduced-motion but keep our own splash fade snappy. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    }

    /* Print styles — Health Records / prescriptions render as clean paper. */
    @media print {
      body { background: #fff !important; color: #000 !important; }
      .no-print, nav, header .no-print, .grecaptcha-badge { display: none !important; }
      @page { margin: 16mm; }
    }

    /* RTL — the app currently runs primarily LTR (English/Hindi Devanagari);
       when a future language pack sets html[dir="rtl"] (Urdu), these hooks
       flip the layout without every screen having to opt in. */
    [dir="rtl"] .flip-rtl { transform: scaleX(-1); }

    /* reCAPTCHA v3 injects a floating "grecaptcha-badge" the moment api.js
       loads, then sits fixed on top of every screen for the rest of the
       session (it lives outside the React tree). Google explicitly permits
       hiding this floating badge as long as the required disclosure is
       shown in the flows that actually invoke it — see <RecaptchaNotice/>,
       rendered under the relevant buttons. */
    .grecaptcha-badge { visibility: hidden !important; }

    /* ── v12 first-paint splash ────────────────────────────────────
       React + Babel take a full second on cold cache before mounting.
       Rather than showing a white screen, we paint a branded splash
       inline (no external CSS/JS needed), and #root's first render
       marks .bc-boot on <html> to fade the splash away. */
    .bc-splash {
      position: fixed; inset: 0; z-index: 9999;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 18px;
      background: linear-gradient(160deg, #EEF4EF 0%, #D8E8DB 100%);
      color: #14301F;
      transition: opacity .35s ease, visibility .35s ease;
    }
    @media (prefers-color-scheme: dark) {
      .bc-splash { background: linear-gradient(160deg, #0B1F14 0%, #14301F 100%); color: #EEF4EF; }
    }
    .bc-splash__logo {
      width: 68px; height: 68px; border-radius: 18px;
      background: #FFFFFF; display: flex; align-items: center; justify-content: center;
      font-weight: 800; color: #2E6344; font-size: 26px;
      box-shadow: 0 8px 24px rgba(11,31,20,.18), 0 2px 6px rgba(11,31,20,.10);
      animation: bc-pulse 1.4s ease-in-out infinite;
    }
    .bc-splash__title { font-weight: 800; letter-spacing: .2px; font-size: 20px; }
    .bc-splash__tag { font-size: 12px; opacity: .75; margin-top: -8px; }
    .bc-splash__bar {
      width: 128px; height: 3px; border-radius: 999px; background: rgba(46,99,68,.15);
      overflow: hidden; position: relative;
    }
    .bc-splash__bar::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, #2E6344, transparent);
      animation: bc-slide 1.2s linear infinite;
    }
    @keyframes bc-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
    @keyframes bc-slide { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
    html.bc-booted .bc-splash { opacity: 0; visibility: hidden; pointer-events: none; }

    /* NoScript fallback — a small, honest message instead of a blank page. */
    .bc-noscript {
      max-width: 460px; margin: 15vh auto; padding: 24px;
      border: 1px solid #D8E8DB; border-radius: 14px; background: #fff;
      color: #14301F; font-family: system-ui, sans-serif;
    }
  
    /* ── converted from inline style= attributes, CSP style-src cleanup ── */
    .bc-noscript-title { margin: 0 0 8px; color: #2E6344; }
    .bc-noscript-text { margin: 0; line-height: 1.5; }
    .bc-fb-icon-lg { font-size: 20px; }
    .bc-hidden { display: none; }

/* Fix: maplibre-gl.css's .maplibregl-map { position:relative } overrides
   our Tailwind "absolute inset-0" on the map container (equal specificity,
   maplibre-gl.css loads later in <head>). That kills position:absolute, so
   inset-0 can't stretch the div to fill its 280px parent — it collapses to
   0 height and the map renders blank. Forcing it back here, after both
   stylesheets, restores the original intent. */
.maplibregl-map {
  position: absolute !important;
  inset: 0 !important;
}