/* logo */
.skin-blue .main-header .logo {
    background-color: #dcddc1;
    font-weight: 700;
    color: #dcddc1;
    }

.skin-blue .main-header {
    box-shadow: 0 3px 30px -6px #aaaaaa;
}

/* logo when hovered */
.skin-blue .main-header .logo:hover {
    background-color: #dcddc1;
    }

/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
  background-color: #ffffff;
  display: flex !important;
  align-items: center !important;
}

/* main sidebar */
.skin-blue .main-sidebar {
    background-color: #ffffff;
    box-shadow: 3px 0 30px -6px #aaaaaa;
    font-size: 1.375rem;
    font-weight: 450;
    color: #585a42 !important;
    font-family: Ubuntu,sans-serif;
    }


.skin-blue {
    overflow: auto;
    background-color: #ffffff;
}

.form-group {
  margin-bottom: 0 !important;
}

 /* active selected tab in the sidebarmenu */
 .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
    background-color: #d0d2ad;
    border-left: 3px solid #d0d2ad;
    }

/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
    background-color: #ffffff;
    color: #252525;
    padding-top: 9px;
    padding-bottom: 9px;
    }

/* other links in the sidebarmenu when hovered */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
    background-color: #e6e6e6;
    border-left: 3px solid #d0d2ad;
    }
    
/* toggle button when hovered  */                    
.skin-blue .main-header .navbar .sidebar-toggle{
    color: #585a42;
    }

/* toggle button when hovered  */                    
.skin-blue .main-header .navbar .sidebar-toggle:hover{
    background-color: #e8e8d6;
    color: #585a42;
    }

.skin-blue .main-header .navbar a{
    background-color: #ffffff;
    color: #1d1d1d;
}

.skin-blue .main-header .navbar td:hover{
    background-color: #e6e6e6;
    color: #1d1d1d;
}

.content {
    background: #ffffff;
}

/* The injected title styling (optional tweak for spacing/size) */
#sf-title {
  font-size: 1.5em;
  font-weight: 500;
  margin-left: 20px;
  color: #777958;
  letter-spacing: 1px;
  line-height: 1;          /* Ensures no weird vertical offset */
  display: flex;
  align-items: center;
}

/* Track (selected bar between handles) */
.irs-bar,
.irs-bar-edge,
.irs-single,
.irs-from,
.irs-to,
.irs-slider {
  background: #b8bc86 !important;
  border-color: #b8bc86 !important;
}

/* Handles (both for single and double handle sliders) */
.irs-handle,
.irs-handle.single,
.irs-handle.from,
.irs-handle.to {
  background: #b8bc86 !important;
  border: 2px solid #9a9e64 !important;
}

/* Range color (for selected segment in double-handle mode) */
.irs-bar {
  background: #ededed !important;
  border-color: #cccccc !important;
}

/* Optionally: hover/focus states for handles */
.irs-handle:hover, .irs-handle:focus {
  box-shadow: 0 0 0 2px #d0d2ad !important;
  border-color: #b8bc86 !important;
}

/* Table outer border and inner cell borders */
table.dataTable {
border-collapse: collapse !important;
}
table.dataTable th, 
table.dataTable td {
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 6px !important;
padding-right: 6px !important;
font-size: 1em !important;
}
table.dataTable tr {
height: 27px !important;
}
/* Header background */
table.dataTable thead th {
background-color: #dcddc1 !important;
color: #000 !important;
font-weight: bold !important;
text-align: left !important;
border-color: #aaa !important;
border-bottom-width: 2px !important;
}
/* Footer styling for summary row */
table.dataTable tfoot th, table.dataTable tfoot td {
background-color: #FFAB5D !important;   /* Yellow-gold  #FBAD64*/ 
color: #000 !important;
font-weight: bold !important;
text-align: right !important;
border-color: #aaa !important;
border-top-width: 2px !important;
font-size: 1.15em;
}
/* Make the first footer cell left-aligned (for label) */
table.dataTable tfoot th:first-child {
text-align: left !important;
}
/* Optional: make summary values a bit bigger/bolder */
table.dataTable tfoot th:not(:first-child), 
table.dataTable tfoot td:not(:first-child) {
font-size: 1.15em;
}

.dataTables_wrapper {
height: 100% !important;
}
#summary_table {
height: 100% !important;
}


/* --- Fix DT scrollY duplicated header/footer coloring bug --- */
div.dataTables_scrollBody table.dataTable thead th,
div.dataTables_scrollBody table.dataTable tfoot th,
div.dataTables_scrollBody table.dataTable tfoot td {
    background-color: #fff !important;
    color: #000 !important;
    font-weight: normal !important;
    font-size: 1em !important;
    border-color: #aaa !important;
}

/* Make sure all borders show in scrollY tables */
table.dataTable, 
table.dataTable th, 
table.dataTable td {
    border: 1px solid #aaa !important;
    border-collapse: collapse !important;
}

/* Make text in first column (all rows, header, footer) bold */
/* Bold first column cells in DT table body, header, and footer */
#summary_table tbody td:first-child,
#summary_table thead th:first-child,
#summary_table tfoot th:first-child {
  font-weight: bold !important;
}

/* Make ALL text in the Shiny dashboard sidebar dark */
.skin-blue .main-sidebar, 
.skin-blue .main-sidebar * {
    color: #585a42 !important;
}

/* Top Info Styling in Sidebar */
#sidebar-top-info {
  font-size: 1em;
  font-family: 'Ubuntu', sans-serif;
  text-align: center;
  margin: 16px 10px 18px 10px;
  color: #585a42;      /* Optional: slightly olive, matches your color scheme */
  letter-spacing: 0.02em;
  font-weight: 400;
  line-height: 1.4;
}

/* Selected option background in shinyWidgets pickerInput */
.bootstrap-select .dropdown-menu li.active a,
.bootstrap-select .dropdown-menu li.selected a {
  background-color: #dcddc1 !important;
  color: #252525 !important; /* or #606060, for readable text */
}

/* Also make hover consistent */
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li a:focus {
  background-color: #e6e6e6 !important;
  color: #252525 !important;
}

.bootstrap-select .dropdown-menu open {
  z-index: 2200 !important;
}

.irs-from,
.irs-to {
  background: #fff !important;   /* keeps your green background */
  border-color: #b8bc86 !important;
  font-size: 0.9em !important;
  font-weight: 350 !important;
}

.tab-btn {
  background: #dcddc1 !important;
  color: #777958 !important;
  font-weight: 500 !important;
  border: none !important;
  border-radius: 10px !important;
  margin: 0 6px !important;
  min-width: 78px;
}
.tab-btn.active, .tab-btn:focus {
  background: #b8bc86 !important;
  color: #fff !important;
  outline: none !important;
}

.w-spin { filter: invert(1); }                 /* makes spinner white */
.waiter-overlay, .waiter-overlay * { font-family: Ubuntu, sans-serif; }

/* Smaller, tighter Leaflet popup */
.mini-popup .leaflet-popup-content-wrapper{
  padding: 2px 2px !important;
  border-radius: 4px;
}
.mini-popup .leaflet-popup-content{
  margin: 0 !important;
  line-height: 1.1;
  font-size: 12px;
  font-weight: 600;
}
.mini-popup .leaflet-popup-content p{  /* in case Leaflet wraps it in <p> */
  margin: 0 !important;
}
.mini-popup .leaflet-popup-tip{
  width: 8px; height: 8px;
}
.mini-popup .leaflet-popup-close-button{
  font-size: 14px; right: 4px; top: 2px;
}

.disabled-look { opacity: 0.5; pointer-events: none; }

/* Layers control: 20% transparency */
.leaflet-control-layers,
.leaflet-control-layers-expanded {
  background: rgba(255, 255, 255, 0.85) !important; /* 80% opaque */
  border: 0.6px solid rgba(0,0,0,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  backdrop-filter: blur(1px); /* optional, softens map behind */
}

/* The small toggle button (used on narrow screens) */
.leaflet-control-layers-toggle {
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Keep rows clean over transparent bg */
.leaflet-control-layers label {
  background: transparent !important;
}

/* Put multiple legends side-by-side at bottom-left */
.leaflet-bottom.leaflet-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;     /* wrap if viewport is narrow */
  gap: 3px;            /* space between EI and GI */
  align-items: flex-end;
  pointer-events: none; /* let clicks pass through the gaps */
}
.leaflet-bottom.leaflet-left .leaflet-control {
  pointer-events: auto;       /* keep legends clickable */
  float: none !important;     /* override Leaflet float */
  clear: none !important;     /* prevent forced newline */
  margin: 0 0 10px 10px;      /* keep some margins */
}

.week-inline-title {
  font-weight: 700;
  color: #585a42;
  font-size: 13px;
}
.week-slider-row .btn {
  padding: 2px 6px;
  line-height: 1.1;
  border-radius: 6px;
}

/* Smooth but calmer transition */
.leaflet-control-layers{
  position:relative;
  overflow:visible;                 /* let the handle protrude */
  transition: transform .40s ease, opacity .40s ease;  /* was .28s */
  will-change: transform, opacity;
  z-index:1000;
}

/* Square handle styled like Leaflet controls */
#lc-toggle{
  position:absolute;
  top:6px;
  left:-38px;                       /* sticks out on the left */
  width:32px; height:32px;
  background:#fff;
  border:1px solid rgba(0,0,0,.28);
  border-radius:4px;                /* square-ish, like .leaflet-bar a */
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  line-height:32px; font-size:16px; font-weight:600;
  color:#2b2b2b;
  z-index:1100;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#lc-toggle:hover{ background:#f8f8f8; }
#lc-toggle:active{ background:#f0f0f0; }
#lc-toggle:focus{ outline:2px solid #4da3ff55; outline-offset:1px; }

/* Make sure the custom handle can receive pointer events */
#lc-toggle { pointer-events: auto; }
/* And the whole layers control must accept pointer events */
.leaflet-control-layers { pointer-events: auto; }

/* When pinned, stay fully open; hover should not auto-close */
.leaflet-control-layers.lc-pinned { 
  transform: translateX(0) !important; 
  opacity: 1 !important; 
}
/* Flip the chevron when expanded */
.leaflet-control-layers:not(.lc-collapsed) #lc-toggle { transform: rotate(180deg); }


/* ultra-compact grid popup */
.leaflet-container .grid-popup .leaflet-popup-content-wrapper {
  padding: 2px 4px;          /* was 6px 8px */
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.leaflet-container .grid-popup .leaflet-popup-content {
  margin: 0;                 /* kill Leaflet’s default 13px x/y margin */
  min-width: 0 !important;   /* prevent unwanted width */
  font-size: 11px;
  line-height: 1.15;
}

.leaflet-container .grid-popup .leaflet-popup-tip {
  display: block;
  width: 15px; height: 15px; /* a bit smaller tip */
}

/* remove extra space added by paragraphs */
.leaflet-container .grid-popup .leaflet-popup-content p {
  margin: 0;
}

.leaflet-container .grid-popup .leaflet-popup-content p + p {
  margin-top: 2px;           /* tiny gap if multiple lines */
}

.dt-row-pulse { box-shadow: inset 0 0 0 9999px rgba(255, 243, 205, 0.7); transition: box-shadow 0.9s; }

/* ---------- MOBILE -----------

/* Default (desktop/tablet) */
#map { height: 78dvh !important; }           /* dynamic viewport height works best on mobile too */
#map .leaflet-container { height: 100% !important; }

/* Portrait phones */
@media (max-width: 768px) {
  #map { height: 60dvh !important; }         /* tweak this number to taste */
}

/* Extra short screens (small phones / landscape) */
@media (max-height: 600px) {
  #map { height: 50dvh !important; }
}

/* Base: slide most of the panel off-canvas */
.leaflet-control-layers{
  /* how far to slide right when collapsed (percent of panel width) */
  --lc-shift: 62%;
}
.leaflet-control-layers.lc-collapsed{
  transform: translateX(var(--lc-shift));
  opacity: .95;
}

/* Phones: hide more (e.g., 80–88%) */
@media (max-width: 768px){
  .leaflet-control-layers{ --lc-shift: 90%; }
}

/* Very short screens (landscape phones) */
@media (max-height: 600px){
  .leaflet-control-layers{ --lc-shift: 92%; }
}

@media (hover:none) and (pointer:coarse){
  /* If you really want a hover fallback on touch emulation, at least use the var */
  .leaflet-control-layers.lc-collapsed:not(.lc-nohover):hover{
    transform: translateX(var(--lc-shift));
    opacity: .95;
  }
}

/* =========================
   Responsive week slider
   ========================= */

.week-slider-row {
  width: 100%;
  min-width: 0;
}

#week_slider_container {
  width: 100%;
  min-width: 0;
}

#week_slider_container .irs {
  width: 100%;
}

#week_slider_container .irs-grid-text {
  font-size: 11px;
  white-space: nowrap;
}

/* Large laptops / smaller desktops */
@media (max-width: 1600px) {
  #week_slider_container .irs-grid-text {
    display: none !important;
  }
}

/* Phones */
@media (max-width: 768px) {
  #week_slider_header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .week-slider-row {
    gap: 4px !important;
  }

  #week_prev,
  #week_next {
    padding: 3px 6px !important;
  }

  #week_slider_container .irs-single,
  #week_slider_container .irs-from,
  #week_slider_container .irs-to {
    font-size: 10px !important;
  }
}

/* Mobile: force the language picker to exactly 65px */
@media (max-width: 768px){
  /* 1) Container itself */
  #header_language_picker{
    width: 65px !important;
  }
  /* 2) The bootstrap-select wrapper (this is what actually controls width) */
  #header_language_picker .bootstrap-select[data-id="selected_language"]{
    width: 65px !important;                 /* override inline width from plugin */
  }
 
  /* 6) Allow the dropdown menu to be wider than the button */
  #header_language_picker .dropdown-menu{
    min-width: 80px !important;             /* so items aren’t cramped */
  }
}

#map_wrap {
  position: relative;
}

#map_scenario_tabs_overlay {
  position: absolute;
  top: 7px;
  left: 51%;
  transform: translateX(-50%);
  z-index: 400;
  pointer-events: auto;
}

#map_scenario_tabs_overlay .map-scenario-tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#map_scenario_tabs_overlay .scenario-tab {
  background: #ffffff !important;
  color: #777958 !important;
  border: 1px solid #cfcfb8 !important;
  border-radius: 0 !important;
  border-right: none !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}

#map_scenario_tabs_overlay .scenario-tab.active,
#map_scenario_tabs_overlay .scenario-tab:focus {
  background: #b8bc86 !important;
  color: #ffffff !important;
  border-color: #9ea266 !important;
  outline: none !important;
}

#map_scenario_tabs_overlay .scenario-tab.disabled,
#map_scenario_tabs_overlay .scenario-tab:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

@media (max-width: 768px) {
  #map_scenario_tabs_overlay {
    top: 8px;
    width: calc(100% - 20px);
  }

  #map_scenario_tabs_overlay .map-scenario-tabs {
    width: 100%;
    gap: 4px;
    flex-wrap: wrap;
  }

  #map_scenario_tabs_overlay .scenario-tab {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
}

.leaflet-top.leaflet-right .leaflet-control-layers {
  margin-top: 32px;
}