/* =====================================================================
 * ShieldOps — Unified color-coded KPI cards
 *
 * The top "summary" KPI cards are made visually IDENTICAL to the lower
 * "Recent Incident Reports" (.rep-card) cards: same gradient dark-glass
 * background, 18px radius, 18px padding, blur, and layered shadow — PLUS a
 * colored left border, colored icon background and a soft colored glow.
 *
 * Color rules:
 *   green  = Active / Open / Guards On Duty
 *   blue   = Employees / information metrics
 *   orange = Today / Upcoming items
 *   red    = Critical alerts
 *   purple = Closed / Completed metrics
 * ===================================================================== */

/* ---- shared look, taken straight from .rep-card ---- */
:root {
  --kpi-bg: linear-gradient(160deg, rgba(18,30,52,.66), rgba(9,16,30,.66));
  --kpi-border: var(--sx-border, rgba(120,160,210,.16));
  --kpi-radius: 18px;
  --kpi-pad: 18px;
  --kpi-shadow: 0 16px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  --kpi-shadow-hover: 0 24px 56px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- color tones (set CSS vars consumed by every KPI card) ---- */
.kpi-green  { --kc:#39ff14; --kcs:rgba(57,255,20,.16);  --kcg:rgba(57,255,20,.45); }
.kpi-blue   { --kc:#38bdf8; --kcs:rgba(56,189,248,.16); --kcg:rgba(56,189,248,.45); }
.kpi-orange { --kc:#ffb020; --kcs:rgba(255,176,32,.18); --kcg:rgba(255,176,32,.45); }
.kpi-red    { --kc:#ff5a5f; --kcs:rgba(255,90,95,.18);  --kcg:rgba(255,90,95,.48); }
.kpi-purple { --kc:#a78bfa; --kcs:rgba(167,139,250,.18);--kcg:rgba(167,139,250,.48); }

/* ---- equal-size responsive grid (gap matches the .rep-grid below) ---- */
.kpic-grid { display:grid; gap:16px; margin-bottom:22px; align-items:stretch; grid-template-columns:repeat(6,1fr); }
.kpic-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.kpic-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:1200px){ .kpic-grid, .kpic-grid.cols-4 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px) { .kpic-grid, .kpic-grid.cols-4, .kpic-grid.cols-3 { grid-template-columns:repeat(2,1fr); } }

/* ---- the card (matches .rep-card glass + colored accents) ---- */
.kpic {
  position:relative; overflow:hidden;
  background:var(--kpi-bg);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--kpi-border);
  border-left:4px solid var(--kc,#39ff14);
  border-radius:var(--kpi-radius);
  padding:var(--kpi-pad);
  box-shadow:var(--kpi-shadow), 0 0 26px -8px var(--kcg,transparent);
  display:flex; flex-direction:column; gap:8px;
  min-height:108px; justify-content:center;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  cursor:pointer;
}
.kpic:hover { transform:translateY(-4px); border-color:var(--kc,#39ff14);
  box-shadow:var(--kpi-shadow-hover), 0 0 32px -4px var(--kcg,transparent); }
.kpic-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.kpic-ico { width:40px; height:40px; border-radius:11px; display:flex; align-items:center;
  justify-content:center; font-size:20px; background:var(--kcs); }
.kpic-label { color:var(--sx-text-dim, #9ca3af); font-size:12px; text-transform:uppercase; letter-spacing:.6px; font-weight:700; }
.kpic-value { color:var(--kc); font-size:30px; font-weight:800; line-height:1; letter-spacing:-.5px; }
.kpic-sub { color:var(--sx-text-dim, #93a4bd); font-size:12px; }

/* ---- make the SUI KPI cards (Dashboard / Reports strip / legacy) identical ---- */
.sui-kpi {
  background:var(--kpi-bg) !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
  border:1px solid var(--kpi-border) !important;
  border-radius:var(--kpi-radius) !important;
  padding:var(--kpi-pad) !important;
  box-shadow:var(--kpi-shadow), 0 0 26px -8px var(--sui-accent,#39ff14) !important;
}
.sui-kpi:hover { transform:translateY(-4px) !important;
  box-shadow:var(--kpi-shadow-hover), 0 0 32px -4px var(--sui-accent,#39ff14) !important; }
.sui-kpi::before { width:4px !important; background:var(--sui-accent,#39ff14) !important; opacity:1 !important; }
/* icon keeps its inline accent tint (matching .kpic-ico / .emp-kpi-ico) */
.sui-kpi .sui-kpi-value { color:var(--sui-accent,#fff) !important; }

/* ---- make the Employees KPI cards identical ---- */
.emp-kpi {
  background:var(--kpi-bg) !important;
  -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
  border:1px solid var(--kpi-border) !important;
  border-radius:var(--kpi-radius) !important;
  padding:var(--kpi-pad) !important;
  box-shadow:var(--kpi-shadow), 0 0 26px -8px var(--ek,#39ff14) !important;
}
.emp-kpi:hover { transform:translateY(-4px) !important;
  box-shadow:var(--kpi-shadow-hover), 0 0 32px -4px var(--ek,#39ff14) !important; }
.emp-kpi::before { width:4px !important; background:var(--ek,#39ff14) !important; }
.emp-kpi .emp-kpi-value { color:var(--ek,#fff) !important; }