body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: Arial, sans-serif;

    }

    #container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .navbar {
      background-color: #08364F;
      color: white;
      padding: 25px 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .navbar-brand {
      font-size: 3em;
      font-weight: bold;
      color: #ffb400;
      text-shadow: 2px 2px 4px rgb(140 140 140);
    }

    #map {
      flex: 2;
      width: 100%;
      height: 60%;
      /* flex: 1;
    height: 100%; */
      background-color: #E6E6E6;
      position: relative;
    }

    #map .ol-overlaycontainer {
      cursor: pointer;
    }


    #chartsSection {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* Distribute cards in a row */
      gap: 10px;
      /* Space between cards */
      flex-wrap: wrap;
      /* Allow wrapping if the screen is too small */
      margin-top: 20px;
      background-color: #E6E6E6;
      /* Top margin for spacing */
      /* position: absolute; */
      z-index: 100;
      bottom: 0;
      /* width: 30%;
      float: right; */
      overflow: visible;

    }

    /* Card Styling */
    .chart-card {
      background-color: #08364F;
      color: white;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      /* width: 30%; */
      min-height: 450px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-sizing: border-box;      
      border-radius: 5px;
      overflow: visible;
    }

    #chart {
      width: 100%;
      height: 200px;
      object-fit: contain;
    }

    /* Styling for legend container */
    #chart-legend-container {
      padding: 10px;
      margin-top: 10px;
      border-radius: 8px;
      flex-grow: 1;
    }

    /* Styling for data display container */
    #data-display-container {
      
      padding: 10px;
      margin-top: 10px;
      border-radius: 8px;
      /* Rounded corners */
      flex-grow: 1;
      color: white;
      /* Allow the data display to grow and fill space */
    }



    .legendBar {
      background-color: #08364F;
      color: white;
      padding: 10px;
      display: flex;
      flex-direction: column;
    }

    #toggleLegend {
      background-color: #FFB400;
      border: none;
      color: white;
      padding: 10px;
      margin-bottom: 5px;
      font-size: larger;
    }

    #legendContent {
      display: none;
      /* Initially hidden */
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    .legend-item {
      display: flex;
      align-items: center;
      margin: 5px;
    }

    /* Container for the Legend List */
    .legend-list {
      display: flex;
      flex-wrap: wrap;
      /* Allow items to wrap to the next line */
      list-style-type: none;
      padding: 10px 100px 0px 100px;
      margin: 0;
      justify-content: space-between;
      /* Distribute items evenly */
    }

    /* Each item in the legend */
    .legend-list li {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      /* Add bottom margin for spacing between rows */
      width: 30%;
      /* Set width of each item (adjust to fit 3 items per row) */
      min-width: 200px;
      /* Ensure minimum width for each item */
      margin-right: 10px;
      /* Space between items in the same row */
    }

    /* Color Box for each legend item */
    .legend-list li .color-box {
      width: 25px;
      /* Fixed width for color box */
      height: 25px;
      /* Fixed height for color box */
      margin-right: 10px;
      /* Spacing between color box and label */
    }

    /* Ensure text is properly aligned */
    .legend-list li span {
      display: inline-block;
      margin-left: 10px;
      /* Adjust label spacing */
    }

    .logo1 {
      max-height: 120px;
      margin: 0 20px;
    }


    .color-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }


    .legend-color {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 5px;
      margin-top: 5px;
    }

    /* #enableSwipe {
        background-color: #a0b128cc;
        padding: 10px;
        cursor: pointer;
        border: none;
        margin: 5px;
        z-index: 10;
        font-size: medium;
        color: red;
        font-weight: bolder;
    }

    #enableSwipe:hover {
        background-color: #7c8921;
    } */

    /* Position the tab container in the top-left corner of the map */
    .tab-container {
      position: absolute;
      /* top: 20px; */
      /* Distance from the top of the map */
      left: 20px;
      /* Distance from the left of the map */
      z-index: 10;
      /* Ensure the buttons are on top of other map elements */
      background-color: rgba(255, 255, 255, 0.8);
      /* Slight background for better visibility */
      padding: 10px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      /* Arrange the buttons vertically */
      gap: 10px;
      /* Space between buttons */
      margin-top: 10px;
    }

    /* District Search Wrapper - matches LCCS buttons container styles */
    .district-search-wrapper {
      position: absolute;
      top: 20px;
      right: 20px;      /* use right instead of left when overlaying */
      z-index: 1000;    /* above map tiles and controls */
      background-color: rgba(255, 255, 255, 0.8);
      padding: 10px;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0;        /* not needed when using top/right */
    }

    /* District Search Container - reset to flow within wrapper */
    .district-search-container {
      position: static;
      width: 300px;
      background: transparent;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
    }

    /* District Search Input */
    .district-search-input {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 2px solid #048616;
      border-radius: 5px;
      background-color: white;
      color: #333;
      transition: border-color 0.3s, box-shadow 0.3s;
      box-sizing: border-box;
    }

    .district-search-input:hover {
      border-color: #45a049;
      box-shadow: 0 2px 4px rgba(4, 134, 22, 0.2);
    }

    .district-search-input:focus {
      outline: none;
      border-color: #4CAF50;
      box-shadow: 0 0 8px rgba(4, 134, 22, 0.3);
    }

    .district-search-input::placeholder {
      color: #999;
    }

    /* District Suggestions Dropdown */
    .district-suggestions {
      position: absolute;
      top: calc(100% + 5px);
      left: 10px;
      right: 10px;
      background-color: white;
      border: 2px solid #048616;
      border-radius: 5px;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1001;
      display: none;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      margin-top: 2px;
    }

    .district-suggestions.show {
      display: block;
    }

    .district-suggestion-item {
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #e0e0e0;
      transition: background-color 0.2s;
    }

    .district-suggestion-item:hover {
      background-color: #f0f0f0;
    }

    .district-suggestion-item:last-child {
      border-bottom: none;
    }

    .district-suggestion-item.highlighted {
      background-color: #e8f5e9;
      font-weight: bold;
    }

    /* Province Selector Container */
    .province-selector-container {
      width: 100%;
    }

    /* Province Selector Dropdown */
    .province-selector {
      width: 100%;
      padding: 10px;
      font-size: 14px;
      border: 2px solid #048616;
      border-radius: 5px;
      background-color: white;
      color: #333;
      cursor: pointer;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .province-selector:hover {
      border-color: #45a049;
      box-shadow: 0 2px 4px rgba(4, 134, 22, 0.2);
    }

    .province-selector:focus {
      outline: none;
      border-color: #4CAF50;
      box-shadow: 0 0 8px rgba(4, 134, 22, 0.3);
    }

    /* Style for individual buttons */
    .tab-button {
      background-color: #048616;
      /* Green color initially */
      border: none;
      color: white;
      padding: 10px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      width: 150px;
      border-radius: 5px;
      transition: background-color 0.3s, color 0.3s;
      /* Smooth transition for background and text color */
    }

    /* Change color when the button is hovered */
    .tab-button:hover {
      background-color: #45a049;
    }

    /* Active state for buttons */
    .tab-button.active {
      background-color: #4CAF50;
      /* Lighter green background when active */
      color: red;
      /* Red text when active */
      font-weight: bolder;
      /* Bold text when active */
    }

    /* Dropdown Container */
    .dropdown {
      position: relative;
      display: inline-block;
      font-family: 'Arial', sans-serif;
    }

    /* Dropdown Button */
    .dropbtn {
      background-color: #ffffff00;
      color: white;
      padding: 10px 15px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .dropbtn:hover {
      background-color: #073362;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    /* User Icon */
    .user-icon i {
      font-size: 18px;
    }

    /* Username Styling */
    .username {
      font-weight: bold;
      color: white;
      margin: 0;
    }

    /* Dropdown Content */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: white;
      min-width: 160px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      z-index: 1;
      margin-top: 10px;
      overflow: hidden;
    }

    .dropdown-content a {
      color: #333;
      text-decoration: none;
      display: block;
      padding: 10px 15px;
      font-size: 14px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .dropdown-content a:hover {
      background-color: #073362;
      color: white;
    }

    /* Caret Icon Styling */
    .dropbtn i {
      margin-left: auto;
      font-size: 14px;
      transition: transform 0.3s ease;
    }

    /* Show Dropdown */
    .dropdown.show .dropdown-content {
      display: block;
    }

    .title {
      display: flex;
      align-items: center;
      /* Vertical alignment */
      justify-content: center;
      /* Horizontal alignment */
      gap: 15px;
      /* Space between the image and text */
      text-align: center;

    }


    .title-text {
      font-size: 3em;
      font-weight: bold;
      color: #ffb400;
      text-shadow: 2px 2px 4px rgb(140 140 140);
    }


    .box > * {
      border: 2px solid rgb(96 139 168);
      border-radius: 5px;
      background-color: rgb(96 139 168 / 0.2);
    }
    
    .box {         
      display: flex;
      width: 100%;
      height: calc(100vh - 140px); /* Adjust height, subtracting navbar height */
    }
    
    .one {
      /* flex: 8 1 auto; */
      flex: 1.5;
      /* padding: 10px; */
      
    }
    
    .two {
      /* flex: 2 1 auto; */
      flex: 1;
      padding: 5px;
      overflow-y: auto; /* scroll if content exceeds height */
    }

    .collapse-icon{
      position: absolute;
      top: 97%;
      right: 0px;
      width: 40px;
      height: 40px;
      background-color: #093C58;
      color: white;
      border: 1px solid #093C58;
      cursor: pointer;
      border-radius: 50% 50% 50% 0;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      transition: background-color 0.3s, border-color 0.3s;
      animation: moveIcon 1.5s infinite alternate;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translateY(-50%);
    }
    .panel-hidden {
      display: none;
      /* Hide the panel completely */
    }

    @keyframes moveIcon {
      0% {
        bottom: -20px;
      }
    
      100% {
        bottom: -10px;
      }
    }
  
    #leftLabel, #rightLabel {
      font-size: 14px;
      font-weight: bold;
      pointer-events: none; 
  }

  .ol-swipe > button:nth-child(1){
    height: 30px;
    width: 30px;
  }
  div.ol-swipe.ol-unselectable.ol-control.vertical > button{background-color: black;}
  

  /* ============================================
     MOBILE RESPONSIVE STYLES
     ============================================ */
  
  /* Tablet and below (max-width: 1024px) */
  @media screen and (max-width: 1024px) {
    .box {
      flex-direction: column;
      height: auto;
      min-height: calc(100vh - 140px);
    }
    
    .one {
      flex: 1;
      width: 100%;
      min-height: 50vh;
    }
    
    .two {
      flex: 1;
      width: 100%;
      max-height: 50vh;
    }
    
    #map {
      height: 100%;
      min-height: 400px;
    }
    
    .navbar {
      padding: 15px 20px;
      flex-wrap: wrap;
    }
    
    .navbar-brand,
    .title-text {
      font-size: 2em;
    }
    
    .logo1 {
      max-height: 80px;
      margin: 0 10px;
    }
    
    .tab-container {
      left: 10px;
      padding: 8px;
      gap: 8px;
    }
    
    .tab-button {
      width: 120px;
      padding: 8px;
      font-size: 12px;
    }
    
    .district-search-wrapper {
      top: 10px;
      right: 10px;
      padding: 8px;
      max-width: calc(100% - 20px);
    }
    
    .district-search-container {
      width: 100%;
      max-width: 250px;
    }
    
    .province-selector,
    .district-search-input {
      font-size: 12px;
      padding: 8px;
    }
    
    .chart-card {
      min-height: 300px;
    }
    
    #chart {
      height: 150px;
    }
  }
  
  /* Mobile phones (max-width: 768px) */
  @media screen and (max-width: 768px) {
    .navbar {
      padding: 10px 15px;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    
    .navbar-brand,
    .title-text {
      font-size: 1.5em;
    }
    
    .title {
      flex-direction: column;
      gap: 5px;
    }
    
    .logo1 {
      max-height: 60px;
      margin: 0;
    }
    
    .box {
      min-height: calc(100vh - 200px);
    }
    
    .one {
      min-height: 40vh;
    }
    
    .two {
      max-height: 60vh;
    }
    
    #map {
      min-height: 300px;
    }
    
    .tab-container {
      left: 5px;
      top: 5px;
      padding: 5px;
      gap: 5px;
      margin-top: 5px;
      flex-direction: row;
      flex-wrap: wrap;
      max-width: calc(100% - 10px);
    }
    
    .tab-button {
      width: 100px;
      padding: 6px;
      font-size: 11px;
      flex: 1;
      min-width: 80px;
    }
    
    .province-selector-container {
      width: 100%;
      order: 3;
    }
    
    .province-selector {
      width: 100%;
      font-size: 11px;
      padding: 6px;
    }
    
    .district-search-wrapper {
      top: 5px;
      right: 5px;
      left: 5px;
      padding: 5px;
      max-width: calc(100% - 10px);
      position: relative;
      margin-bottom: 10px;
    }
    
    .district-search-container {
      width: 100%;
      max-width: 100%;
    }
    
    .district-search-input {
      font-size: 11px;
      padding: 6px;
    }
    
    .district-suggestions {
      left: 5px;
      right: 5px;
      max-height: 150px;
    }
    
    .chart-card {
      min-height: 250px;
      padding: 8px;
    }
    
    #chart {
      height: 120px;
    }
    
    .legend-list {
      padding: 10px 20px 0px 20px;
    }
    
    .legend-list li {
      width: 100%;
      min-width: auto;
    }
    
    .collapse-icon {
      top: 95%;
      width: 35px;
      height: 35px;
    }
    
    .dropdown {
      width: 100%;
    }
    
    .dropbtn {
      width: 100%;
      justify-content: space-between;
      padding: 8px 12px;
      font-size: 14px;
    }
  }
  
  /* Small mobile phones (max-width: 480px) */
  @media screen and (max-width: 480px) {
    .navbar {
      padding: 8px 10px;
    }
    
    .navbar-brand,
    .title-text {
      font-size: 1.2em;
    }
    
    .logo1 {
      max-height: 50px;
    }
    
    .box {
      min-height: calc(100vh - 180px);
    }
    
    .one {
      min-height: 35vh;
    }
    
    .two {
      max-height: 65vh;
    }
    
    #map {
      min-height: 250px;
    }
    
    .tab-container {
      gap: 4px;
      padding: 4px;
    }
    
    .tab-button {
      width: auto;
      min-width: 70px;
      padding: 5px;
      font-size: 10px;
      flex: 1 1 calc(33.333% - 4px);
    }
    
    .province-selector,
    .district-search-input {
      font-size: 10px;
      padding: 5px;
    }
    
    .chart-card {
      min-height: 200px;
      padding: 5px;
    }
    
    #chart {
      height: 100px;
    }
    
    #chart-legend-container,
    #data-display-container {
      padding: 5px;
      margin-top: 5px;
    }
    
    .legend-list {
      padding: 5px 10px 0px 10px;
    }
    
    .legend-list li {
      margin-bottom: 10px;
      font-size: 12px;
    }
    
    .color-box,
    .legend-color {
      width: 15px;
      height: 15px;
    }
  }
  
  /* Landscape orientation on mobile */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .box {
      flex-direction: row;
    }
    
    .one {
      min-height: 100%;
      flex: 1.2;
    }
    
    .two {
      max-height: 100%;
      flex: 0.8;
    }
    
    #map {
      min-height: 100%;
    }
  }
  
  /* Touch device optimizations */
  @media (hover: none) and (pointer: coarse) {
    .tab-button,
    .province-selector,
    .district-search-input,
    .dropbtn {
      min-height: 44px; /* Minimum touch target size */
    }
    
    .district-suggestion-item {
      min-height: 44px;
      padding: 12px;
    }
    
    .collapse-icon {
      width: 44px;
      height: 44px;
    }
  }