/**
 * SunMonitor — Card component CSS (Fase 4.3)
 *
 * Algemene .card wrapper + body/header varianten.
 * #customerScreen en #engineerScreen overrides BLIJVEN in style.css —
 * komen later naar pages/*.css (Fase 4.6).
 *
 * JS counterpart: /js/components/card.js
 */

/* ─── Base (style.css legacy) ────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.card-hd {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-hd-t      { font-size: 13px; font-weight: 700; }
.card-bd        { padding: 20px; }
.card-mb        { margin-bottom: 16px; }
.card-bd-chart  { padding: 10px 14px 14px; position: relative; }
.card-bd-flex   { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px; }
.card-bd-flush  { padding: 0; }
.card-bd-tickets{ padding: 8px 16px; }
.card-hd-right  { display: flex; gap: 8px; align-items: center; }

/* ─── Refresh-overrides (modern token-based) ─────────────────────── */
.card {
  background: var(--surface-card);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-sm); }

.card-mb { margin-bottom: var(--space-6); }

.card-hd {
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--color-gray-200);
  gap: var(--space-5);
}

.card-hd-t {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.card-hd-right {
  gap: var(--space-3);
}

.card-bd        { padding: var(--space-7); }
.card-bd-chart  { padding: var(--space-4) var(--space-6) var(--space-6); }
.card-bd-flex   { gap: var(--space-4); padding: var(--space-6); }
.card-bd-tickets{ padding: var(--space-4) var(--space-6); }
.card-bd-flush  { padding: 0; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tabel-scroll in kleine cards (style.css legacy) */
  .card-bd { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Refresh-override */
  .card-hd { padding: var(--space-5) var(--space-6); }
  .card-bd { padding: var(--space-6); }
}

@media (max-width: 480px) {
  /* Compactere card padding (style.css legacy) */
  .card-hd   { padding: 12px 14px; }
  .card-hd-t { font-size: 12px; }
  .card-bd   { padding: 12px !important; }
}