/*!
 * MapaPL1992 – style mapy (OpenLayers 10.11, układ PL-1992 / EPSG:2180)
 * Wszystkie reguły są ograniczone do kontenera z klasą .mpl,
 * więc nie wpływają na inne elementy strony ani inne mapy OpenLayers.
 * Kolory i zaokrąglenia można zmienić, nadpisując zmienne --mpl-* na .mpl.
 */
.mpl {
  --mpl-bg: #ffffff;
  --mpl-fg: #1d2733;
  --mpl-muted: #5f6b7a;
  --mpl-line: #e3e7ec;
  --mpl-hover: #f2f4f7;
  --mpl-track: #eef1f4;
  --mpl-accent: #c62828;
  --mpl-focus: #1a73e8;
  --mpl-error: #b42318;
  --mpl-radius: 10px;
  --mpl-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 4px 14px rgba(16, 24, 40, .16);
  --mpl-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;

  position: relative;
  background: #eef0f2;
}

/* ---------- Kontrolki OpenLayers: położenie ---------- */
.mpl .ol-rotate { top: 4.2em; right: auto; left: .5em; }
.mpl .ol-scale-line { left: .5em; bottom: .5em; }
.mpl .ol-attribution {
  right: auto; left: .5em; bottom: 2.4em;
  flex-flow: row; text-align: left;
  max-width: calc(100% - 14em);
}
.mpl .ol-attribution li:not(:last-child)::after { content: " · "; }

/* ---------- Elementy wspólne ---------- */
.mpl .mpl-ctl {
  position: absolute;
  font: 14px/1.35 var(--mpl-font);
  color: var(--mpl-fg);
}
.mpl .mpl-btn {
  appearance: none; border: 0; margin: 0; padding: 0;
  background: var(--mpl-bg); color: var(--mpl-fg);
  font: inherit; cursor: pointer;
  display: inline-grid; place-items: center;
}
.mpl .mpl-btn:hover { background: var(--mpl-hover); }
.mpl .mpl-btn:focus-visible,
.mpl .mpl-ctl input:focus-visible,
.mpl .mpl-bm-seg input:focus-visible + span { outline: 2px solid var(--mpl-focus); outline-offset: 2px; }
.mpl .mpl-btn[hidden],
.mpl .mpl-panel[hidden],
.mpl .mpl-lm-sub[hidden],
.mpl .mpl-bm-roads[hidden] { display: none; }
.mpl .mpl-ctl input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; flex: none;
  accent-color: var(--mpl-accent); cursor: pointer;
}
.mpl .mpl-panel {
  background: var(--mpl-bg);
  border-radius: var(--mpl-radius);
  box-shadow: var(--mpl-shadow);
}
.mpl .mpl-head {
  display: flex; align-items: center; gap: .5em;
  padding: .5em .5em .5em .9em;
  border-bottom: 1px solid var(--mpl-line);
}
.mpl .mpl-head h2 { margin: 0; flex: 1; font-size: 15px; font-weight: 600; line-height: 1.3; }
.mpl .mpl-close { width: 32px; height: 32px; border-radius: 8px; background: transparent; }
.mpl .mpl-qicon { color: var(--mpl-muted); flex: none; vertical-align: -2px; }

/* ---------- Menedżer warstw (prawy górny róg) ---------- */
.mpl .mpl-lm {
  top: .5em; right: .5em;
  display: flex; flex-direction: column; align-items: flex-end;
  max-height: calc(100% - 5.5em);
}
.mpl .mpl-lm[hidden] { display: none; }
.mpl .mpl-lm-toggle {
  width: 42px; height: 42px;
  border-radius: var(--mpl-radius);
  box-shadow: var(--mpl-shadow);
}
.mpl .mpl-lm-panel {
  width: 300px; max-width: calc(100vw - 2em);
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mpl .mpl-lm-body { overflow: auto; padding: .35em 0 .5em; }
.mpl .mpl-lm-row { display: flex; align-items: center; gap: .3em; padding: .4em .5em .4em .9em; }
.mpl .mpl-lm-row > label { display: flex; align-items: center; gap: .6em; flex: 1; min-width: 0; cursor: pointer; }
.mpl .mpl-lm-title { min-width: 0; overflow-wrap: anywhere; }
.mpl .mpl-lm-icon-btn { width: 30px; height: 30px; flex: none; border-radius: 8px; background: transparent; color: var(--mpl-muted); }
.mpl .mpl-lm-icon-btn:hover { color: var(--mpl-fg); }
.mpl .mpl-lm-expand svg { transition: transform .15s; }
.mpl .mpl-lm-expand[aria-expanded="false"] svg { transform: rotate(-90deg); }
.mpl .mpl-swatch { width: 18px; height: 14px; flex: none; border-radius: 3px; box-sizing: border-box; display: grid; place-items: center; }
.mpl .mpl-swatch-geom { border: 2px solid #ff0000; background: rgba(255, 0, 0, .5); }
.mpl .mpl-swatch-egib { color: #6d4c41; }
.mpl .mpl-swatch-wms { color: #3d5a80; }
.mpl .mpl-lm-sep { height: 1px; background: var(--mpl-line); margin: .3em 0; }
.mpl .mpl-lm-sub {
  margin: 0 .9em .3em 2.05em;
  padding: .1em 0 .1em .85em;
  border-left: 2px solid var(--mpl-line);
  transition: opacity .15s;
}
.mpl .mpl-lm-sub.is-off { opacity: .5; }
.mpl .mpl-lm-sub label { display: flex; align-items: center; gap: .5em; padding: .22em 0; cursor: pointer; }
.mpl .mpl-lm-tech { color: var(--mpl-muted); font-size: 12px; margin-left: auto; padding-left: .5em; }
.mpl .mpl-lm-note { margin: .5em .9em .1em; font-size: 12px; color: var(--mpl-muted); }
/* Usługa poza zakresem skal przy bieżącym widoku */
.mpl .mpl-lm-service.is-out-of-range .mpl-lm-row > label,
.mpl .mpl-lm-service.is-out-of-range .mpl-lm-sub { opacity: .5; }
.mpl .mpl-lm-range { margin: -.25em .9em .35em 3.4em; font-size: 12px; color: var(--mpl-muted); }
.mpl .mpl-lm-range[hidden] { display: none; }

/* ---------- Przełącznik podkładów (prawy dolny róg) ---------- */
/* Panel rozwija się z lewej strony ikony (wyrównany do dołu); odstęp między nimi należy
   do obszaru przełącznika, więc przesunięcie kursora z ikony na panel go nie zwija. */
.mpl .mpl-bm {
  right: .5em; bottom: .5em;
  display: flex; flex-direction: row; align-items: flex-end; gap: 6px;
}
.mpl .mpl-bm-panel { max-width: calc(100vw - 2em - 48px); }
.mpl .mpl-bm-toggle {
  width: 42px; height: 42px;
  border-radius: var(--mpl-radius);
  box-shadow: var(--mpl-shadow);
}
.mpl .mpl-bm.is-open .mpl-bm-toggle { background: var(--mpl-hover); }
.mpl .mpl-bm-panel { padding: .55em 0; min-width: 15.5em; }
.mpl .mpl-bm-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  margin: 0 .55em; padding: 3px; border-radius: 8px;
  background: var(--mpl-track);
}
.mpl .mpl-bm-seg label { position: relative; cursor: pointer; }
.mpl .mpl-bm-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mpl .mpl-bm-seg span {
  display: block; padding: .42em .7em; border-radius: 6px;
  font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap;
  color: var(--mpl-muted);
}
.mpl .mpl-bm-seg input:checked + span {
  background: var(--mpl-bg); color: var(--mpl-fg);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
}
.mpl .mpl-bm-roads {
  display: flex; align-items: center; gap: .55em;
  margin: .6em .8em 0; font-size: 13.5px; cursor: pointer;
}
.mpl .mpl-bm-roads.is-disabled { opacity: .45; cursor: default; }
.mpl .mpl-bm-roads.is-disabled input { cursor: default; }

/* ---------- Okno GetFeatureInfo ---------- */
.mpl .mpl-gfi {
  position: relative;
  width: min(360px, calc(100vw - 2.5em));
  font: 13px/1.4 var(--mpl-font);
  color: var(--mpl-fg);
}
.mpl .mpl-gfi::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 14px; height: 14px; background: var(--mpl-bg);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 3px rgba(16, 24, 40, .12);
}
.mpl .mpl-gfi .mpl-head h2 { font-size: 14px; }
.mpl .mpl-gfi-body {
  position: relative; z-index: 1;
  max-height: 340px; overflow: auto;
  padding: .3em .85em .7em;
  background: var(--mpl-bg);
  border-radius: 0 0 var(--mpl-radius) var(--mpl-radius);
}
.mpl .mpl-gfi-section { padding-top: .4em; }
.mpl .mpl-gfi-section + .mpl-gfi-section { margin-top: .4em; border-top: 1px solid var(--mpl-line); }
.mpl .mpl-gfi-section h3 { margin: .1em 0 .35em; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mpl-muted); }
.mpl .mpl-gfi-frame { display: block; width: 100%; height: 240px; border: 0; }
.mpl .mpl-gfi-msg { margin: .1em 0; color: var(--mpl-muted); }
.mpl .mpl-gfi-msg.is-error { color: var(--mpl-error); }
.mpl .mpl-gfi-loading { display: flex; align-items: center; gap: .6em; color: var(--mpl-muted); }
.mpl .mpl-gfi-loading::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid var(--mpl-line); border-top-color: var(--mpl-muted);
  border-radius: 50%; animation: mpl-spin .8s linear infinite;
}
@keyframes mpl-spin { to { transform: rotate(360deg); } }
.mpl .mpl-gfi-table { width: 100%; border-collapse: collapse; margin-bottom: .5em; }
.mpl .mpl-gfi-table caption { text-align: left; font-weight: 600; padding: .1em 0 .3em; }
.mpl .mpl-gfi-table th,
.mpl .mpl-gfi-table td { text-align: left; vertical-align: top; padding: .25em .4em; border-top: 1px solid var(--mpl-line); overflow-wrap: anywhere; }
.mpl .mpl-gfi-table th { color: var(--mpl-muted); font-weight: 500; width: 40%; }
.mpl .mpl-gfi-pre { margin: 0; white-space: pre-wrap; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }

@media (max-width: 520px) {
  .mpl .ol-attribution { max-width: calc(100% - 1em); bottom: 5.5em; }
}