/* ============================================================
   시스템 코드 관리 (Codes)
   - 좌측 그룹 패널은 공용 oa_aside_*(객실관리와 동일)를 재사용하고,
     우측은 dtable_*/
btn_*/modal_* 공용 클래스를 사용한다. - 이 파일에는 코드관리 고유 레이아웃/요소만 정의한다.============================================================*/

/* 레이아웃: room_page(rooms.css, 좌우 flex)를 재사용하고 간격만 추가.
   display:flex/height는 room_page가 담당 → codes.css 미로드 시에도 좌우 배치 보장 */
.code_page {
  gap: 1rem;
}

/* ── 좌측 그룹 패널 ─────────────────────────── */

/* 그룹명 검색 (aside 폭 꽉 채움) */
.code_aside_search {
  position: relative;
  flex-shrink: 0;
}

.code_aside_search_icon {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: var(--c-gray-400);
  pointer-events: none;
}

.code_aside_search_input {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.75rem 0 2.125rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.code_aside_search_input:focus {
  border-color: var(--c-primary-500);
}

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

/* 섹션 아코디언 헤더 (클릭으로 펼침/접힘, single-open) */
.code_aside_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.125rem;
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-gray-500);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.code_aside_section:hover {
  background-color: var(--c-gray-50);
}

.dark .code_aside_section:hover {
  background-color: var(--c-gray-200);
}

/* 섹션 셰브론 (펼침 시 90도 회전) */
.code_aside_chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--c-gray-400);
  transition: transform var(--duration-fast) var(--ease-default);
}

.code_aside_chevron.is_open {
  transform: rotate(90deg);
}

/* 그룹명 옆 시스템 태그 */
.code_aside_sys {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 500;
  color: #fff;
  background-color: var(--c-primary-500);
  padding: 0.0625rem 0.3125rem;
  border-radius: var(--radius-sm);
}

/* 그룹명 + 시스템 태그 묶음 (이름 바로 옆 배치) */
.code_aside_name_box {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.code_aside_name_box .oa_aside_item_name {
  flex: 0 1 auto;
  min-width: 0;
}

/* 그룹 추가 버튼 (aside 하단 고정) */
.code_aside_add_btn {
  width: 100%;
  flex-shrink: 0;
}

/* ── 그룹 미선택 빈 화면 (배경/보더 없이 중앙 텍스트만 — room_no_hotel 재사용) ── */
.code_empty {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   우측 코드 상세 (hotel_detail 영역)
   ============================================================ */

/* ── 헤더 (hotel_detail_top 재사용): 제목 + 영문코드 + 시스템 태그 ── */
.code_detail_title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-text-1);
}

.code_detail_code {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-gray-100);
  color: var(--c-gray-500);
}

.dark .code_detail_code {
  background-color: var(--c-gray-300);
}

.code_detail_sys {
  font-size: 0.75rem;
  /* .code_detail_code와 동일 크기 */
  font-weight: 400;
  /* .code_detail_code와 동일 */
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  color: #fff;
  background-color: var(--c-primary-500);
}

/* ── 바디 (필터 + 테이블) ── */
.code_body {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 0 1.5rem 1.5rem;
}

/* 테이블 카드가 바디 높이를 채우고 내부만 스크롤 (배경/보더 없음) */
.code_body .dtable_card {
  flex: 1 1 0%;
  min-height: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.dark .code_body .dtable_card {
  background-color: transparent;
}

/* thead 고정 (page_body 밖이라 직접 지정) */
.code_body .dtable_thead_row .dtable_th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--c-gray-100);
}

.dark .code_body .dtable_thead_row .dtable_th {
  background-color: var(--c-dark-card-alt);
}

/* 단일 클릭이 아닌 더블클릭 편집 방식 → 포인터 커서·호버 배경 제거 */
.code_body .dtable_row.is_click {
  cursor: default;
}

.code_body .dtable_row.is_click:hover {
  background-color: transparent;
}

/* 편집 모드 전환 시에도 행 높이 고정:
   셀 높이를 고정하고 내용(텍스트/입력칸)을 수직 중앙 정렬 → 보기/편집 동일 높이 */
.code_body .dtable_td {
  height: 3.5rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── 필터 바 (rsv_filter 느낌) ── */
.code_filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.code_filter_search {
  position: relative;
  flex: 0 1 auto;
  width: 16rem;
}

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

.code_filter_input {
  width: 100%;
  height: 2.375rem;
  padding: 0 1rem 0 2.5rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.code_filter_input:focus {
  border-color: var(--c-primary-500);
}

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

.code_filter .cselect {
  min-width: 8rem;
}

.code_filter .cselect_trigger {
  height: 2.375rem;
}

.code_filter_right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


/* ── 일괄 상태 변경 드롭다운 ── */
.code_bulk {
  position: relative;
}

.code_bulk_menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  width: 8rem;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dark .code_bulk_menu {
  background-color: var(--c-gray-100);
  border-color: var(--c-gray-300);
}

.code_bulk_item {
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--c-text-1);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
}

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

/* ── 테이블 셀 요소 ── */
/* 상태 토글 배지 (dtable_badge 확장) */
.code_status_btn {
  border: none;
  cursor: pointer;
}

.dtable_badge.is_off {
  background-color: var(--c-gray-500);
  color: #fff;
}

/* 부가정보 */
.code_sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.code_sub_img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-line);
}

.code_sub_text {
  display: inline-block;
  max-width: 200px;
  font-size: 0.875rem;
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.code_sub_empty {
  font-size: 0.75rem;
  color: var(--c-gray-400);
}

/* 인라인 편집 */
.dtable_row.is_editing {
  background-color: var(--c-primary-50);
}

.dark .dtable_row.is_editing {
  background-color: rgba(47, 148, 136, 0.1);
}

.code_inline_input {
  width: 100%;
  height: 2.7rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-lg);
  background-color: #fff;
  color: var(--c-text-1);
  outline: none;
}

.code_inline_input:focus {
  border-color: var(--c-primary-400);
}

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

.code_inline_sub {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.code_img_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--c-primary-500);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.code_img_btn:hover {
  background-color: var(--c-primary-50);
}

/* 편집 저장/취소 아이콘 (박스형 체크/X, 살짝 크게) */
.code_action_icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* ── 바디 하단 그룹 액션 (그룹 수정/삭제) ── */
.code_group_actions {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0;
}