/* Custom scrollbar for webkit - Default (Light Mode) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f3f4f6;
    /* gray-100 */
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    /* gray-300 */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
    /* gray-400 */
}

/* Dark Mode Scrollbar Overrides */
html.dark ::-webkit-scrollbar-track {
    background: #000000;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #333;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Marker Cluster Customization - Default (Light Mode) */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(6, 182, 212, 0.4);
    /* Cyan-500 equivalent, lighter alpha */
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(255, 255, 255, 0.9);
    color: #0891b2;
    /* blue-600 */
    font-weight: bold;
}

/* Dark Mode Marker Cluster Overrides */
html.dark .marker-cluster-small,
html.dark .marker-cluster-medium,
html.dark .marker-cluster-large {
    background-color: rgba(6, 182, 212, 0.6);
}

html.dark .marker-cluster-small div,
html.dark .marker-cluster-medium div,
html.dark .marker-cluster-large div {
    background-color: rgba(0, 0, 0, 0.8);
    color: #22d3ee;
    /* Cyan-400 */
}

/* Minimal Attribution Control */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.7) !important;
    color: #666 !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

html.dark .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #525252 !important;
}

/* Leaflet controls (zoom + custom locate) */
.leaflet-control-zoom a,
.leaflet-control-custom {
    background: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-custom:hover {
    background: #f3f4f6 !important;
    color: #1d4ed8 !important;
}

html.dark .leaflet-control-zoom a,
html.dark .leaflet-control-custom {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

html.dark .leaflet-control-zoom a:hover,
html.dark .leaflet-control-custom:hover {
    background: #334155 !important;
    color: #93c5fd !important;
    border-color: #64748b !important;
}

.leaflet-control-attribution:hover {
    opacity: 1;
}

.leaflet-control-attribution a {
    color: #0891b2 !important;
    text-decoration: none !important;
}

html.dark .leaflet-control-attribution a {
    color: #737373 !important;
}

.leaflet-control-attribution a:hover {
    text-decoration: underline !important;
}

/* Leaflet Controls Transition for Mobile Modal */
/* Removed as per user request */

/* Mobile Footer Safe Area Fix */
/* Mobile Footer Safe Area Fix */
:root {
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
}

footer {
    padding-bottom: calc(0.5rem + var(--safe-area-inset-bottom));
    /* py-2 + safe area */
    position: relative;
    z-index: 30;
    /* Ensure it's above map but below modal if expanded */
}

/* Utility to add bottom safe area padding */
/* Utility to add bottom safe area padding */
.pb-safe {
    padding-bottom: 80px !important;
    /* Fallback for no safe-area support */
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 20px)) !important;
}

/* Light mode overrides for pages that now use slate-first classes */
html:not(.dark) body {
    background: #f8fafc !important;
    color: #111827 !important;
}

html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/50,
html:not(.dark) .bg-slate-800\/70,
html:not(.dark) .bg-slate-700 {
    background-color: #ffffff !important;
}

html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-600 {
    border-color: #e5e7eb !important;
}

html:not(.dark) .text-gray-100 {
    color: #111827 !important;
}

html:not(.dark) .text-gray-200 {
    color: #1f2937 !important;
}

html:not(.dark) .text-gray-400,
html:not(.dark) .text-gray-500 {
    color: #6b7280 !important;
}

html:not(.dark) .text-blue-400,
html:not(.dark) .text-blue-300 {
    color: #2563eb !important;
}