:root {
  color-scheme: light;
  --bg:          #f0f4f8;
  --surface:     #ffffff;
  --surface-alt: #f8fafc;
  --text:        #1a202c;
  --muted:       #4a5568;
  --border:      #e2e8f0;
  --success:     #16a34a;
  --warning:     #d97706;
  --danger:      #dc2626;
  --accent:      #1d4ed8;
  --radius:      18px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(160deg, #e8edf5 0%, #f5f7fa 60%);
  color: var(--text);
}

.app-shell {
  width: min(920px, 94%);
  margin: 0 auto;
  padding: 32px 0 64px;
  display: grid;
  gap: 20px;
}

/* ── Header ─────────────────────────────────────────── */
.page-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative;
}

.header-text {
  min-width: 0;
}

.practice-brand {
  position: absolute;
  right: 32px;
  bottom: 24px;
  margin-bottom: 0;
}

.practice-logo {
  width: 150px;
  height: auto;
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sheet-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.sheet-link:hover {
  background: var(--accent);
  color: #fff;
}

#sync-status {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 4px;
}

#sync-status[data-state="syncing"] { background: #f1f5f9; color: #64748b; }
#sync-status[data-state="ok"]      { background: #f0fdf4; color: var(--success); }
#sync-status[data-state="new"]     { background: #dcfce7; color: var(--success); font-weight: 700; }
#sync-status[data-state="error"]   { background: #fef2f2; color: var(--danger); }

.eyebrow {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.page-header h1 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ── Stats bar ──────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid currentColor;
  border-radius: 14px;
  padding: 18px 20px;
}

.stat-card.stat-not-started { color: var(--danger); }
.stat-card.stat-in-progress  { color: var(--warning); }
.stat-card.stat-complete     { color: var(--success); }

.stat-count {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* ── Search ─────────────────────────────────────────── */
.search-input {
  width: 100%;
  padding: 10px 16px;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

/* ── Patient list ───────────────────────────────────── */
.patient-list { display: grid; gap: 12px; }

.patient-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.patient-card:hover { box-shadow: 0 2px 14px rgba(0,0,0,0.07); }
.patient-card.is-open { border-color: var(--accent); }

/* ── Patient summary row ────────────────────────────── */
.patient-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.12s;
}

.patient-summary:hover { background: #fafbfc; }
.patient-summary:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.patient-name {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.patient-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 10px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Chip styles */
.chip {
  display: inline-flex;
  align-items: center;
  background: #eef2ff;
  color: #3730a3;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.chip.chip-danger    { background: #fef2f2; color: var(--danger);  font-weight: 600; }
.chip.chip-warning   { background: #fffbeb; color: var(--warning); font-weight: 600; }
.chip.chip-muted     { background: #f1f5f9; color: #64748b; }
.chip.chip-countries { background: #eff6ff; color: var(--accent);  font-weight: 600; }
.chip.chip-purpose   { background: #f5f3ff; color: #7c3aed; }

.dest-label {
  font-size: 0.84rem;
  color: var(--text);
  font-weight: 500;
}

/* Progress pill badge */
.progress-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: white;
  white-space: nowrap;
}

.status-not-started { background: var(--danger); }
.status-in-progress  { background: var(--warning); }
.status-complete     { background: var(--success); }

/* Thin progress bar strip under summary */
.progress-track {
  height: 3px;
  background: #edf2f7;
}

.progress-fill {
  height: 100%;
  transition: width 0.35s ease;
}

/* ── Expandable checklist ───────────────────────────── */
.patient-details {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  padding: 20px 24px 24px;
}

.patient-details.active { display: block; }

.checklist { display: grid; gap: 10px; }

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.checklist-item:hover { background: #fafbfc; }

.checklist-item input[type="checkbox"] {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.checklist-item-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  transition: color 0.15s;
}

.checklist-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.checklist-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(29, 78, 216, 0.4);
  transition: text-decoration-color 0.15s, opacity 0.15s;
}

.checklist-link:hover {
  text-decoration-color: var(--accent);
  opacity: 0.8;
}

.checklist-item.completed .checklist-item-text {
  text-decoration: line-through;
  color: #a0aec0;
}

.checklist-item.completed .checklist-inline {
  text-decoration: line-through;
  color: #a0aec0;
}

.checklist-item.completed .approval-pill {
  text-decoration: none;
  opacity: 0.65;
}

.approval-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.approval-pill-approved {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #166534;
}

.approval-pill-pending {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.reset-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: #a0aec0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.12s;
  padding: 0;
}

.reset-btn:hover { color: var(--danger); }

/* ── Patient info sections (itinerary, purpose, concerns) ────── */
.patient-info-section {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.info-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 6px;
}

.itinerary-subtitle {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
}

.itinerary-subtitle-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.itinerary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.itinerary-table th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 18px 10px 0;
  border-bottom: 1px solid var(--border);
}

.itinerary-table td {
  padding: 11px 18px 11px 0;
  border-bottom: 1px solid var(--surface-alt);
  vertical-align: top;
}

.itinerary-table tr:last-child td { border-bottom: none; }

.itinerary-primary {
  font-weight: 700;
  color: var(--text);
}

.itinerary-secondary,
.itinerary-date {
  color: #24364d;
  font-weight: 500;
}

.itinerary-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.fact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.fact-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.fact-value {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text);
}

.travel-flags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.travel-flag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

.travel-comments-copy {
  margin-top: 8px;
  color: var(--text);
  font-size: 0.93rem;
  line-height: 1.6;
}

.fact-card-wide {
  grid-column: 1 / -1;
}

/* ── Card header row (summary + archive icon) ───────────────── */
.card-header-row {
  display: flex;
  align-items: stretch;
}

.card-header-row .patient-summary {
  flex: 1;
  min-width: 0;
}

.archive-icon-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: #cbd5e1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-radius: 0 var(--radius) 0 0;
}

.archive-icon-btn:hover {
  color: var(--muted);
  background: var(--surface-alt);
}

/* ── Archive prompt (shown when all steps complete) ─────────── */
.archive-prompt {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.archive-prompt.visible { display: flex; }

.archive-prompt-text {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--success);
}

.archive-prompt-actions {
  display: flex;
  gap: 8px;
}

.archive-prompt-confirm {
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.archive-prompt-confirm:hover { opacity: 0.85; }

.archive-prompt-dismiss {
  background: none;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.archive-prompt-dismiss:hover { background: var(--surface-alt); }

/* ── Checklist footer ───────────────────────────────────────── */
.checklist-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.archive-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  margin-left: auto;
}

.archive-btn:hover {
  background: #fef2f2;
  color: var(--danger);
}

/* ── Archived stat card ─────────────────────────────────────── */
.stat-archived {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
  font-family: inherit;
}

.stat-archived              { color: var(--success); }
.stat-archived:hover        { background: #f0fdf4; border-color: #86efac; }
.stat-archive-active        { background: #f0fdf4; border-color: #86efac !important; }
.stat-archived .stat-count  { font-size: 2rem; font-weight: 700; color: var(--success); }
.stat-archived .stat-label  { font-size: 0.78rem; font-weight: 600; color: var(--success); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* ── Archive drawer ─────────────────────────────────────────── */
#archive-drawer:not(:empty) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.archive-header {
  padding: 14px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}

.archive-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.archive-row:last-child { border-bottom: none; }

.archive-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.archive-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.archive-meta {
  font-size: 0.83rem;
  color: var(--muted);
}

.archive-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-alt);
}

.archive-status.status-complete    { background: #dcfce7; color: var(--success); }
.archive-status.status-in-progress { background: #fef9c3; color: var(--warning); }
.archive-status.status-not-started { background: #f1f5f9; color: var(--muted);   }

.unarchive-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}

.unarchive-btn:hover { background: #eff6ff; }

.archive-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.checklist-note {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 3px 8px;
  width: fit-content;
}

.concerns-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}

.no-patients {
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* ── Practice name subtitle (header) ────────────────── */
.practice-name {
  margin: 6px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}

/* ── Practice filters (staff mode) ──────────────────── */
.practice-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.practice-filter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.practice-filter:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.practice-filter.is-active[data-practice-filter="all"] {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #0f172a;
}

.practice-filter.is-active[data-practice-filter="sujansky"] {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.practice-filter.is-active[data-practice-filter="daniher"] {
  background: #ccfbf1;
  border-color: #99f6e4;
  color: #0f766e;
}

/* ── Source chips and color-coded cards (staff mode) ── */
.source-chip {
  font-weight: 700;
  font-size: 0.79rem;
  padding: 4px 10px;
  border: 1px solid currentColor;
}

.source-chip.source-sujansky {
  background: #dbeafe;
  color: #1d4ed8;
}

.source-chip.source-daniher {
  background: #ccfbf1;
  color: #0f766e;
}

.patient-card-sujansky {
  border-left: 6px solid #1d4ed8;
}

.patient-card-daniher {
  border-left: 6px solid #0f766e;
}

.patient-card-sujansky.is-open {
  border-color: #93c5fd;
  border-left-color: #1d4ed8;
}

.patient-card-daniher.is-open {
  border-color: #99f6e4;
  border-left-color: #0f766e;
}

.patient-card-sujansky .info-section-title {
  color: #1d4ed8;
}

.patient-card-daniher .info-section-title {
  color: #0f766e;
}

/* ── Practice picker ────────────────────────────────── */
.practice-picker {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.picker-container {
  text-align: center;
  max-width: 600px;
  width: 100%;
}

.picker-title {
  margin: 8px 0 4px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.picker-subtitle {
  margin: 0 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.picker-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 28px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.picker-card {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.12s;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  width: 100%;
}

.picker-card:hover {
  background: #eff6ff;
  box-shadow: 0 2px 10px rgba(29, 78, 216, 0.1);
}

/* ── Switch practice button ─────────────────────────── */
.switch-practice-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 10px;
  text-decoration: none;
}

.switch-practice-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .app-shell     { padding: 14px 0 48px; width: 96%; }
  .page-header   { padding: 20px 18px 88px; }
  .practice-brand { right: 18px; bottom: 18px; }
  .practice-logo { width: 120px; }
  .stat-count    { font-size: 1.6rem; }
  .stat-card     { padding: 14px 16px; }
  .stats-bar     { grid-template-columns: repeat(2, 1fr); }

  .patient-summary {
    grid-template-columns: 1fr;
    padding: 16px 18px;
    gap: 10px;
  }

  .patient-details { padding: 16px 18px 20px; }

  .progress-pill {
    font-size: 0.75rem;
    padding: 5px 10px;
  }
}