/* Add CSS classes here for project-specific overrides. */

.cursor-pointer {
  cursor: pointer;
}

.oblique {
  transform: skewX(-10deg);
  overflow: hidden;
  width: 160%;
  left: -25rem;
  border-bottom-left-radius: 0.75rem;
  position: absolute;
  display: block;
  height: 100%;
}
.oblique .oblique-image {
  background-image: url(../images/login/demand_Response.gif);
  height: 100%;
  width: 80%;
}
.bg-cover {
  background-size: cover;
}

.tui-datepicker {
  z-index: 100 !important;
}

/*toast grid custom*/
.darkmode .tui-grid-body-container,
.darkmode .tui-grid-layer-state {
  background: #222235;
}

.darkmode .tui-grid-container table thead th {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #11111a;
}

.darkmode .tui-grid-container table tbody th {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #11111a;
}

.darkmode .tui-grid-container table tbody td {
  opacity: 1 !important;
  color: #fff !important;
  background-color: #22242f;
}

/*toast grid custom*/

/*toast datepicker custom (High-Visibility Dark Mode) */
.darkmode .tui-datepicker {
  background-color: #1e293b !important;
  border: 1px solid #475569 !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 25px -5px #000000 !important;
  color: #ffffff !important;
}
.darkmode .tui-datepicker-header,
.darkmode .tui-calendar-header {
  background-color: #151c2c !important;
  color: #ffffff !important;
  border-bottom: 1px solid #475569 !important;
}
.darkmode .tui-datepicker .tui-calendar-title,
.darkmode .tui-datepicker .tui-calendar-title-month {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.darkmode .tui-datepicker .tui-calendar-btn-prev-month,
.darkmode .tui-datepicker .tui-calendar-btn-next-month,
.darkmode .tui-datepicker .tui-calendar-btn-prev-year,
.darkmode .tui-datepicker .tui-calendar-btn-next-year {
  filter: invert(1) brightness(200%) !important;
  opacity: 1 !important;
}
.darkmode .tui-datepicker table {
  background-color: #1e293b !important;
  color: #ffffff !important;
}
.darkmode .tui-datepicker table thead th {
  opacity: 1 !important;
  color: #93c5fd !important;
  background-color: #1e293b !important;
  font-weight: 700 !important;
}
.darkmode .tui-datepicker table tbody th {
  opacity: 1 !important;
  color: #cbd5e1 !important;
  background-color: #1e293b !important;
}
.darkmode .tui-datepicker table tbody td {
  opacity: 1 !important;
  color: #ffffff !important;
  background-color: #1e293b !important;
}
.darkmode .tui-datepicker .tui-is-selectable {
  color: #ffffff !important;
  font-weight: 600 !important;
}
.darkmode .tui-datepicker .tui-is-selectable:hover {
  background-color: #334155 !important;
  color: #38bdf8 !important;
}
.darkmode .tui-datepicker .tui-is-selectable.tui-is-selected,
.darkmode .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
}
.darkmode .tui-datepicker .tui-is-blocked,
.darkmode .tui-datepicker .tui-extra-date {
  color: #64748b !important;
}
.darkmode .tui-datepicker-body {
  background-color: #1e293b !important;
}
/*toast datepicker custom*/

/*toast tree custom*/
.tui-tree-content-wrapper {
  width: 100% !important;
}
.tui-tree-drop {
  height: 30px !important;
  left: 15% !important;
}
.tui-tree-line {
  width: 95% !important;
}
.tui-tree-wrap {
  width: 100% !important;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: 10px;
}
.darkmode .tui-tree-wrap {
  background-color: #212529 !important;
}
.darkmode .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text {
  color: #fff !important;
}
.darkmode .tui-tree-text {
  color: #b3b3b3 !important;
}
/*toast tree custom*/

/**
 @author 최백성
 사용 URL: /res/management/, /res/customer/
 토스트UI 그리드, 선택된 줄의 색 변경
 */
td.custom-tui-grid-row-focus {
  background-color: #ddf;
}
.darkmode td.custom-tui-grid-row-focus {
  background-color: #027;
}
/**
 @author 최백성
 사용 URL: /res/management/ 포트폴리오 관리 탭, 추가
 그리드 버튼 회전
 */
[data-custom-js-loader] {
  display: none;
}
[data-custom-grid="cgrid"] .btn i {
  transition: transform 0.2s;
}
[data-custom-grid="cgrid"] .btn.active i {
  transform: rotate(180deg);
}
/**
 @author 최백성
 사용 URL: /res/management/
 라디오 버튼을 선택하게 만드는 태그
 */
[data-custom-ui="select-radio"] {
  display: none;
}
[data-custom-ui="radio-inline"] {
  display: none;
}
/**
 @author 최백성
 사용 URL: /res/management/
 화면 내 오류 표시, .hepi-* 요소 배치가 잘못됐을 경우
 */
.custom-error {
  color: red;
  font-weight: bold;
  border: 1px solid red;
}

/**
 @author 최백성
 사용 URL: /components/
 예제용 스타일
 */
div.hepi-example {
  word-break: keep-all;
}
.hepi-example-tag {
  display: block;
  margin: 5px;
  padding: 10px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 800px;
}
div.hepi-example textarea {
  width: 800px;
  height: 150px;
  border: 1px solid #888;
  border-radius: 10px;
  margin: 5px;
}

/**
 @author 최백성
 버튼이 focus일때 보더때문에 밀리는 문제 해결
 투명보더를 미리 만듬
 */
button:not(:focus) {
  border: 2px solid transparent;
}
button.btn-outline-secondary:not(:focus) {
  border: 1px solid var(--bs-btn-border-color);
}
/**
 @author 최백성
 송수신현황 테이블 json 값
 */
.wattage-data {
  display: none;
}

/**
 @author 최백성
 실패
*/
.custom-error {
  color: red;
  display: block;
}
/**
 @author 최백성
 필수 항목 왼쪽 별
*/
.redstar::before {
  color: red;
  content: "* ";
}

/**
 @author 최백성
 사용 URL: /res/management/
 자원정보, 포트폴리오관리 숫자 테이블용 스타일
 */
td.stat-table-number {
  border-left: 6px solid;
  padding-left: 10px;
  font-weight: bold;
  font-size: 24px;
}
td.stat-table-title {
  border-left: 6px solid;
  padding-left: 10px;
}
td.pb-cyan {
  border-color: #4dd;
}
td.pb-red {
  border-color: #e44;
}
td.pb-blue {
  border-color: #44d;
}
td.pb-purple {
  border-color: #d4d;
}

/**
 @author 최백성
 토글 스위치 사이즈 지정
 */
.form-check-input {
  clear: left;
}

.form-switch.form-switch-sm {
  margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}

.form-switch.form-switch-md {
  margin-bottom: 1rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}

.form-switch.form-switch-lg {
  margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}

.form-switch.form-switch-xl {
  margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}

.notoSans {
  font-weight: bold;
  font-family: "Noto Sans KR", sans-serif;
}

.notoSans_light {
  font-family: "Noto Sans KR", sans-serif;
}

/**
@author 김성겸
테이블 td 패딩 제거
 */
.table_no_padding > :not(caption) > * > * {
  padding: 0.2rem 0.2rem;
}
.bg-cbl-result {
  background-color: #d4ffb0 !important;
}

.tui-grid-container {
  font-family: "Noto Sans KR", sans-serif !important;
  font-size: 0.75rem !important;
}

/**
* @author 최백성
* TUI Grid 필터 버튼 제거
* 필터 버튼 없이 검색이 안되서 스타일을 통한 제거
*/
.custom-grid .tui-grid-btn-filter {
  display: none !important;
}

.custom-grid-html-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.translate-contract-kind-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.translate-contract-kind-lines > span {
  display: block;
}

.font_13 {
  font-size: 13px !important;
}

.font_12 {
  font-size: 12px !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4b96e6;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
  font-weight: bold;
  border-bottom-right-radius: 4px;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

/* alertify modal open shifting fix */
html {
  scrollbar-gutter: stable;
}
html.ajs-no-overflow,
body.ajs-no-overflow,
html:has(body.ajs-no-overflow) {
  overflow: hidden !important;
}

/* cardform-search focus layout shifting fix */
#cardform-search input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   GS Certification Dark Mode Compatibility Overrides
   ========================================================================== */

/* 1 & 2. Toast UI Grid custom grids (portfolio, join) and general container */
.darkmode [data-custom-grid="portfolio"],
.darkmode [data-custom-grid="join"],
.darkmode .tui-grid-container,
.darkmode .tui-grid-content-area,
.darkmode .tui-grid-body-area,
.darkmode .tui-grid-rside-area,
.darkmode .tui-grid-lside-area,
.darkmode .tui-grid-table-container,
.darkmode .tui-grid-no-scroll-y {
  background-color: #222235 !important;
  color: #ffffff !important;
}

/* Cell styles */
.darkmode .tui-grid-cell {
  background-color: #222235 !important;
  border-color: #3f4254 !important;
  color: #ffffff !important;
}

.darkmode .tui-grid-cell-header {
  background-color: #11111d !important;
  border-color: #3f4254 !important;
  color: #ffffff !important;
}

.darkmode .tui-grid-border-line,
.darkmode .tui-grid-border-line-top,
.darkmode .tui-grid-border-line-bottom,
.darkmode .tui-grid-border-line-left,
.darkmode .tui-grid-border-line-right {
  background-color: #3f4254 !important;
}

.darkmode .tui-grid-scrollbar-right-bottom,
.darkmode .tui-grid-scrollbar-left-bottom {
  background-color: #222235 !important;
  border-color: #3f4254 !important;
}

/* 3. Highcharts background and text in dark mode */
.darkmode .highcharts-background {
  fill: #222235 !important;
}

.darkmode .highcharts-title,
.darkmode .highcharts-subtitle,
.darkmode .highcharts-axis-title,
.darkmode .highcharts-legend-item text,
.darkmode .highcharts-axis-labels text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.darkmode .highcharts-grid-line {
  stroke: #3f4254 !important;
}

/* 4. AlertifyJS modal (.ajs-modal) dark mode */
.darkmode .ajs-modal .ajs-dialog {
  background-color: #222235 !important;
  color: #ffffff !important;
  border: 1px solid #3f4254 !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

.darkmode .ajs-modal .ajs-header {
  background-color: #11111d !important;
  color: #ffffff !important;
  border-bottom: 1px solid #3f4254 !important;
}

.darkmode .ajs-modal .ajs-footer {
  background-color: #11111d !important;
  border-top: 1px solid #3f4254 !important;
}

.darkmode .ajs-modal .ajs-content {
  color: #ffffff !important;
}

.darkmode .ajs-modal .ajs-button {
  background-color: #11111d !important;
  color: #ffffff !important;
  border: 1px solid #3f4254 !important;
}

.darkmode .ajs-modal .ajs-button:hover,
.darkmode .ajs-modal .ajs-button:focus {
  background-color: #3f4254 !important;
  color: #ffffff !important;
}

.darkmode .ajs-modal .ajs-close {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* 5. Toast UI Calendar Darkmode Overrides */
.darkmode .toastui-calendar-layout,
.darkmode .toastui-calendar-month,
.darkmode .toastui-calendar-month-daygrid,
.darkmode .toastui-calendar-daygrid-cell {
  background-color: #222235 !important;
  border-color: #3f4254 !important;
  color: #ffffff !important;
}

.darkmode .toastui-calendar-weekday-grid {
  border-color: #3f4254 !important;
  background-color: #222235 !important;
}

.darkmode .toastui-calendar-weekday-grid-header {
  background-color: #11111d !important;
  border-color: #3f4254 !important;
}

.darkmode .toastui-calendar-grid-cell-header,
.darkmode .toastui-calendar-month-week-header {
  background-color: #11111d !important;
  border-color: #3f4254 !important;
  color: #ffffff !important;
}

.darkmode .toastui-calendar-weekday-grid-date {
  color: #ffffff !important;
}

.darkmode .toastui-calendar-grid-cell-date {
  color: #ffffff !important;
}

.darkmode .toastui-calendar-month-more-list {
  background-color: #222235 !important;
  border-color: #3f4254 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.darkmode .toastui-calendar-month-more-title {
  background-color: #11111d !important;
  color: #ffffff !important;
}

/* 6. Dashboard usage-chart-col & figure background */
.darkmode .usage-chart-col,
.darkmode .usage-chart-figure {
  background-color: #222235 !important;
}

/* 7. Summary card body th/td and tables in darkmode */
.darkmode .top-summary-body,
.darkmode .top-summary-body th,
.darkmode .top-summary-body td {
  background-color: #222235 !important;
  color: #ffffff !important;
}

.darkmode .top-summary-body table {
  color: #ffffff !important;
  border-color: #3f4254 !important;
}

.darkmode .top-summary-calendar {
  background-color: #222235 !important;
}

/* 8. Grid Placeholder Box (report.html cbl-grid, metering-grid inline style separation) */
.grid-placeholder-box {
  min-height: 100px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  background-color: #fcfcfc;
}

.grid-placeholder-box.height-200 {
  height: 200px;
}

.grid-placeholder-box .initial-placeholder {
  color: #888;
  font-size: 14px;
}

/* Dark mode for placeholder box */
.darkmode .grid-placeholder-box {
  border-color: #3f4254 !important;
  background-color: #11111d !important;
}

.darkmode .grid-placeholder-box .initial-placeholder {
  color: #a1a5b7 !important;
}

/* 9. Weather Iframe Dark Mode Compatibility (CSS Filter Hack) */
.darkmode .weather-frame-shell {
  background-color: #222235 !important;
  border-color: #3f4254 !important;
}

.darkmode .weather-frame {
  /* Inverts KMA website's light theme to dark, while preserving color hues */
  filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(1.1);
  background-color: #222235 !important;
}

/* 10. Prevent Background Scrolling when Modal is Open */
html:has(body.modal-open),
body.modal-open {
  overflow: hidden !important;
}

@media (min-width: 1200px) {
  /* Permanent fixed sidebar on desktop to prevent any shrinking/shifting bugs */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1030 !important;
  }

  .main-wrapper {
    margin-left: 190px !important;
    width: calc(100% - 190px) !important;
    transition: margin-left 0.5s, width 0.5s !important;
  }

  .sidebar.hidden + .main-wrapper {
    margin-left: 64px !important;
    width: calc(100% - 64px) !important;
  }
}

/* ==========================================================================
   11. Dark Mode High-Visibility Enhancements (계획감축 & 감축결과보고서)
   ========================================================================== */

/* 11.1 General Cards & Modals in Dark Mode */
.darkmode .stat-cards-body {
  background-color: #1a2234 !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .modal-content {
  background-color: #1a2234 !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 10px 25px -5px #000000 !important;
}

.darkmode .modal-header {
  background-color: #151c2c !important;
  border-bottom: 1px solid #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .modal-footer {
  background-color: #151c2c !important;
  border-top: 1px solid #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 1 !important;
}

.darkmode .alert-info,
.darkmode [data-bs-theme="dark"] .alert-info {
  background-color: #0c2d48 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Form Controls (Inputs, Selects) inside Modals and Cards */
.darkmode input.form-control,
.darkmode select.form-select,
.darkmode .modal-body input.form-control,
.darkmode .modal-body select.form-select,
.darkmode .stat-cards-body input.form-control,
.darkmode .stat-cards-body select.form-select {
  background-color: #242e42 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode input.form-control:focus,
.darkmode select.form-select:focus {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.25rem #0284c7 !important;
}

/* Readonly and Disabled Form Controls (Light & Dark Mode) */
input.form-control[readonly],
input.form-control:disabled {
  cursor: not-allowed;
  background-color: #e9ecef;
}

.darkmode input.form-control[readonly],
.darkmode input.form-control:disabled {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}

.darkmode .input-group-text {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Table Borderless & Datepicker Inputs in Dark Mode */
.darkmode .table-borderless,
.darkmode .table-borderless th,
.darkmode .table-borderless td,
.darkmode .modal-body .table-borderless th,
.darkmode .modal-body .table-borderless td {
  color: #ffffff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  border: none !important;
  background-color: transparent !important;
}

.darkmode .datepicker input,
.darkmode .modal-body .datepicker input,
.darkmode .input-group.datepicker input {
  background-color: #242e42 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.darkmode .datepicker input::placeholder,
.darkmode .input-group.datepicker input::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* 11.2 계획감축 (신청 & 목록) */
.darkmode #resource_bid_list_wrapper table,
.darkmode .bid-scroll-table table,
.darkmode .bid-detail-scroll-table table,
.darkmode #bid-apply-table table,
.darkmode #agg_bid_detail table,
.darkmode #agg_bid_list table {
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #resource_bid_list_wrapper thead th,
.darkmode .bid-scroll-table thead th,
.darkmode .bid-detail-scroll-table thead th,
.darkmode #bid-apply-table thead th,
.darkmode #agg_bid_detail thead th,
.darkmode #agg_bid_list thead th {
  background-color: #182234 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode #resource_bid_list_wrapper tbody td,
.darkmode .bid-scroll-table tbody td,
.darkmode .bid-detail-scroll-table tbody td,
.darkmode #bid-apply-table tbody td,
.darkmode #agg_bid_detail tbody td,
.darkmode #agg_bid_list tbody td {
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .table-hover tbody tr:hover td {
  background-color: #26334a !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .bg-light,
.darkmode td.bg-light,
.darkmode tr.bg-light td {
  background-color: #222d40 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .table-secondary,
.darkmode .table-secondary th,
.darkmode .table-secondary td {
  background-color: #1b2436 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.darkmode .table-success,
.darkmode tr.table-success td,
.darkmode td.table-success {
  background-color: #0f766e !important;
  color: #ffffff !important;
  font-weight: 700;
  opacity: 1 !important;
}

/* 계획감축 통계 수치 하이라이트 (aggBidDetail) */
.darkmode .stat-table-title {
  color: #f1f5f9 !important;
  font-size: 13px;
  font-weight: 600;
  opacity: 1 !important;
}

.darkmode .stat-table-number {
  font-size: 24px;
  font-weight: 800;
  opacity: 1 !important;
}

.darkmode .pb-cyan {
  color: #38bdf8 !important;
}

.darkmode .pb-red {
  color: #f87171 !important;
}

.darkmode .pb-blue {
  color: #60a5fa !important;
}

.darkmode .pb-purple {
  color: #c084fc !important;
}

/* 11.3 감축결과보고서 (Result & Event Detail & Popups) */
.darkmode #event_detail .border-start.border-info {
  border-color: #38bdf8 !important;
}

.darkmode #event_detail .text-secondary {
  color: #f1f5f9 !important;
  opacity: 1 !important;
}

.darkmode #event_detail .text-secondary .text-end {
  color: #ffffff !important;
  font-weight: 800;
  opacity: 1 !important;
}

.darkmode #reduction-event-table-header th,
.darkmode #reduction-result-table-header th {
  background-color: #182234 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode .reduction-result-table tbody tr td {
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .reduction-result-table tbody tr:hover td {
  background-color: #26334a !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .reduction-result-table tr.selected td,
.darkmode .reduction-result-table tr.selected:hover td {
  background-color: #1e40af !important;
  color: #ffffff !important;
  font-weight: bold;
  opacity: 1 !important;
}

.darkmode .result-report-button {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 4px;
  padding: 3px 8px !important;
  font-size: 12px;
  opacity: 1 !important;
  transition: background-color 0.2s;
}

.darkmode .result-report-button:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
}

.darkmode #report_radio_button_div label,
.darkmode #total_report_radio_button_div label {
  color: #ffffff !important;
  font-weight: 600;
  opacity: 1 !important;
}

.darkmode #event_detail_table_wrapper table,
.darkmode #event_total_detail_table_wrapper table {
  color: #ffffff !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.darkmode #event_detail_table_wrapper thead th,
.darkmode #event_total_detail_table_wrapper thead th {
  background-color: #182234 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode #event_detail_table_wrapper tbody td,
.darkmode #event_total_detail_table_wrapper tbody td {
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #event_detail_table_wrapper tbody tr:hover td,
.darkmode #event_total_detail_table_wrapper tbody tr:hover td {
  background-color: #243048 !important;
  color: #ffffff !important;
}

/* 11.6 참여고객 정보 & 담당자 프로필 (/customer/info) */
.darkmode .customer-info-table th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode .customer-info-table td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode .password-change-section {
  background-color: #151c2c !important;
  border: 1px solid #334155 !important;
  border-radius: 6px;
  color: #ffffff !important;
}

.darkmode .admin-contact-btn {
  background-color: #242e42 !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.darkmode .admin-contact-btn:hover {
  background-color: #334155 !important;
  color: #38bdf8 !important;
}

.darkmode .admin-contact-btn.active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  font-weight: 700;
}

/* 11.7 수요사업자관리 (SMS 발송관리 & 조직현황) */
/* SMS 자동발송설정 다크모드 */
.darkmode #sms_setting_list,
.darkmode #sms_setting_detail,
.darkmode #sms_setting_list .stat-cards-body,
.darkmode #sms_setting_detail .stat-cards-body {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #sms_setting_list table,
.darkmode #sms_setting_detail table {
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_setting_list thead th,
.darkmode #sms_setting_detail thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode #sms_setting_list tbody td,
.darkmode #sms_setting_detail tbody td {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode .sms-setting-tr:hover td {
  background-color: #243048 !important;
}

.darkmode .sms-setting-tr.table-active td {
  background-color: #1e40af !important;
  font-weight: 700;
}

.darkmode #sms_message_div,
.darkmode #sms_setting_message {
  background-color: #151c2c !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .sms-template-container .card {
  background-color: #151c2c !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode .sms-template-container .card-header {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  opacity: 1 !important;
}

.darkmode .sms-template-container pre,
.darkmode .sms-template-container .font-monospace {
  background-color: #0f172a !important;
  color: #38bdf8 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode .sms-template-container .text-muted,
.darkmode #sms_setting_detail .text-muted {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* SMS 수동발송 다크모드 */
.darkmode #smsSend-sector1 .card,
.darkmode #smsSend-sector2 .card,
.darkmode #smsSend-sector3 .card {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector1 .card-header,
.darkmode #smsSend-sector2 .card-header,
.darkmode #smsSend-sector3 .card-header {
  background-color: #151c2c !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector1 .card-body,
.darkmode #smsSend-sector2 .card-body,
.darkmode #smsSend-sector3 .card-body {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector1 .text-muted,
.darkmode #smsSend-sector2 .text-muted,
.darkmode #smsSend-sector3 .text-muted {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector1 input.form-control,
.darkmode #smsSend-sector2 input.form-control,
.darkmode #smsSend-sector3 input.form-control,
.darkmode #smsSend-sector3 textarea.form-control {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector1 input.form-control::placeholder,
.darkmode #smsSend-sector2 input.form-control::placeholder,
.darkmode #smsSend-sector3 input.form-control::placeholder,
.darkmode #smsSend-sector3 textarea.form-control::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}

.darkmode #smsSend-sector3 .bg-body-tertiary {
  background-color: #151c2c !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  opacity: 1 !important;
}

.darkmode #smsRecipientTree {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #smsRecipientTree .tui-tree-text {
  color: #f1f5f9 !important;
  opacity: 1 !important;
}

.darkmode #smsRecipientTree .tui-tree-hover > .tui-tree-content-wrapper,
.darkmode #smsRecipientTree .tui-tree-selected > .tui-tree-content-wrapper {
  background-color: #1e3a8a !important;
}

/* SMS 수동발송 받는번호 목록 테이블 가독성 향상 */
#receiver_table {
  font-size: 0.93rem;
}

#receiver_table thead th {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 6px;
}

#receiver_table tbody td {
  padding: 8px 6px;
  vertical-align: middle;
}

#receiver_table .badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 7px;
}

#receiver_table .receiver-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
}

#receiver_table .receiver-pos {
  font-size: 0.84rem;
  font-weight: normal;
  color: #64748b;
  margin-left: 3px;
}

#receiver_table .receiver-phone {
  font-size: 0.92rem;
  letter-spacing: 0.3px;
  color: #334155;
}

#receiver_table .receiver-dept {
  font-size: 0.88rem;
  color: #475569;
}

.darkmode #receiver_table thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #receiver_table tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #receiver_table .receiver-name {
  color: #f8fafc !important;
  opacity: 1 !important;
}

.darkmode #receiver_table .receiver-pos {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

.darkmode #receiver_table .receiver-phone {
  color: #e2e8f0 !important;
  opacity: 1 !important;
}

.darkmode #receiver_table .receiver-dept {
  color: #cbd5e1 !important;
  opacity: 1 !important;
}

.darkmode #contact-table thead th,
.darkmode #group-table thead th,
.darkmode #receiver-table thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.darkmode #contact-table tbody td,
.darkmode #group-table tbody td,
.darkmode #receiver-table tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_content {
  background-color: #151c2c !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
  opacity: 1 !important;
}

/* SMS 발송이력 다크모드 */
.darkmode #sms_history_summary_list,
.darkmode #sms_history_list,
.darkmode #sms_history_summary_list .stat-cards-body,
.darkmode #sms_history_list .stat-cards-body {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #sms_history_summary_list table,
.darkmode #sms_history_list table {
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_history_summary_list thead th,
.darkmode #sms_history_list thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode #sms_history_summary_list tbody td,
.darkmode #sms_history_list tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_history_summary_list tbody tr:hover td,
.darkmode #sms_history_list tbody tr:hover td {
  background-color: #243048 !important;
}

.darkmode #sms_history_detail_pop_up .modal-content {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border: 1px solid #475569 !important;
  opacity: 1 !important;
}

.darkmode #sms_history_detail_pop_up .modal-header,
.darkmode #sms_history_detail_pop_up .modal-footer {
  background-color: #151c2c !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.darkmode #sms_history_detail_pop_up table th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_history_detail_pop_up table td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #sms_history_detail_pop_up pre {
  background-color: #0f172a !important;
  color: #38bdf8 !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

/* 조직현황 */
.darkmode #tree.tui-tree-wrap {
  background-color: #151c2c !important;
  color: #ffffff !important;
}

.darkmode #tree .tui-tree-text {
  color: #ffffff !important;
  font-weight: 600;
}

.darkmode #tree .tui-is-selected > .tui-tree-content-wrapper {
  background-color: #1e40af !important;
  color: #ffffff !important;
  border-radius: 4px;
}

.darkmode #staffList table {
  color: #ffffff !important;
  border-color: #475569 !important;
  opacity: 1 !important;
}

.darkmode #staffList thead th {
  background-color: #182234 !important;
  color: #93c5fd !important;
  border-color: #475569 !important;
  font-weight: 700;
  opacity: 1 !important;
}

.darkmode #staffList tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  opacity: 1 !important;
}

.darkmode #staffList tbody tr:hover td {
  background-color: #243048 !important;
}

/* ==========================================================================
   12. Sidebar Depth-based Step Indentation System
   ========================================================================== */
.cat-sub-menu {
  padding-left: 0 !important;
}

.sidebar-body-menu a.menu-depth-2,
.sidebar-body-menu a[data-depth="2"] {
  padding-left: 14px !important;
  font-size: 12px;
}

.sidebar-body-menu a.menu-depth-3,
.sidebar-body-menu a[data-depth="3"] {
  padding-left: 26px !important;
  font-size: 12px;
}

.sidebar-body-menu a.menu-depth-4,
.sidebar-body-menu a[data-depth="4"] {
  padding-left: 38px !important;
  font-size: 12px;
}

.sidebar-body-menu a.menu-depth-5,
.sidebar-body-menu a[data-depth="5"] {
  padding-left: 50px !important;
  font-size: 12px;
}

.sidebar.hidden .sidebar-body-menu a {
  padding-left: 0 !important;
}

/* ==========================================================================
   13. Global Empty State Box & Select Option Disabled & Select2 & Stat Table Darkmode
   ========================================================================== */

/* 13.1 Select Option Disabled (High-Contrast Readability) */
select option:disabled {
  color: #94a3b8 !important;
  background-color: #f1f5f9;
}

.darkmode select option:disabled {
  color: #64748b !important;
  background-color: #1e293b !important;
}

/* 13.2 Global Empty State Box (.empty-state-box) */
.empty-state-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 140px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background-color: #f8fafc;
  padding: 20px;
  box-sizing: border-box;
}

.empty-state-text {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.darkmode .empty-state-box {
  border: 1px dashed #334155 !important;
  background-color: #151c2c !important;
}

.darkmode .empty-state-text {
  color: #94a3b8 !important;
}

/* 13.3 Select2 Dark Mode Full Coverage (v3.5.x compatibility) */
.darkmode .select2-container .select2-choice {
  background-color: #242e42 !important;
  background-image: none !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}

.darkmode .select2-container .select2-choice .select2-chosen,
.darkmode .select2-chosen {
  color: #ffffff !important;
}

.darkmode .select2-container .select2-choice .select2-arrow {
  background-color: #1e293b !important;
  background-image: none !important;
  border-left: 1px solid #475569 !important;
}

.darkmode .select2-container .select2-choice .select2-arrow b {
  filter: invert(1) brightness(200%);
}

.darkmode .select2-drop {
  background-color: #1a2234 !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.darkmode .select2-search input {
  background-color: #151c2c !important;
  border: 1px solid #334155 !important;
  color: #ffffff !important;
}

.darkmode .select2-results {
  background-color: #1a2234 !important;
  color: #ffffff !important;
}

.darkmode .select2-results .select2-result-label {
  color: #e2e8f0 !important;
}

.darkmode .select2-results .select2-highlighted {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

.darkmode .select2-results .select2-no-results,
.darkmode .select2-results .select2-searching {
  background-color: #1a2234 !important;
  color: #94a3b8 !important;
}

.darkmode .select2-container-active .select2-choice,
.darkmode .select2-drop-active {
  border-color: #38bdf8 !important;
}

/* 13.4 Resource Management Stat Table (/res/management/tab/detail.html) */
.darkmode #modify-form table,
.darkmode #modify-form table tbody,
.darkmode #modify-form table tr,
.darkmode #modify-form table td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
}

.darkmode td.stat-table-number {
  color: #ffffff !important;
  background-color: #1a2234 !important;
}

.darkmode td.stat-table-title {
  color: #94a3b8 !important;
  background-color: #1a2234 !important;
}

.darkmode td.pb-cyan {
  border-color: #06b6d4 !important;
}

.darkmode td.pb-red {
  border-color: #f43f5e !important;
}

.darkmode td.pb-blue {
  border-color: #3b82f6 !important;
}

.darkmode td.pb-purple {
  border-color: #c084fc !important;
}

.darkmode #modify-form table {
  background-color: #1a2234 !important;
  border: 1px solid #334155 !important;
  border-radius: 6px;
}

/* 13.5 Toast UI Grid Header Area Empty Gap Darkmode */
.darkmode .tui-grid-header-area,
.darkmode .tui-grid-header-area th,
.darkmode .tui-grid-header-area table,
.darkmode .tui-grid-header-area .tui-grid-table,
.darkmode .tui-grid-head-area {
  background-color: #11111d !important;
  border-color: #3f4254 !important;
  color: #ffffff !important;
}

/* 13.6 SMS 수동발송(SMS Send) 레이아웃 및 다크모드 대응 */
#smsSend-sector1,
#smsSend-sector2,
#smsSend-sector3 {
  min-width: 0;
}

#smsSend-sector1 .card {
  min-height: calc(100vh - 180px);
}

#smsRecipientTree {
  height: calc(100vh - 310px);
  min-height: 480px;
}

.darkmode #smsRecipientTree {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

.darkmode #smsRecipientTree .tui-tree-node {
  color: #e2e8f0 !important;
}

.darkmode #smsRecipientTree .tui-tree-content-wrapper:hover {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

.darkmode #smsRecipientTree .tui-tree-text {
  color: #e2e8f0 !important;
}

.darkmode #receiver_table thead.table-light,
.darkmode #receiver_table thead.table-light th {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

.darkmode #receiver_table tbody td {
  border-color: #334155 !important;
}

/* 13.6 SMS 수동발송(SMS Send) 레이아웃 */
.sms-recipient-tree-wrap {
  height: calc(100vh - 310px);
  min-height: 480px;
}

.receiver-table-scroll {
  max-height: 200px;
  min-height: 140px;
}

.receiver-table-col-type {
  width: 15%;
}

.receiver-table-col-dept {
  width: 28%;
}

.receiver-table-col-name {
  width: 25%;
}

.receiver-table-col-phone {
  width: 26%;
}

.receiver-table-col-action {
  width: 36px;
}

/* 13.7 SMS 발송이력(SMS History) 좌측 TUI Grid + 우측 인라인 아코디언 테이블/다크모드 */
.sms-history-panel {
  min-height: calc(100vh - 240px);
}

.sms-history-detail-scroll {
  max-height: 520px;
  overflow-y: auto;
}

#sms-history-summary-grid {
  width: 100%;
}

.sms-history-detail-table {
  table-layout: fixed;
  width: 100%;
}

.sms-detail-col-type {
  width: 15%;
  text-align: center;
}

.sms-detail-col-receiver {
  width: 22%;
  text-align: left;
}

.sms-detail-col-result {
  width: 13%;
  text-align: center;
}

.sms-detail-col-msg {
  width: 30%;
  text-align: left;
}

.sms-detail-col-date {
  width: 20%;
  text-align: center;
}

.sms-detail-msg-preview {
  max-width: 220px;
}

.sms-detail-msg-full {
  white-space: pre-wrap;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
}

.sms-detail-main-row {
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.sms-detail-main-row:hover {
  background-color: rgba(13, 110, 253, 0.05);
}

.sms-detail-main-row.is-selected {
  background-color: rgba(13, 110, 253, 0.12) !important;
}

.darkmode .sms-history-detail-table {
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode .sms-history-detail-table thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
}

.darkmode .sms-history-detail-table tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode .sms-detail-main-row:hover td {
  background-color: #243048 !important;
}

.darkmode .sms-detail-main-row.is-selected td {
  background-color: #2d3748 !important;
}

.darkmode .sms-detail-expand-row td > div {
  background-color: #151c2c !important;
  border-color: #334155 !important;
}

.darkmode .sms-detail-expand-row .bg-body {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* 13.8 조직현황 관리(Organization) 레이아웃 및 다크모드 */
.organization-panel {
  min-height: 610px;
}

.organization-tree-scroll {
  min-height: 480px;
  max-height: 600px;
  overflow-y: auto;
}

.organization-staff-panel {
  min-height: 610px;
}

.organization-staff-table-scroll {
  max-height: 520px;
  overflow-y: auto;
}

.darkmode .organization-tree-scroll,
.darkmode .organization-staff-panel,
.darkmode .organization-panel {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
}

.darkmode #staffList .table {
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode #staffList thead th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
}

.darkmode #staffList tbody td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode #staffList tbody tr:hover td {
  background-color: #243048 !important;
}

.darkmode #staffList tbody tr.is-highlighted td {
  background-color: #2d3748 !important;
  color: #60a5fa !important;
  font-weight: bold;
}

/* 13.9 참여고객 조직설정 탭(Customer Organization Tab) Clean UI & 다크모드 */
.cust-org-info-card {
  border-radius: 6px;
}

.cust-org-form-wrap {
  border-radius: 8px;
}

.darkmode .cust-org-form-wrap {
  background-color: #1a2234 !important;
  border-color: #334155 !important;
}

.darkmode .cust-org-info-card {
  background-color: #151c2c !important;
  border-color: #334155 !important;
}

.darkmode .cust-org-info-card .text-secondary {
  color: #94a3b8 !important;
}

/* 13.10 모자계량기 관리(Parent-Child Metering) Clean UI & 다크모드 */
.parent-child-workspace {
  min-height: calc(100vh - 220px);
}

.parent-child-table th {
  background-color: var(--bs-tertiary-bg);
  font-weight: 600;
}

.darkmode .parent-child-table {
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode .parent-child-table th {
  background-color: #151c2c !important;
  color: #93c5fd !important;
  border-color: #334155 !important;
}

.darkmode .parent-child-table td {
  background-color: #1a2234 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

.darkmode .select2-container .select2-choice {
  background-color: #1a2234 !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.darkmode .select2-drop {
  background-color: #1a2234 !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.darkmode .select2-search input {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.darkmode .select2-results .select2-highlighted {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* 13.11 대시보드 달력(Dashboard Calendar) Clean UI & 다크모드 & Floating Tooltip */
.top-summary-calendar {
  height: clamp(11rem, 20vh, 13rem) !important;
  min-height: 180px !important;
  margin-top: 0.2rem;
  overflow: hidden;
}

/* 네비게이션 버튼 포커스 시 보더 변경으로 인한 리플로우/출렁임 방지 */
.cal-nav-btn-group .btn {
  box-sizing: border-box !important;
  border: 1px solid var(--bs-btn-border-color) !important;
  outline: none !important;
  box-shadow: none !important;
}

.cal-nav-btn-group .btn:focus,
.cal-nav-btn-group .btn:active,
.cal-nav-btn-group .btn:hover {
  border: 1px solid var(--bs-btn-border-color) !important;
  outline: none !important;
  box-shadow: none !important;
}

.top-summary-calendar .toastui-calendar-grid-cell-date {
  width: 1.45rem;
  height: 1.45rem;
  line-height: 1.45rem;
  font-size: 0.76rem;
}

.top-summary-calendar .toastui-calendar-weekday-grid-date {
  width: 1.45rem;
  height: 1.45rem;
  line-height: 1.45rem;
  font-size: 0.76rem;
}

.top-summary-calendar .toastui-calendar-template-monthGridHeader {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.5rem;
}

/* 요일 헤더 스타일링 (기본 라이트모드) */
.top-summary-calendar .toastui-calendar-day-name__item {
  font-size: 0.85rem;
  font-weight: 700;
}

/* TOAST UI 기본 텍스트 바 및 '+N more' 텍스트 숨김 (셀 채색 방식 적용) */
.top-summary-calendar .toastui-calendar-weekday-event-block,
.top-summary-calendar .toastui-calendar-weekday-events,
.top-summary-calendar .toastui-calendar-weekday-exceed-in-month,
.top-summary-calendar .toastui-calendar-grid-cell-more-events,
.top-summary-calendar .toastui-calendar-see-more,
.top-summary-calendar [class*="exceed"],
.top-summary-calendar [class*="more"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* 날짜 셀 배경 채색 클래스 (라이트모드) */
.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid {
  background-color: rgba(59, 130, 246, 0.18) !important;
  transition: background-color 0.2s ease;
}
.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid:hover {
  background-color: rgba(59, 130, 246, 0.32) !important;
}

.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept {
  background-color: rgba(16, 185, 129, 0.2) !important;
  transition: background-color 0.2s ease;
}
.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept:hover {
  background-color: rgba(16, 185, 129, 0.35) !important;
}

.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire {
  background-color: rgba(239, 68, 68, 0.2) !important;
  transition: background-color 0.2s ease;
}
.top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire:hover {
  background-color: rgba(239, 68, 68, 0.35) !important;
}

.calendar-legend .badge {
  cursor: default;
}

.cal-floating-tooltip {
  position: absolute;
  z-index: 9999;
  display: none;
  background-color: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  pointer-events: none;
  width: max-content;
  min-width: 180px;
  max-width: 270px;
  word-break: keep-all;
  white-space: normal;
}

.cal-tooltip-header {
  border-bottom: 1px solid #e2e8f0;
}

.cal-tooltip-divider {
  height: 1px;
  background-color: #e2e8f0;
  width: 100%;
}

.cal-tooltip-footer {
  border-top: 1px solid #e2e8f0;
}

.darkmode .cal-tooltip-header,
[data-bs-theme="dark"] .cal-tooltip-header {
  border-bottom-color: #334155 !important;
}

.darkmode .cal-tooltip-divider,
[data-bs-theme="dark"] .cal-tooltip-divider {
  background-color: #334155 !important;
}

.darkmode .cal-tooltip-footer,
[data-bs-theme="dark"] .cal-tooltip-footer {
  border-top-color: #334155 !important;
}

/* 요일 헤더 (.toastui-calendar-day-names) 완벽 타겟팅 */
.top-summary-calendar .toastui-calendar-day-names,
.top-summary-calendar .toastui-calendar-day-names > div,
.top-summary-calendar .toastui-calendar-day-name__item {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  line-height: 1.6rem !important;
}

.top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span div {
  color: #ef4444 !important; /* 일요일 Red */
  font-weight: 700 !important;
}

.top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span div,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span div,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span div,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span div,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span div {
  color: #334155 !important; /* 평일 Dark Slate */
  font-weight: 700 !important;
}

.top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span,
.top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span div {
  color: #3b82f6 !important; /* 토요일 Blue */
  font-weight: 700 !important;
}

/* 다크모드 대응 */
.darkmode .top-summary-calendar,
[data-bs-theme="dark"] .top-summary-calendar {
  color: #f1f5f9;
}

.darkmode .top-summary-calendar .toastui-calendar-layout,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-layout {
  background-color: transparent !important;
  border-color: #334155 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-month-daygrid,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-month-daygrid {
  background-color: transparent !important;
  border-color: #334155 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-day-names,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names {
  background-color: #1e293b !important;
  border-bottom: 1px solid #334155 !important;
}

/* 다크모드 요일별 색상 명확화 */
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(1) span div {
  color: #f87171 !important; /* 다크모드 일요일 밝은 레드 */
  font-weight: 700 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span div,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span div,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span div,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span div,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(2) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(3) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(4) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(5) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(6) span div {
  color: #f8fafc !important; /* 다크모드 평일 밝은 화이트 */
  font-weight: 700 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span,
.darkmode .top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span div,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-day-names div:nth-child(7) span div {
  color: #60a5fa !important; /* 다크모드 토요일 밝은 블루 */
  font-weight: 700 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell {
  border-color: #334155 !important;
  background-color: transparent !important;
}

/* 내부 헤더 및 셀 래퍼의 불투명 배경 덮어쓰기 방지 (투명 처리) */
.darkmode .top-summary-calendar .toastui-calendar-grid-cell-header,
.darkmode .top-summary-calendar .toastui-calendar-month-week-header,
.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell-body,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-grid-cell-header,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-month-week-header,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell-body {
  background-color: transparent !important;
  background: transparent !important;
}

/* 다크모드 날짜 셀 채색 (선명한 색상 및 글로우 효과) */
.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid {
  background-color: rgba(59, 130, 246, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.6);
}
.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid:hover,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-bid:hover {
  background-color: rgba(59, 130, 246, 0.65) !important;
}

.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept {
  background-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.6);
}
.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept:hover,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-accept:hover {
  background-color: rgba(16, 185, 129, 0.65) !important;
}

.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire {
  background-color: rgba(239, 68, 68, 0.48) !important;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.6);
}
.darkmode .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire:hover,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-daygrid-cell.cal-cell-expire:hover {
  background-color: rgba(239, 68, 68, 0.7) !important;
}

.darkmode .top-summary-calendar .toastui-calendar-grid-cell-date,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-grid-cell-date {
  color: #f1f5f9 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-holiday-sun .toastui-calendar-grid-cell-date,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-holiday-sun .toastui-calendar-grid-cell-date {
  color: #f87171 !important;
}

.darkmode .top-summary-calendar .toastui-calendar-holiday-sat .toastui-calendar-grid-cell-date,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-holiday-sat .toastui-calendar-grid-cell-date {
  color: #60a5fa !important;
}

.darkmode .top-summary-calendar .toastui-calendar-near-month-day .toastui-calendar-grid-cell-date,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-near-month-day .toastui-calendar-grid-cell-date {
  color: #64748b !important;
}

.darkmode .top-summary-calendar .toastui-calendar-grid-cell-date.toastui-calendar-weekday-grid-date-decorator,
[data-bs-theme="dark"] .top-summary-calendar .toastui-calendar-grid-cell-date.toastui-calendar-weekday-grid-date-decorator {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

.darkmode .cal-floating-tooltip,
[data-bs-theme="dark"] .cal-floating-tooltip {
  background-color: #1e293b;
  color: #f1f5f9;
  border-color: #475569;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════
   TOAST UI Grid 다크모드 스크롤바 커스텀
   ═══════════════════════════════════════════════════ */
/* 1. 브라우저 네이티브 webkit 스크롤바 대응 (크롬, 엣지 등) */
.darkmode .tui-grid-container *::-webkit-scrollbar,
.darkmode .tui-grid-body-area::-webkit-scrollbar,
.darkmode .tui-grid-body-container::-webkit-scrollbar,
[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar,
[data-bs-theme="dark"] .tui-grid-body-area::-webkit-scrollbar,
[data-bs-theme="dark"] .tui-grid-body-container::-webkit-scrollbar {
  background-color: #1e293b;
}

.darkmode .tui-grid-container *::-webkit-scrollbar-track,
.darkmode .tui-grid-body-area::-webkit-scrollbar-track,
.darkmode .tui-grid-body-container::-webkit-scrollbar-track,
[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-track,
[data-bs-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-track,
[data-bs-theme="dark"] .tui-grid-body-container::-webkit-scrollbar-track {
  background-color: #1e293b !important;
  border-left: 1px solid #334155;
  border-top: 1px solid #334155;
}

.darkmode .tui-grid-container *::-webkit-scrollbar-thumb,
.darkmode .tui-grid-body-area::-webkit-scrollbar-thumb,
.darkmode .tui-grid-body-container::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .tui-grid-body-container::-webkit-scrollbar-thumb {
  background-color: #475569 !important;
  border-radius: 5px;
  border: 2px solid #1e293b;
}

.darkmode .tui-grid-container *::-webkit-scrollbar-thumb:hover,
.darkmode .tui-grid-body-area::-webkit-scrollbar-thumb:hover,
.darkmode .tui-grid-body-container::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-thumb:hover,
[data-bs-theme="dark"] .tui-grid-body-container::-webkit-scrollbar-thumb:hover {
  background-color: #64748b !important;
}

.darkmode .tui-grid-container *::-webkit-scrollbar-corner,
[data-bs-theme="dark"] .tui-grid-container *::-webkit-scrollbar-corner {
  background-color: #1e293b !important;
}

/* 2. TOAST UI Grid 가상 커스텀 스크롤바 엘리먼트 대응 */
.darkmode .tui-grid-scrollbar-y,
.darkmode .tui-grid-scrollbar-x,
.darkmode .tui-grid-scrollbar-right-top,
.darkmode .tui-grid-scrollbar-right-bottom,
.darkmode .tui-grid-scrollbar-left-top,
.darkmode .tui-grid-scrollbar-left-bottom,
.darkmode .tui-grid-scrollbar-y-inner,
.darkmode .tui-grid-scrollbar-x-inner,
.darkmode .tui-grid-header-area .tui-grid-scrollbar-right-top,
[data-bs-theme="dark"] .tui-grid-scrollbar-y,
[data-bs-theme="dark"] .tui-grid-scrollbar-x,
[data-bs-theme="dark"] .tui-grid-scrollbar-right-top,
[data-bs-theme="dark"] .tui-grid-scrollbar-right-bottom,
[data-bs-theme="dark"] .tui-grid-scrollbar-left-top,
[data-bs-theme="dark"] .tui-grid-scrollbar-left-bottom,
[data-bs-theme="dark"] .tui-grid-scrollbar-y-inner,
[data-bs-theme="dark"] .tui-grid-scrollbar-x-inner,
[data-bs-theme="dark"] .tui-grid-header-area .tui-grid-scrollbar-right-top {
  background-color: #1e293b !important;
  background: #1e293b !important;
  border-color: #334155 !important;
}

.darkmode .tui-grid-scrollbar-border,
[data-bs-theme="dark"] .tui-grid-scrollbar-border {
  background-color: #334155 !important;
  border-color: #334155 !important;
}

.darkmode .tui-grid-scrollbar-thumb,
[data-bs-theme="dark"] .tui-grid-scrollbar-thumb {
  background-color: #475569 !important;
  border-radius: 4px !important;
  border: 1px solid #334155 !important;
}

.darkmode .tui-grid-scrollbar-thumb:hover,
.darkmode .tui-grid-scrollbar-thumb:active,
[data-bs-theme="dark"] .tui-grid-scrollbar-thumb:hover,
[data-bs-theme="dark"] .tui-grid-scrollbar-thumb:active {
  background-color: #64748b !important;
}