/* public/command-center/command-center.css
   Additive ONLY — every color/border/radius below is var(--...) pulled
   from the root /style.css design system. Nothing in the root file is
   touched or redefined. This page is a new, additive nav destination,
   not a replacement for the existing AI Office tabs. */

.cc-wrap{max-width:1400px;margin:0 auto;padding:22px 20px 60px;position:relative;z-index:1;}

/* ---------- header ---------- */
.cc-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;margin-bottom:14px;}
.cc-brand{display:flex;align-items:center;gap:14px;}
.cc-crown{width:52px;height:52px;font-size:26px;}
.cc-title{font-size:19px;margin:0;font-weight:700;letter-spacing:0.2px;}
.cc-title small{font-size:12px;font-weight:500;color:var(--dim);}
.cc-accent{background:linear-gradient(135deg,var(--purple2),var(--pink2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.cc-tag{margin:4px 0 0;font-size:12px;color:var(--dim);}
.cc-live{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);padding:9px 14px;border-radius:12px;font-size:11.5px;}

.cc-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.cc-note{font-size:10.5px;color:var(--dimmer);max-width:720px;line-height:1.6;}

/* ---------- badges ---------- */
.cc-badge{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:0.4px;padding:2px 7px;border-radius:6px;text-transform:uppercase;font-family:'JetBrains Mono',monospace;}
.cc-badge.live{background:rgba(47,224,138,0.15);color:var(--green);border:1px solid rgba(47,224,138,0.35);}
.cc-badge.preview{background:rgba(255,200,56,0.12);color:var(--yellow);border:1px solid rgba(255,200,56,0.32);}

/* ---------- stat strip ---------- */
.cc-stat-grid{margin-bottom:16px;}
.stat-label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:0.5px;font-family:'JetBrains Mono',monospace;margin-bottom:8px;}
.stat-value{font-size:26px;font-weight:700;}

/* ---------- 3-col layout ---------- */
.cc-grid{display:grid;grid-template-columns:280px 1fr 300px;gap:16px;align-items:start;}
.cc-col{display:flex;flex-direction:column;gap:16px;}
@media(max-width:1150px){.cc-grid{grid-template-columns:1fr;}}

/* ---------- commander card ---------- */
.cc-commander{display:flex;align-items:center;gap:12px;padding:16px;}
.commander-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,rgba(155,92,255,0.25),rgba(255,95,214,0.18));border:1px solid var(--border-hi);}
.commander-name{font-size:13.5px;font-weight:700;}
.commander-role{font-size:10.5px;color:var(--dim);}

/* ---------- provider list ---------- */
.cc-provider-list{display:flex;flex-direction:column;gap:8px;}
.cc-provider-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,0.02);}
.cc-provider-row .p-name{font-size:12px;font-weight:600;}
.cc-provider-row .p-sub{font-size:9.5px;color:var(--dimmer);font-family:'JetBrains Mono',monospace;}

/* ---------- quick actions ---------- */
.cc-quick-actions{display:flex;flex-direction:column;gap:8px;}
.qa-btn{display:block;text-decoration:none;font-size:12px;color:var(--text);background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:9px 12px;transition:border-color .16s ease,transform .16s ease;}
.qa-btn:hover{border-color:var(--border-hi);transform:translateY(-1px);}

/* ---------- GIA hero orb ---------- */
.cc-gia-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 20px;position:relative;overflow:visible;}
.cc-gia-hero .hud-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-56%);}
.cc-gia-orb{width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle,rgba(155,92,255,0.35),rgba(255,95,214,0.14) 60%,transparent 78%);margin-bottom:14px;}
.cc-gia-orb img{width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 0 14px rgba(155,92,255,0.75));}
.cc-gia-name{margin:0;font-size:22px;font-weight:700;}
.cc-gia-sub{margin:4px 0 18px;font-size:12px;color:var(--dim);}
.cc-mode-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.mode-pill{display:flex;align-items:center;gap:6px;font-size:11.5px;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--border);padding:8px 13px;border-radius:999px;}
.mode-pill:hover{border-color:var(--border-hi);}
.mode-pill.preview{opacity:0.65;cursor:default;}

/* ---------- routing strip ---------- */
.cc-routing-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.route-step{font-size:11px;font-family:'JetBrains Mono',monospace;background:rgba(155,92,255,0.08);border:1px solid var(--border);border-radius:8px;padding:7px 10px;}
.route-arrow{color:var(--dimmer);font-size:12px;}

/* ---------- agent / conn grids reuse .agent-grid/.conn-grid from root; small tweaks ---------- */
.cc-agent-grid .agent-card{min-width:150px;}
.cc-conn-grid{max-height:420px;overflow-y:auto;padding-right:4px;}

/* ---------- status list ---------- */
.cc-status-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.cc-status-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;}
.cc-status-list li span{color:var(--dim);}
.cc-status-list b{font-size:10.5px;font-family:'JetBrains Mono',monospace;font-weight:600;}
.cc-status-list b.ok{color:var(--green);}
.cc-status-list b.dim{color:var(--dimmer);}

/* ---------- social strip ---------- */
.cc-social-strip{margin-top:16px;}
.cc-social-icons{font-size:12px;color:var(--dim);}

.cc-footer{text-align:center;font-size:10.5px;color:var(--dimmer);margin-top:26px;}