/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles defined in a CSS file can be used in multiple HTML files by
 * linking to it in your application.html.erb file.
 */

/* Custom utility classes for the study room app */
.h-screen-minus-header {
  height: calc(100vh - 140px);
  min-height: 500px;
}

/* 홈 페이지 메인 컨텐츠 높이 */
.home-main-content {
  min-height: 600px;
  /* 최소 높이 설정 */
  max-height: calc(100vh - 64px);
  /* header와 footer 공간 확보 */
}

.home-content-body {
  height: calc(100vh - 64px - 73px);
  /* header - footer - 검색바 */
  min-height: 500px;
}

.study-room-card {
  transition: var(--transition-all) var(--transition-base) var(--ease-in-out);
}

.study-room-card:hover {
  transform: var(--button-transform-hover);
  box-shadow: var(--shadow-card-hover);
}

.study-room-card.selected {
  border-color: var(--color-border-selected);
  background-color: var(--color-bg-selected);
}

.form-checkbox {
  appearance: none;
  background-color: var(--color-bg-primary);
  border: var(--checkbox-border-width) solid var(--color-border-medium);
  border-radius: var(--checkbox-border-radius);
  color: var(--color-primary-500);
  display: inline-block;
  flex-shrink: 0;
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  cursor: pointer;
  transition: var(--transition-all) var(--transition-base) var(--ease-in-out);
}

.form-checkbox:checked {
  background-color: currentColor;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.form-checkbox:focus {
  outline: var(--input-focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--input-focus-ring-offset);
}

/* Loading animation */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mobile-transition {
  transition: var(--transition-all) var(--transition-slow) var(--ease-in-out);
}

/* Map container styles */
.map-container {
  position: relative;
  overflow: hidden;
}

.custom-scrollbar::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-border-radius);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .h-screen-minus-header {
    height: calc(100vh - 160px);
  }

  .home-main-content {
    min-height: 100svh;
    max-height: none;
  }

  .home-content-body {
    height: calc(100svh - 64px - 73px);
    min-height: 0;
    overflow: hidden;
  }

  .study-room-list {
    flex: 1 1 auto;
    min-height: 0;
  }

  .study-room-list .custom-scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .study-room-map {
    flex: 0 0 40svh;
    height: 40svh;
    min-height: 240px;
  }

  .mobile-hidden {
    display: none !important;
  }

  .mobile-full-height {
    height: calc(100vh - 120px);
  }

  /* 모바일에서 "현 지도에서 검색" 버튼 위치 */
  .search-in-area-button {
    bottom: 20px !important;
  }
}

/* 데스크탑에서 "현 지도에서 검색" 버튼 위치 */
.search-in-area-button {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  z-index: 100;
}

/* Status indicators */
.status-indicator {
  position: relative;
  display: inline-block;
}

.status-indicator::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}

.status-indicator.open::before {
  background-color: var(--color-open);
  animation: pulse 2s infinite;
}

.status-indicator.closed::before {
  background-color: var(--color-closed);
}

.filter-panel {
  transition: max-height var(--transition-slow) var(--ease-in-out), opacity var(--transition-slow) var(--ease-in-out);
  overflow: hidden;
}

.filter-panel.hidden {
  max-height: 0;
  opacity: 0;
}

.filter-panel:not(.hidden) {
  max-height: 1000px;
  opacity: 1;
}

.btn-hover:hover {
  transform: var(--button-transform-hover);
  box-shadow: var(--shadow-button-hover);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding-y) var(--badge-padding-x);
  border-radius: var(--badge-border-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
}

.badge-green {
  background-color: var(--badge-green-bg);
  color: var(--badge-green-text);
}

.badge-blue {
  background-color: var(--badge-blue-bg);
  color: var(--badge-blue-text);
}

.badge-gray {
  background-color: var(--badge-gray-bg);
  color: var(--badge-gray-text);
}

.price-tag {
  background: linear-gradient(var(--gradient-price-angle), var(--gradient-price-start), var(--gradient-price-end));
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  padding: 0.125rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.distance-badge {
  background: linear-gradient(var(--gradient-distance-angle), var(--gradient-distance-start), var(--gradient-distance-end));
  color: var(--color-text-inverse);
  border-radius: var(--radius-full);
  padding: var(--badge-padding-y) 0.75rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}