/* screens-ops.css · หน้าจอของเมนูปฏิบัติการ M5 lane S2 (/ops · /maintenance · /backups · /continuity · /capacity · /ops/reports · /vendor/pm)
   กติกาเดียวกับ screens-modules.css: สีจากตัวแปรใน themes.css เท่านั้น · ตัวอักษร ≥ 12px · ไทยไม่ถ่างตัวอักษร · บรรทัดหัวข้อ ≥ 1.45 ·
   เป้ากด ≥ 24px · สถานะใช้รูปทรง/ไอคอน + ข้อความเสมอ (ไม่ใช้สีอย่างเดียว) · ระยะ 4/8 */

.op-crumb { margin: 0 0 12px; font-size: 13px; }
.op-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); text-decoration: none; min-height: 24px; }
.op-crumb a:hover { text-decoration: underline; }
.op-crumb .ico { width: 16px; height: 16px; }
.op-lede { margin: 0 0 16px; max-width: 64rem; }

/* ── ภาพรวม ── */
.op-hub { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 16px; }
.op-card { margin: 0; }
.op-card-a { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding: 16px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg, 12px); background: var(--surf); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1, none); box-sizing: border-box; }
.op-card-a:hover { border-color: var(--input); background: var(--sel); }
.op-card-i { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: var(--r-md, 8px); background: var(--soft); color: var(--fg); display: grid; place-items: center; }
.op-card-i .ico { width: 20px; height: 20px; }
.op-card-t { font-size: 15px; font-weight: 600; line-height: 1.45; }
.op-card-d { font-size: 13px; color: var(--muted); line-height: 1.5; }
.op-card-n { font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; }
.op-card-n b { font: 500 22px/1.2 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--ink); }
.op-card-alert .op-card-a { box-shadow: inset 4px 0 0 var(--p1); }
.op-card-alert .op-card-i { background: var(--p1-bg); color: var(--p1-fg); }

/* ── ชิป / ป้าย ── */
.op-flag { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; min-height: 22px; border-radius: var(--r-sm, 6px); background: var(--p1-bg); color: var(--p1-fg);
  font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.op-flag .ico { width: 13px; height: 13px; }
.op-st .ico { width: 13px; height: 13px; stroke-width: 2; }
.op-st-scheduled { background: var(--surf); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--input); }
.op-st-in_progress, .op-st-planned, .op-st-draft { background: var(--soft); color: var(--fg); }
.op-st-submitted { background: var(--vendor-bg); color: var(--vendor-fg); }
.op-st-accepted, .op-st-approved, .op-st-completed, .op-st-issued { background: var(--teal-bg); color: var(--teal-fg); }
.op-st-overdue, .op-st-returned { background: var(--p1-bg); color: var(--p1-fg); }
.op-st-skipped, .op-st-retired, .op-st-cancelled, .op-st-void { background: var(--p4-bg); color: var(--p4-fg); }
.op-lv, .op-bk, .op-res { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.45; white-space: nowrap; }
.op-lv .ico.g, .op-bk .ico.g { width: 10px; height: 10px; }
.op-lv-crit, .op-bk-failed, .op-res-fail, .op-res-issue { color: var(--p1-fg); }
.op-lv-warn, .op-bk-warning, .op-res-partial { color: var(--p2-fg); }
.op-lv-ok, .op-bk-success, .op-res-pass, .op-res-ok { color: var(--teal-fg); }
.op-lv-none, .op-bk-none { color: var(--muted); }
.op-res .ico, .op-bk .ico:not(.g) { width: 14px; height: 14px; }
.chip.op-off { background: var(--surf2); color: var(--muted); }

/* ── แท็บ / ตาราง ── */
.op-tabs { margin-bottom: 0; }
.op-table td { vertical-align: top; }
.op-table .note, .op-steps-l .note, .op-acts .note { font-size: 12.5px; }
.op-month { justify-content: flex-start; }
.op-chart { overflow-x: auto; }
.op-chart .sc { max-width: 100%; height: auto; }
.op-sample { font: 12.5px/1.6 var(--font-mono, ui-monospace, Menlo, monospace); background: var(--surf2); color: var(--ink2); border-radius: var(--r-md, 8px); padding: 8px 12px; overflow-x: auto; }
code.sha { font: 12px/1.5 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--ink2); overflow-wrap: anywhere; }

/* ── ฟอร์ม ── */
.op-form fieldset.card { display: grid; gap: 12px; margin: 0 0 16px; padding: 14px 16px; min-width: 0; }
.op-form fieldset.card > legend { font-size: 14px; font-weight: 600; line-height: 1.45; padding: 0 4px; }
.op-form label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 13.5px; color: var(--ink2); }
.op-form label:not(.op-check) > :not(.req) { flex: 1 1 100%; min-width: 0; } /* ดอกจันอยู่บรรทัดเดียวกับชื่อช่อง */
.op-form input[type=text], .op-form input[type=number], .op-form input[type=date], .op-form input[type=month], .op-form input[type=tel],
.op-form select, .op-form textarea { min-height: 34px; width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--surf);
  border: 1px solid var(--input); border-radius: var(--r-md, 8px); padding: 6px 10px; }
.op-form textarea { min-height: 72px; }
.op-form input:disabled, .op-form select:disabled, .op-form textarea:disabled { background: var(--surf2); color: var(--ink2); }
.op-check { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: 8px; min-height: 28px; color: var(--ink); font-size: 14px; }
.op-check input { width: 18px; height: 18px; margin: 0; }
.op-radio { display: flex; flex-wrap: wrap; gap: 8px 20px; border: 0; padding: 0; margin: 0; }
.op-radio > legend { font-size: 13.5px; color: var(--ink2); padding: 0; margin-bottom: 4px; }
.op-items-t td { vertical-align: middle; }
.op-items-t input[type=text] { min-height: 30px; }
.op-items-t input[type=checkbox] { width: 20px; height: 20px; }
.op-range { white-space: nowrap; }
.op-range input { width: 6rem !important; }
.op-unit { max-width: 8rem; }
.op-steps input { min-height: 30px; }
.op-impact select { min-width: 6.5rem; }
.op-impact caption { text-align: left; font-size: 13.5px; color: var(--ink2); padding-bottom: 4px; }
.op-add > summary, details.card > summary { cursor: pointer; font-weight: 600; min-height: 28px; display: flex; align-items: center; gap: 6px; }

/* ── หน้าใบงาน / การซ้อม: สองคอลัมน์ ── */
.op-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: 16px; align-items: start; }
.op-main, .op-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; } /* M8 T: ช่องเดียวที่หดได้ (ตารางกว้างไม่ดันทั้งหน้าให้เลื่อนข้างที่ 375) */
.op-main > .card, .op-side > .card { margin: 0; }
@media (max-width: 900px) { .op-cols { grid-template-columns: minmax(0, 1fr); } }

.op-items-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-item fieldset { border: 1px solid var(--line); border-radius: var(--r-md, 8px); padding: 10px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; background: var(--surf); }
.op-item legend { padding: 0 4px; font-size: 14px; line-height: 1.5; }
.op-item-l { font-weight: 600; color: var(--ink); }
.op-item-err fieldset { border-color: var(--p1); box-shadow: inset 3px 0 0 var(--p1); }
.op-item[data-pass="fail"] fieldset { box-shadow: inset 3px 0 0 var(--p1); }
.op-item[data-pass="pass"] fieldset { box-shadow: inset 3px 0 0 var(--teal-fg); }
.op-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.op-seg-o { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--r-md, 8px);
  background: var(--surf); color: var(--ink); font-size: 13.5px; cursor: pointer; }
.op-seg-o:has(input:checked) { background: var(--sel); border-color: var(--brand); color: var(--fg); font-weight: 600; }
.op-seg-o input { margin: 0; width: 16px; height: 16px; }
.op-num, .op-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.op-num input { width: 9rem; min-height: 32px; font: inherit; border: 1px solid var(--input); border-radius: var(--r-md, 8px); padding: 4px 8px; background: var(--surf); color: var(--ink); }
.op-note input { flex: 1 1 14rem; min-height: 30px; font: inherit; border: 1px solid var(--input); border-radius: var(--r-md, 8px); padding: 4px 8px; background: var(--surf); color: var(--ink); }
.op-item fieldset:disabled .op-seg-o { cursor: default; color: var(--ink2); }
.op-files, .op-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-files + form, .op-acts + form { margin-top: 12px; }
.op-files li, .op-acts li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; line-height: 1.5; }
.op-files a { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; }
.op-files .ico, .op-crumb .ico { width: 15px; height: 15px; }
.op-decide { box-shadow: inset 4px 0 0 var(--brand), var(--shadow-1, none); }

/* ── การซ้อม: ผลเทียบเป้า ── */
.op-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 12px; margin: 0; }
.op-metrics div { background: var(--surf2); border-radius: var(--r-md, 8px); padding: 10px 12px; }
.op-metrics dt { font-size: 12.5px; color: var(--muted); }
.op-metrics dd { margin: 4px 0 0; font: 500 18px/1.35 var(--font-mono, ui-monospace, Menlo, monospace); color: var(--ink); }
.op-metrics dd.op-over { color: var(--p1-fg); }
.op-metrics dd .op-res { font: 600 14px/1.45 var(--font-sans, sans-serif); }
.op-findings { white-space: pre-line; margin: 12px 0 0; line-height: 1.6; }
.op-steps-l { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.op-steps-l > li { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; }
.op-steps-l > li[data-result="ok"] { border-left-color: var(--teal-fg); }
.op-steps-l > li[data-result="issue"] { border-left-color: var(--p1); }
.op-step-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; line-height: 1.5; }
.op-step-f { margin-top: 4px; }
.op-step-f select, .op-step-f input { min-height: 30px; }

@media (max-width: 640px) {
  .op-hub { gap: 12px; }
  .op-card-a { padding: 12px; }
  .op-num input { width: 100%; }
  .op-range input { width: 4.5rem !important; }
}
@media (prefers-reduced-motion: reduce) { .op-card-a { transition: none; } }