/* =================================================================== */
/* ShieldOps Professional UI V2 — shared component library styles       */
/* Loaded AFTER style.css; complements the glassmorphism theme.         */
/* =================================================================== */

/* ---------- KPI cards ---------- */
.sui-kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px; margin:6px 0 22px;
}
.sui-kpi{
  position:relative; overflow:hidden;
  background:rgba(16,28,48,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(120,160,210,.16);
  border-radius:18px; padding:20px 20px 18px;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sui-kpi:hover{ transform:translateY(-3px); border-color:rgba(47,224,122,.45); box-shadow:0 16px 44px rgba(0,0,0,.55); }
.sui-kpi::after{ content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:4px; background:var(--sui-accent,#2fe07a); }
.sui-kpi .sui-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sui-kpi .sui-kpi-icon{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:20px; background:rgba(47,224,122,.14);
}
.sui-kpi .sui-kpi-label{ color:#93a4bd; text-transform:uppercase; letter-spacing:.6px; font-size:11px; font-weight:700; }
.sui-kpi .sui-kpi-value{ color:#fff; font-size:30px; font-weight:800; margin:8px 0 2px; line-height:1; }
.sui-kpi .sui-kpi-sub{ color:#93a4bd; font-size:12px; }
.sui-kpi .sui-kpi-sub b.up{ color:#2fe07a; } .sui-kpi .sui-kpi-sub b.down{ color:#ff5a5f; }

/* ---------- Charts (pure CSS) ---------- */
.sui-charts{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
.sui-chart-card{
  background:rgba(16,28,48,.55); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(120,160,210,.16); border-radius:18px; padding:20px;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.sui-chart-card h3{ margin:0 0 16px; color:#fff; font-size:15px; }
.sui-bars{ display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; }
.sui-bar-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.sui-bar{
  width:100%; max-width:46px; border-radius:10px 10px 4px 4px;
  background:linear-gradient(180deg,#2fe07a,#15c277);
  box-shadow:0 6px 18px rgba(47,224,122,.25); transition:height .6s cubic-bezier(.2,.8,.2,1);
  min-height:4px;
}
.sui-bar.blue{ background:linear-gradient(180deg,#38bdf8,#0ea5e9); box-shadow:0 6px 18px rgba(56,189,248,.25); }
.sui-bar-label{ color:#93a4bd; font-size:11px; } .sui-bar-val{ color:#e8eef7; font-size:12px; font-weight:700; }
/* donut */
.sui-donut{ width:170px; height:170px; border-radius:50%; margin:6px auto; position:relative; }
.sui-donut::after{
  content:attr(data-center); position:absolute; inset:24px; border-radius:50%;
  background:rgba(10,19,38,.92); display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:22px; text-align:center;
}
.sui-legend{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.sui-legend div{ display:flex; align-items:center; gap:8px; color:#93a4bd; font-size:13px; }
.sui-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; }

/* ---------- Table toolbar / search / filter / pagination ---------- */
.sui-table-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 12px; padding:0;
}
.sui-search{ position:relative; flex:1; min-width:200px; }
.sui-search input{ width:100%; padding-left:38px !important; }
.sui-search::before{ content:"🔎"; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.7; }
.sui-table-toolbar select{ min-width:150px; }
.sui-table-count{ color:#93a4bd; font-size:12.5px; margin-left:auto; }
.sui-pagination{
  display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap;
  margin-top:12px; color:#93a4bd; font-size:13px;
}
.sui-pagination button{
  background:rgba(56,189,248,.10) !important; color:#cfe0f3 !important;
  border:1px solid rgba(120,160,210,.18) !important; border-radius:9px !important;
  padding:6px 12px !important; font-weight:700 !important; min-width:36px;
}
.sui-pagination button:disabled{ opacity:.4; cursor:not-allowed; }
.sui-pagination button.active{ background:linear-gradient(135deg,#2fe07a,#15c277) !important; color:#04130a !important; border-color:transparent !important; }
.sui-norows td{ text-align:center !important; color:#93a4bd !important; padding:30px !important; }

/* ---------- Segmented control / chips ---------- */
.sui-seg{ display:inline-flex; background:rgba(6,14,26,.7); border:1px solid rgba(120,160,210,.16); border-radius:12px; padding:4px; gap:4px; }
.sui-seg button{ background:transparent !important; color:#93a4bd !important; border:none !important; padding:7px 14px !important; border-radius:9px !important; }
.sui-seg button.active{ background:linear-gradient(135deg,#38bdf8,#0ea5e9) !important; color:#04121f !important; }

/* ---------- Form grid ---------- */
.sui-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.sui-field label{ display:block; margin:0 0 6px; font-size:12.5px; color:#93a4bd; font-weight:600; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){ .sui-charts{ grid-template-columns:1fr; } }
@media (max-width:700px){
  .sui-kpi-grid{ grid-template-columns:1fr 1fr; }
  .sui-table-count{ margin-left:0; }
}
@media (max-width:460px){ .sui-kpi-grid{ grid-template-columns:1fr; } }