/* Vaccine Campaign Planner — scoped styles.
   Kept in a static file (not inline) and layered on top of the site's existing
   Bootstrap 5 + brand tokens. No second CSS framework is introduced. */

:root {
  --vcp-primary: #0D5BB8;
  --vcp-primary-dark: #0a498f;
  --vcp-navy: #111827;
  --vcp-ink: #0f2740;
  --vcp-muted: #64748b;
  --vcp-line: #e6ebf1;
  --vcp-soft: #f6f9fc;
}

/* ── Intro band (landing) ─────────────────────────────────── */
.vcp-intro {
  background: linear-gradient(125deg, #111827 0%, #0D5BB8 100%);
  color: #fff;
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
}
.vcp-intro:after {
  content: '';
  position: absolute;
  right: -70px; top: -70px;
  width: 220px; height: 220px;
  background: rgba(255, 255, 255, .07);
  border-radius: 50%;
}
.vcp-intro h2 { color: #fff; }
.vcp-strapline { font-size: 1.02rem; opacity: .92; }

.vcp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 12px;
  font-size: .75rem; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff;
}

/* ── Accents & buttons ────────────────────────────────────── */
.vcp-accent { color: var(--vcp-primary) !important; }
.vcp-bar { background-color: var(--vcp-primary) !important; }

.vcp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--vcp-primary); color: #fff; border: 1px solid var(--vcp-primary);
  border-radius: 9px; padding: 8px 18px; font-weight: 700;
  transition: background .15s, transform .05s;
}
.vcp-btn:hover { background: var(--vcp-primary-dark); border-color: var(--vcp-primary-dark); color: #fff; }
.vcp-btn:active { transform: translateY(1px); }
.vcp-btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--vcp-primary); border: 1px solid #cfdcea;
  border-radius: 9px; padding: 6px 14px; font-weight: 700; transition: all .15s;
}
.vcp-btn-outline:hover { background: var(--vcp-primary); color: #fff; border-color: var(--vcp-primary); }

/* ── Panels & section headers ─────────────────────────────── */
.vcp-panel {
  background: #fff; border: 1px solid var(--vcp-line); border-radius: 16px;
  padding: 22px; box-shadow: 0 1px 3px rgba(15, 39, 64, .04), 0 8px 24px rgba(15, 39, 64, .05);
  margin-bottom: 18px;
}
.vcp-panel--flush { padding: 0; overflow: hidden; }

.vcp-sec {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.vcp-sec .vcp-sec-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: .95rem;
  background: rgba(13, 91, 184, .09); color: var(--vcp-primary);
}
.vcp-sec h5, .vcp-sec h6 { margin: 0; line-height: 1.15; color: var(--vcp-ink); }
.vcp-sec .vcp-sec-sub { font-size: .8rem; color: var(--vcp-muted); }
.vcp-sec .vcp-sec-actions { margin-left: auto; }

/* ── KPI cards ────────────────────────────────────────────── */
.vcp-kpi {
  border: 1px solid var(--vcp-line); border-radius: 14px; padding: 16px;
  background: #fff; height: 100%; position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.vcp-kpi:hover { box-shadow: 0 8px 22px rgba(15, 39, 64, .08); transform: translateY(-1px); }
.vcp-kpi .vcp-kpi-ico {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(13, 91, 184, .09); color: var(--vcp-primary); font-size: .85rem; margin-bottom: 10px;
}
.vcp-kpi .value { font-size: 1.55rem; font-weight: 800; color: var(--vcp-ink); line-height: 1.05; letter-spacing: -.01em; }
.vcp-kpi .label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--vcp-muted); margin-top: 2px; }
.vcp-kpi .sub { font-size: .76rem; color: var(--vcp-muted); margin-top: 4px; }
.vcp-kpi--good .vcp-kpi-ico { background: rgba(22, 101, 52, .1); color: #166534; }
.vcp-kpi--warn .vcp-kpi-ico { background: rgba(180, 83, 9, .1); color: #b45309; }
.vcp-kpi--money .value { color: var(--vcp-primary); }

/* ── Campaign header card ─────────────────────────────────── */
.vcp-camp-head {
  display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--vcp-line); border-left: 5px solid var(--vcp-primary);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(15, 39, 64, .04), 0 10px 26px rgba(15, 39, 64, .06);
}
.vcp-camp-head--healthy { border-left-color: #16a34a; }
.vcp-camp-head--attention { border-left-color: #d97706; }
.vcp-camp-head--at_risk { border-left-color: #dc2626; }
.vcp-camp-head--completed { border-left-color: #4f46e5; }

.vcp-camp-main { display: flex; gap: 16px; align-items: flex-start; min-width: 280px; flex: 1 1 340px; }
.vcp-camp-icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  font-size: 1.45rem; color: #fff; background: linear-gradient(135deg, #0d3b6e, #0d5bb8);
  box-shadow: 0 6px 14px rgba(13, 91, 184, .28);
}
.vcp-camp-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vcp-camp-title h2 { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--vcp-ink); letter-spacing: -.01em; }
.vcp-camp-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; font-size: .84rem; color: var(--vcp-muted); }
.vcp-camp-meta i { margin-right: 5px; color: #94a3b8; }
.vcp-camp-progress { height: 6px; border-radius: 999px; background: #eef2f7; margin-top: 12px; max-width: 480px; overflow: hidden; }
.vcp-camp-progress-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #0d5bb8, #16a34a); }

.vcp-camp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.vcp-camp-stats { display: flex; gap: 26px; }
.vcp-camp-stats > div { text-align: center; }
.vcp-camp-stats .v { font-size: 1.35rem; font-weight: 800; color: var(--vcp-ink); line-height: 1; }
.vcp-camp-stats .l { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vcp-muted); margin-top: 3px; }

@media (max-width: 720px) {
  .vcp-camp-side { align-items: flex-start; width: 100%; }
  .vcp-camp-stats { gap: 20px; }
}

/* ── Segmented card tab rail (matches GP Appointments / NHS App) ── */
.vcp-tabs { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-bottom: 24px; }
@media (max-width: 1300px) { .vcp-tabs { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px)  { .vcp-tabs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .vcp-tabs { grid-template-columns: repeat(2, 1fr); } }
.vcp-tab {
  border: 1px solid var(--vcp-line); background: #fff; padding: 13px 8px 11px;
  font-size: 11.5px; font-weight: 700; color: var(--vcp-muted); border-radius: 12px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px;
  line-height: 1.15; text-align: center; text-decoration: none;
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
.vcp-tab i { font-size: 18px; color: #94a3b8; transition: color .12s; }
.vcp-tab:hover { border-color: #bcd0ea; box-shadow: 0 3px 10px rgba(13, 91, 184, .08); transform: translateY(-1px); color: var(--vcp-muted); }
.vcp-tab.active { background: linear-gradient(135deg, #0d3b6e, #0d5bb8); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(13, 91, 184, .28); }
.vcp-tab.active i { color: #fff; }

/* ── Status pills (RAG semantics) ─────────────────────────── */
.vcp-status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .74rem; font-weight: 700; }
.vcp-status--healthy, .vcp-status--ahead, .vcp-status--on_track, .vcp-status--target_reached { background: #dcfce7; color: #166534; }
.vcp-status--attention, .vcp-status--slightly_behind, .vcp-status--planning, .vcp-status--ready { background: #fef9c3; color: #854d0e; }
.vcp-status--at_risk, .vcp-status--significantly_behind, .vcp-status--target_unavailable, .vcp-status--paused { background: #fee2e2; color: #991b1b; }
.vcp-status--completed, .vcp-status--live { background: #e0e7ff; color: #3730a3; }
.vcp-status--draft, .vcp-status--archived { background: #f1f5f9; color: #475569; }

/* ── Alerts ───────────────────────────────────────────────── */
.vcp-alert { border-left: 4px solid #94a3b8; border-radius: 10px; padding: 12px 14px; background: var(--vcp-soft); margin-bottom: 10px; }
.vcp-alert--risk { border-left-color: #dc2626; background: #fef2f2; }
.vcp-alert--attention { border-left-color: #d97706; background: #fffbeb; }
.vcp-alert--info { border-left-color: #2563eb; background: #eff6ff; }
.vcp-alert--success { border-left-color: #16a34a; background: #f0fdf4; }
.vcp-alert .title { font-weight: 700; color: var(--vcp-ink); }
.vcp-alert .action { font-size: .82rem; color: #475569; }

/* ── Tables ───────────────────────────────────────────────── */
.vcp-table { font-size: .86rem; }
.vcp-table thead th { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--vcp-muted); border-bottom: 1px solid var(--vcp-line); white-space: nowrap; padding: 10px 12px; }
.vcp-table tbody td { vertical-align: middle; padding: 11px 12px; border-bottom: 1px solid #f1f5f9; }
.vcp-table tbody tr:last-child td { border-bottom: none; }
.vcp-table tbody tr:hover td { background: var(--vcp-soft); }
.vcp-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Empty states ─────────────────────────────────────────── */
.vcp-empty { text-align: center; padding: 40px 20px; color: var(--vcp-muted); }
.vcp-empty .vcp-empty-ico {
  width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(13, 91, 184, .08); color: var(--vcp-primary);
}
.vcp-empty h6 { color: var(--vcp-ink); font-weight: 700; }

/* ── Collapsible "add" cards ──────────────────────────────── */
.vcp-add-card { border: 1px dashed #cfdcea; border-radius: 14px; padding: 18px; background: var(--vcp-soft); }
.vcp-add-card .form-label { font-size: .74rem; color: var(--vcp-muted); font-weight: 600; margin-bottom: 3px; }

/* ── Progress ring (overview) ─────────────────────────────── */
.vcp-ring {
  --pct: 0; --sz: 128px;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  background: conic-gradient(var(--vcp-primary) calc(var(--pct) * 1%), #e6ebf1 0);
  display: grid; place-items: center; position: relative; flex: 0 0 auto;
}
.vcp-ring::before { content: ''; position: absolute; inset: 12px; background: #fff; border-radius: 50%; }
.vcp-ring .vcp-ring-inner { position: relative; text-align: center; z-index: 1; }
.vcp-ring .vcp-ring-num { font-size: 1.5rem; font-weight: 800; color: var(--vcp-ink); line-height: 1; }
.vcp-ring .vcp-ring-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--vcp-muted); }

/* ── Mini list rows (overview side panels) ────────────────── */
.vcp-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: .86rem; }
.vcp-list-row:last-child { border-bottom: none; }
.vcp-list-row .vcp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vcp-primary); flex: 0 0 auto; }

/* ── Housebound route map ─────────────────────────────────── */
.vcp-map { height: 420px; width: 100%; border-radius: 12px; border: 1px solid var(--vcp-line); background: #eef2f7; z-index: 0; }
.vcp-map .leaflet-container { font: inherit; }
.vcp-map-pin {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); color: #fff; font-weight: 800; font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3); border: 2px solid #fff;
}
.vcp-map-pin span { transform: rotate(45deg); }
.vcp-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vcp-legend .item { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--vcp-muted); }
.vcp-legend .swatch { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }

/* ── "How to use" narrative note ──────────────────────────── */
.vcp-help {
  display: flex; gap: 12px; align-items: flex-start;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px;
  padding: 13px 16px; margin-bottom: 18px; font-size: .86rem; color: #1e3a5f;
}
.vcp-help .vcp-help-ico { flex: 0 0 auto; color: var(--vcp-primary); font-size: 1rem; margin-top: 2px; }
.vcp-help strong { color: var(--vcp-ink); }
.vcp-help ol, .vcp-help ul { margin: 4px 0 0; padding-left: 18px; }
.vcp-help li { margin-bottom: 2px; }

/* ── Chart container ──────────────────────────────────────── */
.vcp-chart-wrap { position: relative; height: 280px; }
.vcp-chart-wrap--sm { height: 220px; }

.vcp-warn { color: #b45309; font-size: .82rem; }
.vcp-privacy { border: 1px solid #fde68a; border-radius: 12px; padding: 14px 16px; background: #fffbeb; font-size: .85rem; color: #78350f; }

/* ── Wizard ───────────────────────────────────────────────── */
.vcp-wizard-step { border-top: 3px solid var(--vcp-primary); }
.vcp-wizard-step h3 { display: flex; align-items: center; font-size: 1.05rem; color: var(--vcp-primary); }
.vcp-step-num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--vcp-primary); color: #fff; font-size: .8rem; font-weight: 700; margin-right: 8px;
}

/* Progress rail */
.vcp-stepper { display: flex; margin-bottom: 26px; }
.vcp-stepper .step { flex: 1; text-align: center; position: relative; font-size: .78rem; font-weight: 600; color: var(--vcp-muted); }
.vcp-stepper .step .dot {
  position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
  background: #e6ebf1; color: #64748b; display: grid; place-items: center; margin: 0 auto 8px; font-weight: 800;
  transition: background .2s, color .2s;
}
.vcp-stepper .step::before {
  content: ''; position: absolute; top: 18px; left: -50%; width: 100%; height: 3px; background: #e6ebf1; z-index: 0;
}
.vcp-stepper .step:first-child::before { display: none; }
.vcp-stepper .step.active { color: var(--vcp-ink); }
.vcp-stepper .step.active .dot { background: var(--vcp-primary); color: #fff; box-shadow: 0 0 0 4px rgba(13, 91, 184, .15); }
.vcp-stepper .step.done .dot { background: var(--vcp-primary); color: #fff; }
.vcp-stepper .step.done::before, .vcp-stepper .step.active::before { background: var(--vcp-primary); }

.vcp-review-kpi { border: 1px solid var(--vcp-line); border-radius: 12px; padding: 14px; background: var(--vcp-soft); text-align: center; height: 100%; }
.vcp-review-kpi .v { font-size: 1.5rem; font-weight: 800; color: var(--vcp-primary); line-height: 1.05; }
.vcp-review-kpi .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vcp-muted); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .vcp-kpi, .vcp-btn { transition: none; }
}
@media (max-width: 575px) {
  .vcp-panel { padding: 16px; }
}