/* ---- Vision Management Platform - style.css, part 3 of 5 ---- */
/* Phase 12 of frontend modularization: style.css was split into 5 files
   at safe boundaries (verified comment/string/brace-aware, each file ends
   right after a fully-closed rule) and loaded via 5 <link> tags in the
   same order as the original file. This preserves the exact CSS cascade
   order byte-for-byte -- selectors are NOT grouped by feature/component
   because the original file interleaves the same component's rules across
   thousands of lines (e.g. .mpx-* grid rules appear from line ~4320 to
   ~18367), so a semantic regrouping would require re-deriving cascade
   order by hand and risk silently changing which rule wins. See
   frontend_modularization_plan.md Phase 12 for the deferred full reorg. */


/* Prompt cell */
.act2-prompt-cell {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
  cursor: pointer;
  padding: 10px 8px 10px 0;
  min-width: 0;
}
.act2-prompt-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.act2-prompt-text.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  white-space: pre-wrap;
}

/* Confidence cell */
.act2-conf-cell { padding: 10px 8px 10px 0; }
.act2-conf-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.act2-conf-val {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}
.act2-conf-band {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.act2-conf-track {
  height: 5px;
  width: 88px;
  background: #eef1f6;
  border-radius: 3px;
  overflow: hidden;
}
.act2-conf-fill { height: 100%; border-radius: 3px; transition: width .3s; }

/* Counts-as pill */
.act2-counts-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.act2-counts-pill.productive { background: #ecfdf5; color: #059669; }
.act2-counts-pill.idle { background: #f1f5f9; color: #64748b; }

/* Live toggle switch */
.act2-live-wrap { display: flex; align-items: center; }
.act2-toggle-switch {
  position: relative;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
}
.act2-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.act2-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 21px;
  background: #cbd5e1;
  cursor: pointer;
  transition: background .15s;
}
.act2-toggle-switch input:checked + .act2-toggle-track { background: #22c55e; }
.act2-toggle-knob {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  transition: left .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.act2-toggle-switch input:checked ~ .act2-toggle-knob { left: 19.5px; }

/* Embedding pill */
.act2-embed-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.act2-embed-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.act2-embed-pill.ready { background: #ecfdf5; color: #059669; }
.act2-embed-pill.ready .act2-embed-dot { background: #059669; }
.act2-embed-pill.building { background: #eff6ff; color: #2563eb; }
.act2-embed-pill.building .act2-embed-dot { background: #2563eb; }
.act2-embed-pill.failed { background: #fee2e2; color: #dc2626; }
.act2-embed-pill.failed .act2-embed-dot { background: #dc2626; }

/* Actions cell */
.act2-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0;
}
.act2-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.act2-edit-btn:hover { background: #eff4ff; color: #2563eb; border-color: #c7d2fe; }
.act2-del-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 7px;
  color: #dc2626;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.act2-del-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626; }

/* Empty state */
.act2-empty {
  padding: 48px 24px;
  text-align: center;
}
.act2-empty-icon { font-size: 28px; color: #94a3b8; margin-bottom: 10px; }
.act2-empty-title { font-size: 14px; font-weight: 700; color: #334155; margin-bottom: 12px; }
.act2-clear-btn {
  padding: 7px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.act2-clear-btn:hover { background: #f1f5f9; }

/* Footer */
.act2-table-footer {
  background: #fbfcfe;
  border-top: 1px solid #eef1f6;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.act2-footer-count { font-size: 12.5px; color: #64748b; font-weight: 500; }
.act2-pager { display: flex; gap: 4px; }
.act2-pager-btn {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: background .1s, border-color .1s;
}
.act2-pager-btn:hover { background: #f1f5f9; }
.act2-pager-btn.active { background: #0f172a; color: #fff; border-color: #0f172a; }

/* 
   §7  Edit / Create Activity modal
    */
.act2-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
}
.act2-modal-scrim.open { opacity: 1; pointer-events: all; }

.act2-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.28);
  width: 580px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(.98);
  transition: transform .2s, opacity .2s;
  opacity: 0;
}
.act2-modal-scrim.open .act2-modal { transform: translateY(0) scale(1); opacity: 1; }

/* Modal header */
.act2-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #eef1f6;
  flex-shrink: 0;
}
.act2-modal-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eff4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.act2-modal-title { font-size: 15.5px; font-weight: 800; letter-spacing: -0.015em; color: #0f172a; margin: 0; }
.act2-modal-ctx {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: #64748b;
  margin: 3px 0 0;
}
.act2-modal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.act2-modal-close:hover { background: #f1f5f9; color: #0f172a; }

/* Modal body */
.act2-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Field label */
.act2-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.act2-label-text {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.act2-label-aside {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Text inputs in modal */
.act2-text-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.act2-text-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.act2-text-input.dupe-warn {
  border-color: #fcd34d;
  box-shadow: 0 0 0 3px rgba(252,211,77,.18);
}
.act2-dupe-field-warn {
  font-size: 11.5px;
  font-weight: 600;
  color: #b45309;
  margin-top: 6px;
  display: none;
}
.act2-dupe-field-warn.visible { display: block; }

/* Textarea */
.act2-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  min-height: 76px;
  line-height: 1.5;
  transition: border-color .14s, box-shadow .14s;
}
.act2-textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Prompt hint tile */
.act2-hint-tile {
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 10px 13px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.act2-hint-tile i { color: #94a3b8; font-size: 13px; flex-shrink: 0; margin-top: 1px; }

/* Confidence slider section */
.act2-slider-wrap { display: flex; flex-direction: column; gap: 6px; }
.act2-slider-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.act2-conf-display {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}
.act2-conf-band-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.act2-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
  accent-color: #2563eb;
  cursor: pointer;
}
.act2-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(37,99,235,.35);
  border: 2px solid #fff;
}
.act2-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: 2px solid #fff;
}
.act2-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
}
.act2-slider-hint {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

/* Counts-as + Detection 2-col row */
.act2-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width:500px) { .act2-two-col { grid-template-columns: 1fr; } }

.act2-field-hint {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 6px;
}

/* Detection toggle button */
.act2-detect-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  transition: background .14s, border-color .14s, color .14s;
}
.act2-detect-btn.on {
  background: #f0fdf4;
  border-color: #a7f3d0;
  color: #047857;
}
.act2-detect-mini-toggle {
  width: 30px;
  height: 17px;
  border-radius: 17px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.act2-detect-mini-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.act2-detect-btn.on .act2-detect-mini-toggle { background: #22c55e; }
.act2-detect-btn.on .act2-detect-mini-toggle::after { left: 15px; }

/* Modal footer */
.act2-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid #eef1f6;
  background: #fbfcfe;
  flex-shrink: 0;
  border-radius: 0 0 16px 16px;
}
.act2-state-line {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act2-footer-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.act2-cancel-btn {
  padding: 8px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #475569;
  cursor: pointer;
  transition: background .12s;
}
.act2-cancel-btn:hover { background: #f1f5f9; }
.act2-save-btn {
  padding: 8px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(37,99,235,.26);
  transition: background .12s, box-shadow .12s;
}
.act2-save-btn:hover:not(:disabled) { background: #1d4ed8; }
.act2-save-btn:disabled {
  background: #c3d2ea;
  box-shadow: none;
  cursor: not-allowed;
}


/* - Toast notifications (notify() in app.js) - */
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1e293b;
  color: #f1f5f9;
  font-size: 13.5px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  box-shadow: 0 8px 30px rgba(15,23,42,.28);
  min-width: 260px;
  max-width: 380px;
  pointer-events: all;
  animation: toastIn .22s cubic-bezier(.22,1,.36,1);
}
.toast.toast-success { background: #064e3b; border-left: 3px solid #22c55e; }
.toast.toast-error   { background: #450a0a; border-left: 3px solid #ef4444; }
.toast.toast-warning { background: #451a03; border-left: 3px solid #f59e0b; }
.toast.toast-info    { background: #1e293b; border-left: 3px solid #3b82f6; }
.toast-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.toast.toast-success .toast-icon { color: #22c55e; }
.toast.toast-error   .toast-icon { color: #ef4444; }
.toast.toast-warning .toast-icon { color: #f59e0b; }
.toast.toast-info    .toast-icon { color: #3b82f6; }
.toast-msg  { flex: 1; line-height: 1.4; }
.toast-close {
  background: transparent; border: none; color: #94a3b8;
  font-size: 12px; cursor: pointer; padding: 0; flex-shrink: 0; margin-top: 1px;
}
.toast-close:hover { color: #f1f5f9; }
.toast.hiding { animation: toastOut .18s ease forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); }   to { opacity:0; transform:translateX(24px); } }
.toast.toast-hide { animation: toastOut .18s ease forwards; }

/* 
   CAM2 — Camera Assignment tab design system
   All classes prefixed .cam2-* to avoid conflict with existing
    */

/* -‚-‚- Page shell -‚-‚- */
.cam2-page {
  padding: 20px 26px 32px;
  min-height: 100%;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans','Inter',sans-serif;
  color: #0f172a;
  background: #eef1f6;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -‚-‚- Card -‚-‚- */
.cam2-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}

/* 
   Gap banner
    */
.cam2-gap-banner {
  display: none;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 18px;
}
.cam2-gap-banner.visible { display: block; }
.cam2-gap-banner-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: #92400e;
  margin-bottom: 5px;
}
.cam2-gap-banner-body {
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
}

/* 
   KPI strip
    */
.cam2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
@media (max-width:700px) { .cam2-kpi-strip { grid-template-columns: repeat(2,1fr); } }

.cam2-kpi-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.cam2-kpi-rail {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  border-radius: 16px 0 0 16px;
}
.cam2-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-kpi-value {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cam2-kpi-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  font-weight: 500;
}

/* 
   Two-pane workspace
    */
.cam2-workspace {
  display: grid;
  grid-template-columns: 296px minmax(0,1fr);
  gap: 16px;
  align-items: start;
}

/* -‚-‚- Camera list card -‚-‚- */
.cam2-cam-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
  position: sticky;
  top: 0;
}
.cam2-cam-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #f1f5f9;
}
.cam2-cam-header-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.cam2-cam-count {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 20px;
  padding: 2px 9px;
}
.cam2-cam-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}
.cam2-cam-search-wrap i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 11px;
  pointer-events: none;
}
.cam2-cam-search {
  width: 100%;
  padding: 8px 11px 8px 30px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  box-sizing: border-box;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.cam2-cam-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}
.cam2-cam-list {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  padding: 4px 6px 6px;
}
.cam2-cam-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s;
  min-width: 0;
}
.cam2-cam-row:hover { background: #f8fafc; }
.cam2-cam-row.selected { background: #eff4ff; }
.cam2-cam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cam2-cam-info {
  flex: 1;
  min-width: 0;
}
.cam2-cam-name {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1e293b;
}
.cam2-cam-row.selected .cam2-cam-name { color: #2563eb; }
.cam2-cam-sub {
  font-size: 10.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-cov-chip {
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 20px;
  padding: 3px 8px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
}
.cam2-cov-chip.all      { background: #ecfdf5; color: #059669; }
.cam2-cov-chip.selected { background: #eff4ff; color: #2563eb; }
.cam2-cov-chip.none     { background: #fef3c7; color: #b45309; }

/* -‚-‚- Assignment panel card -‚-‚- */
.cam2-panel-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Panel header */
.cam2-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #eef1f6;
  flex-shrink: 0;
}
.cam2-panel-cam-tile {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #eff4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cam2-panel-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-panel-meta {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-copy-btn {
  padding: 7px 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.cam2-copy-btn:hover { background: #eff4ff; color: #2563eb; border-color: #c7d2fe; }

/* Panel body */
.cam2-panel-body {
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* Mode section */
.cam2-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.cam2-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cam2-mode-card {
  padding: 12px 13px;
  border-radius: 11px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background .14s, border-color .14s;
}
.cam2-mode-card:hover { border-color: #94a3b8; }
.cam2-mode-card.all-mode.selected {
  background: #ecfdf5; border-color: #6ee7b7;
}
.cam2-mode-card.sel-mode.selected {
  background: #eff4ff; border-color: #c7d2fe;
}

/* Radio ring */
.cam2-radio-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: border-color .14s;
}
.cam2-radio-ring::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: background .14s;
}
.cam2-mode-card.all-mode.selected .cam2-radio-ring {
  border-color: #059669;
}
.cam2-mode-card.all-mode.selected .cam2-radio-ring::after {
  background: #059669;
}
.cam2-mode-card.sel-mode.selected .cam2-radio-ring {
  border-color: #2563eb;
}
.cam2-mode-card.sel-mode.selected .cam2-radio-ring::after {
  background: #2563eb;
}

.cam2-mode-text { flex: 1; min-width: 0; }
.cam2-mode-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 3px;
  line-height: 1.2;
}
.cam2-mode-card.all-mode.selected .cam2-mode-title { color: #047857; }
.cam2-mode-card.sel-mode.selected .cam2-mode-title { color: #2563eb; }
.cam2-mode-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Info tile (all mode) */
.cam2-info-tile {
  background: #f0f7ff;
  border: 1px solid #dbe6ff;
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #1e4080;
  line-height: 1.5;
}
.cam2-info-tile i { color: #2563eb; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.cam2-info-tile strong { font-weight: 700; }

/* -‚-‚- Activity list (selected mode) -‚-‚- */
.cam2-act-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cam2-act-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 280px;
}
.cam2-act-search-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 11px;
  pointer-events: none;
}
.cam2-act-search {
  width: 100%;
  padding: 8px 11px 8px 29px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  box-sizing: border-box;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.cam2-act-search:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}

/* Segmented control */
.cam2-seg {
  display: inline-flex;
  background: #e4e9f1;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.cam2-seg-btn {
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: #475569;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.cam2-seg-btn .cam2-seg-count {
  font-family: 'JetBrains Mono','Consolas',monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 700;
  color: #475569;
}
.cam2-seg-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.cam2-seg-btn.active .cam2-seg-count { color: #2563eb; }

/* Select-all toggle */
.cam2-selall-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 2px;
  transition: color .12s;
  white-space: nowrap;
}
.cam2-selall-btn:hover { color: #1d4ed8; }

/* Activity rows container */
.cam2-act-container {
  border: 1px solid #e5e9f0;
  border-radius: 12px;
  overflow: hidden;
}

/* Grid: checkbox 30px, name 1fr (min 180px), prompt 1.6fr, status 78px */
.cam2-act-row {
  display: grid;
  grid-template-columns: 30px minmax(180px,1fr) minmax(0,1.6fr) 78px;
  padding: 0 12px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #f4f7fa;
  cursor: pointer;
  transition: background .1s;
}
.cam2-act-row:last-child { border-bottom: none; }
.cam2-act-row:hover { background: #f8fafc; }
.cam2-act-row.checked { background: #f8fbff; }
.cam2-act-row.paused {
  opacity: .55;
  cursor: not-allowed;
}

/* Custom checkbox */
.cam2-cb {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid #cbd5e1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .12s, background .12s;
  pointer-events: none;
}
.cam2-act-row.checked .cam2-cb {
  background: #2563eb;
  border-color: #2563eb;
}
.cam2-cb-tick {
  display: none;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.cam2-act-row.checked .cam2-cb-tick { display: block; }

/* Activity name cell */
.cam2-act-name-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 10px 0;
  min-width: 0;
}
.cam2-act-name-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-dup-chip {
  font-size: 9px;
  font-weight: 800;
  background: #fef3c7;
  color: #b45309;
  border-radius: 20px;
  padding: 2px 6px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: help;
}

/* Prompt cell */
.cam2-act-prompt {
  font-size: 11.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px 0 0;
}

/* Status cell */
.cam2-act-status {
  font-size: 11.5px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}
.cam2-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Empty state */
.cam2-act-empty {
  padding: 32px 16px;
  text-align: center;
}
.cam2-act-empty i { font-size: 24px; color: #94a3b8; margin-bottom: 8px; }
.cam2-act-empty-title { font-size: 13px; font-weight: 700; color: #334155; }

/* -‚-‚- Footer -‚-‚- */
.cam2-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid #eef1f6;
  background: #fbfcfe;
  flex-shrink: 0;
}
.cam2-state-line {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cam2-footer-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cam2-revert-btn {
  padding: 8px 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: #475569;
  cursor: pointer;
  transition: background .12s;
}
.cam2-revert-btn:hover:not(:disabled) { background: #f1f5f9; }
.cam2-revert-btn:disabled { opacity: .5; cursor: not-allowed; }
.cam2-save-btn {
  padding: 8px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(37,99,235,.26);
  transition: background .12s, box-shadow .12s;
}
.cam2-save-btn:hover:not(:disabled) { background: #1d4ed8; }
.cam2-save-btn:disabled {
  background: #c3d2ea;
  box-shadow: none;
  cursor: not-allowed;
}

/* -‚-‚- Copy-from modal -‚-‚- */
.cam2-copy-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.42);
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
.cam2-copy-scrim.open { opacity: 1; pointer-events: all; }
.cam2-copy-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15,23,42,.28);
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .2s, opacity .2s;
  overflow: hidden;
}
.cam2-copy-scrim.open .cam2-copy-modal { transform: translateY(0) scale(1); opacity: 1; }
.cam2-copy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #eef1f6;
}
.cam2-copy-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.cam2-copy-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; border: none; border-radius: 7px;
  color: #64748b; cursor: pointer; font-size: 12px;
  transition: background .1s;
}
.cam2-copy-close:hover { background: #e2e8f0; }
.cam2-copy-list { overflow-y: auto; padding: 8px; max-height: 380px; }
.cam2-copy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .1s;
}
.cam2-copy-row:hover { background: #f8fafc; }
.cam2-copy-row-name { flex: 1; font-size: 13px; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam2-copy-row-sub { font-size: 11px; color: #64748b; font-weight: 500; }


/* == CAM2 Bug-fix patch 2 == */
.cam2-panel-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 310px) !important;
  min-height: 480px !important;
  overflow: hidden !important;
}
.cam2-panel-body {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.cam2-footer {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
.cam2-cam-list {
  max-height: calc(100vh - 360px) !important;
  overflow-y: auto !important;
}
.cam2-workspace {
  align-items: start !important;
}

/* 
   AN2 — Activity Intelligence Analytics Redesign
   Classification palette: #2563eb / #f59e0b / #94a3b8
    */

/* Page wrapper — no display:flex here; .setup-section already sets
   display:none / display:flex via the active class. Adding display:flex
   here would override display:none and bleed into sibling tabs. */
.an2-page {
  flex-direction: column;
  gap: 14px;
  padding: 18px 26px 36px;
  background: #eef1f6;
  min-height: 0;
}

/* Only apply column layout + gap when the section is actually visible */
.setup-section.active.an2-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* -‚-‚- Shared card -‚-‚- */
.an2-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  padding: 18px 20px;
}
.an2-card-title {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.an2-card-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
}
.an2-card-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* -‚-‚- Filter bar -‚-‚- */
.an2-filter-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.an2-filter-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.an2-filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.an2-filter-group {
  display: flex;
  align-items: center;
  gap: 7px;
}
.an2-filter-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.an2-select {
  padding: 8px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12.5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.an2-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Segmented range control */
.an2-seg-range {
  display: flex;
  background: #e4e9f1;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.an2-range-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  background: transparent;
  color: #475569;
  transition: all .15s;
}
.an2-range-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.an2-range-btn:hover:not(.active) {
  color: #0f172a;
}

/* Updated stamp */
.an2-updated-stamp {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

/* Reset test data —- danger-styled, visually separate */
.an2-reset-btn {
  padding: 7px 13px;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 9px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}
.an2-reset-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.an2-refresh-btn {
  padding: 7px 13px;
  background: #fff;
  border: 1px solid #dbeafe;
  border-radius: 9px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, border-color .15s;
}
.an2-refresh-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.an2-refresh-btn.spinning i {
  animation: an2-spin .7s linear infinite;
}
@keyframes an2-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* -‚-‚- Reconciliation banner -‚-‚- */
.an2-recon-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 12px 16px;
}
.an2-recon-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.an2-recon-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #92400e;
}
.an2-recon-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.an2-recon-list li {
  font-size: 12px;
  color: #92400e;
  line-height: 1.6;
}
.an2-recon-list strong {
  font-weight: 700;
}

/* -‚-‚- Hero row -‚-‚- */
.an2-hero-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.55fr);
  gap: 14px;
  align-items: stretch;
}

/* Gauge card */
.an2-gauge-card { padding: 18px 20px; }
.an2-gauge-body {
  display: flex;
  align-items: center;
  gap: 20px;
}
.an2-gauge-ring-wrap {
  flex-shrink: 0;
}
.an2-gauge-ring {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: conic-gradient(#e8edf4 0% 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s;
}
.an2-gauge-disc {
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.an2-gauge-value {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #94a3b8;
}
.an2-gauge-sub {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .05em;
  margin-top: 3px;
}
.an2-gauge-aside {
  flex: 1;
  min-width: 0;
}
.an2-verdict-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #475569;
  margin-bottom: 8px;
}
.an2-gauge-denom {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 6px;
}
.an2-gauge-note {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

/* Time card */
.an2-time-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.an2-time-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.an2-time-total {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

/* Split bar */
.an2-split-bar {
  display: flex;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
}
.an2-split-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  transition: flex .3s;
  position: relative;
}
.an2-prod-seg   { background: #2563eb; }
.an2-idle-seg   { background: #f59e0b; }
.an2-unclass-seg { background: #94a3b8; }
.an2-split-label {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  white-space: nowrap;
  overflow: hidden;
  padding: 0 6px;
}

/* 4 KPI tiles */
.an2-kpi-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.an2-inner-tile {
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 11px;
  display: flex;
  overflow: hidden;
}
.an2-tile-rail {
  width: 3px;
  flex-shrink: 0;
}
.an2-tile-body {
  padding: 10px 12px;
  min-width: 0;
}
.an2-tile-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an2-tile-value {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.an2-tile-sub {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* -‚-‚- Mid row -‚-‚- */
.an2-mid-row {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 14px;
  align-items: start;
}

/* Activity breakdown */
.an2-breakdown-card { padding: 18px 20px; }
.an2-breakdown-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.an2-breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.an2-breakdown-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 56px 44px;
  gap: 11px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.an2-breakdown-row:hover { background: #f8fafc; }
.an2-breakdown-row:hover .an2-br-name { color: #2563eb; }
.an2-br-name-wrap { min-width: 0; }
.an2-br-name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.an2-unclass-chip {
  font-size: 9px;
  font-weight: 800;
  background: #f1f5f9;
  color: #475569;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.an2-br-track {
  height: 7px;
  border-radius: 20px;
  background: #eef1f6;
  margin-top: 5px;
  overflow: hidden;
}
.an2-br-fill {
  height: 100%;
  border-radius: 20px;
  transition: width .3s;
}
.an2-br-mins {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-align: right;
  white-space: nowrap;
}
.an2-br-pct {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
  text-align: right;
  white-space: nowrap;
}
.an2-breakdown-empty {
  font-size: 12.5px;
  color: #94a3b8;
  padding: 24px 0;
  text-align: center;
}
.an2-evidence-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}
.an2-evidence-modal-box {
  background: #fff;
  border-radius: 12px;
  max-width: 1100px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.an2-evidence-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}
.an2-evidence-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.an2-evidence-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #64748b;
  padding: 4px;
}
.an2-evidence-modal-close:hover {
  color: #0f172a;
}
.an2-evidence-modal-body {
  padding: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  gap: 14px;
}
.an2-evidence-frame {
  flex: 0 0 auto;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.an2-evidence-frame img {
  width: 100%;
  height: 191px;
  object-fit: contain;
  border-radius: 8px;
  background: #0f172a;
  border: 1px solid #e2e8f0;
}
.an2-evidence-frame-caption {
  font-size: 11px;
  color: #64748b;
}
.an2-evidence-frame-caption strong {
  color: #1e293b;
}
.an2-evidence-empty {
  padding: 40px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  width: 100%;
}
.an2-breakdown-row.an2-br-active .an2-br-name {
  color: #2563eb;
}

/* Legend (shared) */
.an2-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.an2-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}
.an2-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* -‚-‚- Right column -‚-‚- */
.an2-right-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Live stream card */
.an2-live-card { padding: 16px 18px; }
.an2-live-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.an2-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: an2-blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes an2-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
.an2-updated-small {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
}
.an2-live-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(120% 120% at 30% 25%, #1e293b, #0b1220 72%);
}
.an2-live-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
.an2-live-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.an2-live-empty-title {
  font-size: 11.5px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.an2-live-empty-sub {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: #64748b;
}
.an2-live-ts {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #cbd5e1;
  background: rgba(10,15,22,.66);
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
}
.an2-live-overlay-chip {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #cbd5e1;
  background: rgba(10,15,22,.66);
  padding: 2px 7px;
  border-radius: 5px;
  pointer-events: none;
}
.an2-live-ts.an2-stale,
.an2-updated-small.an2-stale {
  color: #fbbf24;
  font-weight: 700;
}
.an2-live-header.an2-stale .an2-live-dot {
  background: #64748b;
  animation: none;
}
.an2-detected-block {
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  padding: 10px 13px;
}
.an2-detected-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.an2-detected-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.an2-detected-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #1e293b;
}

/* Workers tracked */
.an2-workers-card { padding: 16px 18px; }
.an2-workers-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 108px 54px 46px;
  padding: 0 4px;
  gap: 0;
}
.an2-wh-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 8px;
}
.an2-workers-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.an2-worker-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 108px 54px 46px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid #f1f5f9;
  gap: 0;
}
.an2-worker-row:last-child { border-bottom: none; }
.an2-worker-id {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.an2-worker-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.an2-worker-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an2-worker-activity {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.an2-worker-split {
  height: 7px;
  border-radius: 20px;
  overflow: hidden;
  background: #eef1f6;
  display: flex;
  margin: 0 8px;
}
.an2-worker-oncam {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: #475569;
  text-align: right;
}
.an2-worker-prod {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 800;
  text-align: right;
}

/* -‚-‚- Detection timeline -‚-‚- */
.an2-timeline-card { padding: 18px 20px; }
.an2-timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.an2-timeline-wrap {
  overflow-x: auto;
}
.an2-timeline-cols {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 118px;
  min-width: min-content;
}
.an2-day-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 16px;
  flex-shrink: 0;
  height: 118px;
  cursor: default;
}
.an2-day-stub {
  width: 100%;
  height: 3px;
  background: #eef1f6;
  border-radius: 2px;
}
.an2-day-seg {
  width: 100%;
  transition: opacity .15s;
}
.an2-day-col:hover .an2-day-seg { opacity: .8; }
.an2-timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.an2-tf-edge {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #64748b;
}
.an2-tf-center {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  text-align: center;
}

/* -‚-‚- Responsive -‚-‚- */
@media (max-width: 1024px) {
  .an2-hero-row,
  .an2-mid-row { grid-template-columns: 1fr; }
  .an2-kpi-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 
   RA2 — Resolved Alarms Redesign
   Palette: #059669 resolved · #2563eb true · #dc2626 false · #94a3b8 no-data
    */

/* Page wrapper —- no display:flex here; .setup-section controls visibility */
.ra2-page {
  flex-direction: column;
  gap: 14px;
  padding: 18px 26px 36px;
  background: #eef1f6;
  min-height: 0;
}
.setup-section.active.ra2-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* KPI strip */
.ra2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.ra2-kpi-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
}
.ra2-kpi-rail { width: 3px; border-radius: 3px; flex-shrink: 0; }
.ra2-kpi-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ra2-kpi-label {
  font-size: 11px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ra2-kpi-value {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
}
.ra2-kpi-sub { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Banner */
.ra2-banner { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px; }
.ra2-banner-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.ra2-banner-icon { font-size: 15px; color: #b45309; flex-shrink: 0; margin-top: 1px; }
.ra2-banner-title { font-size: 13.5px; font-weight: 800; color: #92400e; line-height: 1.3; }
.ra2-banner-body { font-size: 12px; color: #92400e; line-height: 1.55; padding-left: 23px; }
.ra2-banner-body strong { font-weight: 700; }

/* Main card */
.ra2-card {
  background: #fff; border: 1px solid #e5e9f0; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05); overflow: hidden;
  display: flex; flex-direction: column;
}

/* Card header */
.ra2-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid #eef1f6;
}
.ra2-card-header-left { display: flex; align-items: center; gap: 14px; }
.ra2-card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg,#ecfdf5,#d1fae5);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; color: #059669;
}
.ra2-card-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 0 0 2px; }
.ra2-card-sub { font-size: 12px; color: #64748b; margin: 0; }
.ra2-refresh-btn {
  background: #fff; border: 1px solid #e2e8f0; color: #475569;
  font-size: 13px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 10px; padding: 7px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: background .15s;
}
.ra2-refresh-btn:hover { background: #f8fafc; }

/* Filter bar */
.ra2-filter-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; padding: 10px 20px 12px; border-bottom: 1px solid #eef1f6;
}
.ra2-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 290px; }
.ra2-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 12px; pointer-events: none;
}
.ra2-search-input {
  width: 100%; box-sizing: border-box; padding: 7px 10px 7px 30px;
  background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: #334155;
  outline: none; transition: border-color .15s;
}
.ra2-search-input:focus { border-color: #93c5fd; background: #fff; }
.ra2-search-input::placeholder { color: #94a3b8; }

/* Segmented outcome control */
.ra2-seg { display: flex; background: #e4e9f1; border-radius: 10px; padding: 3px; gap: 2px; flex-shrink: 0; }
.ra2-seg-btn {
  padding: 6px 12px; border: none; border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  cursor: pointer; background: transparent; color: #475569; transition: all .15s; white-space: nowrap;
}
.ra2-seg-btn .ra2-seg-count { font-size: 11px; color: #475569; margin-left: 3px; font-variant-numeric: tabular-nums; }
.ra2-seg-btn.active { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.10); }
.ra2-seg-btn.active .ra2-seg-count { color: #2563eb; }

/* Family select */
.ra2-family-select {
  background: #f8fafc; border: 1px solid #e5e9f0; border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  color: #475569; padding: 7px 10px; outline: none; cursor: pointer;
}

/* Group toggle */
.ra2-group-toggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 9px; border: 1px solid #e2e8f0; background: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  color: #475569; cursor: pointer; transition: all .15s;
}
.ra2-group-toggle.active { background: #eff4ff; border-color: #c7d2fe; color: #2563eb; }
.ra2-filter-count { margin-left: auto; font-size: 12.5px; color: #64748b; white-space: nowrap; }

/* CSS Grid table */
:root { --ra2-grid: 104px 92px minmax(0,1.35fr) minmax(0,.95fr) minmax(0,1.05fr) 84px 40px; }
.ra2-table-wrap { overflow-x: auto; }
.ra2-thead {
  display: grid; grid-template-columns: var(--ra2-grid);
  padding: 0 22px; background: #fbfcfe;
  border-top: 1px solid #eef1f6; border-bottom: 1px solid #eef1f6;
}
.ra2-thead-cell {
  padding: 10px 8px 10px 0; font-size: 10.5px; font-weight: 700;
  color: #64748b; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.ra2-tbody { display: flex; flex-direction: column; }
.ra2-row {
  display: grid; grid-template-columns: var(--ra2-grid);
  padding: 0 22px; border-bottom: 1px solid #f4f7fa;
  align-items: center; min-height: 46px; cursor: pointer; transition: background .12s;
}
.ra2-row:hover { background: #f8fafc; }
.ra2-row:hover .ra2-open-btn { opacity: 1; }
.ra2-cell { padding: 10px 8px 10px 0; min-width: 0; overflow: hidden; }

/* Alert ID */
.ra2-cell-id { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: #2563eb; }

/* Detected —- two-line */
/* Detected -€” two-line */
.ra2-cell-detected { display: flex; flex-direction: column; gap: 1px; }
.ra2-det-time { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; color: #334155; }
.ra2-det-date { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; font-size: 10px; color: #64748b; }

/* Event cell */
.ra2-cell-event { display: flex; align-items: center; gap: 6px; }
.ra2-fam-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ra2-event-name { font-size: 12.5px; font-weight: 700; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra2-fam-tag { font-size: 9.5px; font-weight: 800; border-radius: 5px; padding: 2px 6px; white-space: nowrap; flex-shrink: 0; }
.ra2-repeat-badge { font-size: 10.5px; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 20px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; cursor: pointer; }

/* Camera -€” two-line */
.ra2-cell-camera { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ra2-cam-name { font-size: 12px; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra2-cam-channel { font-size: 10px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Outcome —- stacked pill + reviewer */
.ra2-cell-outcome { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ra2-outcome-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; border-radius: 20px; padding: 3px 9px; white-space: nowrap; width: fit-content; max-width: 100%; }
.ra2-outcome-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.ra2-outcome-reviewer { font-size: 10.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Resolved-in */
.ra2-cell-dur { font-family: 'JetBrains Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: #334155; text-align: right; padding-right: 8px; }
.ra2-cell-dur.ra2-dash { color: #94a3b8; }

/* Open button */
.ra2-open-btn {
  width: 26px; height: 26px; border-radius: 8px; background: #f1f5f9;
  border: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .12s;
  color: #2563eb; font-size: 11px; justify-self: end;
}

/* Empty state */
.ra2-empty { padding: 60px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ra2-empty-icon { font-size: 36px; color: #94a3b8; opacity: .5; }
.ra2-empty-title { font-size: 14px; font-weight: 700; color: #334155; }
.ra2-clear-btn { background: #fff; border: 1px solid #e2e8f0; color: #475569; font-size: 12.5px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; border-radius: 9px; padding: 6px 14px; cursor: pointer; }

/* Footer */
.ra2-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; background: #fbfcfe; border-top: 1px solid #eef1f6; flex-shrink: 0;
}
.ra2-footer-label { font-size: 12.5px; color: #64748b; white-space: nowrap; font-family: 'Plus Jakarta Sans', sans-serif; }
.ra2-pager { display: flex; align-items: center; gap: 6px; }
.ra2-pager-info { font-size: 12.5px; font-weight: 700; color: #0f172a; white-space: nowrap; padding: 0 4px; }
.ra2-pager-btn {
  width: 31px; height: 31px; border-radius: 9px; border: 1px solid #e2e8f0;
  background: #fff; color: #475569; font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s;
}
.ra2-pager-btn:hover:not(:disabled) { background: #f1f5f9; }
.ra2-pager-btn:disabled { opacity: .4; cursor: default; }
.ra2-pager-btn.active { background: #eff4ff; border-color: #bfdbfe; color: #2563eb; font-weight: 800; }

/* 
   PP2 — Pre Processed lane redesign
   All selectors scoped to .pp2-* — never overrides any existing rule.
    */

/* -‚-‚- Foundation -‚-‚- */
/* NOTE: No display:flex here — .tab-content { display:none } vs .pp2-page { display:flex }
/*                                                                    
   PP2 —  Pre Processed lane redesign
   All selectors scoped to .pp2-* —  never overrides any existing rule.
                                                                       */

/*  -‚- -‚- Foundation  -‚- -‚- */
/* NOTE: No display:flex here ” .tab-content { display:none } vs .pp2-page { display:flex }
   have identical specificity; the later rule wins. Removing display from here means
   .tab-content.active { display:flex } and switchTab()'s inline style.display='none'
   are the sole display controllers ” preventing the AI Workflow from bleeding into Video Wall. */
.pp2-page {
  background: #eef1f6 !important;
  padding: 20px 26px 40px !important;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  min-height: 0;
  overflow-y: auto;
}
/* .cx-table-header.cx-cams-grid: the generic .cx-table-header rule further down
   this file would otherwise win and draw the header on the 8-column grid. */
.cx-table-header.cx-cams-grid { grid-template-columns: minmax(0,1.4fr) 104px minmax(0,1fr) 132px 92px 84px; }
#cx-cameras-body .cx-table-row { grid-template-columns: minmax(0,1.4fr) 104px minmax(0,1fr) 132px 92px 84px; }

/*  -‚- -‚- Page Header  -‚- -‚- */
.pp2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pp2-header-left { display: flex; flex-direction: column; gap: 3px; }
.pp2-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
  line-height: 1.15;
}
.pp2-subtitle {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748b;
}
.pp2-header-right { display: flex; align-items: center; gap: 9px; }

.pp2-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background .12s;
}
.pp2-btn-ghost:hover { background: #f1f5f9; }

.pp2-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px;
  background: #2563eb;
  border: none;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,.26);
  transition: background .12s;
}
.pp2-btn-primary:hover { background: #1d4ed8; }

/* -‚-‚- Filter Card -‚-‚- */
.pp2-filter-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  padding: 14px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.pp2-filter-field { display: flex; flex-direction: column; gap: 5px; }
.pp2-filter-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: #64748b;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pp2-input {
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  background: #fff;
  color: #0f172a;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
  width: 100%;
}
.pp2-input::placeholder { color: #8b97a8; }
.pp2-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Status Segmented Control */
.pp2-seg-track {
  display: inline-flex;
  background: #e4e9f1;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.pp2-seg-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: background .1s, color .1s, box-shadow .1s;
}
.pp2-seg-btn:hover:not(.active) { background: rgba(255,255,255,.5); }
.pp2-seg-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.pp2-seg-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.pp2-seg-btn.active .pp2-seg-count { color: #2563eb; }

.pp2-btn-clear {
  padding: 0 12px;
  height: 35px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: #475569;
  cursor: pointer;
  align-self: flex-end;
  white-space: nowrap;
  transition: background .12s;
}
.pp2-btn-clear:hover { background: #f1f5f9; }

.pp2-result-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  color: #64748b;
  align-self: center;
}

/* ── Full-width stacked sections ── */
.pp2-lanes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* -‚-‚- Lane card -‚-‚- */
.pp2-lane-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* NO overflow-y, NO fixed height —- page scrolls, not the lane */
}

/* -‚-‚- Lane Header -‚-‚- */
.pp2-lane-hdr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid #eef1f6;
}
.pp2-lane-hdr-top { display: flex; align-items: center; gap: 10px; }
.pp2-lane-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.pp2-lane-icon.seg { background: #eff4ff; color: #2563eb; }
.pp2-lane-icon.geo { background: #f3e8ff; color: #7c3aed; }
.pp2-lane-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15.5px; font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.pp2-lane-name.seg { color: #2563eb; }
.pp2-lane-name.geo { color: #7c3aed; }
.pp2-lane-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.pp2-lane-pill.seg { background: #eff4ff; color: #2563eb; }
.pp2-lane-pill.geo { background: #f3e8ff; color: #7c3aed; }
.pp2-lane-sub {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 400;
  color: #64748b;
}

/* Mix bar */
.pp2-mix-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.pp2-mix-bar {
  height: 6px;
  border-radius: 20px;
  background: #eef1f6;
  display: flex;
  overflow: hidden;
}
.pp2-mix-seg { border-radius: 0; }
.pp2-mix-seg:first-child { border-radius: 20px 0 0 20px; }
.pp2-mix-seg:last-child  { border-radius: 0 20px 20px 0; }
.pp2-mix-seg:only-child  { border-radius: 20px; }

.pp2-mix-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.pp2-mix-legend-item { display: flex; align-items: center; gap: 5px; }
.pp2-mix-swatch {
  width: 7px; height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}
.pp2-mix-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #475569;
}
.pp2-mix-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* -‚-‚- Item list -‚-‚- */
.pp2-item-list { padding: 6px; }
.pp2-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .1s;
}
.pp2-item:hover { background: #f8fafc; }

/* Thumbnail chip */
.pp2-thumb {
  width: 44px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.pp2-thumb.seg { background: #eff4ff; border: 1px solid #c7d7fb; color: #2563eb; }
.pp2-thumb.geo { background: #f3e8ff; border: 1px solid #ddd6fe; color: #7c3aed; }

/* Identity cell */
.pp2-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pp2-identity-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.pp2-identity-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp2-identity-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}
.pp2-identity-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Status pill */
.pp2-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border-radius: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px; font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}
.pp2-status-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.pp2-pill-queued     { background: #f1f5f9; color: #64748b; }
.pp2-pill-processing { background: #eff6ff; color: #2563eb; }
.pp2-pill-ready      { background: #ecfdf5; color: #059669; }
.pp2-pill-failed     { background: #fee2e2; color: #dc2626; }

/* Play button */
.pp2-play-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: #eff4ff;
  border: 1px solid #dbe6ff;
  color: #2563eb;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 11px;
  transition: background .12s, color .12s;
}
.pp2-play-btn:hover { background: #2563eb; color: #fff; }
.pp2-play-btn.disabled {
  background: #f8fafc; border-color: #e2e8f0;
  color: #cbd5e1; cursor: default;
  pointer-events: none;
}
/* File confirmed missing in storage (live MinIO check) — same colors, just
   faded and inert, rather than the "not processed yet" gray of .disabled. */
.pp2-play-btn.pp2-unavailable,
.pp2-model-slot.pp2-unavailable {
  filter: grayscale(70%);
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hover metadata popover (AI Workflow row left icon) */
.pp2-hover-pop {
  position: fixed;
  z-index: 10050;
  width: 280px;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-top: 2px solid #e5e9f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.14), 0 1px 3px rgba(15,23,42,.06);
  padding: 10px 12px;
  pointer-events: none;
}
.pp2-hover-pop.hidden { display: none; }
.pp2-hover-pop.seg { border-top-color: #2563eb; }
.pp2-hover-pop.geo { border-top-color: #7c3aed; }

.pp2-hover-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 3px 0; }
.pp2-hover-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: #94a3b8;
  flex-shrink: 0;
  padding-top: 1px;
}
.pp2-hover-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600; color: #1e293b;
  text-align: right; white-space: normal; word-break: break-word;
}
.pp2-hover-value.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp2-hover-avail { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.pp2-hover-avail.ok   { color: #059669; }
.pp2-hover-avail.warn { color: #b45309; }
.pp2-hover-avail.bad  { color: #dc2626; }
.pp2-hover-avail::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* -‚-‚- Empty state -‚-‚- */
.pp2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 10px;
  text-align: center;
}
.pp2-empty i { font-size: 32px; color: #94a3b8; opacity: .7; }
.pp2-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #334155;
  margin: 0;
}
.pp2-btn-ghost-sm {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background .12s;
}
.pp2-btn-ghost-sm:hover { background: #f1f5f9; }

/* -‚-‚- Lane Footer / Pager -‚-‚- */
.pp2-lane-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-top: 1px solid #eef1f6;
  background: #fbfcfe;
  flex-shrink: 0;
}
.pp2-foot-info {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  color: #64748b;
}
.pp2-pager { display: flex; align-items: center; gap: 4px; }
.pp2-pager-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s;
}
.pp2-pager-btn:hover:not(:disabled) { background: #f1f5f9; }
.pp2-pager-btn:disabled { color: #94a3b8; cursor: default; opacity: .5; }
.pp2-pager-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #64748b;
  padding: 0 6px;
  white-space: nowrap;
}
.pp2-pager-page {
  font-weight: 700;
}

/* Lane header tinted backgrounds */
.pp2-lane-hdr.seg { background: #f8fbff; }
.pp2-lane-hdr.geo { background: #faf7ff; }

/* Loading shimmer */
.pp2-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 48px 20px;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  gap: 10px;
}



/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   cx-*  Customers page  —  Settings → Customers
   Spec-authoritative block. All previous cx-* rules are superseded.
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* -”€-”€ Outer page surface -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
/* NOTE: display is NOT set here -€” .setup-section / .setup-section.active controls visibility */
.cx-page {
  flex-direction: column;
  gap: 0;
  background: #eef1f6;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

/* -”€-”€ Card header -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 26px 16px;
  background: #eef1f6;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}
.cx-header-tile {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff4ff, #dbe6ff);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cx-heading {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em; color: #0f172a;
}
.cx-subheading {
  margin: 3px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; color: #64748b;
}

/* -”€-”€ KPI strip -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 26px 16px;
  flex-shrink: 0;
}
.cx-kpi-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  position: relative;
  overflow: hidden;
  display: block;
  text-align: left;
  transition: box-shadow .15s;
  cursor: default;
}
.cx-kpi-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rail, #e5e9f0);
  border-radius: 14px 0 0 14px;
}
.cx-kpi-card:hover { box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.cx-kpi-card--warn { cursor: pointer; }
.cx-kpi-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700; color: #64748b;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.2;
  margin: 4px 0 2px; color: #0f172a;
}
.cx-kpi-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; color: #64748b;
}

/* -”€-”€ Filter + table card -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-card {
  margin: 0 26px 26px;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
  flex-shrink: 0;
}

/* -”€-”€ Filter bar -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #eef1f6;
}
.cx-search-wrap {
  position: relative;
  flex: 1; min-width: 220px; max-width: 340px;
}
.cx-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; font-size: 12px; pointer-events: none;
}
.cx-search-input {
  width: 100%;
  padding: 8px 10px 8px 30px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.cx-search-input::placeholder { color: #8b97a8; }
.cx-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* -”€-”€ Segmented control -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-seg-ctrl {
  display: inline-flex;
  align-items: center;
  background: #e4e9f1;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.cx-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
  letter-spacing: -.005em;
}
.cx-seg-btn .cx-seg-count {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600;
  color: #475569;
}
.cx-seg-btn.active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.cx-seg-btn.active .cx-seg-count { color: #2563eb; }
.cx-seg-btn:hover:not(.active) { background: rgba(255,255,255,.55); }

.cx-status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cx-result-count {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; color: #64748b;
  white-space: nowrap;
  margin-left: auto;
}

/* -”€-”€ Table header + rows  (BYTE-IDENTICAL template) -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-table-header,
.cx-table-row {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) 108px minmax(0,1.25fr) minmax(0,110px) 68px 96px 96px 88px;
  column-gap: 8px;
  padding: 0 20px;
  align-items: center;
}
.cx-table-header {
  background: #fbfcfe;
  border-top: 1px solid #eef1f6;
  border-bottom: 1px solid #eef1f6;
  min-height: 38px;
}
.cx-th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0; background: none; border: none;
  text-align: left; cursor: default; user-select: none;
}
.cx-th--right { text-align: right; }
.cx-th--sort {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
}
.cx-th--sort:hover { color: #0f172a; }
.cx-sort-icon {
  font-size: 9px;
  transition: transform .15s;
  flex-shrink: 0;
}
.cx-sort-icon.desc { transform: rotate(180deg); }

.cx-table-row {
  min-height: 48px;
  border-bottom: 1px solid #f4f7fa;
  cursor: pointer;
  transition: background .1s;
}
.cx-table-row:hover { background: #f8fafc; }
.cx-table-row:last-child { border-bottom: none; }

/* -”€-”€ Cell types -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-initials {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.cx-name-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px; font-weight: 700; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-code {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px; font-weight: 600; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 2px 7px;
  display: inline-block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cx-email {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; color: #475569;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-phone {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: #475569;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-phone--notset {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 700; color: #b45309;
}
.cx-sites {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 600; color: #0f172a;
  text-align: right;
}
.cx-sites--zero { color: #94a3b8; }

/* -”€-”€ Status pill -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
.cx-pill::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.cx-pill--active  { background: #ecfdf5; color: #059669; }
.cx-pill--active::before  { background: #22c55e; }
.cx-pill--inactive{ background: #f1f5f9; color: #64748b; }
.cx-pill--inactive::before{ background: #94a3b8; }

/* -”€-”€ Date -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-date {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: #64748b;
  white-space: nowrap;
}

/* -”€-”€ Row actions -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}
.cx-action-edit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff; color: #475569;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.cx-action-edit:hover { background: #eff4ff; color: #2563eb; border-color: #c7d2fe; }
.cx-action-delete {
  width: 30px; height: 30px;
  border: 1px solid #fecaca; border-radius: 8px;
  background: #fff; color: #dc2626;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.cx-action-delete:hover { background: #dc2626; color: #fff; }

/* -”€-”€ Empty state -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 20px; text-align: center;
}
.cx-empty-icon { font-size: 28px; color: #94a3b8; margin-bottom: 12px; }
.cx-empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700; color: #334155;
  margin: 0 0 4px;
}

/* -”€-”€ Footer pager -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: #fbfcfe;
  border-top: 1px solid #eef1f6;
  flex-wrap: wrap; gap: 8px;
  flex-shrink: 0;
}
.cx-footer-info {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px; color: #64748b; white-space: nowrap;
}
.cx-footer-info strong { color: #0f172a; font-weight: 700; }
.cx-pager { display: flex; align-items: center; gap: 4px; }
.cx-pager-btn {
  width: 31px; height: 31px;
  border: 1px solid #e2e8f0; border-radius: 9px;
  background: #fff; color: #475569; font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.cx-pager-btn:hover:not(:disabled) { background: #f1f5f9; border-color: #cbd5e1; }
.cx-pager-btn:disabled { color: #94a3b8; cursor: default; background: #f8fafc; }
.cx-pager-label {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12.5px; color: #64748b;
  padding: 0 6px; white-space: nowrap;
}
.cx-pager-label strong { color: #2563eb; font-weight: 700; }

/* -”€-”€ Buttons -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 10px; border: none;
  background: #2563eb; color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,.26);
  transition: background .12s, box-shadow .12s; white-space: nowrap;
}
.cx-btn-primary:hover { background: #1d4ed8; }
.cx-btn-primary:disabled {
  background: #c3d2ea; box-shadow: none; cursor: not-allowed;
}
.cx-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.cx-btn-ghost:hover { background: #f1f5f9; }
.cx-btn-danger-outline {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid #fca5a5; background: #fff; color: #dc2626;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.cx-btn-danger-outline:hover { background: #fee2e2; }

/* -”€-”€ Edit Customer Modal -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 16px;
}
.cx-modal {
  width: 540px; max-width: 100%;
  max-height: calc(100vh - 60px);
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15,23,42,.28);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cx-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #eef1f6;
  flex-shrink: 0; gap: 10px;
}
.cx-modal-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15.5px; font-weight: 800; color: #0f172a;
  letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cx-modal-sub {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.cx-modal-close {
  width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid #e2e8f0;
  background: #fff; color: #475569;
  font-size: 18px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s;
}
.cx-modal-close:hover { background: #f1f5f9; }
.cx-modal-body {
  flex: 1; overflow-y: auto; padding: 20px;
}
.cx-field-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px;
}
.cx-field { display: flex; flex-direction: column; gap: 5px; }
.cx-field--full { grid-column: 1 / -1; }
.cx-field-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700; color: #475569;
  letter-spacing: .05em; text-transform: uppercase;
}
.cx-input {
  padding: 9px 12px;
  border: 1px solid #e2e8f0; border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; color: #0f172a;
  background: #fff; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.cx-input::placeholder { color: #8b97a8; }
.cx-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cx-input.cx-input--error { border-color: #fca5a5; }
.cx-field-err {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px; font-weight: 600; color: #dc2626;
  min-height: 16px;
}
.cx-field-hint {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600;
}
.cx-hint--amber {
  background: #fffbeb; color: #92400e;
  border: 1px solid #fde68a;
}
.cx-divider {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 14px;
}
.cx-divider::before, .cx-divider::after {
  content: ''; flex: 1; height: 1px; background: #eef1f6;
}
.cx-divider-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px; font-weight: 700; color: #94a3b8; letter-spacing: .08em;
}
.cx-readonly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx-readonly-tile {
  background: #f8fafc; border: 1px solid #eef1f6;
  border-radius: 10px; padding: 10px 12px;
}
.cx-readonly-val {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 700; color: #0f172a; margin-top: 4px;
}
.cx-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: #fbfcfe;
  border-top: 1px solid #eef1f6; flex-shrink: 0;
  gap: 10px; flex-wrap: wrap;
}
.cx-modal-state {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 600; color: #64748b; white-space: nowrap;
}
.cx-modal-state--changed { color: #2563eb; }
.cx-modal-state--error   { color: #dc2626; }

/* -”€-”€ Grid templates for other setup sections -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-users-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr) 72px 80px 88px 72px; }
#cx-users-body .cx-table-row { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,.9fr) 72px 80px 88px 72px; }
.cx-sites-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 92px 76px 84px; }
#cx-sites-body .cx-table-row { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 92px 76px 84px; }
.cx-equip-grid { grid-template-columns: minmax(0,1.45fr) 104px minmax(0,1fr) minmax(0,1fr) 96px 84px 84px; }
#cx-equipment-body .cx-table-row { grid-template-columns: minmax(0,1.45fr) 104px minmax(0,1fr) minmax(0,1fr) 96px 84px 84px; }
/* cx-cams-grid 6-column v2 template is defined earlier in file */
/* (old 8-column #cx-cameras-body row rule removed) */
.cx-aim-grid { grid-template-columns: minmax(0,1.3fr) 80px minmax(0,1.1fr) 68px minmax(0,.9fr) 80px 88px 72px; }
#cx-ai-models-body .cx-table-row { grid-template-columns: minmax(0,1.3fr) 80px minmax(0,1.1fr) 68px minmax(0,.9fr) 80px 88px 72px; }
.cx-asgn-grid { grid-template-columns: minmax(0,1.4fr) minmax(0,1.2fr) 80px 80px 86px 72px; }
#cx-ai-assignments-body .cx-table-row { grid-template-columns: minmax(0,1.4fr) minmax(0,1.2fr) 80px 80px 86px 72px; }

/* -”€-”€ AI Models sub-tab bar -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-aim-tabs {
  display: flex; gap: 0;
  padding: 0 26px;
  border-bottom: 1px solid #e5e9f0;
  background: #eef1f6;
  flex-shrink: 0;
}
.cx-aim-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 0; margin-right: 28px;
  border: none; background: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px; font-weight: 700; color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.cx-aim-tab:hover { color: #334155; }
.cx-aim-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

/* -”€-”€ Accuracy mini-bar -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-accuracy-bar { display: flex; align-items: center; gap: 6px; }
.cx-acc-track { flex: 1; height: 4px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.cx-acc-fill  { height: 100%; border-radius: 3px; background: #2563eb; }
.cx-acc-label {
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 700; color: #475569;
  min-width: 32px; text-align: right;
}

/* -”€-”€ Type badge -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-type-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px; font-weight: 700;
  background: #f1f5f9; color: #475569;
  text-transform: capitalize;
}

/* -”€-”€ Superuser flag -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-super-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 10px;
}
.cx-super-flag--yes { background: #eff4ff; color: #2563eb; }
.cx-super-flag--no  { background: #f8fafc; color: #94a3b8; }

/* -”€-”€ Camera stream key -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
.cx-stream-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: #475569;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 1px 6px;
  display: inline-block;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* -”€-”€ Responsive -”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€-”€ */
@media (max-width: 900px) {
  .cx-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}


/* -”€-”€-”€ cx-page: override outer white-card for cx-* sections -”€-”€-”€ */
/* NOTE: do NOT set display here; .setup-section.active controls visibility */
.setup-section.cx-page {
  overflow-y: auto;
  background: #eef1f6;
}
/* When cx-page is active, ensure flex layout works */
.setup-section.active.cx-page {
  display: flex;
  flex-direction: column;
}
/* Ensure outer setup wrapper doesn't clip the scrolling cx-page */
#tab-setup > div {
  overflow: visible;
}
#tab-setup > div > .setup-container {
  overflow: hidden;
}


/* -”€-”€ Hide single-tab subtab bar in cx-* modes (cx-card-header serves as heading) -”€-”€ */
/* setup-mode-customers: only Customers tab visible, subtab bar is redundant */
#tab-setup.setup-mode-customers .setup-subtab-bar,
#tab-setup.setup-mode-models    .setup-subtab-bar {
  display: none;
}


/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   ML2 — AI Model Library Redesign
   Category palette: PPE/Compliance #ecfdf5/#059669 · Zone #eff4ff/#2563eb
                     Hazard #fee2e2/#dc2626 · In-cab #f3e8ff/#7c3aed
                     Health #fef3c7/#b45309
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */

/* -”€-”€ KPI strip -”€-”€ */
.ml2-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  padding: 0 26px 20px;
}
.ml2-kpi {
  position: relative;
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 14px;
  padding: 14px 16px 14px 20px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}
.ml2-kpi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--rail, #2563eb);
  border-radius: 14px 0 0 14px;
}
.ml2-kpi--btn {
  border-radius: 14px;
  transition: box-shadow .15s;
}
.ml2-kpi--btn:hover { box-shadow: 0 3px 10px rgba(15,23,42,.1); }
.ml2-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.ml2-kpi-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
}
.ml2-kpi-sub {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
}

/* -”€-”€ Sub-tab strip (Library / Assignments) -”€-”€ */
.ml2-aim-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 26px 0;
  border-bottom: 1px solid #eef1f6;
  margin-bottom: 0;
}
.ml2-aim-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.ml2-aim-tab:hover { color: #334155; }
.ml2-aim-tab.active { color: #2563eb; border-bottom-color: #2563eb; }

/* -”€-”€ Card (wraps filter + table + footer) -”€-”€ */
.ml2-card {
  background: #fff;
  border: 1px solid #e5e9f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  overflow: hidden;
}

/* -”€-”€ Filter bar -”€-”€ */
.ml2-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #eef1f6;
}
.ml2-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 330px;
}
.ml2-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 12px;
  pointer-events: none;
}
.ml2-search-input {
  width: 100%;
  padding: 9px 11px 9px 32px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: #0f172a;
  background: #f8fafc;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ml2-search-input::placeholder { color: #8b97a8; }
.ml2-search-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: #fff;
}

/* Category segmented control */
.ml2-seg-track {
  display: flex;
  align-items: center;
  background: #e4e9f1;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}