/**
 * SunMonitor — KPI tile component CSS (Fase 4.3)
 *
 * Twee varianten:
 *   .kpi      — admin dashboard tegels (4-koloms grid)
 *   .ckpi     — customer portal tegels (compacter, 3-koloms)
 *
 * Geconsolideerd uit style.css + refresh.css.
 * #engineerScreen en customer-screen specifieke overrides blijven in
 * style.css (komen later naar pages/*.css in Fase 4.6).
 *
 * JS counterpart: /js/components/kpi-tile.js
 */

/* ═════ ADMIN .kpi ═══════════════════════════════════════════════════ */

/* ─── Base (legacy) ───────────────────────────────────────────────── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.kpi:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kc, var(--sun));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kpi-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 8px;
}
.kpi-v { font-size: 25px; font-weight: 800; line-height: 1; }
.kpi-u { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 4px; }
.kpi-i { position: absolute; right: 16px; top: 16px; font-size: 24px; opacity: .07; }

/* ─── Refresh-overrides (modern) ─────────────────────────────────── */
.kpi-row {
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}
.kpi {
  background: var(--surface-card);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-7) var(--space-6);
  transition: var(--transition-base);
  box-shadow: var(--shadow-xs);
}
.kpi:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-gray-300);
}
.kpi::before {
  background: var(--kc, var(--color-brand));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kpi-l {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.kpi-v {
  font-size: var(--fs-28);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.kpi-u {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-top: var(--space-3);
  font-weight: var(--fw-medium);
}
.kpi-i {
  right: var(--space-6);
  top: var(--space-6);
  font-size: var(--fs-24);
  opacity: 0.08;
  font-weight: var(--fw-bold);
  color: var(--kc, var(--color-brand));
}

/* Optionele delta-indicator */
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.kpi-delta-up   { color: var(--color-success-active); background: var(--color-success-soft); }
.kpi-delta-down { color: var(--color-danger-active);  background: var(--color-danger-soft);  }

/* ═════ CUSTOMER .ckpi ═══════════════════════════════════════════════ */

/* ─── Base (legacy uit style.css 1189-1200) ──────────────────────── */
#customerScreen .cust-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

/* Verlies-tegel: lichtrode tint zodat klant snel onderscheid maakt
   met productie-tegels (geel/blauw kant). Bij 0 verlies = subtle, bij
   actieve storing krijgt 'ckpi-loss-active' class voor pulserend rood. */
#customerScreen .ckpi.ckpi-loss {
  background: rgba(254, 242, 242, 0.65);
  border-color: rgba(220, 38, 38, 0.18);
}
#customerScreen .ckpi.ckpi-loss .ckpi-ico {
  color: var(--color-danger-active, #b91c1c);
  opacity: 0.8;
}
#customerScreen .ckpi.ckpi-loss .ckpi-v {
  color: var(--color-danger-active, #b91c1c);
}
#customerScreen .ckpi.ckpi-loss-active {
  background: rgba(254, 226, 226, 0.85);
  border-color: rgba(220, 38, 38, 0.45);
  animation: ckpi-loss-pulse 2.4s ease-in-out infinite;
}
#customerScreen .ckpi.ckpi-loss-active .ckpi-v {
  color: #991b1b;
  font-weight: 800;
}
@keyframes ckpi-loss-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18); }
}
#customerScreen .ckpi {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(226, 232, 240, .95);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
  padding: 16px 16px 14px;
  backdrop-filter: blur(14px);
}
#customerScreen .ckpi-ico { color: #94a3b8; font-size: 11px; letter-spacing: .18em; }
#customerScreen .ckpi-v   { font-size: 22px; line-height: 1; color: #0f172a; letter-spacing: -.04em; }
#customerScreen .ckpi-l   { color: #64748b; font-family: var(--sans); font-size: 12px; letter-spacing: .01em; text-transform: none; }

/* ─── Refresh-overrides (modern) ─────────────────────────────────── */
#customerScreen .cust-kpi {
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
#customerScreen .ckpi {
  padding: 12px 14px 10px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  background: var(--surface-card);
  border: 1px solid var(--color-gray-200);
  backdrop-filter: none;
  transition: var(--transition-base);
}
#customerScreen .ckpi:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--color-gray-300);
}
#customerScreen .ckpi-ico {
  color: var(--text-muted);
  font-size: var(--fs-9);
  letter-spacing: 0.14em;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: 4px;
}
#customerScreen .ckpi-v {
  font-size: 20px;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-weight: var(--fw-extrabold);
  margin-bottom: 2px;
}
#customerScreen .ckpi-l {
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-medium);
}

#customerScreen .cust-kpi {
  gap: 12px;
  margin-bottom: 14px;
}

/* Cust-overview tab ckpi-v size override */
#customerScreen .tab-pane#cust-overview .ckpi-v { font-size: 20px; }

/* ═════ RESPONSIVE ═══════════════════════════════════════════════════ */

/* @1024: admin kpi 2-koloms */
@media (min-width: 769px) and (max-width: 1024px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* @768: tablet */
@media (max-width: 768px) {
  /* Admin .kpi (style.css legacy) */
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .kpi    { padding: 16px 14px; }
  .kpi-v  { font-size: 25px; }

  /* Admin .kpi (refresh override) */
  .kpi-row { gap: var(--space-4); margin-bottom: var(--space-6); }
  .kpi     { padding: var(--space-6) var(--space-5); }
  .kpi-v   { font-size: var(--fs-22); }
  .kpi-i   { font-size: var(--fs-20); right: var(--space-4); top: var(--space-4); }

  /* Customer .ckpi (4 tegels worden 2x2 op tablet) */
  #customerScreen .cust-kpi { grid-template-columns: 1fr 1fr; gap: 10px; }
  #customerScreen .ckpi   { padding: 10px 12px 8px; }
  #customerScreen .ckpi-v { font-size: 18px; }
}

/* @520: customer 1-koloms */
@media (max-width: 520px) {
  #customerScreen .cust-kpi { grid-template-columns: 1fr; }
}

/* @480: extra-klein admin */
@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi    { padding: 12px 10px; }
  .kpi-v  { font-size: 25px; }
  .kpi-l  { font-size: 8px; }
}