/* ==========================================================================
   WarnMe App v3 — Dark theme overrides
   Si attiva con [data-theme="dark"] (impostato dal selettore in /settings).
   Default = light coerente su tutta l'app.
   ========================================================================== */

[data-theme="dark"] {
  --color-bg: #131820;
  --color-bg-alt: #0e131a;
  --color-surface: #1b222d;
  --color-surface-2: #232b38;
  --color-surface-elev: #2a3340;
  --color-border: #2a3340;
  --color-border-strong: #3b4555;
  --fg1: #f1f3f8;
  --fg2: #e7eaf0;
  --fg3: #7e879a;
  --fg-invert: #131820;
  --color-text: var(--fg1);
  --color-text-muted: var(--fg2);
  --color-text-subtle: var(--fg3);
  --color-text-invert: var(--fg-invert);
  --color-primary: #FF8585;
  --color-primary-light: #FFB1A4;
  --color-primary-dark: #FF6B6B;
  --color-primary-soft: rgba(255,133,133,0.18);
  --color-cyan-soft: rgba(34,211,219,0.18);
  --color-yellow-soft: rgba(255,200,87,0.20);
  --gradient-primary: linear-gradient(135deg, #FF8585 0%, #FFB1A4 100%);
  --gradient-hero:
    radial-gradient(120% 100% at 0% 0%, rgba(255,133,133,0.18) 0%, transparent 60%),
    radial-gradient(80% 80% at 100% 0%, rgba(34,211,219,0.14) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(255,200,87,0.10) 0%, transparent 60%);
  --color-success-bg: rgba(0,184,148,0.16);
  --color-error-bg: rgba(239,68,68,0.18);
  --color-warning-bg: rgba(245,158,11,0.18);
  --color-info-bg: rgba(59,130,246,0.18);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --shadow-glow: 0 10px 24px rgba(255,107,107,0.45);
  --ring: 0 0 0 3px rgba(255,107,107,0.35);
}

/* Component-specific dark overrides */
[data-theme="dark"] .nav { background: rgba(27,34,45,0.88); }
[data-theme="dark"] .chat-bubble--visitor { background: #2a3140; color: var(--color-text); }
[data-theme="dark"] .chat-thread-header { background: var(--color-primary-dark); }

[data-theme="dark"] .hero__title {
  background: linear-gradient(135deg, #ffffff 0%, #FF8585 60%, #FFC857 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

[data-theme="dark"] .nav__lang {
  background-color: var(--color-surface-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23b3bbcb' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}

[data-theme="dark"] .feature-card { background: var(--color-surface); }

[data-theme="dark"] .qr-section__placeholder,
[data-theme="dark"] .qr-section__preview {
  background: var(--color-surface-2);
}

[data-theme="dark"] .auth-page {
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(255,133,133,0.12) 0%, transparent 50%),
    radial-gradient(60% 60% at 100% 100%, rgba(34,211,219,0.10) 0%, transparent 50%);
}

[data-theme="dark"] .profile-page__cta {
  background: linear-gradient(135deg, rgba(255,133,133,0.12) 0%, rgba(34,211,219,0.10) 100%);
}

/* ── Form controls ── */
[data-theme="dark"] .form-control {
  background-color: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .form-control:focus {
  background-color: var(--color-surface-2);
  color: var(--color-text);
  border-color: var(--color-primary);
}
[data-theme="dark"] select.form-control option {
  background: var(--color-surface-2);
  color: var(--color-text);
}

/* ── Buttons ── */
[data-theme="dark"] .btn--ghost {
  color: var(--color-text);
}
[data-theme="dark"] .btn--ghost:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
[data-theme="dark"] .btn--outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme="dark"] .btn--outline:hover {
  background: var(--color-primary-soft);
}

/* ── Settings page ── */
[data-theme="dark"] .settings-section {
  background: var(--color-surface);
}
[data-theme="dark"] .settings-item {
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .settings-item label,
[data-theme="dark"] .settings-item__info label {
  color: var(--color-text);
}
[data-theme="dark"] .settings-item label svg,
[data-theme="dark"] .settings-item__info label svg {
  opacity: 0.9;
}
[data-theme="dark"] .form-hint {
  color: var(--color-text-subtle);
}
[data-theme="dark"] .switch__slider {
  background: var(--color-surface-elev);
}
[data-theme="dark"] .switch__input:checked + .switch__slider {
  background: var(--color-primary);
}

/* ── Cards & surfaces ── */
[data-theme="dark"] .profile-card,
[data-theme="dark"] .qr-section,
[data-theme="dark"] .channels-section,
[data-theme="dark"] .messages-section,
[data-theme="dark"] .actions-section {
  background: var(--color-surface);
}
[data-theme="dark"] .channel-item {
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .message-item {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .message-item__meta {
  color: var(--color-text-subtle);
}
[data-theme="dark"] .badge {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ── Nav ── */
[data-theme="dark"] .nav__logo span,
[data-theme="dark"] .nav__icon-btn,
[data-theme="dark"] .nav__actions .btn--ghost {
  color: var(--color-text);
}