/* 字體相關 */
@font-face{font-family:iansui;src:url('../../fonts/Iansui-Regular.woff2');}
.text-iansui{font-family:iansui;}
.fs-20{font-size:20px;}
.fs-25{font-size:25px;}
.fs-30{font-size:30px;}
.fs-35{font-size:35px;}
.fs-40{font-size:40px;}
.fs-45{font-size:45px;}
.fs-50{font-size:50px;}

/* 背景相關 */
.bg-rgb-cycle {
  background: linear-gradient(
    90deg,
    #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500,
    #ffff00, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00,
    #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5,
    #00ffff, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff,
    #0000ff, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff,
    #ff00ff, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b,
    #ff0000
  );
  background-size: 200% 100%;
  animation: bg-rgb-cycle 12s linear infinite;
}
@keyframes bg-rgb-cycle {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* RGB 循環按鈕 */
@property --btn-rgb-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btn-rgb,
.btn-outline-rgb {
  --btn-rgb-colors:
    #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500,
    #ffff00, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00,
    #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5,
    #00ffff, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff,
    #0000ff, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff,
    #ff00ff, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b,
    #ff0000;
  --btn-rgb-gradient: linear-gradient(90deg, var(--btn-rgb-colors));
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn-rgb {
  background-image: var(--btn-rgb-gradient);
  background-size: 200% 100%;
  animation: btn-rgb-slide 4s linear infinite;
}
.btn-rgb:hover {
  color: #fff;
  filter: brightness(.85);
}
.btn-outline-rgb {
  color: var(--bs-body-color);
  text-shadow: none;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bs-body-bg), var(--bs-body-bg)) padding-box,
    conic-gradient(from var(--btn-rgb-angle), var(--btn-rgb-colors)) border-box;
  animation: btn-rgb-border-spin 3s linear infinite;
}
.btn-outline-rgb:hover,
.btn-outline-rgb:active,
.btn-outline-rgb.active {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  background-image: var(--btn-rgb-gradient);
  background-size: 200% 100%;
  animation: btn-rgb-slide 4s linear infinite;
}
.btn-rgb:focus-visible,
.btn-outline-rgb:focus-visible {
  color: #fff;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .3);
}
.btn-rgb.btn:active,
.btn-rgb.btn.active,
.btn-outline-rgb.btn:active,
.btn-outline-rgb.btn.active {
  color: #fff !important;
  border-color: transparent !important;
  background-color: transparent;
  filter: brightness(.78);
  transform: translateY(1px);
}
.btn-rgb:disabled,
.btn-outline-rgb:disabled,
.btn-rgb.disabled,
.btn-outline-rgb.disabled {
  pointer-events: none;
  filter: grayscale(.65);
  opacity: .65;
}
@keyframes btn-rgb-slide {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}
@keyframes btn-rgb-border-spin {
  to { --btn-rgb-angle: 360deg; }
}

/* RGB 循環卡片 */
.card.card-rgb {
  --card-rgb-colors:
    #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500,
    #ffff00, #d5ff00, #aaff00, #80ff00, #55ff00, #2bff00,
    #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5,
    #00ffff, #00d5ff, #00aaff, #0080ff, #0055ff, #002bff,
    #0000ff, #2b00ff, #5500ff, #8000ff, #aa00ff, #d500ff,
    #ff00ff, #ff00d5, #ff00aa, #ff0080, #ff0055, #ff002b,
    #ff0000;
  position: relative;
  border-top-color: transparent;
}
.card.card-rgb::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -1px;
  left: -1px;
  z-index: 1;
  height: 3px;
  pointer-events: none;
  border-radius: var(--bs-card-border-radius) var(--bs-card-border-radius) 0 0;
  background: linear-gradient(90deg, var(--card-rgb-colors));
  background-size: 200% 100%;
  animation: btn-rgb-slide 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .btn-rgb,
  .btn-outline-rgb,
  .btn-outline-rgb:hover,
  .card.card-rgb::before {
    animation: none;
  }
}

/* 圖示相關 */
.cursor-move{cursor:move;}
.cursor-not-allowed{cursor:not-allowed;}
.cursor-pointer{cursor:pointer;}

/* AJAX table loading skeleton */
.loading-skeleton {
  --loading-base: color-mix(in srgb, var(--bs-secondary-bg) 82%, var(--bs-body-color));
  --loading-highlight: color-mix(in srgb, var(--bs-body-bg) 82%, white);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--bs-border-color) 75%, transparent);
  box-shadow: 0 .5rem 1.5rem rgba(33, 37, 41, .06);
}
.loading-skeleton .card-header {
  min-height: 3.25rem;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, var(--bs-primary));
}
.loading-skeleton .card-header::after { display: none; }
.loading-skeleton-bar {
  display: block;
  width: 100%;
  height: .72rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--loading-base);
  position: relative;
}
.loading-skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--loading-highlight) 48%, transparent 76%);
  transform: translateX(-110%);
  animation: loading-skeleton-shimmer 1.35s ease-in-out infinite;
  animation-delay: var(--loading-row-delay, 0ms);
}
.loading-skeleton-title { flex: 0 0 auto; height: .9rem; }
.loading-skeleton-pagination {
  display: grid;
  grid-template-columns: repeat(5, 2.15rem);
  height: 2rem;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.loading-skeleton-page {
  background: var(--loading-base);
  border-left: 1px solid var(--bs-border-color);
  opacity: .72;
}
.loading-skeleton-page:first-child { border-left: 0; }
.loading-skeleton-page:nth-child(3) { background: color-mix(in srgb, var(--bs-primary) 58%, var(--loading-base)); }
.loading-skeleton-row {
  display: grid;
  align-items: center;
  min-height: 2.1rem;
  border-top: 1px solid var(--bs-border-color);
}
.loading-skeleton-cell {
  min-width: 0;
  padding: .55rem .75rem;
  border-left: 1px solid var(--bs-border-color);
}
.loading-skeleton-cell:first-child { border-left: 0; }
.loading-skeleton-row-head { min-height: 2rem; background: var(--bs-tertiary-bg); }
.loading-skeleton-row-head .loading-skeleton-bar { height: .58rem; opacity: .75; }
@keyframes loading-skeleton-shimmer {
  100% { transform: translateX(110%); }
}
@media (max-width: 575.98px) {
  .loading-skeleton-pagination { grid-template-columns: repeat(5, 1.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-skeleton-bar::after { animation: none; }
}

/* AJAX modal loading overlay */
#ajax-modal .modal-content {
  position: relative;
}
#ajax-modal .modal-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, .72);
  cursor: wait;
}

/* SweetAlert2 follows the current AdminLTE / Bootstrap color mode. */
[data-bs-theme] .swal2-container {
  --swal2-background: var(--bs-body-bg);
  --swal2-color: var(--bs-body-color);
  --swal2-border: 1px solid var(--bs-border-color);
  --swal2-input-background: var(--bs-body-bg);
  --swal2-input-border: 1px solid var(--bs-border-color);
  --swal2-input-focus-border: 1px solid var(--bs-primary-border-subtle);
  --swal2-input-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  --swal2-validation-message-background: var(--bs-danger-bg-subtle);
  --swal2-validation-message-color: var(--bs-danger-text-emphasis);
  --swal2-footer-border-color: var(--bs-border-color);
  --swal2-footer-background: var(--bs-tertiary-bg);
  --swal2-footer-color: var(--bs-secondary-color);
  --swal2-close-button-color: var(--bs-body-color);
  --swal2-toast-border: 1px solid var(--bs-border-color);
  --swal2-toast-box-shadow: var(--bs-box-shadow-lg);
}