/* ======================================================================
   THE OBSERVATION SHEET AS A DATASHEET — AQCAL/F/08 on screen.

   Gurudeep's handoff, 23.09.2026: "Redesign the Instruments and Observation
   Sheets detail screen to match the Datasheet layout... Keep every existing
   field, its name/binding, validation and API wiring exactly as-is — this is
   a layout and styling change only."

   WHY A RULED GRID AND NOT A FORM. The card was a two-column form: full-width
   inputs for four-character values, help text trailing under each one, and a
   long empty right column. A printed calibration certificate does not look
   like that, and this sheet IS one - so every field goes into one ruled plate
   and the whole thing reads at a glance.

   THE HAIRLINES ARE GAPS, NOT BORDERS. The plate is a flex/grid container with
   `gap: 1px` over a divider-coloured background, and every cell paints itself
   the page colour. One rule draws every line, no cell has to know which of its
   edges is shared, and a row that does not fill its four columns shows the
   divider through - which is why the spans below are exact.

   TOKENS ARE THE HANDOFF'S, mapped to the app's where one already means the
   same thing. The palette is deliberately its own: this screen is a record
   being filled in, and it is meant to look unlike the dashboards.
   ====================================================================== */

.ds-plate {
  --ds-bg: #f2f2f3;
  --ds-surface: #e9e9ea;
  --ds-text: #1d1f20;
  --ds-accent: #5980a6;
  --ds-accent-100: #eef6ff;
  --ds-accent-700: #416180;
  --ds-accent-800: #2c455d;
  --ds-accent-900: #1d2d3d;
  --ds-neutral-700: #5d5d60;
  --ds-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --ds-line-faint: color-mix(in srgb, #1d1f20 8%, transparent);


  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ds-divider);
  color: var(--ds-text);
  border-radius: 0;
  margin: 0 0 16px;
}

/* Blueprint corner marks: four crosshairs centred on the outer corners. */
.ds-plate .ds-corner {
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
  color: color-mix(in srgb, #1d1f20 55%, transparent);
}
.ds-plate .ds-corner::before,
.ds-plate .ds-corner::after {
  content: ''; position: absolute; background: currentColor;
}
.ds-plate .ds-corner::before { left: 0; right: 0; top: 5px; height: 1px; }
.ds-plate .ds-corner::after { top: 0; bottom: 0; left: 5px; width: 1px; }
.ds-plate .ds-corner.tl { top: -6px; left: -6px; }
.ds-plate .ds-corner.tr { top: -6px; right: -6px; }
.ds-plate .ds-corner.bl { bottom: -6px; left: -6px; }
.ds-plate .ds-corner.br { bottom: -6px; right: -6px; }

/* ---- a section row: label cell + field grid ---- */
.ds-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 1px;
}
.ds-label-cell {
  background: var(--ds-bg);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.ds-num {
  font-family: var(--sans);
  font-size: var(--fs-body); font-weight: 500;
  color: var(--ds-accent);
}
.ds-title {
  font-family: var(--sans);
  font-weight: 600; font-size: var(--fs-title); line-height: 1.2;
}
.ds-sub { font-size: var(--fs-label); color: var(--ds-neutral-700); }

.ds-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

/* ---- one field ---- */
.ds-cell {
  background: var(--ds-bg);
  padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.ds-cell:hover { background: #f5f5f8; }
.ds-cell.span2 { grid-column: span 2; }
.ds-cell.span4 { grid-column: span 4; }
.ds-cap { font-size: var(--fs-label); color: var(--ds-neutral-700); }
.ds-plate sup, .ds-head sup, .f08-card sup { font-size: var(--fs-label); }
.ds-cap sup { color: var(--ds-accent-700); }

/* BORDERLESS BY DESIGN. The ruled grid is the structure; a box around every
   value would draw the same line twice and make a filled sheet look like a
   form waiting to be filled. */
.ds-cell input,
.ds-cell select {
  border: 0; background: transparent; font: inherit; font-size: var(--fs-body);
  padding: 2px 0; width: 100%; min-width: 0; color: inherit;
  border-radius: 0;
}
.ds-cell select { cursor: pointer; }
.ds-cell input:focus-visible,
.ds-cell select:focus-visible {
  outline: 2px solid var(--ds-accent); outline-offset: 2px;
}
.ds-cell input[disabled],
.ds-cell select[disabled] { opacity: .7; cursor: not-allowed; }
.ds-cell input::placeholder { color: color-mix(in srgb, #1d1f20 30%, transparent); }
.ds-strong input, .ds-strong .ds-val { font-weight: 600; }
.ds-val { font-size: var(--fs-body); padding: 2px 0; }
.ds-val.readonly { font-style: italic; color: var(--ds-neutral-700); }

/* ---- the conditional monitor warning ---- */
.ds-warn {
  background: var(--ds-accent-100); color: var(--ds-accent-900);
  padding: 10px 12px;
  display: grid; grid-template-columns: auto 1fr; gap: 10.2px;
  align-items: start; font-size: var(--fs-body); line-height: 1.5;
}
.ds-warn svg { width: 16px; height: 16px; stroke-width: 1.5; flex: none; }
.ds-warn a { color: var(--ds-accent-800); }

/* ---- masters table ---- */
.ds-masters-cell { background: var(--ds-bg); padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10.2px; }
.ds-masters table { width: 100%; border-collapse: collapse; }
.ds-masters th {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em;
  color: color-mix(in srgb, #1d1f20 60%, transparent);
  padding: 6.8px; text-align: left; font-weight: 600;
  border-bottom: 1px solid var(--ds-divider);
}
.ds-masters td {
  font-size: var(--fs-body); padding: 6.8px;
  border-bottom: 1px solid var(--ds-line-faint);
}
.ds-masters tbody tr:hover { background: color-mix(in srgb, #1d1f20 4%, transparent); }
.ds-masters tr.is-on { background: var(--ds-accent-100); }
.ds-masters tr.ds-group td {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-neutral-700); padding-top: 12px; border-bottom: 0;
}
.ds-masters input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ds-accent); }
.ds-m-id { font-family: var(--sans); font-size: var(--fs-body); font-weight: 600; color: var(--ds-accent-800); white-space: nowrap; }
.ds-m-name { font-family: var(--sans); font-weight: 600; font-size: var(--fs-body); text-transform: uppercase; }
.ds-m-note { font-size: var(--fs-body); font-style: italic; color: var(--ds-neutral-700); }
.ds-m-x {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent;
  color: var(--ds-neutral-700); cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.ds-m-x:hover { background: color-mix(in srgb, #1d1f20 8%, transparent); }

/* ---- search ---- */
.ds-search { position: relative; max-width: 520px; }
.ds-search input {
  background: var(--ds-surface); border: 1px solid var(--ds-divider);
  min-height: 36px; font-size: var(--fs-body); padding: 6px 10px 6px 34px;
  width: 100%; border-radius: 0; color: inherit;
}
.ds-search .ds-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke-width: 1.5; color: var(--ds-neutral-700);
  pointer-events: none;
}
.ds-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--ds-bg); border: 1px solid var(--ds-divider);
  box-shadow: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  max-height: 260px; overflow-y: auto;
}
.ds-results:empty { display: none; }
.ds-hit { padding: 7px 10px; cursor: pointer; font-size: var(--fs-body); display: flex; gap: 10px; align-items: baseline; }
.ds-hit:hover { background: var(--ds-accent-100); }
.ds-hit .ds-m-id { flex: none; }
.ds-hit-none { padding: 7px 10px; font-size: var(--fs-body); color: var(--ds-neutral-700); }

/* ---- footnotes ---- */
.ds-notes {
  background: var(--ds-bg); padding: 12px 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10.2px 20.4px;
  font-size: var(--fs-body); line-height: 1.5; color: var(--ds-neutral-700);
}
.ds-notes sup { color: var(--ds-accent-700); }

/* Anything the card still carries that is not a datasheet section - the
   completeness warning, the readings table, the action row - keeps its own
   styling and sits below the plate. */
.ds-plate + .ds-rest { margin-top: 4px; }

/* ---- responsive: the handoff's two breakpoints ---- */
@media (max-width: 900px) {
  .ds-row { grid-template-columns: minmax(0, 1fr); }
  .ds-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-cell.span2, .ds-cell.span4 { grid-column: span 2; }
}
@media (max-width: 560px) {
  .ds-fields { grid-template-columns: minmax(0, 1fr); }
  .ds-cell.span2, .ds-cell.span4 { grid-column: span 1; }
}

/* ---- a reading that is not a whole multiple of its least count ----
   Gurudeep, 23.09.2026: "accept and flag, both columns". Flagged, never
   refused and never snapped: the value stays exactly as it was typed. The
   cell is marked and the line above the table says how many. */
.f08-offres {
  background: var(--amber-tint, #fdf3e3); color: var(--ink, #1d1f20);
  border-left: 3px solid var(--amber, #b7791f);
  padding: 7px 10px; margin-bottom: 8px; font-size: var(--fs-body); line-height: 1.45;
}
td.off-res { box-shadow: inset 0 0 0 2px var(--amber, #b7791f); }
td.off-res input { color: var(--amber, #b7791f); font-weight: 600; }

/* ---- the page the plate sits on ----
   SCOPED TO THE CARD, not applied to <body>. The handoff describes a page -
   background #f2f2f3, Barlow 15px/1.55, a 1400px container - but this screen
   lives inside the app shell beside twenty-five others, and painting the body
   would restyle all of them. The card is the page here. */
.f08-card {
  background: var(--ds-bg, #f2f2f3);
  color: #1d1f20;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 1400px;
  margin: 0 auto;
  padding: 13.6px 20.4px 20px;
  border-radius: 0;
}
/* ONE FACE ACROSS THE WHOLE ERP. Gurudeep, 23.09.2026: "the font shall be
   remain same for entire ERP". The handoff offered Barlow and allowed for
   this - "If the app keeps its current font, keep the condensed face for
   titles, numbers and master names at least" - and he has ruled the simpler
   way. The hierarchy here is carried by weight, size and letter-spacing, which
   is what was doing the work anyway; and a screen in a calibration laboratory
   no longer depends on a font server it may have no route to. */

/* ---- read-only / submitted ----
   The handoff: "disable all controls (opacity .7, cursor: not-allowed), hide
   the search input and remove buttons". controls.css already makes the inputs
   inert on .sheet-closed; these are the three the datasheet adds. */
.f08-card.sheet-closed .ds-cell input,
.f08-card.sheet-closed .ds-cell select,
.f08-card.sheet-closed .f08-master-res,
.f08-card.sheet-closed .f08-master-tick { opacity: .7; cursor: not-allowed; }
.f08-card.sheet-closed .ds-search,
.f08-card.sheet-closed .f08-master-del { display: none; }

/* ---- the header row above the plate ---- */
.ds-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 13.6px 20.4px; padding: 13.6px 20.4px;
  max-width: 1400px; margin: 0 auto;
}
.ds-head .worklist-back-btn {
  border: 0; background: transparent; color: #5980a6;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-body);
  white-space: nowrap; flex: none; border-radius: 0; padding: 6px 10px; cursor: pointer;
}
.ds-head .worklist-back-btn:hover { background: color-mix(in srgb, #5980a6 10%, transparent); }
.ds-head .worklist-back-btn:active { background: color-mix(in srgb, #5980a6 18%, transparent); }
.ds-head-title { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.ds-kicker {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: #5d5d60;
}
.ds-headline {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--fs-head); line-height: 1.15; color: #1d1f20;
}
.ds-headline .ds-serial { font-weight: 500; color: #5d5d60; }
.ds-head-status { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: #416180; }
.ds-head-status .badge { border-radius: 0; letter-spacing: .08em; font-size: var(--fs-label); font-weight: 600; }