/* Cascading Style Sheet */
    html, body {
      height: 100%;
      margin: 1px;
      font-family: 'Jost', sans-serif;
    }
    :root {
      --bs-primary: #198754 !important; /* Bootstrap's "success" green */
    }
    .page-wrapper {
      border: 2px solid #98cb00;
      border-radius: 10px;
      margin: 0px;
      height: calc(100% - 0px);
      display: grid;
      grid-template-columns: 330px 1fr; /* Change width of Sidebar  */
      grid-template-rows: 1fr;
      grid-template-areas: "sidebar main";
      overflow: hidden;
    }
    .header { 
        display: none; 
    }
    .stylish-dark-sidebar {
      grid-area: sidebar;
      background-color: #243b30;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }
    .stylish-dark-sidebar .nav-item .nav-link {
      display: flex;
      align-items: center;
      color: #c0c0c0; 
      padding: 12px 15px;
      border-radius: 8px;
      margin-bottom: 5px;
      transition: 0.3s ease;
      font-weight: 500;
      text-decoration: none;
    }
    .stylish-dark-sidebar .nav-item .nav-link i {
      margin-right: 10px;
    }
    .stylish-dark-sidebar .nav-item .nav-link:hover {
      background-color: #799c10;
      color: #fff;
      transform: translateX(5px);
    }
    .stylish-dark-sidebar .nav-item .nav-link.active {
      background: linear-gradient(90deg, rgba(53,184,162,1) 0%, rgba(14,128,109,1) 100%);
      color: #fff;
      box-shadow: 0 4px 15px rgba(92,224,202,0.3);
    }
    .profile-dropdown {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
    .main-content {
      grid-area: main;
      display: flex;
      flex-direction: column;
      /* Removed padding-top here */
      padding: 2px 2px 2px 2px; /* Set all padding values explicitly */
      overflow: hidden;
      height: 100%;
    }
    .filter-bar {
      margin-top: 0 !important;
      margin-bottom: 6px;
      padding: 2px;
    }
    
    .filter-bar .row {
      --bs-gutter-x: 0; /* Remove horizontal gutter between columns */
      margin-right: 4px;
      margin-left: 0;
    }
    
    /* Remove padding/margin from columns */
    .filter-bar .col-md-2,
    .filter-bar .col-md-3,
    .filter-bar .col-md-4,
    .filter-bar .col {
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin: 0;
    }
    
    /* Add spacing between elements inside columns (e.g., buttons, selects) */
    .filter-bar .col-md-2 > *:not(:last-child),
    .filter-bar .col-md-3 > *:not(:last-child),
    .filter-bar .col-md-4 > *:not(:last-child),
    .filter-bar .col > *:not(:last-child) {
      margin-right: 6px;
    }
    .map-container {
      flex-grow: 1;
      position: relative;
      border: 1px solid #98cb00;
      border-radius: 2px;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
    .pin-attributes {
      background: #273830;
      border: 1px solid #495057;
      border-radius: 8px;
      padding: 10px;
      max-height: 680px;
      overflow-y: auto;
      color: #ccc;
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.2;
    }
    .bg-card {
      background-color: #f0f0f0; 
    }
    
    .text-card {
      color: #000; 
    }
    #photoViewer button {
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
    #photoViewer img {
      transition: transform 0.2s ease-in-out;
    }
    #photoViewer img:hover {
      transform: scale(1.02);
    }
    /* Leaflet Base layer control  */
    .leaflet-control-layers-toggle {
    background-image: none !important; /* Remove default image */
    background-color: #fff;
    font-family: 'jost'; 
    font-weight: 900;
    content: "\f0c9";  /* Font Awesome icon (layers icon or bars icon) */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    width: 34px;
    height: 34px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    text-decoration: none !important;
    }
    .leaflet-pane.projectsPane {
      z-index: 650 !important;
    }
    .leaflet-control-layers {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px; /* you can adjust */
    }
    .leaflet-control-layers label {
        font-family: 'Jost', sans-serif !important;
        /*font-weight: 400;  or 400/600 for different thickness */
    }
    .leaflet-control-ruler {
    width: 34px;
    height: 34px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    }
    
    .leaflet-control-ruler i {
        text-decoration: none;
        display: block;
    }
    .floating-nav-btn {
      position: absolute;
      bottom: 20px;
      left: 15px;
      z-index: 1000;
      background: #43b02a;
      color: white;
      width: auto; /* Let content define width */
      height: auto;
      padding: 8px 16px; /* Spacing inside button */
      border-radius: 6px; /* Rounded corners, not full circle */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
      cursor: pointer;
    }
    .floating-nav-menu {
      position: absolute;
      bottom: 70px; /* above the button */
      left: 20px;
      z-index: 1000;
      background: rgba(52, 58, 64, 0.9);
      padding: 5px;
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }
    .floating-nav-menu button {
      font-size: 14px;
    }
    .custom-cluster {
      background-color: #98cb00;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      box-shadow: 0 0 3px #1a1a1a;
    }
    .uniform-photo {
      width: 100%;
      max-width: 300px;
      height: 180px;
      object-fit: cover;
      border-radius: 6px;
    }
    
    .photo-wrapper {
      width: 100%;
      max-width: 300px;
      height: 180px;
      overflow: hidden;
      display: inline-block;
      position: relative;
    }
    .leaflet-marker-icon.drop-pin {
      animation: drop-from-top 0.6s ease forwards;
      transform: translateY(-100px);
      opacity: 0;
    }
    
    @keyframes drop-from-top {
      0% {
        transform: translateY(-100px);
        opacity: 0;
      }
      70% {
        transform: translateY(5px);
        opacity: 1;
      }
      100% {
        transform: translateY(0);
      }
    }
    
    @media (max-width: 767.98px) {
      .page-wrapper {
        grid-template-columns: 1fr; /* remove sidebar column */
        grid-template-areas:
          "header"
          "main";
      }
    
      .stylish-dark-sidebar {
        position: fixed;
        top: 0;
        left: -300px; /* hide off screen */
        width: 270px;
        height: 100%;
        z-index: 1050;
        background-color: #1a1a2e;
        transition: left 0.3s ease-in-out;
      }
    
      .stylish-dark-sidebar.show {
        left: 0; /* show when toggled */
      }
    
      .main-content {
        padding: 10px;
      }
    
      .hamburger-btn {
        background: none;
        border: none;
        color: white;
        font-size: 22px;
      }
    
      .profile-dropdown {
        position: static;
        transform: none;
      }
       .county-tooltip {
        background: #333;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 13px;
        font-family: 'Jost', sans-serif !important;
        pointer-events: none;
      }
    }