/* ============================================================
   BASE E MAIN LAYOUT
============================================================ */

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: #f8fafc; 
}

/* ✅ Fix “salti” su smartphone (100vh iOS/Android address bar) */
body.h-screen{
  height: 100vh;   /* fallback */
  height: 100dvh;  /* viewport dinamico moderno */
  min-height: 100dvh;
}


#map { 
    width: 100%; 
    z-index: 1; 
    border-bottom: 4px solid #0ea5e9; 
    transition: height 0.3s ease-in-out; 
}

/* ============================================================
   MARKER E ICONE MAPPA
============================================================ */

.number-icon {
    background-color: #0ea5e9;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    width: 30px; 
    height: 30px;
}

/* Marker Cliente (viola) */
.custom-customer-icon .pool-name-tag { background-color: #4f46e5; }
.custom-customer-icon .number-icon { 
    background-color: #818cf8; 
    border-color: #4f46e5; 
    color: white;
}

/* Marker con nome */
.pool-marker-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(18px);
}

.pool-name-tag {
    background-color: #1e293b;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    margin-bottom: -2px;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================================
   TAB GIORNI / NAVIGAZIONE
============================================================ */

.day-tab {
    transition: all 0.2s;
    white-space: nowrap;
}

.day-tab.active {
    background-color: #0ea5e9;
    color: white;
    border-color: #0284c7;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }

/* ============================================================
   LOADER
============================================================ */

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0ea5e9;
    border-radius: 50%;
    width: 16px; 
    height: 16px;
    animation: spin 1s linear infinite;
}

.main-loader {
    border: 6px solid #e5e7eb;
    border-top: 6px solid #0ea5e9;
    border-radius: 50%;
    width: 50px; 
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Loader Full Screen */
#fullScreenLoader {
    position: fixed;
    inset: 0;
    background-color: #f8fafce0;
    backdrop-filter: blur(4px);
    z-index: 90000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    transition: opacity 0.3s ease;
}

/* Overlay blocco UI */
#blockerOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: all;
}

/* ============================================================
   DETTAGLI ESPANDIBILI
============================================================ */

.details-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.details-content.expanded{
  max-height: min(78dvh, 1100px);
  padding-top: 8px;
  padding-bottom: 12px;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ✅ permette che, finito lo scroll interno, continui sulla pagina */
  overscroll-behavior-y: auto;

  /* opzionale: evita stranezze orizzontali */
  overscroll-behavior-x: none;

  /* opzionale (utile su Chrome/Android) */
  touch-action: pan-y;
}



.rotate-90 { transform: rotate(90deg); }
.rotate-0  { transform: rotate(0deg); }
.details-toggle { transition: transform 0.3s ease; }

/* ============================================================
   STATI DELLA TAPPA
============================================================ */

.memo-completed {
    text-decoration: line-through;
    color: #64748b;
}

.pool-completed {
    opacity: 0.8;
    background-color: #f0fdf4 !important;
}

.pool-completed .completion-icon { color: #10b981; }
.pool-completed h4 { text-decoration: line-through; }

.pool-paused {
    background-color: #fefce8 !important;
    border-left: 4px solid #f59e0b;
    opacity: 0.9;
}

.pool-paused h4, 
.pool-paused p { color: #d97706; }

.pool-paused .completion-icon { color: #f59e0b; }

.chemical-row { background-color: #f0f9ff; }

.start-point-icon { color: #f59e0b; }

/* ============================================================
   DRAG & DROP
============================================================ */

.list-item:hover { cursor: grab; }
.list-item.dragging { opacity: 0.5; }
.list-item.drag-over { border-top: 2px solid #0ea5e9; }

/* ============================================================
   SELEZIONE GIORNI RICORRENZA
============================================================ */

.day-select-btn {
    background-color: #e5e7eb;
    color: #4b5563;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.day-select-btn.selected {
    background-color: #4f46e5;
    color: white;
    border-color: #3730a3;
}

.recurrence-day-group {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 8px;
    border-radius: 6px;
}

/* ============================================================
   BOTTONI / HEADER / LOGIN
============================================================ */
:root{
  --headerBtnH: 40px;
}

/* bottoni header */
.header-btn{
  height: var(--headerBtnH);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
  box-sizing: border-box;
}

/* schedule: mobile fisso, desktop “riempie” lo spazio a sinistra */
.header-btn--schedule{
  flex: 0 0 auto;
}

/* barra scrollabile (mobile) */
.header-scroll{
  display: flex;
  align-items: center;
  gap: 8px;

  flex: 1 1 auto;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */

  padding: 4px 4px;   /* ✅ spazio per glow */
  margin: -4px 0;     /* ✅ non aumenta l’altezza visiva header */
}

.header-scroll::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
.header-scroll > *{ flex: 0 0 auto; }

/* desktop: schedule prende tutto lo spazio libero */
@media (min-width: 768px){
  .header-btn--schedule{
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .header-scroll{
    flex: 0 0 auto;
  }
}

/* user button header */
#userAuthBtn{
  width: var(--headerBtnH);
  height: var(--headerBtnH);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all 0.2s;
  border: 2px solid white;
  box-sizing: border-box;
}
#userAuthBtn i { pointer-events: none; }

#manualSyncBtn:disabled {
  background-color: #38bdf8;
  cursor: wait;
}

#userAuthBtn.logged-in {
  background-color: #10b981;
  border-color: #059669;
}
#userAuthBtn.logged-out {
  background-color: #94a3b8;
  border-color: #64748b;
}

.header-glow{
  position: relative;
  z-index: 2;
  box-shadow:
    0 0 0 2px rgba(56, 189, 248, 0.95),
    0 0 22px rgba(186, 230, 253, 0.55);
}



/* ============================================================
   MENU A TRE PUNTINI
============================================================ */

.list-item {
    position: relative;
    overflow: visible !important;
}

.context-menu {
    position: absolute !important;
    z-index: 9999 !important;
}

/* ============================================================
   POPUP / MODALI SEMPRE DAVANTI (FIX CORRETTO)
============================================================ */

/* Overlay popup */
.custom-confirmation-overlay,
.custom-prompt-overlay,
.popup-overlay {
    position: fixed !important;
    inset: 0;
    background-color: rgba(0,0,0,0.45);
    z-index: 99999 !important;
}

/* Contenuto popup */
.custom-confirmation,
.custom-prompt,
.popup-content {
    position: relative;
    z-index: 100000 !important;
}

/* Modale Login / Modale Generale */
#customModal {
    position: fixed !important;
    inset: 0;
    z-index: 95000 !important;
}



.mini-loader {
  border: 3px solid #e5e7eb;
  border-top: 3px solid #0ea5e9;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* MENU CONTESTUALE GLOBALE */
#globalContextMenu {
    position: fixed;
    z-index: 999999 !important;
}

.context-menu button {
    text-align: left;
    width: 100%;
}


.report-row-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report-row-expanded .report-row-text {
    white-space: normal;
}



@media (max-width: 640px) {

  :root{
    --mapHeight: 35vh;   /* verrà aggiornata da JS */
    --sheetTop: 18vh;    /* quanto peek di mappa vuoi vedere */
  }

  /* ✅ niente scroll interno: deve scrollare la view */
  #scheduleListArea,
  #customersListArea{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ✅ lista che può sovrapporsi alla mappa */
  #scheduleListArea,
  #customersListArea{
    position: relative;
    z-index: 30;

    margin-top: min(0vh, calc(var(--sheetTop) - var(--mapHeight)));

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.08);
    background: #f8fafc;
  }

  /* mappa sotto */
  #sharedMapArea,
  #map{
    position: relative;
    z-index: 10;
  }

  /* scroll iOS */
  #scheduleView,
  #customersView{
    -webkit-overflow-scrolling: touch;
  }
}


/* Toggle MAPPA centrale (Schedule + Customers) */
/* Riga che centra SEMPRE il toggle */
.map-toggle-row{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 4px 0 8px;
}

/* Toggle MAPPA centrale (Schedule + Customers) */
/* Riga che centra SEMPRE il toggle */
.map-toggle-row{
    display:flex;
    justify-content:center;
    align-items:center;
    padding: 3px 0 7px;        /* leggermente più compatto */
}

/* Toggle MAPPA centrale (Schedule + Customers) */
.map-toggle-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 24px;              /* ✅ più piccolo */
    padding: 0 14px;           /* ✅ più stretto */
    width: fit-content;

    font-size: 11px;           /* ✅ leggermente più piccolo */
    font-weight: 700;

    color: #64748b;            /* slate-500 */
    background: #f1f5f9;       /* slate-100 */
    border: 1px solid #e2e8f0; /* slate-200 */

    border-radius: 999px;
    cursor: pointer;
    user-select: none;

    transition: all 0.18s ease;
}

.map-toggle-handle:hover {
    background: #e2e8f0;
}

/* Icona mappa sempre azzurra (pulita e poco invasiva) */
.map-toggle-mapicon {
    color: #0ea5e9;            /* sky-500 */
    font-size: 12px;
    line-height: 1;
}

.map-toggle-arrow {
    font-size: 12px;
    line-height: 1;
}

/* ✅ Stato "Mappa aperta": niente pill blu, solo testo "Mappa" azzurro */
.map-toggle-handle.is-open .map-toggle-text {
    color: #0ea5e9;            /* sky-500 */
}

/* =========================
   ORA DI INIZIO - ultra compatta (HH:MM)
========================= */
/*#startTimeInput{
/*  flex: 0 0 auto;          /* non si allunga nel flex */
/*  width: 5.4ch;            /* circa "09:00" */
/*  min-width: 5.4ch;
/*  max-width: 6.2ch;
/*  padding-left: 8px;       /* riduco padding per stringere */
/*  padding-right: 6px;
/*  box-sizing: border-box;
/*}

/* =========================
   ORA DI INIZIO - ultra compatta (HH:MM)
========================= */
#startTimeInput{
  width: 7.8ch;        /* abbastanza per vedere sempre HH:MM completo */
  min-width: 7.8ch;
  flex: 0 0 auto;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =========================
   DETTAGLI TAPPA - layout mobile proporzionato
========================= */
/* =========================
   DETTAGLI TAPPA - layout mobile proporzionato
========================= */
@media (max-width: 640px) {

  :root{
    --mapHeight: 35vh;   /* resta per compatibilità con JS */
  }

  /* ✅ la lista NON deve più sovrapporsi sempre alla mappa:
        così lo slider funziona davvero e la mappa è usabile */
  #scheduleListArea,
  #customersListArea{
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    margin-top: 0 !important;  /* ✅ stop overlay che “blocca” la mappa */

    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.08);
    background: #f8fafc;
  }

  /* ✅ evita stacking context che impediva ai controlli di stare “sopra” */
  #sharedMapArea{ position: relative; }   /* niente z-index qui */
  #map{ position: relative; z-index: 10; }

  /* ✅ controlli sempre cliccabili */
  #mapControlsArea,
  #searchBarContainer{
    position: relative;
    z-index: 60;
  }

  /* ✅ slider più “presa” su touch */
  #mapHeightSlider{
    touch-action: pan-x;
  }

  /* scroll iOS */
  #scheduleView,
  #customersView{
    -webkit-overflow-scrolling: touch;
  }


  /* =========================================================
     ✅ PROPORZIONI MOBILE DETTAGLI TAPPA (come nei file allegati)
     ========================================================= */

  /* --- riga: Tipo Intervento / Minuti / Guadagno --- */
  .details-content .bg-slate-50 > div.flex.space-x-3{
    display: grid !important;
    grid-template-columns: 1fr 86px 86px;  /* select largo + numeri corti */
    gap: 10px;
    align-items: end;
  }

  .details-content .bg-slate-50 > div.flex.space-x-3 > div{
    width: auto !important;     /* override w-1/3 e simili */
    min-width: 0;               /* evita overflow */
  }

  /* label su UNA riga (niente spezzature) */
  .details-content .bg-slate-50 > div.flex.space-x-3 label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  /* stessa altezza per select e input */
  .details-content .bg-slate-50 > div.flex.space-x-3 select,
  .details-content .bg-slate-50 > div.flex.space-x-3 input{
    height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* --- riga prodotti: Prodotto (largo) / Q.tà (stretto) / Costo (stretto) / Bottone --- */
  .details-content .bg-slate-50 .border-t.border-dashed > div.flex.items-end.space-x-3{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px 52px auto;
    gap: 4px;
    align-items: end;
  }

  /* annulla space-x-3 su mobile */
  .details-content .bg-slate-50 .border-t.border-dashed > div.flex.items-end.space-x-3 > :not([hidden]) ~ :not([hidden]){
    margin-left: 0 !important;
  }

  .details-content .bg-slate-50 .border-t.border-dashed > div.flex.items-end.space-x-3 > div{
    width: auto !important;
    min-width: 0;
  }

  .details-content .bg-slate-50 .border-t.border-dashed label{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .details-content .bg-slate-50 .border-t.border-dashed input{
    height: 32px;
    padding: 6px 8px;
    font-size: 12px;
  }

  /* bottone compatto (toglie mt-5 su mobile se presente) */
  .details-content .bg-slate-50 .border-t.border-dashed button{
    margin-top: 0 !important;
    height: 32px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    align-self: end;
  }

  /* --- NOTE più compatte (lato CSS) --- */
  .details-content textarea{
    font-size: 12px;
    line-height: 1.2;
  }
}


/* ✅ tap mobile più stabile sul toggle */
.map-toggle-handle{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}



/* Durante i rerender "smooth" disabilita transizioni per evitare flicker */
.ui-restoring .details-content,
.ui-restoring .details-toggle {
    transition: none !important;
}




/* ============================================================
   STOP HEADER: quando details è aperto
   - titolo non troncato
   - meta sotto al titolo
============================================================ */

.stop-meta-below { display: none; }

.stop-open .stop-meta-inline { display: none; }
.stop-open .stop-meta-below  { display: block; }

/* forza il titolo a “wrap” quando è aperto (override di .truncate) */
.stop-open .stop-title{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}






/* ============================================================
   GLOBAL FONT SCALE (APP-WIDE)
   - Scala TUTTI i font (Tailwind + text-[..px] + CSS custom)
   - Mobile più grande, Desktop leggermente più grande
============================================================ */

:root{
  --fontScale: 1;
  --fontScaleMobile: 1.18;   /* +18% su smartphone */
  --fontScaleDesktop: 1.06;  /* +6% su PC */
}

@media (max-width: 640px){
  :root{ --fontScale: var(--fontScaleMobile); }
}

@media (min-width: 1024px){
  :root{ --fontScale: var(--fontScaleDesktop); }
}

/* ---- Tailwind text-* (override font-size + line-height) ---- */
.text-xs{
  font-size: calc(0.75rem * var(--fontScale)) !important;
  line-height: calc(1rem * var(--fontScale)) !important;
}
.text-sm{
  font-size: calc(0.875rem * var(--fontScale)) !important;
  line-height: calc(1.25rem * var(--fontScale)) !important;
}
.text-base{
  font-size: calc(1rem * var(--fontScale)) !important;
  line-height: calc(1.5rem * var(--fontScale)) !important;
}
.text-lg{
  font-size: calc(1.125rem * var(--fontScale)) !important;
  line-height: calc(1.75rem * var(--fontScale)) !important;
}
.text-xl{
  font-size: calc(1.25rem * var(--fontScale)) !important;
  line-height: calc(1.75rem * var(--fontScale)) !important;
}
.text-2xl{
  font-size: calc(1.5rem * var(--fontScale)) !important;
  line-height: calc(2rem * var(--fontScale)) !important;
}
.text-3xl{
  font-size: calc(1.875rem * var(--fontScale)) !important;
  line-height: calc(2.25rem * var(--fontScale)) !important;
}

/* ---- Tailwind arbitrary text-[..px] (override) ---- */
.text-\[9px\]  { font-size: calc( 9px * var(--fontScale)) !important; }
.text-\[10px\] { font-size: calc(10px * var(--fontScale)) !important; }
.text-\[11px\] { font-size: calc(11px * var(--fontScale)) !important; }
.text-\[12px\] { font-size: calc(12px * var(--fontScale)) !important; }
.text-\[13px\] { font-size: calc(13px * var(--fontScale)) !important; }
.text-\[14px\] { font-size: calc(14px * var(--fontScale)) !important; }
.text-\[16px\] { font-size: calc(16px * var(--fontScale)) !important; }
.text-\[18px\] { font-size: calc(18px * var(--fontScale)) !important; }

/* ---- CSS custom con px (alcuni punti chiave del tuo style.css) ---- */
.pool-name-tag{ font-size: calc(10px * var(--fontScale)) !important; }
.map-toggle-handle{ font-size: calc(11px * var(--fontScale)) !important; }
.map-toggle-mapicon,
.map-toggle-arrow{ font-size: calc(12px * var(--fontScale)) !important; }
#userAuthBtn{ font-size: calc(14px * var(--fontScale)) !important; }

/* Dettagli tappa (mobile) dove hai label/input in px */
.details-content .bg-slate-50 .border-t.border-dashed label,
.details-content .bg-slate-50 > div.flex.space-x-3 label{
  font-size: calc(11px * var(--fontScale)) !important;
}
.details-content .bg-slate-50 .border-t.border-dashed input,
.details-content textarea{
  font-size: calc(12px * var(--fontScale)) !important;
}