/* ── MD3 design tokens ─────────────────────────────────────────────────── */
:root {
  --md-primary:               #1a5fb4;
  --md-on-primary:            #ffffff;
  --md-primary-container:     #d6e3ff;
  --md-on-primary-container:  #001848;
  --md-secondary:             #178a4e;
  --md-on-secondary:          #ffffff;
  --md-error:                 #c0322b;
  --md-on-error:              #ffffff;
  --md-surface:               #f8f9fc;
  --md-surface-container:     #eef0f5;
  --md-surface-container-hi:  #e3e6ed;
  --md-on-surface:            #1a1c20;
  --md-on-surface-variant:    #44474e;
  --md-on-surface-muted:      #74777e;
  --md-outline-variant:       #c4c7ce;
  --md-outline:               #74777e;
  --md-warn-container:        #fff3e0;
  --md-on-warn-container:     #7a4200;
  --md-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);

  /* priority colours */
  --pri-direct: #c0322b; --pri-direct-bg: #fff0f0;
  --pri-1m:     #b35c00; --pri-1m-bg:     #fff7e6;
  --pri-3m:     #1a5fb4; --pri-3m-bg:     #f0f4ff;
  --pri-6m:     #178a4e; --pri-6m-bg:     #f0faf5;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.md3-root { display: flex; flex-direction: column; min-height: 100vh; }

/* AppBar */
.md3-appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; flex-shrink: 0;
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.md3-appbar-brand { display: flex; align-items: center; gap: 10px; }
.md3-appbar-logo  { font-size: 1.4rem; }
.md3-appbar-title { font-size: 1.05rem; font-weight: 600; }
.md3-appbar-sub   { font-size: .78rem; opacity: .85; }
.md3-appbar-disclaimer {
  font-size: .75rem; max-width: 340px; text-align: right;
  opacity: .9; line-height: 1.35;
}

/* Patient strip */
.patient-strip {
  display: none; align-items: center; gap: 10px;
  padding: 7px 20px; flex-shrink: 0;
  background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant);
  font-size: 12.5px; flex-wrap: wrap;
}
.patient-strip.visible { display: flex; }
.patient-strip .ps-name { font-weight: 600; color: var(--md-on-surface); }
.patient-strip .ps-meta { font-family: var(--md-mono); color: var(--md-on-surface-variant); font-size: 12px; }
.patient-strip .ps-sep  { color: var(--md-outline-variant); }

/* Content split */
.content-split {
  flex: 1; display: grid;
  grid-template-columns: 420px 1fr;
  min-height: 0; overflow: hidden;
}
@media (max-width: 960px) {
  .content-split { grid-template-columns: 1fr; overflow: auto; }
  .input-column, .schedule-column { overflow: visible; }
}

/* ── Input column ──────────────────────────────────────────────────────── */
.input-column {
  overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 14px 0; border-right: 1px solid var(--md-outline-variant);
  background: var(--md-surface);
}
.input-footer {
  display: flex; gap: 8px; position: sticky; bottom: 0; padding: 10px 0 14px;
  background: linear-gradient(to top, var(--md-surface) 70%, transparent);
}

/* ── Schedule column ───────────────────────────────────────────────────── */
.schedule-column {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--md-surface-container);
}
.schedule-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; color: var(--md-on-surface-muted);
  font-size: 13px; text-align: center; padding: 40px;
}
.schedule-empty .se-icon { font-size: 2.5rem; opacity: .3; }

/* KPI strip */
.kpi-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--md-outline-variant); gap: 1px;
  border-bottom: 1px solid var(--md-outline-variant); flex-shrink: 0;
}
.kpi-cell {
  background: var(--md-surface); padding: 10px 16px;
}
.kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--md-on-surface-muted); }
.kpi-value { font-size: 17px; font-weight: 500; font-family: var(--md-mono); color: var(--md-on-surface); margin-top: 2px; }
.kpi-sub   { font-size: 11px; color: var(--md-on-surface-muted); margin-top: 1px; }

/* Schedule area */
.schedule-area { flex: 1; overflow: auto; padding: 14px; }
.schedule-head-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.schedule-head-bar h2 { font-size: 13px; font-weight: 600; color: var(--md-on-surface); }
.schedule-head-bar p  { font-size: 11px; color: var(--md-on-surface-muted); margin-top: 1px; }

/* ── MD3 Cards ─────────────────────────────────────────────────────────── */
.md3-card {
  background: var(--md-surface); border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-md); overflow: hidden;
}
.md3-card.elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.md3-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px 0;
}
.md3-card-num {
  width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-right: 10px; margin-top: 1px;
}
.md3-card-titles { flex: 1; min-width: 0; }
.md3-card-title    { font-size: 13.5px; font-weight: 600; color: var(--md-on-surface); }
.md3-card-subtitle { font-size: 11px; color: var(--md-on-surface-muted); margin-top: 1px; }
.md3-card-body { padding: 12px 16px 14px; }

/* ── Form components ───────────────────────────────────────────────────── */
.md3-field { display: flex; flex-direction: column; gap: 3px; }
.md3-field.span2 { grid-column: span 2; }
.md3-label {
  font-size: 11px; font-weight: 500; color: var(--md-on-surface-variant);
  text-transform: uppercase; letter-spacing: .04em;
}
.md3-label-hint { font-size: 10px; color: var(--md-on-surface-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.md3-input, .md3-select, .md3-textarea {
  width: 100%; padding: 7px 10px; border: 1px solid var(--md-outline-variant);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--md-on-surface);
  background: var(--md-surface); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.md3-input:focus, .md3-select:focus, .md3-textarea:focus {
  outline: none; border-color: var(--md-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 18%, transparent);
}
.md3-textarea { resize: vertical; }
.date-input { font-family: var(--md-mono); font-size: 12.5px; cursor: pointer; }
.flatpickr-calendar { font-family: inherit; }

/* Checkbox */
.md3-check {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 4px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s;
}
.md3-check:hover { background: var(--md-surface-container); }
.md3-check input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--md-primary); cursor: pointer;
}
.md3-check-label  { font-size: 13px; color: var(--md-on-surface); line-height: 1.3; }
.md3-check-sub    { font-size: 11px; color: var(--md-on-surface-muted); }

/* Divider */
.md3-divider { border: none; border-top: 1px solid var(--md-outline-variant); }

/* Overline */
.md3-overline {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--md-on-surface-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.md3-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer; border: none; white-space: nowrap;
  transition: background .15s, box-shadow .15s, opacity .15s;
  text-decoration: none;
}
.md3-btn svg { flex-shrink: 0; }
.md3-btn-fill   { background: var(--md-primary); color: var(--md-on-primary); }
.md3-btn-fill:hover { background: color-mix(in srgb, var(--md-primary) 88%, #000); }
.md3-btn-outline { background: transparent; color: var(--md-primary); border: 1px solid var(--md-outline-variant); }
.md3-btn-outline:hover { background: var(--md-primary-container); }
.md3-btn-text   { background: transparent; color: var(--md-primary); padding: 7px 10px; }
.md3-btn-text:hover { background: var(--md-primary-container); }
.md3-btn-success { background: var(--md-secondary); color: var(--md-on-secondary); }
.md3-btn-success:hover { background: color-mix(in srgb, var(--md-secondary) 88%, #000); }
.md3-btn[disabled] { opacity: .45; pointer-events: none; }
.md3-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: none;
  cursor: pointer; background: transparent; color: var(--md-on-surface-variant);
  transition: background .15s;
}
.md3-icon-btn:hover { background: var(--md-surface-container-hi); }

/* ── Chips ─────────────────────────────────────────────────────────────── */
.md3-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}
.chip-direct { background: var(--pri-direct-bg); color: var(--pri-direct); }
.chip-1m     { background: var(--pri-1m-bg);     color: var(--pri-1m); }
.chip-3m     { background: var(--pri-3m-bg);     color: var(--pri-3m); }
.chip-6m     { background: var(--pri-6m-bg);     color: var(--pri-6m); }
.chip-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ── Schedule table ────────────────────────────────────────────────────── */
.md3-table-wrap { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.md3-table { width: 100%; border-collapse: collapse; background: var(--md-surface); font-size: 13px; }
.md3-table thead th {
  padding: 9px 12px; text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--md-on-surface-variant);
  background: var(--md-surface-container); border-bottom: 1px solid var(--md-outline-variant);
  white-space: nowrap;
}
.md3-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--md-outline-variant); vertical-align: middle; }
.md3-table .row-consult td {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--md-on-surface-muted); padding: 8px 12px 4px;
  background: var(--md-surface-container); border-bottom: none;
}
.md3-table .row-vaccine {
  cursor: pointer; transition: background .12s;
}
.md3-table .row-vaccine:hover { background: var(--md-surface-container); }
.md3-table .row-vaccine.active {
  background: color-mix(in srgb, var(--md-primary) 6%, var(--md-surface));
}
.md3-table .row-advice td {
  padding: 0; border-bottom: 1px solid var(--md-outline-variant);
  border-left: 3px solid var(--md-primary);
  background: color-mix(in srgb, var(--md-primary) 4%, var(--md-surface));
}
.advice-inner {
  padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start;
}
.advice-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.advice-body { flex: 1; min-width: 0; }
.advice-title { font-size: 12.5px; font-weight: 600; color: var(--md-on-surface); margin-bottom: 5px; }
.advice-text  { font-size: 12.5px; color: var(--md-on-surface-variant); line-height: 1.55; white-space: pre-wrap; }
.advice-refs  { font-size: 11px; color: var(--md-on-surface-muted); font-family: var(--md-mono); margin-top: 8px; }
.advice-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: var(--md-on-surface-variant); background: transparent;
  transition: transform .15s, background .15s, color .15s;
}
.chevron.open {
  transform: rotate(180deg);
  color: var(--md-primary); background: var(--md-primary-container);
}
.td-num  { font-family: var(--md-mono); font-size: 11.5px; color: var(--md-on-surface-muted); width: 36px; }
.td-when { font-family: var(--md-mono); font-size: 12px; white-space: nowrap; width: 104px; }
.td-age  { font-size: 12px; color: var(--md-on-surface-variant); white-space: nowrap; width: 90px; }
.td-vac  .vac-name { font-weight: 500; font-size: 13px; }
.td-vac  .vac-meta { font-size: 11px; color: var(--md-on-surface-muted); margin-top: 1px; }
.td-dose { font-family: var(--md-mono); font-size: 12px; color: var(--md-on-surface-variant); width: 60px; }
.td-status { width: 100px; }
.td-chevron { width: 36px; text-align: right; padding-right: 12px; }

/* ── Banner ────────────────────────────────────────────────────────────── */
.md3-banner {
  display: none; align-items: flex-start; gap: 10px;
  background: var(--md-warn-container); color: var(--md-on-warn-container);
  border-radius: var(--radius-md); padding: 12px 14px; margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--md-on-warn-container) 20%, transparent);
}
.md3-banner.visible { display: flex; }
.md3-banner-icon { flex-shrink: 0; opacity: .9; margin-top: 1px; }
.md3-banner b    { font-size: 12.5px; }
.md3-banner p    { font-size: 12px; margin-top: 3px; line-height: 1.45; opacity: .9; }

/* ── Warnings in schedule ──────────────────────────────────────────────── */
.schedule-warnings {
  background: var(--md-warn-container); border-radius: var(--radius-md);
  padding: 10px 14px; margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--md-on-warn-container) 20%, transparent);
}
.schedule-warnings ul { margin: 4px 0 0 1rem; padding: 0; font-size: 12px; color: var(--md-on-warn-container); }

/* ── Segmented control ─────────────────────────────────────────────────── */
.seg-control {
  display: inline-flex; border: 1px solid var(--md-outline-variant);
  border-radius: 999px; overflow: hidden; background: var(--md-surface);
}
.seg-control input { display: none; }
.seg-control label {
  flex: 1; padding: 6px 14px; font-size: 12.5px; font-weight: 500;
  color: var(--md-on-surface-variant); cursor: pointer;
  text-align: center; transition: background .15s, color .15s;
  border-right: 1px solid var(--md-outline-variant); user-select: none;
}
.seg-control label:last-of-type { border-right: none; }
.seg-control label:hover { background: var(--md-surface-container); }
.seg-control input:checked + label {
  background: var(--md-primary); color: var(--md-on-primary);
}

/* ── Grid helpers ──────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.grid-2 .span2 { grid-column: span 2; }
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }