/* 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*/
.darkmode .tui-datepicker table thead th {
  opacity: 1 !important;
  color: #777 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker table tbody th {
  opacity: 1 !important;
  color: #999 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker table tbody td {
  opacity: 1 !important;
  color: #999 !important;
  background-color: #fefefe !important;
}
.darkmode .tui-datepicker .tui-is-selectable.tui-is-selected,
.darkmode .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
  background-color: #4b96e6 !important;
  color: #fff !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;
  }
}