/* steps-equip.css — OPSV4-SPINE-001 · lane L5 · step 8 (equipment, PPE and the hire Gantt).
 *
 * S0 STUB: created empty so web/index.html can carry a <link> for it from day
 * one and lane L5 never has to edit a shared file. Lane L5 owns this file.
 *
 * House rules (OPSV4_SPINE_RUN_LANES.md, "Every lane obeys", rule 5):
 *   · use ONLY the kit, web/js/ops-v4/kit/lres-ops-v4-kit.js;
 *   · four status colours and nothing else —
 *       done      #009A42
 *       needs you #F59E0B
 *       blocked / missed #DC2626, missed fill #FDECEC
 *       not yet   #D1D5DB
 *   · one big green button per panel;
 *   · sheets slide over the page;
 *   · Inter.
 */

/* Lane L5 · step 8 "Equipment & PPE".
 *
 * Scoped under .ov4-eq so nothing here can reach a surface that is not step 8.
 * The four status colours carry every meaning; the Gantt's blues are MARKS, not
 * statuses — a delivery is not "good" or "bad", it is a day.
 */

.ov4-eq {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #0F1419;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Sub-tabs ─────────────────────────────────────────────────────────── */
.ov4-eq-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #EEF0F3;
  align-self: flex-start;
  flex-wrap: wrap;
}
.ov4-eq-tab {
  min-height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #4B5563;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.ov4-eq-tab[aria-selected="true"] {
  background: #FFFFFF;
  color: #0F1419;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* ── Summary strip ────────────────────────────────────────────────────── */
.ov4-eq-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ov4-eq-sum {
  flex: 1 1 140px;
  padding: 10px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ov4-eq-sum-k { font-size: 11px; font-weight: 700; color: #4B5563; letter-spacing: .04em; text-transform: uppercase; }
.ov4-eq-sum-v { font-size: 16px; font-weight: 800; color: #0F1419; }
.ov4-eq-sum-v[data-warn="true"] { color: #B45309; }

/* ── The hire Gantt ───────────────────────────────────────────────────── */
/* The grid scrolls INSIDE its own box; the panel never scrolls sideways. */
.ov4-gantt-scroll {
  overflow-x: auto;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
}
.ov4-gantt { display: grid; align-items: center; }

.ov4-g-corner,
.ov4-g-rowlabel {
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-right: 1px solid #E5E7EB;
  background: #FFFFFF;
  position: sticky;
  left: 0;
  z-index: 1;
}
.ov4-g-corner {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4B5563;
  justify-content: flex-end;
}
.ov4-g-name { font-size: 13px; font-weight: 700; color: #0F1419; }
.ov4-g-sub { font-size: 11px; font-weight: 500; color: #4B5563; }
.ov4-g-sub[data-warn="true"] { font-weight: 800; color: #B45309; }
.ov4-g-joblabel { font-size: 11px; font-weight: 800; text-transform: uppercase; color: #4B5563; }

.ov4-g-day {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: #4B5563;
}
.ov4-g-day[data-weekend="true"] { background: #E4E9F0; }
.ov4-g-day[data-injob="true"] { color: #006B2E; font-weight: 800; }

.ov4-g-jobcell {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #FFFFFF;
}
.ov4-g-jobcell[data-weekend="true"] { background: #F4F5F7; }
.ov4-g-jobcell[data-injob="true"] { background: #009A42; }

.ov4-g-cell {
  height: 22px;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}
.ov4-g-cell[data-mark="wknd"] { background: #F4F5F7; }
.ov4-g-cell[data-mark="order"] { color: #1F4E79; font-size: 13px; }
.ov4-g-cell[data-mark="deliver"] { background: #1F4E79; color: #FFFFFF; border-radius: 4px 0 0 4px; }
.ov4-g-cell[data-mark="band"] { background: #7FB0E0; }
.ov4-g-cell[data-mark="off"] { background: #4B5563; color: #FFFFFF; border-radius: 0 4px 4px 0; font-size: 8px; }
.ov4-g-cell[data-mark="collect"] { background: #D1D5DB; color: #1F2937; border-radius: 4px; }

.ov4-g-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11px;
  color: #4B5563;
  padding: 2px 2px 0;
}
.ov4-g-legend span { display: flex; align-items: center; gap: 6px; }
.ov4-g-legend i {
  width: 18px;
  height: 14px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ov4-g-legend i[data-mark="deliver"] { background: #1F4E79; color: #FFFFFF; }
.ov4-g-legend i[data-mark="band"] { background: #7FB0E0; height: 10px; }
.ov4-g-legend i[data-mark="off"] { background: #4B5563; color: #FFFFFF; }
.ov4-g-legend i[data-mark="collect"] { background: #D1D5DB; color: #1F2937; }

/* ── Assumptions, needs-you, send ─────────────────────────────────────── */
.ov4-eq-assume,
.ov4-eq-needs,
.ov4-eq-held {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
}
.ov4-eq-assume-t,
.ov4-eq-needs-t,
.ov4-eq-held-t {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4B5563;
  margin-bottom: 6px;
}
.ov4-eq-needs { border-left: 4px solid #F59E0B; }
.ov4-eq-needs-t { color: #B45309; }
.ov4-eq-held { border-left: 4px solid #DC2626; background: #FDECEC; }
.ov4-eq-held-t { color: #991B1B; }
.ov4-eq-assume ul,
.ov4-eq-needs ul,
.ov4-eq-held ul { margin: 0; padding-left: 18px; font-size: 13px; color: #374151; }
.ov4-eq-assume li,
.ov4-eq-needs li,
.ov4-eq-held li { margin: 3px 0; }
.ov4-eq-held p { margin: 8px 0 0; font-size: 13px; color: #991B1B; font-weight: 700; }

.ov4-eq-send {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #FFFFFF;
}
.ov4-eq-send-p { margin: 0; font-size: 13px; color: #374151; }
/* The one big green button of this panel. */
.ov4-eq-send-b {
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: none;
  border-radius: 16px;
  background: #009A42;
  color: #FFFFFF;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.ov4-eq-send-b:disabled { background: #D1D5DB; cursor: not-allowed; }

/* ── Tables ───────────────────────────────────────────────────────────── */
.ov4-eq-tablescroll { overflow-x: auto; }
.ov4-eq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
}
.ov4-eq-table th,
.ov4-eq-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #F4F5F7; }
.ov4-eq-table th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4B5563;
}
.ov4-eq-table tr:last-child td { border-bottom: none; }
.ov4-eq-table td[data-state="ok"] { color: #006B2E; font-weight: 700; }
.ov4-eq-table td[data-state="bad"] { color: #991B1B; font-weight: 800; }
.ov4-eq-table td[data-state="unknown"] { color: #4B5563; }

/* PPE grid cells — the four standings, and "not proved" shown as itself. */
.ov4-eq-cell {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.ov4-eq-cell[data-standing="in_date"] { background: #E3F5EA; color: #006B2E; }
.ov4-eq-cell[data-standing="due_soon"] { background: #FEF3C7; color: #92400E; }
.ov4-eq-cell[data-standing="red_line"] {
  background: #FDECEC;
  color: #991B1B;
  box-shadow: inset 0 0 0 1px #DC2626;
}
.ov4-eq-cell[data-standing="agency"] { background: #F4F5F7; color: #4B5563; }
/* Issued, but with no inspection date on file. Not a pass, so not green. */
.ov4-eq-cell[data-unproven="true"] { background: #F4F5F7; color: #4B5563; font-weight: 500; font-style: italic; }

.ov4-eq-rams {
  font-size: 10px;
  font-weight: 700;
  color: #4B5563;
  background: #EEF0F3;
  border-radius: 6px;
  padding: 2px 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Shift picker and PPE controls ────────────────────────────────────── */
.ov4-eq-shiftpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ov4-eq-shiftpick-l {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #4B5563;
  margin-right: 4px;
}
.ov4-eq-shiftb {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  background: #FFFFFF;
  color: #4B5563;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ov4-eq-shiftb[aria-pressed="true"] { border-color: #009A42; color: #0F1419; box-shadow: inset 0 0 0 1px #009A42; }

.ov4-eq-ppehead { display: flex; flex-wrap: wrap; gap: 8px; }
.ov4-eq-ppeedit,
.ov4-eq-ppecopy {
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #EEF0F3;
  color: #1F2937;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ── Empty states, notes, errors ──────────────────────────────────────── */
.ov4-eq-empty {
  border: 1px dashed #D1D5DB;
  border-radius: 12px;
  padding: 22px 20px;
  background: #FFFFFF;
  text-align: left;
}
.ov4-eq-empty-t { font-size: 16px; font-weight: 800; color: #0F1419; }
.ov4-eq-empty-p { margin: 6px 0 14px; font-size: 13px; color: #4B5563; max-width: 62ch; }
.ov4-eq-empty-b {
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #009A42;
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ov4-eq-note { margin: 0; font-size: 13px; color: #374151; max-width: 78ch; }

.ov4-eq-error {
  border: 1px solid #DC2626;
  background: #FDECEC;
  color: #991B1B;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
}

/* ── The hire-request sheet ───────────────────────────────────────────── */
.ov4-eq-dry {
  border-radius: 12px;
  background: #FEF3C7;
  color: #92400E;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
}
.ov4-eq-sent {
  border-radius: 12px;
  background: #E3F5EA;
  color: #006B2E;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
}
.ov4-eq-reqlist { margin: 14px 0; padding-left: 18px; font-size: 13px; color: #374151; }
.ov4-eq-reqlist li { margin: 4px 0; }

/* ── The PPE editor sheet ─────────────────────────────────────────────── */
.ov4-eq-picker { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.ov4-eq-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.ov4-eq-pick:hover { background: #F4F5F7; }
.ov4-eq-pick span { flex-grow: 1; font-weight: 700; }
.ov4-eq-pick input[type="number"] {
  width: 76px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}
.ov4-eq-copyall { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; }
.ov4-eq-sheetfoot { margin-top: 18px; }