/* Command centre — additions over style.css. Same tokens, same components, amber identity.
   Formula-editor styles live in formulas.css (shared with the Billing page). */
.admin-app{ --accent:#f59e0b; --accent-2:#fb7185 }
html[data-accent] .admin-app{ --accent:#f59e0b; --accent-2:#fb7185 }
.admin-mark{ background:linear-gradient(135deg,#f59e0b,#f43f5e) }
.admin-badge{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.04em; flex:none;
  text-transform:uppercase; padding:0 10px; height:34px; border-radius:999px; color:#f59e0b; background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3); white-space:nowrap }
@media (max-width:640px){ .admin-badge{ width:40px; height:40px; padding:0; justify-content:center } .admin-badge-lbl{ display:none } }

/* layout helpers */
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:16px; margin-top:16px }
.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; margin-top:16px }
.grid2f{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px }
.card + .card{ margin-top:16px }
.card.pad{ padding:16px 18px }
.hint{ color:var(--mut); font-size:12.5px; line-height:1.55; margin:6px 0; overflow-wrap:anywhere }
.hint code, .hint b{ color:var(--tx) }
.sub-h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fnt); font-weight:600; margin:0 0 8px }
.big{ font-family:var(--disp); font-size:clamp(22px,2vw + 12px,28px); font-weight:700; margin:4px 0 2px; overflow-wrap:anywhere }
.check{ display:inline-flex; gap:8px; align-items:center; color:var(--mut); font-size:13px; cursor:pointer; min-height:32px }
.check input{ width:16px; height:16px; accent-color:var(--accent) }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:14px }
.kpi .eyebrow{ margin-bottom:6px }
.kpi .sub{ color:var(--mut); font-size:12px; overflow-wrap:anywhere }
.kpi.warn{ border-color:rgba(244,183,64,.5) } .kpi.bad{ border-color:rgba(240,106,106,.5) }
.skel-card{ background:linear-gradient(90deg,var(--s1),var(--s3),var(--s1)); background-size:200% 100%; animation:sk 1.2s infinite }
@keyframes sk{ to{ background-position:-200% 0 } }

.facts{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; padding:6px 16px 14px; font-size:13px }
.facts dt{ color:var(--mut) } .facts dd{ font-family:var(--mono); margin:0; overflow-wrap:anywhere }
@media (max-width:480px){ .facts{ grid-template-columns:1fr; gap:2px } .facts dt{ margin-top:8px } }

.chips{ display:flex; flex-wrap:wrap; gap:6px }
.chips .chip{ font-family:var(--mono); font-size:12px }

.ret{ background:color-mix(in srgb,var(--s2) 80%,transparent); border:1px solid var(--bd); border-radius:var(--r-sm); padding:12px 14px; min-width:0 }
.ret .fl{ margin-top:8px }

.rule-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--bd) }
.rule-row .lbl{ min-width:0 } .rule-row .lbl b{ display:block; overflow-wrap:anywhere } .rule-row .lbl small{ color:var(--mut); display:block }
.rule-row .app-input{ width:130px }
@media (max-width:760px){
  .rule-row{ grid-template-columns:1fr 1fr } .rule-row .lbl{ grid-column:1 / -1 } .rule-row .app-input{ width:100% }
  .rule-row .btn-ghost{ grid-column:1 / -1; justify-content:center }
}

/* device detail table payloads */
#ad-uplinks td:last-child{ max-width:420px; white-space:pre-wrap; overflow-wrap:anywhere }

/* tabbed pages */
[data-tab-panel]{ display:none }
[data-tab-panel].is-active{ display:block }
.tabs + [data-tab-panel]{ margin-top:0 }