body, html {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    /* Removed overflow: hidden; to allow normal scrolling on the main page */
}

#map-container {
    flex: 1; /* This will make the map container take the available space */
    display: flex;
    overflow: hidden; /* Ensure the map doesn't cause overflow */
}

#map {
    flex: 1; /* This will make the map take the available space */
}

.button-container {
    display: flex;
    justify-content: space-between;
    padding: 2px 10px;
    align-items: center;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd; /* Optional: adds a separator line */
    flex-shrink: 0; /* Prevent the button container from shrinking */
}

.button-container:last-child {
    border-bottom: none; /* Remove the separator for the last button container */
}

.newsite-button, .help-text, #site-dropdown, .draw-button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsite-button, .draw-button {
    background-color: black;
    color: white;
    white-space: nowrap; /* Prevent text from wrapping */
}

.newsite-button:hover, .draw-button:hover {
    background-color: grey;
}

.help-text {
    background-color: #760706ff;
    color: white;
    font-weight: bold;
}

.help-text:hover {
    background-color: rgb(199, 93, 91);
}

#site-dropdown {
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: white;
    color: black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1; /* Allow dropdown to grow and take available space */
    max-width: calc(100% - 150px); /* Adjust this value based on button sizes to fit within screen */
    height: 100%; /* Ensure it matches the height of adjacent buttons */
}

#site-dropdown:focus {
    border-color: black;
}

.button-container > button {
    flex-shrink: 0; /* Do not allow buttons to shrink */
    white-space: nowrap; /* Prevent text from wrapping */
}

@media (max-width: 600px) {
    .button-container {
        justify-content: space-between;
        padding: 2px 10px; /* Add space between the edge of the screen and the buttons */
    }

    .newsite-button, .help-text, .draw-button {
        padding: 10px 5px;
        font-size: 14px;
        width: auto; /* Auto width for the buttons */
    }

    #site-dropdown {
        flex-grow: 1;
        max-width: calc(100% - 150px); /* Ensure it doesn't take up too much space */
    }
}

/* Container for draw buttons to ensure they are side by side */
.draw-buttons-container {
    display: flex;
    justify-content: center;
    padding: 1px 2px; /* Add padding to create space between the buttons and the screen edges */
    background-color: #f9f9f9;
}

.draw-buttons-container .draw-button {
    flex: 1;
    margin: 1px 2px;
    white-space: nowrap;
}

/* Container for draw details to ensure they are side by side */
.draw-details-container {
    display: flex;
    justify-content: center;
    padding: 1px 2px; /* Add padding to create space between the notes and the screen edges */
    background-color: #f9f9f9;
}

.draw-details-container .draw-details {
    flex: 1;
    margin: 1px 2px;
    padding: 10px;
    background-color: #fffae6; /* Light off-white background for sticky note effect */
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    font-family: 'Arial', sans-serif;
    border-radius: 5px; /* Rounded corners for sticky note effect */
}

.draw-details h3 {
    margin-top: 0;
    font-size: 1.2em;
    color: #333;
}

.draw-details p {
    margin: 0;
    color: #666;
    font-size: 1em;
}

/* Increase width of specific buttons */
.newsite-button.wide, .help-text.wide, .draw-button.wide {
    min-width: 60px; /* Adjust the value as needed to make the buttons easier to click */
}

/* Ensure the site-dropdown height matches adjacent buttons */
#site-dropdown {
    display: flex;
    align-items: center;
    padding: 0 10px; /* Adjust padding to align with button heights */
}

/* Popup styles */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other elements */
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;
    position: relative;
    max-height: 80vh; /* Limit the height of popups to avoid overflow */
    overflow-y: auto; /* Allow scrolling within popups */
}

.close {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 50px;
    cursor: pointer;
}

/* Hide the default polygon button */
.leaflet-draw-draw-polygon {
    display: none !important;
}

/* Hide the leaflet draw tooltip */
.leaflet-draw-tooltip.draw-button {
    display: none !important;
}

/* Hide the leaflet draw tooltip */
.leaflet-draw-tooltip.draw-button.help-text {
    display: none !important;
}

/* Hide the leaflet draw tooltip */
.leaflet-draw-tooltip.leaflet-draw-tooltip-single {
    display: none !important;
}

/* Hide the leaflet attribution */
.leaflet-bottom.leaflet-right {
    display: none !important;
}

/* .polygon-label {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 5px;
    font-size: 12px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    pointer-events: none;
} */
#cost-calculator-results {
    background-color: #f9f9f9; /* Light gray background */
    border: 1px solid #ccc; /* Light border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Padding around the content */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 400px; /* Limit the width */
    margin: 20px auto; /* Center align with some margin */
    font-family: 'Arial', sans-serif; /* Clean font */
}

#cost-calculator-results {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%; /* Set to 100% width of the container */
    max-width: none; /* Remove max-width constraint */
    margin: 20px 0; /* Adjust margin if centering is not needed */
    font-family: 'Arial', sans-serif;
}

#cost-estimate {
    font-size: 22px; /* Make the cost estimate more prominent */
    font-weight: bold; /* Bold font for emphasis */
    color: #28a745; /* Green color to indicate success */
}

/* Group headers styling */
.tabulator-group {
    background-color: #f9f9f9;
    font-weight: bold;
    font-size: 14px;
  }
  
  /* Bottom calculation row styling */
  .tabulator-calcs {
    background-color: #e0e0e0;
    font-weight: bold;
  }
  
  /* Customize row styles */
  .tabulator-row {
    font-size: 14px;
  }
  /* Ensure font size is at least 16px for mobile devices */
.input-field.w-input {
    font-size: 16px;
}

/* Adjust other related styles for consistency */
.input-field.w-input,
label {
    line-height: 1.5; /* Improve readability */
    padding: 8px; /* Add padding for touch targets */
}

/* Optional: Add responsiveness */
@media (max-width: 768px) { /* Mobile-specific adjustments */
    .input-field.w-input {
        font-size: 16px; /* Ensure minimum font size */
    }
}

#requirementSelect {
    width: 100%; /* Ensure the select box takes full width */
    padding: 10px; /* Add padding for better touch targets */
    font-size: 16px; /* Ensure readability on mobile */
    border-radius: 4px; /* Rounded corners for aesthetics */
    border: 1px solid #ccc; /* Light border for visibility */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

#submitRequirementResponse {
    background-color: #760706ff; /* Dark red background */
    color: white; /* White text for contrast */
    padding: 10px 20px; /* Adequate padding for touch targets */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Ensure readability */
}

#submit-setbacks-btn{
    background-color: #760706ff; /* Dark red background */
    color: white; /* White text for contrast */
    padding: 10px 20px; /* Adequate padding for touch targets */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Ensure readability */
}

/* Modal Styling */
#setback_modal, #requirement_modal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0; /* remove inner padding */
    border-top: 2px solid #ccc;
    z-index: 3000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    height: 60vh; /* fixed height instead of max-height */
    overflow: hidden; /* no scrolling here */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    display: none;
    border-radius: 12px 12px 8px 8px;
    bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    background: transparent; 
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);  /* Soft dark overlay */
    z-index: 2999; /* Slightly under the modal */
}



#setback_modal .modal-content, #requirement_modal .modal-content {
    max-width: 600px;
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* no scroll here either */
}

/* Add scrolling to the table body */
#setback-table {
    flex: 1 1 auto;
    overflow-y: auto;
    display: block;
    margin-top: 20px;
    border-collapse: collapse;
}

/* Styling for the modal table rows and cells */
#setback-table th, #setback-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
    font-size: 14px;
}

#setback-table th {
    width: 30%; /* Zoning Type column */
}

#setback-table td:first-child {
    width: 35%;  /* Zoning Type column (slightly larger) */
    font-size: 12px; /* Smaller font size for Zoning Type */
}

#setback-table td:nth-child(2) {
    width: 25%;  /* Value column (reduced width) */
}

#setback-table td:last-child {
    width: 20%;  /* Units column (slightly smaller) */
}

/* Adjust the input and select elements to ensure they fit */
#setback-table input[type="text"], #setback-table select {
    width: 100%;
    padding: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

/* Scroll styling */
#setback-table::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
}

#setback-table::-webkit-scrollbar-thumb {
    background-color: #888; /* Color for the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#setback-table::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color for the scrollbar thumb when hovered */
}

#setback-table thead th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

/* General styles for collapsible sections */
.collapse-section {
    margin-bottom: 15px;
}

/* Style for the section header */
.collapse-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    font-size: 20px;
    background-color: #f8f9fa;
}

/* Title style */
.collapse-section-title {
    font-weight: bold;
}

/* Full-width line */
.collapse-divider {
    width: 100%;
    height: 2px;
    background-color: #ccc;
}

/* Collapsible button */
.collapse-toggle-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    outline: none;
    transition: transform 0.3s ease-in-out;
}

/* Content section (hidden by default) */
.collapse-content {
    padding: 15px 20px;
    display: none;
    background-color: #ffffff;
    border-left: 3px solid #760706ff;
    font-size: 18px;
}

/* Style for the classification modal positioned at the bottom */
#edgeModal {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px; /* Reduced padding */
    border-top: 2px solid #ccc;
    z-index: 4000; /* High z-index to cover other elements */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    max-height: 25vh; /* Adjust as needed for mobile */
    overflow-y: auto;
}

/* Center the modal content box */
#edgeModal .modal-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* Radio buttons displayed side by side */
#edgeModal .radio-group {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between options */
    margin: 10px 0;
}

#edgeModal .radio-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 6px;
}

#edgeModal .radio-group input[type="radio"] {
    accent-color: #760706; /* Optional: custom dot color */
    width: 16px;
    height: 16px;
}

/* Button group for Back and Next buttons */
#edgeModal .button-group {
    display: flex;
    justify-content: flex-end; /* Right-aligns the buttons */
    gap: 10px;
    margin-top: 4px;
}

/* Style for both buttons */
#edgeModal .button-group button {
    padding: 4px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Back button takes 1/3 of the row */
#modal-back {
    flex: 1;
    background-color: #ccc;
    color: #000;
}

/* Next button takes 2/3 of the row */
#modal-next {
    flex: 2;
    background-color: #760706ff;
    color: #fff;
}

/* Ensure modal content is centered on mobile */
@media (max-width: 768px) {
  #edgeModal .modal-content {
    max-width: 90%;
  }
}

#grossFloorArea {
    font-size: 16px;
  }

  #add-setback, #add-regulation {
      background-color: #760706ff; /* Dark red background */
      color: white; /* White text for contrast */
      padding: 8px; /* Adjusted padding for uniform look */
      border: none; /* Remove default border */
      border-radius: 4px; /* Rounded corners */
      cursor: pointer; /* Pointer cursor on hover */
      font-size: 16px; /* Ensure readability */
      width: 100%; /* Full width */
      box-sizing: border-box; /* Prevent overflow due to padding */
  }

#zoning-next, #setback-next, #regulation-finish {
    background-color: black; /* Dark red background */
    color: white; /* White text for contrast */
    padding: 5px 10px; /* Adequate padding for touch targets */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Ensure readability */
}

#regulation-back, #zoning-skip {
    background-color: #ccc; /* Light gray background for back button */
    color: #000; /* Black text for contrast */
    padding: 5px 10px; /* Adequate padding for touch targets */
    border: none; /* Remove default border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Ensure readability */
}

.leaflet-tooltip.custom-tooltip {
    z-index: 10000 !important;
    background-color: white;
    color: black;
    border-radius: 4px;
    padding: 4px 8px;
    border: 1px solid #999;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.leaflet-interactive:focus {
    outline: none; /* removes focus outline (blue box) */
}

/* Your tabs probably look like: .tab-panel { display:none } .tab-panel.active { display:block } */
/* --- Global opt-out utility --- */
@media print {
    .no-print { display: none !important; }
  }

/* --- PRINT RULES --- */
@media print {
  /* 1) Hide ALL modals / overlays / popups (by id and by class) */
  /* By class */
  .popup,
  .modal,
  .zoning-modal,
  .modal-overlay,
  .modal-backdrop,
  .drawer,
  .side-panel,
  .tooltip,
  .popover,
  .toast,
  [role="dialog"],
  [aria-modal="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* By id (covers your specific elements, even if classes change) */
  #popup,
  #edgeModal,
  #zoningModal,
  #setbackModal,
  #regulationModal,
  #setback_modal,
  #requirement_modal,
  #modal,
  #setback_overlay,
  #overlay {
    display: none !important;
    visibility: hidden !important;
  }

  /* 2) Ensure tab content prints (even if only one is “active” on screen) */
  .tabcontent {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
  }

  /* 3) Hide tab chrome / UI bits you don’t want in the PDF */
  .tab,
  .button-container,
  .draw-buttons-container,
  .collapse-toggle-btn,
  .outer-arrows-container,
  .inner-arrow,
  .select-button,
  .no-print {
    display: none !important;
  }

  /* 4) Optional page breaks between sections */
  .tabcontent + .tabcontent,
  .container + .container {
    break-before: page;
    page-break-before: always;
  }

  /* 5) Page margins */
  @page { margin: 1in; }
}

/* ==== PRINT LAYOUT FIXES (place AFTER all other CSS) ==== */
@media print {
    /* Page + color fidelity */
    @page { size: Letter portrait; margin: 0.6in; }
    * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    html, body { margin: 0 !important; padding: 0 !important; width: auto !important; background: #fff !important; color: #000 !important; }
  
    /* 1) Hide ALL overlays/modals/chrome */
    .popup, .modal, .zoning-modal, .modal-overlay, .modal-backdrop, #overlay,
    #popup, #edgeModal, #zoningModal, #setbackModal, #regulationModal,
    #setback_modal, #requirement_modal, #modal, #setback_overlay,
    .tab, .button-container, .outer-arrows-container, .inner-arrow,
    .collapse-toggle-btn, .help-text, .no-print {
      display: none !important;
      visibility: hidden !important;
    }
    body.modal-open { overflow: visible !important; }
  
    /* 2) Show ALL tabs and their content; remove any size/overflow clamps */
    .tabcontent, .container, .w-container, .w-layout-blockcontainer, .collapse-content {
      display: block !important;
      visibility: visible !important;
      width: auto !important;
      max-width: 100% !important;
      height: auto !important;
      overflow: visible !important;
    }
  
    /* 3) Prevent right-edge cutoffs & odd transforms */
    /* (If any ancestor was using transform/position sticky that confuses printing) */
    .tabcontent, .container, .w-container, #map, .tabulator, table {
      transform: none !important;
      position: static !important;
    }
  
    /* 4) Headings for each printed tab (optional but nice) */
    #Home::before, #About::before, #Details::before, #Messages::before {
      display: block; font-weight: 700; font-size: 14pt; margin: 0 0 10pt;
    }
    #Home::before     { content: "Plan"; }
    #About::before    { content: "Cost"; }
    #Details::before  { content: "Check"; }
    #Messages::before { content: "Chat"; }
  
    /* 5) Tables + Tabulator: full width, break nicely */
    table, .table, .tabulator { width: 100% !important; max-width: 100% !important; }
    table { border-collapse: collapse !important; }
    th, td { word-break: break-word; }
    .tabulator .tabulator-table { height: auto !important; overflow: visible !important; }
    .tabulator-row, .tabulator-header, tr { break-inside: avoid; page-break-inside: avoid; }
  
    /* 6) Map: give it a printable height and avoid breaking through it */
    #map { height: 5.5in !important; page-break-inside: avoid; }
  
    /* 7) Images and logos scale to page */
    img { max-width: 100% !important; height: auto !important; }
  
    /* 8) Page breaks between top-level tabs for readability */
    #About, #Details, #Messages { break-before: page; page-break-before: always; }
  }
  @media print {
    /* keep the map in normal flow and on its own page */
    #map {
      position: static !important;
      transform: none !important;
      z-index: auto !important;
      height: 5.5in !important;   /* adjust to taste */
      margin: 0 0 12pt !important;
      page-break-after: always;    /* key: isolate map page */
      break-after: page;
    }
  }

  @media print {
    /* Let Tabulator expand fully on paper */
    #pivot-table,
    #pivot-table .tabulator {
      width: 100% !important;
    }
    #pivot-table .tabulator-tableholder {
      height: auto !important;
      overflow: visible !important;
    }
    #pivot-table .tabulator-table {
      height: auto !important;
    }
    /* Avoid row/header splits */
    #pivot-table .tabulator-row,
    #pivot-table .tabulator-header {
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }

/* Colorize ONLY the hillshade tiles */
.hillshade-tiles img {
    filter: sepia(1) hue-rotate(280deg) saturate(3) brightness(1.2) contrast(1.2);
}
#streetview {
    position: absolute;
    inset: 0;
    z-index: 1000;       /* above Leaflet tiles/controls */
    display: none;       /* hidden until toggled */
}
.sv-toast {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color:#fff; padding:6px 10px; border-radius:6px;
    font: 13px system-ui, sans-serif; z-index: 1100; display:none;
}

  /* Small, thumb-friendly control */
  .leaflet-control-measure-mini {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
  }
  .leaflet-control-measure-mini button {
    all: unset; cursor: pointer; width: 100%; height: 100%;
    display: grid; place-items: center; font-size: 18px;
  }
  .leaflet-control-measure-mini button.active { background: #1e90ff; color: #fff; border-radius: 10px; }
  /* Distance badge that sits by the line midpoint */
  .measure-chip {
    padding: 4px 8px; border-radius: 8px; font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: rgba(30,30,30,.92); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: nowrap;
  }
  /* Keep UI unobtrusive on small screens */
  @media (max-width: 480px) {
    .leaflet-control-measure-mini { width: 40px; height: 40px; }
  }
  #map { height: 480px; }
  .draw-buttons-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f6f6f6;
    padding: 8px;
    border-radius: 8px;
  }
  
  .toggle-arrow {
    margin-left: auto;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
    transition: transform 0.3s ease;
  }
  
  .draw-details-container {
    overflow: hidden;
    max-height: 300px; /* whatever fits your content */
    transition: max-height 0.3s ease;
  }
  
  .draw-details-container.collapsed {
    max-height: 0;
  }
  
  .toggle-arrow.collapsed {
    transform: rotate(180deg);
  }
.contour-label {
  font: 12px/1.2 sans-serif;
  paint-order: stroke;
  stroke: #fff;        /* halo */
  stroke-width: 3px;
}.contour-label {
    font: 12px/1.2 sans-serif;
    paint-order: stroke;
    stroke: #e32c2c;        /* halo */
    stroke-width: 3px;
  }