html,body{height:100%;margin:0;padding:0;}
nav{z-index:1200;}
:root{
  --chart-default-height: 30vh;
  --chart-aspect-ratio: 600 / 350;
  --chart-min-width: 300px;
  --chart-min-height: 200px;
  --chart-max-width: 800px;
  --chart-max-height: 600px;
}

nav .nav-wrapper{
  height:44px;
  line-height:44px;
}
nav .brand-logo{ font-size:1.3rem; }
#languageBtn{ height:26px; line-height:26px; padding:0 8px; font-size:0.7rem; }

/* Side Panel Container */
.side-panel-container{
  position:fixed;
  top:44px;
  left:0;
  bottom:0;
  width:var(--side-panel-width, 320px);
  min-width:240px;
  max-width:600px;
  background:rgba(255,255,255,.95);
  box-shadow:2px 0 6px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.2);
  z-index:1050;
  transform:translateX(-100%);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
  padding-bottom:12px;
}
/* Desktop: side panel and map use full height - handled by JS but provide CSS fallback */
@media (min-width:601px){
  .side-panel-container{
    bottom:0;
  }
  #map{
    bottom:0;
  }
}
.side-panel-container.open{
  transform:translateX(0);
}
.side-panel-resizer{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:6px;
  cursor:ew-resize;
  z-index:1051;
  background:transparent;
}
.side-panel-resizer:hover{
  background:rgba(33,150,243,0.1);
}
.controls-container{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}
.panel-section-fixed{
  flex:0 0 auto;
  padding:0.6rem 0.8rem;
  border-bottom:1px solid rgba(0,0,0,0.1);
  background:rgba(255,255,255,1);
}
.panel-scrollable{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
}
.panel-section{
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.panel-section-foldable{
  border-bottom:1px solid rgba(0,0,0,0.1);
}
.panel-section-header{
  padding:0.6rem 0.8rem;
  background:rgba(240,240,240,0.6);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  font-weight:500;
  font-size:0.95rem;
}
.panel-section-header:hover{
  background:rgba(240,240,240,0.8);
}
.panel-header-help{
  position:static !important;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  margin:0;
  cursor:pointer;
}
.panel-toggle-icon{
  transition:transform 0.2s ease;
  font-size:20px;
}
.panel-section-foldable.collapsed .panel-toggle-icon{
  transform:rotate(-90deg);
}
.panel-section-content{
  padding:0.5rem 0.8rem;
  display:block;
}
.panel-section-foldable.collapsed .panel-section-content{
  display:none;
}
.panel-row{
  margin-bottom:0.9rem;
}
.panel-row:last-child{
  margin-bottom:0;
}
.date-range-row-single{
  display:flex;
  gap:0.5rem;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-top:0.5rem;
}
.date-range-row-single .date-field{
  flex:1 1 0;
  min-width:120px;
  margin:0;
}
.date-range-row-single .btn{
  flex:0 0 auto;
}
.controls-container .input-field{ margin: 0.4rem 0; }
.controls-container .input-field input[type="date"]{max-width:150px;height:32px;}
.controls-container .input-field input[type="date"].date-input-compact{
  font-size:1rem;
}
.controls-container .select-wrapper input.select-dropdown{
  height:32px; line-height:32px; font-size:0.85rem;
}
.controls-container label{ font-size:0.8rem; }
.controls-container .btn, .controls-container .btn-small{
  height:28px; line-height:28px; font-size:0.75rem; padding:0 10px;
}
.controls-container .range-field{ margin: 0; }
.instructions{
  font-size:0.82rem;
  color:#555;
  margin-top:0.5rem;
  margin-bottom:0;
  line-height:1.4;
}

#map{
  position:absolute;
  top:44px;
  bottom:0;
  left:0;
  right:0;
  height:auto;
  z-index:1;
  transition:left 0.3s ease;
}
body.controls-open #map{
  left:var(--side-panel-width, 320px);
}

/* Category + interval row (desktop tightened) */
.data-cat-interval{ display:flex; gap:0.75rem; align-items:flex-end; }
.data-cat-interval .data-cat{ flex: 2 1 0; }
.data-cat-interval .data-interval{ flex: 1 1 0; min-width: 140px; }

/* --- Temperature range controls (per-location) -------------------------- */
.temp-range-controls{
  width: 100%;
}
.temp-range-field{
  width: 100%;
  min-width: 0;
}
/* Dual-handle range slider */
.temp-range-dual-container{
  width: 100%;
}
.temp-range-custom-slider{
  position: relative;
  width: 100%;
  height: 20px;
  margin: 0.5rem 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
.temp-range-track{
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  pointer-events: none;
}
.temp-range-active{
  position: absolute;
  top: 7px;
  height: 6px;
  background: #2196F3;
  border-radius: 3px;
  pointer-events: none;
  left: 0%;
  width: 0%;
  transition: none;
}
.temp-range-handle{
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2196F3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  cursor: grab;
  top: 2px;
  left: 0%;
  transform: translateX(-50%);
  z-index: 2;
  transition: none;
}
.temp-range-handle:active{
  cursor: grabbing;
}
.temp-range-handle-to{
  background: #1976D2;
  z-index: 3;
}
.temp-range-label{
  font-size: 0.75rem;
  color: #444;
  display: block;
  margin-bottom: 0.25rem;
}

/* Date range + temp-range stack (right column) */
.col-dates .date-range-stack{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.col-dates .date-range-row{
  display:flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.col-dates .date-field{
  margin: 0;
}
.temp-range-inner{
  display:flex;
  align-items:flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.temp-range-field{ min-width: 160px; }
.temp-range-sliders{
  display:flex;
  gap: 0.75rem;
  flex: 1 1 320px;
}
.temp-range-slider{ flex: 1 1 0; min-width: 160px; }
.temp-range-label{ font-size: 11px; color:#444; display:block; margin-bottom: 0; }
.temp-range-controls .range-field{ margin: 0; }
.temp-range-controls input[type=range]{ margin: 0; }

@media (min-width: 993px) {
  /* Desktop: compact single-line row (do NOT stretch sliders across full width) */
  .temp-range-controls{
    display: flex;
    justify-content: flex-start;
  }
  .temp-range-inner{
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: end;
    gap: 12px;
    max-width: 760px;
    width: 100%;
  }
  .temp-range-sliders{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
  }
  .temp-range-slider{ min-width: 0; }
}

@media (min-width: 700px) and (max-width: 992px) {
  /* Medium screens: keep it on one line too */
  .temp-range-controls{
    display: flex;
    justify-content: flex-start;
  }
  .temp-range-inner{
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: end;
    gap: 10px;
    max-width: 760px;
    width: 100%;
  }
  .temp-range-sliders{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    min-width: 0;
  }
  .temp-range-slider{ min-width: 0; }
}

/* --- Map layer overlay UI (global raster overlays) ----------------------- */
#map .maplayer-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.15);
  z-index:500; /* above map tiles/overlay; below menus/charts */
  pointer-events:none;
}
.maplayer-spinner{
  width:46px;
  height:46px;
  border:5px solid rgba(0,0,0,0.2);
  border-top-color: rgba(33,150,243,0.9);
  border-radius:50%;
  animation: maplayer-spin 0.9s linear infinite;
}
@keyframes maplayer-spin{ to { transform: rotate(360deg);} }

#map .maplayer-legend{
  position:absolute;
  right:12px;
  top:12px; /* JS will move it just below the controls/menu */
  transform: none;
  width:160px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 10px 10px 8px 10px;
  z-index:1040; /* below controls/menu so it can be revealed by hiding the menu */
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  pointer-events: none; /* don't block map interactions */
  overflow: hidden; /* prevent canvas/labels from spilling when space is tight */
}
.maplayer-legend-title{
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.2;
  word-break: break-word;
}
#mapLayerLegendCanvas{
  display:block;
  margin: 0;
  border-radius: 4px;
}
.maplayer-legend-content{
  display:flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
.maplayer-legend-labelcol{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width: 64px;
}
.maplayer-legend-label{
  font-size: 11px;
  text-align: left;
  opacity: 0.95;
  white-space: nowrap;
}

.maplayer-row{ padding-top: 0.25rem; }
.maplayer-header{ display:flex; align-items:center; gap: 0.5rem; flex-wrap: wrap; }
.maplayer-toggle{ display:flex; align-items:center; gap: 0.35rem; }
.maplayer-toggle-compact span{ font-size: 12px; }
.maplayer-alpha-compact{
  display:flex;
  align-items:center;
  gap: 0.4rem;
  min-width: 180px;
}
.maplayer-alpha-compact .maplayer-inline-label{ margin: 0; }
.maplayer-alpha-compact .range-field{ width: 120px; }
/* Override generic `.help-button` absolute positioning for the map-layer help button */
#helpMapLayer.help-button{
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin-left: 2px;
}
.maplayer-controls{ margin-top: 0.35rem; }
.maplayer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  align-items: end;
}
.maplayer-field{ min-width: 160px; }
.maplayer-inline{ display:flex; flex-direction:column; gap: 0.35rem; }
.maplayer-inline-label{ font-size: 12px; color: #444; }
.maplayer-subnote{ font-size: 12px; color: #666; margin-top: 0.25rem; }

/* --- Custom GeoJSON layers ---------------------------------------------- */
.customlayer-title{
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.4rem;
}
.customlayer-actions{
  display:flex;
  flex-direction:column;
  gap: 0.35rem;
}
.customlayer-list{
  display:flex;
  flex-direction:column;
  gap: 0.6rem;
}
.customlayer-row{
  display:flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
  align-items: center;
  padding: 0.35rem 0;
  border-top: 1px dashed rgba(0,0,0,0.1);
}
.customlayer-row:first-child{
  border-top: none;
}
.customlayer-name{
  flex: 1 1 140px;
  min-width: 140px;
  height: 28px;
  font-size: 0.78rem;
  padding: 0 6px;
}
.customlayer-color{
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  background: #fff;
}
.customlayer-opacity{
  display:flex;
  align-items:center;
  gap: 0.3rem;
  min-width: 130px;
}
.customlayer-opacity label{
  font-size: 12px;
  color: #444;
}
.customlayer-opacity input[type=range]{
  width: 90px;
}
.customlayer-toggle{
  display:flex;
  align-items:center;
  gap: 0.3rem;
  font-size: 12px;
}
.customlayer-actions .btn,
.customlayer-row .btn{
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  font-size: 0.72rem;
}

/* Range input: make Materialize thumb align with the track inside our grid */
.maplayer-range{
  margin: 0;
}
.maplayer-range input[type=range]{
  margin: 0;
}

/* Chart containers */
.chart-container{
  position:fixed;
  bottom:20px;
  left:20px;
  width:calc(var(--chart-default-height) * var(--chart-aspect-ratio));
  height:var(--chart-default-height);
  min-width:var(--chart-min-width);
  min-height:var(--chart-min-height);
  max-width:var(--chart-max-width);
  max-height:var(--chart-max-height);
  background:#fff;
  border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  z-index:900;
  transition:left 0.3s ease, transform 0.3s ease;
  overflow:visible;
}
/* Mobile only: logos relative to chart */
@media (max-width:600px){
  .chart-container .chart-relative-logos{
    position:absolute;
    bottom:calc(100% + 10px);
    right:0;
    top:auto;
  }
}
.chart-container.charts-hidden{
  transform:translateY(calc(100% + 60px));
}
.chart-container[style*="top"]{
  bottom:auto;
}
body.controls-open .chart-container{
  left:calc(var(--side-panel-width, 320px) + 20px);
}
#detailChartContainer{
  left:calc(20px + var(--chart-default-height) * var(--chart-aspect-ratio) + 20px);
}
body.controls-open #detailChartContainer:not(.mobile-overlay){
  left:calc(var(--side-panel-width, 320px) + 20px + var(--chart-default-height) * var(--chart-aspect-ratio) + 20px);
}
.chart-container .card-content{
  width:100%;
  height:100%;
  padding:0;
  position:relative;
}
.chart-container canvas{
  width:100%!important;
  height:100%!important;
  display:block;
}

/* Chart action buttons */
.chart-actions{
  position:absolute;
  top:-32px;
  right:0;
  margin-bottom:0;
  display:flex;
  gap:4px;
  z-index:901;
  background:rgba(255,255,255,0.95);
  padding:4px;
  border-radius:4px 0 0 0;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
}
.chart-action-button{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  font-size:0.8rem;
  user-select:none;
  pointer-events:auto;
  position:relative;
  z-index:902;
}
.chart-action-button:hover{
  background:#f5f5f5;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.chart-resize-button{
  cursor:nwse-resize;
}
.mobile-only{
  display:none !important;
}
@media (max-width:600px){
  .mobile-only{
    display:flex !important;
  }
  .desktop-only{
    display:none !important;
  }
}

.card-content{padding:0px;height:100%;}

/* Chart loader */
.chart-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.15);
  z-index:900; /* above chart, below action buttons */
  pointer-events:none;
}
.chart-spinner{
  width:46px;
  height:46px;
  border:5px solid rgba(0,0,0,0.2);
  border-top-color: rgba(33,150,243,0.9);
  border-radius:50%;
  animation: chart-spin 0.9s linear infinite;
}
@keyframes chart-spin{ to { transform: rotate(360deg);} }

#helpDataType{left:auto;right:auto;}

.modal-overlay{background:rgba(0,0,0,.2)!important;z-index:1150!important;}
.modal{z-index:1200!important;}

.menu-button{
  position:fixed;left:8px;right:auto;top:48px;display:flex;
  width:30px;height:30px;border-radius:4px;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:1200;
  transition:left 0.3s ease;
}
body.controls-open .menu-button{
  left:calc(var(--side-panel-width, 320px) + 8px);
}
.menu-button i{font-size:22px;}

/* Put the data-type help next to the Category label */
.data-cat{position:relative;}
.data-cat label{display:flex; align-items:center; gap:6px;}
#helpDataType.help-button{
  position: static !important;
  width:20px;height:20px;
  font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

.ratio-600-350{
  position:relative;
  width:100%;
  aspect-ratio:600 / 350;
  max-height:100%;
}
.ratio-600-350>.card-content,
.ratio-600-350>canvas,
.ratio-600-350>.card-content>canvas{
  padding:0px;
  position:absolute;
  width:100%;
  height:100%;
  inset:0;  
}

@media (max-width:600px){
  .menu-button{display:flex;}
  .side-panel-container{
    top:44px;
    bottom:calc(33.33vh + 20px);
    width:100%;
    max-width:100%;
  }
  body.controls-open #map{
    left:0;
  }
  #map{top:44px;bottom:calc(33.33vh + 20px);}
  #map .maplayer-legend{ right:8px; width:140px; padding: 8px 8px 6px 8px; }
  .chart-container{
    left:0!important;
    right:0;
    bottom:0;
    width:100%!important;
    height:33.33vh!important;
    max-width:none!important;
    max-height:none!important;
    max-height:calc(100vh - 44px);
  }
  #detailChartContainer.mobile-overlay{
    left:0!important;
    right:0!important;
    width:100%!important;
    height:33.33vh!important;
    max-height:calc(100vh - 44px);
  }
  #detailChartContainer.mobile-overlay .mobile-only{
    display:flex !important;
  }
  .chart-resize-button{
    display:none !important;
  }
}

/* Force portrait layout on mobile regardless of orientation */
@media (max-width:600px) and (orientation:landscape){
  /* Override landscape rules - use portrait layout */
  .side-panel-container{
    top:44px;
    width:100%;
    max-width:100%;
    /* bottom handled by JS */
  }
  body.controls-open #map{
    left:0;
  }
  /* bottom handled by JS */
  #map{top:44px;}
  #map .maplayer-legend{ right:8px; width:140px; padding: 8px 8px 6px 8px; }
  .chart-container{
    left:0!important;
    right:0;
    bottom:0;
    width:100%!important;
    height:33.33vh!important;
    max-width:none!important;
    max-height:none!important;
    max-height:calc(100vh - 44px);
  }
  #detailChartContainer.mobile-overlay{
    left:0!important;
    right:0!important;
    width:100%!important;
    height:33.33vh!important;
    max-height:calc(100vh - 44px);
  }
  #detailChartContainer.mobile-overlay .mobile-only{
    display:flex !important;
  }
  .chart-resize-button{
    display:none !important;
  }
}

@media (max-width:900px) and (orientation:landscape) and (min-width:601px){
  .menu-button{display:flex;}
  .side-panel-container{
    top:44px;
    bottom:calc(33.33vh + 20px);
    width:50%;
    max-width:320px;
  }
  /* Landscape tablets: side panel limited by charts */
  body.controls-open #map{
    left:50%;
  }
  #map{position:fixed;top:44px;bottom:calc(33.33vh + 20px);left:0;right:50%;}
  #map .maplayer-legend{ right:8px; width:140px; padding: 8px 8px 6px 8px; }
  .chart-container{
    left:auto!important;
    right:0;
    bottom:0;
    width:50%!important;
    height:33.33vh!important;
    max-width:none!important;
    max-height:none!important;
  }
  #detailChartContainer{
    left:auto!important;
    right:0;
  }
  /* Landscape tablet: logos at bottom right, no container */
  #logosBox{
    position:fixed !important;
    bottom:20px !important;
    right:20px !important;
    background:transparent !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    z-index:910;
  }
}

#logosBox{
  position:fixed;
  z-index:910;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  transition:all 0.3s ease;
  /* Small white background for logos */
  background:#fff;
  padding:8px;
  border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  /* All positioning handled by JS */
}
#logosBox .logo{
  width:clamp(60px, 6vw, 120px);
  height:auto;
}
/* Mobile chart toggle button */
.chart-toggle-button{
  display:none;
}
@media (max-width:600px){
  .chart-toggle-button{
    display:block;
    position:fixed;
    z-index:915;
    background:#2196F3;
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:4px;
    box-shadow:0 2px 4px rgba(0,0,0,0.3);
    font-size:0.9rem;
    cursor:pointer;
    white-space:nowrap;
    transition:bottom 0.3s ease;
    left:10px;
    /* Position handled by JS */
  }
  .chart-toggle-button:hover{
    background:#1976D2;
    box-shadow:0 3px 6px rgba(0,0,0,0.4);
  }
  #chartContainer.charts-hidden{
    transform:translateY(calc(100% + 60px));
  }
}

.custom-index-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.custom-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.custom-index-editor textarea {
  min-height: 90px;
}

.custom-index-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.custom-index-interval {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.custom-index-radio {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.custom-index-saved-title {
  font-weight: 600;
  margin-top: 0.25rem;
}

.custom-index-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.custom-index-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.custom-index-name {
  margin: 0;
}

.custom-index-latex {
  font-size: 0.9rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-index-select {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}