:root {
  --ink: #393939;
  --muted: #777;
  --brand: #2679b5;
  --line: #ccc;
  --selected: #629B58;
}

.svg-container-wrapper * {
  box-sizing: border-box;
}

.dormitory-picker-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.dormitory-picker-list,
.dormitory-picker-map {
  /* Grid item mặc định có min-width:auto (theo nội dung), ép về 0 để không đẩy tràn ngang */
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 992px) {
  .dormitory-picker-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  }
}

@media (max-width: 991px) {
  /* Ghim phần tử cha để sticky không bị giới hạn bởi chiều cao của hàng bộ lọc.
     Bản đồ vẫn hiện trước danh sách phòng nhưng cuộn bình thường. */
  .search-filters-row {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #fff;
    padding-top: 4px;
  }

  .dormitory-picker-map {
    order: -1;
    position: static;
  }

  #search-block-room {
    position: static;
  }

  #FloorTab {
    position: sticky;
    top: 0; /* JS ghi đè bằng chiều cao thực tế của hàng bộ lọc. */
    z-index: 20;
    background: #fff;
  }

  /* Card đã có ở khối lọc phía trên, không cần lặp lại giữa bản đồ trên mobile.
     !important vì JS đặt display:block trực tiếp qua inline style (statusCard.style.display),
     và inline style luôn thắng rule thường trong stylesheet. */
  .map-status-card {
    display: none !important;
  }

  /* Bỏ padding quanh khung bản đồ để tận dụng tối đa bề rộng màn hình nhỏ */
  .svg-container-wrapper .main-panel {
    padding: 0 !important;
  }

  /* Card phòng đã rút gọn không còn icon từng chỗ, không cần chú thích màu nữa */
  .room-legend {
    display: none;
  }
}

.map-status-card {
  padding: 8px 12px;
  margin-bottom: 10px;
}

.map-status-title {
  font-weight: 700;
  color: var(--brand);
  font-size: 14px;
}

.map-status-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.map-status-hotline {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.svg-container-wrapper .glass {
  background: #fff;
  border: 1px solid var(--line);
}

.svg-container-wrapper .layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.svg-container-wrapper .main-panel {
  padding: 12px;
  max-width: 100%;
  margin: 3px;
}

.svg-container-wrapper .svg-viewport {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line);
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.svg-container-wrapper .loading {
  font-weight: 600;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 10px;
}

.svg-container-wrapper .loading::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 3px solid rgba(38, 121, 181, 0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.map-stage {
  position: relative;
  overflow: hidden;
}

.map-bg-image {
  position: absolute;
  transform-origin: center center;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.map-svg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-svg-layer svg {
  display: block;
  width: 100%;
  height: 100%;
}

#loaded-svg path,
#loaded-svg polygon,
#loaded-svg rect,
#loaded-svg circle,
#loaded-svg ellipse {
  cursor: pointer;
  transition: all 0.2s ease-out;
}