/*
 * Camada visual exclusiva do PWA Edge White Label.
 * Os únicos valores de marca são injetados no shell pelo Principal; os demais
 * tons são derivados no navegador e nunca persistidos por hostname.
 */
.is-white-label {
  --wl-page: color-mix(in srgb, var(--wl-primary) 6%, white);
  --wl-surface: color-mix(in srgb, var(--wl-primary) 3%, white);
  --wl-surface-hover: color-mix(in srgb, var(--wl-primary) 8%, white);
  --wl-border: color-mix(in srgb, var(--wl-primary) 18%, white);
  --wl-ink: color-mix(in srgb, var(--wl-primary) 72%, #071f1f);
  --wl-muted: color-mix(in srgb, var(--wl-primary) 52%, #6d7979);
  --wl-primary-soft: color-mix(in srgb, var(--wl-primary) 12%, white);
  --wl-accent-soft: color-mix(in srgb, var(--wl-accent) 14%, white);
  --wl-shadow: 0 18px 44px color-mix(in srgb, var(--wl-primary) 16%, transparent);

  /* Aliases estruturais: não sobrescrevem sucesso, erro, alerta ou estados OCPP. */
  --cc-paper: var(--wl-surface);
  --cc-surface: var(--wl-surface);
  --cc-line: var(--wl-border);
  --cc-ink: var(--wl-ink);
  --cc-muted: var(--wl-muted);
  --cc-shadow: var(--wl-shadow);

  /* CTAs de destaque do PWA: cupom e atalho central de Recarga. */
  --ccpwa-on-accent-button: #fff;
  --ccpwa-on-accent-cta: #fff;
}

.pwa-app-body.is-white-label,
.auth-page.is-white-label {
  background: var(--wl-page);
  color: var(--wl-ink);
}

.is-white-label .cc-app-launch {
  background: var(--wl-primary);
}

.pwa-app-body.is-white-label .ccpwa-page-card,
.pwa-app-body.is-white-label .ccpwa-modal-card,
.pwa-app-body.is-white-label .ccpwa-map-frame .leaflet-popup-content-wrapper,
.auth-page.is-white-label .auth-card {
  background: var(--wl-surface);
  border-color: var(--wl-border);
  box-shadow: var(--wl-shadow);
}

.pwa-app-body.is-white-label .ccpwa-sheet-grid > :not(.ccpwa-occupancy-charge-active),
.pwa-app-body.is-white-label .ccpwa-account-row,
.pwa-app-body.is-white-label .ccpwa-input-group,
.pwa-app-body.is-white-label .ccpwa-map-filter-panel {
  background: var(--wl-surface);
  border-color: var(--wl-border);
}

/* A lista de busca/próximas já vive dentro do cartão principal do mapa. */
.pwa-app-body.is-white-label .ccpwa-map-search-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.is-white-label input,
.is-white-label select,
.is-white-label textarea,
.is-white-label .ghost-action {
  border-color: var(--wl-border);
  background: var(--wl-surface);
  color: var(--wl-ink);
}

.is-white-label input:focus,
.is-white-label select:focus,
.is-white-label textarea:focus,
.is-white-label .ghost-action:hover,
.is-white-label .ghost-action:focus-visible {
  border-color: var(--wl-primary);
  background: var(--wl-surface-hover);
  outline-color: var(--wl-primary);
}

.auth-page.is-white-label .auth-submit,
.auth-page.is-white-label .solid-action {
  border-color: var(--wl-primary);
  background: var(--wl-primary);
  color: var(--wl-on-primary);
}

.auth-page.is-white-label .auth-footer a {
  color: var(--wl-primary);
}

.pwa-app-body.is-white-label .cc-support-close {
  border-color: var(--cc-danger);
  background: var(--cc-danger);
  color: #fff;
}

.pwa-app-body.is-white-label .cc-support-close:hover,
.pwa-app-body.is-white-label .cc-support-close:focus-visible {
  border-color: color-mix(in srgb, var(--cc-danger) 84%, #5a1d1d);
  background: color-mix(in srgb, var(--cc-danger) 84%, #5a1d1d);
  color: #fff;
}

.pwa-app-body.is-white-label .ccpwa-modal-backdrop {
  background: color-mix(in srgb, var(--wl-primary) 30%, rgba(7, 31, 31, 0.58));
}