/* Stili dedicati alle pagine pubbliche (richiesta accesso, verifica OTP,
   documenti disponibili). Separato da admin.css: qui non servono nav,
   form multi-campo o tabelle editabili, e le esigenze di layout su
   mobile sono diverse (i Direttori/persone autorizzate aprono spesso
   il link OTP da smartphone). Riusa le variabili di admin.css tramite
   :root condiviso — va incluso DOPO admin.css nell'head. */

.public-page {
    padding: 16px;
}

.public-page .card {
    max-width: 900px;
    margin: 24px auto;
    padding: 20px;
}

/* Box "Attualmente registrato...": contenuto informativo vero e proprio,
   non un'annotazione secondaria — non riusa .muted (12px, pensato per
   didascalie/etichette) perché qui la dimensione ridotta e il contrasto
   più basso penalizzano proprio il testo che l'utente è venuto a leggere. */
.public-page .uo-info {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text);
    background: #eef2f6;
    border-left: 3px solid var(--color-primary);
    padding: 10px 12px;
    border-radius: 4px;
}

.site-footer {
    max-width: 900px;
    margin: 24px auto 16px;
    padding: 12px 16px 0;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-muted);
    text-align: center;
}

.site-footer a {
    color: var(--color-text-muted);
}

.public-page h1 {
    font-size: 18px;
    line-height: 1.3;
    /* Nomi U.O. lunghi non devono sfondare la larghezza della card */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --- Tabella documenti: mobile-first, diventa card impilate sotto i
   768px invece di restare una tabella orizzontale compressa --- */

.public-page .doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    /* Fisso, non automatico: con table-layout:auto (il default) il
       browser ridistribuisce la larghezza in base al contenuto di OGNI
       colonna, e una Descrizione lunga può far collassare le colonne
       vicine (Versione, Pubblicato il, Dimensione) fino a farle andare
       a capo lettera per lettera. Con "fixed" ogni colonna rispetta la
       percentuale assegnata sotto, indipendentemente da quanto testo
       contiene — il contenuto va a capo dentro la sua colonna, non la
       fa più restringere o allargare. */
    table-layout: fixed;
}

.public-page .doc-table th,
.public-page .doc-table td {
    border: 1px solid var(--color-border);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    line-height: 1.4;
    /* Nomi file lunghi vanno a capo invece di allargare la colonna */
    overflow-wrap: break-word;
    word-break: break-word;
}

.public-page .doc-table th {
    background: #eef2f6;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
}

/* Larghezze esplicite per colonna (richieste da table-layout:fixed,
   che ignora il contenuto). Ordine colonne come in scarica.php:
   1 Nome file, 2 Versione, 3 Descrizione, 4 Pubblicato il, 5 Dimensione,
   6 Azioni. Sommano 100%. Se in futuro cambia l'ordine o il numero di
   colonne in scarica.php, queste regole vanno aggiornate di conseguenza
   — non si adattano da sole (è il compromesso di usare "fixed"). */
.public-page .doc-table th:nth-child(1),
.public-page .doc-table td:nth-child(1) {
    width: 22%;
}

.public-page .doc-table th:nth-child(2),
.public-page .doc-table td:nth-child(2) {
    width: 8%;
}

.public-page .doc-table th:nth-child(3),
.public-page .doc-table td:nth-child(3) {
    width: 36%;
}

.public-page .doc-table th:nth-child(4),
.public-page .doc-table td:nth-child(4) {
    width: 14%;
}

.public-page .doc-table th:nth-child(5),
.public-page .doc-table td:nth-child(5) {
    width: 10%;
}

.public-page .doc-table th:nth-child(6),
.public-page .doc-table td:nth-child(6) {
    width: 10%;
}

.public-page .doc-table td.doc-actions {
    white-space: nowrap;
    text-align: center;
}

.public-page .doc-table .btn {
    white-space: nowrap;
    padding: 8px 16px;
}

/* Righe alternate leggermente ombreggiate: con più padding le righe
   sono più alte, la zebratura aiuta a seguire la riga senza doverla
   inseguire con lo sguardo su tabelle larghe (Nominativi aggiunti
   incluso, stessa classe .doc-table). */
.public-page .doc-table tbody tr:nth-child(even) {
    background: #f8fafb;
}

/* --- Elenco persone autorizzate: icona colorata per ruolo ---
   Blu (--color-primary) = Direttore/Responsabile, grigio (--color-text-muted)
   = altre figure (Distretto SC, Coordinamento, Funzione organizzativa/
   professionale, nominativi aggiunti da self-service). File PNG veri in
   assets/icons/ — le data-URI SVG inline, pur valide, non venivano
   visualizzate in un test reale su Firefox nonostante fossero applicate
   correttamente (verificato con devtools); un file vero è anche molto
   più facile da diagnosticare (tab Rete: 200 o 404) se qualcosa non va. */

.public-page .persone-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.public-page .persona-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.public-page .persona-icon::before {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.public-page .persona-direttore::before {
    background-image: url('/assets/icons/persona-direttore.png');
}

.public-page .persona-altro::before {
    background-image: url('/assets/icons/persona-altro.png');
}

/* --- Icone tipo file nella colonna Nome file ---
   NIENTE display:flex sulla td: con table-layout:fixed il testo lungo
   va già a capo correttamente dentro la percentuale assegnata alla
   colonna (vedi sopra); flex romperebbe di nuovo l'andare a capo per
   parola (già successo in passato: il testo si spezzava lettera per
   lettera). L'icona resta un inline-block prima del testo, senza
   cambiare il display della cella. */

.public-page .doc-table .file-badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    margin-right: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Forma comune "pagina con angolo piegato", colore diverso per tipo —
   stesso path per tutte, cambia solo il fill, cosí i quattro tipi restano
   visivamente coerenti tra loro invece di stili di icona diversi. */
.public-page .doc-table .file-pdf {
    background-image: url('/assets/icons/file-pdf.png');
}

.public-page .doc-table .file-excel {
    background-image: url('/assets/icons/file-excel.png');
}

.public-page .doc-table .file-word {
    background-image: url('/assets/icons/file-word.png');
}

.public-page .doc-table .file-zip {
    background-image: url('/assets/icons/file-zip.png');
}

.public-page .doc-table .file-altro {
    background-image: url('/assets/icons/file-altro.png');
}

@media (max-width: 640px) {
    .public-page .card {
        margin: 12px auto;
        padding: 14px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Tabella -> card impilate: ogni riga diventa un blocco, ogni cella
       una riga "etichetta: valore" usando data-label già presente nel
       markup (nessuna modifica al contenuto, solo CSS). */
    .public-page .doc-table thead {
        display: none;
    }

    .public-page .doc-table,
    .public-page .doc-table tbody,
    .public-page .doc-table tr,
    .public-page .doc-table td {
        display: block;
        width: auto;
        max-width: none;
    }

    .public-page .doc-table tbody tr:nth-child(even) {
        background: transparent;
    }

    .public-page .doc-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: 12px;
        overflow: hidden;
    }

    .public-page .doc-table td {
        border: none;
        border-bottom: 1px solid var(--color-border);
        padding: 10px 12px;
    }

    .public-page .doc-table td:last-child {
        border-bottom: none;
    }

    .public-page .doc-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        margin-bottom: 3px;
    }

    .public-page .doc-table td.doc-actions {
        text-align: left;
    }

    .public-page .doc-table td.doc-actions::before {
        content: none;
    }

    .public-page .doc-table .btn {
        display: block;
        text-align: center;
    }
}