/* ================================================================
   pwa-mobile.css — Portale Conteggi Lavoro
   File dedicato e ADDITIVO: non modifica in alcun modo style.css.
   Riusa le variabili colore già definite in style.css (:root).
   Contiene solo: pulsante di installazione, guida iOS, bottom
   navigation mobile, supporto safe-area iPhone.
   ================================================================ */

/* ---------- pulsante "Installa l'app" (sito pubblico) ---------- */
.pcl-install-btn{
  display: none; /* mostrato via JS solo quando l'installazione è davvero disponibile */
  align-items: center; gap: 8px;
  background: var(--oro-ottone, #F26926); color: #fff;
  border: none; border-radius: 999px;
  padding: 9px 16px; font-family: var(--sans, inherit); font-weight: 600; font-size: 0.85rem;
  cursor: pointer;
}
.pcl-install-btn:hover{ background: var(--oro-ottone-90, #D6571A); }
.pcl-install-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- guida installazione iOS (modale semplice) ---------- */
.pcl-ios-modal{
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 24, 36, 0.55);
  align-items: flex-end; justify-content: center;
}
.pcl-ios-modal-card{
  background: #fff; width: 100%; max-width: 480px;
  border-radius: 16px 16px 0 0; padding: 24px 22px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--sans, inherit);
}
@media (min-width: 640px){
  .pcl-ios-modal{ align-items: center; }
  .pcl-ios-modal-card{ border-radius: 16px; padding: 28px; }
}
.pcl-ios-modal-card h3{
  margin: 0 0 14px; font-family: var(--serif, Georgia, serif); color: var(--blu-inchiostro, #384770); font-size: 1.15rem;
}
.pcl-ios-modal-card ol{ margin: 0 0 18px; padding-left: 20px; color: var(--inchiostro-testo, #24262C); font-size: 0.92rem; line-height: 1.7; }
.pcl-ios-modal-card button{
  width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--bordo-forte, #CBC8BF);
  background: transparent; font-family: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  color: var(--blu-inchiostro, #384770);
}

/* ================================================================
   BOTTOM NAVIGATION — solo smartphone (sotto 768px)
   ================================================================ */
.pcl-bottom-nav{
  display: none;
}

@media (max-width: 767px){
  .pcl-bottom-nav{
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: #fff; border-top: 1px solid var(--bordo, #E3E1DA);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around;
    box-shadow: 0 -2px 12px rgba(30,40,60,0.06);
  }
  .pcl-bottom-nav a{
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--inchiostro-soft, #5A5D68); text-decoration: none;
    font-family: var(--sans, inherit); font-size: 0.68rem; font-weight: 600;
    padding: 4px 6px; border-radius: 8px; flex: 1; min-width: 0;
  }
  .pcl-bottom-nav a svg{ width: 22px; height: 22px; }
  .pcl-bottom-nav a.is-active{ color: var(--blu-inchiostro, #384770); }
  .pcl-bottom-nav a.is-active svg{ stroke: var(--oro-ottone, #F26926); }
  .pcl-bottom-nav a span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* spazio per non far coprire l'ultimo contenuto dalla barra fissa */
  body.pcl-has-bottom-nav{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  /* nel sito pubblico il pulsante WhatsApp flottante deve salire sopra la bottom nav */
  .whatsapp-float{ bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

@media (min-width: 768px){
  .pcl-bottom-nav{ display: none !important; }
  body.pcl-has-bottom-nav{ padding-bottom: 0; }
}

/* ---------- accorgimenti touch generali, solo mobile, additivi ---------- */
@media (max-width: 767px){
  input, select, textarea, button, .btn{ font-size: max(16px, 1em); } /* evita zoom automatico iOS sui form */
}