/* ═════════════════════════════════════════════════════════════════════════
   SunMonitor — refresh.css (LEGACY override-laag)
   ─────────────────────────────────────────────────────────────────────────
   Na Fase 4 (CSS componentisering) bevat dit bestand nog ~360 regels van:
     - Login-pagina refresh (login-left/right + ll-* token-styling)
     - Settings-grid styling (.settings-grid + .settings-actions)
     - Customer contact (btn-contact, cust-contact-options/option/icon)
     - Customer updated indicator (cust-updated-old)

   Wat WEL verplaatst is uit refresh.css (Fase 4.0-4.6, ~1040 regels):
     - components/badge|empty-state|form|button|kpi|card|topbar|
       sidebar-customer|site-card|inverter.css

   Cascade: refresh.css laadt na style.css en VOOR components/*.css
   (zie index.html). Page-specifieke refresh-rules (zoals login styling)
   kunnen later naar pages/login.css.
   ═════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────
   LOGIN — Linkerkant (donkere panel met radial gradient)
   ─────────────────────────────────────────────────────────────────── */
.login-left {
  padding: var(--space-14);
  background: var(--color-gray-900);
}

.login-left::before {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(217, 119, 6, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(14, 165, 233, 0.10) 0%, transparent 50%);
}

.ll-logo {
  margin-bottom: var(--space-12);
  gap: var(--space-5);
}

.ll-brand {
  font-size: var(--fs-22);
  letter-spacing: -0.01em;
}

.ll-tagline {
  font-size: var(--fs-9);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.ll-title {
  font-size: var(--fs-40);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
  letter-spacing: -0.015em;
}

.ll-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, 0.55);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  max-width: 38ch;
}

.ll-stats {
  margin-top: var(--space-12);
  gap: var(--space-10);
  padding-top: var(--space-7);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ll-sv {
  font-size: var(--fs-28);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.ll-sl {
  font-size: var(--fs-9);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.ll-foot {
  font-size: var(--fs-9);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
}

/* ───────────────────────────────────────────────────────────────────
   LOGIN — Rechterkant (form panel)
   ─────────────────────────────────────────────────────────────────── */
.login-right {
  padding: var(--space-14);
  background: var(--surface-card);
}

.login-card {
  max-width: 400px;
}

.login-h {
  font-size: var(--fs-28);
  font-weight: var(--fw-extrabold);
  margin-bottom: var(--space-2);
  letter-spacing: -0.015em;
}

.login-s {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-bottom: var(--space-10);
  letter-spacing: 0;
}

/* FORMS + BUTTONS → verplaatst naar css/components/form.css + button.css (Fase 4.1) */

/* TOPBAR + AVATAR refresh-overrides → verplaatst naar css/components/topbar.css (Fase 4.4) */

/* ───────────────────────────────────────────────────────────────────
   Responsive aanpassingen
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .login-left {
    padding: var(--space-10);
  }
  .login-right {
    padding: var(--space-10) var(--space-7);
  }
  .ll-title {
    font-size: var(--fs-32);
  }
  .ll-sv {
    font-size: var(--fs-24);
  }
  /* topbar+nav+av @768 → verplaatst naar css/components/topbar.css (Fase 4.4) */
}

@media (max-width: 480px) {
  .login-right {
    padding: var(--space-8) var(--space-6);
  }
  .ll-title {
    font-size: var(--fs-28);
  }
  /* .topbar @480 → verplaatst naar css/components/topbar.css (Fase 4.4) */
}

/* ═════════════════════════════════════════════════════════════════════════
   FASE 2 — KPI TEGELS + CARDS
   ═════════════════════════════════════════════════════════════════════════ */

/* KPI + CARD base/refresh → verplaatst naar css/components/kpi.css + card.css (Fase 4.3) */
/* (#customerScreen .grid2 .card overrides hieronder blijven page-specifiek) */

/* Customer-screen card override: bewaar de glasmorphism iets gepoetst */
#customerScreen .grid2 .card,
#customerScreen .card {
  background: var(--surface-card);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

#customerScreen .grid2 .card:hover,
#customerScreen .card:hover {
  box-shadow: var(--shadow-md);
}

/* EMPTY STATES → verplaatst naar css/components/empty-state.css (Fase 4) */

/* SITE-CARD (cust-sites-* + cust-site-card-*) → verplaatst naar
   css/components/site-card.css (Fase 4.5) */

/* CUSTOMER SIDEBAR (cust-shell, cust-sidebar, cust-profile, cust-side-nav, etc.)
   → verplaatst naar css/components/sidebar-customer.css (Fase 4.4) */

/* ───────────────────────────────────────────────────────────────────
   ADMIN — Settings page
   ─────────────────────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.settings-grid .form-grp-wide {
  grid-column: 1 / -1;
}

.settings-grid .form-hint {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-bottom: var(--space-7);
}

@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ───────────────────────────────────────────────────────────────────
   CUSTOMER — Contact button + modal
   ─────────────────────────────────────────────────────────────────── */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-5);
}

.cust-contact-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cust-contact-option {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface-card);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition-base);
  cursor: pointer;
  align-items: flex-start;
}

.cust-contact-option:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.cust-contact-icon {
  font-size: var(--fs-24);
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-soft);
  border-radius: var(--radius-circle);
  color: var(--color-brand);
}

.cust-contact-body {
  flex: 1;
  min-width: 0;
}

.cust-contact-title {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.cust-contact-sub {
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.cust-contact-value {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-brand);
  font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
  .btn-contact {
    display: none;
  }
}

/* ───────────────────────────────────────────────────────────────────
   CUSTOMER — Inverter-tabel "Geavanceerd" toggle
   Standaard: kerne kolommen zichtbaar (Omvormer, Status, Temp, Update).
   Met toggle: ook Riso, AC L1/L2/L3, Grid Hz.
   ─────────────────────────────────────────────────────────────────── */
/* .cust-inv-table-toolbar + .cust-inv-toggle + advanced toggle + @640
   → verplaatst naar css/components/inverter.css (Fase 4.5b) */

/* ───────────────────────────────────────────────────────────────────
   CUSTOMER — "Geen gateway" banner (sites zonder CM4)
   ─────────────────────────────────────────────────────────────────── */
.cust-no-gateway-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-7);
  margin-bottom: var(--space-6);
  background: linear-gradient(135deg, var(--color-warning-soft) 0%, #fff 100%);
  border: 1px solid var(--color-warning);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.cust-no-gateway-icon {
  font-size: var(--fs-32);
  line-height: 1;
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.cust-no-gateway-body {
  flex: 1;
  min-width: 0;
}

.cust-no-gateway-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}

.cust-no-gateway-sub {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 64ch;
}

/* ───────────────────────────────────────────────────────────────────
   CUSTOMER — Bijgewerkt-label freshness states
   ─────────────────────────────────────────────────────────────────── */
.cust-updated-stale {
  color: var(--color-warning-active);
  font-weight: var(--fw-semibold);
}

.cust-updated-old {
  color: var(--color-danger-active);
  font-weight: var(--fw-semibold);
}

/* STATUS BADGES → verplaatst naar css/components/badge.css (Fase 4) */

/* Responsive @768 KPI/cards → verplaatst naar css/components/kpi.css + card.css (Fase 4.3) */