/* ============================================================
   Foot & Ankle Medicine & Surgery — shared clinic style
   Extracted from Patient Info Builder. Change colours/spacing
   here once; every app that loads this file updates.
   ============================================================ */

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

:root {
  /* Palette — pink + teal + navy, professional glass */
  /* Background */
  --bg:        #eef5f7;        /* gently blue — brand Pale blue canvas (Amy 2026-07-06) */
  --bg-tint:   #ebe2e5;
  /* Pinks */
  --pink:      #d8a5b8;        /* dusty rose — primary accent */
  --pink-deep: #b87f97;
  --pink-bg:   #f8ecef;
  /* Teals */
  --teal:      #6aafa8;        /* soft teal */
  --teal-deep: #468a83;
  --teal-bg:   #e3eeed;
  /* Navy / ink */
  --ink:       #1f3a5f;
  --ink-soft:  #4a5a72;
  --muted:     #8a92a3;
  --good:      #2d8a5f;
  --danger:    #b7484a;
  /* Surgery-tracker accents — colour appears ONLY for done (slate) and the
     venue dot (clinic rose). Everything else stays greyscale. */
  --slate:     #375a6b;   /* done chips · hospital venue dot · progress count */
  --rose:      #d4537e;   /* clinic venue dot — vivid enough to read at 8px */
  --sky:       #91bdd7;
  /* Compatibility aliases (apps that used the old names) */
  --blue:      var(--teal);
  --blue-deep: var(--teal-deep);
  --blue-bg:   var(--teal-bg);

  /* Glass surfaces */
  /* Calm paper: glass surfaces are now solid white with hairline borders
     (blur declarations become invisible no-ops on solid backgrounds). */
  --glass:        #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #e8eaee;

  /* Shape & shadow — canonical values used everywhere */
  --radius:     18px;   /* cards */
  --radius-sm:  10px;   /* inputs, small panels */
  --radius-pill: 999px; /* buttons, badges, toggles, back-link */
  --shadow:    0 1px 2px rgba(31,58,95,.04), 0 12px 32px rgba(106,175,168,.16);
  --shadow-card:
    0 1px 0 rgba(255,255,255,1) inset,
    0 1px 2px rgba(31,58,95,.04),
    0 18px 40px rgba(31,58,95,.10),
    0 4px 10px rgba(31,58,95,.04);
}

* { box-sizing: border-box; }

html { scrollbar-gutter: stable; }
html, body {
  margin: 0; padding: 0;
  color: var(--ink);
  min-height: 100vh;
  font: 16px/1.5 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-feature-settings: 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Flat warm off-white canvas — used across all clinic apps.
     (Amy 2026-07-06: NO gradient/ombre backgrounds — keep canvases flat.) */
  background: var(--bg);
}

h1, h2, h3 {
  color: var(--ink); margin: 0 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
}
h1 { font-size: 22px; letter-spacing: .4px; }
h2 { font-size: 17px; letter-spacing: .8px; }
h3 { font-size: 14px; letter-spacing: 1px; }
p  { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* Top bar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* Right padding reserves space for the fixed back-to-dashboard pill */
  padding: 14px 180px 14px 24px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; gap: 14px; align-items: center; }
.brand .text { display: flex; flex-direction: column; line-height: 1.2; }
.brand strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 17px; letter-spacing: .4px; font-weight: 700;
  text-transform: uppercase; color: var(--ink);
}
.brand .sub {
  color: var(--ink-soft); font-size: 12px;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500;
}

/* Round clinic logo, e.g. in the topbar */
.logo-mark {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-mark img { width: 100%; height: 100%; display: block; }

/* Hero section — eyebrow + page heading.
   Default size is compact (good for working tools).
   Dashboard uses .hero.splash for the big landing-page size. */
.hero { text-align: center; padding: 12px 0 20px; }
.hero .eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--teal-deep); font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius);
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(106,175,168,.25);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  margin-bottom: 10px;
}
.hero h1 {
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  font-size: 30px; line-height: 1.15; letter-spacing: .3px;
  margin: 0 0 8px; text-transform: uppercase;
}
.hero .sub {
  color: var(--ink-soft); font-size: 14px;
  max-width: 520px; margin: 0 auto; font-weight: 500;
}

/* Large hero variant for splash/landing pages (dashboard). */
.hero.splash { padding: 24px 0 40px; }
.hero.splash .eyebrow { padding: 6px 14px; margin-bottom: 20px; }
.hero.splash h1 {
  font-size: 40px; line-height: 1.1; letter-spacing: -.6px;
  margin-bottom: 12px;
}
.hero.splash .sub { font-size: 15px; max-width: 480px; }

/* Back-to-dashboard link — pinned top-right of every app, always visible. */
.back-link {
  position: fixed; top: 14px; right: 16px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px 9px 14px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: #fff; text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(31,58,95,.22);
  transition: all .18s ease;
  flex-shrink: 0;
}
.back-link:hover {
  background: #16294a; transform: translateX(-2px);
  box-shadow: 0 5px 14px rgba(31,58,95,.30);
}
.back-link .back-arrow { font-size: 16px; line-height: 1; }
.back-link .back-label { display: inline; }

.brand-sep { color: var(--muted); opacity: .5; margin: 0 8px; }

/* ============================================================
   Responsive — keep everything usable on narrow / mobile screens
   ============================================================ */

/* Tablet and below */
@media (max-width: 900px) {
  .topbar {
    padding: 12px 80px 12px 16px;  /* less right padding — back-link is smaller */
    flex-wrap: wrap;
  }
  .logo-mark { width: 44px; height: 44px; }
  .brand strong { font-size: 13px; letter-spacing: .3px; }
  .brand .sub { font-size: 10px; letter-spacing: 1px; }

  .hero h1 { font-size: 24px; }
  .hero.splash h1 { font-size: 30px; }

  .back-link {
    padding: 8px 12px 8px 10px;
    font-size: 11px; letter-spacing: 1px;
  }
  /* On narrow screens, hide the "Dashboard" word — keep just the arrow */
  .back-link .back-label { display: none; }

  main { padding: 16px; }
}

/* Phone */
@media (max-width: 600px) {
  .topbar { padding: 10px 60px 10px 12px; }
  .logo-mark { width: 36px; height: 36px; }
  .brand { gap: 10px; }
  .brand strong { font-size: 12px; }
  .brand .sub { font-size: 9px; }

  .hero h1 { font-size: 20px; }
  .hero.splash h1 { font-size: 24px; }

  .back-link { top: 10px; right: 10px; padding: 7px 10px 7px 10px; }
}

/* Tabs */
.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent; border: 1px solid transparent;
  padding: 8px 16px; border-radius: var(--radius); cursor: pointer;
  color: var(--ink-soft); font: inherit; transition: all .18s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase;
}
.tab.active {
  background: var(--ink); color: #fff;
  box-shadow: 0 4px 12px rgba(31,58,95,.18);
}
.tab:hover:not(.active) { background: rgba(216,165,184,.12); color: var(--ink); }

main { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* Cards — calm paper: plain white, hairline border, whisper shadow */
.card {
  background: #ffffff;
  border: 1px solid #e8eaee;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(31,58,95,.05);
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; }
.card-header h2 { margin: 0; }

/* Forms */
input[type=text], input[type=date], input[type=email], input[type=password],
input:not([type]), select, textarea {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 9px 12px;
  border: 1px solid rgba(106,175,168,.45);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.82);
  color: var(--ink);
  transition: all .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--blue-deep); outline-offset: 1px;
  border-color: var(--blue-deep); background: #fff;
}
textarea { width: 100%; resize: vertical; }

/* Form labels — uniform UPPERCASE Montserrat across all apps.
   Covers: <label.field>, <label> inside .row, <label> inside .field-grid */
label.field,
.row > label,
.field > label,
.field-grid > label,
.field-grid label > span:first-child {
  display: flex; flex-direction: column; gap: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink-soft);
}

/* Buttons */
button, .btn {
  font: inherit; padding: 9px 16px; border-radius: var(--radius);
  border: 1px solid #e1e6ec;
  background: #ffffff; color: var(--ink);
  cursor: pointer; text-decoration: none; display: inline-block;
  transition: all .18s ease;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase;
}
button:hover, .btn:hover {
  background: rgba(255,253,249,.95); transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(31,58,95,.08);
}
.btn.primary, button.primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(31,58,95,.18);
}
.btn.primary:hover, button.primary:hover { background: #16294a; box-shadow: 0 6px 16px rgba(31,58,95,.28); }
.btn.secondary, button.secondary {
  background: var(--pink); border-color: var(--pink); color: #fff;
  box-shadow: 0 4px 12px rgba(216,165,184,.28);
}
.btn.secondary:hover, button.secondary:hover {
  background: var(--pink-deep); border-color: var(--pink-deep);
  box-shadow: 0 6px 16px rgba(184,127,151,.36);
}
.btn.ghost, button.ghost { background: transparent; border-color: rgba(31,58,95,.12); }
.btn.ghost:hover, button.ghost:hover { background: rgba(216,165,184,.10); }
button.small { padding: 5px 12px; font-size: 12px; }

/* Numbered step badge — e.g. <span class="step-badge">1</span> Quote details */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(31,58,95,.22);
  flex-shrink: 0;
}
.step-row { display: flex; align-items: center; gap: 12px; }
.step-row h2, .step-row h3 { margin: 0; }

/* Segmented toggle — e.g. Hospital ⟷ In-clinic */
.toggle {
  display: inline-flex; padding: 4px; gap: 2px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(31,58,95,.10);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}
.toggle-btn {
  font: inherit; font-family: 'Montserrat', sans-serif; font-weight: 600;
  padding: 7px 18px; border-radius: var(--radius);
  border: 1px solid transparent; background: transparent;
  color: var(--ink-soft); cursor: pointer;
  transition: all .18s ease;
}
.toggle-btn:hover:not(.active) { color: var(--ink); }
.toggle-btn.active {
  background: var(--ink); color: #fff;
  box-shadow: 0 3px 10px rgba(31,58,95,.22);
}

/* Status badge */
.badge {
  font-size: 10px; padding: 2px 8px; border-radius: var(--radius);
  text-transform: uppercase; letter-spacing: .5px; font-weight: 600;
  background: var(--pink); color: #fff;
}
.badge.good { background: var(--good); }
.badge.muted { background: var(--muted); }

/* ============================================================
   Glass pills — used for status indicators, info chips, tags
   (e.g. "Cloud · AU ✓", "Hospital", "Connected")
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.pill.pink   { background: var(--pink-bg);  color: var(--pink-deep);  border-color: rgba(216,165,184,.40); }
.pill.teal   { background: var(--teal-bg);  color: var(--teal-deep);  border-color: rgba(106,175,168,.40); }
.pill.navy   { background: var(--ink);      color: #fff;              border-color: var(--ink); }
.pill.good   { background: #e1f0e6;         color: var(--good);       border-color: rgba(45,138,95,.30); }
.pill.danger { background: #fce6e7;         color: var(--danger);     border-color: rgba(183,72,74,.30); }
.pill.muted  { background: rgba(31,58,95,.06); color: var(--ink-soft); border-color: rgba(31,58,95,.10); }

/* ============================================================
   Hero tabs — row of nav/action pills under the page hero.
   Matches PIB / Quote Builder pattern.
   ============================================================ */
.hero-tabs {
  display: inline-flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 8px; margin-top: 6px;
}
.hero-tabs .tab,
.hero-tabs button {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink); cursor: pointer;
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  transition: all .18s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-tabs .tab:hover,
.hero-tabs button:hover {
  background: #fff; transform: translateY(-1px);
  border-color: rgba(216,165,184,.50);
  box-shadow: 0 4px 12px rgba(31,58,95,.08);
}
.hero-tabs .tab.active,
.hero-tabs button.active {
  background: var(--ink); color: #fff; border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(31,58,95,.18);
}
.hero-tabs .tab.ghost,
.hero-tabs button.ghost {
  background: transparent; color: var(--ink-soft); font-weight: 600;
}

/* ============================================================
   Modal / dialog — pale pink surface, navy header, glass backdrop
   Use on <dialog class="modal"> or .modal div
   ============================================================ */
.modal {
  background: #fbf3f5;
  border: 1px solid rgba(216,165,184,.30);
  border-radius: var(--radius);
  padding: 0;
  box-shadow:
    0 20px 60px rgba(31,58,95,.25),
    0 8px 20px rgba(31,58,95,.12);
  color: var(--ink);
  max-width: 90vw; max-height: 90vh;
}
.modal::backdrop {
  background: rgba(31,58,95,.40);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal-body { padding: 22px; max-height: 90vh; overflow-y: auto; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(216,165,184,.30);
  margin-bottom: 16px;
}
.modal-header h2, .modal-header h3 { margin: 0; }

/* ============================================================
   Step / card heading row — number badge + title + optional sub
   Use:  <div class="step-heading">
           <span class="step-badge">1</span>
           <div><h2>Title</h2><p class="step-sub">…</p></div>
         </div>
   ============================================================ */
.step-heading {
  display: flex; align-items: center; gap: 12px;
}
.step-heading .step-sub {
  margin: 2px 0 0; font-size: 12px; color: var(--ink-soft);
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.section-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink); margin: 0;
}

/* ============================================================
   Inline status helpers
   ============================================================ */
.divider {
  height: 1px; background: rgba(31,58,95,.08);
  margin: 16px 0; border: 0;
}
.helper-text {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 4px; font-weight: 500;
}
.helper-text.error { color: var(--danger); }
.helper-text.good  { color: var(--good); }

/* ============================================================
   Shared cross-app components — consolidated from inline copies
   that were duplicated across Dashboard, Quote Builder and PIB.
   Canonical values agreed June 2026. Change once here.
   ============================================================ */

/* Save pill — the green "Save to patient file" button.
   Canonical = the Quote Builder treatment: sentence case, weight
   600, navy drop shadow. The element controls its own show/hide
   via an inline `display` (kept inline), so this class deliberately
   does NOT set `display`. */
.clinic-save-pill {
  align-items: center;
  gap: 8px;
  background: #9bd3b3; /* flat — no gradients (Amy 2026-07-06) */
  color: #1f3a5f;
  border: 1px solid rgba(31,58,95,0.18);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(31,58,95,.12), 0 1px 2px rgba(31,58,95,.06);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Confirm button — the "Yes, save" button inside the confirm modal. */
.clinic-confirm-btn {
  background: #9bd3b3; /* flat — no gradients (Amy 2026-07-06) */
  border: 1px solid rgba(31,58,95,.18);
  color: #1f3a5f;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* Notes banner — amber "Notes on this patient" sticky banner. */
.clinic-notes-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 12px;
  padding: 12px 16px;
  background: #fdf4dd; /* flat — no gradients (Amy 2026-07-06) */
  border: 1px solid #e6c585;
  border-left: 4px solid #c89c3f;
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  color: #6b4a10;
  box-shadow: 0 2px 8px rgba(200,156,63,.15);
}

/* Frosted confirm modal — full-screen overlay + glass card.
   Canonical font-family is Montserrat (was `inherit` in QB). */
.clinic-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,58,95,.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: 'Montserrat', sans-serif;
}
.clinic-modal-card {
  background: #ffffff; /* flat — no gradients (Amy 2026-07-06) */
  border: 1px solid rgba(31,58,95,.14);
  border-radius: 18px;
  box-shadow: 0 14px 50px rgba(31,58,95,.22), 0 4px 12px rgba(31,58,95,.10);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 80vh;
  overflow: auto;
  padding: 22px 24px;
  color: #1f3a5f;
}