/* admin-cockpit.css — cockpit restyle layer over the existing admin page.
   Adds a modern dark command-center look WITHOUT touching any element id
   or script. Loaded AFTER app.css so it wins. Purely presentational. */
:root{
  --cp-bg:#060a16; --cp-bg2:#0a1122; --cp-panel:rgba(17,25,45,.72);
  --cp-line:rgba(90,130,200,.18); --cp-line2:rgba(90,130,200,.32);
  --cp-text:#eaf1ff; --cp-mute:#93a6cc; --cp-cyan:#41eaff; --cp-blue:#3b82f6;
  --cp-green:#7cffb2; --cp-amber:#ffd479; --cp-red:#ff8b8b; --cp-purple:#bd8bff;
}
body{
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(65,234,255,.10), transparent 55%),
    var(--cp-bg) !important;
  color:var(--cp-text);
}
.wrap{max-width:1320px !important;}

/* ── sticky command bar ── */
.top{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(8,13,26,.96), rgba(8,13,26,.78));
  backdrop-filter:blur(10px);
  border:1px solid var(--cp-line); border-radius:16px;
  padding:16px 20px !important; margin-bottom:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.35);
}
.top h1{font-size:22px !important; letter-spacing:.2px; background:linear-gradient(90deg,#fff,#9fd8ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.top .tag{color:var(--cp-cyan); font-weight:800; letter-spacing:.14em; font-size:11px;}
.top p{color:var(--cp-mute); font-size:12.5px;}
.topActions{display:flex; gap:10px; align-items:center;}
.adminLink, .topActions button, #refreshBtn{
  border:1px solid var(--cp-line2) !important; background:rgba(65,234,255,.06) !important;
  color:var(--cp-cyan) !important; border-radius:10px !important; padding:9px 14px !important;
  font-weight:700 !important; text-decoration:none !important; cursor:pointer; font-size:13px;
  transition:all .15s ease;
}
.adminLink:hover, .topActions button:hover, #refreshBtn:hover{background:rgba(65,234,255,.14) !important; transform:translateY(-1px);}

/* ── section quick-nav (injected by JS) ── */
#cpNav{
  position:sticky; top:92px; z-index:40; display:flex; gap:8px; flex-wrap:wrap;
  padding:10px 4px; margin-bottom:14px;
}
#cpNav a{
  font-size:12px; color:var(--cp-mute); text-decoration:none; padding:6px 12px;
  border:1px solid var(--cp-line); border-radius:999px; background:rgba(17,25,45,.5);
  transition:all .15s ease;
}
#cpNav a:hover{color:var(--cp-text); border-color:var(--cp-cyan); background:rgba(65,234,255,.08);}

/* ── hero KPI strip (top .cards) ── */
.cards{display:grid; gap:12px;}
.cards>div{
  background:linear-gradient(160deg, rgba(24,34,60,.8), rgba(12,18,34,.8)) !important;
  border:1px solid var(--cp-line) !important; border-radius:14px !important;
  padding:16px 18px !important; position:relative; overflow:hidden;
}
.cards>div::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--cp-cyan),var(--cp-blue));}
.cards>div span{color:var(--cp-mute) !important; font-size:11px !important; text-transform:uppercase; letter-spacing:.1em;}
.cards>div strong{color:var(--cp-text) !important; font-size:26px !important; font-weight:900 !important;}
.cards>div .money, .money{color:var(--cp-green) !important;}

/* ── panels ── */
.panel{
  background:var(--cp-panel) !important; border:1px solid var(--cp-line) !important;
  border-radius:16px !important; padding:20px 22px !important; margin-bottom:16px !important;
  backdrop-filter:blur(6px); box-shadow:0 6px 30px rgba(0,0,0,.25);
  scroll-margin-top:150px;
}
.panel h2{
  font-size:16px !important; color:var(--cp-text) !important; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--cp-line); padding-bottom:10px; margin-bottom:14px;
}
.panelHeader{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.panelHeader h2{border:0; padding:0; margin:0;}
.panelHeader small, .panelHead small{color:var(--cp-mute); font-size:12px;}
.mutedText, .notice{color:var(--cp-mute) !important; font-size:12.5px;}
.notice{background:rgba(59,130,246,.08) !important; border:1px solid var(--cp-line) !important; border-radius:12px !important; padding:12px 14px !important;}

/* ── CEO / metric grids ── */
.ceoGrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.ceoCard{
  background:linear-gradient(160deg, rgba(24,34,60,.7), rgba(12,18,34,.7)) !important;
  border:1px solid var(--cp-line) !important; border-radius:14px !important; padding:14px 16px !important;
}
.ceoCard span{color:var(--cp-mute) !important; font-size:11px; text-transform:uppercase; letter-spacing:.08em;}
.ceoCard strong{font-size:24px !important; color:var(--cp-text) !important; display:block; margin:4px 0 2px;}
.ceoCard small{color:var(--cp-mute) !important; font-size:10.5px;}

/* ── forms/inputs ── */
input, select, textarea{
  background:#0a1120 !important; border:1px solid var(--cp-line2) !important;
  color:var(--cp-text) !important; border-radius:9px !important; padding:10px 12px !important;
  font-size:14px !important;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--cp-cyan) !important; box-shadow:0 0 0 3px rgba(65,234,255,.12);}
button, .panel button{
  background:linear-gradient(90deg,var(--cp-blue),#13b9d4) !important; color:#fff !important;
  border:0 !important; border-radius:10px !important; padding:10px 18px !important;
  font-weight:800 !important; cursor:pointer; transition:transform .12s ease, filter .12s ease;
}
button:hover, .panel button:hover{transform:translateY(-1px); filter:brightness(1.08);}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}

/* ── tables ── */
.tableBox{overflow-x:auto; border:1px solid var(--cp-line); border-radius:12px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{
  background:rgba(59,130,246,.10); color:var(--cp-mute); text-align:left; padding:10px 12px;
  font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.06em;
  border-bottom:1px solid var(--cp-line2);
}
tbody td{padding:10px 12px; border-bottom:1px solid var(--cp-line); color:var(--cp-text);}
tbody tr:hover{background:rgba(65,234,255,.04);}
.successBox{background:#08111f !important; border:1px solid var(--cp-line2) !important; border-radius:10px !important; color:var(--cp-green) !important; padding:12px !important; font-size:12px;}

/* status pills where the JS writes plain text still read fine; add subtle color hooks */
strong[id^="gauge"], strong[id^="pc"], strong[id^="metric"], strong[id^="rev"]{color:var(--cp-cyan) !important;}