/* ============================================================
   SAFENTRA — LOTO PART 06 · Isolation Diagram workspace · Data
   Quality command center · Equipment readiness · PTW panel ·
   Reports · Analytics. Carbon-inspired; restrained enterprise
   signals; color is never the sole indicator (text pairs).
   ============================================================ */

/* ---------- tab strip (equipment view) ---------- */
.apr-vtc { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.apr-vt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface-1); color: var(--color-text-2); font-size: 12px; text-decoration: none; transition: border-color .15s, background .15s; }
.apr-vt:hover { border-color: var(--blue-300); color: var(--color-text-1); }
.apr-vt.act { background: var(--blue-50); border-color: var(--color-primary); color: var(--blue-800); font-weight: 650; }

/* ---------- isolation diagram workspace ---------- */
.dq-eqsel { max-width: 340px; }
.dq-scroll { overflow: auto; border: 1px solid var(--color-border); border-radius: 10px; background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface-1)); padding: 14px 10px 6px; max-width: 100%; }
.dq-zoom { display: inline-block; min-width: 100%; }
.dq-svg { display: block; }
.dq-band-r { fill: transparent; stroke: var(--color-border); stroke-dasharray: 2 4; opacity: .55; transition: fill .15s, stroke .15s; }
.dq-bw { cursor: pointer; }
.dq-bw .dq-band-r { pointer-events: none; }
.dq-bw:hover .dq-band-r { fill: var(--blue-50); stroke: var(--blue-300); opacity: 1; }
.dq-bw.dq-hot .dq-band-r { fill: var(--blue-50); stroke: var(--color-primary); stroke-width: 1.6; stroke-dasharray: none; opacity: 1; }
.dq-bw.dq-hot .dq-conn { stroke: var(--color-primary); stroke-width: 2.2; }
.dq-band-cap { font-size: 8.5px; font-weight: 700; letter-spacing: .6px; fill: var(--color-text-4); }
.dq-node { cursor: pointer; }
.dq-node-r { fill: var(--color-surface-1); stroke: var(--color-border-strong, #94A3B8); stroke-width: 1.1; filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .06)); }
.dq-node:hover .dq-node-r { stroke: var(--color-primary); }
.dq-es .dq-node-r { fill: var(--blue-50); stroke: var(--blue-300); }
.dq-pt .dq-node-r { fill: #fff; stroke: var(--teal-600); }
.dq-critp .dq-node-r { stroke: var(--red-400, #DC2626); stroke-width: 1.4; }
.dq-crit-mode .dq-node:not(.dq-critp):not(.dq-eq) { opacity: .55; }
.dq-critp-on .dq-node-r { stroke: var(--red-500); stroke-width: 2.2; }
.dq-stored .dq-node-r { fill: #ECFDF5; stroke: var(--teal-600); stroke-dasharray: 5 3; }
.dq-gap .dq-node-r { fill: var(--amber-50, #FFFBEB); stroke: var(--amber-500); stroke-dasharray: 5 3; }
.dq-nd-t { font-size: 10.5px; font-weight: 700; fill: var(--color-text-1); }
.dq-nd-l { font-size: 8.6px; fill: var(--color-text-3); }
.dq-conn { stroke: #94A3B8; stroke-width: 1.5; }
.dq-dash { stroke-dasharray: 4 4; }
.dq-arh { fill: #94A3B8; }
.dq-chip rect { fill: #fff; stroke-width: 1; }
.dq-chip text { font-size: 8.4px; font-weight: 650; }
.dq-chip.t-ok rect { stroke: var(--color-success); } .dq-chip.t-ok text { fill: #047857; }
.dq-chip.t-warn rect { stroke: var(--amber-500); } .dq-chip.t-warn text { fill: #B45309; }
.dq-chip.t-crit rect { stroke: var(--red-500); } .dq-chip.t-crit text { fill: #B91C1C; }
.dq-chip.t-info rect { stroke: var(--color-primary); } .dq-chip.t-info text { fill: var(--blue-700); }
.dq-chip.t-gray rect { stroke: #94A3B8; } .dq-chip.t-gray text { fill: var(--color-text-3); }
.dq-more { font-size: 9px; fill: var(--color-text-3); font-style: italic; }
.dq-eq .dq-node-r, .dq-eq rect { fill: var(--color-primary); stroke: var(--blue-700); }
.dq-eq-t { font-size: 12px; font-weight: 750; fill: #fff; }
.dq-eq-l { font-size: 9px; fill: #DBEAFE; }
.dq-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 10px; font-size: 11px; color: var(--color-text-3); }
.dq-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dq-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1.5px solid; }
.dq-sw.ok { border-color: var(--color-success); background: #ECFDF5; }
.dq-sw.info { border-color: var(--color-primary); background: var(--blue-50); }
.dq-sw.warn { border-color: var(--amber-500); background: #FFFBEB; }
.dq-sw.crit { border-color: var(--red-500); background: #FEF2F2; }
.dq-sw.gray { border-color: #94A3B8; background: #F1F5F9; }
.dq-sw.stored { border-color: var(--teal-600); background: #ECFDF5; }
.tbl-wrap.mini { overflow: auto; }
.tbl.compact td, .tbl.compact th { padding: 7px 10px; font-size: 12px; }
.mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }

/* ---------- data quality summary scan cards ---------- */
.dq-scan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dq-sc { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--color-border); border-radius: 9px; padding: 9px 10px; background: var(--color-surface-1); text-decoration: none; color: var(--color-text-2); transition: border-color .15s, box-shadow .15s; }
.dq-sc:hover { border-color: var(--blue-300); box-shadow: var(--ring); }
.dq-sc.act { border-color: var(--color-primary); box-shadow: var(--ring); background: var(--blue-50); }
.dq-sc-i { color: var(--color-primary); margin-top: 2px; flex: none; }
.dq-sc-n { font-size: 20px; font-weight: 800; color: var(--color-text-1); line-height: 1; }
.dq-sc-l { display: block; font-size: 10px; color: var(--color-text-3); line-height: 1.25; margin-top: 2px; }
.dq-sc .dq-sc-l { grid-column: 1 / -1; }
.dq-sc { flex-direction: column; gap: 3px; }
.dq-sc.zero { opacity: .62; }
.dq-sc.zero .dq-sc-n { color: var(--color-success); }

/* ---------- category row ---------- */
.dq-catrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.dq-cat { display: flex; align-items: center; gap: 7px; border: 1px solid var(--color-border); border-radius: 9px; padding: 8px 10px; background: var(--color-surface-1); text-decoration: none; color: var(--color-text-2); font-size: 11.5px; font-weight: 600; transition: border-color .15s; }
.dq-cat:hover { border-color: var(--blue-300); }
.dq-cat.act { border-color: var(--color-primary); background: var(--blue-50); color: var(--blue-800); }
.dq-cat svg { color: var(--color-primary); flex: none; }
.dq-cat .n { margin-left: auto; background: var(--color-surface-3); border-radius: 999px; min-width: 20px; text-align: center; font-size: 10.5px; padding: 1px 6px; color: var(--color-text-2); }
.dq-cat .o { display: block; width: 100%; font-size: 9.5px; font-weight: 500; color: var(--amber-600); flex-basis: 100%; padding-left: 23px; }
.dq-cat .o.ok { color: var(--color-success); }
.dq-cat { flex-wrap: wrap; }

/* ---------- queue extras ---------- */
.lot-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-2); }
.lot-cat svg { color: var(--color-primary); }
.dq-qt { font-size: 12px; max-width: 300px; }
.dq-cellwrap { display: block; max-width: 240px; font-size: 11.5px; }
.dq-rep-q { max-width: 220px; }

/* ---------- timeline ---------- */
.dq-tl { display: flex; flex-direction: column; gap: 10px; }
.dq-tl-it { display: flex; gap: 10px; position: relative; }
.dq-tl-it:not(:last-child)::before { content: ''; position: absolute; left: 4.5px; top: 12px; bottom: -10px; width: 1.5px; background: var(--color-border); }
.dq-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); margin-top: 4px; flex: none; box-shadow: 0 0 0 3px var(--blue-50); }
.dq-tl .tt { font-size: 12.5px; font-weight: 650; color: var(--color-text-1); }
.dq-tl .tt small { display: block; font-weight: 500; color: var(--color-text-4); font-size: 10.5px; }
.dq-tl .ts { font-size: 11.5px; color: var(--color-text-3); margin-top: 2px; }

/* ---------- readiness banner / blockers ---------- */
.dq-rdy { border-radius: 10px; padding: 12px 14px; border: 1.5px solid; }
.dq-rdy-t { display: flex; align-items: flex-start; gap: 10px; }
.dq-rdy-ok { background: #F0FDF4; border-color: #86EFAC; } .dq-rdy-ok .dq-rdy-t svg { color: var(--color-success); }
.dq-rdy-warn { background: #FFFBEB; border-color: #FCD34D; } .dq-rdy-warn .dq-rdy-t svg { color: #B45309; }
.dq-rdy-crit { background: #FEF2F2; border-color: #FCA5A5; } .dq-rdy-crit .dq-rdy-t svg { color: #B91C1C; }
.dq-rdy-gray { background: #F8FAFC; border-color: #CBD5E1; } .dq-rdy-gray .dq-rdy-t svg { color: var(--color-text-3); }
.dq-blklist { display: flex; flex-direction: column; gap: 6px; }
.dq-blk { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-2); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 10px; }
.dq-ptwp .live-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- reports ---------- */
.dq-rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.dq-rp { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; background: var(--color-surface-1); text-decoration: none; color: var(--color-text-2); transition: border-color .15s, box-shadow .15s; }
.dq-rp:hover { border-color: var(--blue-300); box-shadow: var(--ring); }
.dq-rp b { font-size: 12.5px; color: var(--color-text-1); }
.dq-rp small { display: block; font-size: 10.5px; color: var(--color-text-4); margin-top: 1px; }
.dq-rp-i { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.dq-rp-n { font-size: 13px; font-weight: 700; color: var(--color-text-1); background: var(--color-surface-3); border-radius: 999px; padding: 2px 9px; }

/* ---------- analytics ---------- */
.dq-an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dq-donut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dq-dleg { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--color-text-2); min-width: 150px; }
.dq-dleg span { display: inline-flex; align-items: center; gap: 7px; }
.dq-dleg i { width: 9px; height: 9px; border-radius: 2.5px; display: inline-block; }

/* ---------- equipment hero extras ---------- */
.eq-blknote { font-size: 11px; color: var(--color-text-3); }

/* ---------- responsive: laptop ≤1180 / tablet ≤900,768 ---------- */
@media (max-width: 1180px) {
  .dq-scan { grid-template-columns: repeat(4, 1fr); }
  .dq-catrow { grid-template-columns: repeat(4, 1fr); }
  .dq-an-grid { grid-template-columns: 1fr; }
  .dq-ptwp .live-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .dq-scan { grid-template-columns: repeat(3, 1fr); }
  .dq-catrow { grid-template-columns: repeat(3, 1fr); }
  .dq-rp-grid { grid-template-columns: 1fr; }
  .dq-eqsel { max-width: 100%; }
}
@media (max-width: 768px) {
  .dq-scan { grid-template-columns: repeat(2, 1fr); }
  .dq-catrow { grid-template-columns: repeat(2, 1fr); }
  .dq-ptwp .live-grid { grid-template-columns: 1fr; }
  .dq-scroll { padding: 10px 6px 4px; }
  .dq-band-cap { font-size: 9.5px; }
  .apr-vt { padding: 8px 11px; min-height: 38px; }
  .dq-rdy-t { flex-wrap: wrap; }
  .dq-blk { align-items: flex-start; }
  .dq-blk .ost-chip { margin-top: 1px; }
  .dq-donut { gap: 10px; }
}