/* =========================================
   CUSTOM DASHBOARD STYLES
   ========================================= */

/* --- GESTIONE Z-INDEX (Livelli) --- */

/* LIVELLO 1: Header del sito
   Deve stare sopra il contenuto ma SOTTO le modali e i popup SAS */
#siteHeader, .headerCustom, .rtds-header {
    position: relative;
    z-index: 20 !important;
}

/* LIVELLO 4 (MASSIMO): POPUP INTERNI DI SAS
   Forza overlay/tooltip SAS a stare sopra a tutto.
   NOTA: in presenza di modali bootstrap, serve anche una regola "scoped" (vedi sotto). */
div[class*="sas_components-Popup"],
div[class*="sas_components-Overlay"],
.va-report-components-tooltip,
[role="tooltip"],
div[class*="Tooltip"] {
    z-index: 99999 !important;
}

/* Dropdown menu (Bootstrap) */
.dropdown-menu {
    z-index: 1000;
}

/* --- TOOLBAR (Download + Espandi) --- */
.chart-tools {
    display: flex;
    justify-content: flex-end; /* Allinea a destra */
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    margin-top: -5px;
    background-color: #fff;
    position: relative;
    margin-right:20px;
    margin-bottom:20px;
    /* z-index: 10; */ /* Basso, appena sopra il grafico */
}

/* Stile pulsanti (quadrati chiari) */
.btn-tool {
    background: #fff;
    border: 1px solid #ccc;
    color: #555;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.btn-tool:hover {
    background-color: #f0f0f0;
    color: #333;
    border-color: #999;
}

/* --- MODALE DI INGRANDIMENTO --- */
.modal {
    z-index: 10500 !important;
}
.modal-backdrop {
    z-index: 10400 !important;
}

.modal-content {
    height: 95vh;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;

    /* Evita stacking context strani che possono "intrappolare" i tooltip */
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.modal-header {
    z-index: 10501; /* Sopra il corpo della modale */
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

/* Forza visibilità tasto chiudi */
.btn-close {
    opacity: 1 !important;
    cursor: pointer;
}

/* BODY MODALE:
   Prima era overflow:hidden e tagliava/clippava tooltip/overlay.
   Lo lasciamo flex per centrare il grafico, ma rendiamo l’overflow visibile. */
.modal-body {
    padding: 10px;
    background: #fff;
    z-index: 10500;
    overflow: visible !important; /* <<<<<<<<<<<<<< FIX */
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Evita stacking context “intrappola tooltip” */
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Se vuoi applicare la regola SOLO alla modale di zoom (se hai altre modali): */
#sasZoomModal .modal-body {
    overflow: visible !important;
}

/* Tooltip/overlay dentro la modale: z-index ancora più alto della header */
#sasZoomModal div[class*="sas_components-Popup"],
#sasZoomModal div[class*="sas_components-Overlay"],
#sasZoomModal .va-report-components-tooltip,
#sasZoomModal [role="tooltip"],
#sasZoomModal div[class*="Tooltip"] {
    z-index: 200000 !important;
}

/* --- RESET SAS OBJECTS & LAYOUT --- */
sas-report-object {
    display: block;
    width: 100%;
    height: 100%;
}

.grafico {
    min-height: 400px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.titolo_grafico {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    height: 100px;
}

/* Fix per i filtri SAS che venivano tagliati */
.filtri {
    min-height: 80px;
    margin-bottom: 0;
    display: block;
    width: 100%;
}
/* Sfondo bianco necessario per screenshot corretti */
/* Arrotonda i contenitori principali (Card) */
.colonna {
    border-radius: 16px !important; /* Raggio della curva */
    overflow: hidden !important;    /* FONDAMENTALE: Taglia gli angoli del grafico SAS che altrimenti rimarrebbero quadrati */
    border: 1px solid #f0f0f0;      /* Opzionale: un bordo sottile elegante */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Opzionale: un'ombra leggera */
}
/* per far comparire il tasto info */

/* FIX SICURO: Applica l'altezza forzata SOLO agli oggetti nell'header (titolo_grafico) */
.titolo_grafico div[style*="z-index: 2"] {
    height: 50px !important;
    overflow: visible !important; /* Assicura che l'icona non venga tagliata se sfora leggermente */
}

/* Restringe la modale di zoom lasciando 30px di margine per lato */
#sasZoomModal .modal-dialog {
    /* Calcolo: 100% della larghezza meno 60px totali (30px a sinistra + 30px a destra) */
    max-width: calc(100vw - 100px) !important;
    
    /* Assicura che sia centrata orizzontalmente */
    margin-left: auto;
    margin-right: auto;
}


/* Stile per la tabella dati modale */
#sasZoomModal .modal-body {
    padding: 0 !important; /* Rimuove padding container per massimizzare spazio tabella */
    background-color: #fff;
}

#sasZoomModal .table th {
    font-weight: 600;
    color: #495057;
}

#sasZoomModal .table td {
    vertical-align: middle;
    font-size: 0.95rem;
}

/* Spazio tra campo ricerca e pulsante X della modale */
#sasDataSearch {
  margin-right: 12px;
}

#sasDataSearch { margin-right: 10px; }
#sasDataDownloadCsvBtn { margin-right: 12px; }


/* MODAL DATI: NON centrare il contenuto */
#sasDataModal .modal-body{
  display: block !important;         /* toglie flex */
  justify-content: flex-start !important;
  align-items: flex-start !important;
  overflow: auto !important;         /* scroll corretto */
  padding: 12px !important;
}


/* Nasconde l'SVG rimuovendolo dal flusso del documento */
svg.InformationStatus.sas-icon.sas_components-SVG-SVG_inner {
    display: none !important;
}


/* =========================================
   MEDIA QUERY PER DISPOSITIVI MOBILI (es. < 768px)
   ========================================= */
@media screen and (max-width: 768px) {

  html, body {
    overflow-x: hidden !important;
  }

  #mainContent,
  #Progetti,
  .Dcontainer {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .riga,
  .riga_full_expanded,
  .riga_kpi {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
  }

  .colonna,
  .riga_kpi .titolo {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .riga_kpi .titolo {
    min-height: 110px !important;
    padding: 8px !important;
  }

  .riga_kpi .titolo sas-report-object {
    width: 100% !important;
    height: 100px !important;
    min-height: 190px !important;
  }

  .titolo_grafico {
    display: block !important;
    width: 100% !important;
    min-height: 160px !important;
    height: 160px !important;
    margin: 0 0 8px 0 !important;
    padding: 8px 8px 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .titolo_grafico sas-report-object {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
  }

  .filtri {
    display: block !important;
    width: 100% !important;
    min-height: 200px !important;
    height: 160px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .filtri sas-report-object {
    width: 100% !important;
    height: 200px !important;
    min-height: 120px !important;
  }

  .grafico {
    display: block !important;
    width: 100% !important;
    min-height: 380px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .grafico sas-report-object {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
  }

/* --- NUOVI FIX PER POSIZIONAMENTO ICONA E TESTO --- */

  /* CORE FIX: Sposta il testo del titolo verso il basso per fare spazio all'icona "info" */
  /* Questo padding-top crea lo spazio "linea 0" dove l'icona nell'angolo in alto a sinistra può stare "sopra" la prima riga di testo. */
.titolo_grafico div[style*="z-index: 2"] {
    height: 50px !important;
    overflow: visible !important; /* Assicura che l'icona non venga tagliata se sfora leggermente */
    margin-top: -15px;
    margin-left: -10px;
}



}