/* Header (fixed, centered) */
.logo-bar{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 14px; background:var(--bg-header);
  border-bottom:1px solid #333; z-index:1000;
}
.logo-wrap{display:flex; flex-direction:column; align-items:center; gap:2px}
.logo-wrap img{height:42px}
.logo-wrap h1{margin:2px 0 0; font-size:1.05rem; font-weight:800}
.logo-wrap small{color:var(--accent-yellow); opacity:.95; font-size:.8rem}

/* App layout below header */
#app{display:flex; height:100vh; min-height:0; padding-top:var(--header-h)}

/* Sidebar shows left slice of page gradient so “bright center” stays centered overall */
.sidebar{
  width:280px; min-width:50px; transition:width .25s ease;
  border-right:1px solid #333; display:flex; flex-direction:column;
  background: var(--bg-sidebar);
}
.sidebar.collapsed{width:50px}

/* Toggle button */
.toggle-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--accent-yellow); color:#000; padding:10px; font-weight:700;
  cursor:pointer; user-select:none; border:none; border-radius:0px; white-space:nowrap;
}
.toggle-btn .ico{font-size:1.1rem}
.toggle-btn .label{display:inline}
.sidebar.collapsed #toggle-label{display:none}

/* Tabs */
.tabs{display:flex; flex-direction:column;}
.tab{
  display:flex; gap:.6rem; align-items:center; padding:12px 16px;
  border:1px solid #333; border-radius:0px; background:var(--bg-sidebar); color:#eee; cursor:pointer;
}
.tab:hover,.tab.active{background:#3f3f3f}
.tab .ico{width:20px; text-align:center}

/* Collapse: keep icons only */
.sidebar.collapsed .tab{justify-content:center}
.sidebar.collapsed .tab .label{display:none}

/* Content & map */
.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #121212;
}

.view-container {
  flex: 1 1 auto;
  position: relative; /* only this one needed */
  min-height: 0;
}

/* Map */
#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Small screens */
@media (max-width: 820px){
  .logo-wrap h1{font-size:1rem}
  .logo-wrap small{font-size:.78rem}
  .tab-panel{max-height:55%}
}