/* 
 * CSP-Safe Utility Classes
 * 用於替代 inline styles 以符合 Content Security Policy
 * 移除 style-src 'unsafe-inline' 後需使用這些 class
 */

/* Display utilities */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-flex {
  display: flex !important;
}
.d-table-cell {
  display: table-cell !important;
}

/* Height utilities */
.h-0 {
  height: 0 !important;
}
.h-63px {
  height: 63px !important;
}
.h-100vh {
  height: 100vh !important;
}

/* Width utilities */
.w-0 {
  width: 0 !important;
}
.w-98 {
  width: 98% !important;
}

/* Margin utilities */
.mt-0 {
  margin-top: 0 !important;
}
.mt-70px {
  margin-top: 70px !important;
}

/* Padding utilities */
.pb-0 {
  padding-bottom: 0 !important;
}

/* Position utilities */
.pos-absolute {
  position: absolute !important;
}

/* Overflow utilities */
.overflow-hidden {
  overflow: hidden !important;
}

/* Z-index utilities */
.z-index-6 {
  z-index: 6 !important;
}

/* Card body height */
.card-body-full {
  height: 89.5% !important;
}

/* Specific component utilities */
.etf-rank-show {
  display: table !important;
}

.go-back-top-show {
  display: flex !important;
}

.qs-wrap-show {
  display: flex !important;
}

.qs-btn-show {
  display: flex !important;
}

.sub-menu-flex {
  display: flex !important;
}

.list-head-flex {
  display: flex !important;
}

/* Image loading positioning */
.img-loading-positioned {
  display: block !important;
}

/* Swiper container states */
.swiper-container-hidden {
  width: 0 !important;
  height: 0 !important;
}

/* Form visibility */
.form-fullheight {
  height: 100vh !important;
}

/* Busy image visibility */
.busyimg-hidden {
  display: none !important;
}

/* Embedded iframe states */
.embedded-iframe-hidden {
  display: none !important;
}

.embedded-iframe-visible {
  display: inline !important;
}

/* Transform utilities (using CSS custom properties for dynamic values) */
.pie-rotated-left {
  transform: rotate(var(--rotation-deg, 0deg));
  -webkit-transform: rotate(var(--rotation-deg, 0deg));
  -moz-transform: rotate(var(--rotation-deg, 0deg));
  -o-transform: rotate(var(--rotation-deg, 0deg));
}

.pie-rotated-right {
  transform: rotate(var(--rotation-deg, 0deg));
  -webkit-transform: rotate(var(--rotation-deg, 0deg));
  -moz-transform: rotate(var(--rotation-deg, 0deg));
  -o-transform: rotate(var(--rotation-deg, 0deg));
}

/* Dynamic width using CSS variables */
.progress-width {
  width: var(--progress-percent, 0%);
}

/* Dynamic positioning using CSS variables */
.positioned-dynamic {
  position: absolute;
  top: var(--pos-top, 0px);
  left: var(--pos-left, 0px);
}

/* Excel export table styles */
.excel-header {
  background-color: #004ea0;
  color: #fff;
}

.excel-blue-row {
  background-color: #377eb0;
  color: #ffffff;
}

.excel-orange-cell {
  background-color: #f4511e;
  color: #ffffff;
}