#map {
   position: absolute;
   left: 0%;
   width: 100%;
   height: 100%;
   border-style: solid;
   border-color: black;
   border-width: thin;
   z-index: 0;

 }

 .cefi-map-logo {
   width: 132px;
   padding: 6px 8px;
   background: rgb(255, 254, 254);
   border: 1px solid rgba(255, 255, 255, 0.32);
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
   cursor: pointer;
 }

 .cefi-map-logo:focus-visible {
   outline: 2px solid #fff;
   outline-offset: 2px;
 }

 .cefi-map-logo img {
   display: block;
   width: 100%;
   height: auto;
 }

 #map-anomaly-secondary {
   position: absolute;
   top: 0;
   left: 50%;
   width: 50%;
   height: 100%;
   z-index: 0;
   display: none;
 }

 #map-anomaly-divider {
   position: absolute;
   top: 0;
   left: 50%;
   width: 6px;
   height: 100%;
   transform: translateX(-50%);
   cursor: ew-resize;
   background: linear-gradient(180deg,
       rgba(15, 23, 42, 0.2) 0%,
       rgba(15, 23, 42, 0.35) 50%,
       rgba(15, 23, 42, 0.2) 100%);
   box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
   z-index: 900;
   display: none;
 }

 #map-anomaly-divider .anomaly-divider-hint {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid rgba(15, 23, 42, 0.25);
   border-radius: 999px;
   padding: 0;
   pointer-events: none;
   user-select: none;
 }

 #map-anomaly-divider .anomaly-divider-hint svg {
   width: 16px;
   height: 16px;
   stroke: #0f172a;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
   fill: none;
 }

 body.cefi-anomaly-split-active #map {
   right: auto;
 }

 body.cefi-anomaly-split-active #map-anomaly-secondary,
 body.cefi-anomaly-split-active #map-anomaly-divider {
   display: block;
 }

 body.cefi-anomaly-split-active #map .leaflet-control-attribution {
   display: none;
 }

 body.cefi-anomaly-split-active #map-anomaly-secondary .leaflet-control-attribution {
   display: block;
 }

 .anomaly-secondary-map .leaflet-control-container {
   display: block;
 }

 /* Panels wrapper container - aligns all side panels */
 .panels-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   width: auto;
   height: 100%;
   pointer-events: none;
   z-index: 2147483000;
 }

 .panels-wrapper>* {
   pointer-events: auto;
 }

 /* Align all side panels to the right with consistent spacing */
 .cbc-panel,
 .timeline,
 .leaflet-control-geocoder-form,
 .social-extra-buttons,
 #info-panel {
   height: fit-content;
   /* position: relative !important; */
   z-index: 2147483000 !important;
   width: min(480px, calc(100vw - 32px));
   max-width: 560px;
   margin: 5px;
   margin-block: 0px;
   padding: 16px;
 }

 .cefi-download-panel {
   height: fit-content !important;
   width: min(420px, calc(100vw - 32px)) !important;
   max-width: calc(100vw - 32px) !important;
   min-height: 0;
   margin: 0;
   padding: 20px !important;
   color: #24324a;
   background: #ffffff;
   border: 1px solid #f0f0f0;
   border-radius: 8px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
   box-sizing: border-box;
 }

 .cefi-download-header,
 .cefi-download-years-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
 }

 .cefi-download-header strong,
 .cefi-download-years-heading>span {
   display: block;
   font-size: 17px;
   font-weight: 700;
 }

 .cefi-download-header span {
   display: block;
   margin-top: 3px;
   color: #64748b;
   font-size: 13px;
 }

 .cefi-download-close {
   border: 0;
   background: transparent;
   color: #64748b;
   cursor: pointer;
   font-size: 24px;
   line-height: 1;
 }

 .cefi-download-formats {
   display: grid;
   gap: 10px;
   margin: 20px 0 18px;
   border: 0;
   padding: 0;
 }

 .cefi-download-formats legend {
   margin-bottom: 7px;
   color: #64748b;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
 }

 .cefi-download-formats label,
 .cefi-download-years-heading label {
   font-size: 14px;
 }

 .cefi-download-years-heading {
   border-top: 1px solid #e2e8f0;
   padding-top: 18px;
 }

 .cefi-download-years {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
   max-height: min(360px, calc(100vh - 430px));
   margin: 12px 0 18px;
   overflow-y: auto;
   padding: 2px;
 }

 .cefi-download-year {
   padding: 9px 4px;
   border: 1px solid transparent;
   border-radius: 7px;
   background: #f1f5f9;
   font-size: 12px;
   text-align: center;
 }

 .cefi-download-year:has(input:checked) {
   border-color: #3156bd;
   background: #e8efff;
 }

 .cefi-download-submit {
   width: 100%;
   border: 0;
   border-radius: 8px;
   padding: 12px 14px;
   background: #003399;
   color: #fff;
   cursor: pointer;
   font-size: 14px;
   font-weight: 700;
 }

 .cefi-download-submit:hover {
   background: #172554;
 }

 .cefi-download-status {
   min-height: 18px;
   margin: 10px 0 0;
   color: #64748b;
   font-size: 12px;
 }

 .info-download-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   margin-left: 7px;
   padding: 0;
   border: 1px solid rgba(0, 51, 153, 0.25);
   border-radius: 50%;
   background: #fff;
   color: #003399;
   cursor: pointer;
   vertical-align: middle;
 }

 .info-download-btn:hover {
   background: #003399;
   color: #fff;
 }

 .info-download-btn svg {
   width: 15px;
   height: 15px;
 }

 /* masks-extra-buttons must shrink to its category buttons, not the shared side-panel width */
 .masks-extra-buttons {
   height: fit-content;
   z-index: 2147483000 !important;
   width: fit-content;
   margin: 5px;
   margin-block: 0px;
 }

 /* Ensure geocoder control stays aligned */
 .leaflet-control-geocoder {
   right: auto;
 }

 #layer {
   position: relative;
   width: 70%;
 }

 #attributes {
   position: relative;
   width: 70%;
 }

 #operator {
   position: relative;
   width: 70%;
 }

 #value {
   position: relative;
   width: 70%;
 }

 #table_data {
   position: absolute;
   bottom: 0%;
   overflow: scroll;
   left: 0%;
   right: 0%;
   height: 0%;
   border: 1px solid #4CAF50;
 }

 #table {
   white-space: nowrap;
   grid-template-areas: "head-fixed" "body-scrollable";
 }


 #table th {
   position: -webkit-sticky;
   /* for Safari */
   position: sticky;
   top: 0px;
   background-color: rgb(122, 209, 100);
 }

 #wms_layers_btn {
   position: absolute;
   z-index: 600;
   top: 1%;
   left: 30%;
 }

 #query_panel_btn {
   position: absolute;
   z-index: 600;
   top: 1%;
   left: 10%;
 }

 #legendHS_btn {
   position: absolute;
   z-index: 600;
   bottom: 3%;
   right: 0%;
 }

 #table_wms_layers {
   white-space: nowrap;
   grid-template-areas: "head-fixed" "body-scrollable";
 }

 #table_wms_layers th {
   position: -webkit-sticky;
   /* for Safari */
   position: sticky;
   top: 0px;
   background-color: rgb(122, 209, 100);
 }

 .modal-dialog {
   max-width: 60% !important;
   height: 60% !important;
   top: 18% !important;


 }

 .form-select {
   left: 0%;
   width: 85% !important;

 }

 .form-control {
   left: 0%;
   width: 85% !important;

 }

 .leaflet-popup-content {
   width: auto !important;
 }

 #clear_btn {
   position: absolute;
   z-index: 500;
   top: 1%;
   left: 50%;

 }

 #info_btn {
   position: absolute;
   z-index: 500;
   top: 1%;
   left: 80%;

 }

 .container {
   width: 100%;
   /* Full width of the parent */
   max-width: 800px;
   /* Optional: set a max width */
   margin: 0 auto;
   /* Center align */
 }

 .row {
   display: flex;
   /* Use flexbox to arrange columns horizontally */
 }

 .column {
   flex: 1;
   /* Each column takes an equal share of the row */
   padding: 10px;
   /* Add padding as needed */
 }

 .single-column {
   width: 100%;
   /* Full width for the single column */
   padding: 10px;
   /* Add padding as needed */
 }

 .responsive {
   width: 100%;
   /* Makes the image responsive */
   height: auto;
   /* Maintain aspect ratio */
 }

 .menuPanel-inner {
   zoom: 60%;
   display: none !important;
 }

 .menuPanel {
   position: fixed;
   /* Makes the panel float on the page */
   top: 10px;
   /* Distance from the top */
   left: 10px;
   /* Distance from the left */
   width: auto;
   /* Set a width for your panel */
   background-color: transparent;
   /* White background with transparency */
   border: 0px solid #ccc;
   /* Optional border */
   border-radius: 5px;
   /* Optional rounded corners */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   /* Optional shadow for a subtle effect */
   padding: 10px;
   /* Padding inside the panel */
   z-index: 2147483000 !important;
   /* Ensures it stays on top of other elements */
   opacity: 0.9;
   pointer-events: auto;
 }

 .bold {
   font-weight: bold;
   color: rgb(0, 0, 0);
   font-size: small;
 }

 /* legend temperatures */
 .legendHS {
   width: fit-content;
   height: 280px;
   position: fixed;
   /* Makes the panel float on the page */
   bottom: 10px;
   /* Distance from the top */
   /* right: 10px; */
   /* Set a width for your panel */
   background-color: rgba(255, 255, 255, 0.8);
   /* White background with transparency */
   border: 1px solid #e5e5e5;
   /* Optional border */
   border-radius: 10px;
   /* Optional rounded corners */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   /* Optional shadow for a subtle effect */
   padding: 10px;
   /* Padding inside the panel */
   z-index: 1000;
   /* Ensures it stays on top of other elements */
   opacity: 0.9;
   pointer-events: auto;
   zoom: var(--panel-zoom);
 }

 .legendCefi {
   width: 170px;
   min-width: 170px;
   height: auto;
   box-sizing: border-box;
   position: fixed;
   bottom: 10px;
   left: 10px;
   background-color: #ffffff;
   border: 1px solid #d1d5db;
   border-radius: 14px;
   box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
   padding: 14px 14px 12px;
   z-index: 1000;
   opacity: 1;
   pointer-events: auto;
   zoom: var(--panel-zoom);
   display: block;
 }

 .legendAnom {
   width: 170px;
   min-width: 170px;
   height: auto;
   box-sizing: border-box;
   position: relative;
   background-color: #ffffff;
   border: 1px solid #d1d5db;
   border-radius: 14px;
   box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
   padding: 14px 14px 12px;
   z-index: 401;
   opacity: 1;
   pointer-events: auto;
   zoom: var(--panel-zoom);
   display: none;
 }

 body.cefi-anomaly-split-active .legendAnom {
   display: block;
 }

 .anomaly-secondary-map .leaflet-bottom.leaflet-left .legendAnom {
   margin: 0 0 10px 10px;
 }

 #legendAnom {
   font-family: Arial, sans-serif;
   font-size: 12px;
   line-height: 1.25;
 }

 #legendCefi {
   font-family: Arial, sans-serif;
   font-size: 12px;
   line-height: 1.25;
 }

 .legend-scale-title {
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 0.01em;
 }

 .legend-scale-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
 }

 .legend-scale-row {
   display: flex;
   align-items: center;
   min-height: 20px;
 }

 .legend-scale-label {
   width: 24px;
   text-align: right;
   font-size: 12px;
   font-weight: 500;
   color: #111827;
   font-variant-numeric: tabular-nums;
 }

 .legend-scale-line {
   flex: 1;
   height: 0;
   border-top: 1px solid #d1d5db;
   margin: 0 10px;
 }

 .legend-scale-swatch {
   width: 18px;
   height: 18px;
   border-radius: 3px;
   border: 1px solid #e5e7eb;
   box-sizing: border-box;
 }

 .legend-gradient-title {
   margin: 0;
   font-size: 26px;
   font-weight: 700;
   letter-spacing: 0.01em;
 }

 .legend-gradient-divider {
   margin: 8px 0 12px;
   border-top: 1px solid #d1d5db;
 }

 .legend-gradient-layout {
   display: flex;
   align-items: stretch;
   column-gap: 10px;
 }

 #legendCefi .legend-gradient-layout {
   height: 320px;
   min-height: 320px;
 }

 #legendAnom .legend-gradient-layout {
   height: 260px;
   min-height: 260px;
 }

 .legend-gradient-bar {
   width: 34px;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
   flex: 0 0 auto;
 }

 .legend-gradient-bar--cefi {
   background: linear-gradient(180deg,
       #4c11c5 0%,
       #2452f0 16%,
       #14aef2 32%,
       #21d8b4 46%,
       #8bf900 62%,
       #fff200 74%,
       #ff9800 86%,
       #ff3d00 94%,
       #af0000 100%);
 }

 .legend-gradient-bar--anom {
   background: linear-gradient(180deg,
       #08306b 0%,
       #3182bd 24%,
       #deebf7 42%,
       #ffffff 50%,
       #fc9272 62%,
       #cb181d 78%,
       #67000d 100%);
 }

 .legend-gradient-ticks {
   list-style: none;
   margin: 0;
   padding: 0;
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .legend-gradient-ticks li {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .legend-gradient-tick-line {
   width: 14px;
   border-top: 1px solid #c4c4c4;
 }

 .legend-gradient-tick-label {
   font-size: 15px;
   font-weight: 500;
   color: #111827;
   font-variant-numeric: tabular-nums;
 }

 #legendHS {
   padding: 10px;
   font-family: Arial, sans-serif;
 }

 #legendHS h3 {
   margin: 0 0 10px 0;
 }

 #legendHS ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
 }

 #legendHS li {
   margin: 5px 0;
   display: flex;
   align-items: center;
 }

 .color-box {
   white-space: nowrap;
   width: 20px;
   height: 20px;
   margin-right: 10px;
   border: 1px solid #000;
 }

 .temperature-chart {
   display: block;
   width: 100% !important;
   height: 340px !important;
 }

 .temperature-chart.cefi-multi-indicator-chart {
   height: 455px !important;
 }

 #legendTM #legendRoutes {
   left: 430px !important;
   height: auto !important;
 }

 .routingAnalysis {
   background-color: rgba(255, 255, 255, 0.8);
 }

 #legendTMMulti {
   left: 460px !important;
   height: auto !important;
 }

 .routing-panel input {
   padding: 4px;
 }

 .legendRoutes {
   display: block;
   position: fixed;
   bottom: 10px !important;
   left: 430px !important;
   transform: translateX(-50%);
   width: 250px !important;
   /* Set a width for your panel */
   background-color: rgba(255, 255, 255, 0.8);
   /* White background with transparency */
   border: 0px solid #ccc;
   /* Optional border */
   border-radius: 5px;
   /* Optional rounded corners */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   /* Optional shadow for a subtle effect */
   padding: 10px;
   /* Padding inside the panel */
   z-index: 1000;
   /* Ensures it stays on top of other elements */
   opacity: 0.9;
   pointer-events: auto;
   z-index: 9999;
   min-height: 235px !important;
 }


 /* legend temperatures */
 .legendTM.legendTMClassify {
   white-space: nowrap;
   position: fixed;
   bottom: 10px !important;
   left: 350px !important;
   height: auto;
   width: 320px;
   /* Set a width for your panel */
   background-color: rgba(255, 255, 255, 0.8);
   /* White background with transparency */
   border: 0px solid #ccc;
   /* Optional border */
   border-radius: 5px;
   /* Optional rounded corners */
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   /* Optional shadow for a subtle effect */
   padding: 10px;
   /* Padding inside the panel */
   z-index: 1000;
   /* Ensures it stays on top of other elements */
   opacity: 0.9;
   pointer-events: auto;
   zoom: var(--panel-zoom);
 }

 .legendTM {
   white-space: nowrap;
   position: relative;
   bottom: 270px !important;
   left: 0px !important;
   height: auto;
   width: auto;
   /* Modern clean white background */
   background-color: #ffffff;
   /* Remove transparency - solid white */
   opacity: 1;
   /* Subtle shadow for depth */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   /* Smooth rounded corners */
   border-radius: 8px;
   /* Clean white border */
   border: 1px solid #f0f0f0;
   /* Adequate padding */
   padding: 20px;
   /* Modern font styling */
   font-family: 'Montserrat', sans-serif;
   z-index: 1000;
   /* Ensures it stays on top of other elements */
   pointer-events: auto;
 }

 .legendSocioDem {
   display: block;
   position: fixed;
   top: 150px;
   left: 10px;
   transform: translateX(-50%);
   z-index: 9999;
 }

 #temperatureLegendChartTypical {
   padding-top: 0px;
 }

 /* legend temperatures */
 .legendTMMulti {
   position: relative;
   /* Makes the panel float on the page */
   bottom: 320px !important;
   left: 0px !important;
   /* height: 285px !important; */
   /* Distance from the left */
   width: auto;
   /* Modern clean white background */
   background-color: #ffffff;
   /* Remove transparency - solid white */
   opacity: 1;
   /* Subtle shadow for depth */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   /* Smooth rounded corners */
   border-radius: 8px;
   /* Clean white border */
   border: 1px solid #f0f0f0;
   /* Adequate padding */
   padding: 20px;
   /* Modern font styling */
   font-family: 'Montserrat', sans-serif;
   z-index: 1000;
   /* Ensures it stays on top of other elements */
   pointer-events: auto;
   zoom: var(--panel-zoom);
 }

 #temperatureLegend {
   position: relative;
   width: 500px;
   background-color: #ffffff;
   opacity: 1;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   border: 1px solid #e5e5e5;
   padding: 15px;
   font-family: 'Montserrat', sans-serif;
   zoom: var(--panel-zoom);
 }

 .unified-panel #temperatureLegend {
   width: 100%;
   max-width: none;
   padding: 12px;
 }

 #temperatureLegendChart {
   padding: 10px;
   width: 400px;
 }

 #temperatureLegendChartHot,
 #temperatureLegendChartTypical {
   background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   border: 1px solid #e5e5e5;
   padding: 15px;
   font-family: 'Montserrat', sans-serif;
   margin-bottom: 12px;
 }

 .unified-panel #temperatureLegendChartHot,
 .unified-panel #temperatureLegendChartTypical {
   width: 100%;
   max-width: none;
 }

 #temperatureLegend h3 {
   margin: 0 0 10px 0;
   color: #333;
 }

 .temperature-day-title {
   display: inline-block;
   margin: 8px 0 10px;
   padding: 6px 10px;
   background: #f8fafc;
   border: 1px solid #e5e5e5;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   color: #2c3e50;
 }

 .temperature-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 5px 0;
   padding: 5px;
   width: 100%;
   height: 24px;
 }

 .temperature-value.hot {
   background-color: #b00000;
 }

 .temperature-item.average {
   background-color: #FFA500;
 }

 .temperature-item.typical {
   background-color: #FFD700;
   /* Gold */
 }

 .hot {
   color: #FF0000;
 }

 .normal {
   color: rgb(0, 0, 0);
 }

 .bold {
   font-weight: bold;
 }

 .temperature-value {
   font-weight: bold;
   width: 100px;
 }

 .temperature-label {
   white-space: nowrap;
   width: 50px;
   background-color: transparent;
 }

 .temperature-labelT {
   text-align: right;
   white-space: nowrap;
   width: 50px;
   background-color: transparent;
 }

 .temperature-space {
   max-width: 5px;
 }

 .temperature-labelTBold {
   text-align: right;
   white-space: nowrap;
   font-weight: bold;
   width: 50px;
   background-color: transparent;
 }

 /* Satellite layer grayscale when shadow analysis is active */
 .satellite-grayscale {
   filter: grayscale(100%);
   transition: filter 0.4s ease;
 }

 .temperature-bar {
   padding: 0.01em 5px !important;
   width: 30%;
   height: 24px;
   white-space: nowrap;
   display: flex;
   justify-content: flex-start;
   /* align horizontally to the left */
   align-items: center;
   /* vertically center the content */
   height: 100px;
   /* or your desired height */
   width: 200px;
   /* or your desired width */
   /* border: 1px solid #000; */
   /* optional, for visualization */
   font-weight: 600 !important;
   text-shadow:
     0 1px 2px rgba(0, 0, 0, 0.7),
     0 0 4px rgba(0, 0, 0, 0.5) !important;
 }


 .highlighted-date {
   color: orange;
   /* Highlight date */
   font-weight: bold;
 }

 #temperatureLegend .temperature-item {
   display: flex;
   width: 100%;
   margin-bottom: 8px;
   /* optional: space between rows */
 }

 /* Set column widths for each span based on position */
 #temperatureLegend .temperature-item span:nth-child(1) {
   width: 10%;
   text-align: left;
 }

 #temperatureLegend .temperature-item span:nth-child(2) {
   width: 50%;
   text-align: center;
 }

 #temperatureLegend .temperature-item span:nth-child(3) {
   width: 40%;
   text-align: right;
 }


 .rowLegend {
   display: flex;
   width: 100%;
   /* or fixed width if preferred */
   align-items: center;
   height: 50px;
   /* or your desired height */
   border: 1px solid #000;
   /* optional border for clarity */
 }

 /* Column 1: small font */
 .column.temp {
   max-width: 10px;
   font-size: smaller;
   text-align: left;
   padding-left: 5px;
 }

 /* Column 2: background fill based on percentage -- set via inline style or class */
 .column.fill {
   width: 100%;
   /* default, will override inline style */
   height: 20px;
   /* height of the background bar */
   background-color: #4CAF50;
   /* fill color */
   transition: width 0.5s ease;
   /* smooth fill transition */
   margin: 0 10px;
 }

 /* Column 3: label aligned right */
 .column.label {
   width: 100%;
   text-align: right;
   padding-right: 5px;
   font-weight: bold;
 }


 /* Modal overlay */
 .modal {
   position: fixed;
   z-index: 2147483647;
   inset: 0;
   width: 100vw;
   height: 100vh;
   min-width: 100%;
   min-height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
   overflow: hidden;
   background: rgba(15, 23, 42, 0.35);
   backdrop-filter: blur(2px);
   isolation: isolate;
 }

 .modal.hidden {
   display: none;
 }

 .modal-backdrop {
   position: absolute;
   inset: 0;
   background: transparent;
   z-index: 0;
 }

 /* Modal box */
 .modal-content {
   position: relative;
   z-index: 1;
   width: calc(100% - 32px);
   max-width: 320px;
   border-radius: 18px;
   background: #ffffff;
   border: 1px solid rgba(148, 163, 184, 0.35);
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
   padding: 16px;
 }

 .modal-title {
   font-size: 14px;
   font-weight: 700;
   color: #0f172a;
   margin-bottom: 8px;
 }

 .messageModal {
   font-size: 12px;
   line-height: 1.45;
   color: #475569;
   margin: 0 0 14px;
 }

 .modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
 }

 .modal-close-button {
   border: 0;
   border-radius: 10px;
   padding: 8px 12px;
   font-size: 12px;
   cursor: pointer;
   background: #e2e8f0;
   color: #0f172a;
 }

 .modal-close-button:hover {
   background: #cbd5e1;
 }

 /* Styles for the image and bar graph */
 .ClassificationPanel {
   top: 10px;
   position: fixed;
   left: 10px;
   width: fit-content;
   height: fit-content;
   background-color: #ffffff;
   opacity: 1;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   border-radius: 8px;
   border: 1px solid #e5e5e5;
   padding: 8px;
   font-family: 'Montserrat', sans-serif;
   z-index: 1000;
   pointer-events: auto;
   zoom: 100%;
   overflow: none;
 }

 .ClassificationPanel .image-container {
   display: flex;
   /* flex-direction: column; */
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
   gap: 6px;
 }

 .ClassificationPanel .image-container img {
   margin-bottom: 0;
   max-width: clamp(110px, 18vh, 170px);
   width: 100%;
   height: auto;
 }

 .ClassificationPanel .image-container img.classification-zoomable-image {
   cursor: zoom-in;
 }

 .classification-image-lightbox {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 99999;
   padding: 24px;
 }

 .classification-image-lightbox-group {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   flex-wrap: wrap;
   max-width: 96vw;
   max-height: 92vh;
 }

 .classification-image-lightbox img {
   max-width: min(44vw, 900px);
   max-height: 92vh;
   width: auto;
   height: auto;
   object-fit: contain;
   border-radius: 8px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
 }

 .ClassificationPanel #classifyChart {
   width: 100% !important;
   max-width: clamp(180px, 30vh, 280px);
   height: auto !important;
   display: block;
   margin: 0 auto;
 }

 .bar-graph {
   display: flex;
   justify-content: space-around;
   width: 100%;
   max-width: 300px;
   margin-bottom: 10px;
 }

 .bar {
   width: 20px;
   height: 100px;
   display: inline-block;
 }

 .bar.red {
   background-color: red;
 }

 .bar.green {
   background-color: limegreen;
 }

 .bar.blue {
   background-color: deepskyblue;
 }

 .bar.yellow {
   background-color: yellow;
 }

 .bar.gray {
   background-color: gray;
 }

 .label {
   text-align: center;
   font-size: 14px;
   margin-top: 5px;
 }

 /* Style the main container */
 .custom-base-control {
   position: fixed;
   bottom: 20px;
   right: 8px;
   background: #fff;
   padding: 8px;
   font-family: Arial, sans-serif;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   font-size: 14px;
   z-index: 1000;
 }

 /* Style each checkbox-label pair in a row */
 .custom-base-control .checkbox-group {
   display: flex;
   align-items: center;
   margin-bottom: 4px;
 }

 /* Add spacing between checkbox and label */
 .custom-base-control input[type="checkbox"] {
   margin-right: 8px;
 }

 /* Style the label to stay inline */
 .custom-base-control label {
   cursor: pointer;
   margin: 0;
   /* optional reset */
 }

 .wait-socioDemTemp {
   position: absolute;
   top: 110px;
   left: 170px;
   z-index: 99;
 }

 .wait-socioDemStat {
   position: absolute;
   top: 420px;
   left: 170px;
   z-index: 99;
 }

 .wait-socioDemAvg {
   position: absolute;
   top: 710px;
   left: 170px;
   z-index: 99;
 }

 .socioDemTempOverlay {
   position: absolute;
   top: 45px;
   left: 5px;
   width: 490px;
   height: 255px;
   background: rgba(255, 255, 255, 0.6);
   cursor: not-allowed;
   display: block;
   z-index: 10;
 }

 .socioDemStatOverlay {
   position: absolute;
   top: 45px;
   left: 5px;
   width: 490px;
   height: 255px;
   background: rgba(255, 255, 255, 0.6);
   cursor: not-allowed;
   display: block;
   z-index: 10;
 }

 .socioDemTAvgOverlay {
   position: absolute;
   top: 45px;
   left: 5px;
   width: 490px;
   height: 255px;
   background: rgba(255, 255, 255, 0.6);
   cursor: not-allowed;
   display: block;
   z-index: 10;
 }

 .mouse-tooltip {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 18px;
 }

 .area-label-tooltip {
   background: rgba(255, 255, 255, 0.85);
   border: none;
   box-shadow: none;
   font-weight: bold;
   font-size: 13px;
   padding: 2px 6px;
   border-radius: 4px;
   color: #222;
   white-space: nowrap;
   pointer-events: none;
 }

 .area-label-tooltip::before {
   display: none;
 }

 .legendClassify {
   transform: translateX(-50%);
   z-index: 9999;
   position: fixed;
   bottom: 10px;
   left: 100px;
   width: 150px;
   /* Modern clean white background */
   background-color: #ffffff;
   /* Remove transparency - solid white */
   opacity: 1;
   /* Subtle shadow for depth */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   /* Smooth rounded corners */
   border-radius: 8px;
   /* Clean white border */
   border: 1px solid #f0f0f0;
   /* Adequate padding */
   padding: 20px;
   /* Modern font styling */
   font-family: 'Montserrat', sans-serif;
   z-index: 1000;
 }

 .messageModal {
   font-size: x-large;
   ;
 }

 .play-btn {
   cursor: pointer;
   width: 32px;
   height: 32px;
   vertical-align: middle;
 }

 .play-btn:hover {
   transform: translateY(-2px) scale(1.03);
   filter: drop-shadow(0 0 6px rgba(0, 123, 255, 0.35));
   transition: .18s;
 }

 /* stato base del ring (vuoto) */
 .progress-ring {
   stroke-dasharray: 63;
   /* approx 2πr where r=10 -> 62.8 */
   stroke-dashoffset: 63;
   /* start = empty */
 }

 /* classe che fa partire il disegno in 5s */
 .animate-ring {
   animation: drawRing 5s linear forwards;
 }

 @keyframes drawRing {
   from {
     stroke-dashoffset: 63;
   }

   to {
     stroke-dashoffset: 0;
   }
 }

 .socioDemPanel-container {
   position: fixed;
   bottom: 10px;
   left: 11px;
   display: flex;
   flex-direction: row;
   gap: 20px;
   z-index: 1000;
   zoom: var(--panel-zoom);
   /* Modern clean white background */
   background-color: #ffffff;
   /* Remove transparency - solid white */
   opacity: 1;
   /* Subtle shadow for depth */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   /* Smooth rounded corners */
   border-radius: 8px;
   /* Clean white border */
   border: 1px solid #f0f0f0;
   /* Adequate padding */
   padding: 20px;
   /* Modern font styling */
   font-family: 'Montserrat', sans-serif;
 }

 .socioDemPanel {
   position: relative;
   width: 500px;
   /* Modern clean white background */
   background-color: #ffffff;
   /* Remove transparency - solid white */
   opacity: 1;
   /* Smooth rounded corners */
   border-radius: 8px;
   /* Subtle inner shadow for depth */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   /* Clean divider border */
   border: 1px solid #e5e5e5;
   /* Adequate padding */
   padding: 15px;
 }

 .socioDemPanel canvas {
   width: 100%;
   height: auto;
 }

 #socioDemPanel {
   padding: 10px;
   width: 400px;
   font-family: Arial, sans-serif;
 }

 /*small*/
 @media (max-height: 100px) {
   .socioDemPanel-container {
     position: fixed;
     top: auto !important;
     /* 🔴 ANNULLA TOP */
     bottom: 0px !important;
     /* 🔴 FORZA IL BASSO */
     left: 0;
     /* width: 365px!important; */
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: flex-end;
     padding: 5px 10px;
     background: transparent;
     z-index: 9999;
   }

   .socioDemPanel {
     flex: 1;
     /* width: auto; */
     min-width: 0;
     /* height: auto; */
   }

   h4 {
     font-size: 13px;
     margin: 4px 0;
     text-align: center;
   }

   /* canvas {
    width: auto !important;
    height: auto !important;
  } */

   .legendSocioDem {
     display: block;
     position: fixed;
     top: 150px;
     left: 10px;
     transform: none;
     z-index: 9999;
   }

   .wait-socioDemStat {
     position: absolute;
     top: 20px;
     left: 100px;
     z-index: 99;
   }

   .wait-socioDemTemp {
     position: absolute;
     top: 20px;
     left: 100px;
     z-index: 99;
   }

   .wait-socioDemAvg {
     position: absolute;
     top: 20px;
     left: 100px;
     z-index: 99;
   }

   .socioDemTempOverlay {
     position: absolute;
     top: auto;
     left: 5px;
     width: 310px;
     height: 150px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
     bottom: 10px;
   }

   .socioDemStatOverlay {
     position: absolute;
     top: auto;
     left: 5px;
     width: 310px;
     height: 150px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
     bottom: 10px;
   }

   .socioDemTAvgOverlay {
     position: absolute;
     top: auto;
     left: 5px;
     width: 310px;
     height: 150px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
     bottom: 10px;
   }

 }

 /*BIG*/
 @media (min-height: 836px) {

   #socioDemTAvg {
     width: 480px !important;
   }

   #socioDemStat {
     width: 480px !important;
   }

   #socioDemTemp {
     width: 480px !important;
   }

   .wait-socioDemStat {
     position: absolute;
     top: 100px;
     left: 190px;
     z-index: 99;
   }

   .wait-socioDemTemp {
     position: absolute;
     top: 100px;
     left: 190px;
     z-index: 99;
   }

   .wait-socioDemAvg {
     position: absolute;
     top: 100px;
     left: 190px;
     z-index: 99;
   }

   .socioDemTempOverlay {
     position: absolute;
     top: 45px;
     left: 5px;
     width: 480px;
     height: 250px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
   }

   .socioDemStatOverlay {
     position: absolute;
     top: 45px;
     left: 5px;
     width: 480px;
     height: 250px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
   }

   .socioDemTAvgOverlay {
     position: absolute;
     top: 45px;
     left: 5px;
     width: 480px;
     height: 250px;
     background: rgba(255, 255, 255, 0.5);
     cursor: not-allowed;
     display: block;
     z-index: 10;
   }
 }

 .loading {
   position: fixed;
   /* Position it relative to the viewport */
   top: 0;
   /* Align to the top */
   left: 0;
   /* Align to the left */
   width: 100%;
   /* Full width */
   height: 100%;
   /* Full height */
   background-color: rgba(255, 255, 255, 0.8);
   /* Semi-transparent background */
   /* Use Flexbox for centering */
   justify-content: center;
   /* Center horizontally */
   align-items: center;
   /* Center vertically */
   z-index: 1000;
   /* Ensure it is above other content */
   display: none;
 }

 .leaflet-bar a {
   width: 40px !important;
   height: 40px !important;
   line-height: 40px !important;
 }

 /* CONTENITORE CONTROLLO */
 .leaflet-control-geocoder.leaflet-bar {
   box-shadow: none;
   border-radius: 0;
   background: transparent;
   border: 0;
 }

 /* BOTTONE GEOCODER */
 .leaflet-control-geocoder .leaflet-control-geocoder-icon {
   display: none !important;
 }

 /* ALLINEAMENTO CON ALTRI CONTROLLI */
 .leaflet-control-geocoder button {
   width: 40px;
   height: 40px;
 }

 /* INPUT SEARCH (quando aperto) */
 .leaflet-control-geocoder .leaflet-control-geocoder-form {
   display: none;
 }

 .leaflet-control-geocoder.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
   display: inline-block !important;
 }

 .leaflet-control-geocoder-form input {
   height: 40px;
   width: 246px;
   font-size: 16px;
   padding: 0 10px;
   border: 0;
   border-radius: 12px 0 0 12px;
   background: transparent;
 }

 /* RIMUOVE STILI CHE BLOCCANO IL RESIZE */
 .leaflet-control-geocoder-icon::before {
   display: none;
 }

 /*-----------------*/
 /* ============================= */
 /* CONTAINER BASE (40x40)        */
 /* ============================= */
 .custom-base-control {
   position: relative;
   /* 🔑 riferimento per il panel */
   width: 40px;
   height: 40px;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
   padding: 0;
   margin: 0;
   bottom: 0px;
   right: 0px;
 }

 /* ============================= */
 /* TOGGLE BUTTON                 */
 /* ============================= */
 .custom-base-control .cbc-toggle {
   width: 40px;
   height: 40px;

   display: flex;
   align-items: center;
   justify-content: center;

   padding: 0px;
   margin: 8px;

   border: none;
   background: transparent !important;
   cursor: pointer;
 }

 .custom-base-control.open .cbc-toggle {
   color: #0078ff;
 }

 /* ============================= */
 /* PANEL (CHIUSO)                */
 /* ============================= */
 .custom-base-control .cbc-panel {
   position: absolute;
   top: 0;
   right: 40px;
   /* 🔑 si apre a SINISTRA */

   display: none;
   min-width: 206px;
   padding: 10px;

   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);

   z-index: 1000;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel,
 .cbc-panel.layer-calendar-panel {
   min-width: 248px;
   padding: 8px;
   border-radius: 16px;
   border: 1px solid rgba(148, 163, 184, 0.28);
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-panel-head,
 .cbc-panel.layer-calendar-panel .layer-panel-head {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 2px 4px 8px;
   margin-bottom: 2px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.28);
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-series-title,
 .cbc-panel.layer-calendar-panel .layer-series-title {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   color: #3b5fd9;
   border-radius: 999px;
   background: #e5ecff;
   flex: 0 0 auto;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-series-sep,
 .cbc-panel.layer-calendar-panel .layer-series-sep {
   width: 1px;
   height: 18px;
   background: rgba(148, 163, 184, 0.45);
   flex: 0 0 auto;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-panel-title,
 .cbc-panel.layer-calendar-panel .layer-panel-title {
   font-size: 12px;
   font-weight: 700;
   color: #1f2937;
   letter-spacing: 0.02em;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-panel-body,
 .cbc-panel.layer-calendar-panel .layer-panel-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-row,
 .cbc-panel.layer-calendar-panel .layer-row {
   display: grid;
   grid-template-columns: 77px minmax(0, calc(100% - 77px));
   align-items: center;
   min-height: 24px;
   gap: 0;
   margin: 0;
   padding: 6px 8px;
   border-radius: 10px;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-row:nth-child(odd),
 .cbc-panel.layer-calendar-panel .layer-row:nth-child(odd) {
   background: rgba(255, 255, 255, 0.48);
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-name,
 .cbc-panel.layer-calendar-panel .layer-name {
   grid-column: 1;
   grid-row: 1;
   display: flex;
   align-items: center;
   margin: 0;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #334155;
   width: 77px;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-opacity-slider,
 .cbc-panel.layer-calendar-panel .layer-opacity-slider {
   grid-column: 2;
   grid-row: 1;
   display: block;
   align-self: center;
   width: 100%;
   height: 10px;
   margin: 0;
   -webkit-appearance: none;
   appearance: none;
   border-radius: 999px;
   background: linear-gradient(90deg, #cbd5e1 0%, #93c5fd 100%);
   outline: none;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-opacity-slider::-webkit-slider-thumb,
 .cbc-panel.layer-calendar-panel .layer-opacity-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 2px solid #ffffff;
   background: #1d4ed8;
   box-shadow: 0 1px 4px rgba(29, 78, 216, 0.35);
   cursor: pointer;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-opacity-slider::-moz-range-thumb,
 .cbc-panel.layer-calendar-panel .layer-opacity-slider::-moz-range-thumb {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border: 2px solid #ffffff;
   background: #1d4ed8;
   box-shadow: 0 1px 4px rgba(29, 78, 216, 0.35);
   cursor: pointer;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .layer-opacity-slider::-moz-range-track,
 .cbc-panel.layer-calendar-panel .layer-opacity-slider::-moz-range-track {
   height: 4px;
   border-radius: 999px;
   background: linear-gradient(90deg, #cbd5e1 0%, #93c5fd 100%);
 }

 /* ============================= */
 /* PANEL (APERTO)                */
 /* ============================= */
 .custom-base-control.open .cbc-panel {
   display: block;
 }

 .legend-hs {
   font-size: 11px;
 }

 .legend-hs h3 {
   margin: 0 0 6px;
   /* font-size: 18px; */
 }

 .legend-hs .panel-title {
   margin: 0 0 6px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
 }

 .legend-hs table {
   border-collapse: collapse;
 }

 .legend-hs td {
   padding: 2px 6px 2px 0;
   vertical-align: middle;
   white-space: nowrap;
 }

 .legend-hs .range {
   text-align: right;
   font-variant-numeric: tabular-nums;
 }

 .legend-hs .color-box {
   width: 18px;
   height: 10px;
   display: inline-block;
   border: 1px solid #e5e7eb;
   border-radius: 2px;
 }


 .legend-shared {
   display: flex;
   row-gap: 2px;
   column-gap: 10px;
   flex-wrap: wrap;
   font-size: 12px;
   margin-bottom: 8px;
   max-width: none;
 }

 .legend-item {
   display: flex;
   align-items: flex-start;
   gap: 6px;
 }

 .legend-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   flex: 0 0 10px;
 }

 .legend-label {
   flex: 1;
   min-width: 0;
   white-space: normal;
   overflow-wrap: anywhere;
 }

 /* =============clock================ */

 .timeline {
   width: min(360px, calc(100vw - 18px)) !important;
   min-width: 320px !important;
   max-width: min(360px, calc(100vw - 18px)) !important;
   transform: translateX(0%) !important;
   position: relative;
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   border: 1px solid rgba(148, 163, 184, 0.28);
   border-radius: 16px;
   box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
   padding: 8px;
   z-index: 2147483000 !important;
   display: none;
 }

 .timeline a {
   color: #1d4ed8 !important;
   font-size: inherit !important;
 }

 .timeline a:hover {
   color: #1e3a8a !important;
   font-size: inherit !important;
 }

 .timelineSelected {
   font-weight: bold;
   color: rgb(0, 0, 0);
   font-size: medium !important;
 }

 .square-clock {
   display: flex;
   align-items: center;
   padding: 6px 8px;
   background: rgba(255, 255, 255, 0.48);
   border-radius: 10px;
   border: 1px solid rgba(148, 163, 184, 0.2);
   width: 100%;
   min-width: 0;
   overflow-x: auto;
 }

 .timeline-hours {
   display: flex;
   align-items: center;
   /* gap: 8px; */
   flex: 1;
   min-width: 0;
 }

 .square-clock .time-link {
   position: relative;
   padding: 4px 7px;
   font-size: 11px;
   color: #1d4ed8;
   text-decoration: none;
   user-select: none;
   pointer-events: auto;
   white-space: nowrap;
   border-radius: 6px;
   transition: all 0.2s ease;
   cursor: pointer !important;
 }

 .square-clock .time-link:hover {
   background-color: rgba(59, 130, 246, 0.14);
   color: #1e3a8a;
 }

 .square-clock .time-link.active {
   font-weight: 700;
   color: #1f2937;
   background: #e5ecff;
 }

 .square-clock .play-btn {
   position: relative;
   width: 28px;
   height: 28px;
   cursor: pointer;
   fill: #222;
   flex-shrink: 0;
 }

 /* Stile per il pulsante time quando il play è attivo */
 #tool-time.playing {
   position: relative;
 }

 #tool-time.playing::before {
   content: '';
   position: absolute;
   top: 33.2%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 50px;
   height: 50px;
   border: 3.5px solid transparent;
   border-top-color: #007bff;
   border-right-color: #007bff;
   border-radius: 50%;
   animation: spinRing 5s linear infinite;
   pointer-events: none;
 }

 .square-clock-series {
   width: 100%;
   min-width: 0;
   max-width: 100%;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 0;
   padding: 4px 6px;
   /* border-radius: 999px; */
   background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
   border: 1px solid rgba(148, 163, 184, 0.25);
 }

 .time-series-head {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 2px 4px 8px;
   margin-bottom: 2px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.28);
 }

 .time-series-head-title {
   font-size: 12px;
   font-weight: 700;
   color: #1f2937;
   letter-spacing: 0.02em;
 }

 .time-series-body {
   display: flex;
   flex-direction: column;
   gap: 2px;
 }

 .time-series-top {
   display: none;
 }

 .time-series-title {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   line-height: 1;
   color: #3b5fd9;
   border-radius: 999px;
   background: #e5ecff;
   flex: 0 0 auto;
 }

 .time-series-title svg {
   width: 16px;
   height: 16px;
 }

 .time-series-current {
   font-size: 12px;
   font-weight: 600;
   color: #111827;
 }

 .time-series-row {
   display: flex;
   align-items: center;
   gap: 6px;
   width: 100%;
 }

 .time-series-center {
   display: flex;
   flex-direction: column;
   gap: 5px;
   flex: 1 1 auto;
   min-width: 0;
 }

 .time-series-sep {
   width: 1px;
   height: 18px;
   background: rgba(148, 163, 184, 0.45);
   flex: 0 0 auto;
 }

 .time-series-year-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 4px;
   flex-shrink: 0;
   width: 100%;
 }

 .ts-arrow {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border: 1px solid rgba(148, 163, 184, 0.4);
   border-radius: 999px;
   background: #f8fafc;
   color: #1f2937;
   cursor: pointer;
   padding: 0;
   transition: background 0.15s, color 0.15s, border-color 0.15s;
 }

 .ts-arrow:hover:not(:disabled) {
   background: #eef2ff;
   color: #1e40af;
   border-color: rgba(59, 130, 246, 0.5);
 }

 .ts-arrow:disabled {
   opacity: 0.3;
   cursor: default;
 }

 .time-series-year-label {
   font-size: 16px;
   font-weight: 600;
   color: #111827;
   min-width: 38px;
   text-align: center;
 }

 .time-series-year-select {
   width: 82px;
   min-width: 82px;
   height: 28px;
   border: 0;
   border-radius: 12px;
   text-align: center;
   font-size: 13px;
   font-weight: 600;
   color: #111827;
   background: #e5e7eb;
   padding: 0 22px 0 8px;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
 }

 .time-series-year-select:focus {
   outline: none;
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }

 .time-series-months {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   grid-template-rows: repeat(4, 20px);
   gap: 4px 5px;
   width: 100%;
   height: calc((4 * 20px) + (3 * 4px) + 10px);
   min-width: 0;
 }

 .time-series-months .time-link {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2px 4px;
   height: 20px;
   border-radius: 6px;
   color: #475569;
   font-weight: 500;
   font-size: 11px;
 }

 .time-series-months .time-link.active {
   background: #e5edff;
   color: #1d4ed8;
   font-size: 11px;
   font-weight: 600;
 }

 .time-series-months .time-link:hover {
   background: #e5edff;
   color: #1d4ed8;
   font-size: 11px;
 }

 .time-series-row .play-btn {
   width: 26px;
   height: 26px;
   padding: 5px;
   /* border-radius: 999px; */
   border: 1px solid rgba(148, 163, 184, 0.4);
   background: #f8fafc;
   fill: #1f2937;
   cursor: pointer;
   flex: 0 0 auto;
   align-self: flex-start;
 }

 .time-series-row .play-btn:hover {
   background: #eef2ff;
   fill: #1e40af;
 }

 .time-series-months::-webkit-scrollbar {
   display: none;
 }

 @keyframes spinRing {
   from {
     transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }


 /* ===================================================== */
 /* GLOBAL FONT OVERRIDE – SAFE VERSION                   */
 /* ===================================================== */

 html,
 body {
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 400;
   margin: 0;
   zoom: var(--panel-zoom);
   height: 100%;
   padding: 0;
   margin: 0;
 }

 /* Headings */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Montserrat', sans-serif !important;
   font-weight: 600 !important;
 }

 /* UI elements */
 button,
 input,
 select,
 textarea,
 .leaflet-container,
 .leaflet-control,
 .leaflet-popup-content,
 .w3-button,
 .w3-btn,
 .w3-bar,
 .w3-container,
 .w3-panel,
 .legendHS,
 .legendTM,
 .legendTMMulti,
 .legendRoutes,
 .legendClassify,
 .custom-base-control,
 .timeline,
 .square-clock,
 .mouse-tooltip {
   font-family: 'Montserrat', sans-serif !important;
 }

 /* Keep monospace where needed */
 code,
 pre,
 kbd,
 samp,
 .w3-code,
 .w3-codespan {
   font-family: Consolas, monospace !important;
 }

 .leaflet-container {
   font-family: 'Montserrat', sans-serif !important;
   font-size: 14px !important;
   line-height: 1.5 !important;
 }

 /* ============================================
   MODERN GLASSMORPHIC TOOLBAR
   ============================================ */

 /* TOOLBAR CONTAINER */
 .toolbar {
   position: fixed;
   top: 5px;
   right: 20px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
   border-radius: 999px;
   padding: 24px 12px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   display: flex;
   flex-direction: column;
   gap: 8px;
   align-items: center;
   z-index: 2147483647 !important;
   transition: all 0.3s ease;
   overflow: visible;
 }

 /* BUTTON */
 .tool-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   width: 76px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   transition: transform 0.2s ease;
 }

 .tool-btn:active:not(.active) {
   transform: scale(0.95);
 }

 #tool-filters.tool-btn:active {
   transform: none !important;
 }

 /* ICON CIRCLE */
 .icon-wrapper {
   width: 47px;
   height: 47px;
   border-radius: 50%;
   border: 2px solid rgb(0, 51, 153);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgb(0, 51, 153);
   background: rgba(255, 255, 255, 0.6);
   transition: all 0.25s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }

 .tool-btn:hover .icon-wrapper {
   background: rgb(0, 51, 153);
   color: #fff;
   box-shadow: 0 6px 20px rgba(0, 51, 153, 0.4);
   transform: translateY(-2px);
 }

 /* Active state */
 .tool-btn.active .icon-wrapper {
   background: rgb(0, 51, 153);
   color: #fff;
   border-color: rgb(0, 51, 153);
   box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.2);
 }

 /* SVG */
 .icon-wrapper svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
 }

 /* LABEL */
 .tool-label {
   font-size: 13px;
   font-weight: 500;
   color: #4b5563;
   text-align: center;
   line-height: 1.2;
   /* max-width: 65px; */
   transition: color 0.2s ease;
 }

 .tool-btn:hover .tool-label {
   color: #1f2937;
 }

 .tool-btn.active .tool-label {
   color: rgb(0, 51, 153);
   font-weight: 600;
 }

 .tool-btn.anomaly-active .icon-wrapper {
   background: rgb(0, 51, 153);
   color: #fff;
   border-color: rgb(0, 51, 153);
   box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.2);
 }

 .tool-btn.anomaly-active .tool-label {
   color: rgb(0, 51, 153);
   font-weight: 600;
 }

 /* Show only the requested toolbar buttons */
 .toolbar .tool-btn {
   display: none;
 }

 /* .toolbar #tool-multipoint  {
  display: block !important;
} */

 #tool-home,
 #tool-zoom-in,
 #tool-zoom-out,
 #tool-layers,
 #tool-time,
 #tool-demo,
 #tool-filters,
 #tool-cefi-anomaly,
 #tool-chatbot,
 #tool-info,
 #tool-cefi-download {
   display: flex !important;
 }

 /* Keep compare button visible as toolbar tool, but hide old Analysis label button */
 #tool-compare-window {
   display: flex !important;
 }

 .toolbar #tool-point,
 .toolbar #tool-multipoint {
   display: none !important;
 }

 #tool-chatbot {
   display: flex !important;
 }

 #tool-multipoint {
   position: relative;
 }

 #tool-multipoint {
   position: relative;
   overflow: visible !important;
 }

 #tool-multipoint .social-extra-buttons {
   position: absolute;
   top: 50%;
   left: auto;
   right: calc(100% + 20px);
   transform: translateY(-50%);
   margin-right: 0 !important;
   display: none;
   align-items: center;
   gap: 8px;
   pointer-events: auto !important;
   min-height: 40px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   padding: 6px 8px;
   z-index: 1010;
 }

 #tool-multipoint .social-extra-buttons .area-button,
 #tool-multipoint .social-extra-buttons .poly-button {
   width: 51px;
   min-height: 55px;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid #d1d5db;
   padding: 4px 2px;
 }

 #tool-multipoint .social-extra-buttons .area-button:hover,
 #tool-multipoint .social-extra-buttons .poly-button:hover {
   border-color: #ef4444;
 }

 .compare-actions-panel {
   display: none;
   width: 210px;
   max-width: calc(100vw - 130px);
   grid-template-columns: 1fr;
   gap: 6px;
   padding: 8px;
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 10px;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
   color: #1f2937;
 }

 .compare-actions-panel button {
   display: flex;
   align-items: center;
   gap: 8px;
   border: 1px solid #cbd5e1;
   border-radius: 8px;
   background: #f8fafc;
   color: #1f3b7a;
   font-size: 12px;
   font-weight: 650;
   line-height: 1.25;
   padding: 7px 9px;
   text-align: left;
   cursor: pointer;
 }

 .compare-actions-panel .analysis-action-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   color: #1f3b7a;
 }

 .compare-actions-panel .analysis-action-icon svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 .compare-actions-panel button:hover {
   border-color: #1f3b7a;
   background: #eaf2ff;
 }

 .compare-actions-panel button.active,
 .compare-actions-panel button.anomaly-active {
   border-color: #1f3b7a;
   background: #dbeafe;
   box-shadow: inset 0 0 0 1px rgba(31, 59, 122, 0.12);
 }

 .compare-window-panel {
   position: fixed;
   container-type: inline-size;
   container-name: cefi-window;
   /* Compensate the page zoom so Chart.js mouse coordinates match bullets. */
   zoom: calc(100% / var(--panel-zoom));
   width: 250px;
   max-width: calc(100vw - 24px);
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 12px;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
   z-index: 1060;
   color: #1f2937;
   overflow: hidden;
 }

 .compare-window-panel.cefi-download-hint-visible {
   overflow: visible;
 }

 .compare-window-panel.cefi-action-hint-visible {
   overflow: visible;
 }

 .cefi-point-window.cefi-panel-collapsed {
   height: auto !important;
   min-height: 0 !important;
   max-height: none !important;
 }

 .cefi-point-window.cefi-panel-collapsed .compare-window-body {
   display: block;
   height: auto !important;
   min-height: 0;
 }

 .cefi-point-window.cefi-panel-collapsed .cefi-point-summary-grid,
 .cefi-point-window.cefi-panel-collapsed .cefi-indicator-strip,
 .cefi-point-window.cefi-panel-collapsed .cefi-point-chart-wrap,
 .cefi-point-window.cefi-panel-collapsed .cefi-point-window-bullet-row,
 .cefi-point-window.cefi-panel-collapsed .compare-window-resize-handle {
   display: none !important;
 }

 .cefi-panel-action-anchor {
   position: relative;
   display: inline-flex;
 }

 .compare-window-collapse {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   padding: 0;
   color: #1f3b7a;
   background: transparent;
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 2px;
   cursor: pointer;
 }

 /* Raise above every other panel/layer while a hint is shown, since z-index is otherwise scoped to this panel's own stacking context. */
 .compare-window-panel.cefi-zoom-hint-visible {
   overflow: visible;
   z-index: 999999 !important;
 }

 .compare-window-panel.cefi-resize-hint-visible {
   overflow: visible;
   z-index: 999999 !important;
 }

 .compare-window-panel.compare-window-panel-zoomed {
   top: var(--cefi-zoom-top, 50%) !important;
   left: var(--cefi-zoom-left, 50%) !important;
   right: auto !important;
   bottom: auto !important;
   width: var(--cefi-zoom-width, min(1120px, calc(100vw - 48px))) !important;
   max-width: var(--cefi-zoom-max-width, calc(100vw - 48px)) !important;
   height: var(--cefi-zoom-height, min(760px, calc(100vh - 48px))) !important;
   max-height: var(--cefi-zoom-max-height, calc(100vh - 48px)) !important;
   transform: var(--cefi-zoom-transform, translate(-50%, -50%)) !important;
   z-index: 3000;
   overflow: visible;
 }

 .compare-window-panel.compare-window-panel-zoomed .compare-window-header {
   cursor: move;
 }

 .compare-window-panel.compare-window-panel-zoomed .compare-window-body {
   height: calc(100% - 38px);
   grid-template-rows: auto auto auto minmax(0, 1fr) auto;
 }

 .compare-window-panel.compare-window-panel-zoomed .cefi-point-chart-wrap {
   height: 100%;
   min-height: 360px;
 }

 .compare-window-panel.compare-window-panel-zoomed .temperature-chart {
   width: 100% !important;
   height: 100% !important;
 }

 .compare-window-panel.cefi-user-resized .compare-window-body {
   height: calc(100% - 38px);
   min-height: 0;
   box-sizing: border-box;
   grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
 }

 .compare-window-panel.cefi-user-resized .cefi-point-chart-wrap {
   height: 100%;
   min-height: 180px;
 }

 .compare-window-panel.cefi-user-resized .temperature-chart {
   height: 100% !important;
 }

 .cefi-point-window.compare-window-panel-zoomed .compare-window-body,
 .cefi-point-window.cefi-user-resized .compare-window-body {
   display: flex;
   flex-direction: column;
 }

 .cefi-point-window.compare-window-panel-zoomed .compare-window-body > *,
 .cefi-point-window.cefi-user-resized .compare-window-body > * {
   flex: 0 0 auto;
 }

 .cefi-point-window.compare-window-panel-zoomed .cefi-point-chart-wrap,
 .cefi-point-window.cefi-user-resized .cefi-point-chart-wrap {
   flex: 1 1 0;
   height: auto;
   min-height: 180px;
 }

 .compare-window-panel[data-map-target][data-dock='top-left'] {
   top: var(--compare-dock-top) !important;
   left: var(--compare-dock-left) !important;
   right: auto !important;
   bottom: auto !important;
 }

 #map-anomaly-secondary .compare-window-panel[data-map-target='anomaly'] {
   position: absolute !important;
 }

 .compare-window-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: rgba(0, 51, 153, 0.12);
   border-bottom: 1px solid rgba(0, 51, 153, 0.16);
   padding: 8px 10px;
   cursor: move;
   user-select: none;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
 }

 .compare-window-docked .compare-window-header {
   cursor: default;
 }

 .compare-window-header-actions {
   display: flex;
   align-items: center;
   gap: 4px;
   position: relative;
 }

 .compare-window-dock {
   border: 1px solid #94a3b8;
   background: #f8fafc;
   color: #334155;
   border-radius: 6px;
   cursor: pointer;
   font-size: 12px;
   line-height: 1;
   width: 22px;
   height: 20px;
   padding: 0;
 }

 .compare-window-dock:hover {
   background: #e2e8f0;
 }

 .compare-window-zoom-highlighted {
   border-color: #f59e0b;
   outline: 3px solid rgba(245, 158, 11, 0.35);
   animation: cefi-download-pulse 1.4s ease-in-out infinite;
 }

 .cefi-point-zoom-anchor {
   position: relative;
   display: inline-flex;
 }

 .cefi-point-zoom-hint {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   margin-top: 8px;
   width: 220px;
   max-width: calc(100vw - 48px);
   background: #fff7d6;
   color: #172033;
   border: 2px solid #f59e0b;
   font-size: 13px;
   line-height: 1.4;
   padding: 10px 12px;
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
   z-index: 999999;
 }

 .cefi-point-zoom-hint strong {
   display: block;
   margin-bottom: 3px;
   color: #9a3412;
   font-size: 14px;
 }

 .cefi-point-zoom-hint::after {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 6px solid transparent;
   border-bottom-color: #f59e0b;
 }

 .compare-window-resize-handle {
   position: absolute;
   top: auto;
   right: 0;
   bottom: 0;
   width: 20px;
   height: 20px;
   cursor: nwse-resize;
   z-index: 5;
 }

 .compare-window-resize-handle::after {
   content: '';
   position: absolute;
   right: 3px;
   bottom: 3px;
   width: 10px;
   height: 10px;
   background: repeating-linear-gradient(135deg,
       transparent 0 3px,
       rgba(0, 51, 153, 0.35) 3px 4px);
 }

 .compare-window-resize-handle.compare-window-resize-highlighted::after {
   background: repeating-linear-gradient(135deg,
       transparent 0 3px,
       #f59e0b 3px 4px);
   animation: cefi-resize-bounce 1.2s ease-in-out infinite;
 }

 @keyframes cefi-resize-bounce {

   0%,
   100% {
     transform: translateY(calc(-50% - 5px));
   }

   50% {
     transform: translateY(calc(-50% + 5px));
   }
 }

 .compare-window-resize-hint {
   position: absolute;
   top: 50%;
   left: 100%;
   transform: translateY(-50%);
   margin-left: 10px;
   width: 200px;
   max-width: calc(100vw - 48px);
   background: #fff7d6;
   color: #172033;
   border: 2px solid #f59e0b;
   font-size: 13px;
   line-height: 1.4;
   padding: 10px 12px;
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
   z-index: 999999;
   cursor: default;
 }

 .compare-window-resize-hint strong {
   display: block;
   margin-bottom: 3px;
   color: #9a3412;
   font-size: 14px;
 }

 .compare-window-resize-hint::after {
   content: '';
   position: absolute;
   top: 50%;
   right: 100%;
   transform: translateY(-50%);
   border: 6px solid transparent;
   border-right-color: #f59e0b;
 }

 .compare-window-resize-handle:hover::after {
   background: rgba(0, 51, 153, 0.5);
 }

 .compare-window-panel-zoomed .compare-window-resize-handle {
   display: block;
 }

 .info-panel {
   width: min(500px, calc(100vw - 32px)) !important;
   padding: 20px 22px !important;
   background: rgba(255, 255, 255, 0.97);
   border: 1px solid rgba(31, 59, 122, 0.14);
   border-radius: 14px;
   box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
   color: #1f2937;
 }

 .info-panel-content {
   display: grid;
   gap: 14px;
   font-family: 'Montserrat', sans-serif;
 }

 .info-panel-heading {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #1f3b7a;
 }

 .info-panel-heading svg {
   width: 30px;
   height: 30px;
   flex: 0 0 auto;
 }

 .info-panel-heading strong,
 .info-panel-heading span {
   display: block;
 }

 .info-panel-heading strong {
   font-size: 16px;
   line-height: 1.25;
 }

 .info-panel-heading span,
 .info-panel-section-title,
 .info-panel-source {
   color: #64748b;
   font-size: 11px;
   letter-spacing: 0.04em;
 }

 .info-panel-heading .info-panel-description {
   max-width: 390px;
   margin-top: 3px;
   font-size: 10px;
   font-style: italic;
   line-height: 1.45;
   letter-spacing: 0;
 }

 .info-cefi-coverage,
 .info-coverage-row {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 18px;
   padding: 9px 0;
   border-bottom: 1px solid #e2e8f0;
   font-size: 13px;
 }

 .info-cefi-coverage {
   color: #1f3b7a;
   border-top: 1px solid #e2e8f0;
 }

 .info-coverage-row span,
 .info-cefi-coverage span {
   font-weight: 600;
 }

 .info-coverage-row strong,
 .info-cefi-coverage strong {
   color: #0f172a;
   font-weight: 700;
   text-align: right;
   white-space: nowrap;
 }

 .info-panel-section-title {
   margin-bottom: -6px;
   text-transform: uppercase;
   font-weight: 700;
 }

 .info-coverage-list {
   display: grid;
 }

 .info-panel-source {
   line-height: 1.5;
 }

 .info-panel-source a {
   color: #2563eb;
   font-weight: 700;
   text-decoration: none;
 }

 .info-panel-source a:hover {
   text-decoration: underline;
 }

 .info-resources-title {
   margin-top: 4px;
   padding-top: 12px;
   border-top: 1px solid #e2e8f0;
 }

 .info-resources-list {
   display: grid;
   gap: 6px;
 }

 .info-resources-list a {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 14px;
   padding: 7px 9px;
   color: #1d4ed8;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 7px;
   text-decoration: none;
   font-size: 12px;
 }

 .info-resources-list a:hover {
   background: #eff6ff;
   border-color: #93c5fd;
 }

 .info-resources-list span {
   font-weight: 700;
 }

 .info-resources-list small {
   color: #64748b;
   font-size: 10px;
   text-align: right;
 }

 /* All floating panels stay above charts, maps, and Leaflet controls. */
 .menuPanel,
 .timeline,
 .cbc-panel,
 .ClassificationPanel,
 .socioDemPanel-container,
 .unified-panel,
 .routing-panel,
 .compare-actions-panel,
 .compare-window-panel,
 .masks-crops-panel,
 .masks-country-panel,
 .chatbot-panel,
 .info-panel,
 .leaflet-control-geocoder,
 #panels-wrapper,
 #panels-wrapper>* {
   z-index: 2147483000 !important;
 }

 body.cefi-panel-resizing {
   cursor: nwse-resize;
   user-select: none;
 }

 .compare-window-dock-menu {
   position: absolute;
   top: calc(100% + 4px);
   right: 24px;
   display: none;
   grid-template-columns: 1fr;
   gap: 4px;
   background: #ffffff;
   border: 1px solid #cbd5e1;
   border-radius: 8px;
   box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
   padding: 6px;
   z-index: 2;
 }

 .compare-window-dock-menu button {
   border: 1px solid #cbd5e1;
   border-radius: 6px;
   background: #f8fafc;
   color: #334155;
   font-size: 11px;
   font-weight: 600;
   padding: 4px 8px;
   text-align: left;
   cursor: pointer;
 }

 .compare-window-dock-menu button:hover {
   background: #e2e8f0;
 }

 .compare-window-title {
   font-size: 12px;
   font-weight: 700;
   color: #1f3b7a;
 }

 .cefi-point-address {
   font-size: 12px;
   font-weight: 600;
   color: #1f2937;
   line-height: 1.4;
 }

 .cefi-point-location {
   margin: 4px 0 8px;
   color: #334155;
   font-size: 11px;
   font-weight: 600;
   line-height: 1.35;
   overflow-wrap: anywhere;
 }

 .cefi-point-window-range {
   font-size: 11px;
   color: #64748b;
   margin-top: -2px;
 }

 .cefi-point-month-value {
   font-size: 12px;
   font-weight: 600;
   color: #1f2937;
 }

 .cefi-point-year-controls {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .cefi-point-year-arrow {
   flex: 0 0 auto;
 }

 .cefi-point-year-select {
   flex: 1 1 auto;
 }

 .cefi-point-month-select {
   flex: 1 1 auto;
 }

 .cefi-point-summary-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin-top: 15px;
 }

 .cefi-point-summary-card {
   border-radius: 12px;
   padding: 10px 12px;
 }

 .cefi-point-summary-card-point {
   border: 1px solid #dbeafe;
   background: #f8fbff;
 }

 .cefi-point-summary-card-avg {
   border: 1px solid #ffedd5;
   background: #fffaf5;
 }

 .cefi-point-summary-label {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .04em;
 }

 .cefi-point-summary-label-point {
   color: #0f766e;
 }

 .cefi-point-summary-label-avg {
   color: #c2410c;
 }

 .cefi-point-summary-value {
   font-size: 22px;
   font-weight: 700;
   color: #0f172a;
 }

 .cefi-indicator-strip {
   display: flex;
   align-items: center;
   align-content: flex-start;
   flex-wrap: wrap;
   gap: 5px;
   margin-top: 12px;
   padding: 7px 8px;
   border: 1px solid #e2e8f0;
   border-radius: 8px;
   background: #f8fafc;
 }

 .cefi-indicator-strip[hidden] {
   display: none !important;
 }

 .cefi-indicator-strip-title {
   margin-right: 2px;
   color: #64748b;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
 }

 .cefi-indicator-chip {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   min-height: 20px;
   padding: 2px 6px;
   border: 1px solid #cbd5e1;
   border-radius: 999px;
   color: #475569;
   background: #ffffff;
   font-size: 10px;
   font-weight: 650;
   cursor: pointer;
   white-space: nowrap;
 }

 .cefi-indicator-chip[aria-disabled='true'] {
   cursor: not-allowed;
 }

 .cefi-indicator-chip.is-muted {
   opacity: .38;
   filter: grayscale(.65);
 }

 .cefi-indicator-chip small {
   color: #94a3b8;
   font-size: 8px;
   font-weight: 600;
   text-transform: uppercase;
 }

 .cefi-indicator-chip-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #94a3b8;
 }

 .cefi-indicator-chip.is-primary {
   border-color: #bfdbfe;
   color: #1d4ed8;
   background: #eff6ff;
 }

 .cefi-indicator-chip.is-primary .cefi-indicator-chip-dot {
   background: #2563eb;
 }

 .cefi-indicator-chip-climatology {
   border-color: #bfdbfe;
   color: #1d4ed8;
   background: #eff6ff;
 }

 .cefi-indicator-chip-climatology .cefi-indicator-chip-dot {
   background: #60a5fa;
 }

 .cefi-indicator-chip-anomaly {
   border-color: #fed7aa;
   color: #c2410c;
   background: #fff7ed;
 }

 .cefi-indicator-chip-anomaly .cefi-indicator-chip-dot {
   background: #c2410c;
 }

 .cefi-indicator-chip-spi.is-available .cefi-indicator-chip-dot {
   background: #7c3aed;
 }

 .cefi-indicator-chip-max-temp.is-available .cefi-indicator-chip-dot {
   background: #dc2626;
 }

 .cefi-indicator-chip-max-temp-climatology {
   border-color: #fed7aa;
   color: #c2410c;
   background: #fff7ed;
 }

 .cefi-indicator-chip-max-temp-climatology .cefi-indicator-chip-dot {
   background: #f97316;
 }

 .cefi-indicator-chip-fapar.is-available .cefi-indicator-chip-dot {
   background: #65a30d;
 }

 .cefi-indicator-chip-fapar-climatology {
   border-color: #bbf7d0;
   color: #15803d;
   background: #f0fdf4;
 }

 .cefi-indicator-chip-fapar-climatology .cefi-indicator-chip-dot {
   background: #16a34a;
 }

 .cefi-indicator-chip.is-pending {
   opacity: .62;
   cursor: not-allowed;
 }

 .cefi-indicator-chip.is-pending .cefi-indicator-chip-label {
   text-decoration: line-through;
 }

 @container cefi-window (max-width: 500px) {
   .cefi-indicator-strip {
     gap: 3px;
     margin-top: 6px;
     padding: 4px;
   }

   .cefi-indicator-chip small {
     display: none;
   }

   .cefi-indicator-strip-title {
     font-size: 8px;
   }

   .cefi-indicator-chip {
     min-height: 18px;
     gap: 3px;
     padding: 1px 4px;
     font-size: 9px;
   }

   .cefi-indicator-chip-dot {
     width: 6px;
     height: 6px;
   }
 }

 .cefi-point-chart-wrap {
   height: 280px;
   min-height: 280px;
   position: relative;
   width: 100%;
   margin-top: 6px;
 }

 .cefi-point-chart-wrap:has(.cefi-multi-indicator-chart) {
   height: 455px;
   min-height: 455px;
 }

 .cefi-point-window-bullet-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 2px;
   position: relative;
 }

 .cefi-point-export-actions {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-right: 17px;
 }

 .cefi-point-export-anchor {
   position: relative;
   display: inline-flex;
   width: 22px;
   height: 22px;
 }

 .cefi-point-download-btn,
 .cefi-point-download-image-btn {
   position: relative !important;
   right: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   padding: 0;
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 4px;
   background: #ffffff;
   color: #0033a0;
   cursor: pointer;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
 }

 .cefi-point-download-btn:hover,
 .cefi-point-download-image-btn:hover {
   background: #eef3ff;
   color: #002266;
 }

 .cefi-point-download-btn-highlighted {
   border-color: #f59e0b;
   outline: 3px solid rgba(245, 158, 11, 0.35);
   animation: cefi-download-pulse 1.4s ease-in-out infinite;
 }

 @keyframes cefi-download-pulse {
   50% {
     outline-color: rgba(245, 158, 11, 0.08);
     transform: scale(1.12);
   }
 }

 .cefi-point-download-hint,
 .cefi-point-image-download-hint,
 .cefi-panel-action-hint {
   position: absolute;
   top: 100%;
   right: calc(50% - 12px);
   margin-top: 8px;
   width: 240px;
   max-width: calc(100vw - 48px);
   background: #fff7d6;
   color: #172033;
   border: 2px solid #f59e0b;
   font-size: 13px;
   line-height: 1.4;
   padding: 10px 12px;
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
   z-index: 1070;
   pointer-events: none;
 }

 .cefi-point-image-download-hint {
   top: auto;
   bottom: 100%;
   margin-top: 0;
   margin-bottom: 8px;
 }

 .cefi-selection-hint {
   position: fixed;
   top: 16px;
   left: 50%;
   transform: translateX(-50%);
   width: 350px;
   max-width: calc(100vw - 48px);
   background: #fff7d6;
   color: #172033;
   border: 2px solid #f59e0b;
   font-size: 13px;
   line-height: 1.4;
   padding: 10px 12px;
   border-radius: 6px;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
   z-index: 2147483647;
   pointer-events: none;
 }

 .cefi-selection-hint-content {
   zoom: calc(100% / var(--panel-zoom));
 }

 .cefi-selection-hint strong {
   display: block;
   margin-bottom: 3px;
   color: #9a3412;
   font-size: 14px;
 }

 .cefi-point-download-hint strong,
 .cefi-point-image-download-hint strong,
 .cefi-panel-action-hint strong {
   display: block;
   margin-bottom: 3px;
   color: #9a3412;
   font-size: 14px;
 }

 .cefi-point-download-hint::after,
 .cefi-point-image-download-hint::after,
 .cefi-panel-action-hint::after {
   content: '';
   position: absolute;
   bottom: 100%;
   right: 6px;
   border: 6px solid transparent;
   border-bottom-color: #f59e0b;
 }

 .cefi-point-image-download-hint::after {
   bottom: auto;
   top: 100%;
   border-bottom-color: transparent;
   border-top-color: #f59e0b;
 }

 .cefi-point-window-bullet {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   border: 2px solid #ffffff;
   box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
 }

 .cefi-color-1 {
   background: #85dc38;
 }

 .cefi-color-2 {
   background: #cfea00;
 }

 .cefi-color-3 {
   background: #f3f300;
 }

 .cefi-color-4 {
   background: #ffba28;
 }

 .cefi-color-5 {
   background: #ff8819;
 }

 .cefi-color-6 {
   background: #fa0000;
 }

 .cefi-color-7 {
   background: #b40000;
 }

 .cefi-color-8 {
   background: #6e0000;
 }

 .socio-wait-hidden {
   display: none;
 }

 .socio-canvas {
   display: block;
   box-sizing: border-box;
   max-width: 100%;
 }

 .temperature-bar-inline {
   height: 24px;
   width: 100%;
 }

 .route-summary-header {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-bottom: 6px;
 }

 .route-summary-dot {
   display: inline-block;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   flex-shrink: 0;
 }

 .route-summary-text {
   font-size: 0.82em;
   color: #333;
 }

 .compare-window-close {
   border: none;
   background: transparent;
   color: #334155;
   font-size: 16px;
   line-height: 1;
   cursor: pointer;
   padding: 0 4px;
 }

 .compare-window-body {
   padding: 10px;
   display: grid;
   gap: 8px;
 }

 .compare-window-row {
   display: grid;
   grid-template-columns: 62px 1fr;
   align-items: center;
   gap: 8px;
 }

 .compare-window-row label {
   margin: 0;
   font-size: 11px;
   font-weight: 600;
   color: #374151;
 }

 .compare-window-row select,
 .compare-window-row input[type='range'] {
   width: 100%;
 }

 .compare-window-row select {
   border: 1px solid #cbd5e1;
   border-radius: 8px;
   background: #fff;
   padding: 4px 6px;
   font-size: 12px;
 }

 .compare-window-visible {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 500;
   color: #374151;
 }

 .compare-window-opacity-value {
   font-size: 11px;
   font-weight: 600;
   color: #1f3b7a;
 }

 .compare-window-actions {
   display: flex;
   justify-content: flex-end;
   gap: 6px;
 }

 .compare-window-clone {
   border: 1px solid #1f3b7a;
   border-radius: 8px;
   background: #f8fbff;
   color: #1f3b7a;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 10px;
   cursor: pointer;
 }

 .compare-window-clone:hover {
   background: #1f3b7a;
   color: #ffffff;
 }

 .compare-window-preview-toggle {
   border: 1px solid #0f766e;
   border-radius: 8px;
   background: #f0fdfa;
   color: #0f766e;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 10px;
   cursor: pointer;
 }

 .compare-window-preview-toggle:hover {
   background: #0f766e;
   color: #ffffff;
 }

 .compare-window-preview {
   border: 1px solid #cbd5e1;
   border-radius: 8px;
   padding: 4px;
   background: #ffffff;
   min-height: 158px;
   display: grid;
   place-items: center;
   gap: 6px;
 }

 .compare-window-preview-status {
   font-size: 12px;
   font-weight: 600;
   color: #475569;
   text-align: center;
 }

 .compare-window-preview-image {
   display: block;
   width: 100%;
   height: 150px;
   object-fit: cover;
   border-radius: 6px;
   background: #e5e7eb;
 }

 /* Responsive adjustments */
 @media (max-width: 768px),
 (max-height: 800px) {
   .toolbar {
     top: 10px;
     right: 10px;
     padding: 16px 8px;
     gap: 18px;
     zoom: 130%;
   }

   .tool-btn {
     width: 65px;
   }

   .icon-wrapper {
     width: 41px;
     height: 41px;
   }

   .icon-wrapper svg {
     width: 16px;
     height: 16px;
   }

   .tool-label {
     font-size: 10px;
   }
 }

 @media (max-height: 900px) {

   .ClassificationPanel,
   .unified-panel .unified-panel-content {
     zoom: 93%;
   }
 }

 @media (max-height: 800px) {

   .ClassificationPanel,
   .unified-panel .unified-panel-content {
     zoom: 84%;
   }
 }

 @media (max-height: 700px) {

   .ClassificationPanel,
   .unified-panel .unified-panel-content {
     zoom: 74%;
   }
 }

 @media (max-height: 600px) {

   .ClassificationPanel,
   .unified-panel .unified-panel-content {
     zoom: 64%;
   }
 }

 @media (max-height: 900px) {
   #multiTempDataTempContainer {
     zoom: 86%;
   }
 }

 @media (max-height: 800px) {
   #multiTempDataTempContainer {
     zoom: 78%;
   }
 }

 /* Hide default Leaflet controls (except geocoder proxy target) */
 .leaflet-top.leaflet-right {
   display: block;
 }

 .leaflet-top.leaflet-right .leaflet-control {
   display: none;
 }

 .leaflet-control-mouseposition {
   display: none !important;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder {
   display: block !important;
   position: fixed;
   top: var(--geocoder-panel-top, 170px);
   right: var(--geocoder-panel-right, 120px);
   overflow: visible;
   z-index: 1001;
   margin: 0;
   padding: 0;
   min-width: 0;
   min-height: 0;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-form {
   position: relative;
   top: 0;
   right: 0;
   white-space: nowrap;
   display: none;
   height: 40px;
   padding: 0 0 0 8px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-right: 0;
   border-radius: 12px 12px 12px 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   align-items: center;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
   display: inline-flex !important;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-form input:focus {
   outline: none;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-alternatives {
   position: absolute;
   top: 42px;
   left: 0;
   background: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-alternatives li {
   background: #ffffff;
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-alternatives li:hover,
 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-selected {
   background: #f3f4f6;
 }

 /* #tool-search: overflow + relative positioning for docked geocoder panel */
 #tool-search {
   position: relative;
   overflow: visible !important;
 }

 /* Geocoder ancorato a #tool-search */
 .geocoder-docked-to-toolbar {
   position: absolute;
   top: 50%;
   left: auto;
   right: calc(100% + 20px);
   transform: translateY(-50%);
   display: block !important;
   overflow: visible;
   background: transparent !important;
   box-shadow: none !important;
   border: 0 !important;
   margin: 0;
   padding: 0;
   z-index: 1010;
 }

 .geocoder-docked-to-toolbar .leaflet-control-geocoder-form {
   position: relative;
   top: 0;
   right: 0;
   white-space: nowrap;
   display: none;
   height: 40px;
   padding: 0 0 0 8px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-right: 0;
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   align-items: center;
 }

 .geocoder-docked-to-toolbar.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
   display: inline-flex !important;
 }

 .geocoder-docked-to-toolbar .leaflet-control-geocoder-form input:focus {
   outline: none;
 }

 .geocoder-docked-to-toolbar .leaflet-control-geocoder-alternatives {
   position: absolute;
   top: 42px;
   left: 0;
   background: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   text-align: left !important;
   width: 250px !important;
   z-index: 9999 !important;
   list-style: none;
   margin: 0;
   padding: 0;
   display: none !important;
 }

 /* mostra la lista solo quando il geocoder è expanded e ha risultati */
 .geocoder-docked-to-toolbar.leaflet-control-geocoder-expanded .leaflet-control-geocoder-alternatives:not(.leaflet-control-geocoder-alternatives-minimized) {
   display: block !important;
 }

 .geocoder-docked-to-toolbar .leaflet-control-geocoder-alternatives li {
   background: #ffffff;
 }

 .geocoder-docked-to-toolbar .leaflet-control-geocoder-alternatives li:hover,
 .geocoder-docked-to-toolbar .leaflet-control-geocoder-selected {
   background: #f3f4f6;
 }

 /* Panel header titles styling */
 .panel-title {
   font-size: 24px;
   font-weight: 600;
   color: #333;
   margin: 0 0 16px 0;
   padding-bottom: 12px;
 }

 /* Section dividers */
 .panel-section {
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid #e5e5e5;
 }

 /* First section shouldn't have top margin/border */
 .panel-section:first-child {
   margin-top: 0;
   padding-top: 0;
   border-top: none;
 }

 /* Improve text contrast */
 .legendTM h3,
 .legendTM h4,
 .legendTM h5,
 .legendTM h6,
 .legendTMMulti h3,
 .legendTMMulti h4,
 .legendTMMulti h5,
 .legendTMMulti h6,
 .ClassificationPanel h3,
 .ClassificationPanel h4,
 .socioDemPanel h3,
 .socioDemPanel h4,
 #temperatureLegend h5 {
   color: #333;
   margin-top: 8px;
   margin-bottom: 8px;
 }

 /* Canvas margins */
 .legendTM canvas,
 .legendTMMulti canvas,
 .ClassificationPanel canvas,
 .socioDemPanel canvas {
   margin-top: 12px;
 }

 /* ========================================
   UNIFIED PANEL STYLES
   Single left panel for all graphs and legends
   ======================================== */
 .unified-panel {
   position: fixed;
   top: 10px;
   left: 0px;
   width: auto;
   max-width: 500px;
   min-width: 320px;
   height: fit-content;
   max-height: calc(100vh - 20px);
   background-color: #ffffff;
   opacity: 1;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
   border: 1px solid #f0f0f0;
   padding: 20px;
   font-family: 'Montserrat', sans-serif;
   z-index: 1000;
   pointer-events: auto;
   display: none;
   overflow-y: auto;
   overflow-x: hidden;
 }

 .leaflet-bottom .leaflet-left .unified-panel.leaflet-control {
   margin: 0;
 }

 .unified-panel-content {
   width: 100%;
 }

 .unified-panel-loading {
   text-align: center;
   padding: 20px;
 }

 .unified-panel h3,
 .unified-panel h4,
 .unified-panel h5,
 .unified-panel h6 {
   color: #333;
   margin-top: 8px;
   margin-bottom: 8px;
 }

 .unified-panel h3 {
   font-family: 'Montserrat', sans-serif !important;
   font-size: 1.2rem !important;
   font-weight: 600 !important;
   line-height: 1.3;
 }

 .unified-panel canvas {
   margin-top: 12px;
 }

 .unified-panel .panel-title,
 .unified-panel #legendHS h5 {
   font-family: 'Montserrat', sans-serif !important;
   font-size: 1.2rem;
   font-weight: 600;
   margin-bottom: 12px;
   color: #2c3e50;
 }

 .unified-panel .panel-section {
   margin-bottom: 16px;
 }

 .unified-panel #legendHS.panel-section {
   margin-top: 20px;
   padding-top: 20px;
 }

 .unified-panel #legendHS {
   background: #f8fafc;
   border: 1px solid #e5e5e5;
   border-radius: 10px;
   padding: 14px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }

 .unified-panel .panel-section:first-child {
   padding-top: 0;
   border-top: none;
 }

 .analysis-card-horizontal {
   display: flex;
   flex-direction: column;
   align-self: flex-start;
   height: fit-content;
   padding: 8px 12px;
   border-top: 2px solid var(--analysis-card-border-color, #1d4ed8);
   background: #fafafa;
   border-radius: 6px;
   box-sizing: border-box;
   min-height: 0;
   /* flex: 0 0 var(--analysis-card-width, 220px);
  min-width: var(--analysis-card-width, 220px);
  max-width: var(--analysis-card-width, 220px); */
 }

 .route-data-temp-container {
   position: fixed;
   bottom: 22px;
   left: 10px;
   transform: none;
   width: fit-content;
   max-width: 1420px;
   z-index: 999;
   background: white;
   padding: 16px;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   display: flex;
   flex-direction: column;
   overflow: hidden;
   box-sizing: border-box;
 }

 .unified-panel .ClassificationPanel {
   position: relative;
   left: 10px;
   top: auto;
   bottom: auto;
   width: 100%;
   max-width: none;
   padding: 0;
   border: 0;
   box-shadow: none;
   background: transparent;
   zoom: 100%;
   height: auto;
   max-height: none;
   overflow-y: visible;
 }

 .unified-panel .ClassificationPanel .image-container {
   margin-bottom: 16px;
   zoom: 100%;
 }

 .unified-panel .ClassificationPanel .image-container img {
   max-width: clamp(110px, 23vh, 170px);
 }

 .unified-panel .ClassificationPanel #classifyChart {
   width: 100% !important;
   max-width: clamp(180px, 30vh, 320px);
   height: auto !important;
 }

 .unified-panel .socioDemPanel-container {
   position: relative;
   top: auto;
   left: auto;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
   padding: 0;
   border: 0;
   box-shadow: none;
   background: transparent;
   zoom: 100%;
   overflow: visible;
 }

 .unified-panel .socioDemPanel {
   width: 100%;
   max-width: none;
   padding: 12px;
 }

 /* Canvas dimensioni per i pannelli socio-demografici */
 .unified-panel .socioDemPanel canvas {
   max-width: 100%;
   height: auto;
   margin-top: 4px;
   display: block;
 }

 .unified-panel .socioDemPanel-2 canvas {
   height: auto;
 }

 .unified-panel #socioDemPanel {
   width: 100%;
   padding: 0;
 }

 /* Temporary legend policy: show UTCI only inside unified left panel */
 .leaflet-control.legendHS,
 .leaflet-control.legendTM,
 .leaflet-control.legendTMMulti,
 .leaflet-control.legendRoutes,
 .leaflet-control.legendClassify,
 .leaflet-control.legendSocioDem {
   display: none !important;
 }

 /* Panel zoom responsive by window height */
 :root {
   --panel-zoom: 50%;
 }

 .menuPanel,
 .legendHS,
 .legendCefi,
 .legendTM,
 .legendTMMulti,
 .legendRoutes,
 .legendClassify,
 #query_panel,
 #legendHS,
 #legendCefi {
   zoom: var(--panel-zoom);
 }

 @media screen and (max-height: 760px) {
   :root {
     --panel-zoom: 80%;
   }
 }

 @media screen and (min-height: 761px) and (max-height: 900px) {
   :root {
     --panel-zoom: 89%;
   }
 }

 @media screen and (min-height: 901px) and (max-height: 1080px) {
   :root {
     --panel-zoom: 95%;
   }
 }

 @media screen and (min-height: 1081px) {
   :root {
     --panel-zoom: 85%;
   }
 }

 /* Approx. <17" displays (viewport-based): classify images on one row + larger elements */
 @media screen and (max-width: 1600px) and (max-height: 1000px) {

   .ClassificationPanel .image-container,
   .unified-panel .ClassificationPanel .image-container {
     flex-direction: row;
     justify-content: center;
     align-items: flex-start;
     flex-wrap: nowrap;
     gap: 10px;
   }

   .ClassificationPanel .image-container img,
   .unified-panel .ClassificationPanel .image-container img {
     width: 48%;
     max-width: clamp(130px, 18vh, 220px);
   }

   .ClassificationPanel .panel-title,
   .unified-panel .ClassificationPanel .panel-title {
     font-size: 1.35rem !important;
   }

   .ClassificationPanel h4,
   .unified-panel .ClassificationPanel h4 {
     font-size: 1.05rem;
   }

   .ClassificationPanel #classifyChart,
   .unified-panel .ClassificationPanel #classifyChart {
     max-width: clamp(240px, 40vh, 380px);
   }
 }

 .leaflet-top.leaflet-right .leaflet-control-geocoder .leaflet-control-geocoder-alternatives {
   position: relative !important;
   top: 42px !important;
   left: 10px !important;
 }

 .time-link.disabled {
   pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
 }

 .compare-window-NoPinned,
 .compare-window-Pinned,
 .compare-window-zoom {
   background: transparent;
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
   z-index: 1060;
 }

 .compare-window-zoom {
   color: #1f3b7a;
   cursor: pointer;
 }

 .compare-window-zoom.active {
   background: #dbeafe;
   border-color: #1f3b7a;
 }

 .compare-window-Duplicate {
   background: transparent;
   border: 1px solid rgba(0, 51, 153, 0.2);
   border-radius: 2px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
   z-index: 1060;
 }

 /* ============================================================
   MASKS PANEL
   ============================================================ */

 #tool-filters {
   position: relative;
   overflow: visible !important;
 }

 /* First level: Country | Polygons | Crops */
 .masks-extra-buttons {
   position: absolute;
   left: auto;
   right: calc(100% + 20px);
   transform: translateY(-50%);
   margin-right: 0 !important;
   display: none;
   align-items: center;
   gap: 8px;
   pointer-events: auto !important;
   min-height: 40px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   padding: 6px 8px;
   z-index: 1010;
 }

 .masks-extra-buttons .masks-category-btn {
   width: 60px;
   min-height: 55px;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid #d1d5db;
   padding: 4px 2px;
   transition: border-color 0.2s, background-color 0.2s;
 }

 .masks-extra-buttons .masks-category-btn:hover {
   border-color: #10b981;
 }

 .masks-extra-buttons .masks-category-btn.active {
   border-color: #10b981;
   background-color: #ecfdf5;
 }

 /* X clear button on category buttons */
 .masks-category-clear {
   position: absolute;
   top: -4px;
   right: -4px;
   width: 12px;
   height: 12px;
   display: none;
   align-items: center;
   justify-content: center;
   color: #ef4444;
   cursor: pointer;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   transition: transform 0.15s;
   z-index: 2;
 }

 .masks-category-clear.is-visible {
   display: flex;
 }

 .masks-category-clear:hover {
   transform: scale(1.3);
   background-color: #fee2e2;
 }

 .masks-category-clear svg {
   display: block;
 }

 /* Second level: Crops panel */
 .masks-crops-panel {
   position: absolute;
   top: 30%;
   right: calc(100% + 8px);
   width: fit-content;
   max-width: calc(100vw - 32px);
   transform: translateY(-50%);
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   pointer-events: auto !important;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   padding: 20px 6px 8px;
   z-index: 1009;
   overflow: visible;
 }

 .masks-crops-grid {
   display: grid;
   grid-template-columns: repeat(3, 60px);
   grid-template-rows: repeat(4, 60px);
   gap: 6px;
 }

 @media (max-width: 600px) {
   .masks-crops-panel {
     top: auto !important;
     right: 0 !important;
     bottom: calc(100% + 8px);
     transform: none !important;
   }
 }

 .masks-crops-panel::-webkit-scrollbar {
   width: 4px;
 }

 .masks-crops-panel::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.2);
   border-radius: 2px;
 }

 /* Crop toggle button */
 .masks-crop-toggle {
   box-sizing: border-box;
   width: 60px;
   height: 60px;
   border-radius: 8px;
   background: #ffffff;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 2px solid #e5e7eb;
   padding: 4px 2px;
   transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
 }

 .masks-crop-toggle:hover {
   border-color: #10b981;
   box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
 }

 .masks-crop-toggle.active {
   border-color: #10b981;
   background-color: #ecfdf5;
   box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
 }

 .masks-crop-toggle svg {
   width: 26px;
   height: 26px;
 }

 .masks-crop-toggle .crop-label {
   font-size: 8px;
   font-weight: 500;
   color: #374151;
   margin-top: 2px;
   text-align: center;
   line-height: 1.1;
   max-width: 48px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .masks-crop-toggle.active .crop-label {
   color: #065f46;
   font-weight: 600;
 }

 .masks-crops-panel .masks-crop-clear {
   top: 4px;
   right: 4px;
   padding: 0;
   border: 0;
 }

 /* Slide toggle for Boundaries layers (EUI-style) */
 .adm-switch {
   position: relative;
   display: inline-flex;
   align-items: center;
   width: 40px;
   height: 20px;
   flex-shrink: 0;
   cursor: pointer;
 }

 .adm-switch input {
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
 }

 .adm-switch-slider {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #d3dae6;
   border-radius: 20px;
   transition: background-color 0.2s ease;
   border: 1px solid transparent;
 }

 .adm-switch-slider::before {
   content: "";
   position: absolute;
   height: 16px;
   width: 16px;
   left: 1px;
   top: 50%;
   transform: translateY(-50%);
   background-color: #ffffff;
   border-radius: 50%;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }

 .adm-switch input:checked+.adm-switch-slider {
   background-color: #3b5fd9;
 }

 .adm-switch input:checked+.adm-switch-slider::before {
   transform: translateY(-50%) translateX(20px);
 }

 .adm-switch input:focus+.adm-switch-slider {
   border-color: #3b5fd9;
   box-shadow: 0 0 0 2px rgba(59, 95, 217, 0.2);
 }

 /* ADM layer rows: label left, toggle right */
 .custom-base-control .cbc-panel.layer-calendar-panel .adm-layer-row,
 .cbc-panel.layer-calendar-panel .adm-layer-row {
   display: grid;
   grid-template-columns: 1fr 48px;
   align-items: center;
   min-height: 24px;
   gap: 0;
   padding: 6px 8px;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .adm-layer-row .adm-switch,
 .cbc-panel.layer-calendar-panel .adm-layer-row .adm-switch {
   grid-column: 2;
   grid-row: 1;
   justify-self: end;
 }

 .custom-base-control .cbc-panel.layer-calendar-panel .adm-layer-row .adm-layer-label,
 .cbc-panel.layer-calendar-panel .adm-layer-row .adm-layer-label {
   grid-column: 1;
   grid-row: 1;
   width: auto;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.02em;
   color: #334155;
 }

 /* ---- Country/Boundaries panel (toolbar masks) ---- */
 .masks-country-panel {
   position: absolute;
   top: 33%;
   right: calc(100% + 8px);
   transform: translateY(-33%);
   display: none;
   flex-direction: column;
   align-items: stretch;
   gap: 6px;
   pointer-events: auto !important;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 12px;
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
   padding: 8px 6px;
   z-index: 1009;
 }

 .masks-country-toggle {
   width: 80px;
   min-height: 36px;
   border-radius: 6px;
   background: #ffffff;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #d1d5db;
   padding: 6px 8px;
   transition: border-color 0.2s, background-color 0.2s;
 }

 .masks-country-toggle:hover {
   border-color: #3b82f6;
 }

 .masks-country-toggle.active {
   border-color: #3b82f6;
   background-color: #eff6ff;
 }

 .masks-country-toggle .country-label {
   font-size: 10px;
   font-weight: 600;
   color: #334155;
   text-align: center;
 }

 .masks-country-toggle.active .country-label {
   color: #1d4ed8;
 }