/* ============================================================
   SUPER ADMIN SPA STYLES
   ============================================================ */

/* ---------- KPI GRID ---------- */
.sa-kpi-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;margin-bottom:18px;
}
.sa-kpi{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--sa-line, #e2e8f0);
  border-radius:18px;padding:16px;
  box-shadow:0 6px 22px rgba(6,42,87,.05);
  transition:transform .18s, box-shadow .18s;
}
.sa-kpi:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(6,42,87,.10)}
.sa-kpi.orange{
  background:linear-gradient(135deg,#062a57,#0b3d7a);
  color:#fff;border-color:transparent;
}
.sa-kpi.orange .sa-kpi-body span,
.sa-kpi.orange .sa-kpi-body small{color:#dbe7f6}
.sa-kpi.orange .sa-kpi-body strong{color:#fff}
.sa-kpi.orange .sa-kpi-icon{background:rgba(255,122,24,.22);color:#ffb46f}
.sa-kpi-icon{
  width:48px;height:48px;border-radius:14px;
  background:#fff0e4;color:#ff7a18;
  display:grid;place-items:center;font-size:19px;flex-shrink:0;
}
.sa-kpi-body span{
  display:block;color:#61748f;font-size:11px;
  font-weight:900;text-transform:uppercase;letter-spacing:.7px;
}
.sa-kpi-body strong{
  display:block;font-size:22px;color:#062a57;
  margin-top:3px;letter-spacing:-.5px;
}
.sa-kpi-body small{
  display:block;color:#61748f;font-size:11px;
  margin-top:3px;font-weight:700;
}

/* ---------- PANELS ---------- */
.sa-panel{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:20px;padding:20px;
  box-shadow:0 6px 22px rgba(6,42,87,.05);
}
.sa-panel-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;margin-bottom:16px;
}
.sa-panel-head h2{
  margin:4px 0 0;font-size:19px;
  color:#062a57;letter-spacing:-.4px;
}
.sa-grid-2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}

/* ---------- LINE CHART ---------- */
.chart-box{height:260px;position:relative}
.line-chart{position:relative;height:100%;padding:10px 0 30px}
.line-svg{width:100%;height:calc(100% - 24px);display:block}
.line-labels{
  display:flex;justify-content:space-between;
  font-size:11px;color:#61748f;font-weight:800;padding:0 12px;
}

/* ---------- BAR CHART ---------- */
.bar-chart-wrap{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:12px;align-items:end;height:220px;
  padding:16px 4px 4px;
}
.bar-col{
  display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;
  gap:7px;height:100%;
}
.bar-col>span{font-size:11px;color:#61748f;font-weight:800}
.bar-value{font-size:11px;color:#062a57;font-weight:900;min-height:15px}
.bar-track{
  height:160px;width:100%;display:flex;align-items:flex-end;
  background:repeating-linear-gradient(to top,#fff 0,#fff 40px,#e9eef5 41px);
  border-radius:10px 10px 4px 4px;overflow:hidden;
}
.bar-fill{
  width:55%;margin:auto;
  background:linear-gradient(180deg,#ff7a18,#ff9a3c);
  border-radius:8px 8px 2px 2px;min-height:7px;
  transition:height .5s ease;
}

/* ---------- SKELETON ---------- */
.sa-skeleton{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sa-skel-card{
  background:#fff;border:1px solid #e2e8f0;
  border-radius:18px;padding:20px;min-height:110px;
  animation:sa-pulse 1.2s ease-in-out infinite;
}
@keyframes sa-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- SIDEBAR STATUS ---------- */
.side-status{background:transparent!important;box-shadow:none!important;border:0!important}

/* ---------- NAV LINKS (SPA) ---------- */
.nav-link{cursor:pointer}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1200px){
  .sa-kpi-grid{grid-template-columns:repeat(3,1fr)}
  .sa-grid-2{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .sa-kpi-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sa-kpi{padding:12px}
  .sa-kpi-icon{width:40px;height:40px;font-size:16px}
  .sa-kpi-body strong{font-size:17px}
  .sa-panel{padding:15px}
  .sa-panel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .bar-chart-wrap{height:180px}
  .bar-track{height:120px}
  .sa-skeleton{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .sa-kpi-grid{grid-template-columns:1fr}
  .sa-skeleton{grid-template-columns:1fr}
}