/**
 * area-clienti/assets/css/app.css
 * Stile "app" per l'Area Clienti: riusa le variabili colore/tipografia di assets/css/style.css
 * (caricato prima di questo file) e aggiunge un app-shell mobile-first con top bar fissa,
 * tab bar inferiore e componenti pensati per il tocco (target grandi, niente hover-only).
 * Su schermi larghi il contenuto resta centrato in una colonna in stile "telefono", perché
 * questa è un'area pensata prima di tutto per l'uso da smartphone.
 */

body.area-clienti{
  /* Verde lime scattante: tema dell'Area Clienti, volutamente diverso dal petrolio del gestionale
     staff — sovrascrive qui le sole variabili CSS condivise, senza toccare style.css, così il
     resto dell'app (staff) resta invariato. */
  --accent:#7CB518;
  --accent-dim:#EFF6DD;
  background:var(--surface-2);
  min-height:100vh;
  min-height:100dvh;
  /* Evita che un tocco prolungato per errore selezioni del testo e faccia comparire il menu
     "cerca sul web"/copia del browser: un'app installata non deve comportarsi come una pagina
     web qualunque. I campi di input restano normalmente selezionabili, vedi sotto. */
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
body.area-clienti input, body.area-clienti textarea{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:0 0 0 1px var(--border);
}

/* ---------- TOP APP BAR ---------- */
.app-bar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.app-bar-title{font-size:17px; font-weight:700; margin:0; flex:1; text-align:center;}
.app-bar-back{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  text-decoration:none; font-size:16px;
}
.app-bar-brand{display:flex; align-items:center; flex-shrink:0; width:34px; text-decoration:none;}
.app-bar-spacer{width:34px; flex-shrink:0;}

/* ---------- CONTENT ---------- */
.app-content{
  flex:1;
  padding:18px 16px calc(96px + env(safe-area-inset-bottom));
}
.app-content.no-tabs{padding-bottom:32px;}

.section-label{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin:22px 0 10px;}
.section-label:first-child{margin-top:0;}

/* ---------- BOTTOM TAB BAR ---------- */
.tab-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-width:480px; margin:0 auto;
  display:flex;
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 2px;
  text-decoration:none; color:var(--muted);
  font-size:10.5px; font-weight:600;
  border-radius:10px;
}
.tab-item .tab-icon{font-size:19px; line-height:1;}
.tab-item.active{color:var(--accent);}

/* ---------- APP CARDS ---------- */
.app-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin-bottom:12px;
}
.app-card-link{display:block; text-decoration:none; color:inherit;}
.app-card-link:active{background:var(--surface-2);}

.welcome-card{
  background:linear-gradient(135deg, var(--accent) 0%, #47690E 100%);
  color:#fff; border:none; border-radius:16px; padding:20px;
}
.welcome-card h2{margin:0 0 4px; font-size:19px;}
.welcome-card p{margin:0; font-size:13px; opacity:.85;}

.home-hero{
  border-radius:16px; overflow:hidden; min-height:190px;
  background-size:cover; background-position:center; position:relative;
}
.home-hero-scrim{
  background:linear-gradient(180deg, rgba(10,12,10,.05) 0%, rgba(10,12,10,.82) 100%);
  min-height:190px; padding:18px 20px 20px; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
}
.home-hero-scrim h2{margin:0 0 4px; font-size:19px;}
.home-hero-scrim p{margin:0 0 14px; font-size:13px; opacity:.9;}

.cta-row{display:flex; gap:10px; margin-top:16px;}
.btn-app{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 14px; border-radius:11px; font-size:13.5px; font-weight:700;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  text-decoration:none; cursor:pointer;
}
.btn-app.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-app.block{width:100%;}
.btn-app.ghost{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff;}
.btn-app.danger{background:var(--warn-dim); border-color:#EEC2AC; color:var(--warn);}

/* ---------- SERVICE LIST (step 1 prenotazione) ---------- */
.service-card{
  display:flex; align-items:center; gap:12px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px; margin-bottom:10px; text-decoration:none; color:inherit;
}
.service-card:active{background:var(--surface-2);}
.service-icon{
  width:44px; height:44px; border-radius:11px; flex-shrink:0;
  background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700;
  overflow:hidden;
}
.service-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.service-icon.large{width:64px; height:64px; border-radius:14px; font-size:26px;}
.service-info{flex:1; min-width:0;}
.service-name{font-size:14.5px; font-weight:600; margin-bottom:2px;}
.service-meta{font-size:12px; color:var(--muted);}
.service-price{font-size:13px; font-weight:700; color:var(--accent); font-family:'IBM Plex Mono',monospace; flex-shrink:0;}
.service-chevron{color:var(--muted-2); font-size:16px; flex-shrink:0;}

/* ---------- DATE CHIPS (step 2 prenotazione) ---------- */
.date-scroll{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.date-chip{
  flex-shrink:0; width:56px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 4px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  text-decoration:none;
}
.date-chip .dow{font-size:10px; text-transform:uppercase; color:var(--muted); letter-spacing:.4px;}
.date-chip .num{font-size:16px; font-weight:700; font-family:'IBM Plex Mono',monospace;}
.date-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
.date-chip.active .dow{color:rgba(255,255,255,.8);}

.date-custom{margin-top:14px;}
.date-custom form{display:flex; gap:8px; align-items:flex-end;}
.date-custom label{margin:0 0 5px;}
.date-custom input{margin:0;}

/* ---------- TIME SLOT GRID (step 3 prenotazione) ---------- */
.slot-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:9px;}
.slot-btn{
  padding:11px 4px; border-radius:10px; text-align:center;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  font-size:13px; font-weight:600; font-family:'IBM Plex Mono',monospace; cursor:pointer;
}
.slot-btn:active{background:var(--accent); color:#fff; border-color:var(--accent);}
.slot-btn .pt-tag{display:block; font-family:'Inter',sans-serif; font-size:9px; font-weight:600; color:var(--warn); margin-top:2px;}
.slot-empty{grid-column:1/-1; text-align:center; color:var(--muted); font-size:13px; padding:28px 10px;}

/* ---------- BOOKING LIST ---------- */
.booking-item{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px; margin-bottom:10px;
  box-shadow:0 2px 6px rgba(20,24,28,.07), 0 10px 22px rgba(20,24,28,.06);
}
/* Storico (già passate, o disdette): un tocco più spento rispetto alle prossime, così a colpo
   d'occhio si distingue subito cosa è ancora da vivere da cosa è già acqua passata. Anche
   l'ombra si appiattisce, per rinforzare la stessa differenza in profondità oltre che in colore. */
.booking-item.passata{background:#EFEAD8; border-color:#E0D9C2; box-shadow:none;}
.booking-item.passata .booking-item-time-big{color:#8A8370;}
.booking-item.passata .booking-item-service{color:#8A8370;}
.booking-item-time-big{font-size:32px; font-weight:800; font-family:'IBM Plex Mono',monospace; line-height:1; margin-bottom:6px;}
.booking-item-top-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.booking-item-topright{display:flex; flex-direction:column; align-items:flex-end; gap:12px; flex-shrink:0;}
.booking-item-service{font-size:15.5px; font-weight:700; margin-bottom:5px; line-height:1.25;}
.booking-item-date{font-size:12.5px; font-weight:600; color:var(--text); text-align:right;}
.booking-item-time{font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace;}
.booking-item-status{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}
.booking-item-place{font-size:12px; color:var(--muted); margin-top:6px;}
.booking-item-actions{margin-top:12px; display:flex; justify-content:flex-end; gap:10px;}
.btn-app.small{padding:6px 12px; font-size:12px;}
/* ---------- Banner "Installa l'app" ---------- */
.install-banner{
  position:fixed; left:12px; right:12px; bottom:-120px; z-index:29;
  max-width:456px; margin:0 auto;
  display:flex; align-items:center; gap:12px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:14px 12px 14px 14px;
  box-shadow:0 8px 24px rgba(20,24,28,.14);
  transition:bottom .25s ease;
}
.install-banner.open{bottom:calc(72px + env(safe-area-inset-bottom));}
.install-banner-icon{width:42px; height:42px; border-radius:11px; overflow:hidden; flex-shrink:0; background:var(--accent-dim);}
.install-banner-icon img{width:100%; height:100%; object-fit:cover; display:block;}
.install-banner-text{flex:1; display:flex; flex-direction:column; gap:1px; min-width:0;}
.install-banner-text b{font-size:13.5px;}
.install-banner-text span{font-size:11.5px; color:var(--muted);}
.install-banner .btn-app.small{width:auto; padding:9px 14px; font-size:12.5px; flex-shrink:0;}
.install-banner-close{
  background:none; border:none; color:var(--muted); font-size:20px; line-height:1;
  padding:4px; cursor:pointer; flex-shrink:0;
}
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #EEC2AC; background:var(--warn-dim); color:var(--warn);
  font-size:15px; cursor:pointer; line-height:1;
}
.btn-app-icon:active{background:#F6C9B3;}

/* ---------- SCELTA PIANO/PAGAMENTO (foglio di conferma prenotazione) ---------- */
.plan-choice{margin-bottom:14px;text-align:left;}
.plan-choice-label{font-size:11.5px;color:var(--muted);margin:2px 0 8px;font-weight:600;}
.plan-choice-option{display:block;margin-bottom:8px;cursor:pointer;position:relative;}
.plan-choice-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.plan-choice-card{display:flex;flex-direction:column;gap:1px;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;transition:border-color .15s, background .15s;}
.plan-choice-title{font-size:13px;font-weight:700;color:var(--text);}
.plan-choice-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--accent);}
.plan-choice-sub{font-size:11.5px;color:var(--muted);}
.plan-choice-option input:checked + .plan-choice-card{border-color:var(--accent);background:var(--accent-dim);}
.plan-choice-option input:checked + .plan-choice-card .plan-choice-title{color:var(--accent);}

.empty-state{text-align:center; padding:44px 16px; color:var(--muted);}
.empty-state .emoji{font-size:32px; margin-bottom:10px; display:block;}

/* ---------- FORM (registrazione / login / profilo) ---------- */
.form-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px;}
.form-card h2{margin:0 0 4px; font-size:18px;}
.form-card .subtitle{color:var(--muted); font-size:13px; margin:0 0 18px;}
.form-footer-link{text-align:center; margin-top:18px; font-size:13px; color:var(--muted);}
.form-footer-link a{color:var(--accent); font-weight:600; text-decoration:none;}

.auth-wrap{padding-top:5vh;}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px;}
.auth-brand .brand-mark{width:52px; height:52px; border-radius:14px;}
.auth-brand span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px;}

@media (min-width:481px){
  body.area-clienti{padding:24px 0;}
  .app-shell{border-radius:20px; box-shadow:0 12px 40px rgba(20,24,28,.14), 0 0 0 1px var(--border); min-height:auto;}
  .tab-bar{position:sticky; border-radius:0 0 20px 20px;}
}

/* ---------- MODALE DI CONFERMA (bottom-sheet) ---------- */
/* Usata per confermare prenotazioni e annullamenti: coerente con lo stile "app" (si apre dal
   basso, come i fogli di conferma nativi di iOS/Android) invece del modale centrato del
   gestionale staff, pensato per schermi desktop. */
.sheet-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(17,20,24,.45);
  display:none; align-items:flex-end; justify-content:center;
}
.sheet-overlay.open{display:flex;}
.sheet-box{
  background:#fff; width:100%; max-width:480px;
  border-radius:20px 20px 0 0;
  padding:14px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 34px rgba(20,24,28,.2);
  animation:sheet-in .22s ease;
}
@keyframes sheet-in{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.sheet-handle{width:36px; height:4px; border-radius:2px; background:var(--border); margin:0 auto 18px;}
.sheet-title{font-size:16px; font-weight:700; margin:0 0 6px;}
.sheet-text{font-size:13.5px; color:var(--muted); margin:0 0 20px; line-height:1.55;}
.sheet-text b{color:var(--text);}
.sheet-actions{display:flex; gap:10px;}
.sheet-actions form{flex:1; display:flex;}
.sheet-actions .btn-app{flex:1;}

/* Pila verticale usata quando c'è una scelta sopra (es. il metodo di pagamento): il pulsante
   principale spicca a piena larghezza, Annulla resta sotto come azione secondaria — invece di
   stringere tutto in un'unica riga stretta insieme alla scelta. */
.sheet-actions-stack{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.sheet-actions-stack form{display:flex;}
.sheet-actions-stack .btn-app{width:100%;}
body.sheet-aperto{overflow:hidden;}

/* ---------- Bordi di pill/flash/badge legati all'accent, ricalcolati per il verde lime ---------- */
body.area-clienti .pill.attivo, body.area-clienti .pill.confermata,
body.area-clienti .pill.pagato, body.area-clienti .pill.disponibilita{border-color:#C3D89A;}
body.area-clienti .flash.success{border-color:#C3D89A;}
body.area-clienti .badge.ok{border-color:#C3D89A;}