/*
  Szkic (edytor adnotacji na mapie). Reużywa tokeny zdefiniowane na :root
  przez map.css (--panel-bg, --panel-border, --accent, --btn-bg, --shadow) — bez
  nowych custom properties. Panel narzędziowy ma własny, prosty breakpoint (860px,
  spójny z resztą map.css) i NIE korzysta z maszynerii zakładek/reparentingu
  .map-sidepanel (zbyt sprzężonej z legendą/filtrami).

  Układ (desktop): jeden rząd — dok narzędzi (przypięty do lewej krawędzi) i
  bąbelek ustawień aktywnego narzędzia (kolory/grubość/rozmiar/wypełnienie) na
  prawo od niego, druga "wysepka" edytora. Przycisk "Koordynaty" siedzi na
  końcu TEJ DRUGIEJ wysepki (.sketch-stylebar), za checkboxem wypełnienia, i
  jest ukrywany (atrybut hidden) dla narzędzi, które nie wspierają
  wprowadzania współrzędnych (wskaźnik/zaznacz/ołówek) — patrz
  updateCoordToggleAvailability() w map-screenshot.js. Jego pozycja w
  .sketch-stylebar nie jest stała (inne swatch/slidery chowają się/pokazują w
  zależności od narzędzia, więc przycisk przesuwa się w rzędzie) — dlatego
  popover formularza NIE jest zaczepiony przez zwykłe position:absolute
  względem .sketch-stylebar, tylko position:fixed wyliczany w JS z
  getBoundingClientRect() przycisku (positionCoordForm()), żeby zawsze
  wylądować dokładnie pod nim.
*/

.screenshot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  touch-action: none;
}

.sketch-toolbar {
  /*
    Same slot #filters-panel (the legend) occupies in the other two modes —
    that panel is hidden for the duration of sketch mode (see enterEditorMode
    in map-screenshot.js), so there's no overlap, and Szkic visually "replaces"
    the legend the way it replaces Ogólne/Transport. #map-search-float is hidden
    the same way (it shares this same top-left corner).
  */
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  max-height: calc(100% - 1.5rem);
  font-size: .8rem;
  color: var(--color-kotext);
  /* .sketch-toolbar/.sketch-topline są tylko kontenerami układu — nie mają
     własnego tła, ale jako position:absolute nad #map-viewport wciąż
     przechwytywałyby kliknięcia w każdym miejscu swojego (dużego, bo dok jest
     wysoką kolumną) bounding boxa, łącznie z pustymi przerwami między dokiem a
     paskiem stylu. pointer-events:none tutaj + pointer-events:auto na
     faktycznych, widocznych panelach (dock/stylebar/popovery) przepuszcza
     kliknięcia na canvas wszędzie poza realnie narysowanymi kontrolkami —
     ten sam wzorzec co .markers-layer .markers-sub w map.css. */
  pointer-events: none;
}

.sketch-toolbar[hidden] {
  display: none !important;
}

.sketch-topline {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .6rem;
  min-height: 0;
}

.sketch-stylebar,
.sketch-dock,
.screenshot-coord-form,
.sketch-export-panel {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  pointer-events: auto;
}

.sketch-stylebar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 16px;
  padding: .5rem .6rem;
  max-width: 100%;
  overflow-x: auto;
}

.sketch-swatch {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.sketch-swatch[hidden] {
  display: none !important;
}

/* Wypełnienie: pełny kwadrat w wybranym kolorze. */
.sketch-swatch--fill {
  background: var(--swatch-color, var(--btn-bg));
  border: 1px solid var(--panel-border);
}

/* Obrys: pusty w środku (tło panelu), tylko kolorowa obwódka — odróżnia go
   wizualnie od wypełnienia (patrz mockup Figma). */
.sketch-swatch--stroke {
  background: var(--panel-bg);
  border: 2px solid var(--swatch-color, var(--panel-border));
}

.sketch-swatch input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sketch-slider {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 130px;
}

.sketch-slider[hidden] {
  display: none !important;
}

.sketch-slider input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.sketch-slider-value {
  color: var(--color-kodim);
  font-size: .7rem;
  min-width: 0.2rem;
  text-align: right;
}

/* Przezroczystość wypełnienia: przełącznik (checkbox), nie suwak. Podpisany
   ("Półprzezroczystość"), bo sam checkbox bez etykiety nie mówi nic o tym, co
   przełącza. */
.sketch-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  white-space: nowrap;
  font-size: .75rem;
  color: var(--color-kotext);
  cursor: pointer;
}

.sketch-toggle[hidden] {
  display: none !important;
}

.sketch-toggle input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Przycisk "Koordynaty": bez ikony (sam napis), tej samej wysokości co
   swatch kolorów po lewej (.sketch-swatch, 30px) — inaczej niż
   .screenshot-tool-btn/.sketch-dock-btn (38px) z doku, żeby nie podbijał
   wysokości .sketch-stylebar. Szerokość auto (dopasowana do napisu), nie
   min-width:38px jak przyciski-ikony. */
.sketch-coord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 .6rem;
  border: 1px solid var(--panel-border);
  background: var(--btn-bg);
  color: var(--color-kotext);
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  transition: background .15s, color .15s, border-color .15s;
}

.sketch-coord-btn:hover,
.sketch-coord-btn[aria-expanded="true"] {
  border-color: var(--accent);
}

.sketch-coord-btn[hidden] {
  display: none !important;
}

/* --- Dok narzędzi: kolumna ikon (narzędzia rysowania, cofnij/ponów/usuń/wyczyść, eksport) --- */

.sketch-dock {
  position: relative;
  border-radius: 16px;
  flex: none;
}

.sketch-dock-scroll {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem;
  min-height: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.sketch-dock-divider {
  height: 1px;
  width: 100%;
  background: var(--panel-border);
  margin: .2rem 0;
  flex: none;
}

.screenshot-tool-btn,
.sketch-dock-btn {
  border: 1px solid var(--panel-border);
  background: var(--btn-bg);
  color: var(--color-kotext);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  flex: none;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}

.screenshot-tool-btn:hover,
.sketch-dock-btn:not(:disabled):hover {
  border-color: var(--accent);
}

.screenshot-tool-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-koaccenttext);
}

.sketch-dock-btn:disabled {
  opacity: .45;
  cursor: default;
}

.sketch-dock-export {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--color-koaccenttext);
}

.sketch-dock-export:hover {
  filter: brightness(1.08);
}

/* --- Formularz "Dodaj wg współrzędnych", jako popover pod przyciskiem "Koordynaty" ---
   Pozycjonowany position:fixed i umieszczany dokładnie pod przyciskiem przez JS
   (positionCoordForm() w map-screenshot.js, ten sam wzorzec co
   .screenshot-text-input), bo przycisk siedzi wśród innych elementów w
   .sketch-stylebar (swatch/slidery chowają się/pokazują zależnie od
   narzędzia), więc jego pozycja w rzędzie nie jest stała.
   W JSX (app/map/page.js) ten div jest CELOWO umieszczony poza .sketch-dock/
   .sketch-stylebar — te mają backdrop-filter, który (jak filter/transform)
   tworzy nowy containing block dla position:fixed potomków; gdyby popover był
   ich potomkiem, jego top/left liczyłyby się względem tego panelu zamiast
   viewportu i positionCoordForm() wystawiałby go w złym miejscu. */

.screenshot-coord-form {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: 220px;
  max-width: calc(100vw - 1.2rem);
  border-radius: 14px;
  padding: .6rem .7rem;
}

.screenshot-coord-form[hidden] {
  display: none !important;
}

.screenshot-coord-title {
  font-size: .7rem;
  color: var(--color-kodim);
}

.screenshot-coord-inputs {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.screenshot-coord-inputs input {
  width: 3.4rem;
  min-width: 0;
  background: var(--btn-bg);
  border: 1px solid var(--panel-border);
  color: var(--color-kotext);
  border-radius: 6px;
  padding: .3rem .4rem;
  font-size: .78rem;
}

.screenshot-coord-inputs input[hidden] {
  display: none !important;
}

.screenshot-coord-sep {
  color: var(--color-kodim);
}

.screenshot-coord-sep[hidden] {
  display: none !important;
}

.screenshot-coord-form button {
  border: 1px solid var(--panel-border);
  background: var(--btn-bg);
  color: var(--color-kotext);
  font-size: .75rem;
  font-weight: 600;
  padding: .4rem .6rem;
  border-radius: 8px;
  cursor: pointer;
}

.screenshot-coord-form button:hover {
  border-color: var(--accent);
}

/* --- Popover eksportu, zakotwiczony przy przycisku eksportu w doku --- */

.sketch-export-panel {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: .6rem;
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border-radius: 14px;
  padding: .7rem .8rem;
  z-index: 75;
}

.sketch-export-panel[hidden] {
  display: none !important;
}

.screenshot-export-format {
  display: flex;
  gap: .9rem;
  font-size: .78rem;
}

.screenshot-pdf-options {
  display: flex;
  gap: .6rem;
}

.screenshot-pdf-options[hidden] {
  display: none !important;
}

.screenshot-pdf-options select {
  width: 100%;
  background: var(--btn-bg);
  border: 1px solid var(--panel-border);
  color: var(--color-kotext);
  border-radius: 6px;
  padding: .3rem .4rem;
  font-size: .78rem;
}

.screenshot-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--color-koaccenttext);
  font-weight: 700;
  font-size: .8rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  cursor: pointer;
}

.screenshot-export-btn:hover {
  filter: brightness(1.08);
}

/* Tymczasowe pole tekstowe narzędzia "Tekst", pozycjonowane nad canvasem w
   przestrzeni ekranu (przeliczane na bieżąco w map-screenshot.js). */
.screenshot-text-input {
  position: fixed;
  z-index: 1000;
  background: var(--panel-bg);
  border: 1px solid var(--accent);
  color: var(--color-kotext);
  border-radius: 6px;
  padding: .2rem .4rem;
  font-size: .85rem;
  min-width: 8rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 860px) {
  .sketch-toolbar {
    left: .6rem;
    right: .6rem;
    top: auto;
    bottom: .6rem;
    max-height: 60vh;
  }

  .sketch-topline {
    flex-direction: column-reverse;
    width: 100%;
  }

  .sketch-stylebar {
    width: 100%;
  }

  .sketch-dock {
    width: 100%;
  }

  .sketch-dock-scroll {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
    width: 100%;
  }

  .sketch-dock-divider {
    width: 1px;
    height: 38px;
    align-self: stretch;
    margin: 0 .2rem;
  }

  .sketch-dock-export {
    flex: 1 1 100%;
    height: 44px;
  }

  .sketch-export-panel {
    left: 0;
    right: 0;
    bottom: calc(100% + .6rem);
    margin-left: 0;
    width: auto;
  }
}