/* =============================================================
   Inter Variable — self-hosted (no Google Fonts, niente timeout iOS)
   font-display: swap → mostra subito il fallback, poi swap a Inter
   appena caricato. Niente flash di testo bianco.
   Dichiarato come "Inter" così Tailwind font-sans lo trova senza ricompilare.
   ============================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/InterVariable.woff2") format("woff2-variations"),
       url("/static/fonts/InterVariable.woff2") format("woff2");
}

/* Tailwind fa il grosso, qui solo ritocchi. */
body, html {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Le Inter design tweaks (cv02 1 senza serifa, cv11 r migliorata, ecc) si attivano SOLO
   su elementi che usano davvero Inter. Se le mettessimo su body, i font-mono e altri
   fallback (SF Mono / JetBrains Mono / Menlo) le erediterebbero confondendo il rendering
   — i numeri uscivano in stile italico/strano. */
.font-sans, body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Override Tailwind .font-mono — JetBrains Mono non è caricato, e su Chrome Mac
   il fallback `ui-monospace` rendering serif-italic orribile per simboli € / − / +.
   Usiamo Inter (già caricato) con numeri tabulari: stesso effetto colonna
   allineata di un monospace, ma con la bellezza tipografica di Inter.
   !important per battere la specificità delle utility Tailwind. */
.font-mono,
[class*="font-mono"] {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif !important;
  font-feature-settings: "tnum" 1, "lnum" 1, "cv11" 1 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-style: normal !important;  /* difesa contro qualsiasi italic ereditato */
}

/* Niente 300ms delay sui tap mobile: il browser registra il click immediatamente */
button, a, [role="button"], input[type="submit"], input[type="button"] { touch-action: manipulation; }
/* Tap response visibile sui dispositivi touch */
button:active, a:active { opacity: 0.8; }

/* ======================================================================
   SIDEBAR MOBILE — CSS puro, niente Alpine reactive che si blocca su iOS
   ====================================================================== */
@media (max-width: 1023px) {
  aside.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 16rem;
    height: 100%;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    will-change: transform;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.sidebar-open aside.app-sidebar { transform: translateX(0); }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open::before {
    content: "";
    position: fixed; inset: 0; z-index: 49;
    background: rgba(17, 24, 39, 0.4);
  }
}

details summary::-webkit-details-marker { display: none; }

/* Scrollbar discreta */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Alpine.js: nasconde x-cloak finché il framework non è pronto (evita FOUC) */
[x-cloak] { display: none !important; }

/* Evita scroll laterale indesiderato globale */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ======================================================================
   FIX MOBILE — solo sotto 1024px
   ====================================================================== */
@media (max-width: 1023px) {
  /* 🚫 Niente auto-zoom su focus di input/textarea/select.
     iOS Safari zooma se il computed font-size è < 16px → forziamo 16px su tutti
     i campi editabili. La differenza visiva è impercettibile ma il layout
     resta intatto al focus (niente più "schermo che si butta dentro"). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* ⚡ Disattiva effetti GPU-pesanti che fanno scaldare iPhone */
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Niente animazioni infinite (animate-pulse, animate-spin, ecc) */
  .animate-pulse, .animate-spin, .animate-bounce, .animate-ping {
    animation: none !important;
  }
  /* Niente transition complesse sui posizionamenti fissi */
  .fixed { transition-property: transform !important; }

  /* Spazio in fondo a tutte le pagine per non far coprire l'ultimo contenuto
     dal FAB della chat (56px FAB + 20px margine sotto + safe area) */
  main { padding-bottom: 90px; }

  /* Le card che contengono tabelle larghe → scroll orizzontale fluido */
  .rounded-2xl, .rounded-xl {
    max-width: 100%;
  }
  .rounded-2xl > table,
  .rounded-xl > table,
  section > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Testo che eccede in flex-col senza min-w-0 → forza break-words */
  h1, h2, h3, h4 { word-wrap: break-word; overflow-wrap: anywhere; }

  /* Riduce dimensione font dei numeri grandi così non rompono il layout */
  .text-3xl { font-size: 1.5rem; }
  .text-2xl { font-size: 1.25rem; }
}

/* Safe area iOS (notch / home indicator).
   NB (Daniele 05.06): NIENTE padding-bottom sul body. La tab bar fissa e
   .content-tabbar-pad gestiscono già la safe-area inferiore; un padding qui
   aggiungeva ~34px di spazio bianco fantasma in fondo su mobile. */

/* Altezza viewport: su iOS Safari 100vh = viewport "grande" (esclude le toolbar),
   quindi con la tab bar fissa lo scroll andava OLTRE il contenuto lasciando un
   vuoto bianco in fondo. 100dvh = altezza realmente visibile → niente vuoto.
   app.css è caricato dopo il build Tailwind, quindi questo override vince. */
@supports (min-height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
}

/* ======================================================================
   TIPOGRAFIA — wrap intelligente per evitare "vedove" (ultima riga con 1-2 parole).
   `text-wrap: balance` distribuisce automaticamente le parole sulle righe in modo
   bilanciato — invece di "Buonasera. Ecco com'è la tua / giornata" otteniamo
   "Buonasera. Ecco / com'è la tua giornata" (righe lunghe simili). Chrome 114+ e
   Safari 17.4+. Su browser vecchi: graceful fallback al wrap normale.

   Applicato AUTOMATICAMENTE a tutti i titoli (h1-h4) e ai sottotitoli pagina —
   chi vuole il balance su un <p> qualsiasi aggiunge la classe .text-balance.
   ====================================================================== */
h1, h2, h3, h4,
.text-balance {
  text-wrap: balance;
}

/* Versione "pretty" per i paragrafi di copy lunga: evita vedove ma non spreca
   spazio nel modo aggressivo di balance. Opt-in via .text-pretty. */
.text-pretty {
  text-wrap: pretty;
}

/* ======================================================================
   DESIGN SYSTEM — Spacing & margini coerenti (8pt grid + ritmo verticale)
   Linee guida applicate: ogni card respira, mai testo attaccato ai bordi,
   gerarchia visiva pulita. Tutte le regole sono opt-in via classe.
   ====================================================================== */

/* Card "design-system" — padding interno responsivo + ombra discreta */
.ds-card {
  padding: 1.25rem;  /* 20px mobile */
  border-radius: 1rem;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}
@media (min-width: 640px) { .ds-card { padding: 1.5rem; /* 24px */ } }
@media (min-width: 1024px) { .ds-card { padding: 1.75rem; /* 28px */ } }

/* Sezione titolo: ritmo verticale standard sotto un h2/h3 */
.ds-card > h2:first-child, .ds-card > h3:first-child { margin-top: 0; }

/* Liste di item dentro le card: spacing-y consistente, mai 0 */
.ds-list > * + * { margin-top: 0.75rem; }

/* Testo body: line-height più aerato per leggibilità */
.ds-card p, main p { line-height: 1.5; }

/* Mai testo tagliato dai bordi del container scrollabile (chat, lista lunghe ecc) */
main, [data-scroll] { padding-right: max(0px, env(safe-area-inset-right));
                      padding-left: max(0px, env(safe-area-inset-left)); }

/* Garanzia touch target minimo: i bottoni espliciti con classe .btn arrivano
   ad almeno 36px su mobile. NIENTE regole universali su <button> per non rompere
   bottoni piccolissimi intenzionali (X close, dot di notifica, ecc). */
@media (max-width: 1023px) {
  .btn { min-height: 36px; }
}

/* ======================================================================
   SAFE FALLBACKS — classi Tailwind che potrebbero NON essere nel build
   precompilato. Mai più "il padding non c'è" perché il JIT non le ha viste.
   ====================================================================== */
.pl-16 { padding-left: 4rem !important; }   /* 64px */
.pr-5  { padding-right: 1.25rem !important; } /* 20px */

/* Sub-list tariffe per collaboratore: indentazione coerente con avatar */
.tariffa-sublist {
  padding-left: 4.25rem;   /* 68px = 20 padding card + 14 freccia + 12 gap + 40/2 avatar */
  padding-right: 1.25rem;  /* 20px = stesso del padding card */
}
@media (max-width: 640px) {
  .tariffa-sublist { padding-left: 3rem; padding-right: 1rem; }
}

/* ======================================================================
   UX UTILITIES — pattern riutilizzabili emersi dall'audit
   ====================================================================== */

/* Sticky bottom CTA per pagine lunghe (compose, clients/new, mansionario nuovo).
   Su mobile sticky inferiore con safe-area; su desktop torna inline (lg:relative). */
.cta-sticky-mobile {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--paper-100, #FAFAF9) 80%, transparent);
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  z-index: 10;
}
@media (min-width: 1024px) {
  .cta-sticky-mobile {
    position: static;
    background: transparent;
    padding: 0;
  }
}

/* Empty state visual standard — usata in tutta l'app per uniformità */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.5rem;
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #D1FAE5 0%, #EDE9FE 100%);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

/* Focus ring più visibile per accessibility — vince sui default Tailwind */
:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Su input/textarea/select il focus è già gestito da focus:ring-4 (Tailwind),
   quindi disattivo l'outline-visible che si sovrapporrebbe */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
}

/* Nav sidebar hover più riconoscibile (era troppo sottile) */
nav a:hover { transition: background-color 120ms ease, color 120ms ease; }

/* ======================================================================
   CHAT WIDGET — micro-tuning per leggibilità iOS + densità desktop
   ====================================================================== */
.chat-widget aside { contain: layout style; }
/* Le bolle di chat non devono mai uscire dal container, anche con URL lunghe */
.chat-widget [x-text] { overflow-wrap: anywhere; word-break: break-word; }

/* Textarea: 16px su mobile (no zoom iOS), 13.5px su desktop (consistente con bolle) */
.chat-textarea { min-height: 44px; font-size: 16px; }
@media (min-width: 1024px) {
  .chat-textarea { min-height: 36px; font-size: 13.5px !important; }
}

/* Evita che lo scroll della lista chat venga interrotto dal pull-to-refresh iOS */
.chat-widget [x-show="view === 'list'"] > .flex-1,
.chat-widget #chat-msgs-conv {
  overscroll-behavior: contain;
}

/* =============================================================
   Modal backdrop forte — indipendente dal Tailwind precompilato.
   Usato in base.html per il popup riunione + onboarding wizard,
   visto che bg-ink-900/60 e backdrop-blur-md non sono nel build.
   Applica via class "modal-backdrop-strong" sul div backdrop fixed.
   ============================================================= */
.modal-backdrop-strong {
  background: rgba(17, 24, 39, 0.65) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Modal container padding — p-7 (28px) non c'è in Tailwind compilato,
   uso classe custom per i wizard step. */
.modal-step-padding { padding: 1.75rem; }
@media (max-width: 480px) {
  .modal-step-padding { padding: 1.25rem; }
}

/* =============================================================
   Disclosure (<details>) — chevron ruota di 90° quando aperto.
   Tailwind precompilato non ha group-open: o w-3.5 nel build,
   quindi usiamo CSS standard + dimensioni SVG inline.
   ============================================================= */
.disclosure-chevron { transition: transform 200ms ease; }
details[open] > .disclosure-summary .disclosure-chevron { transform: rotate(90deg); }

/* Rimuovi marker default del <summary> (la freccia "▼" del browser) */
.disclosure-summary::-webkit-details-marker { display: none; }
.disclosure-summary::marker { content: ""; }

/* =============================================================
   Workflow list — responsive table/cards switch (31.05).
   Le classi md:block / md:hidden di Tailwind NON sono nel build
   precompilato → su desktop le card restavano visibili e la tabella
   nascosta. Uso media query custom: desktop=tabella, mobile=card.
   ============================================================= */
.wf-table { display: none; }
.wf-cards { display: block; }
@media (min-width: 768px) {
  .wf-table { display: block; }
  .wf-cards { display: none; }
}

/* =============================================================
   Tab bar mobile (Daniele 05.06) — stile app native (Instagram).
   TUTTO il layout in CSS custom: fixed/bottom-0/grid-cols-5 NON
   sono nel Tailwind precompilato, quindi la nav cadeva nel flusso
   (a sinistra) e le icone restavano minuscole. Qui niente Tailwind.
   ============================================================= */
.mobile-tabbar { display: none; }

@media (max-width: 1023px) {
  /* La barra: fissa in basso, a tutta larghezza, 5 colonne uguali */
  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid #E5E7EB;
    box-shadow: 0 -1px 12px rgba(17, 24, 39, 0.05);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-tabbar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 58px;
    padding: 7px 0 7px;
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    color: #9CA3AF;                 /* ink-400 — inattivo */
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }
  .mobile-tabbar-item:active .mobile-tabbar-iconwrap { transform: scale(0.9); }

  /* Tile dell'icona: trasparente da inattivo, "app-icon" col gradient brand da attivo */
  .mobile-tabbar-iconwrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: 12px;
    background: transparent;
    transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
  }
  .mobile-tabbar-item.is-active .mobile-tabbar-iconwrap {
    background: linear-gradient(135deg, #34D399 0%, #10B981 45%, #8B5CF6 130%);
    box-shadow: 0 6px 14px -3px rgba(124, 58, 237, 0.45), 0 2px 6px -2px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
  }

  .mobile-tabbar-icon {
    width: 23px;
    height: 23px;
    flex: none;
    display: block;
  }
  /* line (grigio) da inattivo → solid (bianco) dentro il tile da attivo */
  .ti-solid { display: none; }
  .mobile-tabbar-item.is-active .ti-line { display: none; }
  .mobile-tabbar-item.is-active .ti-solid { display: block; color: #FFFFFF; }

  .mobile-tabbar-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    transition: color .15s ease;
  }
  .mobile-tabbar-item.is-active .mobile-tabbar-label { color: #6D28D9; font-weight: 700; }  /* iris-700 */

  /* Pallino rosso "manca conferma" sull'icona Riunione */
  .mobile-tabbar-dot {
    position: absolute;
    top: 5px;
    left: calc(50% + 8px);
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: #EF4444;
    box-shadow: 0 0 0 2px #FFFFFF;
  }

  /* Spazio sotto il contenuto per non finire dietro la tab bar */
  .content-tabbar-pad { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }
  /* Alza il FAB chat sopra la tab bar */
  .chat-fab-mobile { bottom: calc(56px + env(safe-area-inset-bottom) + 14px); }
}

/* =============================================================
   Calendario mensile (Daniele 05.06) — min-h-20/28 non sono nel
   Tailwind precompilato, le celle collasserebbero. + tabular-nums.
   ============================================================= */
.cal-cell { min-height: 5rem; }                 /* 80px (era min-h-20) */
@media (min-width: 640px) { .cal-cell { min-height: 7rem; } }  /* 112px (sm:min-h-28) */

/* Cifre a larghezza fissa (orari allineati): tabular-nums non è nel build */
.tabular-nums { font-variant-numeric: tabular-nums lining-nums; }

/* Banner "Nuova versione disponibile" — ancorato in basso, sopra la tab bar
   su mobile, così non copre l'header sticky. */
.update-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 40px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  background: linear-gradient(90deg, #10B981, #059669);
  color: #fff; font: 600 13px/1.25 -apple-system, system-ui, sans-serif;
  box-shadow: 0 -2px 16px rgba(17, 24, 39, 0.18);
}
@media (max-width: 1023px) {
  .update-banner { bottom: calc(56px + env(safe-area-inset-bottom)); padding-bottom: 11px; }
}

/* =============================================================
   Utility standard MANCANTI dal Tailwind precompilato, usate dai
   componenti nuovi (quick-add menu, calendario, modale eventi).
   Daniele 05.06. Sono utility standard: aggiungerle corregge solo
   spazi mancanti, non può rompere nulla di esistente.
   (Fix definitivo = build Tailwind completo, task a parte.)
   ============================================================= */
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 0.75rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: 0.25rem; }
.mt-2\.5 { margin-top: 0.625rem; }
.align-top { vertical-align: top; }

/* Modale evento calendario: bottom-sheet su mobile, card centrata-larga su desktop.
   (rounded-t-2xl / sm:max-w-md / max-h-[88vh] non sono nel build precompilato.) */
.cal-modal-box {
  width: 100%;
  max-height: 88vh;
  border-radius: 1rem 1rem 0 0;
}
@media (min-width: 640px) {
  .cal-modal-box { max-width: 28rem; border-radius: 1rem; }
}

/* Menu quick-add: larghezza FISSA. Senza questo, la regola mobile
   ".rounded-xl { max-width:100% }" lo schiacciava alla larghezza del bottone "+"
   (il suo contenitore relativo) → testo a capo e fuori schermo. */
.qa-menu {
  width: 14rem;
  max-width: 14rem !important;   /* batte .rounded-xl{max-width:100%} su mobile */
  border-radius: 0.75rem;
}
.qa-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; }

/* Hover/cosmetiche mancanti dal build (degradano bene, ma le ripristiniamo). */
.tracking-wide { letter-spacing: 0.025em; }
.hover\:bg-mint-50:hover { background-color: #ECFDF5; }
.hover\:bg-ink-50:hover { background-color: #F9FAFB; }
.hover\:bg-ink-800:hover { background-color: #1F2937; }
.hover\:brightness-95:hover { filter: brightness(0.95); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* =============================================================
   VELOCITÀ PERCEPITA (Daniele 05.06) — niente più "lampo bianco".
   ============================================================= */

/* 1) Transizioni di pagina morbide (View Transitions API).
   Cross-fade rapido fra una pagina e l'altra sui browser che lo supportano
   (Safari 18+, Chrome/Edge). Sugli altri: navigazione normale, nessun danno. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.18s; }
/* Evita flash bianco di base: lo sfondo è sempre color carta */
html { background: #FAFAF9; }

/* 2) Barra di caricamento in cima (feedback navigazione/azione) */
.np-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, #34D399, #10B981 40%, #8B5CF6);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 0.2s ease, opacity 0.35s ease; opacity: 0; pointer-events: none;
}
.np-bar.active { opacity: 1; }

/* 3) Feedback istantaneo sul bottone che invia un'azione */
.is-submitting { opacity: 0.55; filter: saturate(0.7); transition: opacity .1s; }

/* =============================================================
   FEEL DA APP NATIVA (Daniele 05.06)
   ============================================================= */

/* Pull-to-refresh: indicatore che scende dall'alto (solo PWA installata) */
.ptr-indicator {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%) translateY(-44px);
  z-index: 9998; width: 36px; height: 36px; border-radius: 9999px;
  background: #FFFFFF; box-shadow: 0 3px 12px rgba(17,24,39,.18);
  display: flex; align-items: center; justify-content: center;
  color: #10B981; opacity: 0; pointer-events: none;
}
.ptr-indicator svg { width: 20px; height: 20px; }
.ptr-indicator.spinning svg { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Micro-feedback tattile: il bottone "affonda" un attimo al tocco (solo touch,
   escluse le voci della tab bar che hanno già il loro effetto). */
@media (hover: none) and (pointer: coarse) {
  button:active:not(.mobile-tabbar-item),
  .press:active { transform: scale(0.97); transition: transform .06s ease; }
}