/* ============================================================
   SAFENTRA — LOCK · TAG · ASSIGNMENT · INVENTORY · SIM 10 PART 05
   Lock/tag register surfaces: kind tabs, color swatches (never
   color-alone — always text-labelled), KPI grids, worker
   eligibility panel, tag print preview (generic Safentra
   layout), storage type bars, warning rows. Reuses tokens,
   lot-kpi cards, live-fact grids, lotes-*/lotip-* shells from
   Parts 02–04.
   ============================================================ */

/* ---------- kind switch tabs (Locks | Tags | Inventory) ---------- */
.lotlt-kindtabs { display: flex; gap: 6px; margin: 0 0 12px; }
.lotlt-kindtabs a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); font-size: 12px; font-weight: 600; color: var(--color-text-2); text-decoration: none; }
.lotlt-kindtabs a.on { border-color: #0F62FE66; background: #0F62FE0A; color: #0F62FE; }
.dark .lotlt-kindtabs a.on, [data-theme="dark"] .lotlt-kindtabs a.on { color: #93BBFB; }

/* ---------- KPI grids ---------- */
.lotlt-kpis9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.lotlt-kpis12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lotlt-kpis7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lot-kpi.sts { cursor: default; }

/* ---------- color swatch — always paired with text label ---------- */
.lotlt-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); margin-right: 6px; vertical-align: -1px; }
.lotlt-swatch.style-red { background: #DC2626; }
.lotlt-swatch.style-yellow { background: #FACC15; }
.lotlt-swatch.style-blue { background: #2563EB; }
.lotlt-swatch.style-green { background: #16A34A; }
.lotlt-swatch.style-orange { background: #EA580C; }
.lotlt-swatch.style-purple { background: #7C3AED; }
.lotlt-swatch.style-black { background: #111827; }
.lotlt-swatch.style-brass { background: #B45309; }
.lotlt-swatch.style-white { background: #F8FAFC; }
.lotlt-swatch.style-gray { background: #94A3B8; }

/* ---------- exception record lines on detail ---------- */
.lotlt-exc { border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.5; margin-top: 8px; }
.lotlt-exc.q { border: 1px solid #F59E0B55; border-left: 4px solid #F59E0B; background: #F59E0B0A; color: #92600B; }
.lotlt-exc.d { border: 1px solid #E5484D55; border-left: 4px solid #E5484D; background: #E5484D0A; color: #B91C1C; }
.lotlt-exc.l { border: 1px solid #7C3AED55; border-left: 4px solid #7C3AED; background: #7C3AED0A; color: #5B21B6; }
.lotlt-exc.r { border: 1px solid var(--color-border); border-left: 4px solid #64748B; background: var(--color-surface-2); color: var(--color-text-2); }
.dark .lotlt-exc.q, [data-theme="dark"] .lotlt-exc.q { color: #FCD34D; }
.dark .lotlt-exc.d, [data-theme="dark"] .lotlt-exc.d { color: #FCA5A5; }
.dark .lotlt-exc.l, [data-theme="dark"] .lotlt-exc.l { color: #C4B5FD; }

/* ---------- worker eligibility panel ---------- */
.lotlt-elig { border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface-1); overflow: hidden; margin: 10px 0; }
.lotlt-elig-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); font-size: 12.5px; }
.lotlt-elig-c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--color-border); }
.lotlt-eli { display: flex; gap: 8px; align-items: flex-start; padding: 8px 11px; background: var(--color-surface-1); font-size: 11.5px; }
.lotlt-eli b { font-size: 11.5px; display: block; }
.lotlt-eli small { color: var(--color-text-3); line-height: 1.35; display: block; }
.lotlt-eli.pass { color: #0E9C8E; }
.lotlt-eli.warn { color: #B45309; }
.lotlt-eli.fail { color: #E5484D; }
.lotlt-eli.na { color: var(--color-text-3); }
.lotlt-eli .ms-auto { margin-left: auto; flex: none; }
.lotlt-eli .tag { flex: none; }

/* ---------- tag print preview ---------- */
.lotlt-tagcard { max-width: 520px; border: 2px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface-1); }
.lotlt-tag-band { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.lotlt-tagcard.danger .lotlt-tag-band { background: #DC2626; color: #fff; }
.lotlt-tagcard.std .lotlt-tag-band { background: var(--color-surface-2); color: var(--color-text-1); border-bottom: 1px solid var(--color-border); }
.lotlt-tag-band b { font-size: 22px; letter-spacing: 1.5px; display: block; }
.lotlt-tag-band span { font-size: 12px; letter-spacing: 2.5px; font-weight: 700; opacity: .92; display: block; }
.lotlt-tag-body { padding: 14px 16px; }
.lotlt-tag-no { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; margin-bottom: 10px; color: var(--color-text-1); }
.lotlt-tag-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border); font-size: 11px; color: var(--color-text-3); display: flex; gap: 6px; align-items: center; }
.lotlt-tagband-note { font-size: 10.5px; color: var(--color-text-3); margin-top: 6px; }

/* ---------- usage placeholder card ---------- */
.lotlt-usageph { display: flex; gap: 12px; align-items: flex-start; border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface-2); padding: 14px; font-size: 12.5px; line-height: 1.5; color: var(--color-text-1); }
.lotlt-usageph .ic { flex: none; color: var(--color-text-3); margin-top: 2px; }

/* ---------- storage type bars ---------- */
.lotlt-typebar { display: flex; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--color-border); font-size: 12px; }
.lotlt-typebar:last-child { border-bottom: 0; }

/* ---------- inventory warning rows ---------- */
.lotlt-warn { display: flex; gap: 8px; align-items: flex-start; border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.45; }
.lotlt-warn.warn { border: 1px solid #F59E0B55; border-left: 4px solid #F59E0B; background: #F59E0B0A; color: #92600B; }
.lotlt-warn.crit { border: 1px solid #E5484D55; border-left: 4px solid #E5484D; background: #E5484D0A; color: #B91C1C; }
.dark .lotlt-warn.warn, [data-theme="dark"] .lotlt-warn.warn { color: #FCD34D; }
.dark .lotlt-warn.crit, [data-theme="dark"] .lotlt-warn.crit { color: #FCA5A5; }

/* ---------- inspection history rows ---------- */
.lotlt-insp { border-bottom: 1px solid var(--color-border); padding: 8px 2px; font-size: 12px; }
.lotlt-insp:last-child { border-bottom: 0; }
.lotlt-insp small { display: block; margin-top: 2px; }

/* ---------- related-worker holder list ---------- */
.lotlt-holderlist { display: flex; flex-wrap: wrap; gap: 8px; }
.lotlt-holderlist a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-1); padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--color-text-1); text-decoration: none; }

/* ---------- register table clip ---------- */
#ltTable .data-table { min-width: 1380px; }
#ttTable .data-table { min-width: 1280px; }
#ltTable .tbl-wrap, #ttTable .tbl-wrap, #ltTable > div, #ttTable > div { overflow-x: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .lotlt-kpis9 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lotlt-kpis12 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lotlt-kpis7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lotlt-elig-c { grid-template-columns: 1fr; }
  .lotlt-kpis9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lotlt-kpis7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet field use — large tap targets for lookup / assign / issue /
   return / damage reporting / inventory inspection */
@media (max-width: 768px) {
  .lotlt-kpis9, .lotlt-kpis12, .lotlt-kpis7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lotlt-kindtabs a { padding: 10px 14px; min-height: 44px; }
  .lotlt-holderlist a { padding: 10px 12px; min-height: 44px; }
  .lotlt-tag-no { font-size: 24px; }
  .lotlt-elig-c { gap: 1px; }
  .lotlt-eli { padding: 10px 11px; }
}