/* Scoped styles keep the examination grid readable on phones and desktops. */
#measurements-modal .measurement-modal { width: 100%; max-width: 1000px; min-width: 0; max-height: 90dvh; overflow-y: auto; }
.measurement-card { width: 100%; max-width: 100%; min-width: 0; margin-top: 16px; }
.measurement-table-scroll { max-width: 100%; overflow-x: auto; margin: 16px 0; border: 1px solid var(--border-color, #777); border-radius: 10px; }
.measurement-table { width: 100%; min-width: 760px; border-collapse: collapse; text-align: center; font-variant-numeric: tabular-nums; }
.measurement-table caption { padding: 12px; text-align: right; }
.measurement-table th, .measurement-table td { padding: 12px 10px; border: 1px solid var(--border-color, #777); white-space: nowrap; }
.measurement-table thead { background: rgba(128,128,128,.18); }
.measurement-table tbody tr:nth-child(even) { background: rgba(128,128,128,.07); }
#measurements-modal [hidden] { display: none !important; }
#measurements-form { margin-top: 20px; }
#measurements-form .btn-liquid { margin-inline-end: 12px; }

/* Fit all eight columns within the phone screen without horizontal scrolling. */
@media (max-width: 768px) {
  #measurements-modal { padding: 8px; }
  #measurements-modal .measurement-modal { padding: 12px 8px; }
  .measurement-card { padding: 12px 8px; }
  #measurements-history { min-width: 0; width: 100%; }
  .measurement-table-scroll { width: 100%; overflow: visible; border-radius: 0; margin: 12px 0; }
  .measurement-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: clamp(9px, 2.6vw, 12px);
    line-height: 1.45;
  }
  .measurement-table th, .measurement-table td {
    padding: 7px 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
  }
  .measurement-table th:first-child { width: 23%; }
  .measurement-table caption { padding: 8px 4px; font-size: 12px; }
}