/* The day page: its chrome in the nav, the record sheets in Full view and their compact
   Field view. Ported from the old sheets (styles.css 378–560, 572–585,
   648–847, 2310–2319, 2622–2640, 4610–4643). */

:root {
  --yellow: #fff200;
  --row-focus: rgba(216, 228, 193, .55);
}

.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.link-btn {
  min-height: 0;
  padding: 0;
  background: none;
  color: var(--switch);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.badge-error { border-color: #fca5a5; background: #fef2f2; color: var(--danger); }
.is-disabled { opacity: .45; pointer-events: none; }

/* --- Strip ----------------------------------------------------------------------- */
/* The day's chrome is in the nav (as the old Simple View's toolbar): the Field
   view switch and tools, the reference and day, the days either side and the
   lock. Export and Print sit at the bottom. */
.day-title { display: flex; align-items: baseline; gap: .5rem; min-width: 0; color: var(--text); text-decoration: none; }
.day-title-ref { font-weight: 800; color: var(--switch); white-space: nowrap; }
.day-title .nav-title { margin: 0; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.day-actions-bar { display: flex; justify-content: flex-end; gap: .5rem; margin: .25rem 0 1rem; }
.unlock-notice:empty { display: none; }
.view-switch { white-space: nowrap; min-height: 44px; padding: .55rem 1rem; border-radius: .8rem; background: #e2e8f0; color: var(--text); }
.view-switch[aria-pressed="true"] { background: var(--switch); color: #fff; }
.day-toolbar .tool-toggle.is-on { background: #0f172a; color: #fff; }
.segmented-links { display: inline-flex; border: 1px solid var(--border); border-radius: .8rem; overflow: hidden; }
.segmented-links .segment {
  display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .8rem;
  font-weight: 700; color: var(--text); text-decoration: none; background: white;
}
.segmented-links .segment + .segment { border-left: 1px solid var(--border); }
.segmented-links .segment.is-current { background: var(--header); }

.unlock-banner {
  margin: .5rem 0 0; padding: .45rem .7rem; border-radius: .6rem;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 600; font-size: .9rem;
}

/* --- Header, conditions, notes --------------------------------------------------- */
.form-heading-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: .75rem; }
.form-heading-row h2 { margin: 0; }
.form-heading-row .small-note { margin: 0; }
.header-field { display: flex; flex-direction: column; }
.field-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .035em; font-weight: 700; color: var(--label);
}
.header-field.is-inherited input { color: var(--muted); font-style: italic; }
.header-field .field-hint { margin-top: .25rem; align-self: flex-start; font-size: .78rem; }
.segmented-row { display: flex; gap: .5rem; margin-top: .25rem; }
.segmented-row label {
  display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .8rem; min-height: 44px;
  border: 1px solid var(--border); border-radius: .7rem; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text);
}

/* Locked fields, as the old sheets showed them. */
input.field-locked, select.field-locked, textarea.field-locked {
  background: #e5e7eb !important; color: #475569; border-color: #cbd5e1; cursor: not-allowed;
}
.field-locked:focus { border-color: #cbd5e1; box-shadow: none; }
.locked-field-wrap { opacity: .92; }
.segmented-row.locked-field-wrap label { background: #f1f5f9; }

/* The header row under each sample table: sampler, calibrator and timing
   device, then Air's wind and conditions or Noise's peak weighting. An
   instrument the day's samples need and it lacks is marked; the entry that
   would start a sample asks for it (the instruments dialog). */
.sheet-header {
  display: grid; grid-template-columns: repeat(3, minmax(9rem, 1fr)) minmax(8rem, .8fr) minmax(16rem, 1.6fr);
  gap: .5rem .75rem; align-items: start; margin: -.25rem 0 .75rem;
}
.noise-header { grid-template-columns: repeat(3, minmax(9rem, 1fr)) minmax(12rem, 1.2fr); }
.sheet-header .form-field { margin: 0; }
/* Conditions, boxed like the fields beside it. */
.conditions-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-top: .25rem; min-height: 2.95rem;
  padding: .45rem .75rem; border: 1px solid var(--border); border-radius: .7rem; background: white;
}
.conditions-box label { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; font-size: .95rem; color: var(--text); }
.conditions-box input { width: 1.1rem; height: 1.1rem; }
.conditions-box.locked-field-wrap { background: #f1f5f9; }
.field-view .conditions-box { min-height: 2.3rem; padding: .2rem .5rem; }
.sheet-header .segmented-row { margin-top: .25rem; }
.sheet-header .segmented-row label { padding: .45rem .7rem; min-height: 40px; }
.field-view .sheet-header { gap: .35rem .5rem; margin-bottom: .5rem; }
.field-view .sheet-header input, .field-view .sheet-header select { padding: .4rem .5rem; }
.field-view .sheet-header .field-hint { font-size: .72rem; }
.header-field.is-missing input { border-color: #fca5a5; background: #fef2f2; }
.header-field.is-missing .field-hint { color: var(--danger); font-weight: 600; }
.instruments-dialog .form-field + .form-field, .instruments-dialog .toggle-setting { margin-top: .6rem; }
.instruments-dialog .input-with-action { display: flex; align-items: center; gap: .5rem; }
.instruments-dialog .input-with-action input { flex: 1 1 auto; min-width: 0; }

/* --- Sample tables ----------------------------------------------------------------- */
.table-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.table-title-row h2 { margin: 0; }
.view-suffix { color: var(--muted); font-weight: 600; }
.table-title-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.row-count { color: var(--muted); font-size: .9rem; }
.add-row-btn {
  min-height: 40px; padding: .5rem .8rem; background: white; color: var(--text);
  border: 2px solid var(--header); border-radius: .7rem;
}
.add-row-btn:hover { background: #f7faef; box-shadow: 0 0 0 3px rgba(216, 228, 193, .45); }

.sample-table, .field-blank-table { border-collapse: collapse; width: 100%; }
.sample-table th, .sample-table td, .field-blank-table th, .field-blank-table td {
  border: 1px solid var(--border); padding: .4rem; vertical-align: middle; background: white;
}
.sample-table thead th, .field-blank-table thead th {
  background: var(--header); text-align: center; font-size: .74rem; text-transform: uppercase; line-height: 1.2;
}
.sample-table thead th span { font-size: .67rem; color: #475569; }
.sample-table tbody tr:nth-child(even) > td { background: #f8fafc; }
.sample-table td input, .sample-table td select, .field-blank-table td input, .field-blank-table td select {
  margin: 0; border-radius: .45rem; padding: .5rem; font-size: .92rem; min-width: 6.5rem;
}
/* Column widths (decided 2026-10-02): each column fits what it holds (a time
   22:22, a flow of six digits, a calibration 114.00, a level 999.99, a longer
   name, a two or three word occupation); SEG takes whatever room is left.
   A table wider than its card scrolls in it. */
.sample-table td input, .sample-table td select { min-width: 0; }
.sample-table td.method-col select { width: 5.6rem; }
.sample-table td.pump-col input, .sample-table td.head-col input { width: 6.5rem; }
.sample-table td.dosimeter-col input { width: 7rem; }
.sample-table td.media-col input { width: 8.5rem; }
.sample-table td.time-col input, .sample-table td.time-col .time-stamp-btn { width: 4.6rem; min-width: 0; }
.sample-table td.flow-col input { width: 5.6rem; }
.sample-table td.level-col input, .sample-table td.runtime-col input { width: 5.4rem; }
.sample-table .calc-col { min-width: 4.6rem; }
.sample-table td.occupation-col input { width: 12rem; }
.sample-table td.emp-col input { width: 12.5rem; }
.sample-table th.seg-col { width: 100%; }
.sample-table td.seg-col input { width: 100%; min-width: 11rem; }
.sample-table td.valid-col, .sample-table td.hp-col { white-space: nowrap; }
.sample-table tbody tr:focus-within > td:not(.yellow) { box-shadow: inset 0 0 0 9999px var(--row-focus); }
.sample-table .method-col .analyte-chip { margin-top: .3rem; }
.empty-table { text-align: center; }

/* The # stays narrow; a tool's button sits left of the number. */
.row-no { text-align: center; font-weight: 800; width: 1%; white-space: nowrap; }
.row-no-inner { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.not-in-plan { margin-top: .25rem; font-size: .62rem; white-space: nowrap; }
.full-view-only-missing {
  display: inline-flex; align-items: center; justify-content: center; margin-top: .2rem; width: 1.2rem; height: 1.2rem;
  border-radius: 999px; background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); font-size: .75rem;
}
.delete-row-btn {
  width: 1.9rem; height: 1.9rem; min-height: 0; padding: 0; border-radius: 999px;
  border: 1px solid #fecaca; background: #fee2e2; color: #991b1b; font-size: 1.1rem; font-weight: 900; line-height: 1;
}
.delete-row-btn:hover { border-color: #f87171; background: #fecaca; }

/* Pump Run Time is yellow on the paper form. */
.yellow, th.yellow, td.yellow { background: var(--yellow) !important; }
td.yellow input { background: #fffde7; }

.na-cell { text-align: center; color: var(--muted); }
.not-applicable { display: inline-block; min-width: 2rem; }
.flow-outside input { border-color: #fca5a5; background: #fef2f2; }
.calc-cell { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.calc-cell.over-limit { color: var(--danger); }

.time-stamp-btn { min-height: 2.35rem; border-radius: .45rem; font-weight: 800; padding: .35rem .5rem; }
.time-input { font-variant-numeric: tabular-nums; text-align: center; }

/* Hearing protection's ✓ and ✗. */
.tri-group { display: inline-flex; gap: .25rem; }
.tri-btn {
  width: 2.3rem; min-width: 2.3rem; min-height: 2.3rem; padding: 0; border-radius: .5rem;
  background: #f1f5f9; color: #64748b; border: 1px solid var(--border); font-size: 1.05rem; font-weight: 900; line-height: 1;
}
.tri-btn.tri-yes.is-on { background: #16a34a; border-color: #16a34a; color: #fff; }
.tri-btn.is-on:disabled { opacity: .8; }
.tri-group.is-due .tri-btn { border-color: #f87171; background: #fef2f2; color: var(--danger); }
/* Hearing protection's ✗: not worn a grey ✗ (red over 85 dB(A)), not
   specified a grey ?. */
.tri-btn.hp-not.is-on { background: #cbd5e1; border-color: #94a3b8; color: #334155; }
.tri-btn.hp-not.is-on.over-limit { background: #dc2626; border-color: #dc2626; color: #fff; }
.valid-col select { width: 4.6rem; }
.valid-col .void-reason-btn, .hp-model-btn { display: block; margin-top: .3rem; }
.unused-reason-btn { color: #334155; background: #f1f5f9; border-color: #cbd5e1; }
.hp-model-btn {
  min-height: 0; padding: 3px 8px; font-size: .72rem; font-weight: 700; color: #166534; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: 6px; white-space: nowrap;
}

/* The reason dialogs: the usual reasons to tap, and a field for any other. */
.reason-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.reason-chip { min-height: 40px; padding: .45rem .8rem; border-radius: 999px; background: #e2e8f0; color: var(--text); font-weight: 600; }
.reason-chip.is-chosen { background: var(--switch); color: #fff; }
.reason-dialog .toggle-setting { margin-top: .75rem; }

.void-reason-btn {
  min-height: 0; padding: 3px 8px; font-size: .72rem; font-weight: 600; color: #b91c1c; background: #fef2f2;
  border: 1px dashed #fca5a5; border-radius: 6px; white-space: nowrap;
}
.void-reason-btn.has-reason { border-style: solid; font-weight: 700; }
/* On the cells, so the tint shows over the white and zebra backgrounds. */
.sample-table tr.sample-void-row > td:not(.yellow) { background: #fdf2f2; }
.sample-table tr.sample-unavailable-row > td, .sample-table tr.sample-unavailable-row > td.yellow { background: var(--bg) !important; color: #475569; }
.sample-table tr.sample-unavailable-row input, .sample-table tr.sample-unavailable-row select { background: #e2e8f0; border-color: #cbd5e1; }


.field-blank-table .row-no { width: 42px; }
.field-blank-table .del-col, .sample-table .del-col { width: 3rem; text-align: center; }
.field-blank-requirement {
  margin: .75rem 0 0; padding: .45rem .7rem; border: 1px solid #fecaca; border-radius: .4rem;
  background: #fef2f2; color: #b91c1c; font-weight: 600;
}
.blank-shortfall { text-decoration: none; }

/* --- Field view: the old Simple View ------------------------------------------------ */
.field-view .table-card { padding: .5rem; }
.field-view .sample-table th, .field-view .sample-table td { padding: .2rem; }
.field-view .sample-table thead th { font-size: .66rem; line-height: 1.05; }
.field-view .sample-table td input, .field-view .sample-table td select { border-radius: .35rem; padding: .4rem .35rem; font-size: .88rem; }
.field-view .time-stamp-btn { min-height: 2.4rem; font-size: .88rem; }
.field-view .analyte-chip { font-size: .66rem; padding: .1rem .35rem; min-height: 26px; }
.field-view .not-in-plan { display: none; }
/* Field view keeps the same columns a little tighter, to fit a landscape tablet. */
.field-view .sample-table td.pump-col input, .field-view .sample-table td.head-col input { width: 5.4rem; }
.field-view .sample-table td.dosimeter-col input { width: 6rem; }
.field-view .sample-table td.occupation-col input { width: 10rem; }
.field-view .sample-table td.emp-col input { width: 10.5rem; }
.field-view .sample-table td.seg-col input { min-width: 8rem; }
/* Phones: scroll sideways rather than squeeze below what a finger can hit. */
@media (max-width: 760px) {
  .grid.three, .grid.four { grid-template-columns: 1fr 1fr; }
  .sheet-header, .noise-header { grid-template-columns: 1fr 1fr; }
  .sheet-header .conditions-field { grid-column: span 2; }
}
@media (max-width: 480px) {
  .grid.three, .grid.four { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .sheet-header { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sheet-header .wind-field { grid-column: 1; }
  .sheet-header .conditions-field { grid-column: 2 / span 2; }
  .noise-header { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Link mode: the line picked, its person's other lines, and what a tap on
   another line does (join it to them, or split it off). */
.link-row-btn { background: #ffedd5; color: #c2410c; }
.link-row-btn.is-selected { background: #ea580c; color: #fff; }
.link-row-btn.is-join { box-shadow: inset 0 0 0 2px #16a34a; }
.link-row-btn.is-split { box-shadow: inset 0 0 0 2px #d97706; }
.link-partners { display: block; margin-top: .2rem; font-size: .66rem; font-weight: 700; color: #c2410c; white-space: nowrap; }
.link-partners span { display: block; }
.sample-table tr.link-source-row > td { background: #ede9fe; }
.link-hint {
  margin: 0 0 .6rem; padding: .45rem .7rem; border-radius: .6rem;
  background: #ede9fe; border: 1px solid #c4b5fd; color: #3b2d8a; font-weight: 600; font-size: .9rem;
}

/* Scrolled to, a card clears the sticky nav. */
.day-page .card { scroll-margin-top: 6rem; }