/* ============================================================================
   ZONAR · SFONDO CHIARO ANCHE SU MOBILE / PWA
   Da caricare DOPO zonar-theme.css (vince per cascata).
   - Toglie il "faro" scuro dietro il contenuto e mette fondo bianco.
   - NON tocca la barra superiore (.zonar-tb*) né il menu inferiore (.zonar-tab*):
     restano con il loro sfondo e testo scuri/chiari originali.
   - Riporta il testo del contenuto a colori scuri leggibili.
   ============================================================================ */

@media (max-width: 1024px) {

  /* 1) via il faro: fondo chiaro uniforme come nella versione web */
  html { background: #f4f6fb !important; }
  body::before,
  body::after { display: none !important; content: none !important; }

  main#content { background: transparent !important; }

  /* 2) intestazione della schermata "Esplora" (erano bianche → riga 85 del tema) */
  .zonar-esplora-title { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
  .zonar-esplora-sub   { color: #64748b !important; }
  .zonar-esplora-sec   { color: #94a3b8 !important; }

  /* 3) etichette dei moduli (La Mia Tessera, Chi Siamo, …) = .zonar-mod-lbl */
  .zonar-mod           { color: #0f172a !important; }
  .zonar-mod-lbl       { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }

  /* 4) icone dei moduli: versione chiara (come fa il tema in desktop) */
  .zonar-mod-ico {
    background: #fff !important; border: 1px solid rgba(46,123,255,.16) !important;
    color: #2E7BFF !important; box-shadow: 0 6px 18px -12px rgba(15,23,42,.35) !important;
  }
  .zonar-mod:hover .zonar-mod-ico {
    background: #2E7BFF !important; border-color: #2E7BFF !important; color: #fff !important;
  }

  /* 5) testo generico del contenuto fuori dalle card (titoli/paragrafi delle pagine) */
  main#content > *:not(.kt-card):not(.zonar-tb):not(.zonar-tabbar) {
    color: #0f172a;
  }
  main#content .text-secondary-foreground { color: #64748b !important; }
  main#content .text-muted-foreground     { color: #94a3b8 !important; }

  /* ── NON TOCCATE (restano come nel tema): ──────────────────────────────────
     .zonar-tb, .zonar-tb-name, .zonar-tb-bell  → barra superiore
     .zonar-tab*, .zonar-tab-center             → menu inferiore
     .wbc-grad, .kt-btn-primary                 → bottoni pieni (testo bianco ok)
     .ag-hero *                                 → hero scuri con testo bianco     */
}


/* === DARK SIDEBAR FIX v1 === */
/* In modalita' scura la sidebar deve essere scura con testo chiaro.
   Sovrascrive .kt-sidebar{background:#fff!important} di zonar-theme.css. */
html.dark .kt-sidebar{
  background:#0b1220 !important;
  border-inline-end:1px solid rgba(255,255,255,.08) !important;
}
/* testo e icone delle voci menu, leggibili su scuro */
html.dark .kt-sidebar .kt-menu-link,
html.dark .kt-sidebar .kt-menu-title,
html.dark .kt-sidebar a{
  color:#c9d4e5 !important;
}
html.dark .kt-sidebar .kt-menu-icon i,
html.dark .kt-sidebar i{
  color:#9fb0c8 !important;
}
/* intestazioni gruppo (ASSOCIAZIONE, ECOSISTEMA...) */
html.dark .kt-sidebar .kt-menu-heading,
html.dark .kt-sidebar .text-muted-foreground{
  color:#7c8aa3 !important;
}
/* hover */
html.dark .kt-sidebar .kt-menu-link:hover,
html.dark .kt-sidebar a:hover{
  background:rgba(46,123,255,.12) !important;
  color:#ffffff !important;
}
/* voce attiva */
html.dark .kt-sidebar .kt-menu-item-active > .kt-menu-link,
html.dark .kt-sidebar .kt-menu-link.active,
html.dark .kt-sidebar a.active{
  background:rgba(46,123,255,.18) !important;
  color:#ffffff !important;
}
html.dark .kt-sidebar .kt-menu-item-active .kt-menu-icon i{
  color:#2E7BFF !important;
}
/* separatori */
html.dark .kt-sidebar hr,
html.dark .kt-sidebar .kt-separator{ border-color:rgba(255,255,255,.08) !important; }
/* === /DARK SIDEBAR FIX === */


/* === DARK SIDEBAR FIX v2 === */
/* Sidebar scura in dark mode. Sovrascrive .kt-sidebar{background:#fff!important}. */
html.dark .kt-sidebar{
  background:#0b1220 !important;
  border-inline-end:1px solid rgba(255,255,255,.08) !important;
}
/* testo voci (.kt-menu-title usa .text-foreground) */
html.dark .kt-sidebar .kt-menu-title{ color:#c9d4e5 !important; }
/* icone (.kt-menu-icon usa .text-muted-foreground) */
html.dark .kt-sidebar .kt-menu-icon,
html.dark .kt-sidebar .kt-menu-icon i{ color:#9fb0c8 !important; }
/* heading gruppo (ASSOCIAZIONE, ECOSISTEMA...) */
html.dark .kt-sidebar .kt-menu-heading{ color:#7c8aa3 !important; }
/* freccia gruppi */
html.dark .kt-sidebar .wbc-nav-arrow,
html.dark .kt-sidebar .wbc-nav-arrow i{ color:#7c8aa3 !important; }
/* hover voce */
html.dark .kt-sidebar .kt-menu-link:hover{ background:rgba(46,123,255,.14) !important; }
html.dark .kt-sidebar .kt-menu-link:hover .kt-menu-title{ color:#ffffff !important; }
/* voce ATTIVA (.kt-menu-item-active) */
html.dark .kt-sidebar .kt-menu-item-active > .kt-menu-link{ background:rgba(46,123,255,.20) !important; }
html.dark .kt-sidebar .kt-menu-item-active .kt-menu-title{ color:#ffffff !important; }
html.dark .kt-sidebar .kt-menu-item-active .kt-menu-icon,
html.dark .kt-sidebar .kt-menu-item-active .kt-menu-icon i{ color:#2E7BFF !important; }
/* separatori */
html.dark .kt-sidebar hr{ border-color:rgba(255,255,255,.08) !important; }
/* === /DARK SIDEBAR FIX v2 === */


/* === DARK BLU ZONAR v2 === */
html.dark, .dark, [data-kt-theme-mode="dark"]{
  --background:#0f1a2e !important;
  --foreground:#eaf2ff !important;
  --card:#1a2942 !important;
  --card-foreground:#eaf2ff !important;
  --popover:#1a2942 !important;
  --popover-foreground:#eaf2ff !important;
  --muted:#22344f !important;
  --muted-foreground:#a9bdda !important;
  --secondary:#24374f !important;
  --secondary-foreground:#eaf2ff !important;
  --accent:#24374f !important;
  --accent-foreground:#eaf2ff !important;
  --border:#2c4062 !important;
  --input:#2c4062 !important;
}
html.dark .kt-sidebar{ background:#12203a !important; }
html.dark .kt-card{ background:#1a2942 !important; border-color:#2c4062 !important; }
html.dark main#content .text-mono,
html.dark main#content .font-display,
html.dark main#content h1,
html.dark main#content h2,
html.dark main#content h3,
html.dark main#content h4{ color:#eaf2ff !important; }
html.dark main#content [style*="background:#fff"] .text-mono,
html.dark main#content [style*="background: #fff"] .text-mono{ color:#0f172a !important; }
/* === /DARK BLU ZONAR === */