:root {
  --bg:#0b1020; --panel:#11162a; --muted:#8ea0b8; --text:#e7eef9;
  --accent:#4da3ff; --accent2:#75f0c0;
  --card-bg:#0e1427; --card-fg:var(--text);
  --panel-bg:#131a30; --panel-fg:var(--text);
  --hdr-h: 64px; /* zjednotená výška headeru */
}

html, body { height:100%; margin:0; }
body {
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}

/* ===== Layout ===== */
.app{
  display:grid;
  grid-template-columns:360px 1fr;
  grid-template-rows: var(--hdr-h) 1fr;           /* konzistentné s --hdr-h */
  grid-template-areas:"header header" "sidebar map";
  height:100vh;                                   /* fallback */
  height:100dvh;                                  /* modern mobile */
}
header{
  grid-area:header; display:flex; gap:12px; align-items:center;
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(77,163,255,.15), rgba(117,240,192,.15));
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height: var(--hdr-h);                       /* nech sedí s gridom */
}
header h1{font-size:18px;margin:0;font-weight:700}
.pill{padding:6px 10px;background:rgba(255,255,255,.06);border-radius:999px;font-size:12px;color:var(--muted)}

/* header button (schovať na desktope) */
.hdr-btn{
  margin-left:auto;
  border:1px solid rgba(255,255,255,.16);
  background:transparent; color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
@media (min-width: 901px){ .hdr-btn{ display:none } }

.sidebar{
  grid-area:sidebar; border-right:1px solid rgba(255,255,255,.06);
  background:var(--panel); padding:14px; overflow:auto;
}

/* ===== Inputs ===== */
.field{display:flex; gap:8px; margin-bottom:10px}
.field input,.field select{
  width:100%; border:1px solid rgba(255,255,255,.12);
  background:#0e1427; color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}

/* ===== Results list / cards ===== */
.results{display:grid; gap:10px}
.card{
  background:var(--card-bg); color:var(--card-fg);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:12px;
}
.card h3{margin:0 0 4px; font-size:16px; white-space:normal; overflow:visible; text-overflow:clip}
.meta{color:var(--muted); font-size:12px}
.btn-row{display:flex; gap:8px; margin-top:10px}
.btn{
  border:1px solid rgba(255,255,255,.16); background:transparent; color:var(--text);
  padding:8px 10px; border-radius:10px; cursor:pointer;
}
.btn:hover{border-color:var(--accent)}

.card--active{
  outline:2px solid var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* ===== Collapsible detail ===== */
.panel{
  margin-top:10px; border-radius:10px;
  background:var(--panel-bg); color:var(--panel-fg);
  border:1px solid rgba(255,255,255,.12);
}
.panel h4{margin:8px 10px 0}
.panel-body{padding:8px 10px 10px}

/* More/Less (iba pre turnajové popisy) */
.clamp-3{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
.more-block{margin-top:8px}
.more-title{font-weight:600; margin-bottom:4px}
.linklike{
  background:none; border:none; padding:0; font:inherit;
  text-decoration:underline; cursor:pointer; margin-top:4px; color:var(--accent);
}
[data-more-wrap].is-expanded [data-more-text]{ -webkit-line-clamp:unset; overflow:visible }

/* ===== Map ===== */
#map{
  grid-area:map; height:100%; width:100%; min-height:0;  /* kľúčové pre grid */
}
/* Leaflet kontajner musí vedieť vyrásť na 100% */
.leaflet-container{ height:100%; min-height:0; }

/* Links */
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:none }

/* ===== Leaflet popup – tmavý a čitateľný ===== */
.curlmap-popup .leaflet-popup-content-wrapper{
  background:#171f36; color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  min-width:420px !important; max-width:800px !important;
}
.curlmap-popup .leaflet-popup-tip{
  background:#171f36; border:1px solid rgba(255,255,255,.15);
  width:16px; height:16px;
}
.curlmap-popup .leaflet-popup-content{
  margin:10px 12px; width:auto !important; max-width:100% !important;
}

/* optional: popup scrollable sections + table theme */
.popup-scroll{ max-height:260px; overflow:auto; padding-right:4px }
.popup-table{
  width:100%; border-collapse:collapse; font-size:12px;
  background:#1a2238; color:var(--text);
  border:1px solid rgba(255,255,255,.15); border-radius:8px; overflow:hidden;
}
.popup-table th,.popup-table td{
  padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.15); vertical-align:top;
}
.popup-table thead th{
  position:sticky; top:0; z-index:1; text-align:left;
  color:var(--accent); background:rgba(255,255,255,.08);
}
.popup-table tbody tr:last-child td{ border-bottom:none }
.popup-links{ margin-top:6px }
.popup-links a + a::before{ content:" • "; color:var(--muted); margin:0 4px }

/* popup nad sidebarom ak by sa krížili */
.leaflet-popup{ z-index: 5000 }

/* ===== Mobile layout ===== */
@media (max-width: 900px){
  .app{
    grid-template-columns: 1fr;
    grid-template-rows: var(--hdr-h) 1fr;
    grid-template-areas: "header" "map";
  }

  /* off-canvas sidebar */
  .sidebar{
    position: fixed; top: var(--hdr-h); left: 0; bottom: 0;
    width: min(92vw, 420px);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 4000;
    box-shadow: 8px 0 24px rgba(0,0,0,.4);
    overflow: auto;
  }
  body.sidebar-open .sidebar{ transform: translateX(0) }

  /* overlay pod sidebarom */
  .backdrop{
    position: fixed; inset: var(--hdr-h) 0 0 0;
    background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .2s; z-index: 3500;
  }
  body.sidebar-open .backdrop{ opacity:1; pointer-events:auto }

  /* popup na mobile nesmie mať fixné min-width 420px */
  .curlmap-popup .leaflet-popup-content-wrapper{
    min-width: auto !important;
    max-width: 92vw !important;
  }
}

/* väčšie tap hit-areas pre Leaflet zoom (dobrovoľné) */
.leaflet-control-zoom a{ width:36px; height:36px; line-height:36px; }

/* ===== View switch (segmented control) ===== */
.view-switch {
  margin-left:auto; display:flex; gap:6px;
  padding:4px; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; background:rgba(255,255,255,.06);
}
.vs-btn{
  border:0; background:transparent; color:var(--text);
  padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600;
  opacity:.8;
}
.vs-btn.is-active{ background:rgba(77,163,255,.22); opacity:1 }
.vs-desktop{ display:none }

@media (min-width: 901px){
  .vs-desktop{ display:inline-flex }
}

/* ===== Base grid pre všetky režimy ===== */
.app{
  display:grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: var(--hdr-h) 1fr;
  grid-template-areas:
    "header header"
    "feed   map";
  height:100vh; height:100dvh;
}

/* default (desktop split) – keď je body.view-split alebo veľký displej bez výberu */
body.view-split .app { /* nechaj default grid */ }

/* FEED režim – feed cez celú šírku, mapa schovať */
body.view-feed .app{
  grid-template-columns: 1fr;
  grid-template-rows: var(--hdr-h) 1fr;
  grid-template-areas:
    "header"
    "feed";
}
body.view-feed #map{ display:none }

/* MAP režim – mapa cez celú šírku, feed schovať */
body.view-map .app{
  grid-template-columns: 1fr;
  grid-template-rows: var(--hdr-h) 1fr;
  grid-template-areas:
    "header"
    "map";
}
body.view-map .feed{ display:none }

/* area priradenia */
header{ grid-area:header }
.feed{
  grid-area:feed; border-right:1px solid rgba(255,255,255,.06);
  background:var(--panel); padding:14px; overflow:auto;
}
#map{ grid-area:map; height:100%; width:100%; min-height:0 }

/* Mobile: default zobraz FEED, Split tlačidlo skryté */
@media (max-width: 900px){
  body:not(.view-map):not(.view-split) { /* fallback na feed */
    /* ak nič nevybrané, preferuj feed */
  }
  .app{
    grid-template-columns: 1fr;
    grid-template-rows: var(--hdr-h) 1fr;
    grid-template-areas: "header" "feed";
  }
  .vs-desktop{ display:none }
}

/* (ponechaj svoje existujúce Leaflet popup + karty + inputs štýly) */
/* ===== Stacked layout: mapa hore (100vh/100dvh), feed pod ňou ===== */
.app.stacked{
  display:block;
  height:auto; /* už žiadny fixný 100vh grid */
}

#mapSection{
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;  /* lepšie na mobiloch */
}
#map{
  position: absolute;
  inset: 0;         /* natiahni na celý #mapSection */
  width: auto;
  height: auto;
  min-height: 0;
  /* pre istotu zruš grid area, ak by niečo staré prebíjalo */
  grid-area: auto;
}

/* tlačidlo na preskočenie do feedu – pláva nad mapou */
.jump-btn{
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  border:1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color: var(--text);
  padding:10px 14px; border-radius:999px; cursor:pointer;
  backdrop-filter: blur(6px);
}
.jump-btn:hover{ border-color: var(--accent); }

/* feed sekcia pod mapou */
.feed{
  background: var(--panel);
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  overflow: visible; /* nech sa nič nereže */
}

/* voliteľné: header pevne hore pri skrolle (príjemný dojem appky) */
header{
  position: sticky; top: 0; z-index: 3000;
  backdrop-filter: blur(6px);
}

/* navigačné tlačidlo vo feede */
.feed-nav{
  display:flex; justify-content:center; margin: 16px 0 8px;
}
.back-btn{
  border:1px solid rgba(255,255,255,.2);
  background: transparent; color: var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer;
}
.back-btn:hover{ border-color: var(--accent); }

/* na malých šírkach nech popup nepýta 420px min-width */
@media (max-width: 900px){
  .curlmap-popup .leaflet-popup-content-wrapper{
    min-width: auto !important;
    max-width: 92vw !important;
  }
}