/* App shell: fixed chrome (topbar / statusbar), map fills the rest, right panel. */
.app {
  display: grid; height: 100dvh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
}
.topbar {
  display: flex; align-items: center; gap: calc(var(--s) * 2);
  padding: 0 calc(var(--s) * 2); height: 56px;
  background: var(--bg-1); border-bottom: 1px solid var(--line);
  z-index: 1200;
}
.topbar .logo { display: flex; align-items: center; gap: var(--s); font-size: var(--f-md); font-weight: 700; white-space: nowrap; }
.topbar .logo svg { width: 22px; height: 22px; color: var(--accent); }
.main { display: flex; min-height: 0; position: relative; }
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--bg-0); }
/* tiles unavailable → dark base, overlays still visible */
#map.no-tiles { background: radial-gradient(1200px 700px at 50% 40%, #161a21, #0d0f13 75%); }
.panel {
  width: 380px; flex: 0 0 380px; background: var(--bg-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; z-index: 1100;
}
.panel-scroll { overflow-y: auto; padding: calc(var(--s) * 2); display: flex; flex-direction: column; gap: calc(var(--s) * 2); scrollbar-width: thin; }
.statusbar {
  display: flex; align-items: center; gap: calc(var(--s) * 2); height: 34px;
  padding: 0 calc(var(--s) * 2); background: var(--bg-1); border-top: 1px solid var(--line);
  font-size: var(--f-xs); color: var(--tx-1); z-index: 1200;
}
.statusbar .sep { width: 1px; height: 14px; background: var(--line); }
.statusbar .grow { flex: 1; }

/* Mobile: panel becomes a bottom sheet toggled by a button */
.panel-toggle { display: none; }
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; min-height: 56px; padding: var(--s) calc(var(--s) * 1.5); gap: var(--s); }
  .topbar .lbl-country { display: none; }
  .main { flex-direction: column; }
  .topbar .search-box { order: 5; flex: 1 1 100%; max-width: none; }
  #country { order: 6; flex: 0 0 auto; max-width: 45%; }
  .legend-box { display: none; }
  /* timeline a behúzott panel-nyitó (44px) fölé kerül */
  .timeline { bottom: 58px; }
  /* zoom-kezelő a lapozósáv fölé; státuszsáv: egy sor, nowrap */
  .leaflet-bottom.leaflet-right .leaflet-control-zoom { margin-bottom: 52px; }
  .statusbar { white-space: nowrap; overflow: hidden; }
  .statusbar .hide-mobile { display: none; }
  .statusbar #sb-info { overflow: hidden; text-overflow: ellipsis; }
  .topbar .seg { order: 7; flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; min-width: 0; }
  .topbar .seg button { flex: 0 0 auto; padding: 6px 9px; }
  .panel {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; flex: none;
    max-height: 62dvh; border-left: none; border-top: 1px solid var(--line);
    border-radius: var(--r) var(--r) 0 0; box-shadow: var(--shadow-2);
    transform: translateY(calc(100% - 44px)); transition: transform .25s ease-out;
  }
  .panel.open { transform: translateY(0); }
  .panel-toggle {
    display: flex; align-items: center; justify-content: center; gap: var(--s);
    height: 44px; flex: none; background: var(--bg-2); border: none;
    border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0;
    font-weight: 600; width: 100%;
  }
}