/* ============================================================
   SAFENTRA — TRA MODULE STYLES (SIM 06)
   Task Risk Assessment workspace: register cards, kanban,
   field-condition matrix, readiness checklist, stop work,
   dynamic review, field verification. Extends the Safentra
   design system (no glassmorphism, restrained motion).
   ============================================================ */

/* ---------- TRA register / workspace cards ---------- */
.tra-card{border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.tra-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.tra-card .tc-top{display:flex;align-items:flex-start;gap:10px}
.tra-card .tc-title{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tra-card .tc-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--color-text-3)}
.tra-card .tc-foot{display:flex;align-items:center;gap:8px;border-top:1px dashed var(--color-border);padding-top:8px;margin-top:2px}
.tra-typeic{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--tc,var(--color-border));background:var(--tb,var(--color-surface-2));color:var(--tc,var(--color-text));flex:none}
.tra-flag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;border:1px solid var(--color-border);color:var(--color-text-3)}
.tra-flag.warn{color:#B45309;border-color:#E8930C55;background:#E8930C12}
.tra-flag.crit{color:#B91C1C;border-color:#E5484D55;background:#E5484D10}
.tra-flag.ok{color:#0E9C8E;border-color:#0E9C8E55;background:#0E9C8E10}

/* ---------- kanban ---------- */
.tra-kb{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
.tra-kbcol{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:10px;min-height:120px}
.tra-kbcol .kb-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--color-border);font-size:12px;font-weight:700}
.tra-kbcol .kb-h .n{margin-left:auto;font-weight:600;color:var(--color-text-3);font-size:11px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:99px;padding:1px 8px}
.tra-kbcol .kb-b{padding:8px;display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto}
.tra-kbit{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 10px;cursor:pointer;transition:border-color .15s}
.tra-kbit:hover{border-color:var(--color-primary)}
.tra-kbit .t1{font-size:12px;font-weight:600;line-height:1.3;margin-bottom:4px}
.tra-kbit .t2{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--color-text-3)}

/* ---------- field condition matrix ---------- */
.tra-cond{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tra-cd{display:flex;align-items:center;gap:10px;border:1px solid var(--color-border);border-radius:9px;padding:8px 10px;background:var(--color-surface)}
.tra-cd .ci{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-3);flex:none}
.tra-cd .cl{flex:1;min-width:0}
.tra-cd .cl b{display:block;font-size:12px;font-weight:600}
.tra-cd .cl span{display:block;font-size:10px;color:var(--color-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tra-cd.st-unsafe{border-color:#E5484D66;background:#E5484D0A}
.tra-cd.st-unsafe .ci{color:#C81E1E;border-color:#E5484D55;background:#E5484D14}
.tra-cd.st-changed{border-color:#E8930C66;background:#E8930C0A}
.tra-cd.st-changed .ci{color:#B45309;border-color:#E8930C55;background:#E8930C14}
.cd-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;flex:none;cursor:pointer;border:1px solid transparent}
.cd-chip.n{background:#0E9C8E14;color:#0E9C8E}
.cd-chip.c{background:#E8930C18;color:#B45309}
.cd-chip.u{background:#E5484D16;color:#C81E1E}
.cd-chip.x{background:var(--color-surface-3);color:var(--color-text-3)}
.tra-cond.fr .tra-cd{cursor:pointer}
.tra-cond.fr .tra-cd:hover{border-color:var(--color-primary)}

/* ---------- readiness checklist ---------- */
.tra-ready{display:flex;flex-direction:column;gap:6px}
.tra-rd{display:flex;align-items:center;gap:10px;border:1px solid var(--color-border);border-radius:8px;padding:7px 10px;background:var(--color-surface)}
.tra-rd.crit{border-left:3px solid var(--color-primary)}
.tra-rd.blocking{border-left:3px solid #E5484D;background:#E5484D08}
.tra-rd .rl{flex:1;font-size:12px;font-weight:500}
.tra-rd .rl small{display:block;font-size:10px;color:var(--color-text-3);font-weight:400}
.rd-btns{display:flex;gap:3px;flex:none}
.rd-b{font-size:10px;font-weight:700;padding:3px 9px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-3);cursor:pointer;transition:all .12s}
.rd-b:hover{border-color:var(--color-primary)}
.rd-b.on-y{background:#0E9C8E14;border-color:#0E9C8E88;color:#0E9C8E}
.rd-b.on-n{background:#E5484D12;border-color:#E5484D88;color:#C81E1E}
.rd-b.on-x{background:var(--color-surface-3);border-color:var(--color-border);color:var(--color-text-2)}
.rd-b.on-p{background:#E8930C18;border-color:#E8930C88;color:#B45309}
.tra-rdybar{height:8px;border-radius:6px;background:var(--color-surface-3);overflow:hidden}
.tra-rdybar i{display:block;height:100%;border-radius:6px;background:var(--color-primary);transition:width .3s}

/* ---------- stop work ---------- */
.tra-swstop{border:1px solid #E8930C88;border-left:5px solid #E8930C;border-radius:10px;background:repeating-linear-gradient(-45deg,#E8930C08 0 12px,transparent 12px 24px),var(--color-surface);padding:14px 16px}
.tra-swcard{border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);padding:14px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:border-color .15s}
.tra-swcard:hover{border-color:#E8930C}
.tra-swcard.open{border-left:4px solid #E8930C}
.tra-swcard.closed{border-left:4px solid #0E9C8E;opacity:.92}
.sw-pipe{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:6px 0}
.sw-st{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:88px;flex:1;position:relative;text-align:center}
.sw-st .d{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-border);background:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--color-text-3);z-index:1}
.sw-st .lb{font-size:10px;color:var(--color-text-3);line-height:1.2;max-width:84px}
.sw-st+.sw-st::before{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--color-border);z-index:0}
.sw-st.done .d{border-color:#0E9C8E;background:#0E9C8E;color:#fff}
.sw-st.done::before{background:#0E9C8E}
.sw-st.cur .d{border-color:#E8930C;background:#E8930C18}
.sw-st.cur .lb{color:#B45309;font-weight:600}

/* ---------- dynamic review ---------- */
.tra-dyn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.tra-dyncard{border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);padding:12px 14px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:border-color .15s}
.tra-dyncard:hover{border-color:var(--color-primary)}
.dyn-dec{font-size:10px;font-weight:700;padding:3px 9px;border-radius:99px;align-self:flex-start}
.dyn-dec.go{background:#0E9C8E14;color:#0E9C8E}
.dyn-dec.hold{background:#E8930C16;color:#B45309}
.dyn-dec.stop{background:#E5484D14;color:#C81E1E}
.dyn-dec.esc{background:#8E6BF016;color:#6D3FD8}

/* ---------- map placeholder ---------- */
.tra-map{border:1.5px dashed var(--color-border-2,#CBD5E1);border-radius:10px;background:repeating-linear-gradient(0deg,var(--color-surface-2) 0 28px,var(--color-surface) 28px 29px),repeating-linear-gradient(90deg,var(--color-surface-2) 0 28px,var(--color-surface) 28px 29px);min-height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--color-text-3);position:relative;overflow:hidden}
.tra-map .pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-sm)}
.tra-map .pin span{transform:rotate(45deg);display:flex}
.tra-map .cap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 14px;font-size:12px;z-index:1;text-align:center}

/* ---------- wizard (10 steps) ---------- */
.tra-wsteps{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}
.tra-wst{flex:none;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:99px;border:1px solid var(--color-border);color:var(--color-text-3);cursor:pointer;white-space:nowrap}
.tra-wst .n{width:18px;height:18px;border-radius:50%;background:var(--color-surface-3);display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.tra-wst.on{border-color:var(--color-primary);color:var(--color-primary);background:#0F62FE0D}
.tra-wst.on .n{background:var(--color-primary);color:#fff}
.tra-wst.done{border-color:#0E9C8E88;color:#0E9C8E}
.tra-wst.done .n{background:#0E9C8E;color:#fff}
.tra-wst.err{border-color:#E5484D88;color:#C81E1E}
.tra-wval{font-size:11px;display:flex;align-items:center;gap:5px}
.tra-wval.ok{color:#0E9C8E}
.tra-wval.bad{color:#C81E1E}

/* ---------- quick preview ---------- */
.tra-prev{display:flex;flex-direction:column;gap:10px}
.tra-prev .pv-h{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;border-bottom:1px dashed var(--color-border)}

/* ---------- misc ---------- */
.tra-strip{border:1px dashed var(--color-border-2,#CBD5E2);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--color-text-3);display:flex;align-items:center;gap:8px}
.tra-band{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tra-band .arr{color:var(--color-text-3);display:flex}
.tra-colmn{columns:2;column-gap:24px}
.tra-colmn .hra-kv{break-inside:avoid}
.tra-sla{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px}
.tra-sla.ok{background:#0E9C8E14;color:#0E9C8E}
.tra-sla.bad{background:#E5484D14;color:#C81E1E}
.tra-sla.mid{background:#E8930C16;color:#B45309}

@media (max-width:1100px){
  .tra-cond{grid-template-columns:1fr}
  .tra-colmn{columns:1}
  .tra-kb{grid-auto-columns:minmax(232px,84vw)}
}