/* ============================================================
   SAFENTRA — PTW SIM 08 · APPROVAL layer
   approval center · queue · review workspace · conditions ·
   readiness · issuance. Restrained, Carbon-inspired — reuses
   tokens; no glassmorphism.
   ============================================================ */

/* ---------- approval pipeline strip (route ladder) ---------- */
.apr-ladder { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.apr-stage { position: relative; flex: 1 1 110px; min-width: 108px; border: 1px solid var(--color-border); border-radius: 6px; padding: 8px 10px 7px; background: var(--color-surface-1); font-size: 11px; }
.apr-stage .st-n { font-weight: 600; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.apr-stage .st-r { color: var(--color-text-4); font-size: 10px; margin-top: 2px; display: block; }
.apr-stage .st-w { color: var(--color-text-4); font-size: 10px; margin-top: 1px; display: block; }
.apr-stage.done { border-color: #0E9C8E66; background: #0E9C8E0D; }
.apr-stage.cur { border-color: #0F62FE; box-shadow: inset 0 0 0 1px #0F62FE; background: #0F62FE0A; }
.apr-stage.cond { border-color: #E8930C88; background: #E8930C0D; }
.apr-stage.rej { border-color: #E5484D88; background: #E5484D0A; }
.apr-stage .tick { position: absolute; top: -7px; right: 8px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #0E9C8E; }
.apr-stage.cond .tick { background: #E8930C; }
.apr-stage.rej .tick { background: #E5484D; }
.apr-stage .sla-b { position: absolute; bottom: -1px; left: -1px; height: 3px; border-radius: 0 2px 0 6px; background: #0E9C8E; }
.apr-stage .sla-b.over { background: #E5484D; }

/* ---------- queue kanban-ish lane chips ---------- */
.apr-viewchips { display: flex; flex-wrap: wrap; gap: 6px; }
.apr-vc { border: 1px solid var(--color-border); border-radius: 16px; padding: 4px 10px; font-size: 11px; cursor: pointer; background: var(--color-surface-1); color: var(--color-text-2); display: inline-flex; gap: 6px; align-items: center; }
.apr-vc b { font-weight: 600; }
.apr-vc .n { background: var(--color-surface-3); border-radius: 10px; padding: 0 7px; font-size: 10px; line-height: 16px; }
.apr-vc.act { background: #0F62FE; border-color: #0F62FE; color: #fff; }
.apr-vc.act .n { background: #ffffff2e; color: #fff; }
.apr-vc.amber { border-color: #E8930C; }
.apr-vc.red { border-color: #E5484D; }

/* ---------- split review workspace ---------- */
.rv-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }
.rv-panel { position: sticky; top: 58px; }
.rv-decision { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); }
.rv-decision .dv-h { padding: 10px 12px; border-bottom: 1px solid var(--color-border-soft); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.rv-decision .dv-b { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rv-decision .dv-b .btn { justify-content: flex-start; }

/* ---------- condition cards ---------- */
.cnd-card { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; background: var(--color-surface-1); display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.cnd-card .ci { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: #E8930C14; color: #B45309; }
.cnd-card.closed .ci { background: #0E9C8E14; color: #0E9C8E; }
.cnd-card.closed { opacity: .82; }
.cnd-card .ct { font-size: 12px; font-weight: 600; }
.cnd-card .cm { font-size: 11px; color: var(--color-text-3); margin-top: 2px; }

/* ---------- document verification matrix ---------- */
.docM { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.docM-i { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-surface-1); display: flex; gap: 8px; align-items: flex-start; }
.docM-i .di { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.docM-i .dn { font-size: 12px; font-weight: 600; }
.docM-i .ds { font-size: 10px; color: var(--color-text-4); }

/* ---------- worker eligibility cards ---------- */
.elg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.elg-card { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 10px 12px; }
.elg-card .eh { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.elg-line { display: grid; grid-template-columns: 118px 1fr; gap: 6px; font-size: 11px; padding: 2px 0; color: var(--color-text-2); }
.elg-line b { color: var(--color-text-1); font-weight: 600; }

/* ---------- readiness panel ---------- */
.rel-dim { display: grid; grid-template-columns: 150px 1fr 74px; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; }
.rel-dim .bar { height: 9px; border-radius: 5px; background: var(--color-surface-3); overflow: hidden; display: block; }
.rel-dim .bar i { display: block; height: 100%; border-radius: 5px; }
.rel-block { border: 1px solid #E5484D55; background: #E5484D0A; border-radius: 8px; padding: 8px 10px; font-size: 12px; display: flex; gap: 8px; align-items: flex-start; }
.rel-score { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 24px; border: 4px solid; flex: none; }

/* ---------- issue / release dialogs ---------- */
.rel-sign { border: 1px dashed var(--color-border); border-radius: 8px; padding: 14px; text-align: center; color: var(--color-text-4); font-size: 11px; background: var(--color-surface-2); }

/* ---------- active permit board ---------- */
.apb { display: grid; grid-template-columns: repeat(5, minmax(215px, 1fr)); gap: 10px; align-items: start; }
.apb-col { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: 8px; display: flex; flex-direction: column; min-height: 120px; }
.apb-h { padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--color-border-soft); }
.apb-h .n { margin-left: auto; background: var(--color-surface-3); border-radius: 10px; padding: 0 8px; font-size: 10px; line-height: 16px; }
.apb-b { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.apb-card { border: 1px solid var(--color-border); border-left-width: 3px; border-radius: 6px; padding: 8px 9px; background: var(--color-surface-2); cursor: pointer; font-size: 11px; }
.apb-card:hover { border-color: #0F62FE88; border-left-color: inherit; }
.apb-card .t { font-weight: 600; font-size: 11px; line-height: 1.35; }
.apb-card .m { color: var(--color-text-4); font-size: 10px; margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- field permit (printable/tablet) ---------- */
.fp { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.fp-hd { background: #0F2A5C; color: #fff; padding: 14px 18px; display: flex; gap: 14px; align-items: center; }
.fp-hd .qr { width: 56px; height: 56px; border-radius: 6px; background: repeating-conic-gradient(#fff 0 25%, #0F2A5C 0 50%) 50% / 12px 12px; border: 3px solid #fff; flex: none; }
.fp-sec { padding: 12px 18px; border-bottom: 1px solid var(--color-border-soft); }
.fp-sec h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-3); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.fp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fp-kv { font-size: 11px; }
.fp-kv span { display: block; color: var(--color-text-4); font-size: 10px; }
.fp-kv b { font-weight: 600; font-size: 12px; }

/* ---------- print ---------- */
@media print {
  body * { visibility: hidden !important; }
  .fp-print-scope, .fp-print-scope * { visibility: visible !important; }
  .fp-print-scope { position: absolute; inset: 0; background: #fff; }
}

/* ---------- laptop / tablet ---------- */
@media (max-width: 1180px) {
  .rv-split { grid-template-columns: minmax(0, 1fr) 330px; }
  .apb { grid-template-columns: repeat(3, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
  .rv-split { grid-template-columns: 1fr; }
  .rv-panel { position: static; }
  .apr-stage { min-width: 96px; padding: 7px 8px 6px; }
}
@media (max-width: 780px) {
  .apb { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .fp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .apb { grid-template-columns: 1fr; }
  .docM { grid-template-columns: 1fr; }
  .elg-grid { grid-template-columns: 1fr; }
}