/* VitalGraph theme — implements the "VitalGraph Design System" Claude Design
   project (bone paper / ink / evergreen, serif display + grotesk body + mono
   data). Loaded AFTER Bootstrap in every layout: it reskins the Bootstrap
   classes the app uses, so components keep their markup. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Hanken+Grotesk:ital,wght@0,300..700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --vg-paper: #F4F2EC;
  --vg-card: #FCFBF7;
  --vg-ink: #1B1A16;
  --vg-muted: #7A766A;
  --vg-line: #E2DFD3;
  --vg-accent: #22432E;
  --vg-accent-soft: #E9EDE3;
  --vg-bronze: #9A7B4F;
  --vg-good: #4E7A5A;
  --vg-warn: #B07C33;
  --vg-crit: #A8453A;
  --vg-good-soft: #E6EDE6;
  --vg-warn-soft: #F3EAD8;
  --vg-crit-soft: #F2E1DD;
  --vg-r: 12px;
  --vg-font-d: 'Instrument Serif', serif;
  --vg-font-b: 'Hanken Grotesk', sans-serif;
  --vg-font-m: 'IBM Plex Mono', monospace;

  /* Rewire Bootstrap's own variables where possible */
  --bs-primary: #22432E;
  --bs-primary-rgb: 34, 67, 46;
  --bs-body-color: #1B1A16;
  --bs-body-bg: #F4F2EC;
  --bs-border-color: #E2DFD3;
}

/* ---- Base ---- */
html body {
  font-family: var(--vg-font-b);
  background-color: var(--vg-paper);
  color: var(--vg-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fs-4 { font-family: var(--vg-font-d); font-weight: 400 !important; letter-spacing: -0.01em; }
h5, h6 { font-family: var(--vg-font-b); font-weight: 600; }
a { color: var(--vg-accent); }
a:hover { color: var(--vg-ink); }
.text-muted, .text-secondary { color: var(--vg-muted) !important; }
.text-info { color: var(--vg-accent) !important; }
.text-success { color: var(--vg-good) !important; }
.text-warning { color: var(--vg-warn) !important; }

/* ---- Cards ---- */
.card {
  background-color: var(--vg-card);
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r) !important;
  box-shadow: none !important;
}
.card .card-header { background-color: var(--vg-paper); border-bottom-color: var(--vg-line); }
.bg-light { background-color: var(--vg-paper) !important; }

/* ---- Buttons: ink pills that tilt on hover ---- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  transition: transform .12s, background-color .12s, color .12s, border-color .12s;
}
.btn:hover { transform: rotate(-1.5deg) scale(1.02); }
.btn:active { transform: rotate(-1.5deg) scale(.97); }
.btn-link { transform: none !important; }
.btn-primary {
  background-color: var(--vg-ink);
  border-color: var(--vg-ink);
  color: var(--vg-paper);
  background-image: none !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--vg-accent) !important;
  border-color: var(--vg-accent) !important;
  color: var(--vg-paper) !important;
}
.btn-outline-primary, .btn-outline-secondary {
  color: var(--vg-ink);
  border-color: var(--vg-ink);
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  background-color: var(--vg-ink);
  border-color: var(--vg-ink);
  color: var(--vg-paper);
}
.btn-outline-danger { color: var(--vg-crit); border-color: var(--vg-crit); }
.btn-outline-danger:hover { background-color: var(--vg-crit); border-color: var(--vg-crit); color: var(--vg-paper); }
.btn-link { color: var(--vg-accent); }

/* Gradient login button from the theme kit -> ink pill */
[class^="btn-grd"], [class*=" btn-grd"] {
  background-image: none !important;
  background-color: var(--vg-ink) !important;
  color: var(--vg-paper) !important;
  border-radius: 999px !important;
}
[class^="btn-grd"]:hover, [class*=" btn-grd"]:hover { background-color: var(--vg-accent) !important; }

/* ---- FAB: rotates a quarter turn on hover ---- */
.fab {
  background: var(--vg-ink) !important;
  border: 1px solid var(--vg-ink) !important;
  color: var(--vg-paper) !important;
  transition: transform .18s, background-color .12s !important;
  box-shadow: none !important;
}
.fab:hover { transform: rotate(90deg) !important; background: var(--vg-accent) !important; }

/* ---- Forms: pill inputs, mono values ---- */
.form-control, .form-select {
  background-color: var(--vg-card);
  border-color: var(--vg-line);
  border-radius: 999px;
  color: var(--vg-ink);
}
input.form-control[type="number"], .input-group .form-control { font-family: var(--vg-font-m); }
.form-control:focus, .form-select:focus {
  border-color: var(--vg-ink);
  box-shadow: none;
}
.form-control:disabled, .form-control[readonly] { background-color: var(--vg-paper); color: var(--vg-muted); }
.input-group { border: 1px solid var(--vg-ink); border-radius: 999px; overflow: hidden; background: var(--vg-card); }
.input-group:has(.form-control:disabled) { border-color: var(--vg-line); }
.input-group .form-control { border: none; background: transparent; }
.input-group .form-select, .input-group .input-group-text, .input-group .unit-select {
  border: none;
  border-left: 1px solid var(--vg-line);
  border-radius: 0;
  background-color: var(--vg-paper);
  font-family: var(--vg-font-m);
  font-size: .85rem;
  color: var(--vg-muted);
}
.form-check-input:checked { background-color: var(--vg-accent); border-color: var(--vg-accent); }

/* ---- Badges: mono bronze tags ---- */
.badge {
  font-family: var(--vg-font-m);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  padding: .25rem .6rem;
}
.badge.bg-light { background-color: var(--vg-card) !important; color: var(--vg-bronze) !important; border: 1px solid var(--vg-line); }
.badge.bg-primary { background-color: var(--vg-accent) !important; }
.badge.bg-info-subtle { background-color: var(--vg-accent-soft) !important; color: var(--vg-accent) !important; }
.badge.bg-warning-subtle { background-color: var(--vg-warn-soft) !important; color: var(--vg-warn) !important; }

/* ---- Alerts: quiet cards with soft tints ---- */
.alert {
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r);
  background-color: var(--vg-card);
  color: var(--vg-ink);
}
.alert-warning { background-color: var(--vg-warn-soft); }
.alert-danger { background-color: var(--vg-crit-soft); }
.alert-info { background-color: var(--vg-card); }
.alert-success { background-color: var(--vg-good-soft); }
.alert .bi { color: var(--vg-bronze); }
.alert-danger .bi { color: var(--vg-crit); }

/* ---- Tabs: bronze indices, active goes serif italic ---- */
.nav-tabs { border-bottom: 1px solid var(--vg-line) !important; }
.nav-tabs .nav-link { color: var(--vg-muted); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--vg-ink) !important; background: none; }
.nav-tabs .nav-link.active {
  color: var(--vg-accent) !important;
  border-bottom: 2px solid var(--vg-accent) !important;
  font-family: var(--vg-font-d);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  background-color: transparent !important;
}
.tab-index {
  font-family: var(--vg-font-m);
  font-size: .62rem;
  color: var(--vg-bronze);
  margin-right: 6px;
}

/* ---- Language switch: pill toggle ---- */
.language-switcher { border: 1px solid var(--vg-ink); border-radius: 999px; overflow: hidden; }
.language-switcher .btn {
  border: none !important;
  border-radius: 999px !important;
  font-size: .82rem;
  background: transparent;
  color: var(--vg-muted);
  transform: none !important;
}
.language-switcher .btn-primary { background: var(--vg-ink) !important; color: var(--vg-paper) !important; }

/* ---- Lists / history rows ---- */
.list-group { border-radius: var(--vg-r) !important; border: 1px solid var(--vg-line); overflow: hidden; }
.list-group-item { background-color: var(--vg-card); border-color: var(--vg-line); color: var(--vg-ink); }
.list-group-item-action:hover { background-color: var(--vg-paper); }
.history-row .history-date { font-family: var(--vg-font-m); font-size: .82rem; font-weight: 500; }
.history-row .bi-chevron-right { transition: transform .15s, color .15s; }
.history-row:hover .bi-chevron-right { transform: translateX(4px); color: var(--vg-accent); }
.month-header {
  font-family: var(--vg-font-m);
  font-size: .66rem !important;
  letter-spacing: .18em !important;
  color: var(--vg-muted) !important;
}
.count-mono { font-family: var(--vg-font-m); font-size: .72rem; color: var(--vg-bronze); }

/* ---- Value & goal tiles: serif values on paper ---- */
.latest-value, .goal-tile, .measurement-item {
  background-color: var(--vg-paper) !important;
  border: 1px solid var(--vg-line);
  border-radius: var(--vg-r) !important;
}
.latest-value .fs-5, .measurement-item .fs-4, .current-value {
  font-family: var(--vg-font-d);
  font-weight: 400 !important;
}
.latest-value small, .goal-tile small, .measurement-item label {
  font-family: var(--vg-font-m);
  font-size: .64rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- Health score: evergreen conic ring ---- */
.score-ring {
  width: 128px; height: 128px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto; flex-shrink: 0;
}
.score-ring-inner {
  width: 112px; height: 112px; border-radius: 50%;
  background: var(--vg-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-ring .score-number { font-family: var(--vg-font-d); font-size: 2.9rem; font-weight: 400; line-height: 1; }
.score-ring .score-label {
  font-family: var(--vg-font-m); font-size: .66rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--vg-muted);
}

/* ---- Report sections ---- */
.conclusion-section { background-color: var(--vg-paper) !important; border-left: 4px solid var(--vg-accent) !important; }
.toelichting-section { background-color: var(--vg-accent-soft) !important; border-left: 4px solid var(--vg-accent) !important; }

/* ---- Dashboard header ---- */
.dashboard-header { background-color: var(--vg-card) !important; border-bottom-color: var(--vg-line) !important; box-shadow: none !important; }
.dashboard-header h2 { font-family: var(--vg-font-d); }

/* ---- Misc ---- */
.spinner-border { color: var(--vg-accent); }
.btn .spinner-border { color: inherit; }
.border-primary { border-color: var(--vg-accent) !important; }
.border-gradient-1 { border-image: none !important; border-top-color: var(--vg-accent) !important; }
.previous-value-text, .form-text, small.form-text { color: var(--vg-muted) !important; }
.trend-chart-container { background: var(--vg-card); }
code { font-family: var(--vg-font-m); background: var(--vg-paper); border: 1px solid var(--vg-line); padding: 2px 8px; border-radius: 6px; color: var(--vg-ink); }