/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Global Scrollbar (Dark Mode) */
::-webkit-scrollbar {
  width: 10px;   /* 수직 스크롤바 너비 */
  height: 10px;  /* 수평 스크롤바 높이 */
}

::-webkit-scrollbar-track {
  background: #1e293b; /* slate-800 */
}

::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 */
  border-radius: 5px;
  border: 2px solid #1e293b; /* 트랙과 동일한 색상으로 여백 */
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 */
}

/* Dark theme autofill override
   Chrome은 :-webkit-autofill 선택 시 흰 배경을 강제 적용함.
   box-shadow inset 트릭으로 배경을 덮어 다크 테마를 유지함. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important; /* slate-950 */
  -webkit-text-fill-color: #e2e8f0 !important;               /* slate-200 */
  caret-color: #e2e8f0;
  transition: background-color 0s 9999s; /* 배경 전환 지연으로 깜빡임 방지 */
}

/* Custom Scrollbar (for specific elements like dropdowns) */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;   /* 수직 스크롤바 너비 (드롭다운용 - 얇게) */
  height: 6px;  /* 수평 스크롤바 높이 */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e293b; /* slate-800 (메인 스크롤바와 동일) */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 (메인 스크롤바와 동일) */
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 (메인 스크롤바와 동일) */
}

/* Property Item: 호버 / 선택 상태 */
[data-property-item] {
  transition: background-color 150ms ease, border-left-color 150ms ease;
  border-left: 3px solid transparent;
}

[data-property-item]:hover {
  background-color: rgb(30 41 59 / 0.6); /* slate-800/60 */
}

[data-property-item].property-selected {
  background-color: rgb(30 41 59 / 0.8); /* slate-800/80 */
  border-left-color: #22c55e; /* green-500 */
}

[data-property-item].property-selected:hover {
  background-color: rgb(30 41 59 / 0.9);
}

[data-property-item].property-selected [data-property-trigger] {
  background-color: rgb(51 65 85 / 0.5); /* slate-700/50 — 헤더 강조 */
}

/* Building/Land Item: 호버 / 선택 상태 */
[data-building-item] {
  transition: background-color 150ms ease, border-left-color 150ms ease;
  border-left: 3px solid transparent;
}

[data-building-item] [data-building-trigger] {
  transition: background-color 150ms ease;
}

[data-building-item] [data-building-trigger]:hover {
  background-color: rgb(30 41 59 / 0.6); /* slate-800/60 */
}

[data-building-item].building-selected {
  background-color: rgb(30 41 59 / 0.8);
  border-left-color: #3b82f6; /* blue-500 */
}

[data-building-item].building-selected [data-building-trigger] {
  background-color: rgb(51 65 85 / 0.5); /* slate-700/50 — 헤더 강조 */
}

[data-building-item].building-selected [data-building-trigger]:hover {
  background-color: rgb(51 65 85 / 0.65);
}

/* Custom Cluster Marker */
.custom-cluster-marker:hover {
  transform: scale(1.1) !important;
  background: rgb(37, 99, 235) !important; /* blue-600 */
}

/* Mobile Header Hide/Show Animation */
.mobile-header {
  transition: transform 300ms ease-in-out;
}

.mobile-header.header-hidden-up {
  transform: translateY(-100%) !important;
}

/* Gradient Spinner (Loading Animation) */
.gradient-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #60a5fa 70%, transparent 100%);
  animation: gradient-spin 0.8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}

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

/* Turbo Frame 로딩 오버레이 */
turbo-frame[aria-busy="true"] {
  display: block;
  position: relative;
  min-height: 100px;
  pointer-events: none;
}

turbo-frame[aria-busy="true"] > * {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

/* 건축물대장 검색: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#br-search-results[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

/* 건축물대장 상세: 로딩 중 기존 내용 완전히 숨김 */
turbo-frame#br-detail-content[aria-busy="true"] > * {
  opacity: 0;
  visibility: hidden;
}

turbo-frame[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, #60a5fa 70%, transparent 100%);
  animation: gradient-spin 0.8s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  z-index: 10;
}