/* FILE: style.css (Stili Pubblici - FINALE con Toast) */

















/* --- STILI DI BASE --- */

















body {








    font-family: 'Poppins', sans-serif;








    background-color: #121212; 








    color: #f0f0f0;








    margin: 0;








    padding: 0;








    line-height: 1.6;








    min-height: 100vh;








    display: flex;








    flex-direction: column;








}

















.header {








    background-color: #1f1f1f;








    padding: 20px;








    text-align: center;








    border-bottom: 3px solid #ffcc00;








}

















.header h1 {








    margin: 0 0 5px 0;








    color: #fff;








    font-size: 2.5em;








}

















.header p {








    margin: 0 0 15px 0;








    color: #aaa;








    font-size: 1.1em;








}

















.header-links a {








    color: #ffcc00;








    text-decoration: none;








    margin: 0 15px;








    font-weight: 600;








    transition: color 0.3s;








}

















.header-links a:hover {








    color: #fff;








}

















.container {








    display: flex;








    flex-wrap: wrap; 








    justify-content: center;








    gap: 30px;








    padding: 30px;








    flex-grow: 1;








}

















/* --- CARD E FORM --- */

















.card {








    background-color: #1f1f1f;








    padding: 25px;








    border-radius: 10px;








    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);








}

















.booking-form-column {








    flex: 1 1 350px; 








    min-width: 300px;








}

















.queue-display-column {








    flex: 2 1 500px; 








    min-width: 300px;








}

















.card h2 {








    color: #ffcc00;








    margin-top: 0;








    border-bottom: 2px solid #333;








    padding-bottom: 10px;








    margin-bottom: 20px;








}

















label {








    display: block;








    margin-bottom: 5px;








    margin-top: 15px;








    color: #ccc;








    font-weight: 600;








}

















input[type="text"], 








select {








    width: 100%;








    padding: 10px;








    margin-bottom: 10px;








    border: 1px solid #444;








    border-radius: 5px;








    background-color: #2a2a2a;








    color: #fff;








    box-sizing: border-box;








    font-size: 1em;








}

















.btn-primary {








    background-color: #ffcc00;








    color: #121212;








    border: none;








    padding: 12px 20px;








    border-radius: 5px;








    cursor: pointer;








    font-size: 1.1em;








    font-weight: 700;








    transition: background-color 0.3s;








    width: 100%;








    margin-top: 20px;








}

















.btn-primary:hover {








    background-color: #fff;








}

















/* --- MODAL (Regolamento, Repertorio, Nome Iniziale) --- */

















.modal {








    display: none; 








    position: fixed; 








    z-index: 1000; 








    left: 0;








    top: 0;








    width: 100%; 








    height: 100%; 








    overflow: auto; 








    background-color: rgba(0,0,0,0.8); 








    justify-content: center;








    align-items: center;








}

















.modal-content {








    background-color: #1f1f1f;








    margin: 15% auto;








    padding: 30px;








    border: 1px solid #444;








    width: 90%; 








    max-width: 500px;








    border-radius: 10px;








    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.3);








}

















.modal-content h2 {








    color: #ffcc00;








}

















.close-button {








    color: #aaa;








    float: right;








    font-size: 36px;








    font-weight: bold;








    transition: color 0.3s;








}

















.close-button:hover,








.close-button:focus {








    color: #ffcc00;








    text-decoration: none;








    cursor: pointer;








}

















/* --- REPERTORIO STYLES --- */

















.repertorio-item {








    padding: 10px;








    margin-bottom: 8px;








    border-bottom: 1px solid #333;








    cursor: pointer;








    transition: background-color 0.2s, color 0.2s;








    font-size: 0.95em;








}

















.repertorio-item:hover {








    background-color: #2a2a2a;








    color: #ffcc00;








}

















.repertorio-item strong {








    color: #fff;








}

















.repertorio-item.selected {








    background-color: #ffcc00;








    color: #121212;








    font-weight: bold;








    border-radius: 5px;








}

















.repertorio-item.selected strong {








    color: #121212;








}


























/* --- CODA (TABLE) --- */

















.wait-time-display {








    color: #ffcc00;








    font-weight: 600;








    margin-bottom: 15px;








}

















#queueTable {








    width: 100%;








    border-collapse: collapse;








    margin-top: 15px;








}

















#queueTable th, #queueTable td {








    padding: 12px 8px;








    text-align: left;








    border-bottom: 1px solid #333;








}

















#queueTable th {








    background-color: #333;








    color: #fff;








    font-weight: 700;








    text-transform: uppercase;








    font-size: 0.9em;








}

















#queueTable tbody tr {








    transition: background-color 0.2s;








}

















#queueTable tbody tr:nth-child(even) {








    background-color: #232323;








}

















#queueTable tbody tr:hover {








    background-color: #333;








}

















/* Evidenzia la propria canzone */








.my-song {








    background-color: #004d80 !important; /* Blu scuro */








    border-left: 4px solid #007bff; /* Striscia blu più chiaro */








}








.my-song td {








    color: #fff;








}

















/* Evidenzia chi sta cantando */








.singing-now {








    background-color: #ffcc00 !important; 








    color: #121212 !important; 








    font-weight: bold;








}








.singing-now td {








    color: #121212 !important; 








}


























/* --- TOAST NOTIFICATIONS (TENDINA A SCOMPARSA) --- */

















.toast-notification {








    visibility: hidden; /* Nascosto di default */








    min-width: 250px;








    background-color: #333;








    color: #fff;








    text-align: center;








    border-radius: 5px;








    padding: 16px;








    position: fixed;








    z-index: 1100; /* Sopra i modali */








    left: 50%; /* Centrato orizzontalmente */








    transform: translateX(-50%); /* Corregge la posizione per il centraggio */








    bottom: -50px; /* Inizia fuori dallo schermo */








    font-size: 1em;








    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);








    opacity: 0;








    








    /* Aggiunge una transizione fluida per entrata e uscita */








    transition: bottom 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s;








}

















.toast-notification.success {








    background-color: #28a745; /* Verde per successo */








}

















.toast-notification.error {








    background-color: #dc3545; /* Rosso per errore */








}

















.toast-notification.show {








    visibility: visible;








    opacity: 1;








    bottom: 30px; /* Posizione visibile (risale) */








}


























/* --- MEDIA QUERIES (Per schermi piccoli) --- */

















@media (max-width: 850px) {








    .container {








        flex-direction: column;








        gap: 20px;








        padding: 20px;








    }

















    .booking-form-column, .queue-display-column {








        flex: 1 1 100%;








        max-width: 100%; 








    }








    








    .header h1 {








        font-size: 2em;








    }








}