/* ============================================
   Layouts - 레이아웃 + 사이드바
   순수 CSS (Tailwind @apply 사용하지 않음)
   네이밍: block_element.is_state (언더스코어)
   ============================================ */

/* ── Layout (전체 페이지 구조) ──────────────── */

.layout {
  display: flex;
  height: 100vh;
}

.dark .layout {
  background-color: var(--c-surface);
}

.dark .section {
  background-color: var(--c-surface-1);
}

.dark .sidebar_main {
  background-color: var(--c-surface-2);
}

.layout_sidebar {
  padding: 1.25rem;
  /* 20px */
}

.layout_content {
  flex: 1 1 0%;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.25rem 0;
  display: flex;
  flex-direction: column;
}

.layout_content_inner {
  width: 100%;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.layout_page_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  margin-top: 0.25rem;
}

.layout_page_title {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--c-text-1);
}

/* ── Sidebar (2단 사이드바) ─────────────────── */

.sidebar {
  display: flex;
  height: 100%;
  border-radius: var(--radius-2xl);
  position: relative;
}

/* ── Sidebar Main - 전체 사이드바 컨테이너 ───── */

.sidebar_main {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: var(--c-gray-100);
  padding: 1rem 1rem 1rem 0;
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition: padding var(--duration-fast) var(--ease-default);
}

.sidebar_main.is_collapsed {
  padding-right: 0;
}

/* ── Sidebar Icon - 좌측 아이콘 영역 (80px) ──── */

.sidebar_icon {
  width: 4rem;
  /* 80px */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.5rem;
}

/* 프로필 */
.sidebar_profile {
  margin-bottom: 2.3rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sidebar_profile_avatar {
  width: 2.5rem;
  /* 40px */
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-image: linear-gradient(to bottom right, var(--c-primary-400), var(--c-primary-600));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
}

/* DEV 환경: 아바타 주황 그라데이션 */
.is-dev .sidebar_profile_avatar {
  background-image: linear-gradient(to bottom right, #ed950f, #e14716);
  font-weight: 600;
  font-size: 1.125rem;
  box-shadow: var(--shadow-md);
}

/* 대메뉴 네비게이션 */
.sidebar_nav {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.sidebar_nav_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-radius: var(--radius-lg);
  color: var(--c-gray-600);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}

.sidebar_nav_item:hover {
  background-color: var(--c-bg-hover);
  color: var(--c-gray-800);
}

.sidebar_nav_item.is_active {
  background-color: var(--c-white);
  color: var(--c-primary-600);
}

.dark .sidebar_nav_item {
  color: var(--c-text-2);
}

.dark .sidebar_nav_item.is_active {
  background-color: var(--c-selected);
  color: var(--c-text-1);
}

.sidebar_nav_bar {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  /* 4px */
  height: 2rem;
  /* 32px */
  background-color: var(--c-primary-600);
  border-top-right-radius: var(--radius-full);
  border-bottom-right-radius: var(--radius-full);
}

.sidebar_nav_icon {
  width: 1.25rem;
  /* 20px */
  height: 1.25rem;
}

.sidebar_nav_label {
  font-size: 12px;
  font-weight: 500;
}

/* ── Sidebar Footer - 하단 컨트롤 ──────────── */

.sidebar_footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
  padding-bottom: 0.5rem;
}

.sidebar_footer_btn {
  width: 3rem;
  /* 48px */
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--c-gray-500);
  transition: color var(--duration-fast) var(--ease-default),
    background-color var(--duration-fast) var(--ease-default);
}

.sidebar_footer_btn:hover {
  background-color: var(--c-bg-hover);
  color: var(--c-gray-700);
}

.sidebar_footer_btn.is_danger {
  color: var(--c-gray-500);
}

.sidebar_footer_btn.is_danger:hover {
  color: var(--c-gray-700);
}

.sidebar_footer_icon {
  width: 1.25rem;
  /* 20px */
  height: 1.25rem;
}

.dark .sidebar_footer_btn {
  color: var(--c-text-3);
}

/* ── Sidebar Sub - 우측 서브메뉴 (280px) ───── */

.sidebar_sub {
  width: 14rem;
  /* 288px = w-72 */
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  transition: width 200ms var(--ease-default);
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.dark .sidebar_sub {
  background-color: var(--c-surface);
}

.sidebar_sub.is_collapsed {
  width: 0;
}

.sidebar_sub.no_transition {
  transition: none;
}

/* ── Sidebar Sub Toggle - 접기/펼치기 버튼 ──── */

.sidebar_sub_toggle {
  position: absolute;
  top: 4.5rem;
  right: 0;
  translate: -15% 0;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--c-input-border);
  background-color: var(--c-white);
  cursor: pointer;
  color: var(--c-gray-500);
  transition: all var(--duration-fast) var(--ease-default);
  z-index: 20;
}

.sidebar.is_collapsed .sidebar_sub_toggle {
  translate: 50% 0;
}

.dark .sidebar_sub_toggle {
  background-color: var(--c-surface);
}

.sidebar_sub_toggle_icon {
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 200ms var(--ease-default);
}

.sidebar_sub_toggle_icon.is_collapsed {
  transform: rotate(180deg);
}

/* 검색 */
.sidebar_search {
  padding: 0.5rem;
}

.sidebar_search_wrap {
  position: relative;
}

.sidebar_search_icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--c-gray-400);
}

.dark .sidebar_search_icon {
  color: var(--c-text-2);
}

.sidebar_search_input {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
}

.dark .sidebar_search_input {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  color: var(--c-text-2);
}

.sidebar_search_clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-gray-400);
  padding: 0;
}

.sidebar_search_clear:hover {
  color: var(--c-gray-600);
}

/* ── Sidebar Menu ──────────────────────────── */

.sidebar_menu {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.8rem 0.5rem 0.5rem 0.5rem;
}

.sidebar_menu_title {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--c-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.dark .sidebar_menu_title {
  color: var(--c-text-3);
}

.sidebar_menu_list>*+* {
  margin-top: 0.25rem;
}

.sidebar_menu_toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--c-gray-700);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.sidebar_menu_toggle:hover {
  background-color: var(--c-bg-hover);
}

.dark .sidebar_menu_toggle {
  color: var(--c-text-1);
}

.sidebar_menu_arrow {
  width: 1rem;
  height: 1rem;
  transition: transform var(--duration-fast) var(--ease-default);
}

.sidebar_menu_arrow.is_open {
  transform: rotate(180deg);
}

.sidebar_menu_link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--c-gray-700);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.sidebar_menu_link:hover {
  background-color: var(--c-bg-hover);
}

.sidebar_menu_link.is_active {
  background-color: var(--c-primary-50);
  color: var(--c-primary-700);
}

.dark .sidebar_menu_link {
  color: var(--c-text-1);
}

.sidebar_menu_children {
  margin-left: 1rem;
  margin-top: 0.25rem;
}

.sidebar_menu_children>*+* {
  margin-top: 0.25rem;
}

.sidebar_menu_child {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-gray-600);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.sidebar_menu_child:hover {
  background-color: var(--c-bg-hover);
}

.dark .sidebar_menu_child {
  color: var(--c-text-2);
}

.sidebar_menu_child.is_active {
  background-color: var(--c-primary-100);
  color: var(--c-gray-900);
  font-weight: 500;
}

.sidebar_menu_empty {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-gray-400);
  margin-top: 2rem;
}

.dark .sidebar_menu_empty {
  color: var(--c-text-3);
}

/* ── Page Body (탭/필터 아래 메인 테이블 콘텐츠 공통) ── */

.page_body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-top: 0;
  overflow-y: hidden;
}

.page_body .dtable_card {
  flex: 1 1 0%;
  min-height: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.page_body .dtable_footer {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.page_body .dtable_thead_row .dtable_th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--c-gray-100);
}

.dark .page_body .dtable_thead_row .dtable_th {
  background-color: var(--c-surface-2);
}

/* ── Hotel Search Bar (호텔 검색/선택 바) ───── */

.hotel_search_bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background-color: var(--c-gray-100);
  border-radius: var(--radius-xl);
  margin-bottom: 1.25rem;
}

.dark .hotel_search_bar {
  background-color: var(--c-surface-2);
  border-color: var(--c-border);
}

.hotel_search_bar_filters {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.hotel_search_bar_filters .cselect {
  min-width: 7.5rem;
}

.hotel_search_bar_select {
  flex: 1 1 0%;
  min-width: 0;
}

.hotel_search_bar_count {
  font-size: 0.75rem;
  color: var(--c-gray-500);
  white-space: nowrap;
}

.hotel_search_bar_icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--c-gray-500);
}

.dark .hotel_search_bar_icon {
  color: var(--c-text-2);
}

.hotel_search_bar .cselect_option .status_dot {
  display: inline-block;
  margin-top: 0;
  margin-right: 0.5rem;
  width: 8px;
  height: 8px;
}