/*** style.css ***/

/*** GLOBAL *******************************************************************/

/* titoli */ 
h1 { font-size : 26px ; }

/* stili generali per tutto il corpo */
body {
    font-family: Arial, sans-serif ; 
    display: flex ; /* layout Flexbox */
    justify-content: center ; 
    align-items: center ; 
    height: 100vh ; 
    margin: 0 ; 
    background-color: #f0f0f0 ; 
}

/* stile per .container, classe usata in tutte le pagine tranne la dashboard */
.container {
    background: white ; 
    padding: 20px ; 
    border-radius: 3px ; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) ; 
    text-align: center ; 
    width: 300px ; 
}

/* logo formattato con Google Fonts */
.logo {
    font-size: 30px ; 
    margin-bottom: 20px ; 
}

/* formattazione della parola TIPIW nel logo */
.tipiw {
    font-family: 'Anton', sans-serif ; 
    color: #006566 ; 
}

/* formattazione della parola Shortlink nel logo*/
.shortlink {
    font-family: 'Lobster', cursive ; 
    color: #FFBD00 ; 
}

/* regole condivise per tutti i campi di input e per i pulsanti */
input, button {
	width: 100% ; 
	padding: 10px ; 
	margin: 10px 0 ; 
	border: 1px solid #ddd ; 
	border-radius: 3px ; 
	box-sizing: border-box ; 
	font-weight : 600  ; 
}

/* regole specifiche per i pulsanti */
button {
    background-color: #007BFF ; 
    text-align: center ; 
    color: white ; 
    border: none ; 
    padding: 10px 20px ; 
    margin: 20px ; 
    cursor: pointer ; 
    width: 150px ; 
}

/* colore on hover per i pulsanti*/
button:hover { background-color: #0056b3 ; }


/** index.html ****************************************************************/

/* regole specifiche per la spaziatura dei pulsanti */
.homebutton { padding-bottom: 10px  ; }
.homeButton button { margin: 10px  ; }


/** create_shortlink.php ******************************************************/

/* formattazione modulo di creazione shortlink */
.SLFcontainer {
	text-align : left ;
}

.SLFcontainer label { 
	font-size : 14px ;
	margin-top :10px ;
	display : block ; /* altrimenti non funziona margin */
}

/* stilizzazione del nuovo shortlink generato */
.newShort {
	display: block ; 
	padding: 10px ; 
	background: #f0f0f0 ; 
	margin: 10px ; 
	border: 1px #bbb dotted ; 
	border-radius: 2px ; 
	color: #007BFF ; 
}

/* messaggio di errore nella creazione di uno shortlink */
.error {
    color: red;
    margin: 10px 0;
}

/** sl_info.php ***************************************************************/

/* impostazioni specifiche per il container della tabella di shortURL */
.SLinfoTableContainer {
    background: white ; 
    padding: 20px ; 
    border-radius: 3px ; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) ; 
    text-align: center ; 

    max-width: 80% ; 
}


.info-table {
    width: 100%;
    max-width: 800px;
    border-collapse: collapse;
    margin: 20px auto;
}

.info-table th {
    width: 175px;
    text-align: right;
    padding: 8px;
    border: 1px solid #333;
    background-color: #f2f2f2;
    height : 30px ;
}

.info-table td {
    padding: 8px;
    border: 1px solid #333;
    word-break: break-all;
    heigth : 30px ;
}

.scrollable-cell {
    max-width: calc(100% - 175px);
    overflow-x: auto;
    white-space: nowrap;
}



.shortlink-table {
    width: auto;
    border-collapse: collapse;
    margin: 20px auto;
}

.shortlink-table th,
.shortlink-table td {
    border: 1px solid #666; /* Bordi grigio scuro di 1 pixel */
    height: 40px; /* Altezza delle righe */
    text-align: center; /* Allinea il testo al centro */
    padding: 0; /* Rimuove il padding per adattarsi alla larghezza fissa */
}

.shortlink-table th:not(:first-child),
.shortlink-table td {
    min-width: 55px ;
    max-width: 100px ;
}

.back-button {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

.back-button:hover {
    background-color: #0056b3;
}

.delete-button {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 20px 0;
    cursor: pointer;
    border-radius: 3px;
}

.delete-button:hover {
    background-color: #cc0000;
}

/** dashboard.php *************************************************************/

/* impostazioni specifiche per il container della tabella di shortURL */
.tableContainer {
    background: white ; 
    padding: 20px ; 
    border-radius: 3px ; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) ; 
    text-align: center ; 
    
    /* in particolare, cambia la larghezza rispetto al container delle altre pagine*/
    width: 80% ; 
}

/* elementi dentro il container della pagina dashboard */
.tableContainer button {
	width : auto  ; /* dimensiona i pulsanti in base al loro contenuto */
}

/* i link in questa pagina hanno sottolineatura solo on hover */
.tableContainer a {
	display: inline-block ; 
	margin: 5px 0 ; 
	color: #007BFF ; 
	text-decoration: none ; 
}
.tableContainer a:hover { text-decoration: underline ;  }


/* regole per la tabella shortURL nella dashboard */ 
table {
	width: 100% ; 
	border-collapse: collapse ; 
	margin-top: 20px ; 

	/* fissa le dimensioni della tabella e delle colonne
	 * (usato in combinazione con colgroup) e con le classi "speciali" in fondo a questo file
	 */
	table-layout: fixed ;
}

.tableContainer th, .tableContainer td {
	border: 1px solid #ddd ; 
	padding: 8px ; 
	overflow-x : auto  ; 
	white-space : nowrap  ; 
}
        
th {
    background-color: #f2f2f2 ; 
    text-align: center ; 
}

/* differenzia righe pari e dispari per migliorare UX */
tr:nth-child(even) {
	background-color: #f9f9f9 ; 
	}
	
/* gli URL sono allineati a sinistra, le altre colonne sono centrate (ereditano) */        
.tableContainer td:nth-child(1) , 
.tableContainer td:nth-child(2) {
	text-align : left  ; 
}

/* 
 * classi "speciali" per la spaziatura della tabella in modalità fixed
 * la colonna longU (URL lunghi) prende il 50% della larghezza
 * la colonna shortU (URL brevi) prende il 25% della larghezza
 * le altre colonne hanno dimensione automatica
 */
 
/* longURL */
.longU { width: 60% ;  }
	
/* shortURL */
.shortU { width: 30% ;  }

.uIcon { width : 35px ; }

/* div a scorrimento interni alla tabella */
.tableDiv {
	overflow-x: auto;
	max-width: 100%;
}