/* styles.css - Complete Custom Styles for Lisboo */
/* Tailwind already provides a reset – do NOT add * { margin:0; padding:0; } */
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; transition: background 0.3s, color 0.3s; }
.transition-all { transition: all 0.3s ease; }
.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; border-top-color: transparent; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-message { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #1f2937; color: white; padding: 12px 24px; border-radius: 9999px; font-size: 0.875rem; z-index: 9999; animation: fadeInUp 0.3s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #8b5cf6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7c3aed; }
.category-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
#map { z-index: 1; height: 100%; width: 100%; }
.leaflet-container { z-index: 1; }
.password-wrapper { position: relative; }
.toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #9ca3af; }
.toggle-password:hover { color: #8b5cf6; }
/* Mobile tables -> cards */
@media (max-width: 768px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    tr { border: 1px solid #ddd; margin-bottom: 1rem; border-radius: 8px; background: white; }
    td { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #efefef; }
    td:before { content: attr(data-label); font-weight: bold; width: 40%; }
}