/**************************************************** 기본 설정 관련 ****************************************************/

/* 상단 로딩바 미표시 */
.pace {
  display: none !important;
}

/* Noto_Sans 폰트 */
body {
  font-family: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 색상 변수 */
:root {
  --bluemap-hover-bg-color: rgba(59, 104, 161, 0.1);
  --bluemap-hover-bg-color-yellow: #feffeb8c;
  --bluemap-hover-bg-sky: rgb(225 235 245 / 38%);
  --bluemap-header-bg-color: rgb(235 241 251);
}

/* 템플릿 색상 */
:root .theme-bluemap {
  --bs-theme: #00558c !important;
  --bs-theme-rgb: 0, 85, 140 !important;
  --bs-theme-color: #ffffff !important;
  --bs-theme-color-rgb: 255, 255, 255 !important;
}

/* 버튼 - BLUEMAP 색상 */
.btn-bluemap {
  --bs-btn-color: #00558c;
  --bs-btn-border-color: #00558c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #00558c;
  --bs-btn-hover-border-color: #00558c;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #00558c;
  --bs-btn-active-border-color: #00558c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #00558c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #00558c;
  --bs-gradient: none;
}

/* 버튼 - BLUEMAP 색상 - inverse */
.btn-bluemap-inverse {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #00558c;
  --bs-btn-border-color: #00558c;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #00558c;
  --bs-btn-hover-border-color: #00558c;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #00558c;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #00558c;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #00558c;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #00558c;
  --bs-gradient: none;
}

/* 버튼 purple */
.btn-bluemap-purple-inverse {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #ccb0d3;
  --bs-btn-border-color: #ccb0d3;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #ccb0d3;
  --bs-btn-hover-border-color: #ccb0d3;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #ccb0d3;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #ccb0d3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ccb0d3;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ccb0d3;
  --bs-gradient: none;
}

/* 버튼 blue */
.btn-bluemap-blue-inverse {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #b0b7d3;
  --bs-btn-border-color: #b0b7d3;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #b0b7d3;
  --bs-btn-hover-border-color: #b0b7d3;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #b0b7d3;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #b0b7d3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #b0b7d3;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #b0b7d3;
  --bs-gradient: none;
}

/* 버튼 green */
.btn-bluemap-green-inverse {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: #b7d3b0;
  --bs-btn-border-color: #b7d3b0;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #b7d3b0;
  --bs-btn-hover-border-color: #b7d3b0;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #b7d3b0;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: #b7d3b0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #b7d3b0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #b7d3b0;
  --bs-gradient: none;
}

/* 버튼 outline green */
.btn-bluemap-green {
  --bs-btn-color: #249d79;
  --bs-btn-border-color: #249d79;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #249d79;
  --bs-btn-hover-border-color: #249d79;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #249d79;
  --bs-btn-active-border-color: #249d79;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #249d79;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #249d79;
  --bs-gradient: none;
}

/* 버튼 outline red */
.btn-bluemap-red {
  --bs-btn-color: #e44343;
  --bs-btn-border-color: #e44343;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #e44343;
  --bs-btn-hover-border-color: #e44343;
  --bs-btn-focus-shadow-rgb: 121, 142, 152;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #e44343;
  --bs-btn-active-border-color: #e44343;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #e44343;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #e44343;
  --bs-gradient: none;
}

/* btn-warning 글자 색 */
.btn-warning {
  color: white !important;
}

/* 버튼 활성화 시 테두리 제거 */
.btn:first-child:active {
  border-color: transparent !important;
}

/* 버튼 active */
.btn:active {
  border-color: transparent !important;
}

/* 파랑 테이블 헤더 색상 */
.bluemap-thead {
  background-color: var(--bluemap-header-bg-color);
}

/* 회색 테이블 헤더 색상 */
.bluemap-thead-gray {
  background-color: #cad0dd5e;
}

/* 스크롤바 배경색 투명 */
.mailbox-body {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.mailbox-body.no-scrollbar {
  scrollbar-width: none;
}

/* 체크박스 배경 흰색 유지 */
.form-check-input {
  background-color: white;
  cursor: pointer;
}

/* 포커스 아웃라인 */
*:focus-visible {
  outline: none;
}

/* input 그림자 제거 */
.form-control:focus {
  box-shadow: none;
}

/* checkbox 그림자 제거, border 색깔 기본값 */
.form-check-input:focus {
  box-shadow: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
}

/* select 그림자 제거 */
.form-select:focus {
  box-shadow: none;
}

/* card - 테두리 색상 제거 */
.modal-card {
  --bs-border-color-rgb: none;
}

/* list-group-item-action 배경색 투명 */
.list-group-item-action:focus,
.list-group-item-action:hover {
  background-color: transparent !important;
}

/* 드롭다운 아이템 hover 시 배경색 */
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--bluemap-hover-bg-color);
}

/* 페이지 헤더 폰트 굵기 */
.page-header {
  font-weight: 540 !important;
}

/* 탭 색상 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: var(--bluemap-header-bg-color);
}

/* 파일 선택폼 */
.customFileInput {
  cursor: pointer;
}

.customFileInput::file-selector-button {
  background: skyblue;
  color: #ffffff;
  border: 1px solid skyblue;
  border-radius: 5px;
  padding: 1px 6px;
}

/* 파일 선택폼 hover */
.customFileInput::file-selector-button:hover {
  background: #00558c;
  border-color: #00558c;
  cursor: pointer;
}

/**************************************************** 모달 기본 셋팅 관련 ****************************************************/

/* 알랏 모달 */
#alertModal {
  z-index: 1060;
}

/* 알림 모달 */
#noticeModal {
  z-index: 1060;
}

/* 알림 모달 - 기본 배경 */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 알림 모달 - 기본 transition 효과 제거 */
.fade {
  transition: none;
}

/* 알림 모달 - 컨텐츠 */
.modal-content {
  border-radius: 5px !important;
}

/* 알림 모달 - 탑 마진 제거 */
.modal-dialog {
  margin-top: 0;
}

/* 모달 헤더 고정 */
.sticky-header {
  position: sticky !important;
  top: 0 !important;
  background-color: var(--bluemap-header-bg-color);
  z-index: 1060 !important;
}

/* 모달 배경 */
.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

/* 모달 박스 */
.modalBox {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 90%;
  height: auto;
  max-height: 95%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  border-radius: 5px;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  -ms-overflow-style: none; /* IE와 Edge 스크롤바 숨김 */
  scrollbar-width: none; /* Firefox 스크롤바 숨김 */
  z-index: 1050;
}

/* 로딩 모달 배경 */
.loadingModal-background {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1050;
}

/* 로딩 모달 아이템 */
.loadingModal-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/************************************************** 탑바 관련 ***************************************************/

/* 탑바 - 프레임워크가 767px 이하에서 brand 숨기는 것 override */
@media (max-width: 767.98px) {
  .app-header .brand,
  .app-header .brand .brand-logo {
    display: flex !important;
  }
}

/* 탑바 - 중간 화면: 전체 텍스트 → 축약 텍스트 */
@media (max-width: 1000px) {
  .brand-text-full { display: none !important; }
  .brand-text-short { display: inline !important; }
}

/* 탑바 - 좁은 화면: 메뉴 텍스트 + 축약 텍스트 숨김 (아이콘만 표시) */
@media (max-width: 700px) {
  #topDatasetBtn .menu-text,
  #topQuestionaireBtn .menu-text {
    display: none;
  }
  .brand-text-short { display: none !important; }
}

/* 탑바 - 메뉴 링크 아이템 활성화 */
.active-topbar-menu .menu-icon,
.active-topbar-menu .menu-text {
  color: #00558c;
  font-weight: bold;
}

/* 탑바 - 메뉴 링크 아이템 hover */
.topbar-menu:hover {
  cursor: pointer;
}

/* 탑바 - 메뉴 링크 아이템 - hover */
.topbar-menu:hover .menu-icon,
.topbar-menu:hover .menu-text {
  color: #00558c;
  font-weight: bold;
}

/* 탑바 - 유저 정보 드롭다운 */
#topbarUserDropdown {
  cursor: pointer;
}

/* 로그아웃 버튼 */
#logoutBtn {
  font-size: 13px;
}

/* 로그아웃 버튼 - hover */
#logoutBtn:hover {
  color: #00558c;
  background-color: #ececec;
}

/******************************************** 메일박스(목록) 기본 CSS 관련 *****************************************/

/* 메일박스 툴바 - 줄바꿈 방지, 가로 스크롤 */
.mailbox-toolbar {
  padding: 0.75rem 1rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  align-items: center;
}

/* 메일박스 툴바 내부 아이템 - 글자 세로 방지 */
.mailbox-toolbar * {
  white-space: nowrap;
}

/* 메일박스 툴바 링크 아이템 - hover */
.mailbox-toolbar-link:hover {
  cursor: pointer;
  background-color: var(--bluemap-hover-bg-sky) !important;
}

/* 메일박스 본문 */
.mailbox-body {
  overflow: auto !important;
}

/* 메일박스 사이드바  */
.mailbox-sidebar {
  width: 22.5rem !important;
  z-index: 10;
  box-shadow: 3px 0 10px 0px lightgray;
}

/* 메일박스 - 아이템 위치 */
.mailbox .mailbox-list .mailbox-message .mailbox-sender {
  display: flex;
}

/* 메일박스 - 리스트 아이템 */
.mailbox-list-item {
  padding: 10px !important;
  font-size: 12px;
}

/* 메일박스 - 리스트 아이템 hover */
.mailbox .mailbox-list .mailbox-list-item:hover {
  cursor: pointer;
  background-color: var(--bluemap-hover-bg-color);
}

/* 메일박스 - 리스트 체크박스 하단 그림 제거 */
.mailbox .mailbox-list .mailbox-list-item.has-attachment .mailbox-checkbox:hover {
  content: none;
}

/* 메일박스 - 메시지 부분을 제외한 나머지 영역 hover 시 커서 기본 */
.mailbox .mailbox-list .mailbox-list-item:hover:not(:has(.mailbox-message:hover)) {
  cursor: default;
}

/*********************************************** DataTable 라이브러리 **********************************************/

/* DataTable pagination 버튼 */
.pagination .page-item .page-link {
  border: none;
}

/* DataTable pagination 버튼 - focus */
.pagination .page-item .page-link:focus {
  box-shadow: none;
  color: white;
}