/*
 * Areas 2025 Styling
 * Module: Areas Layer
 * Version: 1.0.0+stable
 * Date: 2025-11-20 14:30:00
 * Author: Alex Moustris
 * Description: Minimal styling for marine navigation area rectangles.
 * Changes: Added CSS for high-zoom transparency (90% opacity for zoom >= 9).
 * Status: STABLE
 */
.area-rect {
  fill: rgba(0, 80, 160, 0.06);
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1;
  stroke-dasharray: 10, 5;
  transition: fill 160ms ease-out, stroke 160ms ease-out, stroke-width 160ms ease-out, stroke-dasharray 160ms ease-out;
  will-change: fill, stroke;
  contain: layout style paint;
  cursor: default !important;
}
.area-rect--hover {
  fill: rgba(13,110,208,0.45);
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 1;
  stroke-dasharray: none;
}
.area-rect--selected {
  stroke: rgba(0, 80, 160, 0.85);
  stroke-width: 2;
  stroke-dasharray: none;
}
.area-rect--high-zoom {
  stroke-opacity: 0.10;
}
.area-rect--high-zoom.area-rect--hover {
  fill: rgba(124,137,194,0.84);
  stroke: rgba(255, 150, 0, 0.9);
  stroke-opacity: 1;
  stroke-width: 2;
  stroke-dasharray: 6, 4;
}
.area-rect--high-zoom.area-rect--selected {
  stroke-opacity: 0.10;
}
.area-rect__tooltip {
  font-family: 'Jura', 'Inter', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 11px;
  color: rgb(15, 23, 42);
  background-color: rgba(248, 250, 252, 0.96);
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding: 4px 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}
.leaflet-tooltip.area-rect__tooltip {
  background-color: rgba(248, 250, 252, 0.96);
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: rgb(15, 23, 42);
  padding: 4px 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
}

/* Ensure area rectangles and their SVG paths have default cursor, not pointer */
.area-rect path,
.area-rect svg,
.leaflet-interactive.area-rect,
.leaflet-interactive.area-rect path,
.leaflet-interactive.area-rect svg {
  cursor: default !important;
}