/* Kidney Diet Log — Lab results view (js/views/labs.js) and the lab pieces Profile shows:
   the potassium safety banner, the latest-results summary, the kidney-function card, history. */

/* ---------- potassium safety banner (KDIGO 2024 Table 28) ---------- */
.lab-alerts:empty { display: none; }
.lab-alert {
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 8px; border: 2px solid var(--over);
  background: var(--over-tint); color: var(--text);
}
.lab-alert p { margin: 0; }
.lab-alert p + p { margin-top: 4px; }
.lab-alert-title { font-weight: 800; color: var(--over-text); }
.lab-alert.level-emergency { background: var(--over-solid); border-color: var(--over-solid); color: #fff; }
.lab-alert.level-emergency .lab-alert-title,
.lab-alert.level-emergency a, .lab-alert.level-emergency .link-btn { color: #fff; }
.lab-alert-links:empty { display: none; }

/* ---------- view head ---------- */
.labs-head { display: flex; flex-direction: column; gap: 2px; }
.labs-head p { margin: 0; }
.labs-title { font-size: 1.3rem; }
.labs-title:focus { outline: none; }
.labs-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.labs-back { align-self: flex-start; padding-left: 0; }

/* ---------- entry ---------- */
.lab-echo { margin: 10px 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lab-echo.warn { background: var(--caution-tint); color: var(--caution-text); font-weight: 600; }
.labs-review { margin-bottom: 0; }
.labs-review h2.notes-title { font-size: 1rem; }
.labs-review ul { margin: 4px 0; }
.labs-review p + p, .labs-review p + ul, .labs-review ul + p { margin-top: 6px; }

/* ---------- kidney function ---------- */
.kf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 8px; }
.kf-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.kf-label { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.kf-value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kf-unit { font-size: 0.8rem; font-weight: 500; color: var(--text-2); }
.kf-cat { font-weight: 600; }
.kf-message { margin: 0 0 6px; }

/* ---------- history ---------- */
.labs-filter { flex-direction: row; align-items: center; gap: 8px; }
.labs-filter select { width: auto; min-width: 180px; }
.labs-group + .labs-group { margin-top: 12px; }
.labs-group-title { font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.lab-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 0; flex-wrap: wrap; }
.lab-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; flex: 1; }
.lab-row-date { color: var(--text-2); font-size: 0.85rem; min-width: 7.5em; }
.lab-row-value { font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lab-row-note { flex-basis: 100%; color: var(--text-2); font-size: 0.85rem; overflow-wrap: anywhere; }
.lab-row-actions { display: flex; }
.lab-row .confirm-row { flex-basis: 100%; }

/* Import from a spreadsheet (v0.3.1) */
.lab-import-preview:empty { display: none; }
.lab-import-preview { margin-top: 12px; }
.lab-import-settings { margin: 8px 0 4px; }
.lab-import-list { margin: 8px 0; }
.lab-import-list .lab-row { justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; }
.lab-import-list input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 2px 0 0; }
.lab-import-list label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; flex: 1; min-height: var(--tap); }
.lab-import-problem .lab-row-main { opacity: 0.9; }
.lab-import-why { flex-basis: 100%; color: var(--caution-text); font-size: 0.85rem; overflow-wrap: anywhere; }
.lab-import-saved { color: var(--text-2); font-size: 0.85rem; }
/* Import from Apple Health (js/views/lab_fhir.js) and from a patient portal file (js/views/lab_ccda.js): the CSV import's table; the how-to steps
   and the list of refusals. */
.lab-fhir-steps { margin: 8px 0 12px; padding-left: 1.3em; }
.lab-fhir-steps li { margin: 0 0 4px; }
.lab-fhir-refused { margin-top: 4px; }
/* Read a lab report photo (js/views/lab_photo.js): the same table as the CSV import; a row without a date asks for one under it. */
.lab-photo-list .lab-row { flex-wrap: wrap; }
.lab-photo-date { flex: 1 1 100%; margin: 0 0 6px; padding-left: 34px; min-width: 0; }
.lab-photo-date input[type=date] { max-width: 14rem; }
/* ... and from a PDF: the list of its pages (ticked pages are read, one request each), and the page a row came from. */
.lab-photo-pages { margin: 4px 0 12px; }
.lab-photo-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.lab-photo-fieldset legend { font-weight: 600; padding: 0; margin: 0 0 2px; }
.lab-photo-page-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0 12px; max-height: 15rem; overflow-y: auto; margin: 6px 0; padding: 0; }
.lab-photo-page-list > li + li { border-top: 0; }
.lab-photo-page { display: flex; align-items: center; gap: 8px; min-height: var(--tap); }
.lab-photo-page input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.lab-photo-page label { min-width: 0; }
.lab-row-page { color: var(--text-2); font-size: 0.85rem; }
.danger-link { color: var(--over-text); }
.badge.very-high { background: var(--over-tint); color: var(--over-text); }

/* ---------- Profile's summary card ---------- */
.labs-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin: 0 0 6px; }
.labs-latest li { display: flex; flex-direction: column; }
.labs-latest-name { font-size: 0.8rem; color: var(--text-2); }
.labs-summary p { margin: 0; }
.labs-view .card > .card-title { margin-bottom: 8px; }
.learn-links { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; }

/* On a phone the date is always above the value. Side by side only when the value is short, the rows of one list came out in two shapes. */
@media (max-width: 480px) {
  .lab-row-main, .lab-import-list label { flex-direction: column; align-items: flex-start; }
}