/* --- INIZIO CSS hublist_pages (ALLINEAMENTO E SPAZIATURA FINALE a 1500px) --- */

/* 1. UTILITY: TRONCAMENTO TESTO (Cruciale per i Nomi Hub Lunghi) */
.text-truncate {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%; /* Si adatta alla larghezza della colonna */
}

/* 2. LIMITAZIONE e CENTRAGGIO (Larghezze > 992px - Desktop/Tablet) */
@media (min-width: 993px) {
    /* Limita e centra TUTTI i contenitori principali a 1100px */
    .navbar, 
    .navbar-inner,
    .navbar-inverse,
    #page, /* Il contenitore che avvolge il contenuto principale */
    .breadcrumb, 
    footer,
    .container-fluid > * { 
        box-sizing: border-box !important;
        max-width: 1100px !important; 
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important; 
        padding-right: 0 !important;
    }

    /* Forzatura per il contenitore interno della navbar */
    .navbar-inner {
        width: 100% !important;
        padding-left: 20px !important; 
        padding-right: 20px !important; 
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* CORREZIONE CHIAVE: Aggiunge padding interno al contenuto principale (#page) */
    #page {
        padding-top: 20px !important; 
        padding-bottom: 20px !important;
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }

    /* Regolazione dello spazio verticale a 12px (Desktop/Tablet) */
    .hublist-pages th, 
    .hublist-pages td {
        padding: 9px 8px !important; 
        vertical-align: middle; 
        width: auto !important;
    }
    
    /* Input di ricerca su desktop/tablet: larghezza fissa */
    .hublist-search-container .search-hub-input {
        width: 250px !important;
    }
}


/* 3. Stili Base e Globali */
body {
    margin: 0;
    min-width: 150px;
    font-family: 'Play', sans-serif;
    background: #ffffff url('/images/back.png') repeat left top !important;
    background-attachment: fixed !important;
    -webkit-animation-name: enter;
    -moz-animation-name: enter;
    -o-animation-name: enter;
    animation-name: enter;
    -webkit-animation-duration: 1.0s;
    -moz-animation-duration: 1.0s;
    -o-animation-duration: 1.0s;
    animation-duration: 1.0s;
}

/* La tabella si adatta al 100% del suo contenitore (sempre vero) */
.hublist-pages {
    width: 100% !important; 
    max-width: 100% !important; 
    /* Forziamo un min-width su desktop per mantenere le colonne allineate */
    min-width: 650px; 
}

/* APPLICAZIONE CHIAVE: Forziamo tutte le celle (tranne l'header e il footer) a usare una singola linea */
.hublist-pages tbody td {
    /* Assicura che la cella stessa non forzi il wrapping */
    white-space: nowrap; 
}

/* L'elemento che contiene il nome effettivo dell'hub */
.hublist-pages tbody td[data-label="Hub Name"] > a span {
    display: inline-block;
    max-width: 100%; /* Necessario per il troncamento */
    /* Applichiamo il troncamento al testo all'interno del link */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* --- IMPLEMENTAZIONE RESPONSIVE TABLE (SCROLL E CARD VIEW) --- */

/**
 * Contenitore per lo Scroll Orizzontale (Universale per tabelle larghe)
 */
.table-responsive-scroll {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; 
    border: 1px solid #ddd;
}


/* --- RESPONSIVENESS (Media queries per schermi piccoli: <= 992px) --- */

@media (max-width: 992px) {
    /* 4.1 - Responsività contenitori esterni */
    
    .navbar, 
    .navbar-inner,
    .navbar-inverse,
    #page,
    .breadcrumb,
    footer,
    .container-fluid > * {
        max-width: 100% !important;
        margin-left: 0 !important; 
        margin-right: 0 !important;
    }
    
    .navbar-inner {
        padding-left: 10px !important; 
        padding-right: 10px !important;
    }

    #page {
        padding-top: 15px !important; 
        padding-bottom: 15px !important;
        padding-left: 10px !important; 
        padding-right: 10px !important;
    }

    /* 4.2 - Responsività Tabelle Hublist (Card View) */
    
    .hublist-pages {
        min-width: 500px;
    }

    /* Riduzione padding/font per migliore adattamento mobile */
    .hublist-pages th, 
    .hublist-pages td {
        padding: 8px 6px !important; 
        font-size: 0.9em; 
    }
    
    /* Rendiamo i totali leggibili, forzando un minimo di larghezza per la colonna sinistra */
    .hublist-main-data tfoot th,
    .hublist-main-data tfoot td {
        min-width: 90px;
    }
    
    /* SU MOBILE: Rimuoviamo il white-space:nowrap (potrebbe essere necessario) 
       Però, dato che usiamo la view con scroll, lo manteniamo.
    */
    .hublist-pages tbody td[data-label="Hub Name"] {
        white-space: normal; /* Permettiamo il wrapping se la colonna è troppo stretta */
    }
    .hublist-pages tbody td[data-label="Hub Name"] > a span {
        white-space: normal;
        text-overflow: clip; /* Disattiviamo l'ellipsis se permettiamo il wrapping */
    }
}

/* --- CORREZIONE SPECIFICA PER SEARCH BAR MOBILE (<= 600px) --- */
@media (max-width: 600px) {
    
    /* Rimuove il float e imposta il contenitore a larghezza piena per allineare a sinistra */
    .hublist-search-container {
        float: none !important;
        width: 100% !important;
        margin-bottom: 15px;
    }
    
    /* Forza il form ad occupare il 100% del contenitore */
    .hublist-search-container form {
        width: 100%;
    }

    /* Il campo input occupa lo spazio rimanente, escluso il bottone */
    .hublist-search-container .form-group {
        flex-grow: 1;
        width: auto !important;
    }
    
    /* Il campo di testo di ricerca prende tutta la larghezza disponibile */
    .hublist-search-container .search-hub-input {
        width: 100% !important;
    }
}
/* ----------------------------------------------------------- */


/* --- Stili delle Label (Invariati) --- */
.hub-label {
    padding: 2px 5px; 
    border-radius: 3px; 
    font-size: 0.75em; 
    font-weight: bold; 
    display: inline-block; 
    margin-right: 5px;
    line-height: 1; 
}
.hub-online { background-color: #dc3545 !important; color: #ffffff !important; } 
.hub-offline { background-color: #6c757d !important; color: #ffffff !important; }
.hub-new { background-color: #ffc107 !important; color: #343a40 !important; }
.hub-banned { background-color: #000000 !important; color: #ffffff !important; }


/* --- FINE CSS hublist_pages --- */
/* --- INIZIO CSS page_forum.php --- */

/* Base e Fix di Layout */
.page_forum {
    width: 100% !important; 
    box-sizing: border-box;
}
.forum-blocks-container,
.posts-list-container,
.forum-block-card,
.post-block-card,
.reply-card {
    box-sizing: border-box;
}

/* FIX CHIAVE: Responsiveness per immagini e media nei post e nelle risposte (GLOBALE) */
/* Forziamo tutte le immagini, video e iframe a non superare il 100% della larghezza del loro contenitore */
.post-main-content img, 
.post-main-content video, 
.post-main-content iframe,
.post-main-content object,
.reply-body img,
.reply-body video,
.reply-body iframe,
.reply-body object {
    max-width: 100% !important; 
    height: auto !important;
}

/* --- STILI GLOBALI (Link e Footer) --- */
/* Forza tutti i link all'interno del corpo del post e delle risposte ad essere BLU */
.post-main-content a,
.reply-body a,
.reply-card a,
.forum-block-card-link a,
.post-block-link a {
    color: #0000ff !important; 
}
/* Rende i link 'Delete' rossi */
.post-main-content a[href*='action=postdel'], 
.reply-card a[href*='action=repdel'] {
    color: #ff0000 !important;
}

/* 1. STILI PER LISTA FORUM (?do=forum) - MASSIMA COMPATTAZIONE */
.forum-blocks-container {
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    row-gap: 50px; 
    margin-top: 15px;
    margin-bottom: 50px; 
}
.forum-block-column {
    width: calc((100% - 30px) / 3); 
    min-width: 0; 
    padding: 0;
}
.forum-block-card-link {
    text-decoration: none; 
    display: block; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    cursor: pointer;
}
.forum-block-card {
    padding: 4px 8px; 
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 14px;
    height: 100%; 
}
/* Alternanza colori per i forum (alterna tra le categorie) */
.forum-block-card.block-odd {
    background-color: #ffffff;
}
.forum-block-card.block-even {
    background-color: #f6f6f6;
}
.forum-block-card-link:hover {
    transform: scale(1.02); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

/* STILE COMPATTATO PER IL TITOLO DEL GRUPPO */
.forum-block-column .block-group-title {
    font-size: 14px; 
    font-weight: bold;
    color: #333;
    padding: 4px 0; 
    margin: 0 0 10px 0; 
    border-bottom: 1px solid #c0c0c0; 
}


/* COMPONENTI INTERNI CARD PER COMPATTAZIONE */
.forum-block-card .card-title {
    color: #0000ff; 
    font-size: 15px; 
    font-weight: bold;
    margin-top: 0;
}
.forum-block-card .card-description {
    margin-top: 3px; 
    padding: 3px 0; 
    border-top: 1px solid #e0e0e0; 
    font-size: 10.5px; 
    color: #555;
    line-height: 1.2;
}
.forum-block-card .card-stats {
    padding: 4px 0; 
    border-top: 1px solid #e0e0e0; 
    font-size: 11px; 
    color: #333;
}


/* 2. STILI PER LISTA POST (?do=forum&id=...) */
.posts-list-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
}
.post-block-link {
    text-decoration: none;
    display: block;
    /* CORREZIONE PER 4 COLONNE: flex-grow: 0 impedisce l'espansione. La base (calc) forza la larghezza corretta con il gap di 15px. */
    flex: 0 1 calc(25% - 11.25px); 
    min-width: 250px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}
.post-block-card {
    padding: 12px; 
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height: 100%;
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px; 
}
/* Alternanza colori per i post */
.post-block-card.post-odd {
    background-color: #ffffff;
}
.post-block-card.post-even {
    background-color: #f6f6f6;
}
.post-card-title {
    color: #0000ff;
    font-size: 14px; 
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
}
.post-card-meta {
    font-size: 12px;
    color: #333;
    border-top: 1px solid #e0e0e0; 
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
}

/* 3. STILI PER POST SINGOLO (?do=forum&id=...&post=...) */
.post-main-content {
    background-color: #ffffff; 
    border: 1px solid #c0c0c0; 
    padding: 15px;
    border-radius: 4px;
    margin: 0 0 20px 0 !important; 
    line-height: 1.3;
    
    /* FIX CHIAVE 1: Forziamo il wrapping delle parole molto lunghe (es. URL non spezzati) - GLOBALE */
    word-wrap: break-word; 
    overflow-wrap: break-word; 
}

/* FIX CHIAVE 2: Applichiamo il wrapping anche al corpo della risposta - GLOBALE */
.reply-body {
    padding: 0; 
    margin-bottom: 8px; 
    word-wrap: break-word; 
    overflow-wrap: break-word;
}

/* !!! CORREZIONE PROBLEMA DISTANZA ULTRA-AGRESSSIVA E DEFINITIVA!!! */
.post-main-content > p,
.post-main-content > div,
.post-main-content > span,
.post-main-content > h1,
.post-main-content > h2,
.post-main-content > h4,
.post-main-content > br { 
    margin: 0 !important; 
    padding: 0 !important; 
    line-height: 1.0 !important; 
}

/* Regola specifica per l'elemento generato da [head] (che è un <h3>) */
.post-main-content > h3 {
    margin: 0 !important; 
    padding-top: 0 !important;
    padding-bottom: 5px !important; 
    line-height: 1.2 !important; 
}

/* REGOLA SPECIFICA: Rimuove l'ultimo margine inferiore dall'elemento immediatamente prima di una tabella */
.post-main-content > *:has(+ table) { 
    margin-bottom: 0 !important;
}

/* REGOLA SPECIFICA: Rimuove il margine superiore e inferiore dalla tabella stessa */
.post-main-content > table {
    /* RIPRISTINO: Rimuoviamo display: block; e overflow-x: auto; da qui, verranno aggiunti nel media query */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* !!! FINE CORREZIONE PROBLEMA DISTANZA ULTRA-AGRESSSIVA !!! */

/* Footer Meta del Post Principale */
.post-meta-footer {
    margin-top: 15px; 
    padding-top: 5px; 
    border-top: 1px solid #c0c0c0; 
    font-size: small;
}

/* Stili per le Risposte (Replies) */
.reply-card {
    border: 1px solid #c0c0c0;
    margin-top: 15px; 
    border-radius: 4px;
    font-size: 13px;
    padding: 11px; 
}
/* Alternanza colori per le risposte */
.reply-odd {
    background-color: #ffffff;
}
.reply-even {
    background-color: #f6f6f6;
}
.reply-title-header {
    margin-bottom: 8px; 
    padding: 0 0 8px 0; 
    border-bottom: 1px solid #c0c0c0; 
    font-size: 12px;
    font-weight: bold;
    color: #0000ff;
}
.reply-meta-footer {
    padding: 8px 0 0 0; 
    border-top: 1px solid #c0c0c0; 
    font-size: 11px; 
}
.post-reply-prompt {
    border: 1px solid #c0c0c0 !important; 
    margin-top: 15px; 
    padding: 10px; 
    font-size: small; 
    background-color: #ffffff !important; 
    border-radius: 4px;
}

/* 4. STILI PER TABELLE E CODICE DENTRO I POST (BBCODE [table], [code], [pre]) */

/* I blocchi PRE/CODE hanno un overflow auto GIA' da desktop, non devono spezzare le linee */
.post-main-content pre,
.reply-body pre {
    overflow-x: auto; /* Mantiene lo scroll anche su desktop se la linea è lunghissima */
    white-space: pre; 
    word-wrap: normal; 
    
    padding: 10px;
    border: 1px solid #c0c0c0;
    background-color: #f8f8f8;
}

/* Stili base per le celle della tabella (Desktop) */
.post-main-content table,
.reply-card table,
.page_forum table { 
    width: 100%;
    border-collapse: collapse;
    margin: 0 !important; 
    padding: 0 !important; 
}
.post-main-content table tr,
.page_forum table tr {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.0;
}
.post-main-content table th,
.post-main-content table td,
.reply-card table th,
.reply-card table td,
.page_forum table th,
.page_forum table td {
    padding: 2px 4px !important; 
    border: none;
    line-height: 1.0; 
}
/* Alternanza colori */
.post-main-content table tr:nth-child(even), .page_forum table tr:nth-child(even) { background-color: #f6f6f6; }
.post-main-content table tr:nth-child(odd), .page_forum table tr:nth-child(odd) { background-color: #ffffff; }

/* Per le tabelle fuori dai post (es. Last posts), ripristina la spaziatura TH */
.page_forum table:not(.post-main-content table) th {
    padding: 10px !important;
}


/* 5. MEDIA QUERIES (Reattività) */

@media (max-width: 768px) {
    
    /* 5.1 LAYOUT GENERALE */
    .forum-blocks-container {
        flex-direction: column; 
        row-gap: 15px; 
        margin-bottom: 15px; 
    }
    .forum-block-column {
        width: 100%; 
        min-width: 100%; 
        margin-bottom: 10px; 
    }
    .posts-list-container {
        flex-direction: column;
        gap: 10px;
    }
    .post-block-link {
        min-width: 100%;
    }
    .post-main-content {
        padding: 10px;
    }
    .reply-card {
        padding: 10px;
    }
    
    /* 5.2 FIX CHIAVE: SCROLL SOLO PER LE TABELLE SU MOBILE/TABLET */
    .post-main-content table,
    .reply-card table,
    .page_forum table { 
        /* ABILITA SCROLL SULLE TABELLE LARGHE SOLO SU MOBILE */
        display: block; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        /* Rimuoviamo width: 100% per permettere alla tabella di essere più larga del contenitore */
        width: auto; 
        min-width: 100%; /* Forziamo un minimo del 100% */
    }
    
    /* Per evitare che la cella TH/TD si allarghi oltre il necessario quando in modalità block/scroll */
    .post-main-content table th,
    .post-main-content table td,
    .reply-card table th,
    .reply-card table td {
        white-space: nowrap; /* Mantiene la cella su una sola riga (migliore per scroll) */
    }
}
/* --- FINE CSS page_forum.php --- */
/* 🛠️ MODIFICA: Rende TUTTO il testo in grassetto (Richiesta utente precedente) */
body, p, div, span, li, td, a, strong {
	font-weight: bold !important; 
}

/* 🛠️ MODIFICA CRITICA: Forza i link ad essere blu SOLO all'interno dei contenitori di lavoro e card. */
/* Questo esclude i link del menu principale che non dovrebbero avere questi selettori. */
.work-categories-grid a, 
.work-category-card a,
.work-section-block a, /* Copre anche Changelog, Copyright e License */
.work-file-row a,
/* Includiamo anche i link generati nelle descrizioni, commenti, ecc. */
h3.headline a,
.custom-table a,
div[id] a { /* Selettore per ID generico, utile per commenti e descrizioni non bloccate */
	color: blue !important;
}

/* Stili per diminuire la dimensione dei titoli e delle tabelle */
h3.headline {
	/* 🛠️ MODIFICA: Dimensione ridotta da 1.3em a 1.2em */
	font-size: 1.2em; 
	font-weight: bold;
	margin-bottom: 10px;
}

/* Stili per tabelle compatte e zebrate */
.custom-table {
	font-size: small; /* Font ridotto */
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #c0c0c0;
	padding: 11px !important; /* Nuovo padding 11px per il tag table */
}
/* Applica il padding 11px alle celle (th, td) per garantire il risultato visivo */
.custom-table th, .custom-table td {
	padding: 11px !important; /* Nuovo padding 11px */
	border: 1px solid #e0e0e0;
}
.custom-table tr:nth-child(even) {
	background-color: #f0f0f0; /* Grigio chiarissimo */
}
.custom-table tr:nth-child(odd) {
	background-color: #ffffff; /* Bianco */
}
/* Forza la prima riga a essere bianca, utile per le intestazioni */
.custom-table tr:first-child {
	background-color: #ffffff !important;
}

/* 🆕 NUOVI STILI PER LISTA FILE (Richiesta padding 10px e colori alternati) */
.work-file-row {
	border: 1px solid #e0e0e0; /* Bordi sottili tra gli elementi */
	padding: 10px; /* Padding richiesto per separare */
	margin-bottom: 8px; /* Spazio tra una riga e l'altra */
	background-color: #ffffff; /* Default: Bianco */
	font-size: small;
	display: flex; /* Per allineare il contenuto */
	justify-content: space-between;
	align-items: center;
}
/* Colore alternato richiesto: #f6f6f6 (Grigio chiaro) */
.work-file-row:nth-child(even) {
	background-color: #f6f6f6;
}
.work-file-row a {
	text-decoration: none;
}

/* --- STILI PER CARD CATEGORIE (Visualizzazione principale) --- */
.work-categories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 15px;
}

/* 🛠️ MODIFICA: Riduzione in verticale (padding: 18px -> 12px) */
.work-category-card {
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	padding: 12px; 
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 
	background-color: #ffffff; /* Default */
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, box-shadow 0.2s;
	height: 100%;
}

/* 🛠️ MODIFICA: Alternanza colori per Card */
.work-categories-grid .work-category-card:nth-child(even) {
	background-color: #f6f6f6; /* Grigio chiaro */
}
.work-categories-grid .work-category-card:nth-child(odd) {
	background-color: #ffffff; /* Bianco */
}

.work-category-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 8px; /* RIDOTTO */
	margin-bottom: 8px; /* RIDOTTO */
}
/* rimosso color: #1a73e8; perché ora è gestito da a:link globale, ma lo forziamo selettivamente */
.card-header a {
	font-size: 1.6em; 
	font-weight: bold;
	text-decoration: none;
}
.card-icon {
	max-width: 24px;
	max-height: 24px;
	margin-left: 10px;
}
.card-summary {
	flex-grow: 1;
	font-size: 1em;
	color: #555;
	margin-bottom: 8px; /* RIDOTTO */
}
.card-footer {
	margin-top: auto;
	padding-top: 8px; /* RIDOTTO */
	border-top: 1px solid #f0f0f0;
	font-size: small;
	color: #777;
}

/* 🛠️ NUOVO STILE: BLOCCHI SEZIONE (Changelog, Copyright, Pages, Files) */
/* 🛠️ MODIFICA: Riduzione in verticale (padding: 15px -> 11px) */
.work-section-block {
	border: 1px solid #c0c0c0; /* Bordo medio */
	border-radius: 8px; /* Arrotondamento per look 'card' */
	padding: 11px; /* RIDOTTO a 11px come richiesto */
	margin-top: 20px !important; /* Mantenuto */
	background-color: #ffffff; /* Default, gestito dalle classi PHP */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Ombra leggera */
}

/* 🛠️ CLASSI PER ALTERNANZA COLORI */
.work-block-even {
	background-color: #f6f6f6;
}
.work-block-odd {
	background-color: #ffffff;
}

.work-section-block h3.headline {
	margin-top: 0 !important; /* Rimuove il margin-top 15px interno al blocco */
	border-bottom: 2px solid #e0e0e0; /* Separatore sotto il titolo del blocco */
	/* 🛠️ MODIFICA: Riduzione padding/margin per ridurre l'altezza del titolo */
	padding-bottom: 3px; /* Ridotto da 5px */
	margin-bottom: 5px; /* Ridotto da 10px */
	color: #333; /* Colore più scuro per il titolo del blocco */
}
/* Assicura che la lista Pages abbia un margine ridotto all'interno del blocco */
.work-section-block ul {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 25px;
}

/* ❌ RIMOZIONE STILI CHANGELOG-BOX (Per permettere la visualizzazione delle tabelle) */
/* La classe .work-section-block è sufficiente per contenere il contenuto del Changelog. */
/* --- INIZIO CSS page_tools --- */

/* Contenitore Griglia: 3 colonne con spaziamento */
.tools-grid {
    display: grid;
    /* Crea colonne che riempiono automaticamente, minimo 250px di larghezza per evitare colonne troppo strette su mobile */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px; /* Spazio tra le card */
    margin-top: 20px;
}

/* Stile per la singola Card/Elemento */
.tool-item {
    /* Proprietà di base della card */
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s; /* Animazione per l'hover */
    text-align: center;
    font-weight: bold;
}

/* Alternanza colori di sfondo (per applicare la logica bianca/f6f6f6) */
.tools-grid .tool-item:nth-child(odd) {
    background-color: #ffffff; /* Bianco */
}
.tools-grid .tool-item:nth-child(even) {
    background-color: #f6f6f6; /* Grigio chiaro */
}

/* Stile Hover */
.tool-item:hover {
    transform: translateY(-5px); /* Solleva leggermente la card */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Stile per i link all'interno della card */
.tool-item a {
    color: #1a73e8; /* Colore link, tipicamente blu/azzurro */
    text-decoration: none;
    display: block; /* Rende l'intera area della card cliccabile */
    font-size: 1.1em;
}

/* Assicura che i link siano blu */
.tools-grid a {
    color: blue !important;
}

/* --- FINE CSS page_tools --- */
/* inizio css hub_info */

/**
 * 1. Responsività Tabelle (per mobile)
 * Avvolge le tabelle con la classe .hub-table-responsive-wrapper.
 */
.hub-table-responsive-wrapper {
    /* Abilita lo scroll orizzontale se la tabella è più larga del contenitore/schermo */
    width: 100%;
    overflow-x: auto;
    /* Rende lo scroll più fluido sui dispositivi touch di Apple */
    -webkit-overflow-scrolling: touch; 
}

/* Assicura che le tabelle all'interno del wrapper abbiano una larghezza minima, forzando lo scroll */
.hub-table-responsive-wrapper table {
    /* Puoi impostare una larghezza minima se sai che le colonne lo richiedono */
    min-width: 500px; 
}

/* Rimuove l'avvolgimento del testo dalle celle se necessario (da usare con cautela) */
.hub-table-responsive-wrapper th,
.hub-table-responsive-wrapper td {
    /* white-space: nowrap; */ 
}


/**
 * 2. Centratura Logo (classe .hub-logo-container)
 * Centra il logo e assicura che sia responsive (max-width 100%).
 */
.hub-logo-container {
    /* Centra qualsiasi contenuto inline (come l'elemento <a>) */
    text-align: center;
}

.hub-logo-container img {
    /* Sovrascrive max-width e max-height inline (1280px/480px) per essere sempre responsive su mobile */
    max-width: 100% !important; 
    height: auto !important; /* Mantiene le proporzioni */
    /* Assicura la centratura orizzontale dell'immagine stessa (già presente nell'inline style, ma la si ribadisce) */
    display: block;
    margin: 0 auto;
}

/* fine css hub_info */
/* page_news START: Stili per la pagina News (Card Block Style & Responsive) */
/* ========================================= */

/* --- Contenitore Principale della Pagina --- */
.page-card-wrapper {
    max-width: 1100px; 
    margin: 20px auto; 
    padding: 0 10px; 
    box-sizing: border-box; 
}

/* --- Layout Generale --- */
h3.headline {
    font-size: 1.5em; 
    font-weight: 600;
    margin-top: 20px; 
    margin-bottom: 10px; 
    border-bottom: 2px solid #eee;
    padding-bottom: 3px; 
    color: #1a73e8; 
}
.not-found-message, .no-news-message {
    padding: 15px; 
    border: 1px solid #ffab91;
    background-color: #ffe0b2;
    color: #333;
    border-radius: 4px;
    margin-bottom: 15px; 
    text-align: center;
}

/* --------------------------------- */
/* LISTA ARTICOLI (CARD BLOCKS) - 3 COLONNE E MAGGIORE COMPATTEZZA VERTICALE */
/* --------------------------------- */

.news-blocks-container {
    display: grid;
    /* Forzato a 3 colonne */
    grid-template-columns: 1fr 1fr 1fr; 
    /* ✅ RIDOTTO: Gap tra le card */
    gap: 10px; 
    margin-top: 10px;
    /* ✅ RIDOTTO: Margine inferiore */
    margin-bottom: 20px; 
}

.news-block-link {
    text-decoration: none;
    color: inherit; 
    display: block; 
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;
}
.news-block-link:hover {
    text-decoration: none;
    transform: translateY(-3px); 
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); 
}

.news-block-card {
    border: 1px solid #e0e0e0;
    border-radius: 6px; 
    /* ✅ RIDOTTO: Padding interno da 15px a 10px (riduzione altezza verticale) */
    padding: 10px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.block-title {
    font-size: 1.3em; 
    font-weight: 700;
    margin-top: 0;
    /* ✅ RIDOTTO: Margine inferiore */
    margin-bottom: 5px; 
    color: #1a73e8; 
    line-height: 1.2;
}

.block-category {
    /* ✅ RIDOTTO: Margine inferiore */
    margin-bottom: 5px; 
    height: 28px; 
}
.category-icon {
    max-width: 28px; 
    max-height: 28px;
    vertical-align: middle;
}

.block-summary {
    font-size: 0.9em; 
    color: #777;
    margin-top: auto; 
    /* ✅ RIDOTTO: Padding superiore e bordo più leggero */
    padding-top: 5px; 
    border-top: 1px solid #f0f0f0;
}

/* GRASSETTO: Data e Commenti */
.block-summary strong {
    font-weight: 700; 
    color: #555; 
}


/* --------------------------------- */
/* ARTICOLO SINGOLO */
/* --------------------------------- */

.news-article-single {
    padding: 20px; 
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fcfcfc;
    margin-bottom: 20px; 
}
.news-article-single .headline {
    font-size: 1.8em; 
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 15px;
}
.news-article-body {
    font-size: 1em; 
    line-height: 1.5; 
    margin-bottom: 15px; 
    padding-bottom: 15px; 
    border-bottom: 1px dashed #eee;
}
.article-footer-info {
    font-size: 0.85em; 
    color: #999;
    text-align: right;
}

/* GRASSETTO: Autore e Tempo nell'articolo */
.article-author, .article-time {
    font-weight: 700; 
    color: #333; 
}


/* --------------------------------- */
/* COMMENTI */
/* --------------------------------- */

.comment-section-title {
    margin-top: 25px; 
    border-bottom: 2px solid #ddd;
}
.comment-box {
    padding: 10px; 
    margin-bottom: 8px; 
    border-radius: 4px;
    border: 1px solid #eee;
}
.odd-comment { background-color: #f9f9f9; }
.even-comment { background-color: #ffffff; }
.comment-text {
    font-size: 0.95em; 
    line-height: 1.4; 
    margin-bottom: 8px; 
}
.comment-footer-info {
    font-size: 0.8em; 
    color: #999;
    border-top: 1px dashed #eee;
    padding-top: 5px; 
}

/* GRASSETTO: Autore e Tempo nei commenti */
.comment-author, .comment-time {
    font-weight: 700; 
    color: #333; 
}
.delete-link {
    color: #cc0000 !important;
    text-decoration: none;
}
.delete-link:hover {
    text-decoration: underline;
}
.comment-link-box {
    margin-bottom: 8px; 
    padding: 8px; 
    border: 1px dashed #ccc;
    background-color: #f5f5f5;
    text-align: center;
    border-radius: 4px;
}
.no-comments-message {
    padding: 10px; 
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    background-color: #fff;
}
.no-comments-message a {
    color: #1a73e8;
    font-weight: bold;
    text-decoration: none;
}
.no-comments-message a:hover {
    text-decoration: underline;
}

/* --------------------------------- */
/* PAGINAZIONE */
/* --------------------------------- */

.pagination {
    padding: 15px 0 !important; 
    text-align: center !important;
    margin-top: 15px; 
}

.yiiPager {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px; 
}

.yiiPager .page a,
.yiiPager .previous a,
.yiiPager .next a,
.yiiPager .page span,
.yiiPager .previous span,
.yiiPager .next span {
    padding: 10px 10px; 
    display: inline-block; 
    min-width: 30px; 
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px; 
    background-color: white;
    color: #1a73e8;
    text-decoration: none;
    transition: all 0.2s; 
}

.yiiPager .active span {
    background-color: #1a73e8;
    color: white;
    border-color: #1a73e8;
    font-weight: bold;
    border-radius: 4px; 
}
.yiiPager .disabled span {
    color: #ccc;
    cursor: default;
}
.yiiPager a:hover {
    background-color: #f0f0f0;
}


/* --------------------------------- */
/* RESPONSIVE (Mobile First) */
/* --------------------------------- */

@media (max-width: 900px) {
    /* Passa a 2 colonne se lo schermo è meno di 900px */
    .news-blocks-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    /* Regola per il Forum (forzata a 100% su mobile) */
    .forum-card-item {
        width: 100%; 
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .page-card-wrapper {
        margin: 10px 0;
        padding: 0 5px;
    }
    .news-blocks-container {
        /* Passa a 1 colonna se lo schermo è meno di 600px */
        grid-template-columns: 1fr;
        gap: 10px; 
        margin-bottom: 20px; 
    }
    .news-block-card {
        padding: 10px; 
    }
    .block-title {
        font-size: 1.2em;
    }
    .news-article-single {
        padding: 15px; 
    }
    .news-article-single .headline {
        font-size: 1.4em;
    }
    .article-footer-info {
        text-align: left;
    }
}

/* ========================================= */
/* page_news END */
/* ========================================= */

---

## Stili page\_forum (Invariati)

```css
/* ========================================= */
/* page_forum START: Stili per la pagina Forum (Aggiunti per Post Singolo) */
/* ========================================= */

/* --- Stili per la lista dei Forum a Card (Blocchi) --- */
.page_forum {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px; 
    padding: 0;
    margin-bottom: 20px; 
}

/* Stile per la singola Card Item del Forum (2 per riga) */
.forum-card-item {
    flex: 0 0 50%; 
    max-width: 50%; 
    padding: 10px; 
    box-sizing: border-box; 
    /* ✅ Mantenuto il margine inferiore per evitare che le card si tocchino verticalmente */
    margin-bottom: 20px;
}

/* Stile per l'effettivo contenitore della Card del Forum */
.forum-card-item > div {
    background-color: #ffffff; 
    border-radius: 4px; 
    border: 1px solid #c0c0c0; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    height: 100%;
    display: flex; 
    flex-direction: column;
}

/* Effetto al passaggio del mouse (Hover) sul Forum */
.forum-card-item:hover > div {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    transform: translateY(-2px); 
}

/* --- STILI DEDICATI PER LA PAGINA POST SINGOLO (?do=forum&id=...&post=...) --- */

/* 1. Stile per il Post Principale (div id="post-main") - Più Evidente */
#post-main {
    background-color: #e8f4f8 !important; 
    border: 2px solid #0000ff !important;  
    padding: 20px !important;            
    margin-bottom: 25px !important;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 2. Stile per il Contenitore delle Risposte (div id="reply-XXX") - Linee di Separazione Chiare */
div[id^="reply-"] {
    margin-top: 15px !important;
    padding: 15px !important; 
    border: 1px solid #dcdcdc !important; 
    border-left: 5px solid #c0c0c0 !important; 
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
}

/* Stile per il Div di Footer/Info Autore (all'interno di #post-main e #reply-XXX) */
#post-main > div:last-child,
div[id^="reply-"] > div:last-child {
    font-size: 0.85em !important;
    color: #666;
    padding: 5px 0;
    border-top: 1px solid #c0c0c0;
    margin-top: 10px;
}

/* ========================================= */
/* page_forum END */
/* ========================================= */
/* Inizio css page_login */

/* ---------------------------------------------------- */
/* STILI GENERALI E CONTENITORE */
/* ---------------------------------------------------- */
.page_login-container {
    padding: 25px 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    max-width: 100%;
    box-sizing: border-box;
}

.page_login-headline {
    color: #333333;
    font-size: 1.6em;
    font-weight: 400;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.page_login-info {
    margin-bottom: 20px;
}

/* Messaggi di errore */
.page_login-error-box {
    font-weight: 600;
    font-size: 0.9em;
    padding: 10px;
    text-align: center;
    border: 1px solid #d9534f;
    background-color: #f2dede;
    color: #a94442;
    border-radius: 4px;
    margin-bottom: 15px;
}
.required-star {
    color: #d9534f;
    font-weight: bold;
}

/* ---------------------------------------------------- */
/* FORM E INPUT (Input alti e compatti) */
/* ---------------------------------------------------- */
.page_login-form-group {
    margin-bottom: 15px;
}

.page_login-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #555555;
}

.page_login-input {
    /* Larghezza orizzontale compatta su desktop */
    width: 300px;
    max-width: 100%;
    
    /* Altezza verticale (come concordato) */
    padding: 15px 12px; 
    min-height: 48px;
    
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #fcfcfc;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    height: auto !important; 
    line-height: normal;
}

.page_login-input:focus {
    border-color: #3f90d5;
    box-shadow: 0 0 0 2px rgba(63, 144, 213, 0.2);
    background-color: #ffffff;
    outline: none;
}

/* Stile per i campi con errore */
.page_login-error-field {
    border-color: #d9534f !important;
}

/* Stile specifico per l'input CAPTCHA */
.page_login-input-code {
    width: 130px; 
}


/* ---------------------------------------------------- */
/* STILI PULSANTI */
/* ---------------------------------------------------- */
.page_login-actions {
    margin-top: 25px;
}

.page_login-button {
    padding: 14px 18px; 
    border: none;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin-right: 8px;
    box-sizing: border-box;
}

.page_login-button.primary {
    background-color: #3f90d5;
    color: #ffffff !important;
}

.page_login-button.primary:hover {
    background-color: #2e7bbd;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.page_login-button.secondary {
    background-color: #f0f0f0;
    color: #555555 !important;
    box-shadow: none;
    border: 1px solid #cccccc;
    margin-left: 0 !important;
}

.page_login-button.secondary:hover {
    background-color: #e0e0e0;
}

/* ---------------------------------------------------- */
/* RESPONSIVE MOBILE (Sotto 600px) */
/* ---------------------------------------------------- */
@media (max-width: 600px) {
    
    .page_login-container {
        padding: 15px 10px;
        border: none;
        box-shadow: none;
    }

    /* Su mobile, tutti gli input tornano al 100% di larghezza */
    .page_login-input { 
        width: 100%;
    }
    
    .page_login-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .page_login-actions .page_login-button {
        width: 100%;
        margin-right: 0;
    }
}

/* Fine css page_login */
/* --- INIZIO CSS hublist_stats: SCROLL VIEW UNIFICATA E OTTIMIZZATA --- */

/* ===============================
1. Stili Generali e Desktop (> 1024px)
=============================== */

/* Contenitore principale: abilita lo scorrimento orizzontale su tutti i dispositivi */
.hublist-table-container {
    overflow-x: auto; /* Abilita lo scroll orizzontale se necessario */
    margin-bottom: 20px;
    /* MIGLIORAMENTO: Abilita lo scroll inerziale su iOS (più scorrevole) */
    -webkit-overflow-scrolling: touch; 
}

/* Rende le tabelle tutte della stessa larghezza (100% del contenitore) */
table.hublist_stats {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}

/* GRASSETTO: Rende tutti i link all'interno della tabella in grassetto */
table.hublist_stats a {
    font-weight: bold;
}

/* GRASSETTO: Rende TUTTE le celle e le intestazioni in grassetto */
table.hublist_stats th, 
table.hublist_stats td {
    padding: 12px 10px;
    border: 1px solid #eee;
    text-align: left;
    word-break: break-word; /* Permette il 'a capo' su desktop */
    font-weight: bold; 
}

/* Intestazione (TH dentro THEAD) */
table.hublist_stats thead th {
    background-color: #f7f7f7;
    color: #555;
}

/* Stili Nazione/Bandiera */
table.hublist_stats thead th:first-child {
    width: 40px !important; 
    text-align: center !important; 
}

table.hublist_stats tr th:first-child img,
table.hublist_stats tr td:first-child img {
    width: 20px !important; 
    height: auto !important; 
    vertical-align: middle; 
    margin-right: 5px; 
}

table.hublist_stats tr td:first-child {
    text-align: left !important;
    white-space: normal;
}

/* 🚩 RIGHE ALTERNATE: PRIMA BIANCA, POI GRIGIO CHIARO (#f6f6f6) 🚩 */
.hublist_stats.table-striped tbody tr:nth-child(even) {
    background-color: #f6f6f6 !important; /* Riga PARI (2, 4, 6...) è GRIGIA */
}
.hublist_stats.table-striped tbody tr:nth-child(odd) {
    background-color: #ffffff !important; /* Riga DISPARI (1, 3, 5...) è BIANCA */
}

/* =======================================
2. Responsività Mobile & Tablet (<= 1024px)
   FULL-WIDTH SCROLL VIEW PER TUTTE LE TABELLE
======================================= */

@media (max-width: 1024px) { 

    /* 1. INGRANDISCI CONTENITORE: Espande la tabella fino ai bordi dello schermo (100vw). 
       Questo assicura che Hubs with most users sia incluso nello scroll. */
    .hublist-table-container {
        width: 100vw !important; 
        position: relative !important; 
        /* Rimuove i margini della pagina (se definiti) e allinea al bordo dello schermo */
        margin-left: -var(--page-padding, 15px) !important; 
        margin-right: -var(--page-padding, 15px) !important; 
        box-sizing: border-box !important;
    }

    /* 2. FORZA SCROLL: Permette alla tabella di espandersi orizzontalmente */
    table.hublist_stats {
        width: auto; /* Permette alla tabella di essere più larga di 100% */
        min-width: 100%; /* Ma mai più stretta della larghezza dello schermo */
    }

    /* 3. COMPATTAZIONE CHIAVE: Impedisce che il testo vada a capo (TESTO SU UNA SOLA RIGA) */
    table.hublist_stats th,
    table.hublist_stats td {
        white-space: nowrap !important; /* MANTIENE IL TESTO SU UNA SOLA RIGA (ATTIVA LO SCROLL) */
        word-break: normal !important; 
        overflow-wrap: normal !important; 
        
        /* Compattazione Verticale */
        padding: 8px 10px !important; 
        font-size: 0.85em; 
    }
    
    /* Assicura che anche i contenuti interni non vadano a capo */
    table.hublist_stats th *, 
    table.hublist_stats td * {
        white-space: nowrap !important;
    }
}
/* --- FINE CSS hublist_stats --- */
/* --- STILI GENERALI E FORM (Mantenuti per pulizia) --- */
.hublist_findhub-container {
    max-width: 1000px; /* Aumentato per dare più spazio */
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff; /* Sfondo bianco */
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: Arial, sans-serif;
}

.headline {
    color: #444;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1.4em;
}

/* Stili per Input e Pulsanti (Mantenuti) */
form input[type="text"],
form select {
    padding: 7px 9px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 0.9em;
}
.button.hublist_findhub-button {
    padding: 8px 15px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.95em;
    background-color: #5cb85c; /* Verde */
    color: white;
}
.button[name="findhub_cancel"] {
    background-color: #f0ad4e; /* Arancione */
}

/* --- STILI CHIAVE PER LA TABELLA (Ristrutturati) --- */

.table-container-hublist_findhub {
    overflow-x: auto; /* Permette lo scroll orizzontale se necessario */
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tabella-hublist_findhub {
    border-collapse: collapse;
    width: 100%; /* LA TABELLA OCCUPA TUTTA LA LARGHEZZA DISPONIBILE */
    /* RIMOSSA: min-width: 700px; */
}

/* Intestazione della tabella */
.tabella-hublist_findhub thead {
    background-color: #f5f5f5 !important;
    border-bottom: 2px solid #ddd;
}

.tabella-hublist_findhub th {
    font-weight: bold;
    color: #333;
    text-align: left;
    padding: 10px 8px;
    font-size: 0.9em;
}

/* Larghezze specifiche per le colonne per evitare stringimenti */
.tabella-hublist_findhub .col-status-hublist_findhub { width: 70px; text-align: center; }
.tabella-hublist_findhub .col-name-hublist_findhub { min-width: 250px; } /* Nome più spazio */
.tabella-hublist_findhub .col-address-hublist_findhub { width: 150px; }
.tabella-hublist_findhub .col-loc-hublist_findhub { width: 35px; text-align: center; }
.tabella-hublist_findhub .col-users-hublist_findhub { width: 80px; text-align: center; }
.tabella-hublist_findhub .col-share-hublist_findhub { width: 100px; text-align: center; }


/* Righe e celle */
.tabella-hublist_findhub td {
    padding: 8px 8px;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}

.tabella-hublist_findhub tr:nth-child(odd) {
    background-color: #fcfcfc;
}

.tabella-hublist_findhub tr:hover {
    background-color: #e6f7ff !important;
}

/* Stili Status (Mantengono lo stile colorato) */
td span[title="Online"] { background-color: #5cb85c !important; /* Verde */ }
td span[title="Offline"] { background-color: #777 !important; /* Grigio */ }
td span[title="Banned"] { background-color: #d9534f !important; /* Rosso */ }
td span[style*="font-weight: bold;"] { padding: 3px 6px; border-radius: 4px; color: #fff; font-size: 0.8em; }

/* RIMOSSA: Tutta la sezione @media screen and (max-width: 768px) */
/* Stile per il contenitore di codice per posizionare il pulsante */
.bbcode-code-container {
    position: relative; 
}

/* Stile per il pulsante Copy */
.bbcode-copy-button {
    float: right;
    margin: -5px 0 0 10px; 
    padding: 3px 8px;
    border: 1px solid #a0a0a0;
    border-radius: 3px;
    background-color: #f0f0f0;
    color: #333;
    cursor: pointer;
    font-size: 10px;
    font-weight: normal;
    transition: background-color 0.3s, color 0.3s;
}

.bbcode-copy-button:hover {
    background-color: #e0e0e0;
}
/* --- INIZIO CSS hublist_lists (COMPLETO E DEFINITIVO) --- */

/* 1. LAYOUT BASE E SCROLL VIEW */

/* Contenitore principale: essenziale per lo scroll orizzontale */
.hublist-lists-container {
    overflow-x: auto; 
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* Scroll fluido per iOS */
}

/* Stili generali della tabella */
table.hublist-lists-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
    min-width: 500px; /* Forziamo la larghezza minima */
    margin-top: 10px; 
}

/* Stili comuni per TH e TD */
table.hublist-lists-table th,
table.hublist-lists-table td {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    word-break: break-word; /* Permette il "a capo" su desktop */
    font-weight: bold; 
    color: #000000; /* Assicura colore nero per i dati */
}

/* Intestazione */
table.hublist-lists-table thead th {
    background-color: #f7f7f7;
    color: #555;
    white-space: nowrap;
}

/* Larghezza e Allineamento Colonne */
table.hublist-lists-table thead th.col-flag {
    width: 40px; 
    text-align: center;
}
table.hublist-lists-table thead th.col-hubs {
    width: 80px; 
    text-align: center;
}
table.hublist-lists-table thead th.col-downloads {
    width: 100px; 
    text-align: right;
}

/* 2. RIGHE ALTERNATE (Gestione interamente via CSS) */

/* Riga DISPARI (1, 3, 5...) è BIANCA */
table.hublist-lists-table tbody tr:nth-child(odd) {
    background-color: #ffffff; 
}
/* Riga PARI (2, 4, 6...) è GRIGIA CHIARO */
table.hublist-lists-table tbody tr:nth-child(even) {
    background-color: #f6f6f6; 
}


/* 3. STILI LINK E FOOTER */

/* Stili per la cella Link: usa Flexbox per affiancare Link e Pulsante */
table.hublist-lists-table td.col-link-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Stili per il piede (Total Row) */
table.hublist-lists-table tfoot .total-row td {
    background-color: #eeeeee !important; 
    font-weight: bold; 
    color: #000000;
}


/* 4. RESPONSIVITÀ MOBILE (SOLUZIONE DEFINITIVA PER L'OVERFLOW) */
@media (max-width: 768px) {
    
    /* Contenitore: Si espande a tutta la larghezza per gestire lo scroll */
    .hublist-lists-container {
        width: 100vw; 
        position: relative;
        /* Estende il div fino ai bordi dello schermo (recuperando padding esterno) */
        margin-left: -15px !important; 
        margin-right: -15px !important; 
        box-sizing: border-box;
    }
    
    /* CORREZIONE FONT E PADDING PER IL TESTO DESCRITTIVO (H4 e H6) */
    .hublist-lists-container h4,
    .hublist-lists-container h6 {
        white-space: normal !important; /* Forza il testo ad andare a capo */
        padding-left: 15px; /* Riporta il testo all'interno dei bordi visivi */
        padding-right: 15px;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Riduzione Dimensione Font per evitare l'overflow del testo stesso */
    .hublist-lists-container h4 {
        font-size: 1.1em; 
    }
    .hublist-lists-container h6 {
        font-size: 0.95em; 
    }
    
    /* Tabella: Abilita lo scroll. Il testo dentro le celle NON va a capo */
    table.hublist-lists-table th,
    table.hublist-lists-table td {
        white-space: nowrap; /* Chiave: Forza il contenuto su una singola linea per lo scroll */
        padding: 8px 10px !important; 
    }
    
    table.hublist-lists-table {
        min-width: 600px; /* Larghezza minima garantita per lo scroll */
        width: auto;
    }
}
/* --- FINE CSS hublist_lists (COMPLETO E DEFINITIVO) --- */
/* --- INIZIO CSS page_work.php (CORREZIONE CONFLITTI E OTTIMIZZAZIONE MOBILE) --- */

/* 1. Regola generale per prevenire l'overflow da stringhe lunghe */
/* APPLICA QUESTA REGOLA A LIVELLO GENERALE O SOLO AL CONTENUTO DELLA LISTA SE POSSIBILE */
.content-area, 
.content-area p, 
.content-area div, 
.content-area a {
    word-break: break-word; /* Spezza le parole molto lunghe senza spazi */
    overflow-wrap: break-word; /* Aggiunge supporto ai browser moderni */
}

/* === RESPONSIVITÀ MOBILE & TABLET (<= 768px) === */
@media (max-width: 768px) {
    
    /* 2. Intervento SPECIFICO sulle Righe della Lista File (.work-file-row) */
    
    /* Nota: Queste regole NON influenzano le tabelle di hublist_pages.php */

    /* Contenitore principale: assicura che il contenitore della lista file non causi overflow */
    .content-area, .main-content {
        overflow-x: hidden;
    }

    /* Forziamo la riga intera della lista file a essere un blocco verticale */
    .work-file-row {
        display: block !important; /* Rimuove il layout orizzontale (flex) */
        width: 100% !important;
        padding: 10px 0;
        margin-bottom: 5px;
        border-bottom: 1px solid #333; /* Usa un colore scuro se usi il tema nero */
    }

    /* 3. Intervento sulle Colonne all'interno della Riga */
    
    /* Applichiamo le regole di impilamento solo ai DIV diretti all'interno di .work-file-row */
    .work-file-row > div {
        display: block !important; /* Forza ogni colonna a blocco (impilamento verticale) */
        flex-basis: auto !important; /* Ignora l'impostazione di flex-basis */
        min-width: auto !important; /* CHIAVE: Rimuove i min-width aggressivi */
        width: 100% !important; /* Sfrutta tutta la larghezza */
        text-align: left !important;
        padding: 3px 0;
        margin: 0;
        font-size: 0.9em;
    }
    
    /* 4. Manteniamo Etichette e Valori Sulla Stessa Riga Impilata */
    .work-file-row strong {
        display: inline !important; 
        margin-right: 5px;
        font-size: 1em !important;
        white-space: nowrap; 
    }
    
    /* 5. Regole per il Contenitore del Form di Ricerca (Opzionale) */
    /* Se il tuo form di ricerca (hublist-search-container) viene rotto su mobile: */
    .hublist-search-container {
        float: none !important; /* Rimuove float: right */
        width: 100%;
        margin-bottom: 10px;
    }
    /* Se il form usa flex (display: inline-flex nel PHP precedente) */
    .hublist-search-container form {
        display: block !important;
    }
    .hublist-search-container .form-group {
        margin-right: 0 !important;
        margin-bottom: 10px;
        width: 100%;
    }
    .search-hub-input {
        width: 100% !important; /* Fa occupare all'input tutta la larghezza */
    }
    .search-hub-button {
        width: 100%;
        height: auto !important;
    }
}
/* --- FINE CSS page_work.php (CORREZIONE CONFLITTI E OTTIMIZZAZIONE MOBILE) --- */
/* ======================================= */
/* INIZIO CSS MENU (Dark Mode) - CORRETTO PER IL CONFLITTO */
/* ======================================= */

/*
 * STILE: FLAT BORDER (Dark Mode) - LAYOUT CORRETTO
 * La barra è a tutta larghezza (100%), ma il contenuto è limitato e centrato.
 */

.main-navigation {
    clear: both;
    display: block;
    
    /* MODIFICHE CHIAVE: 
       - Rimuovi max-width e margin: auto qui. 
       - L'elemento si estende su tutta la larghezza per non interferire con float.
    */
    width: 100%; 
    margin: 20px 0; /* Spazio solo sopra e sotto */
    
    /* SFONDO E BORDATURA */
    background-color: #1a1a1a; /* Sfondo scuro (quasi nero) */
    border-bottom: 1px solid #333; /* Bordo separatore scuro */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Contenitore interno .wrap: E' questo che centra e limita il contenuto del menu. */
.main-navigation .wrap {
    max-width: 1100px; /* LIMITA A 1100px */
    margin: 0 auto; /* CENTRA IL CONTENUTO ALL'INTERNO DELLA BARRA 100% */
    padding: 0 10px; 
}

.main-navigation .primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; 
    justify-content: center; /* Centra gli elementi del menu */
    flex-wrap: wrap;
}

.main-navigation .menu-item {
    margin: 0;
    padding: 0;
    position: relative;
}

/* Stile per i link */
.main-navigation a {
    display: block;
    padding: 15px 18px; 
    text-decoration: none;
    color: #f0f0f0; 
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    transition: color 0.2s;
}

/* Stato Hover */
.main-navigation a:hover {
    color: #4ac7ff; 
    background-color: transparent;
}

/* Stato Attivo (Pagina Corrente) */
.main-navigation .current-menu-item {
    border-bottom: 3px solid #4ac7ff; 
    margin-bottom: -1px; 
}

.main-navigation .current-menu-item a {
    color: #4ac7ff; 
    background-color: transparent;
    font-weight: 600;
}

/* ======================================= */
/* Adattamento Responsive */
/* ======================================= */

@media screen and (max-width: 1100px) {
    /* Il .main-navigation non ha più un max-width qui perché è a 100% di default. */
    .main-navigation .primary-menu {
        justify-content: space-around; 
    }
}

@media screen and (max-width: 768px) {
    .main-navigation a {
        padding: 12px 10px;
        font-size: 14px;
    }
}

/* ======================================= */
/* FINE CSS MENU (Dark Mode) */
/* ======================================= */
/* Rende il titolo principale (H1) più leggibile, ma mantiene la sua importanza SEO */
h1 {
    font-size: 24px; /* O qualsiasi dimensione tu preferisca, es. 1.8em */
    font-weight: bold;
    margin-top: 15px; /* Spazio sopra */
    margin-bottom: 10px; /* Spazio sotto */
}

/* Rende i sottotitoli (H2) più piccoli dell'H1 */
h2 {
    font-size: 18px; /* O qualsiasi dimensione tu preferisca, es. 1.2em */
    font-weight: normal; /* Rimuove il grassetto se lo desideri */
    color: #333; /* Colore più discreto */
}