/* =========================================
   Modern Nature Theme (Consolidated)
   Palette: Sage (#CCD5AE), Olive (#E9EDC9), Cream (#FEFAE0), Wheat (#FAEDCD), Tan (#D4A373)
   ========================================= */

/* Chart Refining Pulse */
.chart-refining {
    animation: refinePulse 2s infinite ease-in-out;
}

@keyframes refinePulse {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* 0. Palette Utilities */
.warming-stripes-accent {
    background: linear-gradient(to left, 
        #383e0a 0%, #7da123 20%, #cde548 40%, #979797 60%, 
        #f1d152 80%, #9a762d 90%, #40362e 100%
    ) !important;
    height: 12px;
    width: 100%;
    display: block;
}

.greenery-accent {
    background: linear-gradient(to right, 
        #1b4332 0%, #2d6a4f 20%, #40916c 40%, #52b788 60%, 
        #74c69d 80%, #b7e4c7 90%, #d8f3dc 100%
    ) !important;
    height: 4px;
    width: 100%;
    display: block;
}

.climate-accent {
    background: linear-gradient(to right, 
        #08306b 6.25%, #08519c 12.5%, #2171b5 18.75%, #4292c6 25%, 
        #6baed6 31.25%, #9ecae1 37.5%, #c6dbef 43.75%, #deebf7 50%,
        #fee0d2 56.25%, #fcbba1 62.5%, #fc9272 68.75%, #fb6a4a 75%, 
        #ef3b2c 81.25%, #cb181d 87.5%, #a50f15 93.75%, #67000d 100%
    ) !important;
    height: 4px;
    width: 100%;
    display: block;
}

/* Fluid base font size: scales from 14px (≤900px) → 18px (≥1800px) */
html {
    font-size: clamp(14px, 0.89vw + 6px, 18px);
}

body, .content-wrapper, .right-side, .main-footer {
    /* Base Gradient: Warm Charcoal -> Mid Stone -> Earthy Grey */
    background: linear-gradient(45deg, #675241 0%, #3d352e 50%, #383e0a 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    position: relative;
    color: #fdfaf0 !important; /* High contrast cream */
    font-family: 'Poppins', sans-serif !important;
    transition: background 1s ease-in-out !important; /* Smooth theme transitions */
}

/* Hide mobile-specific buttons on desktop */
.mobile-close-btn {
    display: none !important;
}

/* Dynamic Theme Backgrounds */
body.climate-theme-active, 
.climate-theme-active .content-wrapper {
   background: linear-gradient(90deg,
  #f7fbff 0%,
  #deebf7 20%,
  #c6dbef 40%,
  #fee8c8 60%,
  #fdd49e 80%,
  #fdbb84 90%,
  #fc8d59 100%
);
    background-attachment: fixed !important;
    --nav-accent-gradient: linear-gradient(to right, 
        #08306b 6.25%, #08519c 12.5%, #2171b5 18.75%, #4292c6 25%, 
        #6baed6 31.25%, #9ecae1 37.5%, #c6dbef 43.75%, #deebf7 50%,
        #fee0d2 56.25%, #fcbba1 62.5%, #fc9272 68.75%, #fb6a4a 75%, 
        #ef3b2c 81.25%, #cb181d 87.5%, #a50f15 93.75%, #67000d 100%
    );
}

body.vegetation-theme-active,
.vegetation-theme-active .content-wrapper {
    background-color: #071810 !important;
    background-image:
        linear-gradient(135deg,
            rgba(61,67,27,0.97)  6.25%, rgba(99,106,45,0.93) 12.5%,
            rgba(51,65,28,0.97) 18.75%, rgba(56,60,26,0.93)  87.5%,
            rgba(61,67,27,0.97) 93.75%, rgba(61,67,27,0.93)  100%
        ),
        url('/leaf-pattern.svg') !important;
    background-size: auto, 240px 320px !important;
    background-repeat: no-repeat, repeat !important;
    background-attachment: fixed !important;
    --nav-accent-gradient: linear-gradient(to right,
         #3d431b 6.25%, #636a2d 12.5%, #729140 18.75%, #95b752 25%,
        #74c69d 31.25%, #b7e4c7 37.5%, #d8f3dc 43.75%, #d8f3dc 50%,
        #d8f3dc 56.25%, #b7e4c7 62.5%, #74c69d 68.75%, #95b752 75%,
        #729140 81.25%, #636a2d 87.5%, #3d431b 93.75%, #3d431b 100%
    );
}

/* Suppress the global crosshatch overlay when vegetation theme is active */
body.vegetation-theme-active::before {
    background-image: none;
    opacity: 0;
}

/* District hover tooltip */
.adm1-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(10, 8, 6, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 7px 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    font-family: 'Poppins', sans-serif;
}
.adm1-popup-name {
    color: #fdfaf0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}
.adm1-popup-country {
    color: rgba(253, 250, 240, 0.6);
    font-size: 0.75rem;
    margin-top: 2px;
}

/* Subtle CSS Tree Pattern Overlay */
/* We target body::before to create the pattern layer */
/* Subtle CSS Tree Pattern Overlay */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    opacity: 0.05; /* Reduced opacity for dark theme */
    background-color: transparent;
    background-image: 
        linear-gradient(315deg, transparent 75%, #4b3d33 0),
        linear-gradient(45deg, transparent 75%, #4b3d33);
    background-position: 0 0, 0 0, 20px 35px, 20px 35px;
    background-size: 40px 80px; 
    pointer-events: none;
}

/* 2. Cards with refined glassmorphism */
.box, .card, .info-box, .small-box, .bslib-card, .content-card {
    background: rgba(10, 8, 6, 0.82) !important; /* Deep black glass */
    backdrop-filter: blur(20px) !important; /* Increased blur */
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
    border-radius: 16px !important;
    color: #fdfaf0 !important;
    margin-bottom: 14px !important;
    padding: 20px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card hover - subtle lift (disabled for map cards to avoid disrupting pointer events) */
.box:hover, .card:hover, .info-box:hover, .small-box:hover, .bslib-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Cards containing maps must not transform — it breaks leaflet hit-testing */
.card:has(.jupyter-widget-area):hover,
.card:has(.widget-map):hover,
.card:has(.maplibregl-map):hover {
    transform: none !important;
}

/* Let MapLibre capture all pointer/wheel events on the map canvas */
.maplibregl-map {
    touch-action: none;
    pointer-events: all !important;
}

/* Ensure the shinywidgets output wrapper doesn't swallow scroll events */
.shiny-bound-output .jupyter-widget-area,
.shiny-bound-output .widget-output {
    overflow: visible !important;
}

/* When a card is in fullscreen, make plotly widgets fill the available height */
.card[data-full-screen="true"] .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 0; /* forces flex child to shrink-to-fill */
}
.card[data-full-screen="true"] .shiny-bound-output,
.card[data-full-screen="true"] .jupyter-widget-area,
.card[data-full-screen="true"] .widget-subarea {
    flex: 1;
    height: 100% !important;
    min-height: 0 !important;
}
.card[data-full-screen="true"] .widget-subarea > div,
.card[data-full-screen="true"] .plotly.html-widget {
    height: 100% !important;
}

/* Headers within glass cards */
.box-header, .card-header {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 20px !important;
    margin: -20px -20px 16px -20px !important;
}

/* Footer within glass cards — slightly lighter than the card body */
.card-footer {
    background: rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 8px 16px !important;
}

/* 3. Sidebar with earthy dark translucency */
.main-sidebar, .left-side {
    background: rgba(32, 28, 24, 0.75) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
}

.main-header .navbar, .main-header .logo, .navbar {
    background: rgba(40, 35, 30, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
    border-top: 4px solid transparent !important;
    position: relative;
}

/* Make main header fixed */
.main-header {
    position: fixed !important;
    width: 100%;
    top: 55px; /* Adjust based on topnav height */
    z-index: 1030;
}

/* Make main sidebar fixed */
.main-sidebar {
    position: fixed !important;
    top: 55px; /* Adjust based on topnav height */
    height: calc(100vh - 55px) !important;
    overflow-y: auto !important;
    z-index: 810;
}

/* Adjust content wrapper to not be hidden behind fixed elements */
.content-wrapper {
    padding-top: 110px !important; /* topnav(55) + header(50) + buffer */
    margin-left: 300px !important; /* Sidebar width */
    transition: margin-left 0.3s ease !important;
}

body.sidebar-collapse .content-wrapper {
    margin-left: 50px !important; /* Collapsed sidebar width */
}

/* Fix topnav and ensure it stays above everything */
div.topnav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    z-index: 1040;
}

/* Push bslib page content below the fixed topnav */
body.bslib-page-fill {
    padding-top: 55px !important;
}

.main-header .navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--nav-accent-gradient, none);
    z-index: 1001;
}

/* Sidebar menu items with crisp micro-interactions */
.sidebar-menu > li > a {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
    font-size: 1.7rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 10px 10px 0;
    margin: 2px 8px 2px 0;
    padding: 12px 16px !important;
}

.sidebar-menu > li > a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fdfaf0 !important;
    transform: translateX(4px);
}

.skin-red .sidebar-menu > li.active > a {
    background: rgba(141, 110, 99, 0.3) !important; /* Reddish earth tone */
    border-left: 3px solid #bc6c25 !important;
    color: #fdfaf0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
}

.skin-red .sidebar-menu > li.active > a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--nav-accent-gradient, #bc6c25); /* Fallback to standard accent brown */
}

.skin-red .sidebar-menu > li:hover > a {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 3px solid rgba(188, 108, 37, 0.5) !important;
    color: #fdfaf0 !important;
}

/* Sidebar icons */
.sidebar-menu > li > a > i {
    color: #bc6c25 !important; /* Earthy orange/brown */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-menu > li > a:hover > i {
    transform: scale(1.1);
}

/* Header Text/Icons */
.main-header .logo, .navbar-brand, .nav-link {
    color: #fdfaf0 !important;
    font-family: 'Poppins', sans-serif !important;
}

/* Sidebar toggle (hamburger) button */
.skin-red .main-header .navbar .sidebar-toggle,
.main-header .sidebar-toggle {
    color: #fdfaf0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    transition: all 0.3s ease !important;
}

.skin-red .main-header .navbar .sidebar-toggle:hover,
.main-header .sidebar-toggle:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(188, 108, 37, 0.5) !important;
    color: #fdfaf0 !important;
}

/* Hamburger toggle button in topnav */
.sidebar-toggle-btn {
    float: left;
    background: none;
    border: none;
    color: #fdfaf0;
    cursor: pointer;
    padding: 0 16px;
    height: 55px;
    font-size: 1.1rem;
    transition: background 0.2s;
    line-height: 55px;
}
.sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.sidebar-toggle-btn svg {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
}

/* Sidebar collapsed / content expanded states */
.sidebar-nav-collapsed {
    display: none !important;
}
.sidebar-nav-expanded {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Sticky Main Sidebar */
.col-sm-2:has(#sidebar_menu) {
    position: sticky !important;
    top: 65px !important;
    height: calc(100vh - 75px) !important;
    overflow-y: auto !important;
    z-index: 1000;
}

/* Top Nav Special */
div.topnav {
  font-family: 'Poppins', sans-serif;
  background-color: rgba(45, 38, 32, 0.5);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
}
.topnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
div.topnav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #fdfaf0;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.0625rem;
  white-space: nowrap;
}

/* Input Styling with micro-interactions */
.form-control, .selectize-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fdfaf0 !important;
    border-radius: 8px !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.form-control:focus, .selectize-input.focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #bc6c25 !important;
    box-shadow: 0 0 0 3px rgba(188, 108, 37, 0.2) !important;
    transform: translateY(-1px);
}

/* Action Buttons with crisp interactions */
.btn-primary {
    background-color: #606c38 !important; /* Forest green */
    border-color: #283618 !important;
    color: #fdfaf0 !important;
    font-weight: 600;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
    background-color: #bc6c25 !important; /* Earthy orange on hover */
    border-color: #606c38 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6, .h1, .h2 {
    color: #fdfaf0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: 'Poppins', sans-serif !important;
}
h1, .h1 { font-size: clamp(1.5rem, 2.2vw, 2.5rem); }
h2, .h2 { font-size: clamp(1rem, 1.7vw, 1rem); }
h3       { font-size: clamp(0.8rem, 1.4vw, 0.8rem); }
h4       { font-size: clamp(0.8rem, 1.15vw, 0.8rem); }
h5, h6   { font-size: clamp(0.8rem, 1vw, 0.8rem); }
p, div, span, label, li {
    font-family: 'Poppins', sans-serif;
}

/* =========================================
   Legacy/Preserved Styles (Carousel & Utils)
   ========================================= */

/* Carousel Styling */
.carousel-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 0;
}
.image-carousel {
    position: relative;
    background: rgba(248, 239, 234, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
    transition: all 0.3s ease;
}
.image-carousel:hover {
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3);
    transform: translateY(-2px);
}
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
}
.carousel-slide.active {
    opacity: 1;
}
.carousel-image {
    width: 100%;
    height: 70%;
    object-fit: cover;
    display: block;
}
.carousel-caption {
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.carousel-caption h4 {
    margin: 0 0 10px 0;
    color: #606c38;
    font-weight: 600;
    font-size: 1.2em;
}
.carousel-caption p {
    margin: 0;
    color: #333;
    font-size: 0.95em;
    line-height: 1.4;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(96, 108, 56, 0.8);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.carousel-btn:hover {
    background: rgba(96, 108, 56, 1);
    transform: translateY(-50%) scale(1.1);
}
.carousel-btn-prev {
    left: 15px;
}
.carousel-btn-next {
    right: 15px;
}
.carousel-dots {
    text-align: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.dot {
    height: 12px;
    width: 12px;
    margin: 0 5px;
    background-color: rgba(96, 108, 56, 0.4);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}
.dot:hover {
    background-color: rgba(96, 108, 56, 0.7);
    transform: scale(1.2);
}
.dot.active {
    background-color: rgba(96, 108, 56, 1);
    transform: scale(1.3);
}

/* Sidebar collapse styles - show icons only when collapsed */
body.sidebar-collapse .main-sidebar,
body.sidebar-mini.sidebar-collapse .main-sidebar {
  width: 120px !important;
  min-width: 120px !important;
}
body.sidebar-collapse .sidebar-menu,
body.sidebar-mini.sidebar-collapse .sidebar-mini.sidebar-collapse .sidebar-menu {
  display: block !important;
}
body.sidebar-collapse .sidebar-menu > li > a,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
  padding: 15px 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  display: block !important;
  position: relative;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.sidebar-collapse .sidebar-menu > li > a > span,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
  display: none !important;
  opacity: 0 !important;
}
body.sidebar-collapse .sidebar-menu > li > a > i,
body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i {
  font-size: 1.375rem !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  width: auto !important;
  display: block !important;
  text-align: center !important;
}
body.sidebar-collapse .main-sidebar .sidebar {
  overflow: visible !important;
}
body.sidebar-collapse .main-header .logo .logo-lg,
body.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg,
body.sidebar-collapse .main-header .logo,
body.sidebar-mini.sidebar-collapse .main-header .logo,
body.sidebar-collapse .main-header .navbar-brand,
body.sidebar-mini.sidebar-collapse .main-header .navbar-brand {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}
body.sidebar-collapse .main-header .logo *,
body.sidebar-mini.sidebar-collapse .main-header .logo *,
body.sidebar-collapse .main-header .navbar-brand *,
body.sidebar-mini.sidebar-collapse .main-header .navbar-brand * {
  display: none !important;
}
body.sidebar-collapse .main-header .logo,
body.sidebar-mini.sidebar-collapse .main-header .logo {
  width: 120px !important;
  max-width: 120px !important;
}
body.sidebar-collapse .main-header .logo .logo-mini,
body.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
  display: block !important;
}
body.sidebar-collapse .content-wrapper,
body.sidebar-mini.sidebar-collapse .content-wrapper {
  margin-left: 120px !important;
  transition: margin-left 0.3s ease !important;
}

/* Special fix for bslib sidebars to be sticky within cards */
.bslib-sidebar-layout .sidebar {
    position: sticky !important;
    top: 120px !important; /* topnav (55) + header (50) + padding */
    height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    background: rgba(246, 245, 243, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(160, 120, 80, 0.3) !important;
}

/* Dark text inside sidebar for readability on beige background */
.bslib-sidebar-layout .sidebar h1,
.bslib-sidebar-layout .sidebar h2,
.bslib-sidebar-layout .sidebar h3,
.bslib-sidebar-layout .sidebar h4,
.bslib-sidebar-layout .sidebar p,
.bslib-sidebar-layout .sidebar label,
.bslib-sidebar-layout .sidebar span {
    color: #1a1208 !important;
    text-shadow: none !important;
}

/* =========================================
   Inner Bslib Sidebar Collapse Button
   ========================================= */
.bslib-sidebar-layout > .collapse-toggle {
    background-color: #606c38 !important;   /* Forest green */
    color: #fdfaf0 !important;
    border: 2px solid rgba(253, 250, 240, 0.7) !important;
    border-radius: 8px !important;
    width: 40px !important;
    height: 40px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1050 !important;
}

.bslib-sidebar-layout > .collapse-toggle:hover {
    background-color: #bc6c25 !important;   /* Earthy orange */
    transform: scale(1.1) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6) !important;
}

.bslib-sidebar-layout > .collapse-toggle > svg {
    width: 20px !important;
    height: 20px !important;
}

.content-wrapper {
  transition: margin-left 0.3s ease !important;
}
.sidebar-menu > li > a > i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  display: inline-block;
}
.main-sidebar {
  transition: width 0.3s ease !important;
}
.sidebar-menu > li > a {
  transition: all 0.3s ease !important;
}
.sidebar-menu > li > a > span {
  transition: opacity 0.3s ease !important;
}

/* Ensure Selectize dropdowns are on top */
.selectize-dropdown {
    z-index: 99999 !important;
}

/* =========================================
   Spacing & Breathing Room
   ========================================= */

/* Pad the main content area (right side of navset_pill_list) */
.tab-content > .tab-pane {
    padding: 6px 20px 20px 16px;
}

/* More comfortable nav pill link items */
.well .nav-link {
    padding: 8px 14px !important;
    margin-bottom: 4px !important;
    border-radius: 8px !important;
}

/* Space between stacked cards */
.bslib-card, .card {
    margin-bottom: 14px !important;
}

/* Better text readability */
.card-body p, .card-body li {
    line-height: 1.75;
    margin-bottom: 0.5rem;
}

/* Gap between columns in layout_columns */
.bslib-grid {
    gap: 0.875rem !important;
}

/* Section headings */
h2, h3 {
    margin-bottom: 0.5rem !important;
}

/* Cleanup for bslib sidebar overlaps if any */

/* Ensure bslib sidebar help text is hidden but accessible */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Sidebar expand hint — visible only when the inner bslib sidebar is collapsed */
.sidebar-expand-hint {
    display: none;
    font-size: 0.85rem;
    color: rgba(253, 250, 240, 0.6);
    margin: 0 0 8px 2px;
    cursor: default;
}
.bslib-sidebar-layout[data-bslib-sidebar-open="false"] .sidebar-expand-hint {
    display: block;
}

/* =========================================
   Climate module: subtle warming-stripes background
   16 vertical bands, blue → red, at low opacity
   ========================================= */
#sidebar_menu-climate {
    background-image: linear-gradient(to right,
        rgba(8,   48,  107, 0.22)  6.25%,
        rgba(8,   81,  156, 0.20)  6.25% 12.5%,
        rgba(33,  113, 181, 0.18) 12.5%  18.75%,
        rgba(66,  146, 198, 0.16) 18.75% 25%,
        rgba(107, 174, 214, 0.14) 25%    31.25%,
        rgba(158, 202, 225, 0.12) 31.25% 37.5%,
        rgba(198, 219, 239, 0.10) 37.5%  43.75%,
        rgba(222, 235, 247, 0.09) 43.75% 50%,
        rgba(254, 224, 210, 0.09) 50%    56.25%,
        rgba(252, 187, 161, 0.11) 56.25% 62.5%,
        rgba(252, 146, 114, 0.13) 62.5%  68.75%,
        rgba(251, 106,  74, 0.15) 68.75% 75%,
        rgba(239,  59,  44, 0.17) 75%    81.25%,
        rgba(203,  24,  29, 0.19) 81.25% 87.5%,
        rgba(165,  15,  21, 0.21) 87.5%  93.75%,
        rgba(103,   0,  13, 0.23) 93.75%
    ) !important;
    background-attachment: local !important;
}

/* =========================================
   Climate module: Maps / Trends tab buttons
   ========================================= */
#climate-climate_tab .nav-link {
    background-color: rgba(8, 48, 107, 0.85) !important;
    color: #cce5f5 !important;
    border: 1px solid rgba(100, 149, 200, 0.3) !important;
    border-radius: 6px 6px 0 0 !important;
    font-weight: 600 !important;
    margin-right: 4px;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

#climate-climate_tab .nav-link.active {
    background-color: #08519c !important;
    color: #ffffff !important;
    border-color: rgba(100, 149, 200, 0.5) !important;
    border-bottom-color: #08519c !important;
}

#climate-climate_tab .nav-link:hover:not(.active) {
    background-color: rgba(33, 113, 181, 0.75) !important;
    color: #ffffff !important;
}

/* ── Map card header: title + layer checkboxes ─────────────────────────── */
.map-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.map-card-header .shiny-input-checkboxgroup {
    margin: 0;
}

.map-card-header .form-check-inline {
    margin-right: 0.75rem;
}

.map-card-header .form-check-label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.82rem;
    font-weight: 400;
    cursor: pointer;
}

.map-card-header .form-check-input {
    cursor: pointer;
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);
}

.map-card-header .form-check-input:checked {
    background-color: rgba(100, 180, 255, 0.8);
    border-color: rgba(100, 180, 255, 0.9);
}


/* =========================================
   Mobile Responsiveness & Offcanvas Sidebar
   ========================================= */

/* Medium screens: 2-col instead of 3 for cards */
@media (max-width: 992px) {
    .bslib-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    /* 1. Global Navigation Adjustments */
    div.topnav a {
        padding: 16px 12px;
        font-size: 14px;
    }
    .topnav img {
        height: 35px !important;
        margin: 10px 5px !important;
    }

    /* 2. Push content correctly below nav */
    .content-wrapper {
        padding-top: 55px !important;
        margin-left: 0 !important;
    }
    body.bslib-page-fill {
        padding-top: 55px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .mobile-close-btn {
        display: block !important;
    }

    /* 3. Off-Canvas Sidebar — hidden by default, slides in on toggle */
    .col-sm-2:has(#sidebar_menu) {
        position: fixed !important;
        top: 55px !important;
        left: -100% !important;
        width: 260px !important;
        height: calc(100vh - 55px) !important;
        max-width: 85vw !important;
        background: rgba(32, 28, 24, 0.97) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        z-index: 1050;
        transition: left 0.3s ease-in-out !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
    }

    /* When toggled open on mobile */
    .col-sm-2:has(#sidebar_menu).mobile-sidebar-open {
        left: 0 !important;
    }

    /* Backdrop overlay when sidebar is open */
    .col-sm-2:has(#sidebar_menu).mobile-sidebar-open::after {
        content: "";
        position: fixed;
        top: 0;
        left: 260px;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
    }

    /* The content column always takes full width on mobile */
    .col-sm-10 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 4. Stack ALL bslib grid layouts to single column */
    .bslib-grid,
    .bslib-grid.bslib-mb-auto,
    .html-fill-item.html-fill-container.bslib-grid {
        grid-template-columns: 1fr !important;
    }

    /* 5. Mobile padding reductions */
    .tab-content > .tab-pane {
        padding: 8px !important;
    }
    .box, .card, .info-box, .small-box, .bslib-card, .content-card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }
    .card-header {
        margin: -12px -12px 12px -12px !important;
    }

    /* 6. Bslib inner sidebars — handled by open="desktop" in Python,
          but ensure the closed state looks good */
    .bslib-sidebar-layout[data-bslib-sidebar-open="false"] .sidebar,
    .bslib-sidebar-layout[data-bslib-sidebar-open="always-above"] .sidebar {
        width: 100% !important;
    }

    /* 7. Collapse toggle position on mobile */
    .bslib-sidebar-layout > .collapse-toggle {
        left: auto !important;
        right: 10px !important;
        top: 10px !important;
        z-index: 100 !important;
    }

    /* 8. Image height reduction on small screens */
    img[style*="height: 200px"] {
        max-height: 140px !important;
    }


    /* 10. Map cards: minimum usable height on mobile */
    .card output_widget,
    .shiny-bound-output {
        min-height: 280px;
    }
}