@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./reset.css";


:root {
  --sidebar-width: 200px;
  --window-min-width: 1200px;
  --main-min-width: calc(var(--window-min-width) - var(--sidebar-width));
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  background: var(--bgDark);
}

* {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  scrollbar-width: thin;
  scrollbar-color: var(--borderColor) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--borderColor);
  border-radius: 2px;
}

.hidden {
  display: none !important;
}

.pagination {
  display: flex;
}

ul {
  list-style: none;
  padding: 0;
}

.app-shell {
  width: 100%;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  overflow: hidden;
}

.main-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.app-header {
  width: calc(100vw - var(--sidebar-width));
  min-width: 0;
  max-width: 100%;
  left: 0;
  flex-shrink: 0;
}

.app-container,
.main-container>.page-container {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: calc(100vh - 64px);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.app-container {
  padding: 0;
  gap: 0;
}

.title-description-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.container-main {
  padding: 24px 24px;
}

.section-title {
  font-size: var(--font-hd-20);
  font-weight: 700;
  padding-bottom: 16px;
}

.title-description-container .section-title {
  padding-bottom: 0px !important;
}

.section-description {
  font-size: var(--font-bd-14);
  color: var(--muted);
  margin: 0;
}

.txt-label {
  color: var(--white);
  font-size: var(--font-bd-12);
  font-weight: 400;
}

/* lnb-map layout */
.lnb-map-layout {
  display: grid;
  grid-template-columns: var(--lnb-width, 460px) minmax(0, 1fr);
  gap: 0;
  height: calc(100vh - 64px);
  width: 100%;
  min-width: var(--main-min-width);
  padding: 0;
  background: var(--bgDark);
  overflow: hidden;
}

.lnb-map-lnb {
  width: var(--lnb-width, 460px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--padding-16);
  padding: var(--padding-16);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bgDark);
  box-sizing: border-box;
}

.lnb-list-aside {
  display: flex;
  flex-direction: column;
  background: var(--bgDark);
  overflow: hidden;
  /* padding: var(--padding-20) var(--padding-20) 0 !important; */
  padding: var(--padding-20) 0 0 !important;
  gap: 0 !important;
}

.lnb-list-aside .lnb-list-aside-header {
  margin-bottom: var(--padding-24) !important;
  font-size: var(--font-hd-18);
  font-weight: 700;
  color: var(--white);
}

.lnb-list-aside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--padding-20);
}

.lnb-list-aside-title {
  display: flex;
  gap: 12px;
}

.lnb-map-lnb::-webkit-scrollbar {
  width: 4px;
}

.lnb-map-lnb::-webkit-scrollbar-track {
  background: transparent;
}

.lnb-map-lnb::-webkit-scrollbar-thumb {
  background: var(--borderColor);
  border-radius: 2px;
}

.lnb-map-map {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}



/* 지도 영역 - 추후 삭제(droneRoute, droneSystem 에서 사용)*/
.map-container {
  flex: 1;
  position: relative;
  background: var(--dark-950);
  overflow: hidden;
}

.map-wrapper {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
  position: relative;
  z-index: 1;
}

/* 범례 */
.map-legend {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(16, 24, 40, 0.9);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-4);
  padding: 12px 16px;
  min-width: 120px;
  z-index: 10;
}

.legend-title {
  font-size: var(--font-bd-12);
  color: #d1d5dc;
  margin: 0 0 12px 0;
  font-weight: 400;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-bd-12);
  color: var(--text);
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-50);
  flex-shrink: 0;
}

.legend-dot-green {
  background: var(--green-600);
}

.legend-dot-orange {
  background: var(--orange-500);
}

.legend-dot-red {
  background: var(--red-500);
}

.legend-dot-blue {
  background: var(--blue-600);
}

.legend-dot-gray {
  background: #5e6573;
}

.legend-icon {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legend-icon-green {
  background: var(--green-500);
  color: #232529;
}

.legend-icon-red {
  background: var(--red-500);
  color: var(--text);
}

.legend-line {
  width: 12px;
  height: 2px;
  background: #d9d9d9;
  flex-shrink: 0;
}

.legend-line-blue {
  background: var(--blue-600);
}

/* 지도 컨트롤 */
.map-controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10;
}

.map-control-btn {
  width: 36px;
  height: 36px;
  background: var(--white);
  border: none;
  border-radius: var(--radius-8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #232529;
}

.map-control-btn:hover {
  background: #f3f4f6;
  transform: scale(1.05);
}

.map-control-btn:active {
  transform: scale(0.95);
}

/* 지도 스케일 */
.map-scale {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(16, 24, 40, 0.9);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-4);
  padding: 6px 12px;
  font-size: var(--font-bd-12);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

/* 지도 pin */
.pin.bg-green-500 {
  background-color: var(--green-500);
  --pin-color: var(--green-600);
}

.pin.bg-blue-500 {
  background-color: var(--blue-500);
  --pin-color: var(--blue-600);
}

.pin.bg-orange-500 {
  background-color: var(--orange-500);
  --pin-color: var(--orange-600);
}

.pin.bg-red-500 {
  background-color: var(--red-500);
  --pin-color: var(--red-600);
}

/* Fixed horizontal scroll utility */
.scroll-frame {
  --scroll-frame-scrollbar-size: 8px;
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-bottom: var(--scroll-frame-scrollbar-size);
}

.scroll-frame>.scroll-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: auto;
  scrollbar-width: none;
}

.scroll-frame>.scroll-content::-webkit-scrollbar {
  display: none;
}

.scroll-frame-scrollbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--scroll-frame-scrollbar-size);
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 5;
}

.scroll-frame-scrollbar-inner {
  height: 1px;
}

.scroll-frame:not(.has-horizontal-scroll) {
  padding-bottom: 0;
}

.scroll-frame:not(.has-horizontal-scroll) .scroll-frame-scrollbar {
  display: none;
}