/* Elderly-friendly baseline, loaded last on every page.
   Targets (from the audit): readable text, 44 px tap targets, enough contrast. */
html { font-size: 112.5%; }                       /* 18 px base; every rem size grows with it */
body { font-size: 1rem; line-height: 1.55; }
button, input[type="submit"], input[type="button"], select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
textarea, .btn, a[class*="btn"], a[class*="-link"], a.ud-link, .form-control, .form-select {
  min-height: 44px;
}
a[class*="btn"], a.ud-link, a[class*="-link"] { display: inline-flex; align-items: center; }
.form-check-input { width: 1.4em; height: 1.4em; }
/* plain text links in forms/footers: bigger hit area without moving the layout */
form a:not([class]), .auth-links a, .login-links a, p a:not([class]) { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
label, .form-label { font-size: 1rem; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
/* Typing fields use the system green instead of the blue ring (the field border is green too) */
input:focus-visible, textarea:focus-visible, select:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid #157347; outline-offset: 2px; }

/* Phone tables: add class "table-cards" to a <table> and every row becomes a
   card (cells labelled from the column headings by a11y.js) instead of columns
   hiding off the right edge. */
@media (max-width: 640px) {
  table.table-cards, table.table-cards tbody, table.table-cards tr, table.table-cards td { display: block; width: 100%; }
  table.table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* hidden, still read by screen readers */
  table.table-cards tr { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; margin: 0 0 12px; padding: 4px 14px; }
  table.table-cards td { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f3f4f6; text-align: right; overflow-wrap: anywhere; }
  table.table-cards td:last-child { border-bottom: none; }
  table.table-cards td::before { content: attr(data-label); flex: 0 0 36%; font-weight: 700; color: #4b5563; text-align: left; }
}

/* Tap targets and text sizes found by the QA check (360 px phones) */
[class$="-hamburger"] { min-width: 44px; min-height: 44px; }
[class*="-pag-btns"] button, [class*="-pag-btns"] a, .pg-active { min-width: 44px; min-height: 44px; }
.btn-view-rpt, .btn-del-rpt { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/* vaccine / supplement tick boxes: bigger box and the whole row is the tap area */
.vax-item, .supp-item, .vaccine-check, .supp-check { min-height: 44px; align-items: center; }
.vax-item input[type=checkbox], .supp-item input[type=checkbox],
.vaccine-check input[type=checkbox], .supp-check input[type=checkbox] { width: 28px; height: 28px; }
.vax-item label, .supp-item label, .vaccine-check label, .supp-check label { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex: 1; }
.bhw-nav-item span, .entl-tl, .val-chip, .brand-sub { font-size: max(14px, .78rem); }

/* QA-016 tap targets (44 px) - the whole row of a tick-box list is the tap area (an invisible layer of the label covers it) */
.vax-item, .supp-item, .vaccine-check, .supp-check { position: relative; }
.vax-item label::after, .supp-item label::after, .vaccine-check label::after, .supp-check label::after { content: ""; position: absolute; inset: 0; }
.itype-cb { width: 28px !important; height: 28px !important; flex-shrink: 0; }
.iv-del-btn, .pf-edit-btn, .ch-home, .ch-back, .viewer-btn, .btn-close { min-width: 44px; min-height: 44px; }
.ch-home, .ch-back { display: inline-flex; align-items: center; justify-content: center; }
.alert .btn-close { padding: 0; background-position: center; }
.alert a:not(.btn) { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* small links / buttons inside table cells and filter bars */
td > a[style*="inline-flex"], td > a.btn-view-sm, a.btn-view-sm, a.filter-btn, button.filter-btn { min-height: 44px; min-width: 44px; justify-content: center; }
button, input[type="submit"], input[type="button"] { min-width: 44px; }
a[style*="inline-flex"] { min-height: 44px !important; }
.db-chip, a.btn-view { min-height: 44px !important; }
/* LGU Child Records filter row: on a phone the search box was squeezed to 0 px wide, so let the row wrap */
@media (max-width: 640px) {
  form > .d-flex.flex-nowrap { flex-wrap: wrap !important; }
  form > .d-flex.flex-nowrap > .lgu-search-wrap { flex: 1 1 100% !important; }
  form > .d-flex.flex-nowrap > select.form-select { flex: 1 1 130px !important; min-width: 120px !important; }
}

/* LGU wide tables (Alerts, Health Records, Users, Barangay Masterlist, Audit, Reports): on a 1366 px laptop they are wider than
   their box and the View / Reset PW / Action column sat off-screen. Pin the last column to the right edge while the table scrolls. */
@media (min-width: 641px) {
  .alert-table th:last-child, .alert-table td:last-child,
  .hr-table th:last-child, .hr-table td:last-child,
  .usr-table th:last-child, .usr-table td:last-child,
  .bgy-table th:last-child, .bgy-table td:last-child {
    position: sticky; right: 0; background: #fff; box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .25); z-index: 1;
  }
  .alert-table th:last-child, .hr-table th:last-child, .usr-table th:last-child, .bgy-table th:last-child { background: #f8fafc; }
}

/* Browser date picker: the pop-up calendar is drawn by the browser, so only its accent colour can follow the theme. */
input[type="date"], input[type="month"], input[type="datetime-local"] { accent-color: #157347; color-scheme: light; }