@import url("custom-popup-styles.css");

.map {
    height: 400px;
    width: 100%;
}

.ol-mouse-position{
    top: unset;
    right: unset;
    left: 8px; /* Custom positioning from original file */
    bottom: 10px; /* Custom positioning from original file */
    background-color: rgba(255, 255, 255, 0.8); /* Default OL control background */
    color: black; /* Default OL control text color */
    padding: 3px 5px; /* Typical padding for OL text controls */
    border-radius: 4px; /* Default OL control border radius */
}

/* Ensure spans within mouse position also use black text if not inheriting */
.ol-mouse-position span {
    color: black;
    background-color: transparent; /* Remove any prior custom span backgrounds */
}

/* Popup styles - Unchanged */
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
.popup-section { margin-bottom: 10px; }
.popup-section-title { font-weight: bold; margin-bottom: 5px; border-bottom: 1px solid #eee; padding-bottom: 3px; }
.inferred-data { }
.popup-toggle-button { background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; cursor: pointer; display: block; margin: 10px auto 5px; text-align: center; }
.popup-toggle-button:hover { background-color: #e0e0e0; }

/* Table styles - Unchanged */
#lot-table { height: 300px; overflow:auto; }
.lot-table { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; height: 200px; overflow:auto; }
.lot-table td, .lot-table th { border: 1px solid #ddd; padding: 8px; }
.lot-table tr:nth-child(even){background-color: #f2f2f2;}
.lot-table tr:hover {background-color: #ddd;}
.lot-table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: rgba(0,60,136,.7); color: white; }

/* Tooltip styles - Unchanged */
.ol-tooltip { position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 4px; color: white; padding: 4px 8px; opacity: 0.7; white-space: nowrap; font-size: 12px; }
.ol-tooltip-measure { opacity: 1; font-weight: bold; }
.ol-tooltip-static { background-color: #ffcc33; color: black; border: 1px solid white; }
.ol-tooltip-measure:before, .ol-tooltip-static:before { border-top: 6px solid rgba(0, 0, 0, 0.5); border-right: 6px solid transparent; border-left: 6px solid transparent; content: ""; position: absolute; bottom: -6px; margin-left: -7px; left: 50%; }
.ol-tooltip-static:before { border-top-color: #ffcc33; }

/* OL Zoom control button styling */
/* Note: .ol-zoom positioning is part of the restored Top-Left Control Column */
.ol-zoom button {
    font-weight: bold;
    /* Standard OL buttons have no border, only outline on hover/focus.
       If a border is desired for all buttons, it would be added to .ol-control button */
}

/* Styling for active state and click feedback on control buttons */
.ol-control button.active {
    background-color: rgba(0, 60, 136, 0.15); /* Subtle blue background for active state */
    border: 2px solid rgba(0, 60, 136, 0.7) !important; /* Thicker, darker blue border for active state */
    /* Adjust padding if border throws off size, e.g., padding: 0; if buttons had 1px margin and now border is 2px */
    /* Standard OL buttons have margin: 1px. A 2px border will make them slightly larger. */
    /* To maintain size, could use outline instead of border, or adjust margins/padding. */
    /* Using border for now as requested for "thicker border". */
    outline: none; /* Remove default focus outline if we use a border for active state */
}

.ol-control button:active {
    background-color: rgba(0, 60, 136, 0.3); /* Slightly darker background for immediate click feedback */
}

/* Specific styling for buttons within the unit toggle control when active */
.ol-unit-toggle-control button.active {
    background-color: rgba(0, 60, 136, 0.2);
    border: 2px solid rgba(0, 60, 136, 0.8);
    /* Ensure text color contrasts if needed, e.g., color: white; if background is dark */
}

/* === Top-Left Control Column Styling (Restored) === */
:root {
  --ol-single-button-control-slot-height: 2.2em;
  --ol-zoom-control-total-height: 3.4em;
}

.ol-zoom,
.ol-info-control,
.ol-length-control,
.ol-area-control,
.ol-unit-toggle-control {
  position: absolute !important;
  left: 0.5em !important;
  /* General .ol-control background, padding, etc. are mostly removed for OL defaults.
     If these controls need a specific background for visibility, it might need to be added here
     or via a general .ol-control rule if that's desired for all controls.
     For now, focusing on restoring position. */
}

.ol-zoom {
  top: 0.5em !important;
}
/* Adjusted multipliers for tighter spacing between info, length, area tools */
.ol-info-control { top: calc(0.5em + var(--ol-zoom-control-total-height) + var(--ol-single-button-control-slot-height) * 0.5) !important; }
.ol-length-control { top: calc(0.5em + var(--ol-zoom-control-total-height) + var(--ol-single-button-control-slot-height) * 1.4) !important; } /* Reduced from 1.5 */
.ol-area-control { top: calc(0.5em + var(--ol-zoom-control-total-height) + var(--ol-single-button-control-slot-height) * 2.3) !important; } /* Reduced from 2.5 */
/* Unit toggle control's original multiplier maintained to preserve its relative spacing from the tools above it */
.ol-unit-toggle-control { top: calc(0.5em + var(--ol-zoom-control-total-height) + var(--ol-single-button-control-slot-height) * 3.5) !important; }

/* UnitToggleControl specific layout (Restored for positioning) */
.ol-unit-toggle-control {
  display: flex;
  flex-direction: column;
  /* Previous button styles like padding/font might be needed if they affect overall size for stacking.
     For now, assuming flex-direction is the key for its layout within the column.
     If buttons inside .ol-unit-toggle-control need specific styling for their default look:
     .ol-unit-toggle-control button { font-size: 0.9em; font-weight: normal; padding: 0 0.5em; etc. }
  */
}
/* === End Top-Left Column Styling === */

/* OL Rotate Control Positioning (Restored) */
.ol-rotate {
    right: 50px;
    /* top will be default OL (usually top-right corner along with other controls) */
}

/* Custom Tracking Control Positioning (Restored) */
.tracking-control {
  top: .5em;
  right: 7em;
  left: auto;
  /* The following are from its original styling and might be needed for its appearance/size.
     If they conflict with a desired minimal .ol-control look, they might need adjustment.
     For now, restoring them as they were with positioning. */
  padding: 2px;
  display: flex; /* This is important for internal layout if it has multiple elements like stats + button */
  align-items: center;
  /* box-shadow: none; was present, usually good for default OL look */
  /* background-color will be inherited or use OL default if not specified here */
}
/* If .tracking-control button needs specific styling for its default look (e.g. emoji size):
   .tracking-control button { font-size: 1.2em; }
*/

/* Restored Tracking Statistics Styling (including background) */
.tracking-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: rgba(255,255,255,0.8); /* Semi-transparent white background */
  padding: 3px 8px;
  border-radius: 4px;
  /* margin-right: 0px; /* Assuming tracking-control handles spacing if needed */
  /* order: 1; /* This was for layout within tracking-control, should be fine if structure is simple */
  box-shadow: 0 0 5px rgba(0,0,0,0.2); /* Subtle shadow */
  color: #333; /* Default text color for stats */
}

.tracking-stats div { /* Individual stat item */
  padding: 2px 5px;
  font-size: 0.75em;
  white-space: nowrap;
}

.tracking-stats div:not(:last-child) {
  border-right: 1px solid #ccc; /* Separator lines between stats */
}


/* Layer Switcher icon styling */
.layer-switcher button i, .ol-layerswitcher button i,
.layer-switcher button svg, .ol-layerswitcher button svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}

/* Layer Switcher Panel styling */
.layer-switcher .panel, .ol-layerswitcher .panel {
    background-color: rgb(255, 255, 255) !important;
    border: 4px solid rgb(238, 238, 238) !important;
    color: black !important;
    z-index: 1050 !important;
}

/* GeoJSON download link in LayerSwitcher */
.download-geojson-link {
  margin-left: 4px;
  text-decoration: none;
  color: green;
  font-size: 1.8em;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
}
.download-geojson-link:hover {
  color: darkgreen;
  text-decoration: none;
}
.download-geojson-link:focus {
  color: darkgreen;
  outline: 1px dotted #007bff;
  outline-offset: 2px;
}

/* Layer Action Icons container - no specific styles */
.layer-action-icons { }

/* Copy URL button in LayerSwitcher */
.copy-url-button {
    display: inline !important;
    float: none !important;
    position: static !important;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    color: #007bff;
    font-size: 0.9em;
    cursor: pointer;
    vertical-align: middle;
}
.copy-url-button + .download-geojson-link,
.download-geojson-link + .copy-url-button {
  margin-left: 3px;
}
.copy-url-button:hover,
.copy-url-button:focus {
  color: #0056b3;
  outline: 1px dotted #007bff;
  outline-offset: 1px;
}