/* QUESTA PAGINA CONTIENE LE REGOLE CSS GLOBALI */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* *****************************************************************************
Allineamento e dimensione standard per le Google Icons

Questo gruppo di regole fa si che le icone si allineino perfettamente al testo
dei pulsanti o delle etichette senza sbalzi di altezza 
***************************************************************************** */

.material-symbols-outlined {
  font-size: 1.2rem;
  vertical-align: middle;
  line-height: 1;
}

/* *****************************************************************************
BARRA SUPERIORE PAGINE

Questo gruppo di regole riguarda la barra superiore di una pagina HTML 
secondaria (non la main) sia che abbia gli elementi HTML sia che abbia la table
***************************************************************************** */

/* Barra superiore progettata con padding, sfondo e margine di distacco */
.Gl_TopBar {
  display: flex;
  justify-content: space-between; /* Spinge i gruppi agli estremi */
  align-items: center;            /* Allineamento verticale */
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
  
  /* AGGIUNTE FONDAMENTALI PER DARE RESPIRO: */
  background: var(--card-bg, #ffffff);
  padding: 1rem 1.5rem;
  border-radius: 10px;
  box-shadow: var(--shadow, 0 4px 6px -1px rgba(0,0,0,0.05));
  border: 1px solid var(--border-color, #cbd5e1);
  margin-bottom: 1rem; /* <-- Crea lo spazio perfetto tra la barra e le section sottostanti! */
}

/* Sottocontenitori gruppi pulsanti sinistro e destro */
.Gl_NavBarLeft, .Gl_NavBarRight {
  display: flex;
  gap: 0.75rem; /* Spazio tra i singoli bottoni all'interno dello stesso gruppo */
  align-items: center;
}

/* Pulsanti d'azione a sinistra */
.Gl_BtnAction {
  background: none;
  border: 1px solid var(--border-color);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-main);
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.Gl_BtnAction:hover {background-color: #c7d2fe;}

/* Pulsanti di funzione a destra */
.Gl_BtnFunction {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.Gl_BtnFunction:hover {background: #c7d2fe;}

/* *****************************************************************************
ELEMENTI DELLA DIALOG

Questo gruppo di regole riguarda tutti gli elementi delle dialog
***************************************************************************** */

/* Contenitore principale della Dialog */
.DlMain {
    margin: auto;
    border: none;
    border-radius: 12px;
    /* Aumentato il padding-top a 2.5rem per dare respiro in alto */
    padding: 2.5rem 2rem 2rem 2rem; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
}

/* Stile dello sfondo sfuocato */
.DlMain::backdrop {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}

/* Intestazione della dialog */
.DlHeader {
    display: flex;
    /* Spinge il titolo a sinistra e la X all'estrema destra */
    justify-content: space-between; 
    align-items: center;
    /* Spazio tra l'intestazione e i campi del form */
    margin-bottom: 2rem;           
    /* Linea divisoria elegante (opzionale) */
    border-bottom: 1px solid var(--border-color, #e2e8f0); 
    padding-bottom: 0.75rem;
}

/* Titolo della dialog */
.DlHeader h3 {
    margin: 0;
    /* Allineato a sinistra */
    text-align: left;               
}

/* Pulsante "X" di chiusura in alto a destra */
.DlClose {
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--text-main, #475569);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

/* effetto hover */
.DlClose:hover {background-color: #f1f5f9;}

/* Piede della dialog (In basso a destra) */
.DlFoot {
    display: flex;
    /* Spinge il pulsante in basso all'estrema destra */
    justify-content: flex-end;      
    gap: 0.75rem;
    /* Distacco dai campi del form sovrastanti */
    margin-top: 2rem;               
}

/* pulsante del piede */
.DlBtn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* effetto hover */
.DlBtn:hover {background: var(--primary-hover);}
    
    
/* *****************************************************************************
ELEMENTI DELLA TABLE

Questo gruppo di regole riguarda tutti gli elementi delle table che appaiono
in caso di gestione di record uno a molti.
Attenzione: come si può facilmente notare la classe TbStyle è applicata insieme
all'elemento (th tr ecc.). Essa è definita una sola volta nella pagina HTML
***************************************************************************** */

/* INTESTAZIONE DELLA TABELLA */
/* Attenzione: non si tratta della intestazione vera e propria della table ma 
   piuttosto di un div posto immediatamente sopra la table */
   
/* contenitore titolo e pulsante */
.TbHeader {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1rem;
    width: 100%; /* Assicura che occupi tutto lo spazio orizzontale disponibile */
    padding: 10px 18px;             /* Aumenta l'altezza e dà respiro verticale */
    border-bottom: 2px solid #f1f5f9;
}

/* titolo */
.TbHeader h2 {margin: 0;}

/* Pulsante Add a sinistra dell'intestazione */
.TbBtnHeaderAdd {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* Impedisce al testo di andare a capo */
    flex-shrink: 0;      /* Evita che il pulsante si rimpicciolisca se lo spazio è stretto */
}

/* effetto hover */
.TbBtnHeaderAdd:hover {
  background: var(--primary-color);
  color: #fff;
}


/* CORPO DELLA TABELLA */


/* Div contenitore */
.TbWrapper {overflow-x: auto; width: 100%;}


/* stile della table */
.TbStyle {
    width: 100%;
    table-layout: fixed; /* Fondamentale per distribuire e controllare le colonne */
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}


/* regola applicata al tag <th> tramite la class della table */
.TbStyle th {
    background-color: #f8fafc;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap; /* Evita che l'intestazione vada a capo */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* regola applicata al tag <td> tramite la class della table */
.TbStyle td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-main);
    white-space: nowrap; /* Impedisce al testo di andare a capo in tutte le celle */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* effetto hover */
.TbStyle tr:hover {background-color: #f8fafc;}

/* pulsante di riga elimina/modifica */
.TbBtnRow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

/* effetto hover */
.TbBtnRow:hover {background: #e2e8f0;}

/* ********************************************************* */
/* Regole generali per le colonne                            */
/* ********************************************************* */

/* colonna Cestino (fissa e stretta) */
.tb_trsh {width: 45px; min-width: 45px; text-align: center;}
.tb_trsh:hover {cursor: pointer;}

/* colonne fisse o a larghezza definita */
.tb_t040 {width: 40px; min-width: 30px;}
.tb_t055 {width: 55px; min-width: 45px;}
.tb_t100 {width: 110px; min-width: 100px;}
.tb_t150 {width: 150px; min-width: 140px;}    /* circa 15 - 20 caratteri */
.tb_t220 {width: 220px; min-width: 210px;}

/* colonna data */
.tb_data {width: 70px; min-width: 65px; text-align: center;}

/* colonne numeri: intestazione a sx e valori a dx, senza andare a capo */
.tb_Nimp {width: 130px; min-width: 110px;}
.tb_Nali {width: 90px; min-width: 80px;}

th.tb_Nimp, th.tb_Nsml, th.tb_Nali {text-align: left;}
td.tb_Nimp, td.tb_Nsml, td.tb_Nali {text-align: right;}

/* colonna Causale (o colonne flessibili/dimensionabili) a tutta pagina */
.tb_r150 {
    width: auto; /* Si espande occupando tutto lo spazio rimanente della pagina */
    min-width: 100px;
    resize: horizontal; 
    overflow: auto;
}

.tb_r350 {
    width: auto; /* Si espande occupando tutto lo spazio rimanente della pagina */
    min-width: 200px;
    resize: horizontal; 
    overflow: auto;
}

.tb_r450 {
    width: auto; /* Si espande occupando tutto lo spazio rimanente della pagina */
    min-width: 300px;
    resize: horizontal; 
    overflow: auto;
}