/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */
/* TABLE PAGE RULES
/* ************************************************************************************************************************************************* */
/* ************************************************************************************************************************************************* */


:root {
    --primary-dark: #45322e;    /* Marrone caffè molto scuro per i testi */
    --accent: #d97706;          /* Ambra/Arancio bruciato per icone e hover */
    --border-color: #e7e5e4;    /* Grigio pietra calda per i bordi */
    --sidebar-bg: #fafaf9;      /* Sfondo sidebar crema chiarissimo */
    --footer-bg: #f5f5f4;       /* Sfondo footer sabbia */
    --transition-speed: 0.3s;
}


/* ************************************************* */
/* Main esterno                                      */
/* ************************************************* */

.TabPg_Container {

	width: 100%;
	height: 100%;

}

/* ************************************************* */
/* Testata                                           */
/* ************************************************* */


/* Titolo della sezione (es: "Beni e servizi") */
.TabPg_NavTitle {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark);
    margin-right: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.TabPg_NavBar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 45px; /* Leggermente più alta per comodità */
    padding: 0 15px;
    
    /* Coerenza con palette calda */
    background-color: var(--sidebar-bg); 
    border-top: 1px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
    
    /* Rimosso il vecchio gradiente azzurro per pulizia visiva */
    transition: background-color var(--transition-speed);
}


/* div Pulsante contenitore di testo e immagine */
.TabBtnContainer  {

	align-items: center;
	display: flex;
	gap: 12px;
	flex-direction: row;
	font-size: 12px;
	height: 30px;
	/* min-width: 70px; */
	text-align: center;
	font-size: 12px;
	  /* Transizione morbida per l'hover */
    transition: all var(--transition-speed) ease;
    color: #6b7280; /* Grigio neutro di base */
	
	
}

/* Effetto Hover Speciale (Funzione Dissolvenza/Spostamento) */
.TabBtnContainer:hover {
    background-color: white;
    color: var(--accent); /* Ambra calda */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transform: translateY(-1px);
    cursor: pointer;
}

/* Stile per l'icona e il testo dentro il pulsante */
.TabBtnImg {
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
}




/* ************************************************* */
/* Corpo                                             */
/* ************************************************* */

/* Contenitore della table */
.TabPg_Body {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: auto; /* 'auto' è meglio di 'scroll' per estetica */
    width: 100%;
    background-color: white;
}

/* Elemento Tabella */
.TabPg_Table {
	background-color: #fffffff;
	text-align: left;
	font-size: 13px;
    color: var(--primary-dark);
	border-radius: 5px;
}





/* ************************************************* */
/* Testata della table                               */
/* ************************************************* */

/* --- INTESTAZIONE (Sticky) --- */
.TabPg_Head {
    position: sticky;    top: 0;	/* queste due prop. bloccano la prima riga in alto */
    z-index: 10;
    background-color: #fdfaf6; /* Un crema leggermente più scuro dello sfondo -questa prop. impedisce la visualizzazione delle celle nello scorrimento */
    color: var(--primary-dark);
}

.TabPg_Head th {
    font-weight: 600;
    /* text-transform: uppercase; */
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 12px 8px;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
	/* Bordo verticale a destra di ogni cella TH */
    border-right: 1px solid var(--border-color);
    text-align: left;
}



/* Utilizzare questa regola se si vuole ridimensionare la colonna 
   La regola deve essere posta nella class dell'intestazione th */
.TabPg_Resize {
	resize:horizontal;
	overflow:auto;			
}

/* ************************************************* */
/* Testata e corpo della table                       */
/* ************************************************* */

/* Nasconde una colonna */
.TabPg_ColHide {display: none;}

/* ************************************************* */
/* Corpo della table                                 */
/* ************************************************* */

/* --- CORPO DELLA TABELLA --- */
.TabPg_Table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

/* Effetto Zebra (Righe alternate calde) */
.TabPg_Table tbody tr:nth-child(even) {
    background-color: #fafaf9; 
}


/* Effetto Hover sulla riga (Funzione speciale dissolvenza) */
.TabPg_Table tbody tr:hover {
    background-color: #fff7ed; /* Un arancio/crema molto tenue */
    cursor: default;
}


.TabPg_Table td {
    padding: 10px 8px;
    vertical-align: middle;
	/* Bordo verticale a destra di ogni cella TD */
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);

}




/* Quando si seleziona un radio */
input[type="radio"] {
    accent-color: var(--accent); /* Forza il browser a usare l'ambra per il pallino */
    cursor: pointer;
}


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


/* ATTENZIONE: RICORDARSI CHE QUESTE REGOLE DEVONO ESSERE RIPORTATE SUI FILE CSS SIA DELLA 
   PENNETTA CHE NELLA SEZIONE DEL SERVER */
    
/* ATTENZIONE: il nome TabPg_Table si riferisce ed è usato anche nelle regole comuni dei css in attesa 
   di sistemare definitivamente le regole */
    
 /* Questa è la riga chiave per forzare le larghezze */
.TabPg_Table {table-layout: fixed;}
    
/* Per intestazione: Impedisce al testo di andare a capo */
th {white-space: nowrap;}

/* Per colonne dati: Consente al testo di andare a capo */
td {white-space: normal;}
    
/* stile delle colonne delle <table> */
    
/* colonna selettore <radio> */
/* ATTENZIONE: questa class è utilizzata pure per la funzione JS TabPg_Renum (agiorna l'indice del <radio>. Se si modifica
   il nome deve essere modificato anche nella funzione */
.tb_radi {width: 25px;}                     

/* colonna Cestino */
.tb_trsh {width: 25px;}
.tb_trsh:hover {cursor: pointer;} /* come sopra ma hover */

/* colonna numero di riga: intestazione al centro, valori a dx */
/* ATTENZIONE: questa class è utilizzata pure per la funzione JS TabPg_Renum (agiorna il numero di riga della cella. Se si modifica
   il nome deve essere modificato anche nella funzione */
.tb_riga {width: 40px;}                    
td.tb_riga {text-align: right;}

/* colonne testo NON DIMENSIONABILE : intestazione e valori a sx */
.tb_t040 {width: 40px;}
.tb_t055 {width: 55px;}
.tb_t100 {width: 100px;}
.tb_t150 {width: 150px;}    /* circa 15 - 20 caratteri */
.tb_t220 {width: 220px;}

.tb_data {width: 70px;}

/* colonne testo dimensionabile: dimensionabile e intestazione e valori a sx */
.tb_r150 {width: 150px;}
.tb_r200 {width: 200px;}
.tb_r350 {width: 350px;}
.tb_r450 {width: 450px;}
 th.tb_r450, th.tb_r350, th.tb_r150, th.tb_r200 {resize:horizontal; overflow:auto;} 

/* colonne numeri: intestazione a sx e valori a dx */
.tb_Nimp {width: 110px;}                                /* numero generico */
.tb_Nsml {width: 55px;}                                /* numero generico piccolo (es: giorni*/
.tb_Nali {width: 55px;}                                 /* aliquota */
th.tb_Nimp, tb_Nsml, th.tb_Nali {text-align: left;}
td.tb_Nimp, tb_Nsml, td.tb_Nali {text-align: right;}