/* Перенесено из app.css при разбиении стилей по модулям — водный модуль (module/waters.js). */

/* ---------- Leaflet water segments ---------- */
/* A canvas renderer fills its whole pane, so the upper (water-poly) canvas
   would swallow every click/hover and starve the lines canvas below
   (in the SVG era the svg root had pointer-events:none). Water hit-testing
   is dispatched from the map container instead (ensureWaterMapPointer in
   app.js) — let pointer events fall through both water canvases. */
.leaflet-water-line-pane canvas,
.leaflet-water-poly-pane canvas {
  pointer-events: none;
}

.leaflet-container[water_zoom="1"],
.leaflet-container[water_zoom="2"],
.leaflet-container[water_zoom="3"],
.leaflet-container[water_zoom="4"],
.leaflet-container[water_zoom="5"] {
  --water-zoom-scale: .45;
}

.leaflet-container[water_zoom="6"] {
  --water-zoom-scale: 0.512;
}

.leaflet-container[water_zoom="7"] {
  --water-zoom-scale: 0.640;
}

.leaflet-container[water_zoom="8"] {
  --water-zoom-scale: 0.800;
}

.leaflet-container[water_zoom="9"] {
  --water-zoom-scale: 1.000;
}

.leaflet-container[water_zoom="10"] {
  --water-zoom-scale: 1.250;
}

.leaflet-container[water_zoom="11"] {
  --water-zoom-scale: 1.562;
}

/* HD takes over from z11 — keep scale continuous into HD zooms. */
.leaflet-container[water_zoom="12"] {
  --water-zoom-scale: 1.953;
}

.leaflet-container[water_zoom="13"] {
  --water-zoom-scale: 2.200;
}

.leaflet-container[water_zoom="14"] {
  --water-zoom-scale: 2.350;
}

.leaflet-container[water_zoom="15"] {
  --water-zoom-scale: 2.450;
}

.leaflet-container[water_zoom="16"] {
  --water-zoom-scale: 2.500;
}

.leaflet-container[water_zoom="17"] {
  --water-zoom-scale: 2.500;
}

.leaflet-container[water_zoom="18"] {
  --water-zoom-scale: 2.500;
}

.leaflet-container[water_zoom="19"],
.leaflet-container[water_zoom="20"],
.leaflet-container[water_zoom="21"],
.leaflet-container[water_zoom="22"] {
  --water-zoom-scale: 2.5;
}

/* LEGACY (SVG era): water paths are canvas-rendered now — color/weight are
   computed in JS (see waterCanvasStyleObj in app.js, weight = (log(s)+0.5)*zoomScale).
   The [feature_id] rules below no longer match anything; kept for reference. */
.leaflet-interactive[feature_id] {
  stroke: var(--water-map-color);
  stroke-opacity: 1;
  /* --water-w = log(s)+0.5 set once in JS; zoom scale from container */
  stroke-width: calc(var(--water-w, 0.5) * 1px * var(--water-zoom-scale, 1));
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  fill-opacity: 0;
  pointer-events: stroke;
  cursor: pointer;
}

/* Water polygons (lakes / reservoirs / ponds): light *opaque* fill, thin outline.
   fill-opacity:1 + light fill color (not translucent over basemap). */
.leaflet-interactive[feature_id][kind="poly"] {
  fill: color-mix(in srgb, var(--water-map-color) 32%, white);
  fill-opacity: 1;
  stroke: var(--water-map-color);
  stroke-opacity: 1;
  stroke-width: 0.75px;
  /* fixed; ignore --water-w */
  pointer-events: fill;
  cursor: pointer;
}

.leaflet-interactive[feature_id][kind="poly"].water-hover,
.leaflet-interactive[feature_id][kind="poly"]:hover {
  fill: color-mix(in srgb, var(--water-map-color) 42%, white);
  fill-opacity: 1;
  stroke-opacity: 1;
  stroke-width: 1px;
}

/* HD/LD water lines: same look; stroke is the visible + clickable edge */
.leaflet-interactive[feature_id][kind="line"] {
  cursor: pointer;
  pointer-events: stroke;
  fill: none;
  fill-opacity: 0;
}

/* Invisible click pad — must NOT restyle visible fill/stroke of real features.
   Only paths explicitly marked hit_area=1 (separate geoJSON layer). */
.leaflet-interactive[feature_id][hit_area="1"] {
  stroke: rgba(0, 0, 0, 0) !important;
  stroke-opacity: 1 !important;
  stroke-width: 18px !important;
  fill: none !important;
  fill-opacity: 0 !important;
  pointer-events: stroke !important;
  filter: none !important;
  cursor: pointer;
}

.leaflet-interactive[feature_id][hit_area="1"].water-hover,
.leaflet-interactive[feature_id][hit_area="1"]:hover {
  stroke: rgba(0, 0, 0, 0) !important;
  fill: none !important;
  filter: none !important;
}

.leaflet-interactive[feature_id][kind="poly"].is-hidden {
  fill-opacity: 0;
  stroke-opacity: 0;
  pointer-events: none;
}

.leaflet-interactive[feature_id][water_category="0"]:hover {
  stroke: #064789;
}

.leaflet-interactive[feature_id][water_category="1"]:hover {
  stroke: #427aa1;
}

.leaflet-interactive[feature_id][water_category="2"]:hover {
  stroke: #ebf2fa;
}

.leaflet-interactive[feature_id][water_role="selected"] {
  stroke: var(--water-map-color);
  stroke-opacity: 1;
}

.leaflet-interactive[feature_id][water_role="tributary"] {
  stroke: var(--water-map-color);
  stroke-opacity: 1;
}

.leaflet-interactive[feature_id].water-hover {
  stroke-opacity: 1;
}

.leaflet-interactive[feature_id][water_category="0"].water-hover {
  stroke: #064789;
}

.leaflet-interactive[feature_id][water_category="1"].water-hover {
  stroke: #427aa1;
}

.leaflet-interactive[feature_id][water_category="2"].water-hover {
  stroke: #ebf2fa;
}

.leaflet-interactive[feature_id].is-hidden {
  stroke-opacity: 0;
  fill-opacity: 0;
  pointer-events: none;
}

/* Placeholder used for catalogue records without an XML Name. */
.water-unnamed {
  color: var(--text-faint);
  font-weight: 100;
}

/* --- Водные объекты: гео-колонка, бейджи, ГВР (из секции Water objects and maps) --- */

.wf-surveys {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-tiny);
  margin-left: var(--sp-tiny);
}

.col-geo {
  width: var(--sz-ui-sm);
  min-width: var(--sz-ui-sm) !important;
  max-width: var(--sz-ui-sm);
  padding: 0 !important;
  text-align: center;
}

.geo-badge {
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sz-ui-sm);
  height: var(--sz-ui-sm);
}

.waterway-line {
  color: var(--text-dim);
}

.gvr-code {
  margin-top: var(--sp-tiny);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.geo-badge:hover {
  color: var(--text-muted);
}

/* Мелкие индикаторы, заметки и безрамочные цепочки (inline-стили перенесены из JS). */
.survey-indicator.sm {
  width: var(--sp-base);
  height: var(--sp-base);
}

.wf-chain.chain-root {
  border-left: 0;
}

.water-warn-note {
  font-size: var(--fs-sm);
  color: var(--warn);
  margin-top: var(--sp-md);
  line-height: 1.4;
  font-weight: 500;
}

.water-collision-note {
  font-size: var(--fs-main);
  color: var(--text-muted);
  margin-top: var(--sp-md);
}