:root {
         /* Environmental High-Density Palette */
         --bg0: #a3c1a1;
         /* darker soft mint background */
         --bg1: #c6dac6;
         /* richer fresh air */
         --bg2: #8fb38f;
         /* deep tone for contrast */

         --card: rgba(198, 218, 198, 0.95);
         /* light green tint for main cards */
         --card2: rgba(143, 179, 143, 0.85);
         /* deeper green for secondary cards / modals */
         --border: rgba(45, 106, 79, 0.35);
         /* strong border for clarity */

         --tx: #0b1a0f;
         /* very dark forest text */
         --mut: #2e4a35;
         /* deep muted sage */

         --pri: #14532d;
         /* rich emerald forest */
         --ok: #0f4625;
         /* strong success green */
         --warn: #783e04;
         /* bold warning amber */
         --bad: #670d25;
         /* vivid alert red */

         --shadow: 0 8px 30px rgba(27, 46, 37, 0.15);
         /* stronger shadow for depth */
         --radius: 20px;
     }

     * {
         box-sizing: border-box;
         transition: all 0.2s ease;
     }

     body {
         margin: 0;
         min-height: 100vh;
         color: var(--tx);
         font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

         /* Combined background using your palette variables */
         background:
             radial-gradient(circle at 12% 10%, rgba(56, 189, 248, 0.18), transparent 55%),
             radial-gradient(circle at 90% 90%, rgba(34, 197, 94, 0.10), transparent 55%),
             radial-gradient(at 0% 0%, rgba(74, 222, 128, 0.15) 0%, transparent 50%),
             radial-gradient(at 100% 100%, rgba(216, 243, 220, 0.2) 0%, transparent 50%),
             linear-gradient(180deg, var(--bg1), var(--bg0));

         background-repeat: no-repeat;
         background-size: cover;
         background-attachment: fixed;
     }

     .main {
         margin-top: 68px;
         flex: 1;
         display: flex;
         flex-direction: column;
         min-width: 0
     }

     .shell {
         display: flex;
         min-height: 100vh
     }

     .sb-head {
         padding: 1rem 1.05rem .9rem;
         border-bottom: 1px solid var(--border);
         display: flex;
         align-items: center;
         gap: .7rem;
     }

     .logo {
         width: 42px;
         height: 42px;
         border-radius: 12px;
         background: linear-gradient(135deg, #52b788 0%, #2d6a4f 100%);
         color: white;
         font-weight: bold;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 12px rgba(45, 106, 79, 0.15);
     }


     .sb-nav {
         padding: .85rem .5rem 1rem;
         overflow: auto;
         flex: 1
     }

     .sec {
         font-size: .7rem;
         letter-spacing: .12em;
         text-transform: uppercase;
         color: #6b7280;
         padding: .35rem .9rem;
         margin: .4rem 0 .25rem
     }

     .nav-a {
         color: var(--mut);
         /* muted text for default state */
         padding: 0.75rem 1rem;
         margin: 0.25rem 0.8rem;
         border-radius: 12px;
         font-weight: 600;
         text-decoration: none;
         font-size: 0.88rem;
         display: flex;
         align-items: center;
         gap: .5rem;
         transition: all 0.2s ease-in-out;
         /* smooth hover/active transitions */
     }


     .nav-a:hover {
         background: rgba(20, 83, 45, 0.1);
         /* semi-transparent primary green hover */
         color: var(--pri);
         /* dense primary green text on hover */
         padding-left: 1.25rem;
         /* subtle hover indent */
     }

     .nav-a.active {
         background: var(--pri);
         /* dense emerald forest background */
         color: #ffffff;
         /* white text for contrast */
         box-shadow: 0 4px 12px rgba(20, 83, 45, 0.25);
         /* stronger shadow for active */
         border: 1px solid var(--border);
         /* consistent with theme borders */
     }

     .sb-sub {
         color: var(--mut);
         font-size: 0.9em;
         opacity: 0.8;
     }

     .sb-foot {
         padding: .75rem 1.05rem;
         border-top: 1px solid rgba(15, 23, 42, .9);
         font-size: .72rem;
         color: var(--mut);
         background: linear-gradient(to top, rgba(2, 6, 23, .9), transparent);
     }

     .kicker {
         font-size: .78rem;
         letter-spacing: .18em;
         text-transform: uppercase;
         color: var(--mut)
     }

     .heading {
         font-size: 1.1rem;
         font-weight: 750;
     }

     .sb-header {
         display: flex;
         align-items: center;
         gap: 8px;
         /* spacing between text */
     }

     .sb-title {
         color: #14532d;
         font-weight: 600;
         letter-spacing: 0.02em;
         font-size: clamp(0.95rem, 2.5vw, 1.5rem);
         /* responsive font size */
         text-transform: uppercase;
     }

     .content {
         /* padding: 1rem 1.2rem 1.25rem; */
         display: flex;
         flex-direction: column;
         gap: .85rem;
         flex: 1;
         min-height: 0;
     }

     .map-tools {
         display: flex;
         gap: .5rem;
         flex-wrap: wrap;
         align-items: center;
         margin-bottom: .55rem;
     }

     .dot {
         width: 10px;
         height: 10px;
         border-radius: 999px;
         display: inline-block;
         background: var(--ok);
         box-shadow: 0 0 0 4px rgba(34, 197, 94, .14)
     }

     .dot.warn {
         background: var(--warn);
         box-shadow: 0 0 0 4px rgba(245, 158, 11, .16)
     }

     .dot.bad {
         background: var(--bad);
         box-shadow: 0 0 0 4px rgba(251, 113, 133, .16)
     }

     .legend {
         display: flex;
         gap: .6rem;
         flex-wrap: wrap;
         color: var(--mut);
         font-size: .74rem;
         margin-top: .4rem
     }

     .legend .item {
         display: flex;
         align-items: center;
         gap: .35rem
     }

     .kv {
         display: flex;
         justify-content: space-between;
         gap: .6rem;
         margin-bottom: .35rem;
         font-size: .78rem
     }

     .kv .k {
         color: var(--mut)
     }

     .divider {
         height: 1px;
         background: rgba(148, 163, 184, .12);
         margin: .65rem 0
     }

     .layer-list {
         display: flex;
         flex-direction: column;
         gap: .45rem;
         max-height: 240px;
         overflow: auto;
         padding-right: .15rem;
     }

     .layer-item {
         border: 1px solid rgba(148, 163, 184, .14);
         background: rgba(2, 6, 23, .55);
         border-radius: 16px;
         padding: .55rem .6rem;
     }

     .layer-item:hover {
         background: #020617
     }

     .layer-item .name {
         font-size: .82rem;
         font-weight: 750
     }

     .layer-item .meta {
         font-size: .72rem;
         color: var(--mut)
     }

     .toggle {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: .6rem;
     }

     .alerts {
         display: flex;
         flex-direction: column;
         gap: .45rem;
         max-height: 260px;
         overflow: auto;
         padding-right: .15rem;
     }

     .alert-row {
         border: 1px solid rgba(148, 163, 184, .14);
         background: rgba(2, 6, 23, .55);
         border-radius: 16px;
         padding: .55rem .6rem;
         cursor: pointer;
         display: flex;
         justify-content: space-between;
         gap: .6rem;
     }

     .alert-row:hover {
         background: #020617
     }

     .sev {
         border-radius: 999px;
         padding: .03rem .5rem;
         font-size: .66rem;
         border: 1px solid rgba(148, 163, 184, .18);
         height: fit-content;
     }

     .sev.high {
         color: #fecaca;
         background: rgba(248, 113, 113, .14)
     }

     .sev.med {
         color: #facc15;
         background: rgba(234, 179, 8, .12)
     }

     .sev.low {
         color: #4ade80;
         background: rgba(34, 197, 94, .12)
     }

     .chartbox {
         height: 200px;
         position: relative
     }

     .chartbox>canvas {
         position: absolute;
         inset: 0;
         width: 100% !important;
         height: 100% !important
     }

     .leaflet-popup-content-wrapper {
         background: #020617;
         color: var(--tx);
         border: 1px solid rgba(148, 163, 184, .16);
         border-radius: 14px
     }

     .leaflet-popup-tip {
         background: #020617
     }

     /* Topbar & Header */

     .topbar {
         position: fixed;
         inset: 0 0 auto 0;
         height: 68px;

         /* Environmental atmospheric gradient background: linear-gradient(90deg, #2c7744, #5a3f37);*/

         background:
             linear-gradient(180deg,
                 rgba(34, 139, 94) 0%,
                 /* forest green tint */
                 rgba(34, 139, 94, 0.18) 55%,
                 rgba(255, 255, 255) 100%);

         backdrop-filter: blur(18px) saturate(1.2);

         z-index: 1200;
     }


     .topbar-inner {
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 1.4rem;
     }

     /* LEFT */
     .topbar-left {
         display: flex;
         align-items: center;
     }

     /* User Manual Button */
     .manual-btn {
         display: inline-flex;
         align-items: center;
         gap: 6px;
         padding: 6px 10px;
         border-radius: 999px;
         font-size: 0.8rem;
         color: var(--tx);
         text-decoration: none;

         background: color-mix(in srgb, var(--pri) 10%, transparent);
         border: 1px solid color-mix(in srgb, var(--pri) 22%, var(--border));

         transition: all 0.2s ease;
     }

     .manual-btn i {
         font-size: 16px;
         margin-left: 2px;
     }

     .manual-btn:hover {
         background: color-mix(in srgb, var(--pri) 18%, transparent);
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
     }


     /* Branding */
     .brand {
         display: flex;
         align-items: center;
         gap: 12px;
     }

     .sup-logo {
         height: 50px;
         width: auto;
     }

     /* UI Elements */
     .pill {
         border-radius: 999px;
         border: 1px solid var(--border);
         background: #fff;
         color: var(--pri-dark);
         font-size: .7rem;
         padding: .15rem .7rem;
         display: inline-flex;
         gap: .35rem;
         align-items: center;
         font-weight: 600;
     }

     .btn-soft {
         border: 1px solid var(--border);
         background: color-mix(in srgb, var(--pri) 10%, transparent);
         color: var(--tx);
         border-radius: 999px;
         font-size: .74rem;
         padding: .25rem .7rem;
         font-weight: 600;
         transition: all .2s ease;
         backdrop-filter: blur(6px);
     }

     .btn-soft:hover {
         background: color-mix(in srgb, var(--pri) 22%, transparent);
         color: var(--pri);
         border-color: color-mix(in srgb, var(--pri) 45%, transparent);
     }

     /* Cards + Grids (Dense Theme)*/
     .cardx {
         background: var(--card);
         /* main card color with soft green tint */
         border: 1px solid rgba(20, 83, 45, 0.15);
         /* subtle primary green border */
         border-radius: var(--radius);
         padding: 0.85rem 0.95rem;
         box-shadow: var(--shadow);
         min-width: 0;
         transition: all 0.2s ease-in-out;
         backdrop-filter: blur(10px);
     }

     .cardx:hover {
         transform: translateY(-3px);
         background: var(--card2);
         /* slightly deeper green on hover */
         box-shadow: 0 15px 35px rgba(20, 83, 45, 0.12);
         /* denser shadow with primary green tone */
         border-color: var(--pri);
         /* strong primary border on hover */
     }

     .cardx.soft {
         background: var(--card2);
         /* secondary cards / soft cards */
         box-shadow: none;
         border: 1px solid rgba(20, 83, 45, 0.15);
         /* subtle primary green border */
     }

     .mini {
         font-size: .68rem;
         /* Deep forest sage for better text contrast */
         color: #3d5a4c;
         /* Subtle border using your brand green */
         border: 1px solid rgba(74, 222, 128, 0.25);
         border-radius: 999px;
         padding: .08rem .6rem;
         /* Light semi-transparent background */
         background: rgba(255, 255, 255, 0.5);
         font-weight: 600;
         backdrop-filter: blur(4px);
         display: inline-flex;
         align-items: center;
         text-transform: uppercase;
         letter-spacing: 0.02em;
     }


     /* Map & Tools */
     #map {
         border-radius: 5px;
         border: 1px solid var(--border);
         background: #eee;
         height: calc(100vh - 70px);
         overflow: hidden;
     }

     .map-tools {
         display: flex;
         gap: .5rem;
         flex-wrap: wrap;
         margin-bottom: .65rem;
         background: rgba(255, 255, 255, 0.3);
         padding: 0.4rem;
         border-radius: 12px;
     }

     .chip {
         display: inline-flex;
         align-items: center;
         gap: .35rem;
         border: 1px solid rgba(148, 163, 184, .18);
         background: rgba(2, 6, 23, .55);
         border-radius: 999px;
         padding: .08rem .55rem;
         font-size: .72rem;
         color: var(--mut);
         font-weight: 600;
     }

     /* Form Controls */
     .form-control,
     .form-select {
         font-size: .78rem;
         background: #fff;
         border: 1px solid var(--border);
         color: var(--tx);
         border-radius: 12px;
         padding: .4rem .6rem;
     }

     .form-control:focus {
         border-color: var(--pri);
         outline: none;
         box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
     }

     option {
         color: #1a2e25;
         background: #fff;
     }

     /* Lists & Alerts */
     .layer-item,
     .alert-row {
         border: 1px solid var(--border);
         background: var(--card);
         border-radius: 16px;
         padding: .6rem;
         margin-top: 1px;
         /* Small spacing between items */
         transition: all 0.2s ease;
         display: flex;
         align-items: center;
         gap: .55rem;
         cursor: pointer;
     }

     /* Hover effect for interactivity */
     .layer-item:hover,
     .alert-row:hover {
         background: rgba(45, 106, 79, .08);
         /* soft green hover */
         border-color: var(--pri);
         transform: translateX(3px);
     }

     /* Inputs inside layer-item */
     .layer-item input[type="checkbox"],
     .layer-item input[type="radio"] {
         accent-color: var(--pri);
         cursor: pointer;
         transform: scale(1.05);
     }

     .sev.high {
         color: #991b1b;
         background: #fee2e2;
         border: 1px solid #fecaca;
     }

     .sev.med {
         color: #92400e;
         background: #fef3c7;
         border: 1px solid #fde68a;
     }

     .sev.low {
         color: #166534;
         background: #dcfce7;
         border: 1px solid #bbf7d0;
     }

     /* Scrollbars */
     ::-webkit-scrollbar {
         width: 6px;
     }

     ::-webkit-scrollbar-track {
         background: transparent;
     }

     ::-webkit-scrollbar-thumb {
         background: #c2d1c9;
         border-radius: 10px;
     }

     /* Table Height Logic */
     .table-wrap {
         margin-top: 1px;
         border: 1px solid var(--border);
         background: #fff;
         border-radius: var(--radius);
         max-height: 400px;
         overflow: auto;
     }

     /* Leaflet Popup - Clean & Visible */
     .leaflet-popup-content-wrapper {
         /* White glass look */
         background: rgba(255, 255, 255, 0.95);
         color: #1a2e25;
         border: 1px solid rgba(74, 222, 128, 0.25);
         border-radius: 14px;
         box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(8px);
     }

     .leaflet-popup-tip {
         background: rgba(255, 255, 255, 0.95);
         border: 1px solid rgba(74, 222, 128, 0.1);
     }

     /* MAP LAYERS PANEL – ENV THEME */

     .layer-group {
         background: var(--card);
         backdrop-filter: blur(10px);
         border: 1px solid var(--border);
         border-radius: 5px;
         padding: .75rem .85rem;
         margin-bottom: .75rem;
         box-shadow: var(--shadow);
     }

     /* Section title */
     .layer-title {
         font-size: .72rem;
         font-weight: 800;
         letter-spacing: .06em;
         text-transform: uppercase;
         color: #2d6a4f;
         margin-bottom: .5rem;
         border-bottom: 1px dashed rgba(45, 106, 79, .25);
         padding-bottom: .25rem;
     }


     /* Layer item */
     .layer-item {
         display: flex;
         align-items: center;
         gap: .55rem;
         font-size: .78rem;
         font-weight: 600;
         color: #2d6a4f;
         padding: .35rem .45rem;
         border-radius: 10px;
         cursor: pointer;
         transition: all .2s ease;
     }

     .layer-item:hover {
         background: rgba(45, 106, 79, .08);
         color: var(--pri);
         transform: translateX(3px);
         box-shadow: 0 4px 12px rgba(45, 106, 79, .1);
     }



     /* Inputs */
     .layer-item input[type="checkbox"],
     .layer-item input[type="radio"] {
         accent-color: var(--pri);
         cursor: pointer;
         transform: scale(1.05);
     }

     /* YEAR GROUP (DETAILS)*/

     details {
         margin-bottom: .35rem;
     }

     /* Year header */
     details summary {
         list-style: none;
         cursor: pointer;
         font-size: .78rem;
         font-weight: 700;
         color: #2d6a4f;
         padding: .45rem .55rem;
         border-radius: 12px;
         background: rgba(255, 255, 255, .6);
         border: 1px solid var(--border);
         display: flex;
         align-items: center;
         gap: .4rem;
         transition: all .2s ease;
     }

     details summary:hover {
         background: #ffffff;
         box-shadow: 0 6px 16px rgba(27, 46, 37, .06);
     }

     /* Chevron */
     details summary::before {
         content: "▸";
         font-size: .8rem;
         color: #2d6a4f;
         transition: transform .2s ease;
     }

     details[open] summary::before {
         transform: rotate(90deg);
     }

     /* Month items */
     details .layer-item {
         margin-left: 1rem;
         font-size: .74rem;
         color: var(--mut);
     }

     /*ACTIVE / CHECKED STATE */

     .layer-item input:checked {
         box-shadow: 0 0 0 2px rgba(45, 106, 79, .15);
     }

     /* SCROLLABLE LAYER PANEL */
     .layer-panel {
         max-height: 65vh;
         /* responsive height */
         overflow-y: auto;
         overflow-x: hidden;
         padding-right: 6px;
         /* space for scrollbar */
         scroll-behavior: smooth;
     }

     /* SCROLLBAR (MATCHES SITE) */
     .layer-panel::-webkit-scrollbar {
         width: 6px;
     }

     .layer-panel::-webkit-scrollbar-thumb {
         background: #c2d1c9;
         border-radius: 10px;
     }

     .layer-panel::-webkit-scrollbar-track {
         background: transparent;
     }

     /* NESTED INDENTING */
     .layer-panel details details {
         margin-left: 16px;
         /* one indent */
     }

     .layer-panel details details .layer-item {
         margin-left: 12px;
     }

     /* SUMMARY STYLING */
     .layer-panel summary {
         cursor: pointer;
         font-weight: 600;
     }

     .layer-panel details details summary {
         font-weight: 500;
     }



     /* Filters */
     .filters {
         display: grid;
         grid-template-columns: 1.2fr .9fr .9fr .9fr .9fr;
         gap: .5rem;
         align-items: end;
     }

     .form-label {
         font-size: .72rem;
         color: var(--mut);
         margin-bottom: .15rem
     }

     .form-select,
     .form-control {
         font-size: .78rem;
         /* Soft white/mint background for high readability */
         background: #ffffff;
         /* Subtle border using a hint of your brand green */
         border: 1px solid rgba(74, 222, 128, 0.25);
         /* Deep forest text for maximum contrast */
         color: #1a2e25;
         border-radius: 14px;
         padding: 0.5rem;
         transition: all 0.2s ease;
     }

     /* High-Visibility Focus State */
     .form-select:focus,
     .form-control:focus {
         outline: none;
         border-color: #4ade80;
         /* Your brand color */
         box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
         background: #fdfdfd;
     }

     /* Dropdown Options - Crucial for Light Mode Visibility */
     option {
         /* Ensuring text is almost black and background is white */
         color: #0d1a14;
         background-color: #ffffff;
         padding: 10px;
     }

     /* Styling for the dropdown arrow in some browsers */
     .form-select {
         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234ade80' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
         background-position: right 0.5rem center;
         background-repeat: no-repeat;
         background-size: 1.5em 1.5em;
         padding-right: 2.5rem;
         appearance: none;
     }

     .kpi-grid {
         display: grid;
         grid-template-columns: repeat(5, minmax(0, 1fr));
         gap: .2rem;
     }

     .kpi {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
         gap: .6rem;
     }

     .kpi .label {
         font-size: .74rem;
         color: var(--mut)
     }

     .kpi .value {
         font-size: 1.18rem;
         font-weight: 800;
         letter-spacing: .02em
     }

     .kpi .delta {
         font-size: .72rem;
         color: var(--mut)
     }

     /* Major Cities chk */
     .layer-group.one-line {
         display: flex;
         align-items: center;
         gap: 8px;
     }


     .north-arrow {
         margin-bottom: 20px !important;
         margin-left: 20px !important;
     }

     .north-arrow img {
         width: 50px;
         /* Adjust size as needed */
         height: auto;
     }

     /* Search bar */
     .search-box {
         margin-right: 1rem;
         position: relative;
         width: 15.0rem;
     }

     .search-box input {
         width: 100%;
         padding: 7px 12px;
         font-size: 13px;
         color: var(--tx);
         background: var(--bg1);
         border-radius: 5px;
         border: 1px solid var(--border);
         outline: none;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
     }

     .search-box input::placeholder {
         color: var(--mut);
     }

     .search-box input:focus {
         border-color: var(--pri);
         background: #fff;
         box-shadow: 0 0 0 2px color-mix(in srgb, var(--pri) 20%, transparent);
     }


     #searchResults {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background: var(--card);
         border: 1px solid #ddd;
         border-top: none;
         max-height: 220px;
         overflow-y: auto;
         list-style: none;
         padding: 0;
         margin: 0;
         z-index: 9999;
     }

     #searchResults li {
         padding: 6px 10px;
         cursor: pointer;
         font-size: 12px;
     }

     #searchResults li:hover {
         background: #f1f3f5;
     }

     .city-label {
         background: rgba(0, 0, 0);
         color: #fff;
         border: none;
         border-radius: 2px;
         padding: 2px 4px;
         font-size: 10px;
         box-shadow: 0 1px 2px rgba(0, 0, 0);
     }

     .leaflet-popup-content {
         margin: 0px !important;
     }

     .manual-actions {
         display: flex;
         gap: 8px;
         /* 👈 space between buttons */
         align-items: center;
     }
	 
	  @media (max-width: 900px) {
  .sb-title, .sb-sub, .sec, .nav-a > span:not(:first-child) { display: none; }
  .search-box {
         margin-right: 1rem;
         position: relative;
         width: 10.0rem;
     }
    }