/*
 * GREJ.ZONE – PHONE UI
 * Oddělená prezentační vrstva. Všechna pravidla jsou pod html.gzw-phone;
 * existující desktopové / tabletové styly v mapa.css zůstávají nedotčené.
 * Barvy odpovídají mapa.css (panel #101010/#0b0b0b, zvýraznění #8f7640/#f3e7b3).
 */
.phone-topbar, .phone-navbar, .phone-sheet-head, .phone-backdrop, .phone-more-menu { display: none; }

html.gzw-phone {
  --phone-accent: #8f7640;
  --phone-accent-bright: #b08d45;
  --phone-cream: #f3e7b3;
  --phone-panel: #101010;
  --phone-panel-dark: #0b0b0b;
  --phone-border: #2a2a2a;
  --phone-header-height: 58px;
  --phone-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
  color-scheme: dark;
}
html.gzw-phone, html.gzw-phone body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
}
html.gzw-phone .app {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
html.gzw-phone .map-wrap {
  position: absolute;
  inset: var(--phone-header-height) 0 var(--phone-nav-height) 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
html.gzw-phone #map { width: 100%; height: 100%; touch-action: none; }
html.gzw-phone .leaflet-container,
html.gzw-phone .leaflet-grab,
html.gzw-phone .leaflet-grab .leaflet-interactive,
html.gzw-phone .leaflet-dragging .leaflet-grab,
html.gzw-phone .leaflet-marker-icon,
html.gzw-phone .leaflet-pane,
html.gzw-phone #map { cursor: auto !important; }

/* Při prvním načítání překrýt CELÝ telefon včetně horní/spodní lišty.
   Původní map-loading-overlay zůstává společný s desktopem/tabletem;
   jeho mobilní pozice a vrstva mají přednost před vysouvacími panely. */
html.gzw-phone .map-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  box-sizing: border-box;
  padding: max(20px, env(safe-area-inset-top, 0px)) 16px max(20px, env(safe-area-inset-bottom, 0px));
}
html.gzw-phone .map-loading-overlay.maintenance-mode { z-index: 9000; }
html.gzw-phone .map-loading-card { box-sizing: border-box; max-width: 100%; }

/* Horní lišta se stejným logem a barevným akcentem jako sidebar. */
html.gzw-phone .phone-topbar {
  position: absolute;
  z-index: 4900;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--phone-header-height);
  padding: env(safe-area-inset-top, 0px) 12px 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(143,118,64,.46);
  background: radial-gradient(circle at 15% 0%, rgba(176,141,69,.14), transparent 50%), linear-gradient(180deg,#121212,#090909);
  box-shadow: 0 7px 18px rgba(0,0,0,.52);
}
html.gzw-phone .phone-brand { display:flex; align-items:center; gap:8px; min-width:0; }
html.gzw-phone .phone-brand img { display:block; width:36px; height:36px; object-fit:contain; }
html.gzw-phone .phone-brand span { display:flex; flex-direction:column; min-width:0; }
html.gzw-phone .phone-brand small { font:600 10px/1.1 Rajdhani,Arial,sans-serif; text-transform:uppercase; letter-spacing:1.5px; color:#b8b8b8; }
html.gzw-phone .phone-brand strong { font:700 23px/1 Rajdhani,Arial,sans-serif; letter-spacing:1.2px; color:var(--phone-cream); }
html.gzw-phone .phone-top-actions { display:flex; gap:8px; flex:0 0 auto; }
html.gzw-phone .phone-header-action {
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px;
  padding:0; border:1px solid var(--phone-border); border-radius:0;
  background:#151515; color:var(--phone-cream); cursor:pointer; font-size:26px; line-height:1;
  -webkit-tap-highlight-color:transparent;
}
html.gzw-phone .phone-header-action:active { background:#241d12; border-color:var(--phone-accent); }
html.gzw-phone button:focus-visible { outline:2px solid var(--phone-cream); outline-offset:-3px; }

/* Mapové ovládání v dostupné oblasti, nikoli pod panelem. */
html.gzw-phone .leaflet-top.leaflet-left { top:112px; left:10px; }
/* Telefon používá dotykový pinch-to-zoom; +/- nepatří do mobilního UI.
   Pojistka i pro případ, že by ovladač doplnil plugin. */
html.gzw-phone .leaflet-control-zoom { display:none !important; }
html.gzw-phone .map-info-panel {
  left:50%; top:4px; width:calc(100% - 18px); max-width:520px;
  transform:translateX(-50%); z-index:1000;
}
html.gzw-phone .map-info-panel-content { min-height:26px; padding:7px 9px; font-size:11px; line-height:1.25; }
/* Telefon: informačně úplný, ale úsporný řádek podpory webu.
   Specifičnost přebije staré media queries, které popisek při šířce <=760px skrývají. */
html.gzw-phone .map-info-panel-support--phone {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:5px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 auto;
}
html.gzw-phone .map-info-panel-support--phone .map-info-panel-support-icon {
  flex:0 0 auto;
  font-size:15px;
}
html.gzw-phone .map-info-panel-support--phone .map-info-panel-support-label {
  display:inline;
  flex:0 0 auto;
  white-space:nowrap;
  font-size:11px;
}
html.gzw-phone .map-info-panel-support--phone .map-info-panel-support-bar {
  flex:0 1 54px;
  width:54px;
  min-width:28px;
  height:9px;
  box-sizing:border-box;
}
html.gzw-phone .map-info-panel-support--phone strong {
  flex:0 0 auto;
  min-width:0;
  font-size:11px;
  text-align:left;
  white-space:nowrap;
}
@media (max-width:355px) {
  html.gzw-phone .map-info-panel-support--phone { gap:4px; }
  html.gzw-phone .map-info-panel-support--phone .map-info-panel-support-label,
  html.gzw-phone .map-info-panel-support--phone strong { font-size:10px; }
  html.gzw-phone .map-info-panel-support--phone .map-info-panel-support-bar { flex-basis:38px; min-width:22px; }
}
html.gzw-phone .coord-overlay { bottom:48px; right:9px; left:auto; max-width:calc(100% - 18px); font-size:11px; }
html.gzw-phone .web-version-overlay { bottom:8px; right:8px; font-size:10px; padding:4px 7px; }
html.gzw-phone .map-context-menu { z-index:3800; max-width:calc(100vw - 24px); }

/* Spodní navigace. */
html.gzw-phone .phone-navbar {
  position:absolute; z-index:4900; inset:auto 0 0 0; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  height:var(--phone-nav-height); padding:2px 6px env(safe-area-inset-bottom,0px);
  box-sizing:border-box; background:linear-gradient(180deg,#151515,#080808);
  border-top:1px solid rgba(143,118,64,.54);
  box-shadow:0 -10px 24px rgba(0,0,0,.55);
}
html.gzw-phone .phone-nav-button {
  min-width:0; border:0; border-top:2px solid transparent; border-radius:0;
  background:transparent; color:#b6b6b6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; padding:2px; cursor:pointer;
  font:700 12px/1.1 Rajdhani,Arial,sans-serif; letter-spacing:.4px;
  -webkit-tap-highlight-color:transparent;
}
html.gzw-phone .phone-nav-icon { display:block; font:700 29px/1 Arial,sans-serif; }
html.gzw-phone .phone-nav-button.is-selected { border-top-color:var(--phone-accent-bright); color:var(--phone-cream); background:rgba(176,141,69,.065); }

/* Sdílený tmavý podklad pro všechny mobilní výsuvné panely. */
html.gzw-phone .phone-backdrop {
  position:absolute; z-index:4100; inset:var(--phone-header-height) 0 var(--phone-nav-height);
  border:0; border-radius:0; background:rgba(0,0,0,.48); padding:0; cursor:pointer;
}
html.gzw-phone.phone-sheet-open .phone-backdrop,
html.gzw-phone.phone-filters-open .phone-backdrop,
html.gzw-phone.phone-more-open .phone-backdrop { display:block; }

/* Původní sidebar se pouze v telefonu změní na vysouvací detail a vyhledávání. */
html.gzw-phone .sidebar {
  position:absolute; z-index:4500; left:0; right:0; bottom:var(--phone-nav-height); top:auto;
  display:grid; grid-template-rows:45px auto minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  width:100%; min-width:0; height:min(78dvh,740px); max-height:calc(100dvh - var(--phone-nav-height) - 8px);
  border:1px solid rgba(143,118,64,.54); border-bottom:0; border-right:0; border-left:0;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#121212,#080808);
  overflow:hidden; box-sizing:border-box; box-shadow:0 -16px 48px rgba(0,0,0,.65);
  transform:translateY(calc(100% + 6px)); visibility:hidden; pointer-events:none;
  transition:transform .22s ease,visibility .22s ease,height .22s ease;
}
html.gzw-phone.phone-sheet-open .sidebar { transform:translateY(0); visibility:visible; pointer-events:auto; }
html.gzw-phone.phone-sheet-expanded .sidebar { height:calc(100dvh - var(--phone-nav-height) - 4px); }
html.gzw-phone .phone-sheet-head {
  display:flex; align-items:center; gap:8px; padding:4px 10px 4px 14px;
  border-bottom:1px solid var(--phone-border); background:#111;
  touch-action:pan-y;
}
html.gzw-phone .phone-sheet-handle { width:34px; height:4px; background:var(--phone-accent); border-radius:3px; margin-right:3px; }
html.gzw-phone .phone-sheet-title { flex:1; min-width:0; font:700 16px/1.1 Rajdhani,Arial,sans-serif; letter-spacing:.5px; color:var(--phone-cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.gzw-phone .sidebar-top { z-index:7; flex:none; }
html.gzw-phone .sidebar-logo-wrap { display:none; }
html.gzw-phone .sidebar-search-section { padding:9px 12px; border-bottom:1px solid #242424; }
html.gzw-phone .sidebar-search-section .sidebar-label { display:none; }
html.gzw-phone .search-wrap { position:relative; }
html.gzw-phone .sidebar-search { min-height:44px; font-size:16px; }
html.gzw-phone .search-suggestions {
  z-index:70; top:calc(100% + 1px); max-height:min(45dvh,380px); width:100%;
  box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain;
}
html.gzw-phone .search-suggestion-item { min-height:44px; box-sizing:border-box; }
html.gzw-phone .sidebar-main { min-height:0; overflow:hidden; }
html.gzw-phone .sidebar-scroll { overflow:hidden; }
html.gzw-phone .sidebar-detail-section { padding:10px 12px 18px; min-height:0; overflow:hidden; }
html.gzw-phone #sidebarContent {
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding-right:3px; margin-right:0; min-height:0;
}
html.gzw-phone .sidebar-footer { display:none; }
html.gzw-phone #sidebarContent img,
html.gzw-phone #sidebarContent video,
html.gzw-phone #sidebarContent iframe { max-width:100%; }
html.gzw-phone #sidebarContent * { overflow-wrap:anywhere; }
html.gzw-phone .sidebar-detail-card { max-width:100%; min-width:0; }
html.gzw-phone .sidebar-item-actions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
html.gzw-phone .sidebar-item-action-btn,
html.gzw-phone .expedition-sidebar-save,
html.gzw-phone .expedition-sidebar-cancel { min-height:42px; }

/* Výchozí filtry zůstanou původní: na mobilu se objeví v samostatném výsuvném menu. */
html.gzw-phone .map-filters-floating {
  position:fixed; z-index:4400; top:auto; left:8px; right:8px;
  bottom:calc(var(--phone-nav-height) + 8px);
  display:none; flex-direction:column; align-items:stretch; gap:6px;
  box-sizing:border-box; width:auto; max-height:min(72dvh,640px);
  padding:12px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--phone-accent); border-radius:8px;
  background:linear-gradient(180deg,#151515,#090909);
  box-shadow:0 14px 34px rgba(0,0,0,.7);
}
html.gzw-phone.phone-filters-open .map-filters-floating { display:flex; }
html.gzw-phone .map-filter-control { width:100%; min-width:0; position:relative; }
html.gzw-phone .map-filter-toggle { width:100%; min-width:0; min-height:43px; box-sizing:border-box; text-align:left; padding:8px 14px; }
html.gzw-phone .map-filter-control .filter-panel,
html.gzw-phone .map-filter-control .subfilter-panel,
html.gzw-phone .map-filter-control .map-layer-panel {
  position:relative; left:auto; right:auto; bottom:auto; top:auto;
  display:block; width:100% !important; max-width:100%; max-height:none;
  margin:5px 0 7px; box-sizing:border-box; overflow:visible; box-shadow:none;
}
html.gzw-phone .map-filter-control .filter-panel.hidden,
html.gzw-phone .map-filter-control .subfilter-panel.hidden { display:none !important; }
html.gzw-phone .map-layer-section { padding:9px 10px; }
html.gzw-phone .map-layer-option { min-height:39px; align-items:center; box-sizing:border-box; }
html.gzw-phone .category-option { min-height:39px; box-sizing:border-box; }

/* Další akce používají již existující funkce webu, ne jejich kopie. */
html.gzw-phone .phone-more-menu {
  position:absolute; z-index:4450; left:8px; right:8px;
  bottom:calc(var(--phone-nav-height) + 8px);
  display:none; max-height:min(70dvh,520px); overflow-y:auto;
  box-sizing:border-box; padding:12px;
  border:1px solid var(--phone-accent); border-radius:8px;
  background:linear-gradient(180deg,#151515,#090909); box-shadow:0 16px 40px rgba(0,0,0,.7);
}
html.gzw-phone.phone-more-open .phone-more-menu { display:grid; gap:6px; }
html.gzw-phone .phone-more-title { color:var(--phone-cream); font:700 18px/1.1 Rajdhani,Arial,sans-serif; letter-spacing:.5px; padding:3px 4px 8px; }
html.gzw-phone .phone-more-menu button {
  width:100%; min-height:44px; padding:10px 12px;
  box-sizing:border-box; border:1px solid #303030; border-radius:0;
  background:#151515; color:#f2f2f2; text-align:left;
  font:700 14px/1.3 Rajdhani,Arial,sans-serif; cursor:pointer;
}
html.gzw-phone .phone-more-menu button:active { border-color:var(--phone-accent); color:var(--phone-cream); }
html.gzw-phone .phone-more-social { display:grid; grid-template-columns:1fr 1fr; gap:6px; }

/* Formuláře a výpravy musí jít pohodlně obsloužit dotykem. */
html.gzw-phone .editor-modal,
html.gzw-phone .expedition-modal { padding:8px; }
html.gzw-phone .editor-modal-dialog,
html.gzw-phone .report-modal-dialog,
html.gzw-phone .expedition-modal-dialog {
  width:100% !important; max-width:100% !important;
  max-height:calc(100dvh - 16px) !important;
  min-height:0 !important; transform:none !important;
  box-sizing:border-box;
}
html.gzw-phone .editor-modal-header { padding:13px; }
html.gzw-phone .editor-form { padding:12px; }
html.gzw-phone .editor-grid,
html.gzw-phone .report-grid { grid-template-columns:1fr !important; }
html.gzw-phone input,
html.gzw-phone select,
html.gzw-phone textarea { max-width:100%; box-sizing:border-box; }
html.gzw-phone .report-form input,
html.gzw-phone .report-form select,
html.gzw-phone .report-form textarea { font-size:16px; }
html.gzw-phone .expedition-modal-dialog { height:min(760px,calc(100dvh - 16px)) !important; overflow:auto; }
html.gzw-phone .expedition-modal-body { min-height:0; overflow:auto; }
html.gzw-phone .expedition-library-grid { grid-template-columns:1fr !important; }
/* Záložní vizuální pojistka; načítání UI výprav je na telefonu vypnuté i v mapa.js. */
html.gzw-phone .expedition-filter-control,
html.gzw-phone #expeditionOpenBtn,
html.gzw-phone .expedition-library-modal-shell { display:none !important; }
html.gzw-phone .gzw-toast-container { max-width:calc(100% - 18px); }

@media (orientation:landscape) and (max-height:550px) {
  html.gzw-phone { --phone-header-height:48px; --phone-nav-height:calc(52px + env(safe-area-inset-bottom,0px)); }
  html.gzw-phone .phone-brand img { width:30px; height:30px; }
  html.gzw-phone .phone-brand strong { font-size:20px; }
  html.gzw-phone .phone-nav-icon { font-size:22px; }
  html.gzw-phone .sidebar { left:auto; right:0; width:min(470px,60vw); height:calc(100dvh - var(--phone-nav-height) - 4px); border-left:1px solid var(--phone-accent); border-radius:10px 0 0 0; }
  html.gzw-phone .map-filters-floating, html.gzw-phone .phone-more-menu { left:auto; right:7px; width:min(430px,70vw); max-height:calc(100dvh - var(--phone-nav-height) - 16px); }
  html.gzw-phone .map-info-panel { max-width:calc(100% - 170px); }
}
@media (prefers-reduced-motion:reduce) {
  html.gzw-phone .sidebar { transition:none; }
}

/* GZW 2.7 – záchranné návraty při mapové nápovědě úkolu.
   Zobrazují se jen na telefonu, pouze při zasunutém detailu s aktivními hinty. */
html.gzw-phone .phone-task-hint-actions {
  position:absolute; z-index:4850;
  left:10px; right:10px; bottom:calc(var(--phone-nav-height) + 10px);
  display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
  padding:7px; box-sizing:border-box;
  border:1px solid rgba(176,141,69,.7); border-radius:9px;
  background:rgba(12,12,12,.96); box-shadow:0 5px 24px rgba(0,0,0,.76);
}
html.gzw-phone.phone-task-hints-visible .phone-task-hint-actions { display:grid; }
html.gzw-phone .phone-task-hint-actions button {
  min-width:0; min-height:44px; padding:7px 9px; box-sizing:border-box;
  border:1px solid #665535; border-radius:5px;
  background:#211c13; color:var(--phone-cream);
  font:700 14px/1.2 Rajdhani,Arial,sans-serif;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
html.gzw-phone .phone-task-hint-actions button:last-child {
  border-color:rgba(207,78,78,.72); background:#261616; color:#ffb9b9;
}
html.gzw-phone .phone-task-hint-actions button:active { background:#3a3020; }
html.gzw-phone .phone-task-hint-actions button:last-child:active { background:#492021; }
html.gzw-phone .phone-task-hint-actions button:focus-visible {
  outline:2px solid var(--phone-cream); outline-offset:2px;
}
@media (max-width:360px) {
  html.gzw-phone .phone-task-hint-actions { left:6px; right:6px; gap:5px; padding:5px; }
  html.gzw-phone .phone-task-hint-actions button { font-size:12px; padding:6px 4px; }
}


/* GZW 2.8 – vlastní návod na přidání zástupce na plochu; bez systémového alertu. */
html.gzw-phone .gzw-home-guide-dialog {
  box-sizing:border-box; width:min(420px,calc(100vw - 28px)); max-width:calc(100vw - 28px);
  max-height:calc(100dvh - 28px); margin:auto; padding:0;
  overflow:auto; overscroll-behavior:contain; color:#f2ead7;
  border:1px solid rgba(194,155,74,.75); border-radius:16px;
  background:radial-gradient(circle at 20% -10%,rgba(181,141,60,.21),transparent 52%),linear-gradient(160deg,#171510,#090909 74%);
  box-shadow:0 24px 75px rgba(0,0,0,.85),inset 0 1px rgba(255,227,166,.08);
  font-family:Rajdhani,Arial,sans-serif;
}
html.gzw-phone .gzw-home-guide-dialog::backdrop {
  background:rgba(0,0,0,.79); backdrop-filter:blur(3px);
}
html.gzw-phone .gzw-home-guide-inner { position:relative; padding:26px 22px 22px; }
html.gzw-phone .gzw-home-guide-close {
  position:absolute; right:13px; top:13px; width:36px; height:36px; padding:0;
  display:grid; place-items:center; font:400 27px/1 Arial,sans-serif;
  border:1px solid #55492f; border-radius:9px; background:#1c1913; color:#edd6a1;
  cursor:pointer;
}
html.gzw-phone .gzw-home-guide-kicker {
  display:block; margin-bottom:15px; color:#d5aa56; font-weight:700;
  font-size:11px; letter-spacing:2px;
}
html.gzw-phone .gzw-home-guide-brand { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
html.gzw-phone .gzw-home-guide-brand img { width:54px; height:54px; object-fit:contain; }
html.gzw-phone .gzw-home-guide-brand div { display:flex; flex-direction:column; gap:3px; }
html.gzw-phone .gzw-home-guide-brandname { color:#f4e5bf; font-size:26px; font-weight:700; line-height:1; letter-spacing:1px; }
html.gzw-phone .gzw-home-guide-branddesc { color:#bcb4a5; font-size:13px; }
html.gzw-phone .gzw-home-guide-dialog h2 {
  margin:0 0 8px; color:#f3e7b3; font-size:25px; line-height:1.12; font-weight:700;
}
html.gzw-phone .gzw-home-guide-dialog #gzwHomeGuideDescription {
  margin:0 0 19px; color:#cac4b8; font-size:15px; line-height:1.42;
}
html.gzw-phone .gzw-home-guide-steps { display:grid; gap:9px; }
html.gzw-phone .gzw-home-guide-step {
  display:grid; grid-template-columns:27px minmax(0,1fr); gap:12px; align-items:start;
  padding:11px 12px; border:1px solid #383125; border-radius:9px; background:rgba(255,255,255,.035);
}
html.gzw-phone .gzw-home-guide-step > span {
  display:grid; place-items:center; width:27px; height:27px; border:1px solid #94723e;
  border-radius:50%; background:#2b2417; color:#f0c77c; font-size:14px; font-weight:700;
}
html.gzw-phone .gzw-home-guide-step p { margin:2px 0 0; color:#efe8d9; font-size:15px; line-height:1.35; }
html.gzw-phone .gzw-home-guide-note {
  margin:16px 0 15px; color:#b0a58f; font-size:12px; line-height:1.4;
}
html.gzw-phone .gzw-home-guide-done {
  display:block; width:100%; min-height:46px; padding:9px 14px;
  color:#19140b; background:linear-gradient(180deg,#e4be73,#b98d42);
  border:1px solid #f2d696; border-radius:8px;
  font:700 17px/1.2 Rajdhani,Arial,sans-serif; cursor:pointer;
}
html.gzw-phone .gzw-home-guide-close:focus-visible,
html.gzw-phone .gzw-home-guide-done:focus-visible { outline:2px solid #fff0bb; outline-offset:2px; }
@media (max-height:590px) {
  html.gzw-phone .gzw-home-guide-inner { padding-top:20px; padding-bottom:18px; }
  html.gzw-phone .gzw-home-guide-brand { margin-bottom:12px; }
  html.gzw-phone .gzw-home-guide-kicker { margin-bottom:10px; }
  html.gzw-phone .gzw-home-guide-dialog h2 { font-size:22px; }
}