/* watchtower-enrollment.css — EOC Console "Enrollment" module (item 2).
 * Dispatch-side field enrollment: card groups · daily card · live roster ·
 * inbound feed. Command-dark tokens. Design: Watchtower Field Enrollment.dc.html */

.enr-body {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px; background: var(--bg-0, #070b13);
}
.enr-ph {
  display: flex; align-items: center; gap: 10px;
  font: 600 11px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t-1, #c3ccdf); margin-bottom: 10px;
}
.enr-ph .live { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1 var(--label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-2, #9aa6bf); }
.enr-ph .live .dot { color: var(--ok, #3fb56b); font-size: 9px; }

.enr-top { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
.enr-col { background: var(--bg-1, #0e1626); border: 1px solid var(--l-2, #2a3148); border-radius: 8px; padding: 12px; }
.enr-col.groups .enr-scroll { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; }

/* card group tiles */
.enr-group {
  border: 1px solid var(--l-2, #2a3148); border-radius: 7px; padding: 10px 11px;
  background: var(--bg-2, #141f33); cursor: pointer;
}
.enr-group:hover { border-color: var(--l-3, #2a3148); }
.enr-group.sel { border-color: var(--acc, #41b6e6); box-shadow: inset 0 0 0 1px var(--acc, #41b6e6); }
.enr-group.closed { opacity: 0.62; }
.enr-group .eg-head { display: flex; align-items: center; gap: 8px; }
.enr-group .eg-name { flex: 1; font: 600 13.5px/1.2 var(--sans); color: var(--t-0, #f1f4fb); }
.enr-group .eg-count { font: 700 15px/1 var(--mono); color: var(--acc, #41b6e6); }
.enr-group .eg-sub { font: 11px/1.3 var(--sans); color: var(--t-3, #6b768f); margin: 3px 0 9px; }
.eg-lvl { font: 700 8.5px/1 var(--mono); letter-spacing: 0.08em; padding: 3px 6px; border-radius: 3px; }
.eg-lvl.cmd   { background: rgba(229,30,37,0.18);  color: var(--crit, #e51e25); }
.eg-lvl.chair { background: rgba(255,199,44,0.2);   color: var(--warn, #ffc72c); }
.eg-lvl.vol   { background: rgba(122,134,153,0.18); color: var(--t-2, #9aa6bf); }
.eg-toggles { display: flex; gap: 7px; }
.eg-tg {
  flex: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 8px; cursor: pointer;
  background: var(--bg-1, #0e1626); border: 1px solid var(--l-2, #2a3148); border-radius: 5px;
  color: var(--t-2, #9aa6bf);
}
.eg-tg .tg-knob { width: 22px; height: 12px; border-radius: 7px; background: var(--l-3, #2a3148); position: relative; flex: 0 0 auto; transition: background 120ms; }
.eg-tg .tg-knob::after { content: ""; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--t-1, #c3ccdf); transition: left 120ms; }
.eg-tg .tg-lbl { font: 600 9.5px/1 var(--label); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.eg-tg.on { color: var(--t-0, #f1f4fb); }
.eg-tg.on .tg-knob { background: var(--ok, #3fb56b); }
.eg-tg.on .tg-knob::after { left: 11px; background: #fff; }
.eg-tg.amber.on .tg-knob { background: var(--warn, #ffc72c); }

/* daily card */
.enr-card { display: flex; flex-direction: column; }
.ec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ec-head .ec-title { flex: 1; font: 600 12px/1 var(--label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-0, #f1f4fb); }
.ec-box {
  background: #fff; border-radius: 10px; padding: 22px 18px; min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
}
.ec-box .ec-mark { font: 600 9px/1 var(--mono); letter-spacing: 0.16em; color: #1B2A4A; }
.ec-box .ec-code { font: 500 34px/1 var(--mono); letter-spacing: 0.22em; color: #ffc72c; padding-left: 0.22em; }
.ec-box .ec-link { font: 500 11px/1.3 var(--mono); color: #9aa6bf; word-break: break-all; }
.ec-box .ec-grp { font: 12px/1.3 var(--sans); color: #1B2A4A; }
.ec-box .ec-placeholder { color: #9aa6bf; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 12px/1.5 var(--sans); }
.ec-note { font: 12px/1.45 var(--sans); color: var(--t-2, #9aa6bf); margin: 12px 0; }
.ec-note b { color: var(--warn, #ffc72c); }
.ec-rotate { width: 100%; justify-content: center; }
.ec-foot { font: 11px/1.45 var(--sans); margin-top: 10px; }

/* roster */
.enr-roster, .enr-inbound { background: var(--bg-1, #0e1626); border: 1px solid var(--l-2, #2a3148); border-radius: 8px; padding: 12px; }
.enr-roster .enr-ph { justify-content: flex-start; }
.enr-roster .kpis { display: inline-flex; gap: 10px; margin-left: 6px; }
.enr-roster .kpi { font: 500 10px/1 var(--label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--t-2, #9aa6bf); }
.enr-roster .kpi b { color: var(--t-0, #f1f4fb); font-weight: 700; }
.enr-roster .kpi.gold b { color: var(--warn, #ffc72c); }
.enr-roster .kpi.red b { color: var(--crit, #e51e25); }
.enr-roster .enr-note { margin-left: auto; font: 11px/1 var(--sans); }
.enr-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 70px 100px 130px; align-items: center; gap: 10px;
  padding: 9px 8px; border-bottom: 1px solid var(--l-1, #1d2840);
}
.enr-row.enr-hd { font: 600 9px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3, #6b768f); border-bottom: 1px solid var(--l-2, #2a3148); }
.enr-row.sos { background: rgba(229,30,37,0.12); }
.enr-row .er-name { font: 600 13px/1.2 var(--sans); color: var(--t-0, #f1f4fb); }
.enr-row .er-org { font-size: 11.5px; color: var(--t-2, #9aa6bf); }
.enr-row .er-in { font-size: 12px; color: var(--t-2, #9aa6bf); }
.enr-row .er-st { display: inline-flex; align-items: center; gap: 7px; font: 12px/1 var(--sans); color: var(--t-1, #c3ccdf); }
.gpill { display: inline-block; font: 600 9.5px/1 var(--label); letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; background: var(--bg-3, #1b2a4a); color: var(--t-1, #c3ccdf); }
.enr-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.enr-dot.live { background: var(--ok, #3fb56b); box-shadow: 0 0 6px var(--ok, #3fb56b); }
.enr-dot.pending { background: var(--warn, #ffc72c); }
.enr-dot.limited { background: var(--acc, #41b6e6); }
.enr-dot.revoked { background: var(--t-3, #6b768f); }
.sos-badge { font: 700 9px/1 var(--mono); letter-spacing: 0.06em; color: #fff; background: var(--crit, #e51e25); padding: 3px 6px; border-radius: 3px; animation: enr-sos-pulse 1.1s ease-in-out infinite; }
@keyframes enr-sos-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.enr-b { font: 600 11px/1 var(--sans); padding: 6px 11px; border-radius: 5px; cursor: pointer; border: 1px solid var(--l-2, #2a3148); background: transparent; color: var(--t-2, #9aa6bf); }
.enr-b.appr { border-color: var(--ok, #3fb56b); color: var(--ok, #3fb56b); }
.enr-b.appr:hover { background: var(--ok, #3fb56b); color: var(--bg-0, #070b13); }
.enr-b.rev:hover { border-color: var(--crit, #e51e25); color: var(--crit, #e51e25); }
.enr-b.disp { background: var(--crit, #e51e25); border-color: var(--crit, #e51e25); color: #fff; }

.enr-inbound .enr-inbound-host { min-height: 200px; display: flex; flex-direction: column; }

@media (max-width: 1000px) {
  .enr-top { grid-template-columns: 1fr; }
  .enr-row { grid-template-columns: 1.4fr 1fr 90px 120px; }
  .enr-row .er-org, .enr-row .er-in { display: none; }
}

/* per-group QR (client-side encoder) inside the daily card */
.ec-box .ec-qr { width: 168px; height: 168px; margin: 2px auto; }
.ec-box .ec-qr svg { display: block; border-radius: 4px; }
.ec-box.revealed .ec-code { font-size: 26px; }