/* ============================================================
   SAFENTRA — PTW SIM 09 · OPERATIONS layer
   operations command center · live permit detail · active board
   v2 · validity monitor · progress · revalidation · gas/entry/
   fire-watch/lift monitors · daily coordination. Restrained,
   operations-dense, Carbon-inspired — reuses tokens.
   ============================================================ */

/* ---------- operational KPI grid (compact) ---------- */
.ops-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.ops-kpi { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 9px 11px 8px; cursor: pointer; position: relative; }
.ops-kpi .kn { font-size: 22px; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ops-kpi .kl { font-size: 10px; color: var(--color-text-3); margin-top: 3px; letter-spacing: .2px; }
.ops-kpi .ki { position: absolute; top: 8px; right: 9px; color: var(--color-text-4); }
.ops-kpi.crit { border-left: 3px solid #E5484D; }
.ops-kpi.warn { border-left: 3px solid #E8930C; }
.ops-kpi.ok { border-left: 3px solid #0E9C8E; }
.ops-kpi.info { border-left: 3px solid #0F62FE; }

/* ---------- live sections grid ---------- */
.ops-sec { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.ops-panel { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); overflow: hidden; }
.ops-panel .ph { padding: 9px 12px; border-bottom: 1px solid var(--color-border-soft); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.ops-panel .ph .n { margin-left: auto; font-size: 10px; background: var(--color-surface-3); border-radius: 10px; padding: 1px 8px; }
.ops-panel .pb { padding: 6px 10px 8px; max-height: 260px; overflow: auto; }
.ops-row { display: grid; grid-template-columns: 82px 1fr auto; gap: 8px; padding: 6px 4px; border-bottom: 1px dashed var(--color-border-soft); font-size: 11px; align-items: center; cursor: pointer; }
.ops-row:last-child { border-bottom: 0; }
.ops-row .no { font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-row .tx { color: var(--color-text-2); }
.ops-row .tx small { color: var(--color-text-4); display: block; font-size: 10px; }
.ops-row:hover { background: var(--color-surface-2); }

/* ---------- operational status chip ---------- */
.ost-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; padding: 2px 9px; font-size: 10px; font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-2); }
.ost-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.ost-chip.t-ok { color: #0B7C71; border-color: #0E9C8E55; background: #0E9C8E0F; }
.ost-chip.t-ok .dot { background: #0E9C8E; }
.ost-chip.t-warn { color: #B45309; border-color: #E8930C66; background: #E8930C0F; }
.ost-chip.t-warn .dot { background: #E8930C; }
.ost-chip.t-crit { color: #B91C1C; border-color: #E5484D66; background: #E5484D10; }
.ost-chip.t-crit .dot { background: #E5484D; }
.ost-chip.t-info { color: #0F62FE; border-color: #0F62FE55; background: #0F62FE0D; }
.ost-chip.t-info .dot { background: #0F62FE; }
.ost-chip.t-gray { color: var(--color-text-3); }
.ost-chip.t-gray .dot { background: var(--color-text-4); }

/* ---------- validity monitor ---------- */
.oval { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.oval .vs { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.oval .vs .ic { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; }
.oval.s-valid .ic { background: #0E9C8E14; color: #0E9C8E; }
.oval.s-soon .ic { background: #E8930C16; color: #B45309; }
.oval.s-ext .ic { background: #0F62FE14; color: #0F62FE; }
.oval.s-expired .ic, .oval.s-susp .ic, .oval.s-inv .ic { background: #E5484D14; color: #B91C1C; }
.oval.s-expired, .oval.s-susp, .oval.s-inv { border-color: #E5484D88; background: #E5484D08; }
.oval .vd { font-size: 11px; color: var(--color-text-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.oval .vd b { color: var(--color-text-1); font-variant-numeric: tabular-nums; }
.oval .bignote { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 6px; background: #E5484D; color: #fff; white-space: nowrap; }
.oval .bignote.amber { background: #E8930C; }
.oval .bignote.blue { background: #0F62FE; }

/* ---------- live detail header ---------- */
.live-head { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-1); padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.live-head .lt { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.live-head .lt .no { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.live-head .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--color-text-3); margin-top: 5px; }
.live-head .meta b { color: var(--color-text-1); }
.live-head .pa { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 210px; }

/* ---------- live status facts ---------- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.live-fact { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface-1); }
.live-fact .fl { font-size: 10px; color: var(--color-text-4); text-transform: uppercase; letter-spacing: .3px; }
.live-fact .fv { font-size: 12px; font-weight: 600; margin-top: 3px; }
.live-fact .fs { font-size: 10px; color: var(--color-text-4); margin-top: 1px; }
.live-fact.bad { border-color: #E5484D77; background: #E5484D0A; }
.live-fact.warn { border-color: #E8930C77; background: #E8930C09; }

/* ---------- work progress timeline ---------- */
.prg-item { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 8px 0 8px 2px; border-left: 2px solid var(--color-border-soft); padding-left: 14px; position: relative; }
.prg-item::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: #0F62FE; }
.prg-item .pd { font-size: 10px; color: var(--color-text-4); }
.prg-item .pb2 { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface-1); }
.prg-bar { height: 7px; border-radius: 4px; background: var(--color-surface-3); overflow: hidden; }
.prg-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #0F62FE, #0E9C8E); }
.prg-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 10px; color: var(--color-text-3); margin-top: 5px; }

/* ---------- board v2 ---------- */
.apb2 { display: grid; grid-template-columns: repeat(8, minmax(205px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.apb2-lane { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-2); min-height: 120px; }
.apb2-lane .lh { padding: 8px 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--color-border-soft); position: sticky; top: 0; background: var(--color-surface-2); border-radius: 8px 8px 0 0; z-index: 1; }
.apb2-lane .lh .n { margin-left: auto; background: var(--color-surface-3); border-radius: 9px; padding: 0 7px; font-size: 10px; }
.apb2-lane .lb { padding: 6px; display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow: auto; }
.apb-card { border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface-1); padding: 7px 9px; font-size: 10.5px; cursor: pointer; }
.apb-card:hover { box-shadow: 0 0 0 1.5px #0F62FE; }
.apb-card .no { font-weight: 700; font-size: 11px; display: flex; justify-content: space-between; gap: 6px; }
.apb-card .ti { color: var(--color-text-2); margin: 2px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apb-card .r1 { display: flex; flex-wrap: wrap; gap: 2px 8px; color: var(--color-text-4); font-size: 10px; }
.apb-card .badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.apb-card .vtime { font-variant-numeric: tabular-nums; font-weight: 600; }
.apb-card .vtime.bad { color: #B91C1C; }

/* ---------- monitor panels (gas / entry / fire watch / lift) ---------- */
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mon-card { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 10px 12px; }
.mon-card .mh { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.mon-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 11px; }
.mon-kv dt { color: var(--color-text-4); }
.mon-kv dd { font-weight: 600; text-align: right; }
.ent-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; font-size: 11px; padding: 5px 2px; border-bottom: 1px dashed var(--color-border-soft); align-items: center; }
.ent-row:last-child { border-bottom: 0; }

/* ---------- checklist row (large touch targets, tablet-first) ---------- */
.chk19 { display: flex; flex-direction: column; gap: 6px; }
.chk-row { border: 1px solid var(--color-border); border-radius: 8px; padding: 9px 12px; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: var(--color-surface-1); }
.chk-row .cn { font-size: 12.5px; font-weight: 600; }
.chk-row .cr { display: inline-flex; gap: 6px; }
.chk-row .cv { border: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 7px; padding: 7px 14px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.chk-row .cv.on-y { background: #0E9C8E; border-color: #0E9C8E; color: #fff; }
.chk-row .cv.on-n { background: #E5484D; border-color: #E5484D; color: #fff; }
.chk-row .cv.on-x { background: #0F62FE; border-color: #0F62FE; color: #fff; }

/* ---------- daily coordination board ---------- */
.daily-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.daily-card { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 9px 11px; }
.daily-card .dh { font-size: 11px; font-weight: 700; display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.daily-card .dn { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daily-card .ds { font-size: 10px; color: var(--color-text-4); margin-top: 2px; }

/* ---------- sticky action footer (tablet field flow) ---------- */
.ops-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-border); background: var(--color-surface-1); border-radius: 10px 10px 0 0; box-shadow: 0 -2px 10px rgba(15, 23, 42, .06); }
.ops-actions .btn { min-height: 42px; padding: 9px 16px; font-weight: 600; }

/* ---------- extension flow chips ---------- */
.ext-flow { display: flex; flex-wrap: wrap; gap: 6px; }
.ext-fc { border: 1px dashed var(--color-border); border-radius: 16px; padding: 4px 10px; font-size: 10.5px; color: var(--color-text-3); background: var(--color-surface-1); }
.ext-fc.on { border-style: solid; border-color: #0F62FE; color: #0F62FE; font-weight: 700; }

/* ---------- revalidation result banner ---------- */
.rev-banner { border-radius: 8px; border: 1px solid #0E9C8E66; background: #0E9C8E0D; color: #0B7C71; padding: 9px 12px; font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.rev-banner.warn { border-color: #E8930C88; background: #E8930C0D; color: #B45309; }
.rev-banner.crit { border-color: #E5484D88; background: #E5484D0C; color: #B91C1C; }