/* Plant operations: shift board, phone operator log, stoppages, work orders, preventive maintenance.
   Builds on app.css variables; only what these pages need on top. */

.ops-tag, .ops-code { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ops-tag { color: var(--accent); font-size: 13px; }
.ops-code { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 0 7px; border-radius: 6px; background: var(--btn-bg); color: var(--btn-ink); font-size: 12px; }
.ops-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-sub { margin-top: 6px; font-size: 14px; color: var(--muted); }
.ops-narrow { max-width: 760px; }
.ops-text { display: flex; flex-direction: column; gap: 4px; }
.ops-text h3 { font-size: 13px; color: var(--muted); }
.ops-findings { padding: 12px 14px; border-radius: var(--radius); background: var(--ok-bg); }

/* Hour strip in tables (8 small cells) */
.ops-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.ops-strip li { flex: none; }
.ops-strip-cell { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-strong); background: transparent; }
.ops-strip-cell.is-done { background: var(--ok); border-color: var(--ok); }
.ops-strip-cell.is-due { background: var(--gold); border-color: var(--gold); }
.ops-strip-cell.is-missed { background: var(--bad); border-color: var(--bad); }
.ops-strip-cell.is-later { background: var(--sunk); }
.ops-strip-cell.is-none { background: transparent; border-style: dashed; opacity: .5; }
.ops-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ops-legend li { display: inline-flex; align-items: center; gap: 6px; }

/* Sector picker */
.ops-sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ops-sector-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-left: 4px solid var(--accent); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-height: 120px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--hairline); }
.ops-sector-card:hover { box-shadow: var(--shadow-hover), var(--hairline); color: var(--ink); }
.ops-sector-card.is-readonly { border-left-color: var(--line-strong); }
.ops-sector-card .pill { align-self: flex-start; }
.ops-sector-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); }

/* ---------- Phone log ---------- */
.ops-phone { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.ops-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-lg); background: #17201B; color: #F3F4F1; box-shadow: var(--shadow); }
.ops-hero h1 { color: #FFFFFF; font-size: 21px; }
.ops-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ops-hero-eyebrow { font-size: 13px; color: #A9B4AD; }
.ops-hero-eyebrow a { color: #CFE0D4; }
.ops-hero-sub { font-size: 13px; color: #C3CBC5; }
.ops-hero-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #F3F4F1; text-decoration: none; font-size: 13px; font-weight: 600; }
.ops-hero-btn:hover { background: rgba(255,255,255,.08); color: #FFFFFF; }
.ops-hero-btn .icon { width: 16px; height: 16px; }
.ops-hours { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; overflow-x: auto; }
.ops-hour { flex: 1 0 40px; }
.ops-hour { border-radius: 7px; border: 1px solid #3A4540; color: #A3ADA6; }
.ops-hour-in { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: inherit; text-decoration: none; border-radius: 6px; }
a.ops-hour-in:hover { color: #FFFFFF; background: rgba(255,255,255,.06); }
.ops-hour-time { font-size: 11px; font-variant-numeric: tabular-nums; }
.ops-hour-state { font-size: 11px; font-weight: 600; min-height: 15px; }
.ops-hour.is-done { background: #24402F; border-color: #3E7A55; color: #CFEBD9; }
.ops-hour.is-due { background: #5C4200; border-color: #E0A22B; color: #FFE3A3; }
.ops-hour.is-missed { background: #4A2420; border-color: #C0534A; color: #F6C9C3; }
.ops-hour.is-selected { outline: 2px solid #FFFFFF; outline-offset: 1px; }

.ops-card { border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--hairline); }
.ops-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ops-readings { display: flex; flex-direction: column; }
.ops-point { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--sunk); }
.ops-point:last-of-type { border-bottom: 0; }
.ops-point-row { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 12px; align-items: center; }
.ops-point-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-point-name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ops-point-band { font-size: 12px; color: var(--muted); }
.ops-point-saved { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ok); font-weight: 600; }
.ops-point-saved .icon { width: 14px; height: 14px; }
input.ops-point-input { height: 54px; min-height: 54px; width: 108px; padding: 0 8px; border: 2px solid var(--line-strong); border-radius: 10px; text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
input.ops-point-input.is-ok { border-color: var(--ok); }
input.ops-point-input.is-out, input.ops-point-input.is-error { border-color: var(--bad); background: var(--bad-bg); }
.ops-point.is-saved input.ops-point-input:placeholder-shown { background: var(--ok-bg); border-color: var(--ok); }
.ops-reasons { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); border: 1px solid var(--line); }
.ops-reasons[hidden] { display: none; }
.ops-reasons-title { font-size: 13px; font-weight: 700; color: var(--bad); }
.ops-note, .ops-fix input { min-height: 40px; font-size: 14px; }
.ops-fix { display: flex; flex-direction: column; gap: 4px; }
.ops-fix.has-error input { border-color: var(--bad); }
.ops-big-btn { min-height: 52px; font-size: 16px; margin-top: 12px; }
.ops-readonly { list-style: none; margin: 0; padding: 0; }
.ops-readonly li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--sunk); }

/* Chips: radio buttons drawn as big tap targets */
.ops-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ops-chip { position: relative; display: inline-flex; }
.ops-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ops-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--glass-strong); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.ops-chip span:hover { border-color: var(--ink-2); }
.ops-chip input:checked + span { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.ops-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ops-chips-bad .ops-chip input:checked + span { background: var(--bad); border-color: var(--bad); color: var(--btn-ink); }
.ops-chips-mono .ops-chip span { border-radius: 8px; font-family: var(--mono); }
.ops-chips-priority .ops-chip input[value="urgent"]:checked + span { background: var(--warn); border-color: var(--warn); color: var(--btn-ink); }
.ops-chips-priority .ops-chip input[value="stop_now"]:checked + span { background: var(--bad); border-color: var(--bad); color: var(--btn-ink); }

/* Stoppages on the phone */
.ops-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ops-stop-live { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding: 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); }
.ops-stop-live > div { flex: 1; min-width: 0; }
.ops-stop-live .ops-tag { color: var(--bad); }
.ops-clock { flex: none; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ops-stop-end { flex-basis: 100%; }
.ops-run-btn { background: var(--ok); color: var(--btn-ink); min-height: 48px; }
.ops-run-btn:hover { background: var(--ok); color: var(--btn-ink); filter: brightness(1.08); }
.ops-stop-form { display: flex; flex-direction: column; gap: 12px; }
.ops-stop-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; }
input.ops-time { font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.ops-stop-btn { min-height: 48px; color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); }
.ops-stop-btn:hover { background: var(--bad-bg); color: var(--bad); }
.ops-stop-list { list-style: none; margin: 0; padding: 0; }
.ops-stop-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-top: 1px solid var(--sunk); font-size: 13px; }

.ops-pm-where { min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.ops-grid-wide { grid-template-columns: minmax(0, 1fr); }
.ops-grid-wide > * { min-width: 0; }
@media (min-width: 1280px) { .ops-grid-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }

/* Filters */
.ops-filters { gap: 10px; }
.ops-filters .form-actions { align-items: center; }

/* Work order board */
.ops-board { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; }
.ops-column { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-lg); background: var(--glass-soft); box-shadow: var(--hairline); min-height: 160px; }
.ops-column-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.ops-column-head h2 { font-size: 15px; }
.ops-column-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 18px 0; }
.ops-wo-card { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: var(--radius); border-left: 4px solid var(--info); color: var(--ink); text-decoration: none; background: var(--glass-strong); box-shadow: var(--shadow), var(--hairline); }
.ops-wo-card:hover { box-shadow: var(--shadow-hover), var(--hairline); color: var(--ink); }
.ops-wo-card.is-urgent { border-left-color: var(--gold); }
.ops-wo-card.is-stop_now { border-left-color: var(--bad); }
.ops-wo-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.ops-machine-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--sunk); }

/* Work order detail */
.ops-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ops-action { gap: 10px; }
.ops-details { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; background: var(--glass-soft); }
.ops-details[open] { padding-bottom: 14px; }
.ops-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.ops-inline-details { display: inline-block; border: 0; padding: 0; background: transparent; vertical-align: middle; }
.ops-inline-details summary { min-height: 34px; font-size: 13px; color: var(--muted); padding: 0 6px; }
.ops-pm-done { display: inline-flex; gap: 6px; align-items: center; }
.ops-pm-done input[type=text] { width: 130px; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.ops-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ops-event { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 8px 0; position: relative; }
.ops-event::before { content: ''; position: absolute; left: 6px; top: 22px; bottom: -8px; width: 2px; background: var(--line); }
.ops-event:last-child::before { display: none; }
.ops-event-dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--info); border: 3px solid var(--info-bg); }
.ops-event.is-closed .ops-event-dot { background: var(--ok); border-color: var(--ok-bg); }
.ops-event.is-cancelled .ops-event-dot { background: var(--muted); border-color: var(--sunk-2); }
.ops-event.is-waiting_parts .ops-event-dot { background: var(--bad); border-color: var(--bad-bg); }
.ops-event.is-raised .ops-event-dot { background: var(--gold); border-color: var(--warn-bg); }
.ops-event-note { color: var(--ink-2); white-space: pre-line; }
.ops-note-form { margin-top: 6px; }

@media (max-width: 980px) {
  .ops-board { grid-template-columns: repeat(3, minmax(250px, 85vw)); }
}
@media (max-width: 560px) {
  .ops-hour-time { font-size: 10px; }
  .ops-hero { margin: -6px -4px 0; }
}

/* ---------- Pictures on top of each page ---------- */
.ops-rings { gap: 18px 28px; align-items: flex-start; flex-wrap: wrap; }
.ops-ring-link { color: inherit; text-decoration: none; border-radius: var(--radius); }
.ops-ring-link:hover { background: var(--sunk); }
.ops-hero-viz, .ops-stack { display: flex; flex-direction: column; gap: 14px; }
.ops-scan-tip { display: flex; align-items: center; gap: 6px; }
.ops-scan-tip .icon { width: 16px; height: 16px; }
.ops-either { color: var(--muted); }

/* Section cards: a ring and the hour strip per section (board and section picker) */
.ops-section-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ops-section-card { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; border-left: 5px solid var(--ok); border-radius: var(--radius); color: var(--ink); text-decoration: none; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow), var(--hairline); }
.ops-section-card:hover { box-shadow: var(--shadow-hover), var(--hairline); color: var(--ink); }
.ops-section-card.is-warn { border-left-color: var(--gold); }
.ops-section-card.is-bad { border-left-color: var(--bad); }
.ops-section-card.is-readonly { opacity: .9; }
.ops-section-top { display: flex; align-items: center; gap: 8px; }
.ops-section-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Phone log */
.ops-log-summary { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.ops-point-trend { display: block; max-width: 160px; }

/* Shift report: one line per section */
.ops-report-sections { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ops-report-sections li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sunk); }
.ops-report-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-trends { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* Work order: chain and code */
.ops-wo-chain { display: flex; flex-direction: column; gap: 12px; }
.ops-wo-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ops-wo-code svg { max-width: 100%; height: auto; }

/* Job card (printed) */
.ops-jobcard { max-width: 760px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--radius-lg); background: #FFFFFF; color: #111111; box-shadow: var(--shadow), var(--hairline); }
.ops-jobcard h2, .ops-jobcard h3 { color: #111111; }
.ops-jobcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 2px solid #111111; padding-bottom: 12px; }
.ops-jobcard-head > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.ops-jobcard-codes { display: flex; align-items: center; gap: 10px; }
.ops-jobcard-qr { width: 96px; height: 96px; }
.ops-jobcard-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; margin: 0; }
.ops-jobcard-facts dt { font-size: 12px; color: #555555; }
.ops-jobcard-facts dd { margin: 0; font-weight: 600; }
.ops-jobcard-write { display: flex; flex-direction: column; gap: 8px; }
.ops-jobcard-lines { height: 120px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, #BBBBBB 29px, #BBBBBB 30px); }
.ops-jobcard-lines.is-short { height: 60px; }
.ops-jobcard-sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding-top: 34px; font-size: 13px; }
.ops-jobcard-sign span + span { min-width: 150px; border-top: 1px solid #111111; padding-top: 4px; text-align: center; }

/* Label sheet */
.ops-label-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ops-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ops-label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border: 1.5px dashed #888888; border-radius: 10px; background: #FFFFFF; color: #111111; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.ops-label strong { font-size: 14px; line-height: 1.3; }
.ops-label svg { max-width: 100%; height: auto; }
.ops-label-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #555555; }
.ops-label-qr { width: 110px; height: 110px; }
.ops-label-log { border-style: solid; border-width: 3px; border-color: #111111; }
.ops-label-log .ops-label-qr { width: 140px; height: 140px; }

@media (max-width: 560px) {
  /* Phone: rings two to a row, and each section card puts its ring beside its hour strip. */
  .ops-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; justify-items: center; }
  .ops-rings .viz-ring-lg .viz-ring-svg { width: 132px; height: 132px; }
  .ops-rings > .viz-kpi { align-self: stretch; }
  .ops-section-cards { grid-template-columns: minmax(0, 1fr); }
  .ops-section-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: center; }
  .ops-section-card > .ops-section-top { grid-column: 1 / -1; }
  .ops-section-card > .viz-ring { grid-column: 1; grid-row: 2 / span 2; }
  .ops-section-card > .ops-strip, .ops-section-card > .ops-section-pills { grid-column: 2; }
  .ops-jobcard-head { flex-direction: column; }
  .ops-jobcard-codes { flex-wrap: wrap; }
  .ops-jobcard-codes svg:not(.ops-jobcard-qr) { width: 220px; }
  /* Filters take two fields a row, so the pictures start on the first screen. */
  .ops-filters .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ops-report-sections li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ops-report-sections li .ops-strip { grid-column: 1 / -1; }
  .ops-trends { grid-template-columns: minmax(0, 1fr); }
  .ops-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .ops-hero { background: #FFFFFF; color: var(--ink); border: 1px solid #999; }
  .ops-pm-done, .ops-details { display: none !important; }
  .ops-section-card, .ops-jobcard { box-shadow: none; border: 1px solid #999999; }
  .ops-jobcard { padding: 0; border: 0; }
  .ops-labels { grid-template-columns: repeat(3, 1fr); }
  .ops-label { border-color: #555555; }
}

/* A refused reading marks its whole box; only the boxes that are wrong get the red edge. */
.ops-point.has-error .ops-reasons:not(.has-error) input,
.ops-point.has-error .ops-fix:not(.has-error) input { box-shadow: none; }
.ops-report-sections .ops-code { justify-self: start; }

/* The job card and the floor labels are paper: always white with dark ink, so in dark mode the
   pictures inside them (step chain, pills) take the light tokens instead of the dark ones. */
.ops-jobcard, .ops-label {
  color-scheme: light;
  --ink: #1D1D1F; --ink-2: #3A3F3C; --muted: #545A56;
  --line: rgba(29, 29, 31, .10); --line-strong: rgba(29, 29, 31, .18);
  --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-soft: rgba(29, 29, 31, .03);
  --sunk: rgba(29, 29, 31, .045); --sunk-2: rgba(29, 29, 31, .08);
  --hairline: inset 0 0 0 .5px rgba(29, 29, 31, .12);
  --mint-text: #2E7A4C; --accent: #1F7A4D; --accent-ink: #165C3A; --btn-bg: #1D1D1F; --btn-ink: #F5F5F7;
  --ok: #1E7A45; --ok-bg: rgba(46, 160, 90, .14); --warn: #8A5A00; --warn-bg: rgba(230, 160, 30, .18);
  --bad: #B3261E; --bad-bg: rgba(220, 60, 50, .13); --info: #1F5FBF; --info-bg: rgba(31, 95, 191, .12);
  --viz-green: #2E9B5E; --viz-amber: #E0A21A; --viz-red: #D9473B; --viz-blue: #2F6FD0; --viz-muted: #8F9692;
}

/* Shift report on a phone: code, name and counts on one line, the hour boxes under them
   (otherwise the counts land under the code and push every name to a different place). */
@media (max-width: 560px) {
  .ops-report-sections li > .ops-code { grid-column: 1; grid-row: 1; }
  .ops-report-sections li > .ops-report-name { grid-column: 2; grid-row: 1; }
  .ops-report-sections li > .num { grid-column: 3; grid-row: 1; justify-self: end; white-space: nowrap; }
  .ops-report-sections li > .ops-strip { grid-column: 1 / -1; grid-row: 2; }
}