/* 전체 화면 채움 */
html,
body {
  height: 100%;
  margin: 0;
  padding-top: 0;
  overflow-x: hidden; /*  수평 스크롤만 제거 */
}

/* 메인 콘텐츠 숨김 제어 */
.main-content.hidden {
  display: none;
}

.main-content {
  margin-top: 5px;
  margin-left: 250px; /*  sidebar 있을 경우 유지 */
  padding-left: 1rem;
  transition: margin-left 0.1s ease;
  display: flex;
  flex-direction: column;
}

.main-content-2 {
  margin-top: 5px;
  padding-left: 1rem;
  transition: margin-left 0.1s ease;
  display: flex;
  flex-direction: column;
}

.navbar-header {
  padding: 0;
  margin: 0;
  background-color: #ebfff9 !important;
  height: 40px !important;
}

/* 카드 레이아웃 */
.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  padding: 5px !important;
  overflow-y: auto !important;
}

/* 테이블 세부 설정 */
.table th,
.table td {
  border: 1px solid #e9ecef;
  white-space: nowrap !important;
  padding: 2px !important;
  font-size: 90% !important;
  line-height: 1.2 !important;
}
.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}
.table th {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
.table td {
  background-color: #ffffff;
  vertical-align: middle !important;
}

/* 모바일 조건 모달 버튼 */
#openConditionModalBtn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  text-align: center;
  border: 1px solid #007bff;
  background-color: white;
  color: #007bff;
  font-weight: bold;
}

#pageMenu1 .menu-item label {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  height: 100%; /* 부모 높이에 맞추기 */
  margin-bottom: 0; /* Bootstrap 기본 마진 제거 */
  font-weight: 500;
}

#pageMenu1 .menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

#pageMenu1 input,
#pageMenu1 select {
  height: 36px; /* 필요 시 높이 조절 */
}

label {
  margin: 0px !important;
}

/* 테이블 자체는 기본 유지 */
.table-responsive {
  min-height: unset;
  overflow-y: hidden !important;
  width: 100%;
}

/*  thead 고정 (sticky) */
.table-responsive thead th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa; /* 밝은 배경색 */
  z-index: 10;
  text-align: center;
}

/*  모바일 대응: 상단 바 한 줄씩 쌓이도록 */
@media (max-width: 767.98px) {
  .table-control-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .table-control-bar input[type="text"] {
    width: 100%;
  }
}

#tableControlArea {
  display: block !important;
}

.row {
  margin: 0 !important;
}
/* #tableControlArea {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 align-items: center;
} */

#tableControlArea input[type="text"] {
  max-width: 200px;
  height: 32px;
  font-size: 0.875rem;
}

#tableControlArea button {
  height: 32px;
  padding: 0 10px;
  font-size: 0.875rem;
}

/* 기본은 보임 */
#menuarea {
  display: block;
}

/* 모바일에서는 숨김 */
@media (max-width: 768px) {
  #menuarea {
    display: none;
  }
}

.table-comp-daily-plus {
  color: #1aab73 !important;
}

.table-comp-daily-minus {
  color: #9d1b19 !important;
}

.summary-row {
  font-weight: bold;
}

td.font-size-80 {
  font-size: 0.8rem !important;
}
.font-size-80 {
  font-size: 0.8rem !important;
}

/* 상태 표시에 사용할 색상 */
.status-ok {
  color: #198754; /* Bootstrap success color */
  font-weight: bold;
}
.status-error {
  color: #dc3545; /* Bootstrap danger color */
  font-weight: bold;
}

/* 긴 텍스트 자르기 */
.truncate {
  max-width: 300px; /* 최대 너비 설정 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; /* 전체 내용을 보려면 클릭할 수 있음을 암시 */
}

/* 테이블 스타일 */
#subid-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#subid-table th,
#subid-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#subid-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}