/* ==================================================================
   _genstyle.css - foglio di stile generale del sito (v0.9.30, 30/09/2026)
   ------------------------------------------------------------------
   Tema "terminale": palette reale campionata dallo screenshot del
   terminale del proprietario (umi su Ubuntu/GNOME) - sfondo pagina
   teal del cursore, elenco file menta chiaro, testo teal scurissimo,
   cartelle blu come le directory di ls, link teal, font Segoe UI.
   Niente riquadri arrotondati (richiesta v0.9.3).
   Collegato da _home.php, _view.php, _gestione.php e index.php
   (v0.9: file esterno nella root; v0.9.3: il "_" iniziale lo nasconde
   dall'elenco del file manager; prima lo stile stava incorporato
   nell'<head>; _gestione.php lo collega da v0.9.19 e per il layout
   della sua pagina di registrazione non usa tabelle, v0.9.21;
   v0.9.26: anche i <button> prendono l'aspetto degli input, per i
   due tasti "Scarica/Elimina selezionati" della barra del pannello;
   v0.9.27: quei due tasti sono le icone 💾 e ❌ e anche l'etichetta
   del tasto "Sfoglia..." del pannello (label.gest-sfoglia) prende
   l'aspetto dei pulsanti: il campo file nativo sta nascosto;
   v0.9.28: le due icone 💾 e ❌ NON prendono piu' l'aspetto del
   bottone - nude come il vassoio 📥 e la lente 🔍, le spoglia la
   regola .gest-selezione button dentro _gestione.php, che vince
   anche su :hover e :disabled di qui; i pulsanti scritti e
   l'etichetta "Sfoglia..." restano vestiti come prima;
   v0.9.30 (revisione best practices): :focus-visible disegna il
   fuoco da tastiera coi colori della palette (il click non lo
   accende, la tastiera si'), e chi chiede al sistema meno
   animazioni (prefers-reduced-motion) non vede le transizioni).
   PER CAMBIARE PALETTE: tutti i colori stanno nelle variabili :root.
   Gli !important servono a vincere gli stili inline delle pagine.
   ================================================================== */

:root {
    /* palette del terminale (screenshot term.png) */
    --bg-color:     #0a7276;   /* sfondo pagina (FUORI dall'elenco file): il teal del cursore */
    --container-bg: #c8e8e6;   /* elenco file: il menta chiaro del terminale, come una finestra */
    --outside-text: #eaf6f5;   /* eventuale testo fuori dalle tabelle: chiaro, leggibile sul teal scuro */
    --hover-bg:     #b0d8d5;   /* riga sotto il mouse: menta piu' scuro */
    --header-bg:    #eef5f3;   /* intestazioni/box cerca: bianco del cromo GNOME */
    --border-color: #9cc7c4;   /* bordi e separatori */
    --text-color:   #0a3d40;   /* testo principale: teal scurissimo */
    --text-muted:   #48686a;   /* testo secondario e intestazioni */
    --accent-color: #086a6d;   /* link: il teal del cursore, scurito per il contrasto */
    --accent-hover: #0c8f94;   /* link al passaggio del mouse */
    --folder-color: #206c98;   /* cartelle: il blu delle directory di ls */
    --folder-hover: #2e86b8;   /* cartelle al passaggio del mouse */
    --prompt-color: #206c98;   /* il blu del prompt ~/: freccia attiva e bottoni */
    --prompt-hover: #3485b5;   /* bottoni al passaggio del mouse */
    --prompt-text:  #ffffff;   /* testo bianco sui bottoni blu */
}

/* --- base: sfondo pagina teal del cursore, font Segoe UI (v0.8) --- */
html, body {
    background-color: var(--bg-color) !important;
    color: var(--outside-text) !important;   /* difensivo: il testo reale sta dentro le tabelle */
    font-family: 'Segoe UI', Arial, sans-serif !important;
    margin: 0 !important;
    padding: 20px !important;
}

/* --- l'elenco file: fondo unico come nel terminale, bordo e ombra --- */
table {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 20px auto !important;
    border-collapse: collapse !important;
    background: var(--container-bg) !important;
    border-radius: 0 !important;   /* niente riquadri arrotondati */
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgb(4 36 38 / 0.35) !important;   /* stacca il riquadro dal fondo teal */
    border: 1px solid var(--border-color) !important;
}

/* --- celle e righe uniformi --- */
th, td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-size: 1rem !important;
}

/* riga al passaggio del mouse */
tr:hover {
    background-color: var(--hover-bg) !important;
}

/* --- intestazioni: come la barra/tab del terminale (cromo chiaro) --- */
th, td[colspan] {
    background: var(--header-bg) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;   /* le frecce restano sempre accanto alla scritta (v0.9.2) */
}

/* --- link di file e azioni in teal, come il cursore del terminale --- */
/* NB: font-size SENZA !important, cosi' gli stili inline delle pagine
   (es. "Home Page" a 3em in index.php) continuano a vincere; i nomi
   file usano .file-name qui sotto, piu' specifica */
a, a span {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 1.05rem;
}
a:hover, a:hover span {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}
/* colore unico anche per i link gia' visitati (niente viola) */
a:link, a:visited, a:active {
    color: var(--accent-color) !important;
}

/* --- cartelle in blu e GRASSETTO, come le directory di ls (v0.9.3:
   serve anche lo "span": il nome sta in uno span e la regola generica
   "a span" qui sopra vincerebbe sull'ereditarieta'); v0.9.14: il
   parametro URL si chiama workdir (era DIR_LAVORO) --- */
a[href*="workdir="], a[href*="workdir="] span {
    color: var(--folder-color) !important;
    font-weight: bold !important;
}
a[href*="workdir="]:hover, a[href*="workdir="]:hover span {
    color: var(--folder-hover) !important;
}

/* --- vassoio Zip delle cartelle (v0.9.9): solo l'emoji 📥, link nudo;
   il significato resta nel tooltip (title="Zip della cartella") --- */
a.vassoio-zip {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}
a.vassoio-zip:hover {
    text-decoration: none !important;   /* niente sottolineatura sotto l'emoji */
    opacity: 0.7;
}

/* --- lente Vedi dei file di testo (v0.9.8): solo l'emoji 🔍, link nudo
   che apre _view.php sulla stessa scheda; il significato resta nel
   tooltip (title="Vedi il file") --- */
a.lente-vedi {
    font-size: 1.3rem !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}
a.lente-vedi:hover {
    text-decoration: none !important;
    opacity: 0.7;
}

/* --- icone-link della barra di sopra (v0.9.31): le due emoji 🖥️ (radice
   del sito) e 🏠 (Home/elenco) stavano dentro <a> con <span class="icon">
   e ricevevano la regola generica "a:hover {text-decoration:underline}"
   → si sottolineavano al passaggio del mouse, a differenza di vassoio-zip
   e lente-vedi. Ora seguono lo STESSO modello: niente sottolineatura,
   hover = dissolvenza (opacity:0.7). Allineato alle emoji di _term.php
   (↻ riavvia, 🖥️ esci) del sito dedicato dmautone-shared.
   v0.9.32: la regola è stata resa più specifica (a.icona-link:hover,
   a.icona-link:hover .icon) perché la generica "a:hover span" con
   !important vinceva su "a.icona-link:hover span" con pari !important
   in alcune versioni di browser.                                          --- */
a.icona-link, a.icona-link:hover, a.icona-link:focus,
a.icona-link:hover .icon, a.icona-link:focus .icon {
    color: var(--text-color) !important;
    text-decoration: none !important;
}
a.icona-link:hover, a.icona-link:hover .icon {
    opacity: 0.7;
}

/* --- bottoni: blu come il prompt, testo bianco. Dai bottoni <button>
   (v0.9.26) e dall'etichetta del tasto "Sfoglia..." del pannello
   (v0.9.27: label.gest-sfoglia - il campo file nativo sta nascosto
   in un pixel trasparente e l'etichetta collegata lo apre al click)
   si prende lo stesso aspetto degli input; il carattere e' quello
   della pagina, cosi' Sfoglia... e Carica sono identici; spenti
   (li tiene il JavaScript finche' la selezione e' vuota o la coda
   gira) restano fermi e mezzi trasparenti. Da v0.9.28 le due icone
   💾 e ❌ del pannello sono ESCLUSE da questo vestito: le spoglia la
   regola .gest-selezione button nello stile incorporato di
   _gestione.php, che vince anche sui :hover e :disabled di qui
   (niente fondo blu che si riaccende al passaggio o da spenti) --- */
input[type="button"], input[type="submit"], button, label.gest-sfoglia {
    background-color: var(--prompt-color) !important;
    color: var(--prompt-text) !important;
    border: none !important;
    padding: 6px 14px !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: background 0.2s !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
}
input[type="button"]:hover, input[type="submit"]:hover, button:hover,
label.gest-sfoglia:hover {
    background-color: var(--prompt-hover) !important;
}
input[type="button"]:disabled, input[type="submit"]:disabled, button:disabled {
    background-color: var(--prompt-color) !important;   /* niente effetto al passaggio */
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* --- box di ricerca: come una riga di comando (v0.5: 240px perche' il
   tasto Cerca resti DI FIANCO e il placeholder resti leggibile) --- */
input[name="file"] {
    background: #ffffff !important;   /* entry bianca, come i campi di GNOME */
    border: 1px solid var(--border-color) !important;
    padding: 6px 12px !important;
    border-radius: 0 !important;
    color: var(--text-color) !important;
    caret-color: var(--accent-color) !important;   /* cursore teal, come nel terminale */
    width: 240px !important;
    margin: 0 6px !important;
}
input[name="file"]::placeholder {
    color: var(--text-muted) !important;
}
input[name="file"]:focus {
    border-color: var(--accent-color) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--accent-color) !important;
}

/* --- testo selezionato: il blu d'accento di GNOME --- */
::selection {
    background: #3584e4;
    color: #ffffff;
}

/* --- (v0.9.30) il fuoco da TASTIERA si vede, col colore della
   palette: :focus-visible accende il contorno solo quando il fuoco
   arriva da Tab (il click no), cosi' chi naviga senza mouse sa
   sempre dov'e'; i campi di testo non lo usano perche' il loro fuoco
   e' gia' il bordo teal piu' l'ombra (regole input:focus di sopra
   e del pannello), piu' visibile di un contorno --- */
a:focus-visible, button:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
label.gest-sfoglia:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --- (v0.9.30) chi chiede al sistema MENO ANIMAZIONI (impostazione
   di accessibilita' "riduci movimento") non vede le transizioni:
   bottoni, icone e barra di avanzamento cambiano stato di colpo,
   senza il movimento in mezzo --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
    }
}

/* --- immagini (difensive: oggi le pagine non ne hanno) e icone emoji --- */
img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
    border: 0 !important;
}
.icon {
    font-size: 1.4rem !important;
    line-height: 1 !important;
    display: inline-block;
}
.file-name { font-size: 1.2em !important; }

/* --- titolo della pagina: niente maiuscolo forzato, puo' andare a capo --- */
th.titolo-pagina {
    text-transform: none !important;
    font-size: 1.5rem !important;
    letter-spacing: normal !important;
    color: var(--text-color) !important;
    font-weight: 700 !important;
    white-space: normal !important;
}

/* --- frecce di ordinamento (v0.3): l'attiva e' blu come il prompt --- */
a.freccia {
    color: var(--text-muted) !important;
    font-size: 0.85rem !important;
    padding: 0 1px !important;
}
a.freccia-attiva {
    color: var(--prompt-color) !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
a.freccia:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}

/* --- righe di file/cartelle di altezza fissa (v0.4): i nomi lunghi
   restano su una riga e le celle non collassano. Questa regola vale
   SOLO per le tabelle (l'elenco dei file): il pannello _gestione.php
   per il suo modulo di accesso non usa tabelle (v0.9.21), quindi qui
   non arriva --- */
td {
    height: 56px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* --- barra di fondo (v0.9.15): "Elementi: N (F file, C cartelle)" a
   sinistra e "Ultimo accesso: data ora" a destra, STESSO carattere da
   etichetta per entrambe (maiuscolo, spaziato, 0.85rem, testo smorzato
   su fondo chiaro, come le intestazioni) --- */
td.riepilogo {
    background: var(--header-bg) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* --- radios di ricerca (v0.9.16, STESSA riga della box): dentro uno
   span scelta-ricerca; la cella e' un th e senza queste regole le
   diciture prenderebbero il maiuscolo forzato, le lettere spaziate e
   il corpo 0.85rem delle intestazioni --- */
.scelta-ricerca {
    white-space: nowrap !important;
}
.scelta-ricerca label {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: var(--text-color) !important;
    margin: 0 14px;
    white-space: nowrap;
}