/* =========================================
   1. REGOLE GLOBALI E SCROLLBAR
   ========================================= */
html { 
    scroll-behavior: smooth; 
}

/* Scrollbar Globale (visibile in admin-premi, archivio, ecc.) */
::-webkit-scrollbar { 
    width: 8px; 
    height: 8px; 
}
::-webkit-scrollbar-track { 
    background: rgba(31, 41, 55, 0.4); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb { 
    background: rgba(234, 179, 8, 0.6); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: rgba(234, 179, 8, 1); 
}

/* Scrollbar Interna Custom (usata per i div piccoli come la lista candidati) */
.custom-scrollbar::-webkit-scrollbar { 
    display: block; 
    width: 8px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: rgba(31, 41, 55, 0.2); 
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: rgba(234, 179, 8, 0.4); 
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { 
    background: rgba(234, 179, 8, 0.8); 
}

/* Classe utility se vuoi forzare la scomparsa di una scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}


/* =========================================
   2. SLIDE & LAYOUT VOTAZIONI / ARCHIVIO 
   (Unificato prendendo vota.html come base)
   ========================================= */
.snap-container { 
    height: calc(100vh - 5rem); 
    overflow-y: scroll; 
    scroll-snap-type: y mandatory; 
}

.snap-section { 
    height: calc(100vh - 5rem); 
    width: 100%; 
    scroll-snap-align: start; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
}

.glass-card { 
    background: rgba(17, 24, 39, 0.95); 
    border: 1px solid rgba(255,255,255,0.05); 
    backdrop-filter: blur(24px); /* Preso da archivio per un effetto opaco migliore */
}

.title-epic { 
    font-family: 'Arial Black', sans-serif; 
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}

@media (max-width: 1279px) {
    .resize-col {
        flex: none !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}


/* =========================================
   3. SFONDI CUSTOM (Index, Edit, Login)
   ========================================= */
.bg-radial-index {
    background-color: #050505; 
    background-image: radial-gradient(circle at 50% 0%, #1f053a 0%, #050505 50%);
}

.bg-radial-edit {
    background-color: #050505; 
    background-image: radial-gradient(circle at 50% 0%, #1a1a2e 0%, #050505 50%);
}

/* Animazione Login */
.bg-animated { 
    background: linear-gradient(-45deg, #111827, #3b0764, #000000, #1e3a8a); 
    background-size: 400% 400%; 
    animation: gradientBG 15s ease infinite; 
}
@keyframes gradientBG { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

.glass-login { 
    background: rgba(17, 24, 39, 0.7); 
    backdrop-filter: blur(16px); 
}


/* =========================================
   4. BOTTONI ARCHIVIO E TABS ADMIN
   ========================================= */
/* Pulsanti Anni (Archivio) */
.btn-year { 
    background-color: #111827; border: 2px solid #374151; color: #d1d5db; 
    font-weight: 900; font-size: 1.25rem; padding: 0.75rem 2rem; 
    border-radius: 1rem; cursor: pointer; transition: all 0.2s; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}
.btn-year:hover { transform: translateY(-4px); border-color: #eab308; color: #facc15; }
.btn-year.active { border-color: #eab308; color: #facc15; background-color: rgba(234, 179, 8, 0.1); box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); }

.btn-all-time { 
    width: 100%; max-width: 600px; background-color: #111827; border: 2px solid #374151; 
    color: #d1d5db; font-weight: 900; font-size: 1.5rem; padding: 1rem 2rem; 
    border-radius: 1rem; cursor: pointer; transition: all 0.2s; 
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
}
.btn-all-time:hover { transform: translateY(-4px); border-color: #eab308; color: #facc15; }
.btn-all-time.active { border-color: #eab308; color: #facc15; background-color: rgba(234, 179, 8, 0.1); box-shadow: 0 0 20px rgba(234, 179, 8, 0.4); }

.btn-slide { 
    background-color: rgba(17, 24, 39, 0.98); border: 2px solid #eab308; color: #facc15; 
    transition: all 0.3s ease; box-shadow: 0 0 15px rgba(234, 179, 8, 0.1); 
}
.btn-slide:hover { 
    background-color: rgba(234, 179, 8, 0.4); color: #ffffff; border-color: #fde047; 
    text-shadow: 0 0 10px #ffffff; box-shadow: 0 0 30px rgba(234, 179, 8, 0.6); transform: translateY(-2px); 
}
.btn-slide:active { transform: translateY(0); }

/* Tabs Regia (admin-premi) */
.tab-btn { transition: all 0.3s ease; }
.tab-btn.active { background-color: #3b82f6; color: white; border-color: #60a5fa; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }
.tab-btn.active.tab-deploy { background-color: #eab308; border-color: #fde047; box-shadow: 0 0 15px rgba(234, 179, 8, 0.4); color: black; }
.tab-btn.active.tab-live { background-color: #ef4444; border-color: #f87171; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
.tab-btn.active.tab-close { background-color: #991b1b; border-color: #dc2626; box-shadow: 0 0 20px rgba(220, 38, 38, 0.6); }
.tab-btn.inactive { background-color: #1f2937; color: #9ca3af; border-color: #374151; }
.tab-btn.inactive:hover { background-color: #374151; color: white; }


/* =========================================
   5. UTILITY DRAG & DROP E CORSORI
   ========================================= */
.sortable-ghost { opacity: 0.4; transform: scale(0.95); border: 2px dashed #3b82f6; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

.grab-cursor { cursor: grab; }
.grab-cursor:active { cursor: grabbing; }


/* =========================================
   6. STILI SPECIFICI PER MOBILE (Smartphone)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Riduciamo l'ombra "epica" dei titoli */
    /* Su schermi piccoli un'ombra enorme impasta il testo e lo rende illeggibile */
    .title-epic {
        text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
    }

    /* 2. Riduciamo l'arrotondamento delle Card */
    /* Su PC 3rem (48px) è bellissimo, su telefono ruba troppo spazio allo schermo */
    .glass-card {
        border-radius: 1.5rem !important; 
    }

    /* 3. Ottimizziamo lo Scroll nativo Touch */
    /* Su mobile le scrollbar custom a volte sono fastidiose o si sovrappongono.
       Meglio nasconderle e lasciare che l'utente usi lo swipe fluido del telefono */
    .custom-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .custom-scrollbar {
        -ms-overflow-style: none;  /* IE e Edge */
        scrollbar-width: none;     /* Firefox */
    }

    /* 4. Aggiustamento Bottoni Archivio */
    /* Rimpiccioliamo leggermente i bottoni per farli entrare meglio */
    .btn-slide, .btn-all-time {
        font-size: 1.2rem;
        padding: 0.8rem 1rem;
    }

    body {
        padding-bottom: 5rem !important;
    }

    .snap-container, .snap-section { 
        height: calc(100vh - 9rem) !important; 
    }
}