@charset "utf-8";
/* ==========================================================================
   DESIGN V2 – zkušební osvěžení vzhledu mapové aplikace (olkr.stavbycyklo.cz)
   --------------------------------------------------------------------------
   Princip: NIC z původních stylů se nemaže ani nepřepisuje v souborech.
   Každý nápad je "zapínací" – platí jen tehdy, když má <html> třídu
   v2-<nápad> (např. v2-lista). Třídy přidává/odebírá design-v2.js podle
   přepínačů v panelu "Design v2". Díky tomu jde každý nápad porovnat
   zapnutý/vypnutý přímo na živé mapě.
   Barvy vycházejí z původní palety aplikace (olivová #6B8E23, slonová kost
   #FFFFF0, šalvějová #DAE3BD) – jde o oživení, ne o novou identitu.
   ========================================================================== */

/* --- Designové proměnné (tokeny) – jedno místo pro barvy, zaoblení, stíny --- */
:root {
  --v2-olive: #6B8E23;        /* hlavní barva aplikace (hlavičky, aktivní ikona) */
  --v2-olive-deep: #4A6418;   /* tmavší olivová – text na světlém, hover */
  --v2-ink: #27330F;          /* skoro černá do zelena – tooltipy, nadpisy */
  --v2-ivory: #FFFFF0;        /* podklad panelů (původní) */
  --v2-sage: #DAE3BD;         /* hover (původní) */
  --v2-pale: #F2F5DD;         /* jemný podklad řádků (původní) */
  --v2-red: #EE3024;          /* červená popupů (původní) */
  --v2-r: 12px;               /* zaoblení velkých ploch (panely, lišta) */
  --v2-r-sm: 8px;             /* zaoblení malých prvků (ikony, položky) */
  /* Dvouvrstvý stín: ostrý kontaktní + měkký rozptýlený = působí přirozeněji
     než původní jednolitý rgba(27,28,56,.5) */
  --v2-shadow: 0 1px 2px rgba(39, 51, 15, .20), 0 8px 24px -8px rgba(39, 51, 15, .40);
  --v2-shadow-hi: 0 2px 4px rgba(39, 51, 15, .22), 0 14px 30px -10px rgba(39, 51, 15, .50);
  /* Křivka "rychle ven, pomalu dojezd" – pohyb působí svižně, ale ne trhaně */
  --v2-ease: cubic-bezier(.2, .8, .2, 1);
}


/* ==========================================================================
   VZHLED
   ========================================================================== */

/* 1) LIŠTA – ikony v jednom společném panelu místo 10 samostatných čtverců.
   Skupiny (mapa+jazyk | navigace | panely | nástroje) odděluje tenká linka. */
html.v2-lista #op_list {
  /* posun o padding zpět (top), vlevo mezera 8 px od tlačítek zoomu */
  top: 1px; left: 108px;
  padding: 4px; gap: 2px;
  background: var(--v2-ivory);
  border-radius: var(--v2-r);
  box-shadow: var(--v2-shadow);
}
html.v2-lista #op_list > span,
html.v2-lista #op_list > a {
  box-shadow: none !important;        /* stín má teď celá lišta, ne každá ikona */
  border-radius: var(--v2-r-sm);
}
/* začátek nové skupiny = větší mezera + svislá linka vlevo (pseudo-prvek) */
html.v2-lista #op_list > .ui_home,
html.v2-lista #op_list > .ui_info,
html.v2-lista #op_list > .ui_kn {
  position: relative;
  margin-left: 9px;
}
html.v2-lista #op_list > .ui_home::before,
html.v2-lista #op_list > .ui_info::before,
html.v2-lista #op_list > .ui_kn::before {
  content: "";
  position: absolute; left: -7px; top: 10px; bottom: 10px;
  width: 1px;
  background: rgba(107, 142, 35, .30);
}

/* 2) ZAOBLENÍ + MĚKČÍ STÍN – panely "plavou" 8 px od okraje okna se
   zaoblenými rohy; vše má stejný jazyk stínů. */
html.v2-zaobleni .panel.opened {
  top: 8px; right: 8px;
  height: calc(100% - 16px);
  padding: 0;
}
html.v2-zaobleni .panel_box,
html.v2-zaobleni #menuBox {
  border-radius: var(--v2-r) !important;
  overflow: hidden;                   /* ořízne i hlavičku do zaoblení */
  box-shadow: var(--v2-shadow) !important;
}
html.v2-zaobleni .panel_box > strong,
html.v2-zaobleni #menuBox > strong { border-radius: 0 !important; }
html.v2-zaobleni:not(.v2-lista) #op_list > span,
html.v2-zaobleni:not(.v2-lista) #op_list > a {
  border-radius: var(--v2-r-sm);
  box-shadow: var(--v2-shadow);
}
html.v2-zaobleni .ui_vyber_mapy_menu,
html.v2-zaobleni .ui_vyber_jazyka_menu {
  border-radius: var(--v2-r) !important;
  box-shadow: var(--v2-shadow-hi) !important;
  padding: 4px;
}
html.v2-zaobleni .ui_vyber_mapy_menu ul li { border-radius: var(--v2-r-sm) !important; }

/* 3) SKLO – panely mírně průsvitné s rozostřením mapy pod nimi.
   backdrop-filter rozmaže to, co je POD prvkem (mapu), takže text zůstane čitelný. */
html.v2-sklo .panel_box,
html.v2-sklo #menuBox,
html.v2-sklo .ui_vyber_mapy_menu,
html.v2-sklo.v2-lista #op_list {
  background-color: rgba(255, 255, 240, .86) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
/* ikony v liště musí být průhledné, jinak by sklo nebylo vidět */
html.v2-sklo.v2-lista #op_list > span:not(.active):not(:hover),
html.v2-sklo.v2-lista #op_list > a:not(.active):not(:hover) {
  background-color: transparent !important;
}

/* 4) NADPISY – hlavička panelu v Roboto Condensed (aplikace ho už načítá),
   o něco vyšší a s jemnou spodní linkou. */
html.v2-nadpisy .panel_box > strong,
html.v2-nadpisy #menuBox > strong {
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 13px 14px 12px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* 5) ŘÁDKY VRSTEV – víc vzduchu, zaoblený hover a zapnutá vrstva má
   olivový proužek vlevo (vidět na první pohled, co je v mapě). */
html.v2-radky #menuBox .vrstvarow {
  padding: 7px 8px 7px 6px;
  margin: 1px 4px;
  border-radius: var(--v2-r-sm);
  transition: background-color .15s ease, box-shadow .15s ease;
}
html.v2-radky #menuBox .vrstvarow:hover { background-color: var(--v2-pale); }
/* :has() = "řádek, který obsahuje zaškrtnutý checkbox" – bez jediného řádku JS */
html.v2-radky #menuBox .vrstvarow:has(> input:checked) {
  box-shadow: inset 3px 0 0 var(--v2-olive);
  background-color: rgba(218, 227, 189, .45);
}
html.v2-radky #menuBox .vrstvarow:has(> input:checked) label { color: var(--v2-ink); }
/* podvrstvy uvnitř skupiny: jen proužek, bez podbarvení (jinak je skupina moc "těžká") */
html.v2-radky #menuBox .vrstvaSub .vrstvarow:has(> input:checked) {
  background-color: transparent;
  box-shadow: inset 2px 0 0 rgba(107, 142, 35, .55);
}
html.v2-radky #menuBox .vrstva.first-box { border-bottom-color: rgba(107, 142, 35, .14); }

/* 6) CHECKBOXY – nativní checkbox v barvě aplikace (accent-color, žádný JS) */
html.v2-checkboxy #menuBox input[type=checkbox],
html.v2-checkboxy .panel input[type=checkbox],
html.v2-checkboxy .panel input[type=radio] {
  accent-color: var(--v2-olive);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* 7) POSUVNÍK – původní tloušťka i tvar (6 px, zaoblený – nastavuje původní CSS),
   mění se JEN barva jezdce na olivovou. Záměrně bez scrollbar-width/scrollbar-color:
   ty by v Chromu přebily ::-webkit-scrollbar a změnily i tloušťku. */
html.v2-posuvnik .menu_container::-webkit-scrollbar-thumb,
html.v2-posuvnik #attrcontent::-webkit-scrollbar-thumb,
html.v2-posuvnik #attrwin::-webkit-scrollbar-thumb,
html.v2-posuvnik #layerwin #selectlayername::-webkit-scrollbar-thumb {
  background-color: rgba(107, 142, 35, .75);
}
html.v2-posuvnik .menu_container::-webkit-scrollbar-thumb:hover,
html.v2-posuvnik #attrcontent::-webkit-scrollbar-thumb:hover {
  background-color: var(--v2-olive);
}

/* 8) POPUP DETAILU v barvách aplikace – olivová hlavička (jako panely), podklad
   slonová kost, střídané řádky (jako editační okno #attrwin), zaoblení, stín,
   kulatý křížek. Platí pro všechny popupy .defaultTpl (původně červené #ee3024). */
html.v2-popup .defaultTpl {
  border: none;
  border-radius: var(--v2-r);
  overflow: hidden;
  box-shadow: var(--v2-shadow-hi);
  font-family: "Roboto", Arial, sans-serif;
  padding: 0;
  background: var(--v2-ivory);
}
html.v2-popup .defaultTplBody_nadpis {
  background: var(--v2-olive) !important;
  color: #fff;
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif;
  font-size: 15px;
  padding: 12px 44px 11px 12px !important;
  position: relative;
}
html.v2-popup .defaultTplBody_popis {
  background: var(--v2-ivory) !important;
  color: #333;
  border: 0 !important;
  padding: 4px 0 6px !important;
}
html.v2-popup .defaultTplBody_popis p { padding: 5px 12px; margin: 0; }
html.v2-popup .defaultTplBody_popis p:nth-child(odd) { background: var(--v2-pale); }   /* střídání řádků */
html.v2-popup .defaultTplBody_popis b { color: var(--v2-olive-deep); font-weight: 500; }
html.v2-popup .defaultTplBody_popis a:hover { color: var(--v2-olive); }
html.v2-popup .defaultTpl .closebut {
  position: absolute !important; right: 8px !important; top: 50% !important;
  float: none !important;
  transform: translateY(-50%);
  width: 26px; height: 26px; line-height: 26px;
  text-align: center; font-size: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: background-color .15s ease, transform .15s ease;
}
html.v2-popup .defaultTpl .closebut:hover {
  background: rgba(255, 255, 255, .35);
  transform: translateY(-50%) rotate(90deg);   /* křížek se při najetí pootočí */
}
html.v2-popup .defaultTplBody_popis { line-height: 1.5; }

/* 9) TOOLTIPY – tmavě olivové, zaoblené, Roboto (bootstrap 3 .tooltip) */
html.v2-tooltipy .tooltip-inner {
  background: var(--v2-ink);
  color: #F4F7E8;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 12px;
  padding: 5px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .4);
}
html.v2-tooltipy .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--v2-ink); }
html.v2-tooltipy .tooltip.top .tooltip-arrow    { border-top-color: var(--v2-ink); }
html.v2-tooltipy .tooltip.left .tooltip-arrow   { border-left-color: var(--v2-ink); }
html.v2-tooltipy .tooltip.right .tooltip-arrow  { border-right-color: var(--v2-ink); }

/* 10) ZOOM +/− – menší (36 px místo 45 px), slonová kost, olivové znaky.
   Pozor: .ol-zoom je v aplikaci otočený o −90° kolem svého středu (proto
   jsou + a − vedle sebe, ne pod sebou). Rozměry i top/left se proto zadávají
   pro NEotočený box (šířka 36, výška 36+5+36 = 77) a pozice je dopočtená tak,
   aby po otočení: levý okraj zůstal na x = 5 px a svislý střed na y = 27,5 px
   (= střed ostatních ikon vysokých 45 px).
     střed x = 5 + 77/2 = 43,5  →  left = 43,5 − 36/2 = 25,5
     střed y = 5 + 45/2 = 27,5  →  top  = 27,5 − 77/2 = −11 */
html.v2-zoom .ol-zoom {
  width: 36px !important; height: 77px !important;
  top: -11px !important; left: 25.5px !important;
  box-shadow: none !important;          /* stín mají jednotlivá tlačítka (jsou oddělená mezerou) */
}
html.v2-zoom .ol-zoom button {
  width: 36px !important; height: 36px !important;
  font-size: 24px !important;
  background: var(--v2-ivory) !important;
  color: var(--v2-olive) !important;
  border-radius: var(--v2-r-sm) !important;
  box-shadow: var(--v2-shadow);
  transition: background-color .15s ease, color .15s ease;
}
html.v2-zoom .ol-zoom button:hover {
  background: var(--v2-sage) !important;
  color: var(--v2-olive-deep) !important;
}
html.v2-zoom .ol-zoom .ol-zoom-out { border-top: 0 !important; }

/* 11) LOGA PARTNERŮ – sjednocený světlý podklad, v klidu tlumená,
   při najetí plná sytost (méně ruší nad mapou). */
html.v2-loga #copyright {
  background: rgba(255, 255, 240, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--v2-r) var(--v2-r) 0 0;
  padding: 6px 10px 4px;
  box-shadow: 0 -2px 14px -6px rgba(39, 51, 15, .35);
  opacity: .78;
  transition: opacity .2s ease;
}
html.v2-loga #copyright:hover { opacity: 1; }
/* všechna loga v JEDNOM řádku, spodní hrany na jedné lince (flex + align-items: flex-end) */
html.v2-loga #copyright {
  display: flex; align-items: flex-end; flex-wrap: nowrap;
  gap: 8px; white-space: nowrap;
}
html.v2-loga #copyright a {
  display: block; margin: 0;
  /* logo Active2Public má v aplikaci vlastní bílý podklad s odsazením – to by ho
     zvedlo nad ostatní; podklad teď dává celý pruh, proto odsazení rušíme */
  background: transparent !important; padding: 0 !important;
}
html.v2-loga #copyright a img { display: block; }

/* 12) UKAZATEL ZOOMU – "zoom: 11.74" ve stejném stylu jako lišta */
html.v2-zoominfo #ml-zoom-box {
  background: rgba(255, 255, 240, .9) !important;
  color: var(--v2-olive-deep) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: var(--v2-shadow) !important;
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;   /* číslice stejně široké – text při zoomu neposkakuje */
  padding: 3px 10px !important;
}

/* 13) FOKUS – viditelný rámeček při ovládání klávesnicí (Tab).
   :focus-visible se ukáže jen u klávesnice, ne po kliknutí myší. */
html.v2-fokus #op_list > *:focus-visible,
html.v2-fokus .panel input:focus-visible,
html.v2-fokus .panel select:focus-visible,
html.v2-fokus .panel button:focus-visible,
html.v2-fokus .ol-control button:focus-visible {
  outline: 2px solid var(--v2-olive);
  outline-offset: 2px;
}

/* 14) NAČÍTÁNÍ – "Čekejte prosím…" jako karta s jízdním kolem, kterému se točí kola */
html.v2-nacitani #loadingBox { padding-top: 0; display: none; }
html.v2-nacitani #loadingBox[style*="block"] { display: grid !important; place-items: center; }
html.v2-nacitani #loadingBoxIn {
  display: flex; align-items: center; gap: 12px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 16px; color: var(--v2-ink);
  background: var(--v2-ivory);
  border-radius: var(--v2-r);
  box-shadow: var(--v2-shadow-hi);
  padding: 16px 24px 16px 18px;
}
html.v2-nacitani #loadingBoxIn::before {
  content: "";
  width: 80px; height: 50px; flex: none;              /* větší, aby kolo bylo dobře vidět */
  /* Jízdní kolo jako inline SVG (žádný další soubor):
     - 2 ráfky (kružnice r=11 se středy v 14,26 a 50,26)
     - dráty v každém kole se točí díky SMIL <animateTransform> přímo uvnitř
       SVG – funguje i v obrázku na pozadí, bez JS a bez dalšího CSS
     - rám: zadní stavba, sedlová trubka, horní a spodní trubka, vidlice,
       sedlo, řídítka a šlapací osa (kolečko v 30,26) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%236B8E23' stroke-width='2.5'%3E%3Ccircle cx='14' cy='26' r='11'/%3E%3Ccircle cx='50' cy='26' r='11'/%3E%3C/g%3E%3Cg stroke='%236B8E23' stroke-width='1'%3E%3Cg%3E%3Cpath d='M14 16v20M4 26h20M7 19l14 14M21 19 7 33'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 26' to='360 14 26' dur='1.2s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M50 16v20M40 26h20M43 19l14 14M57 19 43 33'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 26' to='360 50 26' dur='1.2s' repeatCount='indefinite'/%3E%3C/g%3E%3C/g%3E%3Cpath stroke='%234A6418' stroke-width='2.5' d='M14 26h16l-4-14zM26 12h20L30 26M46 12l4 14M26 12v-2M22 10h8M46 12l-2-5h5'/%3E%3Ccircle cx='30' cy='26' r='2' fill='%234A6418'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* 15) CYKLISTA – načítací lišta dole: olivová, silnější a na jejím čele
   jede CELÉ jízdní kolo (stejné SVG jako v bodě 14, kola se točí přes SMIL).
   Šířku lišty mění aplikace sama, kolo jede s ní. z-index nad pruhem log (999),
   jinak by kolo za logy zmizelo. */
html.v2-cyklista #progress {
  height: 4px !important;
  background: linear-gradient(90deg, rgba(107, 142, 35, .35), var(--v2-olive)) !important;
  border-radius: 0 4px 4px 0;
  transition: width .25s var(--v2-ease);
  overflow: visible;
  z-index: 1001 !important;
}
html.v2-cyklista #progress::after {
  content: "";
  position: absolute; right: -26px; bottom: 3px;      /* kola "stojí" na liště */
  width: 52px; height: 33px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%234A6418' stroke-width='2.5' fill='%23FFFFF0'%3E%3Ccircle cx='14' cy='26' r='11'/%3E%3Ccircle cx='50' cy='26' r='11'/%3E%3C/g%3E%3Cg stroke='%234A6418' stroke-width='1'%3E%3Cg%3E%3Cpath d='M14 16v20M4 26h20M7 19l14 14M21 19 7 33'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 14 26' to='360 14 26' dur='.6s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M50 16v20M40 26h20M43 19l14 14M57 19 43 33'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 26' to='360 50 26' dur='.6s' repeatCount='indefinite'/%3E%3C/g%3E%3C/g%3E%3Cpath stroke='%2327330F' stroke-width='2.5' d='M14 26h16l-4-14zM26 12h20L30 26M46 12l4 14M26 12v-2M22 10h8M46 12l-2-5h5'/%3E%3Ccircle cx='30' cy='26' r='2' fill='%2327330F'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .9));
}
/* když lišta nic nenačítá (šířka 0), kolo neukazujeme */
html.v2-cyklista #progress[style*="width: 0"]::after { display: none; }


/* ==========================================================================
   POHYB – statická část (CSS přechody). Složitější animace (vyjíždění
   panelů, popupy, vlnky) řídí design-v2.js přes Web Animations API.
   ========================================================================== */

/* 18) STISK – ikona se při stisku krátce zmáčkne */
/* platí pro ikony nahoře (#op_list) i dole (editorský panel #layerwin, okno atributů #attrwin) */
html.v2-stisk #op_list > span,
html.v2-stisk #op_list > a,
html.v2-stisk .ol-zoom button,
html.v2-stisk #layerwin .ui_ikony,
html.v2-stisk #attrwin .ui_ikony {
  transition: transform .12s var(--v2-ease), background-color .2s ease, box-shadow .2s ease;
}
html.v2-stisk #op_list > span:active,
html.v2-stisk #op_list > a:active,
html.v2-stisk #layerwin .ui_ikony:not(.disabled):active,
html.v2-stisk #attrwin .ui_ikony:active { transform: scale(.9); }
/* vlnka – element vkládá JS do obalu se stejným zaoblením jako ikona */
.v2-vlnka-obal {
  position: fixed; pointer-events: none; overflow: hidden;
  border-radius: var(--v2-r-sm); z-index: 6001;
}
.v2-vlnka {
  position: absolute; border-radius: 50%;
  background: rgba(107, 142, 35, .35);
  transform: translate(-50%, -50%) scale(0);
}

/* 19) HOVER – lehké nadzvednutí ikony (jen u zařízení s myší) */
@media (hover: hover) {
  html.v2-hover #op_list > span:not(.active):hover,
  html.v2-hover #op_list > a:not(.active):hover,
  html.v2-hover #layerwin .ui_ikony:not(.active):not(.disabled):hover,
  html.v2-hover #attrwin .ui_ikony:not(.active):not(.disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -6px rgba(39, 51, 15, .45) !important;
    transition: transform .18s var(--v2-ease), box-shadow .18s ease, background-color .2s ease;
  }
  html.v2-hover.v2-stisk #op_list > span:active,
  html.v2-hover.v2-stisk #layerwin .ui_ikony:not(.disabled):active { transform: translateY(0) scale(.9); }
}

/* 20) AKTIVNÍ IKONA – přechod barvy + krátké "nadechnutí" (animaci spouští JS
   přidáním třídy .v2-nadech při přepnutí na aktivní) */
html.v2-aktivni #op_list > .ui_ikony,
html.v2-aktivni #layerwin .ui_ikony { transition: background-color .25s ease, transform .18s var(--v2-ease); }
.v2-nadech { animation: v2-nadech .38s var(--v2-ease); }
@keyframes v2-nadech {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 21) PODSKUPINY – ikona +/− se při rozbalení otočí */
html.v2-podskupiny #menuBox .vrstvarow i.fa {
  transition: transform .25s var(--v2-ease), color .2s ease;
}
html.v2-podskupiny #menuBox .vrstvarow i.fa-minus-square-o { transform: rotate(180deg); color: var(--v2-olive); }

/* 22) ZAŠKRTNUTÍ – "pop" checkboxu + záblesk řádku (třídy přidává JS) */
.v2-pop { animation: v2-pop .3s var(--v2-ease); }
@keyframes v2-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.v2-zablesk { animation: v2-zablesk .6s ease-out; }
@keyframes v2-zablesk { 0% { background-color: rgba(107, 142, 35, .35); } 100% { background-color: transparent; } }

/* 24) KLIK DO MAPY – rozbíhající se kroužek v místě kliknutí */
.v2-kruh {
  position: fixed; pointer-events: none; z-index: 5000;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 3px solid var(--v2-olive-deep);
  border-radius: 50%;
  /* bílý lem zvenku i zevnitř – kroužek je vidět na světlé i tmavé mapě */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 2px rgba(255, 255, 255, .85);
  background: rgba(107, 142, 35, .12);
}

/* 27) DIALOGY (jQuery UI) – vzhled sladěný s popupem z bodu 8/23:
   olivová hlavička, slonová kost, zaoblení, stín, kulatý křížek, tlačítka jako pilulky */
html.v2-dialogy .ui-dialog {
  border: none !important; padding: 0 !important;
  border-radius: var(--v2-r) !important; overflow: hidden;
  box-shadow: var(--v2-shadow-hi) !important;
  background: var(--v2-ivory) !important;
  font-family: "Roboto", Arial, sans-serif;
}
html.v2-dialogy .ui-dialog .ui-dialog-titlebar {
  background: var(--v2-olive) !important; border: 0 !important; border-radius: 0 !important;
  font-family: "Roboto Condensed", "Roboto", Arial, sans-serif; font-size: 15px;
  padding: 12px 44px 11px 12px !important;
}
html.v2-dialogy .ui-dialog .ui-dialog-titlebar-close {
  width: 26px !important; height: 26px !important; margin-top: -13px !important; right: 8px !important;
  border-radius: 50%; background: rgba(255, 255, 255, .18) !important; border: 0 !important;
  transition: background-color .15s ease, transform .15s ease;
}
html.v2-dialogy .ui-dialog .ui-dialog-titlebar-close:hover {
  background: rgba(255, 255, 255, .35) !important; transform: rotate(90deg);
}
html.v2-dialogy .ui-dialog .ui-dialog-content { background: var(--v2-ivory); color: #333; padding: 10px 14px !important; }
html.v2-dialogy .ui-dialog .ui-dialog-buttonpane {
  background: var(--v2-pale); border-top: 0 !important; margin: 0 !important; padding: 8px 12px !important;
}
html.v2-dialogy .ui-dialog .ui-dialog-buttonpane button {
  border-radius: 999px !important; padding: 4px 16px !important; margin: 0 0 0 6px !important;
  font: 500 13px "Roboto", Arial, sans-serif !important;
  background: #fff !important; color: var(--v2-olive-deep) !important;
  border: 1px solid rgba(107, 142, 35, .5) !important;
}
html.v2-dialogy .ui-dialog .ui-dialog-buttonpane button:first-child {
  background: var(--v2-olive) !important; color: #fff !important; border-color: var(--v2-olive) !important;
}

/* 29) TOAST – krátká hláška dole uprostřed */
/* kartička: slonová kost, olivový proužek vlevo a kroužek s fajfkou (jako zapnutá vrstva) */
.v2-toast {
  position: fixed; left: 50%; bottom: 110px; z-index: 7000;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: var(--v2-ivory); color: var(--v2-ink);
  font: 400 14px/1.3 "Roboto", Arial, sans-serif;
  padding: 10px 16px 10px 12px; border-radius: var(--v2-r);
  border-left: 4px solid var(--v2-olive);
  box-shadow: var(--v2-shadow-hi);
  pointer-events: none; white-space: nowrap;
}
.v2-toast::before {
  content: "\2713";                                   /* ✓ */
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--v2-olive); color: #fff; font-size: 13px; font-weight: 700;
}
.v2-toast b { color: var(--v2-olive-deep); font-weight: 600; }

/* "duch" – kopie zavíraného okna, na které běží animace zavření */
.v2-duch { pointer-events: none !important; }


/* ==========================================================================
   PANEL "DESIGN V2" – přepínače nápadů (jen pro zkušební stránku)
   ========================================================================== */
/* vlevo nahoře pod tlačítky zoomu – vlevo dole je u přihlášeného editora
   panel "Výběr vrstvy pro editaci", který by tlačítko zakryl */
#v2-ovladac {
  position: fixed; left: 8px; top: 62px; z-index: 8000;
  font: 13px/1.35 "Roboto", Arial, sans-serif; color: var(--v2-ink);
}
#v2-ovladac > button {
  font: 600 13px "Roboto Condensed", "Roboto", Arial, sans-serif;
  background: var(--v2-ink); color: #F4F7E8;
  border: 0; border-radius: 999px; padding: 8px 14px;
  box-shadow: var(--v2-shadow-hi); cursor: pointer;
}
#v2-ovladac > button:focus-visible { outline: 2px solid var(--v2-olive); outline-offset: 2px; }
#v2-ovladac .v2-karta {
  position: absolute; left: 0; top: 40px;          /* karta se otevírá pod tlačítkem */
  width: 340px; max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--v2-ivory); border-radius: var(--v2-r);
  box-shadow: var(--v2-shadow-hi);
  padding: 12px 12px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(107, 142, 35, .5) transparent;
}
#v2-ovladac .v2-karta[hidden] { display: none; }
#v2-ovladac h2 {
  font: 600 17px "Roboto Condensed", "Roboto", Arial, sans-serif;
  margin: 0 0 2px;
}
#v2-ovladac p.v2-pozn { margin: 0 0 10px; color: #5b6646; font-size: 12px; }
#v2-ovladac h3 {
  font: 600 14px "Roboto Condensed", "Roboto", Arial, sans-serif;
  margin: 12px 0 4px; color: var(--v2-olive-deep);
}
#v2-ovladac label.v2-napad {
  display: grid; grid-template-columns: 22px 1fr; gap: 0 6px;
  padding: 5px 6px; border-radius: var(--v2-r-sm); cursor: pointer;
  font-weight: 400; margin: 0;
}
#v2-ovladac label.v2-napad:hover { background: var(--v2-pale); }
#v2-ovladac label.v2-napad input { accent-color: var(--v2-olive); margin: 2px 0 0; width: 15px; height: 15px; }
#v2-ovladac label.v2-napad span { font-weight: 500; }
#v2-ovladac label.v2-napad small { grid-column: 2; color: #5b6646; font-size: 11.5px; }
#v2-ovladac .v2-akce { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
#v2-ovladac .v2-akce button {
  font: 500 12px "Roboto", Arial, sans-serif;
  border: 1px solid rgba(107, 142, 35, .45); background: #fff; color: var(--v2-olive-deep);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
#v2-ovladac .v2-akce button:hover { background: var(--v2-sage); }


/* ==========================================================================
   OHLEDUPLNOST – kdo má v systému "omezit pohyb", animace nedostane
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[class*="v2-"] *, html[class*="v2-"] *::before, html[class*="v2-"] *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}