/* static/css/style.css */

/* Custom Scrollbar for modern dark theme */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #334155; /* slate-700 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569; /* slate-600 */
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}
.animate-slide-up {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.animate-zoom-in {
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Leaflet Map Customizations */
#map {
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #020617; /* slate-950 background */
}

/* Custom Marker CSS */
.custom-marker {
    background-color: #2563eb;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.8);
    transition: transform 0.2s;
}

.custom-marker:hover {
    transform: scale(1.2);
}

.custom-marker.public {
    background-color: #ef4444; /* Red for public cameras */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* Popup Customizations */
.leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 12px;
}
.leaflet-popup-tip {
    background: #1e293b;
}

/* Leaflet Zoom Controls */
.leaflet-bar a {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #334155 !important;
}
.leaflet-bar a:hover {
    background-color: #334155 !important;
    color: #fff !important;
}