/* Universal Programmatic City Guide - Shared Layout & Presentation Styles */

/* Custom Scrollbar Styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark Mode Scrollbar Overrides */
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #1e293b;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #475569;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Leaflet Container Overrides */
.leaflet-container {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc !important;
}
.dark .leaflet-container {
    background-color: #0f172a !important;
}

/* Custom Map Popup Styling */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}
.dark .leaflet-popup-content-wrapper {
    background: #1e293b;
    color: #f1f5f9;
    border: 1px solid #334155;
}
.leaflet-popup-content {
    margin: 8px 12px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.leaflet-popup-tip {
    background: #ffffff;
}
.dark .leaflet-popup-tip {
    background: #1e293b;
}

/* Space body content correctly below the fixed 40px Top bar */
body {
    padding-top: 40px; 
}

/* Custom transitions for Theme Switch */
* {
    transition-property: background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Budget breakdown bar animation speed */
.budget-bar-segment {
    transition: width 0.4s ease-out;
}

/* Floating Share Widget */
@media (min-width: 1024px) {
    .floating-share-sidebar {
        position: fixed;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 40;
    }
}