/* css/06-circuit-box.css — Super admin / Circuit Box. Load order matters: files are cut from one stylesheet, in cascade order. */
/* ─── SUPER ADMIN / CIRCUIT BOX ─── */
.sa-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.sa-tab  { padding:8px 16px; font-size:13px; cursor:pointer; border:none; background:none; color:var(--text-mid); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:'Poppins',sans-serif; }
.sa-tab:hover  { color:var(--text-primary); }
.sa-tab.active { color:var(--amber); border-bottom-color:var(--amber); font-weight:500; }

.sa-session-badge { font-size:12px; background:var(--amber-light); color:var(--amber); padding:4px 10px; border-radius:99px; font-weight:500; }

.sa-health-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:600px) { .sa-health-grid { grid-template-columns:repeat(2,1fr); } }
.sa-health-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; font-size:12px; font-weight:500; color:var(--text-mid); display:flex; flex-direction:column; gap:4px; }
.sa-health-val  { font-size:18px; font-weight:700; color:var(--text); }
.sa-health-sub  { font-size:11px; color:var(--text-muted); }
.sa-status-dot  { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }
.sa-dot-ok      { background:var(--green); }
.sa-dot-warn    { background:var(--amber); }
.sa-dot-error   { background:var(--red); }

.sa-error-list { display:flex; flex-direction:column; gap:0; max-height:500px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); }
.sa-error-row  { padding:10px 14px; border-bottom:1px solid var(--border); }
.sa-error-row:last-child { border-bottom:none; }
.sa-error-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.sa-error-time { font-size:11px; color:var(--text-muted); }
.sa-error-user { font-size:11px; font-weight:500; color:var(--text-mid); }
.sa-error-view { font-size:11px; color:var(--text-muted); }
.sa-error-msg  { font-size:13px; color:var(--red); font-family:monospace; }
.sa-error-stack { font-size:11px; color:var(--text-muted); font-family:monospace; margin-top:4px; white-space:pre-wrap; }

.sa-challenge-wrap { text-align:center; padding:8px 0; }
.sa-challenge-icon { font-size:40px; margin-bottom:16px; }

/* ─── CIRCUIT BOX — MASTER EDIT PANEL ─── */
.cb-feature-row {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:14px 18px; border-bottom:1px solid var(--border);
}
.cb-feature-row:last-child { border-bottom:none; }
.cb-feature-info { flex:1; }
.cb-feature-label { font-size:13px; font-weight:500; color:var(--text); margin-bottom:3px; }
.cb-feature-desc  { font-size:12px; color:var(--text-muted); line-height:1.5; }

/* Toggle switch */
.cb-toggle { position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; margin-top:2px; }
.cb-toggle input { opacity:0; width:0; height:0; position:absolute; }
.cb-toggle-track {
  width:40px; height:22px; background:var(--border-mid); border-radius:99px;
  transition:background .2s; position:relative; display:block;
}
.cb-toggle input:checked + .cb-toggle-track { background:var(--green); }
.cb-toggle-thumb {
  position:absolute; top:3px; left:3px; width:16px; height:16px;
  background:white; border-radius:50%; transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.cb-toggle input:checked + .cb-toggle-track .cb-toggle-thumb { transform:translateX(18px); }

/* Pillar rows */
.cb-pillar-row {
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  border-bottom:1px solid var(--border);
}
.cb-pillar-row:last-child { border-bottom:none; }
.cb-row-disabled { opacity:.45; }
.cb-pillar-num  { width:24px; height:24px; border-radius:50%; background:var(--bg); color:var(--text-muted); font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cb-pillar-info { flex:1; }
.cb-pillar-name  { font-size:13px; font-weight:500; color:var(--text); }
.cb-pillar-owner { font-size:11px; color:var(--text-muted); margin-top:1px; }
.cb-pillar-actions { display:flex; gap:6px; flex-shrink:0; }