/* Google font import */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");

/* Universal font application - catches everything */
* {
  font-family: "Roboto", sans-serif !important;
}

/* Base HTML elements */
body, html,
div, span, p, a, 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
label, button, input, select, textarea,
table, th, td, tr {
  font-family: "Roboto", sans-serif !important;
}

/* Shiny-specific elements */
.shiny-input-container,
.shiny-input-container label,
.shiny-bound-input,
.slider,
.shiny-bound-output,
.selectize-input,
.selectize-dropdown,
.selectize-dropdown-content,
.selectInput,
.form-group,
.form-group label,
.form-control,
.control-label,
.radio label,
.checkbox label,
.slider-input,
.irs,
.irs-line,
.irs-min, .irs-max,
.irs-from, .irs-to, .irs-single {
  font-family: "Roboto", sans-serif !important;
}

/* Bootstrap/bslib components */
.nav,
.nav-tabs,
.nav-pills,
.nav-link,
.navbar,
.navbar-brand,
.navbar-nav,
.card,
.card-header,
.card-body,
.card-title,
.card-text,
.btn,
.modal,
.modal-header,
.modal-body,
.modal-footer,
.dropdown-menu,
.dropdown-item {
  font-family: "Roboto", sans-serif !important;
}

/* Navigation panels and tabs */
.bslib-navs-pill,
.bslib-navs-tab,
.nav-tabs .nav-link,
.nav-pills .nav-link,
.tabset-pills,
.tabset-tabs {
  font-family: "Roboto", sans-serif !important;
}

/* Plot and output elements */
.html-widget,
.plotly,
.ggplot,
.shiny-plot-output,
.shiny-html-output,
.shiny-text-output,
svg text,
.ggplot text,
.plotly text {
  font-family: "Roboto", sans-serif !important;
}

/* Legacy dashboard elements (if using shinydashboard) */
.content-wrapper,
.content,
.box,
.box-header,
.box-body,
.info-box,
.small-box,
.main-header .logo,
.main-header .navbar,
.sidebar-menu,
.sidebar-menu > li,
.sidebar-menu > li > a,
.treeview-menu,
.treeview-menu > li > a {
  font-family: "Roboto", sans-serif !important;
}
      
      /* Make header background white */
            .navbar {
              background-color: #dfdfdf 
              color: #1d874a;
              color: #000;
              box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }
            .navbar-brand {
              color: #1d874a !important;
              font-weight: bold;
              font-size: 1.1rem;
              
            }
            /* Card styles */
                        .single-card-wrapper {
                         position: relative;
                         width: 100%;
                         }
                         
            /*Slider customization */
            .slider {
              padding-left: 25px;
              padding-right:25px;
            }
            .slider .irs-bar {
               background: #dfdfdf;
               border: none;
               height: 5px;
            }
            .slider .irs-handle {
              background: #1d874a !important;
              border: none;
              border-radius: 20%;
              width: 16px;
              height: 16px;
            }
            
            .slider .irs-single {
              background: none !important; 
              color: #1d874a;
              font-weight: bold;
              border: 2px solid #1d874a;
            }
      
            .slider .irs-line {
              background: #e9ecef;
              border: none;
              height: 4px;
            }
            
            .slider .irs-min, .slider .irs-max {
              display: none;
            }
            
            .slider .irs-grid-text {
              color: #403a37 !important;
              font-size: 12px;
            }
            .irs-grid-pol {
              display: none;
            }
            
                        /* Base select wrapper */
.select-wrapper {
  position: relative;
  z-index: 100;
  height: 80px; 
  display: flex; 
  font-size: 14px; 
  color: #403a37 !important;
  flex-direction: column; 
  justify-content: center; 
  padding-right: 0.125rem !important;
  padding-left: 0.125rem !important;
  padding-top: 0.5rem !important;
  width: 100% !important;             /* Ensure full width */
  box-sizing: border-box;             /* Include padding in width calculation */
}

.select-wrapper label {
  margin-right: 1px; 
  font-size: 14px; 
  font-weight: bold; 
  margin-bottom: 1px;
  width: 100%;                        /* Ensure label takes full width */
}

/* Ensure the select input takes full width */
.select-wrapper .form-control,
.select-wrapper .selectize-input {
  width: 100% !important;
  box-sizing: border-box;
}


/* Download Button Outlined style */
                       .btn-download-outlined {
                       background-color: transparent !important;
                       color: #1d874a !important;
                       border: 2px solid #1d874a !important;
                       padding: 4px 12px !important;
                       border-radius: 4px !important;
                       font-weight: 500 !important;
                       transition: all 0.3s ease !important;
                       line-height: 1.2 !important;
                       min-height: 0 !important; 
                       display: inline-flex !important;
                       align-items: center !important;
                       gap: 6px !important;
                       justify-content: end !important;
                       }
                       .btn-download-outlined:hover {
                       background-color: #1d874a !important;
                       color: white !important;
                       }

/* When select is open/active */
.select-wrapper.selectize-open,
.select-wrapper:focus-within {
  z-index: 9999 !important;
}

/* Dropdown styling */
.select-wrapper .selectize-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  margin: 0 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* For very tight spacing */
.select-controls {
  margin-left: -0.125rem !important;
  margin-right: -0.125rem !important;
}

.select-controls > [class*="col-"] {
  padding-left: 0.125rem !important;
  padding-right: 0.125rem !important;
}

/* For Bootstrap columns containing select-wrapper */
[class*="col-"] .select-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

                        /*barplot customization */ 
                        .barplot {
                          width: 100% !important; 
                          border: none;
                          height: 100%;
                          margin: 0;
                          padding: 0;
                          padding-right = 2px;
                          box-sizing: border-box;
                          
                        }
  
  .barplot .plotly.html-widget {
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Remove any default margins/padding from the column */
.sidebar-panel {
  background-color: #ebebeb;
  padding: 15px !important;     
  margin: 0 !important;         
  width: 25% !important;       
  height: calc(100vh - 56px) !important; /* Full height minus navbar */
  box-sizing: border-box;       
  border-radius: 0 !important;  
  position: fixed !important;   
  top: 56px !important; 
  right: 0 !important; 
  left: 75% !important; 
  padding-top: 15px !important; 
  z-index: 1000 !important;    
}
  
  /* Ensure the fluidRow takes full width */
  .sidebar-panel .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    margin-top: 0px; 
    padding-top: 0px;
  }
  
  /* Remove any default Bootstrap column padding */
  .col-sm-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  [class*='col-']:has(.sidebar-panel) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
                        /* Active dropdown */
                        .selectize-dropdown.selectize-dropdown-active {
                        z-index: 9999 !important;
                        }
                        /* Reset all overflow */
                        .bslib-card,
                        .card,
                        .card-body,
                        .select-wrapper,
                        .selectize-control {
                        overflow: visible !important;
                        }
                        /* Hide dropdowns in full screen mode */
                        body:has(.bslib-card[data-full-screen="true"]) .select-wrapper {
                        display: none !important;
                        z-index: -1 !important;
                        }
                        
                        /* Full screen header styles */
                        .bslib-card[data-full-screen="true"] .card-header h4 {
                        font-size: 16px !important;
                        line-height: 0.5 !important;
                        text-align: middle; 
                        border-top-left-radius: 12px; 
                        border-top-right-radius: 12px;
                        }
                        
                        .bslib-card[data-full-screen="true"] .card-header div {
                        padding: 6px 1rem !important;
                        height: auto !important;
                        }
                        
                       /* Hide expanded content in regular view */
                      .bslib-card[data-full-screen="false"] .card-body[mode="expanded"] {
                      display: none !important;
                      visibility: hidden !important;
                      height: 0 !important;
                      opacity: 0 !important;
                      }
                      
                      /* Only show expanded content in full screen mode */
                      .bslib-card[data-full-screen="true"] .card-body[mode="expanded"] {
                      display: block !important;
                      visibility: visible !important;
                      height: auto !important;
                      opacity: 1 !important;
                      }
                      
                      /* Ensure regular view content is hidden in full screen */
                      .bslib-card[data-full-screen="true"] .card-body[mode="default"] {
                      display: none !important;
                      }
                      
                      /* Enable scrolling in full screen mode */
                      .bslib-card[data-full-screen="true"] .card-body[mode="expanded"] {
                      display: block !important;
                      visibility: visible !important;
                      height: 100vh !important;
                      opacity: 1 !important;
                      overflow-y: auto !important;  /* Enable vertical scrolling */
                      padding: 20px;
                      }
                      
                      /* Ensure the card container in full screen allows scrolling */
                      .bslib-card[data-full-screen="true"] {
                      overflow: auto !important;
                      max-height: 100vh !important;
                      }
                      
                      /* Optional: Add smooth scrolling */
                      .bslib-card[data-full-screen="true"] .card-body[mode="expanded"] {
                      scroll-behavior: smooth;
                      }
                       
                       /* Headers */
                         .main-header .logo,
                       .main-header .navbar,
                       h1, h2, h3, h4, h5, h6,
                       .h1, .h2, .h3, .h4, .h5, .h6 {
                         font-family: "Roboto", "Roboto", sans-serif !important;
                       }
                       
                       /* Sidebar */
                         .sidebar-menu > li,
                       .sidebar-menu > li > a,
                       .treeview-menu > li > a {
                         font-family: "Roboto", "Roboto", sans-serif !important;
                       }
                       
                       /* Input widgets */
                       .selectize-input,
                       .selectize-dropdown,
                       .selectInput,
                       .form-group label,
                       .radio label,
                       .checkbox label {
                         font-family: "Roboto", "Roboto", sans-serif !important;
                       }
                       
                       /* Remove default bslib expand button */
                       .bslib-card .bslib-full-screen-enter.badge.rounded-pill {
                       display: none !important;
                       }
                              
                       /* Custom classes */
                         .content-wrapper {
                           background-color: #fff;
                         }
                       .clickable-header {
                         cursor: pointer;
                         text-decoration: none;
                         font-family: "Roboto", sans-serif !important;
                       }
                       .clickable-header:hover {
                         text-decoration: underline;
                       }
                       .hidden {
                         display: none;
                       }
                       
                       .plotly {
                       height: 100% !important;
                       }
                       
                       /* Plot text */
                         .ggplot text,
                       .plotly text {
                         font-family: "Roboto", sans-serif !important;
                       }
                       
                       .leaflet-container {
                         background: transparent !important;
                       }

/* Force leaflet map to fill its output div correctly on tab switch */
.shiny-leaflet-output {
  height: 500px !important;
  width: 100% !important;
}

.leaflet-container .leaflet-map-pane {
  visibility: visible !important;
}
                       
                       /* Remove legend box background and shadow */
.legend-no-box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 6px 8px !important;
  color: #403a37 !important;
  font-size: 12px !important;
  font-family: Roboto, sans-serif !important;
}

/* Legend title styling */
.legend-no-box .legend-title {
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  color: #403a37 !important;
}

/* Keep color swatches visible */
.legend-no-box i {
  width: 18px !important;
  height: 18px !important;
  float: left !important;
  margin-right: 8px !important;
  opacity: 1 !important;
  border: 1px solid #ccc !important;
}

/* Legend label text */
.legend-no-box span {
  color: #403a37 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  vertical-align: middle !important;
}

/* Position legends side by side when both exist in bottom-right */
.leaflet-bottom.leaflet-right {
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 15px !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  padding-right: 10px !important;
  padding-bottom: 10px !important;
}

/* Ensure each legend doesn't take full width */
.leaflet-bottom.leaflet-right .leaflet-control {
  flex: 0 0 auto !important;
  margin: 0 !important;
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
}

/* Specific styling for legends */
.leaflet-bottom.leaflet-right .info.legend {
  max-width: 250px !important;
}

/* Override any absolute positioning on legends */
.leaflet-bottom.leaflet-right .leaflet-control.legend-no-box {
  position: relative !important;
  float: none !important;
}
                       
                       
                       /* Style the checkbox border and background when checked */
input[type="checkbox"].form-check-input:checked,
.shiny-input-container input[type="checkbox"]:checked {
  background-color: #1d874a !important;
  border-color: #1d874a !important;
}

/* Style the checkbox focus state */
input[type="checkbox"].form-check-input:focus,
.shiny-input-container input[type="checkbox"]:focus {
  border-color: #1d874a !important;
  box-shadow: none !important;
}

/* Style the checkbox on hover */
input[type="checkbox"].form-check-input:hover,
.shiny-input-container input[type="checkbox"]:hover {
  border-color: #1d874a !important;
  box-shadow: none !important;
}

/* Additional specificity for Bootstrap 5 */
.form-check .form-check-input:checked {
  background-color: #1d874a !important;
  border-color: #1d874a !important;
  box-shadow: none !important;
}
  
  /* Improve tile rendering quality */
  .leaflet-tile,
  .leaflet-image-layer,
  canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }
  
  /* Hide controls but keep legend */
  .leaflet-control-zoom,
  .leaflet-control-attribution,
  .easy-button-container {
    display: none !important;
  }
  
  .info.legend {
    display: block !important;
  }
  
  @page {
    size: 11in 8.5in landscape;
    margin: 0.25in;
  }
}

/* Disable checkbox wrapper styling */
.checkbox-disabled,
input[type="checkbox"]:disabled,
input[type="checkbox"][disabled] {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* Disable the checkbox input itself */
.checkbox-disabled input[type="checkbox"],
input[type="checkbox"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Disable the label text */
.checkbox-disabled label,
.checkbox-disabled .form-check-label,
input[type="checkbox"]:disabled + label,
input[type="checkbox"][disabled] + label {
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* Ensure the entire form-check group is disabled */
.checkbox-disabled .form-check,
.form-check:has(input[type="checkbox"]:disabled) {
  pointer-events: none !important;
  opacity: 0.6 !important;
}

/* Prevent hover effects on disabled checkboxes */
.checkbox-disabled input[type="checkbox"]:hover,
input[type="checkbox"]:disabled:hover {
  border-color: #ccc !important;
  cursor: not-allowed !important;
}

/* Disabled checkbox checked state */
.checkbox-disabled input[type="checkbox"]:checked,
input[type="checkbox"]:disabled:checked {
  background-color: #ccc !important;
  border-color: #ccc !important;
}

                       
                       /* Style for message-type notifications with sheer/transparent background */
.shiny-notification-message {
  background-color: rgba(29, 135, 74, 0.7) !important;
  color: white !important;
  border-left: 5px solid #1d874a !important;
}

/* Optional: Style the close button */
.shiny-notification-message .shiny-notification-close {
  color: white !important;
  opacity: 1;
}

.shiny-notification-message .shiny-notification-close:hover {
  opacity: 1;
}

.modal-title {
  font-size: 16px !important;
  font-weight: bold !important;
  margin-bottom: 0px !important;
  color: #14884b !important;
}

.shiny-download-link i {
  display: none !important;
}