/* BHC Health Update - plain Bootstrap 5 refined: light, calm, senior-friendly.
   Sections: 1 tokens - 2 base - 3 focus + skip link - 4 navbar - 5 page head + hero - 6 cards
   - 7 buttons + forms - 8 condition pills - 9 alerts - 10 fee reminder - 11 staff home tiles
   - 12 tables - 13 badges, chips, diff - 14 pagination + empty states - 15 footer - 16 print */

/* ---- 1. tokens ------------------------------------------------------------------------- */
:root {
  --hp-bg: #f4f6fb;
  --hp-surface: #ffffff;
  --hp-brand: #0b3d5c;          /* navbar navy (also meta theme-color) */
  --hp-brand-2: #0f527a;
  --hp-primary: #0b5ed7;        /* 5.1:1 on white */
  --hp-primary-dark: #0a4fb5;
  --hp-primary-soft: #e8f1ff;
  --hp-text: #1c2430;
  --hp-muted: #4a5565;          /* 7.4:1 on white */
  --hp-line: #d9dfea;
  --hp-danger: #b4001f;
  --hp-radius: 1rem;
  --hp-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .06);
  --bs-link-color: var(--hp-primary-dark);
  --bs-link-color-rgb: 10, 79, 181;
  --bs-link-hover-color: #083d8c;
  --bs-link-hover-color-rgb: 8, 61, 140;
}

/* ---- 2. base --------------------------------------------------------------------------- */
html { font-size: 106.25%; } /* 17px base: large for seniors, calmer than before */
body.health-body { font-size: 1.0625rem; line-height: 1.6; color: var(--hp-text); background: var(--hp-bg);
  min-height: 100vh; display: flex; flex-direction: column; }
.health-main { flex: 1 0 auto; }
.health-public .health-main { max-width: 920px; }
main:focus { outline: none; }
a { text-underline-offset: .18em; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { color: #142033; letter-spacing: -.01em; }
.health-hint { font-size: .98rem; color: var(--hp-muted); }
.text-muted, .text-body-secondary { color: var(--hp-muted) !important; }
code { color: #8a1538; }

/* ---- 3. focus + skip link -------------------------------------------------------------- */
:focus-visible, .btn:focus-visible, .form-control:focus, .form-select:focus, .page-link:focus-visible,
.nav-link:focus-visible, .form-check-input:focus-visible {
  /* two-tone ring: dark inner + amber outer = >=3:1 on both white and dark backgrounds */
  outline: 3px solid #ffbf00 !important; outline-offset: 2px; box-shadow: 0 0 0 2px #000 !important;
}
.skip-link { position: absolute; left: -999px; top: 0; background: #ffbf00; color: #000; padding: .75rem 1rem;
  z-index: 2000; font-weight: 700; border-radius: 0 0 .5rem 0; }
.skip-link:focus { left: 0; }

/* ---- 4. header: brand bar (+ staff sub-navigation) ------------------------------------ */
.health-header { color: #fff; box-shadow: 0 2px 10px rgba(11, 61, 92, .22); position: relative; z-index: 10; }
.health-topbar { background: linear-gradient(90deg, var(--hp-brand), var(--hp-brand-2)); }
.health-brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 700; font-size: 1.2rem; color: #fff;
  text-decoration: none; min-height: 48px; }
.health-brand:hover, .health-brand:focus { color: #fff; }
.health-brand-logo { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; object-fit: contain; }
.health-nav-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
.health-lang-list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .2rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); }
.health-lang-list a { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 40px;
  padding: .3rem .8rem; border-radius: 999px; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; }
.health-lang-list li { list-style: none; }
.health-lang-list a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.health-lang-list a[aria-current="true"] { background: #fff; color: var(--hp-brand); }
.health-user-chip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .25rem .25rem .25rem .85rem;
  border-radius: 999px; background: rgba(255, 255, 255, .1); }
.health-user-name { color: #fff; font-weight: 600; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-role-badge { background: #dbe9ff; color: var(--hp-brand); font-weight: 700; }
.health-logout { border-radius: 999px; min-height: 40px; font-weight: 600; }
.health-nav-form { margin: 0; }
/* staff sub-navigation: white bar, pills; scrolls sideways on small screens (no JavaScript) */
.health-subnav { background: #fff; border-bottom: 1px solid var(--hp-line); }
.health-staff-nav { flex-wrap: nowrap; overflow-x: auto; gap: .25rem; padding: .5rem 0; scrollbar-width: thin; }
.health-staff-nav .nav-item { flex: none; }
.health-staff-nav .nav-link { color: #273246; font-weight: 600; border-radius: 999px; padding: .5rem .95rem; min-height: 44px;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; background: transparent; border: 0; }
.health-staff-nav .nav-link .bi { color: var(--hp-primary); }
.health-staff-nav .nav-link:hover { background: var(--hp-primary-soft); color: #0a3a86; }
.health-staff-nav .nav-link.active { background: var(--hp-primary); color: #fff; }
.health-staff-nav .nav-link.active .bi { color: #fff; }
.health-nav-count { font-size: .8rem; }
@media (min-width: 992px) { .health-staff-nav { flex-wrap: wrap; overflow: visible; } }
@media (max-width: 575.98px) {
  .health-user-name { max-width: 10rem; } .health-brand span { font-size: 1.05rem; }
  .health-staff .health-nav-end { width: 100%; justify-content: space-between; }
  .health-user-chip { background: none; padding: 0; }
}

/* ---- 5. page head + hero --------------------------------------------------------------- */
.health-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); font-weight: 700; margin: 0 0 .35rem; }
.health-lead { color: var(--hp-muted); font-size: 1.15rem; }
.health-hero { padding: 1rem 0 .5rem; }
.health-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem;
  border-radius: 50%; background: var(--hp-primary-soft); color: var(--hp-primary); font-size: 2.2rem; margin-bottom: 1rem; }
.health-head-icon { color: var(--hp-primary); }
.health-subhead { color: #142033; }

/* ---- 6. cards -------------------------------------------------------------------------- */
.health-main .card { border: 0; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); background: var(--hp-surface); }
.health-main .card-header { background: transparent; border-bottom: 1px solid var(--hp-line); padding: 1.1rem 1.25rem;
  border-radius: var(--hp-radius) var(--hp-radius) 0 0; font-weight: 700; }
.health-main .card-body { padding: 1.25rem; }
@media (min-width: 768px) { .health-main .card-body { padding: 1.5rem; } }
.health-main .card.health-card-danger { border-left: 5px solid #dc3545; }
.health-main .card.border-danger { border-left: 5px solid #dc3545 !important; }
.health-main .card.health-card-soft { background: #eaf0f8; box-shadow: none; }
.health-ic-card .form-control-lg { font-size: 1.5rem; letter-spacing: .1em; text-align: center; min-height: 64px; }
.health-avatar { width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--hp-primary-soft); color: var(--hp-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.health-dl dt { font-weight: 600; color: var(--hp-muted); }
.health-dl dd { margin-bottom: .6rem; overflow-wrap: anywhere; }

/* ---- 7. buttons + forms ---------------------------------------------------------------- */
.btn { min-height: 48px; font-size: 1.0625rem; padding: .55rem 1.25rem; border-radius: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-lg { min-height: 56px; font-size: 1.15rem; padding: .7rem 1.6rem; border-radius: .9rem; }
.btn-sm { min-height: 40px; font-size: .95rem; padding: .3rem .8rem; }
.btn-primary { --bs-btn-bg: var(--hp-primary); --bs-btn-border-color: var(--hp-primary);
  --bs-btn-hover-bg: var(--hp-primary-dark); --bs-btn-hover-border-color: var(--hp-primary-dark);
  --bs-btn-active-bg: #083d8c; --bs-btn-active-border-color: #083d8c;
  --bs-btn-disabled-bg: var(--hp-primary); --bs-btn-disabled-border-color: var(--hp-primary);
  box-shadow: 0 2px 6px rgba(11, 94, 215, .25); }
.btn-outline-primary { --bs-btn-color: var(--hp-primary-dark); --bs-btn-border-color: var(--hp-primary);
  --bs-btn-hover-bg: var(--hp-primary); --bs-btn-hover-border-color: var(--hp-primary);
  --bs-btn-active-bg: var(--hp-primary-dark); --bs-btn-active-border-color: var(--hp-primary-dark); background: #fff; }
.btn-outline-secondary, .btn-outline-dark, .btn-outline-danger { background: #fff; }
.form-control, .form-select { min-height: 52px; font-size: 1.0625rem; border-radius: .75rem; border: 1.5px solid #c3ccda; }
.form-control:focus, .form-select:focus { border-color: var(--hp-primary); }
.input-group > .input-group-text { border-radius: .75rem 0 0 .75rem; border: 1.5px solid #c3ccda; background: #f1f4f9; }
.input-group > .form-control { border-radius: 0 .75rem .75rem 0; }
.form-label { font-weight: 600; }
.form-check-input:checked { background-color: var(--hp-primary); border-color: var(--hp-primary); }
.health-form textarea.form-control { min-height: 7rem; }
.health-check { padding-left: 2.4rem; min-height: 2.75rem; display: flex; align-items: center; }
.health-check .form-check-input { width: 1.6rem; height: 1.6rem; margin-left: -2.4rem; margin-top: 0; flex-shrink: 0; }
.health-check .form-check-label { padding-left: .35rem; cursor: pointer; }
.health-consent-box { background: var(--hp-primary-soft); border-radius: .9rem; padding: .9rem 1rem .9rem 3.4rem; }
.health-consent-box .form-check-input { margin-left: -2.4rem; border: 2px solid var(--hp-primary); }
.health-person .card-header { background: linear-gradient(180deg, #f7f9fd, #fff); }

/* ---- 8. condition pills (checkbox stays visible: works without :has()) ------------------ */
.health-conditions { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 576px) { .health-conditions { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .health-conditions { grid-template-columns: 1fr 1fr 1fr; } }
.health-option { display: flex; align-items: center; gap: .75rem; min-height: 54px; margin: 0; padding: .6rem 1rem;
  border: 2px solid var(--hp-line); border-radius: .9rem; background: #fff; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
.health-option:hover { border-color: #9fb3d1; background: #f8faff; }
.health-option .form-check-input { float: none; margin: 0; width: 1.45rem; height: 1.45rem; flex: none; cursor: pointer;
  border: 2px solid #8a97ab; }
.health-option-text { line-height: 1.3; }
.health-option input:checked + .health-option-text { font-weight: 700; color: #0a3a86; }
.health-option:has(input:checked) { background: var(--hp-primary-soft); border-color: var(--hp-primary); }
@media (prefers-reduced-motion: reduce) { .health-option { transition: none; } }

/* ---- 9. alerts (icon from the bundled icon font; text always present) ------------------- */
.health-main .alert { position: relative; border-radius: .9rem; border: 0; border-left: 5px solid currentColor;
  padding: 1rem 1.25rem 1rem 3.4rem; box-shadow: var(--hp-shadow); }
.health-main .alert::before { position: absolute; left: 1.15rem; top: 1rem; font-family: "bootstrap-icons"; font-size: 1.3rem;
  line-height: 1.2; content: "\f430"; }
.health-main .alert-success::before { content: "\f26a"; }
.health-main .alert-warning::before { content: "\f33a"; }
.health-main .alert-danger::before { content: "\f336"; }
.health-main .alert-info { background: #e7f3fb; color: #0b3d5c; }
.health-main .alert-success { background: #e7f5ec; color: #0d5232; }
.health-main .alert-warning { background: #fff5d6; color: #5c4400; }
.health-main .alert-danger { background: #fdecee; color: #8a0018; }
.health-main .alert ul { padding-left: 1.1rem; }

/* ---- 10. annual-fee reminder ------------------------------------------------------------
   Bold red, blinks 4 times (4.8 s, under 5 s) then stays solid (WCAG 2.2.2 / 2.3.1),
   never for reduced motion. */
.fee-reminder { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.75rem; padding: 1.15rem 1.35rem;
  background: #fff0f3; color: #8a0018; border: 2px solid #c00020; border-left-width: 8px; border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(192, 0, 32, .14);
  font-weight: 700; font-size: 1.25rem; line-height: 1.4;
  animation-name: fee-blink; animation-duration: 1.2s; animation-iteration-count: 4; animation-timing-function: ease-in-out; }
.fee-reminder p { margin: 0 0 .35rem; }
.fee-reminder .fee-reminder-title { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .02em; }
.fee-reminder-icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #c00020; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 900; }
@keyframes fee-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fee-reminder { animation: none; opacity: 1; } }

/* ---- 11. staff home tiles -------------------------------------------------------------- */
.health-staff-menu { display: grid; grid-template-columns: 1fr; gap: .9rem; margin: 0; padding: 0; }
@media (min-width: 768px) { .health-staff-menu { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .health-staff-menu { grid-template-columns: 1fr 1fr 1fr; } }
.health-tile { display: flex; align-items: center; gap: 1rem; min-height: 84px; padding: 1rem 1.25rem; border-radius: var(--hp-radius);
  background: #fff; box-shadow: var(--hp-shadow); color: var(--hp-text); text-decoration: none; font-weight: 600;
  border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; }
.health-tile:hover { border-color: var(--hp-primary); color: var(--hp-text); transform: translateY(-1px); }
.health-tile-icon { flex: none; width: 3rem; height: 3rem; border-radius: .8rem; background: var(--hp-primary-soft);
  color: var(--hp-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.45rem; }
.health-tile-label { flex: 1; }
.health-tile-go { color: #8a97ab; }
@media (prefers-reduced-motion: reduce) { .health-tile { transition: none; } .health-tile:hover { transform: none; } }

/* ---- 12. tables (staff); on phones every row becomes a card with labelled lines ---------- */
.health-main .table-responsive { background: #fff; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); margin-bottom: 1.5rem; }
.health-main .card .table-responsive { box-shadow: none; margin-bottom: 0; }
.health-table-card { overflow: hidden; }
.health-main .table { --bs-table-bg: transparent; margin-bottom: 0; }
.health-main .table > thead th { background: #eef2f8; color: #273246; font-size: .92rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; border-bottom: 1px solid var(--hp-line); padding: .85rem 1rem; white-space: nowrap; }
.health-main .table > tbody > tr > * { padding: .85rem 1rem; border-color: #e8ecf3; }
.health-table { font-size: 1rem; }
.health-table td { overflow-wrap: break-word; } /* never split words: keeps names and phone numbers readable */
.health-table td[data-label] a { overflow-wrap: normal; }
.health-table-card .table > tbody > tr:last-child > * { border-bottom: 0; }
@media (min-width: 1200px) {
  /* sticky header against the page (the scroll wrapper must not clip) */
  .health-table-card { overflow: visible; }
  .health-main .health-table-scroll { overflow: visible; }
  .health-table-scroll .table > thead th { position: sticky; top: 0; z-index: 2; }
  .health-table-scroll .table > thead th:first-child { border-top-left-radius: var(--hp-radius); }
  .health-table-scroll .table > thead th:last-child { border-top-right-radius: var(--hp-radius); }
}
@media (max-width: 767.98px) {
  .health-main .table-responsive, .health-table-card { background: transparent; box-shadow: none; }
  .health-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .health-table-stack, .health-table-stack tbody, .health-table-stack tr, .health-table-stack td,
  .health-table-stack tbody th { display: block; width: 100%; }
  .health-table-stack tr { background: #fff; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); margin-bottom: 1rem; padding: .6rem; }
  .health-table-stack td[data-label]::before { content: attr(data-label); display: block; font-weight: 700; font-size: .85rem;
    color: var(--hp-muted); text-transform: uppercase; letter-spacing: .03em; }
  .health-main .health-table-stack td, .health-main .health-table-stack tbody th { border: 0; padding: .4rem .6rem; }
}

/* ---- 13. badges, chips, review diff ---------------------------------------------------- */
.badge { font-weight: 600; letter-spacing: .01em; }
.health-status { font-size: .92rem; padding: .45em .8em; }
.health-chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.health-chip { background: #eef2f8; color: #273246; border: 1px solid #d3dbe8; font-size: .88rem; padding: .4em .75em; }
.health-unpaid { font-size: .82rem; }
.health-diff-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.health-diff-list li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 999px;
  background: #eef2f8; border: 1px solid #d3dbe8; }
.diff-added { font-weight: 700; }
.health-diff-list .diff-added { background: #e7f5ec; border-color: #198754; color: #0d5232; }
.health-diff-list .diff-removed { background: #fdecee; border-color: #dc3545; }
.diff-removed del { color: #6c0010; }
.health-diff tr.table-warning > * { --bs-table-bg-state: #fff7e0; }

/* ---- 14. pagination + empty states ----------------------------------------------------- */
.health-pagination { gap: .4rem; }
.health-pagination .page-link { border-radius: .75rem !important; min-height: 52px; display: inline-flex; align-items: center; gap: .35rem;
  color: var(--hp-primary-dark); border: 1.5px solid #c3ccda; font-size: 1.0625rem; }
.health-pagination .page-link:hover { background: var(--hp-primary-soft); }
.health-pagination .page-item.disabled .health-page-info { color: var(--hp-text); background: transparent; border-color: transparent; font-weight: 600; }
.health-empty-icon { font-size: 2.75rem; color: #7d93b5; display: block; margin-bottom: .75rem; }

/* ---- 15. footer ------------------------------------------------------------------------ */
.health-footer { flex-shrink: 0; background: #fff; color: var(--hp-muted); border-top: 1px solid var(--hp-line); font-size: .92rem; }
.health-footer-club { font-weight: 600; }

/* ---- 16. print (detail page) ----------------------------------------------------------- */
@media print {
  .health-header, .health-footer, .skip-link, .d-print-none { display: none !important; }
  body.health-body { background: #fff; }
  .health-main .card, .health-main .table-responsive { box-shadow: none; border: 1px solid #ccc; }
}

/* ---- member photo on the detail page ---- */
.health-person-head { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.health-person-info { width: 100%; }
.health-photo { display: block; width: 132px; height: 165px; object-fit: cover; border-radius: 1rem;
  border: 3px solid #fff; box-shadow: 0 .25rem .9rem rgba(15, 40, 80, .18); background: #e9eef6; }
.health-photo-empty { display: flex; align-items: center; justify-content: center; font-size: 4.2rem; color: #9aa8bd; }
@media (min-width: 576px) {
  .health-person-head { flex-direction: row; align-items: flex-start; }
  .health-photo-wrap { flex: 0 0 auto; }
  .health-person-info { flex: 1 1 auto; width: auto; }
}
@media print { .health-photo { box-shadow: none; } }

/* ---- 12. details check card + fee/invoice card (2026-11-07) ----------------------------- */
.prof-card .prof-head { background: linear-gradient(135deg, #f4f7ff, #eef4fb); border-bottom: 1px solid rgba(0,0,0,.06); }
.prof-sub { color: var(--hp-muted, #5b6472); margin: 0 0 .5rem; }
.prof-list { margin: 0; display: grid; gap: .55rem; }
.prof-row { display: grid; grid-template-columns: minmax(7.5rem, 11rem) 1fr; gap: .25rem 1rem; padding-bottom: .55rem; border-bottom: 1px dashed rgba(0,0,0,.1); }
.prof-row dt { font-weight: 600; color: #4a5260; }
.prof-row dd { margin: 0; font-size: 1.12rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .prof-row { grid-template-columns: 1fr; } }
.fee-card { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1.75rem; padding: 1.4rem 1.5rem;
  border-radius: 1.25rem; background: linear-gradient(135deg, #fff7ed, #ffe9e0); border: 1px solid #f5b49a;
  box-shadow: 0 10px 28px rgba(200, 70, 30, .16); }
.fee-card-suspended { background: linear-gradient(135deg, #fff1f2, #ffe0e4); border-color: #f0a0ab; }
.fee-card-icon { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff7a45, #d9361a); color: #fff; font-size: 2.1rem; box-shadow: 0 6px 16px rgba(217, 54, 26, .35); }
.fee-card-title { font-size: 1.45rem; font-weight: 800; color: #8a2a0f; margin: 0 0 .35rem; }
.fee-card-text { margin: 0 0 .9rem; font-size: 1.1rem; color: #4a2a1d; }
.fee-card-hint { margin: .5rem 0 0; font-size: .95rem; color: #7a5a4c; }
@media (max-width: 575.98px) { .fee-card { flex-direction: column; text-align: center; } .fee-card-btn { width: 100%; } }

/* ---- 13. staff pages: normal size and density (2026-11-07) ------------------------------
   The big senior-friendly sizes stay on the public member pages; admin/viewer pages are normal. */
body.health-staff { font-size: .94rem; line-height: 1.5; }
.health-staff .health-lead { font-size: 1rem; }
.health-staff .health-hint { font-size: .85rem; }
.health-staff .fs-5 { font-size: 1.05rem !important; }
.health-staff .h4, .health-staff h2.card-header { font-size: 1.15rem; }
.health-staff .health-title { font-size: 1.5rem; }
.health-staff .btn-lg { --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .94rem; --bs-btn-border-radius: .5rem; }
.health-staff .form-control-lg, .health-staff .form-select-lg { min-height: 0; font-size: .94rem; padding: .375rem .75rem; letter-spacing: normal; text-align: left; }
.health-staff .pagination-lg { --bs-pagination-padding-x: .75rem; --bs-pagination-padding-y: .375rem; --bs-pagination-font-size: .94rem; }
.health-staff .health-table { font-size: .9rem; }
.health-staff .health-table > :not(caption) > * > * { padding: .5rem .6rem; }
.health-staff .health-staff-nav .nav-link { min-height: 0; padding: .4rem .8rem; font-size: .9rem; }
.health-staff .health-tile { min-height: 0; padding: .8rem 1rem; }
.health-staff .card-header { padding: .75rem 1rem; }
.health-staff .health-chip { font-size: .8rem; }
/* detail page: small photo at the start of the member card header, before the person icon */
.health-head-photo { display: flex; align-items: center; gap: .9rem; }
.health-photo-sm { width: 66px; height: 82px; border-radius: .6rem; font-size: 2.4rem; flex: none; }
.prof-sub-photo { display: flex; align-items: center; gap: .8rem; }
.prof-sub-photo .health-photo-sm { width: 72px; height: 90px; }

/* Admin list: merged Name column (rank, age, phone underneath) + column widths that fit the content (desktop/tablet only) */
@media (min-width: 768px) {
  #list-table { table-layout: fixed; width: 100%; }
  #list-table th:nth-child(1) { width: 6%; white-space: nowrap; }
  #list-table th:nth-child(2) { width: 26%; }
  #list-table th:nth-child(3) { width: 28%; }
  #list-table th:nth-child(4) { width: 14%; }
  #list-table th:nth-child(5) { width: 26%; }
  #list-table td { overflow-wrap: anywhere; }
  #list-table th:not(:first-child) { white-space: normal; overflow-wrap: anywhere; padding-left: .7rem; padding-right: .7rem; }
  #list-table td { padding-left: .7rem; padding-right: .7rem; }
}

/* Admin list: small profile photo before the name */
.health-namecell { display: flex; align-items: flex-start; gap: .65rem; }
.health-namecell-text { min-width: 0; }
.health-photo-xs { width: 44px; height: 55px; border-radius: .45rem; font-size: 1.6rem; flex: none; box-shadow: none; }