/* ===== Ballast UI hotfix: map height + hub select ===== */

/* 전체 높이 기준을 확실히 잡아준다 */
html, body { height: 100%; }
body { min-height: 100vh; }

/* 지도 컨테이너 폭 */
#map,
.leaflet-container {
  width: 100%;
}

/* 지도 영역이 아래로 더 확장되게: 상단 헤더 높이 */
:root { --topbar-h: 92px; }

/* ===== Smooth focus layout (sidebar expands, map shrinks) ===== */
/* default sidebar width */
:root{
  /* 기본값이 너무 좁으면 글자가 찢어져 보이므로 넉넉하게 */
  --sideW: clamp(420px, 50vw, 760px);
  --sideWFocus: clamp(520px, 56vw, 900px);
}

/* 중간 해상도에서는 조금만 줄여준다 */
@media (max-width: 1100px){
  :root{ --sideW: clamp(380px, 52vw, 700px); --sideWFocus: clamp(460px, 60vw, 820px); }
}

/* 모바일/세로 화면에서는 패널이 읽히게 최소 폭 보장 */
@media (max-width: 720px){
  :root{ --sideW: 92vw; --sideWFocus: 92vw; }
}

/* Animate width changes */
.mapShell{
  transition: padding .18s ease;
}

/* Keep 2-column layout in landscape phones/tablets too */
@media (pointer: coarse) and (min-width: 720px){
  .mapShell{ grid-template-columns: auto 1fr !important; height: calc(100vh - var(--topbar-h)) !important; }
}

/* Let sidebar define first column width */
.mapShell{ grid-template-columns: auto 1fr; }
.side{ width: var(--sideW); transition: width .22s ease; }

/* When selecting nodes, widen sidebar */
body.sideFocus .side{ width: var(--sideWFocus); }

/* Typography polish (readability on narrow side panels) */
.side{ font-size: 14px; line-height: 1.35; }
.side .sectionTitle{ margin-top: 12px; }
.side .sectionTitle .title{ font-size: 13.5px; letter-spacing: .2px; }
.side .small, .side .muted{ font-size: 12.5px; }

/* Stats rows: prevent ultra-skinny multi-column look */
@media (max-width: 520px){
  .kv.kvList .row{ grid-template-columns: 1fr !important; gap: 6px; }
}

/* 1) map 자체가 꽉 차게 */
#map {
  height: calc(100vh - var(--topbar-h)) !important;
  min-height: 520px;
  border-radius: 18px;
}

/* 2) map을 감싸는 카드/패널이 있다면 그쪽도 꽉 차게 */
.mapWrap, .map-wrap, .mapPanel, .map-panel, .mapCard, .map-card {
  height: calc(100vh - var(--topbar-h)) !important;
  min-height: 520px;
}

/* 3) 레이아웃이 flex일 때 지도 칸이 늘어나게 */
.main, .content, .layout, .grid, .appMain, .app-main {
  align-items: stretch;
}

/* ===== 허브(셀렉트/입력) 깨짐 방지 ===== */
select, input[type="text"], input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,16,24,.55);
  color: rgba(255,255,255,.92);
  outline: none;
  line-height: 1.2;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

option { background: #0b0f18; color: #e8eefc; }

.hubRow, .hub-row, .row {
  gap: 10px;
}

.sidebar, .side, .leftPane, .left-pane, .panel, .pane {
  overflow: auto;
}



/* ===== Sidebar icon rail (bigger / less cramped) ===== */
.side{
  display:flex;
  gap: 12px;
}
.iconRail{
  width: 56px;
  flex: 0 0 56px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,12,20,.35);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.railBtn{
  height: 44px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(12,16,26,.35);
  color: rgba(255,255,255,.9);
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  font-size: 18px;
  line-height: 1;
}
.railBtn:hover{ transform: translateY(-1px); border-color: rgba(160,190,255,.30); background: rgba(18,22,34,.45); }
.railBtn.active{ border-color: rgba(160,190,255,.55); background: rgba(25,36,60,.35); }
.railSep{ height: 1px; background: rgba(255,255,255,.10); margin: 6px 0; }
.sidePanel{ flex: 1 1 auto; }
.side.collapsed .sidePanel{ display:none; }
.side.collapsed .iconRail{ width: 64px; flex-basis: 64px; }
.side.collapsed{ width: 76px !important; overflow: visible; }
.side.collapsed .railBtn#railToggle{ transform: rotate(180deg); }
.side:not(.collapsed) .railBtn#railToggle{ }
.sidePanel.hidden{ display:none; }

/* bigger form controls for comfort */
.side input[type="text"], .side input[type="number"], .side select, .side textarea{
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 14px;
}
.side .btn{ padding: 12px 14px; border-radius: 14px; }
.side .small{ font-size: 12.5px; }