/* ============================================================
   SAFENTRA — ISOLATION POINTS · METHODS · VERIFICATION · SIM 10 PART 04
   Register filter bar + KPI row, point hero + 10 tabs, the
   Physical Identification Card (tablet field-workflow ready),
   field-verification drawer controls, method/verification/device
   hub tables. Reuses tokens, ops-kpi cards, live-fact grids,
   tags, hra hints and the lotes-*/lotep-* shells from Parts 02/03.
   ============================================================ */

/* ---------- persistent safety banner ---------- */
.lotip-banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #0F62FE44; background: #0F62FE08; color: #1743A8; border-radius: 8px; padding: 9px 12px; font-size: 12px; line-height: 1.45; }
.dark .lotip-banner, [data-theme="dark"] .lotip-banner { color: #93BBFB; }

/* ---------- critical-point explanation ---------- */
.lotip-crit { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #E5484D55; border-left: 4px solid #E5484D; background: #E5484D0A; color: #B91C1C; border-radius: 8px; padding: 9px 12px; font-size: 12px; line-height: 1.45; }
.dark .lotip-crit, [data-theme="dark"] .lotip-crit { color: #FCA5A5; }

/* ---------- register table clip ---------- */
.lotip-clip { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ipTbl .data-table { min-width: 1400px; }
#ipTbl .tbl-wrap, #ipTbl > div { overflow-x: auto; }

/* ---------- Physical Identification Card ---------- */
.lotip-idcard { border: 2px solid #0F62FE33; border-radius: 12px; background: var(--color-surface-1); padding: 16px; }
.lotip-idcard-h { display: flex; align-items: flex-start; gap: 14px; }
.lotip-id-code { font-size: 26px; font-weight: 800; letter-spacing: .4px; color: var(--color-text-1); font-variant-numeric: tabular-nums; }
.lotip-id-name { font-size: 13px; font-weight: 600; color: var(--color-text-2); margin-top: 2px; }
.lotip-idcard-h .lotip-qr { margin-left: auto; }
.lotip-qr { display: inline-grid; place-items: center; gap: 4px; color: var(--color-text-3); flex: none; }
.lotip-qr small { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; }
.lotip-id-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.lotip-id-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.lotip-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.lotip-photo { border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface-2); min-height: 96px; display: grid; place-content: center; justify-items: center; gap: 5px; padding: 10px; color: var(--color-text-3); text-align: center; }
.lotip-photo b { font-size: 11.5px; color: var(--color-text-1); }
.lotip-photo small { font-size: 10px; }
.lotip-photo.cap { border-style: solid; border-color: #0E9C8E66; background: #0E9C8E0A; color: #0E9C8E; }
.lotip-photo.cap b { color: #0B7A6F; }
.lotip-id-note { border: 1px solid var(--color-border); border-left: 4px solid #0F62FE; background: var(--color-surface-2); border-radius: 8px; padding: 8px 11px; font-size: 12px; color: var(--color-text-1); margin-bottom: 8px; }
.lotip-id-note.warn { border-left-color: #F59E0B; }
.lotip-id-note svg { color: var(--color-text-3); }

/* ---------- obsolete record note ---------- */
.lotip-obso { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--color-border); border-left: 4px solid var(--color-text-3); background: var(--color-surface-2); border-radius: 8px; padding: 9px 11px; font-size: 12px; color: var(--color-text-2); }

/* ---------- field-verification drawer ---------- */
.lotip-fv-photo { display: flex; gap: 10px; align-items: center; border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface-2); padding: 14px 12px; font-size: 12px; color: var(--color-text-3); }
.lotip-fv-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 12px; }
.lotip-fv-res { display: flex; flex-wrap: wrap; gap: 8px; }
.lotip-fv-opt { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--color-text-1); background: var(--color-surface-2); }
.lotip-fv-opt input { accent-color: #0F62FE; }
.lotip-fv-opt.act { border-color: #0F62FE88; background: #0F62FE0D; }
.lotip-fv-issues { display: flex; flex-wrap: wrap; gap: 7px; }
.lotip-chip { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-1); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.lotip-chip.act { border-color: #E5484D88; background: #E5484D12; color: #B91C1C; font-weight: 600; }

/* ---------- form photo capture buttons ---------- */
.lotip-photoEdit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.lotip-photoBtn { display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 86px; border: 1.5px dashed var(--color-border); border-radius: 10px; background: var(--color-surface-2); color: var(--color-text-3); font: inherit; font-size: 10.5px; cursor: pointer; text-align: center; padding: 8px; }
.lotip-photoBtn span { font-size: 10.5px; }
.lotip-photoBtn b { font-size: 10px; color: var(--color-text-1); }
.lotip-photoBtn.cap { border-style: solid; border-color: #0E9C8E66; background: #0E9C8E0A; color: #0E9C8E; }
.lotip-photoBtn.ghost { cursor: default; border-style: solid; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .lotip-id-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lotip-photos { grid-template-columns: 1fr 1fr; }
  .lotip-photoEdit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .lotip-id-grid, .lotip-photos { grid-template-columns: 1fr; }
  .lotip-idcard-h { flex-wrap: wrap; }
  .lotip-idcard-h .lotip-qr { margin-left: 0; }
  .lotip-fv-checks { grid-template-columns: 1fr; }
  .lotip-photo, .lotip-photoBtn { min-height: 110px; } /* touch-friendly tablet tiles */
}