/* ============================================================
   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; }

.list-item.drag-over-top {
    border-top: 3px solid #0ea5e9 !important;
}

.list-item.drag-over-bottom {
    border-bottom: 3px solid #0ea5e9 !important;
}

body.poolpro-touch-reordering,
body.poolpro-touch-reordering * {
    user-select: none !important;
    -webkit-user-select: none !important;
}


/* ============================================================
   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;
}

.header-btn--calendar{
  flex: 0 0 auto;
  background: #1d4ed8;   /* blu scuro */
  border-color: rgba(255,255,255,0.9);
  color: #fff;
}

.header-btn--calendar:hover{
  background: #1e40af;
  border-color: rgba(255,255,255,0.9);
}

/* 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: 100500 !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;
}


.home-point-icon{
  background-color:#64748b; /* slate */
  border-color:#1e293b;
}



#generalMemosModalBody{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}




@media (max-width: 640px) {
  /* ✅ scroller principale stabile */
  #scheduleView {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ le card non devono provare gesture strane su touch */
  .list-item {
    touch-action: pan-y;
    -webkit-user-drag: none;
  }

  .list-item:hover {
    cursor: default;
  }

  /* ✅ FIX PRINCIPALE:
     niente scroll interno nei dettagli su mobile.
     Scorre solo la pagina principale, evitando il “su e giù”. */
  .details-content.expanded {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
}


.home-point-icon {
  background-color: #16a34a;
  border-color: #166534;
  color: white;
}



/* ============================================================
   MODALITÀ RIORDINA SCHEDULE - MOBILE FRIENDLY
============================================================ */

body.poolpro-schedule-reorder-mode #poolList .list-item {
  cursor: grab;
  touch-action: none !important;
  border-left-color: #f59e0b !important;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);
}

body.poolpro-schedule-reorder-mode #poolList .list-item:active {
  cursor: grabbing;
}

body.poolpro-schedule-reorder-mode #poolList .list-item * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.poolpro-schedule-reorder-mode #poolList .details-content {
  pointer-events: none;
}

body.poolpro-touch-reordering,
body.poolpro-touch-reordering * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.poolpro-touch-reordering #poolList .list-item.dragging {
  opacity: 0.65;
  transform: scale(0.99);
}

body.poolpro-touch-reordering #poolList .list-item.drag-over-top {
  border-top: 4px solid #f59e0b !important;
}

body.poolpro-touch-reordering #poolList .list-item.drag-over-bottom {
  border-bottom: 4px solid #f59e0b !important;
}


/* ============================================================
   RIMUOVI SOLO IL PUNTINO ESTERNO A SINISTRA DELLE TAPPE
   NON tocca il cerchio numerato dentro la card.
============================================================ */

#poolList {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

#poolList > li,
#poolList .list-item {
  list-style: none !important;
}

#poolList > li::marker,
#poolList .list-item::marker {
  content: "" !important;
  display: none !important;
}

/* Se quel puntino è generato come pseudo-elemento */
#poolList .list-item::before {
  content: none !important;
  display: none !important;
}


/* ============================================================
   FIX RIORDINO: drag solo dal numero, scroll libero su mobile
============================================================ */

#poolList .list-item {
  touch-action: pan-y !important;
}

#poolList .schedule-order-handle {
  cursor: grab;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: element;
}

#poolList .schedule-order-handle:active {
  cursor: grabbing;
}

body.poolpro-schedule-reorder-mode #poolList .list-item {
  cursor: default !important;
  touch-action: pan-y !important;
  border-left-color: #f59e0b !important;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.12);
}

body.poolpro-schedule-reorder-mode #poolList .schedule-order-handle {
  cursor: grab !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  transform: scale(1.03);
}

body.poolpro-schedule-reorder-mode #poolList .details-content {
  pointer-events: auto !important;
}

body.poolpro-touch-reordering #poolList .schedule-order-handle {
  cursor: grabbing !important;
}


/* ============================================================
   FIX TOUCH DRAG & DROP - maggiore tolleranza maniglia numero
   - Non cambia layout
   - Aumenta area cliccabile invisibile del numero
   - Mantiene scroll libero sulle card
============================================================ */

#poolList .schedule-order-handle {
  position: relative;
  z-index: 3;
  touch-action: none !important;
  -webkit-user-drag: none !important;
}

#poolList .schedule-order-handle::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  background: transparent;
}

body.poolpro-schedule-reorder-mode #poolList .schedule-order-handle::after {
  inset: -18px;
}

body.poolpro-touch-reordering #poolList .list-item.dragging {
  opacity: 0.65;
  transform: scale(0.99);
}


/* ============================================================
   POOLPRO V61 - Report layout stability
   Evita il flash/overflow iniziale delle righe report su mobile.
============================================================ */
#reportModal,
#reportModal * {
  box-sizing: border-box;
}

#reportModal {
  overflow: hidden;
}

#reportContentArea,
#chemicalLogContentArea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#reportContentArea > div,
#chemicalLogContentArea > div,
#reportContentArea .report-row-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#reportContentArea .report-row-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

#reportContentArea .report-row-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#reportContentArea .report-row-item > .flex,
#reportContentArea .report-action-btn {
  flex-shrink: 0;
}

/* ============================================================
   V66 - Schedule memo controls stable / no flicker
============================================================ */
.poolpro-schedule-memo-row {
  min-height: 36px;
  align-items: center;
}

.poolpro-schedule-memo-row [data-field="memo"] {
  min-width: 0;
}

.poolpro-schedule-memo-action-btn {
  width: 28px;
  min-width: 28px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  -webkit-tap-highlight-color: transparent;
}

.ui-restoring .poolpro-schedule-memo-action-btn,
.ui-restoring .poolpro-schedule-memo-row [data-field="memo"] {
  transition: none !important;
}

/* ============================================================
   V67 - Report rows expandable on tap
   Le righe report restano compatte di default, ma al tap
   mostrano tutto il testo andando a capo in basso.
============================================================ */
#reportContentArea .report-row-item.report-row-expanded {
  align-items: start !important;
}

#reportContentArea .report-row-item.report-row-expanded .report-row-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  padding-top: 2px;
  padding-bottom: 2px;
}

#reportContentArea .report-row-item.report-row-expanded > .flex {
  align-self: start !important;
  padding-top: 1px;
}

/* ============================================================
   V68 - MOBILE COMPACT TOOLBAR
   Schedule / Calendar / Report / Prodotti fissi + Altro
============================================================ */
.poolpro-header-v68{
  position: relative;
  overflow: visible;
  gap: 6px;
}

.header-primary-nav,
.header-secondary-nav{
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-primary-nav{
  flex: 0 0 auto;
}

.header-secondary-nav{
  flex: 0 0 auto;
}

.header-more-btn{
  display: none;
  background: #334155;
  border-color: rgba(255,255,255,0.55);
}

.header-more-btn:hover{
  background: #475569;
}

.header-btn-label-short,
.header-account-label{
  display: none;
}

@media (max-width: 767px){
  :root{
    --headerBtnH: 38px;
  }

  .poolpro-header-v68{
    gap: 4px;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .poolpro-header-v68 .header-btn{
    padding-left: 7px;
    padding-right: 7px;
    gap: 4px;
    justify-content: center;
  }

  .poolpro-header-v68 #scheduleSwitcherBtn{
    flex: 0 0 auto;
    min-width: 72px;
  }

  .header-primary-nav{
    flex: 1 1 auto;
    min-width: 0;
    gap: 4px;
    justify-content: space-between;
  }

  .header-primary-nav .header-btn{
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }

  .header-btn-label--products{
    display: none;
  }

  .header-btn-label-short{
    display: inline;
  }

  .header-more-btn{
    display: inline-flex;
    flex: 0 0 auto;
    min-width: 54px;
  }

  .header-secondary-nav{
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 6px;
    width: min(220px, calc(100vw - 12px));
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
    z-index: 95000;
  }

  .header-secondary-nav.open{
    display: flex;
  }

  .header-secondary-nav::before{
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: #0f172a;
    border-left: 1px solid rgba(255,255,255,0.16);
    border-top: 1px solid rgba(255,255,255,0.16);
  }

  .header-secondary-nav .header-btn{
    width: 100%;
    justify-content: flex-start;
    background: #334155;
    border-color: rgba(255,255,255,0.22);
    border-radius: 9px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .header-secondary-nav .header-btn:hover{
    background: #475569;
  }

  .header-secondary-nav #userAuthBtn{
    width: 100% !important;
    height: var(--headerBtnH) !important;
    border-radius: 9px !important;
    padding: 0 11px !important;
    justify-content: flex-start !important;
    gap: 8px;
  }

  .header-secondary-nav #userAuthBtn .header-account-label{
    display: inline;
    font-size: 12px;
    font-weight: 600;
  }
}

@media (max-width: 390px){
  .poolpro-header-v68 #scheduleSwitcherBtn{
    min-width: 66px;
  }

  .poolpro-header-v68 .header-btn{
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px !important;
  }

  .header-more-btn{
    min-width: 48px;
  }
}

/* =========================================================
   V70 - Toolbar Altro stabile + Tools submenu
============================================================ */
.poolpro-header-v70{
  position: relative;
  overflow: visible !important;
  z-index: 95000 !important;
}

.poolpro-header-v70 .header-secondary-action{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}

.poolpro-header-v70 .header-tools-menu{
  position: relative;
  width: auto;
}

.poolpro-header-v70 .header-tools-parent{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.poolpro-header-v70 .header-tools-chevron{
  font-size: 10px;
  transition: transform .16s ease;
}

.poolpro-header-v70 #toolsSwitcherBtn[aria-expanded="true"] .header-tools-chevron{
  transform: rotate(180deg);
}

.poolpro-header-v70 .header-tools-submenu{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  flex-direction: column;
  gap: 5px;
  padding: 7px;
  border-radius: 12px;
  background: #111827;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 36px rgba(15,23,42,.34);
  z-index: 96000;
}

.poolpro-header-v70 .header-tools-submenu.open{
  display: flex;
}

.poolpro-header-v70 .header-tools-submenu button{
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.12);
  background: #1f2937;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.poolpro-header-v70 .header-tools-submenu button:hover{
  background: #374151;
}

.poolpro-header-v70 .header-tools-submenu button i{
  width: 16px;
  text-align: center;
  color: #7dd3fc;
}

@media (max-width: 767px){
  .poolpro-header-v70{
    z-index: 95000 !important;
  }

  .poolpro-header-v70 .header-secondary-nav{
    position: fixed !important;
    top: 52px;
    right: 6px;
    left: auto;
    width: min(240px, calc(100vw - 12px));
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 97000 !important;
  }

  .poolpro-header-v70 .header-secondary-nav::before{
    display: none;
  }

  .poolpro-header-v70 .header-secondary-nav .header-btn,
  .poolpro-header-v70 .header-secondary-nav #userAuthBtn,
  .poolpro-header-v70 .header-tools-menu,
  .poolpro-header-v70 .header-tools-parent{
    width: 100% !important;
  }

  .poolpro-header-v70 .header-tools-parent{
    justify-content: space-between !important;
  }

  .poolpro-header-v70 .header-tools-parent > span{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .poolpro-header-v70 .header-tools-submenu{
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 6px;
    padding: 6px;
    background: #020617;
    box-shadow: none;
  }

  .poolpro-header-v70 .header-tools-submenu button{
    min-height: 34px;
    font-size: 12px;
  }
}


/* =========================================================
   POOLPRO V74 - Parallel Calendar / Arrivi
========================================================= */
.poolpro-arrival-badge{
  min-width: 24px;
  min-height: 20px;
  vertical-align: middle;
}
.poolpro-arrival-badge:active{
  transform: scale(.96);
}
/* v213.40: il primo giorno del soggiorno è un nuovo arrivo. */
.poolpro-arrival-badge--new{
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
  min-width: 27px;
}
.poolpro-new-arrival-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 5px;
}
.poolpro-new-arrival-icon > b{
  position: absolute;
  right: -1px;
  top: -5px;
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
}
.poolpro-parallel-calendar-box > summary::-webkit-details-marker{
  display:none;
}
.poolpro-parallel-calendar-box > summary::after{
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: #0284c7;
  transition: transform .16s ease;
}
.poolpro-parallel-calendar-box[open] > summary::after{
  transform: rotate(90deg);
}
.poolpro-arrival-row input{
  min-height: 34px;
}

/* =========================================================
   POOLPRO V76 - Fix toolbar mobile compatta
   - elimina doppio testo Prodotti/Prod.
   - rimuove overflow/barra laterale header
   - mantiene 4 bottoni principali + Altro su una sola riga
========================================================= */
.poolpro-header-v68,
.poolpro-header-v70{
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  overflow: visible !important;
}

.poolpro-header-v68 *,
.poolpro-header-v70 *{
  box-sizing: border-box;
}

.poolpro-header-v68 .header-btn,
.poolpro-header-v70 .header-btn{
  white-space: nowrap;
}

.header-products-label::after{
  content: "";
}

@media (max-width: 767px){
  .poolpro-header-v68,
  .poolpro-header-v70{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    gap: 4px !important;
  }

  .poolpro-header-v68 #scheduleSwitcherBtn,
  .poolpro-header-v70 #scheduleSwitcherBtn{
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 0 !important;
    max-width: 70px !important;
  }

  .poolpro-header-v68 .header-primary-nav,
  .poolpro-header-v70 .header-primary-nav{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .poolpro-header-v68 .header-primary-nav .header-btn,
  .poolpro-header-v70 .header-primary-nav .header-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  .poolpro-header-v68 .header-btn i,
  .poolpro-header-v70 .header-btn i{
    flex: 0 0 auto;
  }

  .poolpro-header-v68 .header-btn-label,
  .poolpro-header-v70 .header-btn-label{
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
  }

  .poolpro-header-v68 .header-products-label,
  .poolpro-header-v70 .header-products-label{
    font-size: 0 !important;
    line-height: 1;
  }

  .poolpro-header-v68 .header-products-label::after,
  .poolpro-header-v70 .header-products-label::after{
    content: "Prod.";
    font-size: 11px;
    line-height: 1;
  }

  .poolpro-header-v68 .header-btn-label-short,
  .poolpro-header-v70 .header-btn-label-short{
    display: none !important;
  }

  .poolpro-header-v68 .header-more-btn,
  .poolpro-header-v70 .header-more-btn{
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 0 !important;
    max-width: 48px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .poolpro-header-v68 .header-more-btn span,
  .poolpro-header-v70 .header-more-btn span{
    display: none !important;
  }
}

@media (max-width: 390px){
  .poolpro-header-v68 #scheduleSwitcherBtn,
  .poolpro-header-v70 #scheduleSwitcherBtn{
    flex-basis: 66px !important;
    width: 66px !important;
    max-width: 66px !important;
  }

  .poolpro-header-v68 .header-btn,
  .poolpro-header-v70 .header-btn{
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 3px !important;
  }

  .poolpro-header-v68 .header-more-btn,
  .poolpro-header-v70 .header-more-btn{
    flex-basis: 42px !important;
    width: 42px !important;
    max-width: 42px !important;
  }
}

/* =========================================================
   POOLPRO V78 - Toolbar compatta uniforme (base V76)
   - Desktop e mobile usano la stessa logica: principali + Altro
   - Account/Memo/Clienti/Tools restano sempre dentro Altro
   - Schedule non si allarga più occupando tutta la riga desktop
========================================================= */
.poolpro-header-v68.poolpro-header-v70,
#poolProHeader.poolpro-header-v68,
#poolProHeader.poolpro-header-v70{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: visible !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}

#poolProHeader #scheduleSwitcherBtn{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: none !important;
  justify-content: flex-start !important;
}

#poolProHeader .header-primary-nav{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  gap: 8px !important;
  overflow: visible !important;
}

#poolProHeader .header-primary-nav .header-btn{
  flex: 0 0 auto !important;
  min-width: auto !important;
  width: auto !important;
  max-width: none !important;
}

#poolProHeader .header-more-btn{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 74px !important;
  max-width: none !important;
  justify-content: center !important;
}

#poolProHeader .header-secondary-nav{
  display: none !important;
  position: fixed !important;
  top: 52px;
  right: 6px;
  left: auto;
  width: min(240px, calc(100vw - 12px));
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  background: #0f172a !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35) !important;
  z-index: 97000 !important;
}

#poolProHeader .header-secondary-nav.open{
  display: flex !important;
}

#poolProHeader .header-secondary-nav::before{
  display: none !important;
}

#poolProHeader .header-secondary-nav .header-btn,
#poolProHeader .header-secondary-nav #userAuthBtn,
#poolProHeader .header-secondary-nav .header-tools-menu,
#poolProHeader .header-secondary-nav .header-tools-parent{
  width: 100% !important;
}

#poolProHeader .header-secondary-nav .header-btn,
#poolProHeader .header-secondary-nav #userAuthBtn{
  justify-content: flex-start !important;
  min-height: 38px !important;
  border-radius: 9px !important;
}

#poolProHeader .header-secondary-nav #userAuthBtn{
  padding: 0 11px !important;
  gap: 8px !important;
}

#poolProHeader .header-secondary-nav #userAuthBtn .header-account-label{
  display: inline !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

@media (min-width: 768px){
  #poolProHeader .header-tools-submenu{
    position: static !important;
    min-width: 0 !important;
    width: 100% !important;
    margin-top: 6px !important;
    padding: 6px !important;
    background: #020617 !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767px){
  #poolProHeader{
    gap: 4px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #poolProHeader #scheduleSwitcherBtn{
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 0 !important;
    max-width: 70px !important;
    justify-content: center !important;
  }

  #poolProHeader .header-primary-nav{
    flex: 1 1 auto !important;
    width: auto !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  #poolProHeader .header-primary-nav .header-btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #poolProHeader .header-more-btn{
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 0 !important;
    max-width: 48px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  #poolProHeader .header-more-btn span{
    display: none !important;
  }
}


/* =========================================================
   POOLPRO V89 - Toolbar menu colors restored + modal snappy UX
   - Colori distinti nel menu Altro: Account/Memo/Clienti/Tools
   - Tools submenu con icone colorate
   - Mantiene il layout compatto V78/V88
========================================================= */
#poolProHeader #headerSecondaryNav #userAuthBtn{
  background: linear-gradient(135deg, #4f46e5, #3730a3) !important;
  border-color: rgba(199,210,254,.75) !important;
  color: #fff !important;
}
#poolProHeader #headerSecondaryNav #userAuthBtn:hover{
  background: linear-gradient(135deg, #6366f1, #4338ca) !important;
}
#poolProHeader #headerSecondaryNav #userAuthBtn i{
  color: #e0e7ff !important;
}

#poolProHeader #headerSecondaryNav #memoSwitcherBtn{
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  border-color: rgba(253,230,138,.78) !important;
  color: #fff !important;
}
#poolProHeader #headerSecondaryNav #memoSwitcherBtn:hover{
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
#poolProHeader #headerSecondaryNav #memoSwitcherBtn i{
  color: #fef3c7 !important;
}

#poolProHeader #headerSecondaryNav #viewSwitcherBtn{
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-color: rgba(221,214,254,.78) !important;
  color: #fff !important;
}
#poolProHeader #headerSecondaryNav #viewSwitcherBtn:hover{
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}
#poolProHeader #headerSecondaryNav #viewSwitcherBtn i{
  color: #ede9fe !important;
}

#poolProHeader #headerSecondaryNav #toolsSwitcherBtn{
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  border-color: rgba(186,230,253,.78) !important;
  color: #fff !important;
}
#poolProHeader #headerSecondaryNav #toolsSwitcherBtn:hover{
  background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
}
#poolProHeader #headerSecondaryNav #toolsSwitcherBtn i{
  color: #e0f2fe !important;
}

#poolProHeader #headerToolsSubmenu button:nth-child(1) i{ color:#38bdf8 !important; }
#poolProHeader #headerToolsSubmenu button:nth-child(2) i{ color:#34d399 !important; }
#poolProHeader #headerToolsSubmenu button:nth-child(3) i{ color:#fb7185 !important; }
#poolProHeader #headerToolsSubmenu button:nth-child(4) i{ color:#a3e635 !important; }

#poolProHeader #headerToolsSubmenu button{
  background: #111827 !important;
  border-color: rgba(255,255,255,.14) !important;
}
#poolProHeader #headerToolsSubmenu button:hover{
  background: #1f2937 !important;
}


/* =========================================================
   POOLPRO V90 - Menu Altro order + Export JSON shortcut
   - Ordine: Account, Clienti, Memo, Export JSON, Tools
   - Export JSON prima di Tools, con colore dedicato
========================================================= */
#poolProHeader #headerSecondaryNav #headerExportJsonBtn{
  background: linear-gradient(135deg, #059669, #047857) !important;
  border-color: rgba(167,243,208,.78) !important;
  color: #fff !important;
}
#poolProHeader #headerSecondaryNav #headerExportJsonBtn:hover{
  background: linear-gradient(135deg, #10b981, #059669) !important;
}
#poolProHeader #headerSecondaryNav #headerExportJsonBtn i{
  color: #d1fae5 !important;
}

/* ============================================================
   POOLPRO V105 - Schedule reorder hard-fix visual layer
============================================================ */
body.poolpro-schedule-reorder-mode #poolList .schedule-order-handle {
  touch-action: none !important;
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

body.poolpro-touch-reordering {
  overscroll-behavior: contain;
}

body.poolpro-touch-reordering #poolList .list-item.dragging {
  opacity: 0.55 !important;
  transform: scale(0.985) !important;
}

body.poolpro-touch-reordering #poolList .list-item.drag-over-top,
#poolList .list-item.drag-over-top {
  border-top: 5px solid #f59e0b !important;
}

body.poolpro-touch-reordering #poolList .list-item.drag-over-bottom,
#poolList .list-item.drag-over-bottom {
  border-bottom: 5px solid #f59e0b !important;
}


/* =========================================================
   V106 - Modali sopra banner sync/conflitto
   Il banner rosso Cloud resta visibile, ma le finestre di conferma
   devono sempre comparire sopra e ricevere i click.
========================================================= */
#reportModal,
#chemicalLogModal,
#paymentsHistoryModal,
#editPaymentFromHistoryModal,
#reportVisibilityOptionsModal,
#reportSummaryOptionsModal,
#generalMemosFullscreenModal,
#memoCalendarDayModal,
#poolProToolsModal,
#poolproArrivalSuggestModal {
  z-index: 100500 !important;
}

#reportModal > div,
#chemicalLogModal > div,
#paymentsHistoryModal > div,
#editPaymentFromHistoryModal > div,
#reportVisibilityOptionsModal > div,
#reportSummaryOptionsModal > div,
#generalMemosFullscreenModal > div,
#memoCalendarDayModal > div,
#poolProToolsModal > div,
#poolproArrivalSuggestModal > div {
  position: relative;
  z-index: 100501 !important;
}

/* V144 - memo editor realmente sopra la modale giorno Calendar.
   La finestra del giorno resta aperta sotto; il promemoria usa un layer superiore. */
#customModal {
  z-index: 2147483647 !important;
}

#customModal > div {
  position: relative;
  z-index: 2147483647 !important;
}

#customModal.brpulse-memo-editor-top {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
}

#customModal.brpulse-memo-editor-top > div {
  position: relative !important;
  z-index: 2147483647 !important;
}

#memoCalendarDayModal.brpulse-under-memo-editor {
  z-index: 2147480000 !important;
}

#memoCalendarDayModal.brpulse-under-memo-editor > div {
  position: relative !important;
  z-index: 2147480001 !important;
}



/* =========================================================
   POOLPRO V131 - Header Altro/Menu globale sopra ogni tab
   Il menu Account/Clienti/Memo/Export/Tools deve restare cliccabile
   anche sopra Report, Prodotti, Calendar e layer pagina.
========================================================= */
#poolProHeader{
  position: relative !important;
  z-index: 101300 !important;
  overflow: visible !important;
}

#headerMoreBtn{
  position: relative !important;
  z-index: 101410 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
}

#headerSecondaryNav{
  z-index: 101500 !important;
  pointer-events: auto !important;
}

#headerSecondaryNav.open{
  z-index: 101500 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#headerToolsSubmenu{
  z-index: 101520 !important;
  pointer-events: auto !important;
}

@media (max-width: 767px){
  #poolProHeader{
    z-index: 101300 !important;
  }

  #headerSecondaryNav{
    position: fixed !important;
    z-index: 101500 !important;
  }

  #headerSecondaryNav.open{
    display: flex !important;
  }
}

/* V160 - Date picker sopra tutte le modali.
   Il calendario custom delle date deve restare cliccabile anche quando è aperto dentro customModal/report/modal fullscreen. */
.poolpro-date-picker-below,
[data-poolpro-date-picker-top="1"] {
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* =========================================================
   BR Pools v163 - Scroll performance patch
   ---------------------------------------------------------
   Soft UI-only hardening: improves Android/PWA scrolling in
   Schedule and Calendar without changing data, sync, reports,
   products, employees, or completion logic.
========================================================= */
#scheduleView,
#scheduleListArea,
#poolList,
#generalMemosFullscreenModal,
#generalMemosFullscreenModal .memo-calendar-mini-scroll,
.memo-calendar-mini-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

#scheduleMapSlot,
#scheduleListArea,
#poolList,
#generalMemosFullscreenModal .memo-calendar-mini-scroll {
  contain: layout paint style;
}

#poolList > .list-item[data-id],
#generalMemosFullscreenModal [data-date-key],
#generalMemosFullscreenModal .memo-calendar-week-separator,
#generalMemosFullscreenModal .memo-calendar-event,
#generalMemosFullscreenModal .memo-calendar-day,
#generalMemosFullscreenModal .memo-calendar-card,
.memo-calendar-mini-scroll [data-date-key],
.memo-calendar-mini-scroll .memo-calendar-event,
.memo-calendar-mini-scroll .memo-calendar-day,
.memo-calendar-mini-scroll .memo-calendar-card {
  content-visibility: auto;
  contain-intrinsic-size: 96px 156px;
  contain: layout paint style;
}

/* During active scroll, reduce paint-heavy effects only temporarily. */
body.poolpro-is-scrolling #poolList > .list-item[data-id],
body.poolpro-is-scrolling #poolList .shadow,
body.poolpro-is-scrolling #poolList .shadow-sm,
body.poolpro-is-scrolling #poolList .shadow-md,
body.poolpro-is-scrolling #poolList .shadow-lg,
body.poolpro-is-scrolling #generalMemosFullscreenModal .shadow,
body.poolpro-is-scrolling #generalMemosFullscreenModal .shadow-sm,
body.poolpro-is-scrolling #generalMemosFullscreenModal .shadow-md,
body.poolpro-is-scrolling #generalMemosFullscreenModal .shadow-lg {
  box-shadow: none !important;
}

body.poolpro-is-scrolling #scheduleView *,
body.poolpro-is-scrolling #generalMemosFullscreenModal * {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
}

body.poolpro-is-scrolling #map,
body.poolpro-is-scrolling .leaflet-container {
  pointer-events: none;
}

@supports (content-visibility: auto) {
  #poolList > .list-item[data-id] {
    content-visibility: auto;
    contain-intrinsic-size: 104px 180px;
  }
}

/* =========================================================
   BR Pools v164 - Fast border UI for smoother Android scroll
   ---------------------------------------------------------
   Permanent light borders replace expensive card shadows in
   Schedule, Calendar/Memo view and Report lists. This avoids
   the restart lag caused by re-enabling shadows after scroll.
========================================================= */
@media (max-width: 900px) {
  #scheduleView,
  #scheduleListArea,
  #poolList,
  #reportContentArea,
  #chemicalLogContentArea,
  #generalMemosFullscreenModal,
  #generalMemosFullscreenModal .memo-calendar-mini-scroll,
  .memo-calendar-mini-scroll {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  #scheduleListArea,
  #poolList,
  #reportContentArea,
  #chemicalLogContentArea,
  .memo-calendar-mini-scroll {
    contain: layout paint style;
  }

  /* Schedule cards: no heavy shadows, only a very light separator border. */
  #poolList > .list-item[data-id],
  #poolList .list-item,
  #poolList article,
  #poolList [data-stop-id],
  #scheduleListArea .shadow,
  #scheduleListArea .shadow-sm,
  #scheduleListArea .shadow-md,
  #scheduleListArea .shadow-lg,
  #poolList .shadow,
  #poolList .shadow-sm,
  #poolList .shadow-md,
  #poolList .shadow-lg {
    box-shadow: none !important;
  }

  #poolList > .list-item[data-id],
  #poolList .list-item,
  #poolList article,
  #poolList [data-stop-id] {
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    outline: 0 !important;
  }

  /* Calendar / memo cards: same lightweight treatment. */
  #generalMemosFullscreenModal .shadow,
  #generalMemosFullscreenModal .shadow-sm,
  #generalMemosFullscreenModal .shadow-md,
  #generalMemosFullscreenModal .shadow-lg,
  .memo-calendar-mini-scroll .shadow,
  .memo-calendar-mini-scroll .shadow-sm,
  .memo-calendar-mini-scroll .shadow-md,
  .memo-calendar-mini-scroll .shadow-lg {
    box-shadow: none !important;
  }

  #generalMemosFullscreenModal .memo-calendar-event,
  #generalMemosFullscreenModal .memo-calendar-day,
  #generalMemosFullscreenModal .memo-calendar-card,
  .memo-calendar-mini-scroll .memo-calendar-event,
  .memo-calendar-mini-scroll .memo-calendar-day,
  .memo-calendar-mini-scroll .memo-calendar-card {
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
    box-shadow: none !important;
  }

  /* Report rows: keep readable, remove shadow repaint cost. */
  #reportContentArea .shadow,
  #reportContentArea .shadow-sm,
  #reportContentArea .shadow-md,
  #reportContentArea .shadow-lg,
  #chemicalLogContentArea .shadow,
  #chemicalLogContentArea .shadow-sm,
  #chemicalLogContentArea .shadow-md,
  #chemicalLogContentArea .shadow-lg,
  #reportContentArea .report-row-item,
  #chemicalLogContentArea > div,
  #reportContentArea > div {
    box-shadow: none !important;
  }

  #reportContentArea .report-row-item,
  #reportContentArea > div,
  #chemicalLogContentArea > div {
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
  }

  #poolList > .list-item[data-id],
  #generalMemosFullscreenModal [data-date-key],
  #generalMemosFullscreenModal .memo-calendar-event,
  #generalMemosFullscreenModal .memo-calendar-day,
  #generalMemosFullscreenModal .memo-calendar-card,
  .memo-calendar-mini-scroll [data-date-key],
  .memo-calendar-mini-scroll .memo-calendar-event,
  .memo-calendar-mini-scroll .memo-calendar-day,
  .memo-calendar-mini-scroll .memo-calendar-card,
  #reportContentArea .report-row-item,
  #reportContentArea > div,
  #chemicalLogContentArea > div {
    content-visibility: auto;
    contain: layout paint style;
  }

  #reportContentArea .report-row-item,
  #reportContentArea > div,
  #chemicalLogContentArea > div {
    contain-intrinsic-size: 56px 100px;
  }

  /* Avoid expensive transition recalculation while interacting with long lists. */
  #scheduleView .transition,
  #reportModal .transition,
  #generalMemosFullscreenModal .transition,
  #poolList *,
  #reportContentArea *,
  #chemicalLogContentArea *,
  .memo-calendar-mini-scroll * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* =========================================================
   BR Pools v167 - no-lazy scroll restart fix
   ---------------------------------------------------------
   Keep the light border UI, but disable content-visibility on
   Schedule/Report rows because on Android/PWA it can delay the
   next scroll gesture after the list has stopped.
========================================================= */
@media (max-width: 900px) {
  #poolList > .list-item[data-id],
  #poolList .list-item,
  #poolList article,
  #poolList [data-stop-id],
  #reportContentArea .report-row-item,
  #reportContentArea > div,
  #chemicalLogContentArea > div {
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(148, 163, 184, 0.30) !important;
  }

  #scheduleView *,
  #scheduleListArea *,
  #poolList *,
  #reportContentArea *,
  #chemicalLogContentArea * {
    transition-property: none !important;
    animation: none !important;
  }

  #scheduleView,
  #scheduleListArea,
  #poolList,
  #reportContentArea,
  #chemicalLogContentArea {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
  }
}

/* BR Pools V197 - spinner CSS kept from V193, no logic side effects */
@keyframes brPoolsV197Spin { to { transform: rotate(360deg); } }
.brpools-sync-spin,
#syncStatusArea .loader,
.loader,
.mini-loader,
.main-loader,
[data-poolpro-sync-btn="1"] .fa-spinner,
#manualSyncBtn .fa-spinner,
#accountManualSyncBtn .fa-spinner,
.fa-spin {
  animation: brPoolsV197Spin .85s linear infinite !important;
  transform-origin: 50% 50% !important;
  display: inline-block !important;
  will-change: transform;
}
[data-poolpro-sync-running="1"] .fa-cloud-arrow-up,
[data-poolpro-sync-running="1"] .fa-rotate,
[data-poolpro-sync-running="1"] .fa-arrows-rotate {
  animation: brPoolsV197Spin .85s linear infinite !important;
  transform-origin: 50% 50% !important;
  display: inline-block !important;
}