/* Base Customizations on top of Tailwind */

body.login-bg {
    background-color: #052e16; /* eco-950 */
    background-image: 
        radial-gradient(at 0% 0%, rgba(22, 163, 74, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.1) 0px, transparent 50%);
}

.glass-panel {
    background: rgba(17, 24, 39, 0.7); /* gray-900 with opacity */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.input-field {
    transition: all 0.3s ease;
}

.input-field:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
}

/* Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.btn-glow:hover {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

/* Leaflet Map Overrides for Dark Mode */
.leaflet-container {
    background: #111827 !important; /* gray-900 */
    font-family: 'Outfit', sans-serif !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: #1f2937 !important; /* gray-800 */
    color: #f3f4f6 !important; /* gray-100 */
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
    border-radius: 0.75rem !important;
}

.leaflet-popup-content {
    margin: 16px !important;
}

/* Custom Marker CSS classes */
.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -15px 0 0 -15px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
}

.marker-pin.empty { background: #22c55e; } /* green */
.marker-pin.full { background: #ef4444; }  /* red */
.marker-pin.warning { background: #eab308; } /* yellow */

.marker-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -12px 0 0 -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #111827; 
}
::-webkit-scrollbar-thumb {
    background: #374151; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563; 
}