/*
 * Stopy v srdci v2.0 – map-v2.css
 * PŘÍDAVNÁ vrstva nad map.css (map.css se vůbec neupravuje – je křehké,
 * má vlastní starý systém proměnných a 4000+ řádků provázaného JS).
 * Tenhle soubor jen přebarvuje/předělává STATICKÉ UI kolem mapy do v2
 * vzhledu – ne samotnou mapu (dlaždice, značky, shluky – ty jsou
 * MapLibre GL vrstvy nebo JS-generovaný obsah, mimo CSS úplně) a NE
 * karty výsledků/popupy (ty skládá JS za běhu, řeší se v dalším kroku).
 *
 * Scope: `body.v2 .map-container-wrapper …` pro vše uvnitř statické
 * šablony pages/map.php; `body.v2 <selektor>` bez .map-container-wrapper
 * pro prvky, které JS vkládá jinam do stromu (loading overlay, mobilní
 * záložky, přepínače země/režimu) – jejich přesné umístění v DOM jsem
 * si neověřoval, tak radši scope bez závislosti na rodiči.
 *
 * Načítá se AŽ PO map.css (viz layouts/map.php), navíc každý selektor
 * má o třídu navíc (body.v2), takže specificitou vždy vyhraje bez
 * ohledu na pořadí.
 */

/* ── Vnější karta mapy ── */
body.v2 .map-container-wrapper{
  background-color:var(--paper);
  border-color:var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}

/* ── Upozornění na orientaci zařízení ── */
body.v2 .orientation-notice .notice-content{
  background-color:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
body.v2 .orientation-notice .notice-content svg{color:var(--accent)}
body.v2 .orientation-notice .notice-content p{font-family:var(--sans);color:var(--ink)}
body.v2 .orientation-notice .notice-content button{
  background-color:var(--accent);color:#fff;border-radius:var(--r-md);font-family:var(--sans);
}
body.v2 .orientation-notice .notice-content button:hover{background-color:var(--accent-hi)}

/* ── Filtrační lišta ── */
body.v2 .map-container-wrapper .toggle-filters-button,
body.v2 .map-container-wrapper .toggle-results-button{
  background-color:var(--paper);border-color:var(--line);color:var(--ink);font-family:var(--sans);
}
body.v2 .map-container-wrapper .toggle-filters-button:hover,
body.v2 .map-container-wrapper .toggle-results-button:hover{background-color:var(--accent-soft)}
body.v2 .map-container-wrapper .results-count-badge{background-color:var(--accent);color:#fff}

body.v2 .map-container-wrapper .toggle-button{
  background:var(--paper-2);border-color:var(--ink-3);
}
body.v2 .map-container-wrapper .toggle-button:hover{
  border-color:var(--accent-2);background-color:var(--accent-soft);
}
body.v2 .map-container-wrapper .toggle-button .toggle-label{color:var(--ink);font-family:var(--sans)}
body.v2 .map-container-wrapper .toggle-button .toggle-label:before{border-color:var(--ink-3)}
body.v2 .map-container-wrapper .toggle-button input[type="checkbox"]:checked + .toggle-label:before{
  background-color:#1E7B34;border-color:#1E7B34;
}
body.v2 .map-container-wrapper .toggle-button input[type="checkbox"]:checked + .toggle-label{color:var(--ink)}
body.v2 .map-container-wrapper .toggle-select-input{color:var(--ink);font-family:var(--sans)}
body.v2 .map-container-wrapper .toggle-select-input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}

body.v2 .map-container-wrapper .form-control{
  border-color:var(--ink-3);font-family:var(--sans);color:var(--ink);border-radius:var(--r-md);
}
body.v2 .map-container-wrapper .form-control:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
body.v2 .map-container-wrapper .form-control::placeholder{color:var(--ink-3)}

body.v2 .map-container-wrapper .btn{font-family:var(--sans);border-radius:var(--r-md)}
body.v2 .map-container-wrapper .btn-primary{background-color:var(--accent);color:#fff}
body.v2 .map-container-wrapper .btn-primary:hover{background-color:var(--accent-hi)}
body.v2 .map-container-wrapper .btn-secondary{background-color:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
body.v2 .map-container-wrapper .btn-secondary:hover{border-color:var(--accent-2);color:var(--accent)}

/* ── Panel výsledků + uvítací stav (prázdný panel, bez karet výsledků) ── */
body.v2 .map-container-wrapper .results-panel{
  background:var(--paper);border-color:var(--line);border-radius:var(--r-lg);
}
body.v2 .map-container-wrapper .welcome-message{color:var(--ink-2)}
body.v2 .map-container-wrapper .welcome-message h3{color:var(--ink);font-family:var(--sans)}
body.v2 .map-container-wrapper .welcome-message p{font-family:var(--sans)}
body.v2 .map-container-wrapper .welcome-message .welcome-try{color:var(--ink)}
body.v2 .map-container-wrapper .welcome-tip{border-color:var(--line)}
body.v2 .map-container-wrapper .welcome-tip:hover{border-color:var(--accent-2);background-color:var(--accent-soft)}
body.v2 .map-container-wrapper .welcome-tip-name{color:var(--ink)}
body.v2 .map-container-wrapper .welcome-tip-place{color:var(--ink-3)}
body.v2 .map-container-wrapper .no-results{color:var(--ink-2);font-family:var(--sans)}

/* ── Karty výsledků (jednotlivá místa v panelu po vyhledání) ─────────────
   POZOR: barevné linky vlevo podle kategorie (.result-item.memorial,
   .memorial-vip, .cemetery, .service.funeral/.stonework/.grave-care,
   .evidence, .war-memorial – map.css kolem řádku 3082) se ZÁMĚRNĚ
   NEPŘEBARVUJÍ. Jsou sladěné s barvami značek na mapě (komentář v
   map.css: "paleta z etalonu aplikace"), ne pozůstatek staré značky –
   smazáním by se ztratila možnost poznat kategorii podle barvy. */
body.v2 .map-container-wrapper .results-count{
  background:var(--paper-2);color:var(--ink);font-family:var(--sans);
}
body.v2 .map-container-wrapper .result-type-header{
  border-bottom-color:var(--line);color:var(--ink);font-family:var(--sans);
}
body.v2 .map-container-wrapper .result-item{border-bottom-color:var(--paper-2)}
body.v2 .map-container-wrapper .result-item:hover{background-color:var(--accent-soft)}
body.v2 .map-container-wrapper .result-item.highlighted{
  background-color:var(--accent-soft);border-left-color:var(--accent);
}
body.v2 .map-container-wrapper .result-photo,
body.v2 .map-container-wrapper .cemetery-icon{
  background-color:var(--paper-2);border-color:var(--line);
}
body.v2 .map-container-wrapper .cemetery-icon{color:var(--accent)}
body.v2 .map-container-wrapper .result-photo-placeholder{color:var(--ink-3)}
body.v2 .map-container-wrapper .result-name{color:var(--ink);font-family:var(--sans)}
body.v2 .map-container-wrapper .result-details{color:var(--ink-2);font-family:var(--sans)}
body.v2 .map-container-wrapper .btn-view-map,
body.v2 .map-container-wrapper .btn-view-memorial{
  font-family:var(--sans);border-radius:999px;
}
body.v2 .map-container-wrapper .btn-view-map{
  background-color:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft);
}
body.v2 .map-container-wrapper .btn-view-map:hover{border-color:var(--accent)}
body.v2 .map-container-wrapper .btn-view-memorial{
  background-color:var(--paper-2);color:var(--ink);border-color:var(--line);
}
body.v2 .map-container-wrapper .btn-view-memorial:hover{border-color:var(--accent-2)}

/* ── Popup hřbitova (starší varianta, .popup-*) ── */
body.v2 .map-container-wrapper .popup-header,
body.v2 .maplibregl-popup .popup-header{
  background:var(--paper-2);border-bottom-color:var(--line);
}
body.v2 .map-container-wrapper .popup-header h3,
body.v2 .maplibregl-popup .popup-header h3{color:var(--ink);font-family:var(--sans)}
body.v2 .maplibregl-popup .popup-info{color:var(--ink-2);font-family:var(--sans)}
body.v2 .maplibregl-popup .popup-link a{color:var(--accent);font-family:var(--sans)}
body.v2 .maplibregl-popup .popup-link a:hover{color:var(--accent-hi)}

/* ── Popup osoby/hrobu (.map-spot-popup, používá se nejčastěji) ──────────
   .spot-card-avatar (rámeček fota), .spot-star (VIP hvězda) a
   .spot-card-arrow zůstávají beze změny – barví je JS podle kategorie
   (viz map.js addPhotoMarker/renderPersonCard), stejný princip jako
   u karet výsledků výše. */
body.v2 .maplibregl-popup-close-button{color:var(--ink-3)}
body.v2 .map-spot-popup{font-family:var(--sans)}
body.v2 .map-spot-popup .spot-header{
  background:var(--paper-2);border-bottom-color:var(--line);color:var(--ink);
}
body.v2 .map-spot-popup .spot-card{color:var(--ink);border-bottom-color:var(--paper-2)}
body.v2 .map-spot-popup .spot-card:hover{background:var(--accent-soft)}
body.v2 .map-spot-popup .spot-card-name{color:var(--ink)}
/* --ink-2 (7,1:1) místo jen --ink-3 (4,8:1) – text je drobný (0.82rem) a
   hlavní publikum 50+, tak zachovávám vyšší rezervu, co už je zavedená
   v map.css komentářem u těchto tříd (6,9:1/5,4:1 proti bílé). */
body.v2 .map-spot-popup .spot-card-dates,
body.v2 .map-spot-popup .spot-card-place{color:var(--ink-2)}

/* ── Popup u služeb (pohřební služby/kamenictví/péče o hroby) ────────────
   .service-type-badge.grave-care/.stonework/.funeral zůstávají beze
   změny – barevné odznaky podle kategorie služby, stejný princip jako
   linky u karet výsledků. Kruhové logo (.service-popup-logo, 110px,
   border-radius:50%) je z map.css – jen mění tvar, ne barvu, nedotčeno. */
body.v2 .map-container-wrapper .service-popup-header,
body.v2 .maplibregl-popup .service-popup-header{
  background:var(--paper-2);border-bottom-color:var(--line);
}
body.v2 .maplibregl-popup .service-popup-logo{
  background-color:#fff;border-color:var(--line);
}
body.v2 .maplibregl-popup .service-popup-name{color:var(--ink);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-icon{color:var(--ink-3)}
body.v2 .maplibregl-popup .service-popup-row a{color:var(--accent);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-row a:hover{color:var(--accent-hi)}
body.v2 .maplibregl-popup .service-popup-row span{color:var(--ink-2);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-description{
  background-color:var(--paper);border-bottom-color:var(--line);
}
body.v2 .maplibregl-popup .service-popup-description-title{color:var(--ink-3);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-description-text{color:var(--ink);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-description-text .description-toggle{color:var(--accent)}
body.v2 .maplibregl-popup .service-popup-description-text .description-toggle:hover{color:var(--accent-hi)}
body.v2 .maplibregl-popup .service-popup-footer{background-color:var(--paper-2)}
body.v2 .maplibregl-popup .service-popup-map-link{color:var(--accent);font-family:var(--sans)}
body.v2 .maplibregl-popup .service-popup-map-link:hover{color:var(--accent-hi)}

/* ── Sekce s mapou (jen rámeček kolem plátna, ne obsah mapy) ── */
body.v2 .map-container-wrapper .map-section{border-color:var(--line);border-radius:var(--r-lg)}

/* ── Loading / chyba (pevný overlay přes celou stránku) ──────────────────
   Nový spinner: tenký prstenec s plynulým barevným přechodem
   (conic-gradient + mask "vykousne" střed), místo starého silného
   dvoubarevného kruhu. border:none ruší původní 5px okraj z map.css,
   ať se nekreslí pod tím. */
body.v2 #loading-overlay{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
/* app.css (globální, načítá se na téhle stránce taky) má VLASTNÍ
   .loading-spinner – starý silný kruh (border+width+height+animation).
   map.css definuje .loading-spinner jen jako text-align:center wrapper,
   takže se ty dvě definice nepřebíjí, ale SČÍTAJÍ – app.css tím do
   wrapperu propašuje starý kruh navíc, vedle vnitřního .spinner. Zrušit
   je potřeba explicitně, ne jen přebarvit. */
body.v2 .loading-spinner{
  width:auto;height:auto;border:none;border-radius:0;animation:none;
}
body.v2 .spinner{
  width:52px;height:52px;border:none;border-radius:50%;
  background:conic-gradient(var(--accent),transparent);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:spin .85s linear infinite;
}
body.v2 .loading-text{font-family:var(--sans);color:var(--ink-2);font-weight:500}
body.v2 .error-message{font-family:var(--sans)}

/* ── Mobilní záložková navigace (dole na mobilu) ── */
body.v2 .mobile-tab-navigation{background-color:var(--paper);border-top-color:var(--line)}
body.v2 .tab-button.active{background-color:var(--accent);color:#fff}
body.v2 .tab-button-text{font-family:var(--sans)}
body.v2 .tab-button .results-count-badge{background-color:var(--accent);color:#fff}

/* ── Přepínač země / světlý-tmavý režim mapy (plovoucí ovládání na plátně) ── */
body.v2 .country-ctrl-wrap,
body.v2 .theme-ctrl-wrap{
  border-color:var(--line);box-shadow:var(--shadow-md);
}
body.v2 .country-ctrl-btn,
body.v2 .theme-ctrl-btn{
  color:var(--ink-2);font-family:var(--sans);border-bottom-color:var(--line);
}
body.v2 .country-ctrl-btn:hover,
body.v2 .theme-ctrl-btn:hover{background:var(--accent-soft);color:var(--accent)}
body.v2 .country-ctrl-btn.country-ctrl-active,
body.v2 .theme-ctrl-btn.theme-ctrl-active{background-color:var(--app-accent);color:var(--ink)}