.piscina-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.legend {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.legend h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.legend-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

.legend-color.libero { background: #4CAF50; }
.legend-color.mattina { background: #FF9800; }
.legend-color.pomeriggio { background: #2196F3; }
.legend-color.intera { background: #9C27B0; }

.admin-note {
    margin-top: 15px;
    padding: 8px 12px;
    background: #fff3cd;
    border-radius: 8px;
    font-size: 13px;
    color: #856404;
}

.controls {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    color: white;
}

.controls label { font-weight: bold; font-size: 16px; }
.controls input { padding: 10px 15px; border: none; border-radius: 8px; font-size: 14px; }
.controls button { background: white; color: #667eea; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: transform 0.2s; }
.controls button:hover { transform: scale(1.05); }

.mappa-posti {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 15px;
    min-height: 400px;
}

.fila {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.fila-label {
    width: 70px;
    font-weight: bold;
    font-size: 20px;
    color: #333;
}

.posti-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.posto {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 18px;
    cursor: pointer;
}

.posto.libero { background: #4CAF50; color: white; }
.posto.libero:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3); }

.posto.mattina { background: #FF9800; color: white; }
.posto.mattina:hover { transform: scale(1.05); }

.posto.pomeriggio { background: #2196F3; color: white; }
.posto.pomeriggio:hover { transform: scale(1.05); }

.posto.intera { background: #9C27B0; color: white; }
.posto.intera:hover { transform: scale(1.05); }

.posto.selected { box-shadow: 0 0 0 3px yellow; transform: scale(1.05); }

.prenotazione-form {
    margin-top: 30px;
    padding: 25px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
}

.form-buttons { display: flex; gap: 15px; margin-top: 25px; }
.btn-prenota { background: #4CAF50; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; }
.btn-annulla { background: #f44336; color: white; border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: bold; }

.loading, .error { text-align: center; padding: 50px; font-size: 18px; }
.loading { color: #667eea; }
.error { color: #f44336; }

#admin-panel {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

#admin-panel h3 { margin-top: 0; color: #dc3545; }
#selected-info { background: #fff3cd; padding: 15px; border-radius: 8px; margin: 15px 0; }
#admin-pass { padding: 8px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; width: 200px; }
#btn-delete { background: #dc3545; color: white; border: none; padding: 8px 20px; border-radius: 5px; cursor: pointer; margin-left: 10px; }
#no-selection { color: #666; padding: 15px; text-align: center; }

@media (max-width: 768px) {
    .posto { width: 45px; height: 45px; font-size: 14px; }
    .fila-label { width: 50px; font-size: 16px; }
    .controls { flex-direction: column; text-align: center; }
    #admin-pass { width: 100%; margin-bottom: 10px; }
    #btn-delete { margin-left: 0; width: 100%; }
}
/* Stili per selezione multipla */
.posto.libero-temp {
    background: #FF9800 !important;
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FF9800;
}

.info-multipla {
    background: #e3f2fd;
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 14px;
}

.posti-badge {
    background: #2196F3;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 12px;
    margin-left: 5px;
}

.posto-selezionato-tag {
    display: inline-block;
    background: #FF9800;
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    margin: 2px;
}

.rimuovi-posto {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 5px;
    font-weight: bold;
}

.rimuovi-posto:hover {
    color: #ffcccc;
}

.btn-prenota-multiplo {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.btn-prenota-multiplo:hover {
    transform: scale(1.02);
}
/* Stili per selezione multipla */
.posto.libero-temp {
    background: #FF9800 !important;
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.info-multipla {
    background: #e3f2fd;
    padding: 12px;
    border-radius: 8px;
    margin-top: 15px;
    font-size: 14px;
}

.posto-selezionato-tag {
    display: inline-block;
    background: #FF9800;
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    margin: 2px;
}

.rimuovi-posto {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 5px;
    font-weight: bold;
}

.rimuovi-posto:hover {
    color: #ffcccc;
}

.btn-prenota-multiplo {
    transition: transform 0.2s;
}

.btn-prenota-multiplo:hover {
    transform: scale(1.02);
}
.posto.selezionato-temp {
    background: #FF9800 !important;
    transform: scale(1.05);
}

.posto-tag {
    display: inline-block;
    background: #FF9800;
    color: white;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    margin: 2px;
}

.rimuovi-posto {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    margin-left: 5px;
    font-weight: bold;
}

.btn-prenota-multiplo:hover {
    opacity: 0.9;
}

#admin-pass {
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 200px;
}

#btn-delete {
    background: #dc3545;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}