@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================
   RESET E BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #343a40;
    color: #f8f9fa;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

/* ============================================
   TITOLI
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    color: #f8f9fa;
    text-align: center;
}

/* ============================================
   HEADER
   ============================================ */
header {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #343a40;
    width: 100%;
    height: 60px;
    z-index: 1000;
    position: relative;
}

/* ============================================
   ICONE
   ============================================ */
.icon, .logout-icon {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s ease;
}

.logout-icon:hover {
    color: #c02d2d;
}

/* ============================================
   CONTENITORI
   ============================================ */
.container {
    background-color: #343a40;
    padding: 20px;
    border-radius: 5px;
    color: #f8f9fa;
    margin-top: 1.5rem;
}

#previewContainer {
    background-color: #495057;
    color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #6c757d;
}

/* ============================================
   CARD
   ============================================ */
.card {
    background-color: #2d2d2d;
    border: 1px solid #404040;
    border-radius: 5px;
    margin-bottom: 1.5rem;
}

.card-header {
    background: linear-gradient(135deg, #6c757d 0%, #343a40 100%);
    border-bottom: 1px solid #404040;
    color: #fff;
    font-weight: bold;
}

.card-body {
    background: linear-gradient(135deg, #6c757d 0%, #343a40 100%);
    color: #e0e0e0;
    padding: 1.5rem;
}

.card-title {
    color: #f8f9fa;
}

.card-text {
    color: #f8f9fa;
}

.card a {
    color: #0d6efd;
    text-decoration: none;
}

.card a:hover {
    color: #0b5ed7;
    text-decoration: underline;
}

/* ============================================
   FORM INPUT E TEXTAREA
   ============================================ */
.input, .form-control, .form-select {
    background-color: #2d2d2d;
    color: #f8f9fa;
    border: 1px solid #404040;
    border-radius: 4px;
    padding: 10px;
}

.input::placeholder, .form-control::placeholder {
    color: #888;
}

.form-control:focus, .form-select:focus {
    background-color: #363636;
    border-color: #667eea;
    color: #e0e0e0;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-label {
    color: #f8f9fa !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-text {
    color: #adb5bd !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.form-text strong {
    color: #20c997 !important;
    font-weight: 600;
}

.form-text .bi {
    color: #ffc107;
}

small.text-muted {
    color: #adb5bd !important;
}

small.text-muted strong {
    color: #20c997 !important;
}

small.text-muted .bi {
    color: #ffc107 !important;
}

/* ============================================
   PULSANTI
   ============================================ */
.btn-primary {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

.btn-secondary {
    background-color: #6c757d;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-login {
    width: 100%;
    padding: 15px;
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 10px;
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
}

.btn-login:active {
    transform: translateY(-1px);
}

/* ============================================
   TABELLE
   ============================================ */
.table {
    color: #e0e0e0;
}

.table-dark {
    background-color: #2d2d2d;
}

.table-dark thead {
    background-color: #495057;
}

.table-dark tbody tr {
    border-bottom: 1px solid #404040;
}

.table-dark tbody tr:hover {
    background-color: #363636;
}

.table-dark td {
    background-color: #2C3034;
    color: #fff;
}

.table-responsive {
    overflow-x: auto;
}

/* ============================================
   MODALI
   ============================================ */
.modal-content {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border: 1px solid #404040;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal-header {
    background: linear-gradient(135deg, #6c757d 0%, #343a40 100%);
    color: #fff;
    border-bottom: 1px solid #404040;
    border-radius: 10px 10px 0 0;
    padding: 1rem 1.5rem;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-body {
    background-color: #2d2d2d;
    padding: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #e0e0e0;
}

.modal-footer {
    background-color: #2d2d2d;
    border-top: 1px solid #404040;
    padding: 1rem;
}

/* ============================================
   LINK
   ============================================ */
a {
    color: #0d6efd;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #0b5ed7;
    text-decoration: underline;
}

/* ============================================
   BADGE
   ============================================ */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    font-size: 0.85rem;
}

/* ============================================
   PAGINAZIONE
   ============================================ */
.pagination .page-link {
    background-color: #2d2d2d;
    border-color: #404040;
    color: #e0e0e0;
}

.pagination .page-link:hover {
    background-color: #383838;
    border-color: #667eea;
    color: #fff;
}

.pagination .page-item.active .page-link {
    background-color: #667eea;
    border-color: #667eea;
}

/* ============================================
   POPUP / TOAST
   ============================================ */
.popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background-color: #28a745;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: none;
    max-width: 90%;
    word-wrap: break-word;
    text-align: center;
}

.popup.error {
    background-color: #dc3545;
}

.popup.show {
    display: block;
    opacity: 1;
}

.popup-message {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1050;
    display: none;
    padding: 10px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
}

/* ============================================
   CONTEXT MENU
   ============================================ */
.custom-context-menu {
    position: absolute;
    background-color: #495057;
    border: 1px solid #6c757d;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 200px;
}

.custom-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-context-menu ul li {
    padding: 10px 15px;
    cursor: pointer;
    color: #f8f9fa;
    border-bottom: 1px solid #6c757d;
    transition: background-color 0.2s;
}

.custom-context-menu ul li:last-child {
    border-bottom: none;
}

.custom-context-menu ul li:hover {
    background-color: #6c757d;
}

/* ============================================
   STATS CARD (per log_invii.php)
   ============================================ */
.stats-card {
    background: linear-gradient(135deg, #6c757d 0%, #343a40 100%);
    border: none;
    color: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
}

.stats-card h3 {
    font-size: 2rem;
    margin: 0;
}

.stats-card p {
    margin: 0;
    opacity: 0.9;
}

/* ============================================
   UPLOAD IMAGES
   ============================================ */
.drop-zone {
    border: 2px dashed #6c757d;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-zone.dragover {
    background-color: #495057;
    border-color: #0d6efd;
}

.image-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto;
    display: block;
}

/* ============================================
   LOGIN PAGE
   ============================================ */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #121212 0%, #1a1a2e 100%);
    padding: 20px;
}

.login-card {
    background: rgba(33, 37, 41, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeIn 0.8s ease;
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo {
    font-size: 3.5rem;
    color: #0d6efd;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
}

.login-title {
    color: white;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 10px;
    background: linear-gradient(45deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}

.login-footer {
    text-align: center;
    margin-top: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.password-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    z-index: 10;
}

.password-toggle:hover {
    color: white;
}

.form-floating label {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   ALERT
   ============================================ */
.alert {
    border-radius: 10px;
    border: none;
    padding: 15px;
    margin-bottom: 20px;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9) 0%, rgba(187, 45, 59, 0.9) 100%);
    color: white;
}

.alert-info {
    background-color: rgba(13, 110, 253, 0.2);
    color: #0dcaf0;
    border: 1px solid rgba(13, 110, 253, 0.3);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ============================================
   ANIMAZIONI
   ============================================ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
    color: #f8f9fa;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .popup, .popup-message {
        top: 10px;
        font-size: 12px;
        padding: 8px 16px;
        max-width: 95%;
    }
    
    .container {
        padding: 15px;
    }
    
    .card-body .row {
        flex-direction: column;
    }
    
    .card-body .col {
        margin-bottom: 15px;
    }
    
    .table-responsive {
        font-size: 12px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .login-card {
        padding: 30px 20px;
        margin: 10px;
    }
    
    .login-title {
        font-size: 1.8rem;
    }
    
    .login-logo {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    header {
        padding: 8px 15px;
        height: auto;
    }
    
    .container {
        margin-top: 1rem;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-muted {
    color: #adb5bd !important;
}

.message-cell {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-full {
    cursor: pointer;
}

.message-full:hover {
    text-decoration: underline;
}
/* ==========================================================================
   GESTIONE PERSONALE — integrazioni al CSS unificato
   Tutto ciò che segue è aggiunto per questa applicazione.
   Il blocco sopra è il file originale, non modificato.
   ========================================================================== */

/* ---- Layout generale ---------------------------------------------------- */
/* Sovrascrive il #343a40 del foglio unificato: sfondo piu' scuro,
   in tono con la barra di navigazione. */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #2b3035;
}

main {
    padding: 18px 24px;
    width: 100%;
    box-sizing: border-box;
}

/* ---- Pagine a schermo pieno ---------------------------------------------
   Con <body class="app-fissa"> la finestra non scorre: restano fermi la
   barra in alto e il piede, e scorre solo l'area contrassegnata da
   .zona-scroll. Le pagine che non usano questa classe si comportano
   come prima, con lo scorrimento normale del browser.
   -------------------------------------------------------------------------- */
body.app-fissa {
    height: 100vh;
    height: 100dvh;      /* su mobile tiene conto delle barre del browser */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.app-fissa header.topbar { flex: 0 0 auto; }
body.app-fissa footer        { flex: 0 0 auto; margin-top: 0; padding: 10px; }

body.app-fissa main {
    flex: 1 1 auto;
    min-height: 0;       /* senza questo il figlio non puo' rimpicciolirsi */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Il blocco che scorre: prende tutto lo spazio che avanza */
body.app-fissa .zona-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Gli elementi fuori dalla zona scorrevole restano a dimensione fissa */
body.app-fissa main > *:not(.zona-scroll) { flex: 0 0 auto; }

h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }

/* I titoli dentro le pagine sono allineati a sinistra, non al centro
   (la regola originale centra tutti gli h1-h6: qui la limitiamo al login) */
main h1, main h2, main h3, main h4, main h5, main h6 {
    text-align: left;
}

/* ---- Barra di navigazione ----------------------------------------------- */
header.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    /* Un gradino piu' chiara del corpo pagina, cosi' resta distinta */
    background-color: #343a40;
    border-bottom: 1px solid #495057;
    flex-wrap: wrap;
}

header.topbar .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8f9fa;
    font-weight: 600;
    font-size: 1rem;
}

header.topbar .brand a { color: inherit; text-decoration: none; }
header.topbar .brand .bi { color: #0d6efd; font-size: 1.3rem; }

header.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }

header.topbar nav a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #adb5bd;
    text-decoration: none;
    padding: 7px 13px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background-color .2s ease, color .2s ease;
}

header.topbar nav a:hover {
    background-color: #495057;
    color: #fff;
    text-decoration: none;
}

header.topbar nav a.active {
    background-color: #0d6efd;
    color: #fff;
    font-weight: 500;
}

header.topbar nav a.admin-link { border: 1px solid #495057; }
header.topbar .spacer { flex: 1; }

header.topbar .meta {
    color: #adb5bd;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

header.topbar a.logout {
    color: #ea868f;
    font-size: 1.1rem;
    padding: 7px 11px;
}

header.topbar a.logout:hover {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

header.topbar .meta .ruolo-badge {
    background: rgba(13, 110, 253, 0.2);
    color: #0dcaf0;
    font-size: 0.7rem;
    padding: 2px 7px;
    border-radius: 10px;
}

/* ---- Messaggi flash ------------------------------------------------------ */
.flash {
    padding: 11px 14px;
    border-radius: 8px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.88rem;
    max-height: 200px;
    overflow: hidden;
    transition: opacity .5s ease, transform .5s ease,
                margin .5s ease, padding .5s ease, max-height .5s ease;
}

.flash.ok {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.35);
    color: #75b798;
}

.flash.err {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #ea868f;
}

.flash .flash-x {
    margin-left: auto;
    cursor: pointer;
    opacity: .55;
    font-weight: bold;
    background: none;
    border: 0;
    color: inherit;
    font-size: 17px;
    line-height: 1;
    padding: 0 4px;
}

.flash .flash-x:hover { opacity: 1; }

.flash.fading {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- Card ---------------------------------------------------------------- */
/* Nel foglio unificato .card non ha padding: il contenuto arriva a filo del
   bordo. Qui lo aggiungiamo, insieme a un margine laterale che stacca la
   scheda dal bordo della finestra. */
.card {
    padding: 16px 18px;
}

/* Il CSS originale mette un gradiente sul body della card: qui lo togliamo,
   perché su form lunghi e tabelle risulta pesante. Resta sull'intestazione. */
.card-body {
    background: #2d2d2d;
    color: #e0e0e0;
}


.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
}

.card-sezione {
    color: #adb5bd;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 20px 0 10px;
}

.card-sezione:first-child { margin-top: 0; }

/* ---- Griglia dei campi (senza dipendere da Bootstrap .row/.col) ---------- */
.campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.campi .campo-largo { grid-column: 1 / -1; }

.campi label,
.campo label {
    display: block;
    color: #f8f9fa;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 5px;
}

/* ---- Form ---------------------------------------------------------------- */
input[type=text], input[type=number], input[type=password],
input[type=date], input[type=email], select, textarea {
    background-color: #2d2d2d;
    color: #f8f9fa;
    border: 1px solid #404040;
    border-radius: 4px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 0.85rem;
    width: 100%;
}

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=email]:focus, select:focus, textarea:focus {
    background-color: #363636;
    border-color: #0d6efd;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

input::placeholder, textarea::placeholder { color: #888; }

/* ---- Riempimento automatico del browser ---------------------------------
   Quando il browser compila un campo (nome utente, email, password) applica
   uno sfondo azzurro con regole proprie, che vincono su qualsiasi CSS
   normale. L'unico modo per coprirlo e' un'ombra interna piena; il colore
   del testo va imposto con -webkit-text-fill-color, perche' "color" da solo
   viene ignorato.
   -------------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: #f8f9fa;
    -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset;
    box-shadow: 0 0 0 1000px #2d2d2d inset;
    caret-color: #f8f9fa;
    /* Ritarda l'animazione con cui il browser ridipinge lo sfondo */
    transition: background-color 100000s ease-in-out 0s;
}

/* Firefox usa un meccanismo diverso */
input:autofill, select:autofill, textarea:autofill {
    background-color: #2d2d2d !important;
    color: #f8f9fa !important;
    filter: none;
}

/* Il selettore data del browser è nero su nero: lo schiariamo */
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* Campi che devono restare compatti */
input.small, input[type=number].small, .campo-piccolo { width: auto; }

label { font-size: 0.85rem; color: #e0e0e0; }

.check-riga {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: #e0e0e0;
}

input[type=checkbox] { accent-color: #0d6efd; width: 16px; height: 16px; }
.chk-blu   { accent-color: #0d6efd; transform: scale(1.3); }
.chk-verde { accent-color: #20c997; transform: scale(1.3); }
.chk-rosso { accent-color: #dc3545; transform: scale(1.3); }

/* ---- Pulsanti ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 4px;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.87rem;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease;
}

/* I pulsanti sono spesso <a>: senza questi selettori vincerebbe la regola
   generale sui link (a { color: #0d6efd }), rendendo il testo illeggibile
   sopra lo sfondo colorato del pulsante. */
.btn,
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active,
a.btn:focus { color: #fff; text-decoration: none; }

/* Unica eccezione: il pulsante giallo vuole testo scuro */
a.btn-arancio,
a.btn-arancio:link,
a.btn-arancio:visited,
a.btn-arancio:hover,
button.btn-arancio { color: #412402; }

.btn:hover { text-decoration: none; }

.btn-blu     { background: #0d6efd; }
.btn-blu:hover { background: #0b5ed7; }
.btn-verde   { background: #198754; }
.btn-verde:hover { background: #157347; }
.btn-arancio { background: #ffc107; color: #412402; }
.btn-arancio:hover { background: #ffca2c; color: #412402; }
.btn-rosso   { background: #dc3545; }
.btn-rosso:hover { background: #bb2d3b; }
.btn-grigio  { background: #6c757d; }
.btn-grigio:hover { background: #5a6268; }

.btn-piccolo { padding: 3px 9px; font-size: 0.72rem; border-radius: 4px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }

/* ---- Tabelle ------------------------------------------------------------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #404040;
    border-radius: 5px;
}

table.grid {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.8rem;
}

table.grid th {
    background: #495057;
    border: 1px solid #5a6268;
    color: #f8f9fa;
    font-weight: 500;
    padding: 9px 10px;
    text-align: left;
}

table.grid td {
    border: 1px solid #404040;
    background: #2C3034;
    color: #e0e0e0;
    padding: 9px 10px;
}

table.grid tbody tr:nth-child(even) td { background: #363636; }
table.grid tbody tr:hover td { background: #3d4349; }

table.grid tr.role td {
    background: #495057 !important;
    color: #75b798;
    font-weight: 600;
}

/* ---- Badge di stato ------------------------------------------------------ */
.badge-stato {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 500;
}

.badge-attivo   { background: rgba(25, 135, 84, 0.2);  color: #75b798; }
.badge-sospeso  { background: rgba(220, 53, 69, 0.2);  color: #ea868f; }
.badge-admin    { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; }
.badge-utente   { background: rgba(108, 117, 125, 0.3); color: #ced4da; }
.badge-giallo   { background: rgba(255, 193, 7, 0.2);  color: #ffca6a; }

.esito-ok    { color: #75b798; }
.esito-errore { color: #ea868f; }

/* ---- Tab dell'area Amministrazione --------------------------------------- */
.admin-tabs {
    display: flex;
    gap: 3px;
    border-bottom: 1px solid #495057;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.admin-tabs a {
    padding: 9px 15px;
    font-size: 0.85rem;
    color: #adb5bd;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.admin-tabs a:hover { color: #fff; text-decoration: none; }

.admin-tabs a.active {
    color: #fff;
    border-bottom-color: #0d6efd;
    font-weight: 500;
}

/* ---- Footer -------------------------------------------------------------- */
footer {
    color: #6c757d;
    text-align: center;
    font-size: 0.78rem;
    padding: 22px;
    margin-top: 20px;
}

/* ---- Login: integrazioni ------------------------------------------------- */
.login-container { font-family: 'Poppins', sans-serif; }

.login-card .form-floating > .form-control {
    background-color: #2d2d2d;
    border: 1px solid #404040;
    color: #f8f9fa;
    height: 58px;
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

.login-card .form-floating > .form-control:focus {
    background-color: #363636;
    border-color: #0d6efd;
    color: #f8f9fa;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.login-card .form-floating > label {
    color: rgba(255, 255, 255, 0.6);
    padding-left: 0.85rem;
}

.login-card .form-floating > .form-control:focus ~ label,
.login-card .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: rgba(255, 255, 255, 0.75);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* L'autofill del browser riporta lo sfondo bianco: lo neutralizziamo */
.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8f9fa;
    -webkit-box-shadow: 0 0 0 1000px #2d2d2d inset;
    caret-color: #f8f9fa;
}

.login-card .password-toggle {
    z-index: 5;
    padding: 0;
    line-height: 1;
    font-size: 1.05rem;
}

.login-card .login-logo { line-height: 1; }
.login-card .login-title { text-align: center; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    main { padding: 14px 18px; }
    .card { padding: 14px 16px; }
    header.topbar { padding: 8px 12px; gap: 10px; }
}

@media (max-width: 720px) {
    main { padding: 12px 12px; }
    .card { padding: 12px 14px; }

    header.topbar { gap: 8px; }
    header.topbar .brand { width: 100%; }
    header.topbar nav { width: 100%; gap: 4px; }
    header.topbar nav a { flex: 1 1 auto; text-align: center; }
    header.topbar .spacer { display: none; }

    /* 16px evita lo zoom automatico su iOS */
    input[type=text], input[type=number], input[type=password],
    input[type=date], input[type=email], select, textarea { font-size: 16px; }

    .btn { width: 100%; }
    .btn-piccolo { width: auto; }
    .btn-row { flex-direction: column; }

    table.grid { font-size: 0.74rem; }
    table.grid th, table.grid td { padding: 6px 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-logo, .login-card { animation: none; }
    .btn-login:hover { transform: none; }
}

/* ==========================================================================
   NOTA — planning.php, index.php, ferie.php e report.php hanno ciascuno un
   proprio blocco <style> con i colori del tema scuro. Le pagine ancora da
   rifare (dipendenti.php, admin_*.php, invii.php) usano solo le regole
   generali di questo foglio piu' i propri stili inline.
   ========================================================================== */

/* ---- Recupero dei colori scritti inline nelle pagine ---------------------
   Le pagine non ancora rifatte hanno testi con style="color:#666" e simili,
   scelti quando il fondo era chiaro: sul tema scuro diventano illeggibili.
   Questi selettori li intercettano ovunque si trovino. Quando una pagina
   viene rifatta, le sue regole locali hanno comunque la precedenza.
   -------------------------------------------------------------------------- */

/* Note e testi secondari in grigio */
[style*="color:#555"], [style*="color: #555"],
[style*="color:#666"], [style*="color: #666"],
[style*="color:#777"], [style*="color: #777"],
[style*="color:#888"], [style*="color: #888"],
[style*="color:#999"], [style*="color: #999"] {
    color: #adb5bd !important;
}

/* Testo quasi nero: diventa chiaro. Escluso il sottotitolo di stampa,
   che compare solo su carta bianca e deve restare scuro. */
[style*="color:#333"]:not(.sub),
[style*="color: #333"]:not(.sub) { color: #e0e0e0 !important; }

/* Rossi di avviso, pensati per fondo bianco */
[style*="color:#c92a2a"], [style*="color: #c92a2a"],
[style*="color:#8c1d16"], [style*="color: #8c1d16"] { color: #ea868f !important; }

/* Blu scuri dei nomi e dei link */
[style*="color:#1a4a8a"], [style*="color: #1a4a8a"],
[style*="color:#1f3f9e"], [style*="color: #1f3f9e"] { color: #6ea8fe !important; }

/* Ambra scura dei totali */
[style*="color:#c47f00"], [style*="color: #c47f00"] { color: #ffca6a !important; }

/* Verde scuro */
[style*="color:#1f7a3d"], [style*="color: #1f7a3d"] { color: #75b798 !important; }


/* ---- Stampa: i colori inline tornano quelli originali --------------------
   Le regole sopra servono a rendere leggibili i testi sul fondo scuro dello
   schermo. In stampa il fondo e' bianco, quindi vanno disattivate.
   -------------------------------------------------------------------------- */
@media print {
    [style*="color:#555"], [style*="color: #555"],
    [style*="color:#666"], [style*="color: #666"],
    [style*="color:#777"], [style*="color: #777"],
    [style*="color:#888"], [style*="color: #888"],
    [style*="color:#999"], [style*="color: #999"],
    [style*="color:#333"], [style*="color: #333"] { color: #333 !important; }

    [style*="color:#c92a2a"], [style*="color: #c92a2a"],
    [style*="color:#8c1d16"], [style*="color: #8c1d16"] { color: #c92a2a !important; }

    [style*="color:#1a4a8a"], [style*="color: #1a4a8a"],
    [style*="color:#1f3f9e"], [style*="color: #1f3f9e"] { color: #1f3f9e !important; }

    [style*="color:#c47f00"], [style*="color: #c47f00"] { color: #c47f00 !important; }
    [style*="color:#1f7a3d"], [style*="color: #1f7a3d"] { color: #1f7a3d !important; }
}