/* ============================================================
   Tema "Pastello multicolore" — SOLO app utente + area operatore.
   Caricato DOPO app.css, solo quando selezionato in Configurazioni -> Aspetto.
   (admin e contabile usano admin.css: non sono toccati)

   Convenzioni colore come molte app di prenotazione/portafoglio:
     BLU = prenotazioni/calendario · VERDE = credito/denaro ·
     PESCA = messaggi · LAVANDA = profilo · ROSSO = distruttivo (invariato).
   Barre CHIARE (niente scuro in tema chiaro). Testo scuro su fondo chiaro (AA).
   I componenti usano i token --cat-* qui sotto, ridefiniti per chiaro e scuro,
   così le stesse regole valgono in entrambe le modalità.
   ============================================================ */

:root{
  --cat-teal:#0e9a9a;  --cat-teal-bg:#c7efee;  --cat-teal-ink:#064a4a;
  --cat-green:#1a8a4e; --cat-green-bg:#d7f2e1; --cat-green-ink:#0c5a30;
  --cat-blue:#2563d6;  --cat-blue-bg:#dce7ff;  --cat-blue-ink:#10306e;
  --cat-peach:#d8582c; --cat-peach-bg:#ffe6d6; --cat-peach-ink:#6e2f10;
  --cat-lav:#6a46d9;   --cat-lav-bg:#e7e0ff;   --cat-lav-ink:#3a2a8f;
  --cat-pink:#c23b86;  --cat-pink-bg:#ffdcf1;  --cat-pink-ink:#5f1544;
  /* Accento globale = BLU (azioni/prenotazioni) */
  --primary:var(--cat-blue); --on-primary:#ffffff; --primary-ink:var(--cat-blue-ink);
  --primary-container:var(--cat-blue-bg); --on-primary-container:var(--cat-blue-ink);
  --primary-ring:rgba(37,99,214,.26);
  /* Barre CHIARE (appbar, bottom-nav; la carta credito viene forzata verde sotto) */
  --bar:#ffffff; --on-bar:#1b1b1d; --bar-muted:#9aa0ac;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
  --cat-teal:#3ec6c6;  --cat-teal-bg:#0c3d3d;  --cat-teal-ink:#8fe7e6;
  --cat-green:#4cc985; --cat-green-bg:#123a2c; --cat-green-ink:#8fe3b3;
  --cat-blue:#5b8dff;  --cat-blue-bg:#16305f;  --cat-blue-ink:#a9c5ff;
  --cat-peach:#ff9158; --cat-peach-bg:#52301c; --cat-peach-ink:#ffb488;
  --cat-lav:#a48bff;   --cat-lav-bg:#342a63;   --cat-lav-ink:#cabaff;
  --cat-pink:#f06cbb;  --cat-pink-bg:#5a1c43;  --cat-pink-ink:#ffb3e0;
  --primary:var(--cat-blue); --on-primary:#07173a; --primary-ink:var(--cat-blue-ink);
  --primary-container:var(--cat-blue-bg); --on-primary-container:var(--cat-blue-ink);
  --primary-ring:rgba(91,141,255,.30);
  --bar:#14181f; --on-bar:#eef0f4; --bar-muted:#8b9199;
}}
:root[data-theme="dark"]{
  --cat-teal:#3ec6c6;  --cat-teal-bg:#0c3d3d;  --cat-teal-ink:#8fe7e6;
  --cat-green:#4cc985; --cat-green-bg:#123a2c; --cat-green-ink:#8fe3b3;
  --cat-blue:#5b8dff;  --cat-blue-bg:#16305f;  --cat-blue-ink:#a9c5ff;
  --cat-peach:#ff9158; --cat-peach-bg:#52301c; --cat-peach-ink:#ffb488;
  --cat-lav:#a48bff;   --cat-lav-bg:#342a63;   --cat-lav-ink:#cabaff;
  --cat-pink:#f06cbb;  --cat-pink-bg:#5a1c43;  --cat-pink-ink:#ffb3e0;
  --primary:var(--cat-blue); --on-primary:#07173a; --primary-ink:var(--cat-blue-ink);
  --primary-container:var(--cat-blue-bg); --on-primary-container:var(--cat-blue-ink);
  --primary-ring:rgba(91,141,255,.30);
  --bar:#14181f; --on-bar:#eef0f4; --bar-muted:#8b9199;
}

/* ---- Barre chiare (niente scuro) ---- */
.appbar{border-bottom:1px solid rgba(16,24,40,.08)}
.appbar-title .brand-name .be{color:var(--cat-blue)}
.bottomnav{border-top:1px solid rgba(16,24,40,.08);box-shadow:0 -4px 16px rgba(16,24,40,.06)}

/* ---- Carta credito = VERDE ---- */
.balance{background:var(--cat-green-bg);color:var(--cat-green-ink)}
.balance-label{color:var(--cat-green-ink);opacity:.8}
.balance-amount{color:var(--cat-green)}
.balance-cta{background:var(--cat-green);color:var(--on-primary)}

/* ---- Azioni rapide: tessere multicolore ---- */
.quick-ic{background:var(--cat-teal-bg);color:var(--cat-teal-ink)}
.quick-tile:nth-child(4n+2) .quick-ic{background:var(--cat-blue-bg);color:var(--cat-blue-ink)}
.quick-tile:nth-child(4n+3) .quick-ic{background:var(--cat-peach-bg);color:var(--cat-peach-ink)}
.quick-tile:nth-child(4n+4) .quick-ic{background:var(--cat-lav-bg);color:var(--cat-lav-ink)}

/* ---- Icone delle liste: rotazione pastello ---- */
.listitem:nth-child(5n+1) .li-lead{background:var(--cat-green-bg);color:var(--cat-green-ink)}
.listitem:nth-child(5n+2) .li-lead{background:var(--cat-blue-bg);color:var(--cat-blue-ink)}
.listitem:nth-child(5n+3) .li-lead{background:var(--cat-peach-bg);color:var(--cat-peach-ink)}
.listitem:nth-child(5n+4) .li-lead{background:var(--cat-lav-bg);color:var(--cat-lav-ink)}
.listitem:nth-child(5n+5) .li-lead{background:var(--cat-pink-bg);color:var(--cat-pink-ink)}

/* ---- Metodi di pagamento: icone multicolore ---- */
.method-ic{background:var(--cat-green-bg);color:var(--cat-green-ink)}
.method:nth-child(3n+2) .method-ic{background:var(--cat-blue-bg);color:var(--cat-blue-ink)}
.method:nth-child(3n) .method-ic{background:var(--cat-peach-bg);color:var(--cat-peach-ink)}

/* ---- Accento delle sezioni: sfumatura verde->blu ---- */
.section-title::before{background:linear-gradient(180deg,var(--cat-green),var(--cat-blue))}

/* ---- Profilo: avatar lavanda ---- */
.avatar{background:linear-gradient(135deg,#8b74ff,var(--cat-lav));box-shadow:0 10px 22px rgba(106,70,217,.30)}

/* ---- Bottom-nav: un colore per funzione ----
   1 Home = teal · 2 Prenota = blu · 3 Ricarica = verde · 4 Messaggi = pesca · 5 Profilo = lavanda */
.navitem.active .navind{color:var(--on-primary)}
.navitem.active:nth-child(1){color:var(--cat-teal)}  .navitem.active:nth-child(1) .navind{background:var(--cat-teal)}  .navitem.active:nth-child(1) .navlabel{color:var(--cat-teal)}
.navitem.active:nth-child(2){color:var(--cat-blue)}  .navitem.active:nth-child(2) .navind{background:var(--cat-blue)}  .navitem.active:nth-child(2) .navlabel{color:var(--cat-blue)}
.navitem.active:nth-child(3){color:var(--cat-green)} .navitem.active:nth-child(3) .navind{background:var(--cat-green)} .navitem.active:nth-child(3) .navlabel{color:var(--cat-green)}
.navitem.active:nth-child(4){color:var(--cat-peach)} .navitem.active:nth-child(4) .navind{background:var(--cat-peach)} .navitem.active:nth-child(4) .navlabel{color:var(--cat-peach)}
.navitem.active:nth-child(5){color:var(--cat-lav)}   .navitem.active:nth-child(5) .navind{background:var(--cat-lav)}   .navitem.active:nth-child(5) .navlabel{color:var(--cat-lav)}