/**
 * QGIS Custom Tabbed Popup Scroll Bar Fix - CSS
 * Prevents nested scroll bars in custom tabbed popups with Bootstrap tabs
 */

/* Reset any conflicting scroll behaviors */
.leaflet-popup-content-wrapper {
    overflow: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 400px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
    padding-right: 15px !important; /* Reduced padding to keep close button visible */
    box-sizing: border-box !important; /* Ensure padding is included in width */
}

.leaflet-popup-content {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding-right: 10px !important; /* Reduced padding to keep close button visible */
    box-sizing: border-box !important; /* Ensure padding is included in width */
}

/* Custom scrollbar styling for webkit browsers */
.leaflet-popup-content-wrapper::-webkit-scrollbar {
    width: 8px !important;
}

.leaflet-popup-content-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 4px !important;
}

.leaflet-popup-content-wrapper::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 4px !important;
}

.leaflet-popup-content-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

/* Ensure no nested scrollable elements */
.leaflet-popup-content * {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
}

/* Specific fix for common problematic elements */
.leaflet-popup-content div,
.leaflet-popup-content p,
.leaflet-popup-content span,
.leaflet-popup-content table {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Fix for any Bootstrap or custom classes that might add scroll */
.leaflet-popup-content .overflow-auto,
.leaflet-popup-content .overflow-scroll,
.leaflet-popup-content .overflow-y-auto,
.leaflet-popup-content .overflow-y-scroll {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Ensure popup has proper dimensions and spacing */
.leaflet-popup {
    max-width: 410px !important; /* Slightly increased to accommodate padding */
}

/* Fix for any content that might be too wide */
.leaflet-popup-content-wrapper {
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 390px !important; /* Ensure content doesn't exceed wrapper */
}

/* Remove any inline styles that might conflict */
.leaflet-popup-content-wrapper[style*="overflow"] {
    overflow: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.leaflet-popup-content[style*="overflow"] {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Ensure smooth scrolling */
.leaflet-popup-content-wrapper {
    scroll-behavior: smooth !important;
}

/* Fix for Firefox */
.leaflet-popup-content-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: #888 #f1f1f1 !important;
}

/* Additional specificity to override any conflicting styles */
body .leaflet-popup .leaflet-popup-content-wrapper {
    overflow: hidden !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body .leaflet-popup .leaflet-popup-content {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* ===== CUSTOM TABBED POPUP FIXES ===== */

/* Fix for custom tabbed popups */
.custom-popup .popup-content {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding-right: 10px !important; /* Reduced padding to keep close button visible */
    box-sizing: border-box !important;
    max-width: 370px !important; /* Ensure content doesn't block close button */
}

.custom-popup .tab-content {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding-right: 8px !important; /* Reduced padding to tab content */
    box-sizing: border-box !important;
}

.custom-popup .tab-pane {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.custom-popup .popup-section,
.custom-popup .popup-body {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.custom-popup .popup-row {
    overflow: visible !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Ensure Bootstrap tabs don't create scroll contexts */
.custom-popup .nav-tabs {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding-right: 5px !important; /* Minimal padding to tabs */
    box-sizing: border-box !important;
}

.custom-popup .tab-content {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Fix for Bootstrap tab navigation */
.custom-popup .nav-item {
    overflow: visible !important;
}

.custom-popup .nav-link {
    overflow: visible !important;
}

/* Ensure all elements within custom popups are visible */
.custom-popup * {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
}

/* Override any inline styles in custom popups */
.custom-popup [style*="overflow"] {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

.custom-popup [style*="scroll"] {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
}

/* Additional specificity for custom popups */
body .custom-popup .popup-content,
body .custom-popup .tab-content,
body .custom-popup .tab-pane,
body .custom-popup .popup-section,
body .custom-popup .popup-body,
body .custom-popup .popup-row {
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
}

/* Ensure close button is visible and properly positioned */
.leaflet-popup-close-button {
    z-index: 1000 !important;
    position: absolute !important;
    right: 13px !important; /* Position to account for scroll bar width (8px + 5px margin) */
    top: 5px !important;
    width: 20px !important;
    height: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* Alternative positioning for when scroll bar is not present */
.leaflet-popup-content-wrapper:not([style*="overflow-y: auto"]) .leaflet-popup-close-button {
    right: 5px !important; /* Closer to edge when no scroll bar */
}

/* Fix for images and content that might be too wide */
.custom-popup img {
    max-width: 100% !important;
    height: auto !important;
}

.custom-popup .popup-value {
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
}