/* ═══════════════════════════════════════════════════════════════
   MedPortal — site_v2.css
   Fonts loaded in shared_base.tpl:
     IBM Plex Serif 400/500/600, IBM Plex Sans 300/400/500/600,
     IBM Plex Mono 400/500
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --c-bg:       #eef1f8;
  --c-surf:     #ffffff;
  --c-surf2:    #f5f7fb;
  --c-bd:       #d8dce8;
  --c-bd2:      #eaecf4;

  --c-ink:      #0d1526;
  --c-ink2:     #3a4454;
  --c-ink3:     #6a7585;

  --c-blue:     #1748a0;
  --c-blue2:    #133b89;
  --c-bsub:     #e8eef9;

  /* BMI bands */
  --c-norm:     #166534;  --c-norm-bg:  #f0fdf4;  --c-norm-bd:  #bbf7d0;
  --c-over:     #854d0e;  --c-over-bg:  #fffbeb;  --c-over-bd:  #fde68a;
  --c-obes:     #991b1b;  --c-obes-bg:  #fef2f2;  --c-obes-bd:  #fecaca;
  --c-low:      #374151;  --c-low-bg:   #f1f5f9;  --c-low-bd:   #cbd5e1;

  /* Typography */
  --f-serif:    'IBM Plex Serif', Georgia, serif;
  --f-sans:     'IBM Plex Sans', system-ui, sans-serif;
  --f-mono:     'IBM Plex Mono', monospace;

  /* Radii */
  --r:    6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadows */
  --sh:    0 2px 12px rgba(13,21,38,.08), 0 0 0 1px rgba(13,21,38,.05);
  --sh-sm: 0 1px 4px rgba(13,21,38,.06);
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Development banner ──────────────────────────────────────── */
.development-banner {
  background: #fef3c7;
  border-bottom: 1px solid #fde68a;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.site-header {
  background: var(--c-surf);
  border-bottom: 1px solid var(--c-bd);
  position: sticky;
  top: 0;
  z-index: 200;
}
.navbar {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 28px;
}
.navbar-brand {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--c-ink) !important;
  letter-spacing: -.01em;
  text-decoration: none;
}
.navbar-brand:hover { color: var(--c-blue) !important; }

/* ── Layout ──────────────────────────────────────────────────── */
.site-main { padding: 28px 0 72px; }
.container  { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ── Eyebrow ─────────────────────────────────────────────────── */
.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 9px;
}

/* ── Hero card (index page) ──────────────────────────────────── */
.hero-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: center;
}
.hero-copy h1 {
  font-family: var(--f-serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--c-ink);
  line-height: 1.2;
  margin-bottom: 9px;
}
.lead-text {
  font-size: 13.5px;
  color: var(--c-ink3);
  line-height: 1.7;
  max-width: 44ch;
}

/* ── BMI legend card ─────────────────────────────────────────── */
.legend-card {
  background: var(--c-surf);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--sh-sm);
}
.legend-card h2 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink3);
  margin-bottom: 13px;
}

/* BMI scale bar */
.bmi-scale-track {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 9px;
}
.bmi-seg-low  { flex: 5.5; background: #94a3b8; }
.bmi-seg-norm { flex: 6.5; background: #22c55e; }
.bmi-seg-over { flex: 5;   background: #f59e0b; }
.bmi-seg-obes { flex: 15;  background: #ef4444; }

.bmi-scale-labels { display: flex; }
.bslg { display: flex; flex-direction: column; gap: 1px; }
.bslg-low  { flex: 5.5; } .bslg-norm { flex: 6.5; }
.bslg-over { flex: 5;   } .bslg-obes { flex: 15;  }
.bmi-range { font-family: var(--f-mono); font-size: 9.5px; color: var(--c-ink3); }
.bmi-name  { font-size: 11px; font-weight: 600; }
.bn-low  { color: #475569; }
.bn-norm { color: var(--c-norm); }
.bn-over { color: var(--c-over); }
.bn-obes { color: var(--c-obes); }

/* ── Surface card ────────────────────────────────────────────── */
.surface-card {
  background: var(--c-surf);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-xl);
  box-shadow: var(--sh);
  overflow: hidden;
}

/* ── Table ───────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; }

.customer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.customer-table thead th {
  background: var(--c-surf2);
  border-bottom: 1px solid var(--c-bd);
  padding: 0;
  white-space: nowrap;
}
.sort-button {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-ink3);
  text-align: left;
  white-space: nowrap;
  transition: color 100ms;
}
.sort-button:hover { color: var(--c-ink2); }
.sort-button .sort-icon { font-size: 10px; opacity: .3; transition: opacity 100ms; }
.sort-button.asc  .sort-icon,
.sort-button.desc .sort-icon { color: var(--c-blue); opacity: 1; }

.customer-table tbody tr {
  border-bottom: 1px solid var(--c-bd2);
  cursor: pointer;
  transition: background 100ms;
}
.customer-table tbody tr:last-child { border-bottom: none; }
.customer-table tbody tr:hover      { background: var(--c-bsub); }

/* Left-border BMI color accent */
.customer-table tbody tr.bmi-normal      td:first-child { border-left: 3px solid #22c55e; padding-left: 17px; }
.customer-table tbody tr.bmi-overweight  td:first-child { border-left: 3px solid #f59e0b; padding-left: 17px; }
.customer-table tbody tr.bmi-obese       td:first-child { border-left: 3px solid #ef4444; padding-left: 17px; }

.customer-table td {
  padding: 11px 14px;
  color: var(--c-ink2);
  vertical-align: middle;
}
.customer-table td:first-child { font-weight: 500; color: var(--c-ink); }
.customer-table td.mono        { font-family: var(--f-mono); font-size: 13px; }

/* ── BMI chip (in table rows) ────────────────────────────────── */
.bmi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.bmi-chip .bmi-chip-val {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
}
.bmi-chip.bmi-normal     { background: var(--c-norm-bg); color: var(--c-norm); border: 1px solid var(--c-norm-bd); }
.bmi-chip.bmi-overweight { background: var(--c-over-bg); color: var(--c-over); border: 1px solid var(--c-over-bd); }
.bmi-chip.bmi-obese      { background: var(--c-obes-bg); color: var(--c-obes); border: 1px solid var(--c-obes-bd); }

/* ── Table footer / pagination ───────────────────────────────── */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: var(--c-surf2);
  border-top: 1px solid var(--c-bd);
}
.table-status { font-size: 12px; color: var(--c-ink3); }
.table-message {
  padding: 40px 16px;
  text-align: center;
  color: var(--c-ink3);
  font-size: 13px;
}

.pagination-controls { display: flex; gap: 4px; }
.pagination-controls button,
.pagination-controls a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  background: var(--c-surf);
  border: 1px solid var(--c-bd);
  border-radius: var(--r);
  font-family: var(--f-sans);
  font-size: 12.5px;
  color: var(--c-ink2);
  text-decoration: none;
  cursor: pointer;
  transition: all 100ms;
}
.pagination-controls button:hover:not([disabled]),
.pagination-controls a:hover {
  background: var(--c-bsub);
  border-color: var(--c-blue);
  color: var(--c-blue);
}
.pagination-controls button.active,
.pagination-controls a.active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}
.pagination-controls button[disabled] { opacity: .35; cursor: default; }

/* ── Detail page header ──────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--c-bd);
}
.detail-header h1 {
  font-family: var(--f-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--c-ink);
}
.btn.btn-outline-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--c-surf2);
  border: 1px solid var(--c-bd) !important;
  border-radius: var(--r);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink2) !important;
  text-decoration: none;
  transition: all 100ms;
}
.btn.btn-outline-secondary:hover {
  background: var(--c-bsub) !important;
  border-color: var(--c-blue) !important;
  color: var(--c-blue) !important;
}

/* ── Detail grid ─────────────────────────────────────────────── */
.detail-grid {
  padding: 24px 28px 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.detail-field {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--c-bd2);
}
/* Remove border from last row of fields (7th and beyond) */
.detail-field:nth-child(n+7) { border-bottom: none; }
.detail-spacer { padding: 14px 0; }

.field-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink3);
  margin-bottom: 5px;
}
.field-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
}

/* ── BMI gauge (detail page) ─────────────────────────────────── */
.bmi-section {
  grid-column: 1 / -1;
  padding: 26px 0 4px;
  border-top: 1px solid var(--c-bd2);
  margin-top: 2px;
}
.bmi-hdr {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.bmi-hdr-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-ink3);
  align-self: center;
}
.bmi-num {
  font-family: var(--f-serif);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--c-ink);
  line-height: 1;
}
.bmi-badge {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  align-self: center;
}
.bmi-badge.bmi-normal     { background: var(--c-norm-bg); color: var(--c-norm); border: 1px solid var(--c-norm-bd); }
.bmi-badge.bmi-overweight { background: var(--c-over-bg); color: var(--c-over); border: 1px solid var(--c-over-bd); }
.bmi-badge.bmi-obese      { background: var(--c-obes-bg); color: var(--c-obes); border: 1px solid var(--c-obes-bd); }

.bmi-gauge { position: relative; padding-bottom: 42px; }
.gauge-bar-wrap { position: relative; overflow: visible; }

.gauge-track {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
}
.gseg-low  { flex: 5.5; background: #94a3b8; }
.gseg-norm { flex: 6.5; background: #22c55e; }
.gseg-over { flex: 5;   background: #f59e0b; }
.gseg-obes { flex: 15;  background: #ef4444; }

/* Pointer / needle */
.gauge-ptr-layer {
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 14px;
  overflow: visible;
  pointer-events: none;
}
.gauge-ptr {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ptr-head {
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #eab308;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
}
.ptr-stem { width: 4px; height: 14px; background: var(--c-ink); }

/* Tick marks */
.gauge-ticks { position: relative; height: 22px; margin-top: 4px; }
.gtick {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gtick-mark { width: 1px; height: 5px; background: var(--c-bd); }
.gtick-val  { font-family: var(--f-mono); font-size: 10px; color: var(--c-ink3); }

/* Band labels */
.gauge-bands { display: flex; margin-top: 5px; }
.gband       { font-size: 11px; font-weight: 500; }
.gband-low   { flex: 5.5; color: #64748b; }
.gband-norm  { flex: 6.5; color: var(--c-norm); }
.gband-over  { flex: 5;   color: var(--c-over); }
.gband-obes  { flex: 15;  color: var(--c-obes); }