/* ==========================================================================
   >>> [START] METRONIC COMPREHENSIVE EXTRACTED CORE FOR FRONTEND <<<
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. 完整延伸字級系統 (Full Font Sizes: fs-1 ~ fs-10, fs-2x ~ fs-7tx)
   ------------------------------------------------------------------------- */
.fs-1 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-2 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-3 {
  font-size: calc(1.26rem + 0.12vw) !important;
}

.fs-4 {
  font-size: 1.25rem !important;
}

.fs-5 {
  font-size: 1.15rem !important;
}

.fs-6 {
  font-size: 1.075rem !important;
}

.fs-7 {
  font-size: 0.95rem !important;
}

.fs-8 {
  font-size: 0.85rem !important;
}

.fs-9 {
  font-size: 0.75rem !important;
}

.fs-10 {
  font-size: 0.5rem !important;
}

/* 語意化字級 */
.fs-sm {
  font-size: 0.95rem !important;
}

.fs-base {
  font-size: 1rem !important;
}

.fs-lg {
  font-size: 1.075rem !important;
}

.fs-xl {
  font-size: 1.21rem !important;
}

.fs-fluid {
  font-size: 100% !important;
}

/* 響應式特大字級 (Fluid Headline Sizes) */
.fs-2x {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-2qx {
  font-size: calc(1.35rem + 1.2vw) !important;
}

.fs-2hx {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2tx {
  font-size: calc(1.4rem + 1.8vw) !important;
}

.fs-3x {
  font-size: calc(1.425rem + 2.1vw) !important;
}

.fs-3qx {
  font-size: calc(1.45rem + 2.4vw) !important;
}

.fs-3hx {
  font-size: calc(1.475rem + 2.7vw) !important;
}

.fs-3tx {
  font-size: calc(1.5rem + 3vw) !important;
}

.fs-4x {
  font-size: calc(1.525rem + 3.3vw) !important;
}

.fs-4qx {
  font-size: calc(1.55rem + 3.6vw) !important;
}

.fs-4hx {
  font-size: calc(1.575rem + 3.9vw) !important;
}

.fs-4tx {
  font-size: calc(1.6rem + 4.2vw) !important;
}

.fs-5x {
  font-size: calc(1.625rem + 4.5vw) !important;
}

.fs-5qx {
  font-size: calc(1.65rem + 4.8vw) !important;
}

.fs-5hx {
  font-size: calc(1.675rem + 5.1vw) !important;
}

.fs-5tx {
  font-size: calc(1.7rem + 5.4vw) !important;
}

.fs-6x {
  font-size: calc(1.725rem + 5.7vw) !important;
}

.fs-6qx {
  font-size: calc(1.75rem + 6vw) !important;
}

.fs-6hx {
  font-size: calc(1.775rem + 6.3vw) !important;
}

.fs-6tx {
  font-size: calc(1.8rem + 6.6vw) !important;
}

.fs-7x {
  font-size: calc(1.825rem + 6.9vw) !important;
}

.fs-7qx {
  font-size: calc(1.85rem + 7.2vw) !important;
}

.fs-7hx {
  font-size: calc(1.875rem + 7.5vw) !important;
}

.fs-7tx {
  font-size: calc(1.9rem + 7.8vw) !important;
}

/* -------------------------------------------------------------------------
   2. 字體粗細與樣式 (Font Weights & Font Styles)
   ------------------------------------------------------------------------- */
.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 500 !important;
}

.fw-bold {
  font-weight: 600 !important;
}

.fw-bolder {
  font-weight: 700 !important;
}

/* -------------------------------------------------------------------------
   3. 行高與字距 (Line Heights & Letter Spacing)
   ------------------------------------------------------------------------- */
.lh-0 {
  line-height: 0 !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 1.75 !important;
}

.lh-xl {
  line-height: 2 !important;
}

.lh-xxl {
  line-height: 2.25 !important;
}

.ls-1 {
  letter-spacing: 0.1rem !important;
}

.ls-2 {
  letter-spacing: 0.115rem !important;
}

.ls-3 {
  letter-spacing: 0.125rem !important;
}

.ls-4 {
  letter-spacing: 0.25rem !important;
}

.ls-5 {
  letter-spacing: 0.5rem !important;
}

.ls-n1 {
  letter-spacing: -0.1rem !important;
}

.ls-n2 {
  letter-spacing: -0.115rem !important;
}

.ls-n3 {
  letter-spacing: -0.125rem !important;
}

.ls-n4 {
  letter-spacing: -0.25rem !important;
}

.ls-n5 {
  letter-spacing: -0.5rem !important;
}

/* -------------------------------------------------------------------------
   4. 滑鼠與互動游標 (Cursor & Interactive Utilities)
   ------------------------------------------------------------------------- */
.cursor-pointer {
  cursor: pointer !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

.cursor-grab {
  cursor: grab !important;
}

.cursor-zoom-in {
  cursor: zoom-in !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-help {
  cursor: help !important;
}

/* Hover 變色工具 */
.text-hover-primary {
  transition: color 0.2s ease;
}

.text-hover-primary:hover {
  color: var(--bs-primary, #1b84ff) !important;
}

.text-hover-success:hover {
  color: var(--bs-success, #17c653) !important;
}

.text-hover-danger:hover {
  color: var(--bs-danger, #f8285a) !important;
}

.text-hover-warning:hover {
  color: var(--bs-warning, #f6c000) !important;
}

.text-hover-info:hover {
  color: var(--bs-info, #7239ea) !important;
}

.text-hover-dark:hover {
  color: var(--bs-dark, #1e2129) !important;
}

/* -------------------------------------------------------------------------
   5. 微調透明度及 Hover 效果 (Fine Opacity & Hover States)
   ------------------------------------------------------------------------- */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-5 {
  opacity: 0.05 !important;
}

.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-15 {
  opacity: 0.15 !important;
}

.opacity-20 {
  opacity: 0.2 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.opacity-0-hover:hover {
  opacity: 0 !important;
}

.opacity-5-hover:hover {
  opacity: 0.05 !important;
}

.opacity-10-hover:hover {
  opacity: 0.1 !important;
}

.opacity-15-hover:hover {
  opacity: 0.15 !important;
}

.opacity-20-hover:hover {
  opacity: 0.2 !important;
}

.opacity-25-hover:hover {
  opacity: 0.25 !important;
}

.opacity-50-hover:hover {
  opacity: 0.5 !important;
}

.opacity-75-hover:hover {
  opacity: 0.75 !important;
}

.opacity-100-hover:hover {
  opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   6. 邊框工具強化 (Border Widths & Styles)
   ------------------------------------------------------------------------- */
.border-top-0 {
  border-top-width: 0 !important;
}

.border-top-1 {
  border-top-width: 1px !important;
}

.border-top-2 {
  border-top-width: 2px !important;
}

.border-top-3 {
  border-top-width: 3px !important;
}

.border-top-4 {
  border-top-width: 4px !important;
}

.border-top-5 {
  border-top-width: 5px !important;
}

.border-bottom-0 {
  border-bottom-width: 0 !important;
}

.border-bottom-1 {
  border-bottom-width: 1px !important;
}

.border-bottom-2 {
  border-bottom-width: 2px !important;
}

.border-bottom-3 {
  border-bottom-width: 3px !important;
}

.border-bottom-4 {
  border-bottom-width: 4px !important;
}

.border-bottom-5 {
  border-bottom-width: 5px !important;
}

.border-dashed {
  border-style: dashed !important;
}

.border-dotted {
  border-style: dotted !important;
}

/* -------------------------------------------------------------------------
   7. 層級工具 (Z-Index)
   ------------------------------------------------------------------------- */
.z-index-n1 {
  z-index: -1 !important;
}

.z-index-n2 {
  z-index: -2 !important;
}

.z-index-0 {
  z-index: 0 !important;
}

.z-index-1 {
  z-index: 1 !important;
}

.z-index-2 {
  z-index: 2 !important;
}

.z-index-3 {
  z-index: 3 !important;
}

/* -------------------------------------------------------------------------
   8. 延伸間距擴充 (Extended Spacing: 7 ~ 20)
   ------------------------------------------------------------------------- */
.m-7 {
  margin: 1.75rem !important;
}

.m-8 {
  margin: 2rem !important;
}

.m-9 {
  margin: 2.25rem !important;
}

.m-10 {
  margin: 2.5rem !important;
}

.m-12 {
  margin: 3rem !important;
}

.m-15 {
  margin: 3.75rem !important;
}

.m-20 {
  margin: 5rem !important;
}

.mt-7 {
  margin-top: 1.75rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mt-9 {
  margin-top: 2.25rem !important;
}

.mt-10 {
  margin-top: 2.5rem !important;
}

.mt-12 {
  margin-top: 3rem !important;
}

.mt-15 {
  margin-top: 3.75rem !important;
}

.mt-20 {
  margin-top: 5rem !important;
}

.mb-7 {
  margin-bottom: 1.75rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.mb-9 {
  margin-bottom: 2.25rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.mb-12 {
  margin-bottom: 3rem !important;
}

.mb-15 {
  margin-bottom: 3.75rem !important;
}

.mb-20 {
  margin-bottom: 5rem !important;
}

.p-7 {
  padding: 1.75rem !important;
}

.p-8 {
  padding: 2rem !important;
}

.p-9 {
  padding: 2.25rem !important;
}

.p-10 {
  padding: 2.5rem !important;
}

.p-12 {
  padding: 3rem !important;
}

.p-15 {
  padding: 3.75rem !important;
}

.p-20 {
  padding: 5rem !important;
}

.py-7 {
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.py-8 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.py-9 {
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.py-10 {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.py-12 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.py-15 {
  padding-top: 3.75rem !important;
  padding-bottom: 3.75rem !important;
}

.py-20 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

.px-7 {
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
}

.px-8 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.px-9 {
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
}

.px-10 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.px-12 {
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}

.px-15 {
  padding-left: 3.75rem !important;
  padding-right: 3.75rem !important;
}

.px-20 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}

.gap-7 {
  gap: 1.75rem !important;
}

.gap-8 {
  gap: 2rem !important;
}

.gap-9 {
  gap: 2.25rem !important;
}

.gap-10 {
  gap: 2.5rem !important;
}

.gap-12 {
  gap: 3rem !important;
}

.gap-15 {
  gap: 3.75rem !important;
}

.gap-20 {
  gap: 5rem !important;
}

/* -------------------------------------------------------------------------
   9. 頭像與符號元件 (Symbol & Avatar Component)
   ------------------------------------------------------------------------- */
.symbol {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  border-radius: 0.475rem;
}

.symbol>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: inline-block;
}

.symbol.symbol-circle,
.symbol.symbol-circle>img,
.symbol.symbol-circle .symbol-label {
  border-radius: 50% !important;
}

.symbol-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  width: 100%;
  height: 100%;
  background-color: var(--bs-gray-200, #f1f1f4);
  color: var(--bs-gray-800, #252f4a);
}

/* 尺寸定義 */
.symbol-20px {
  width: 20px;
  height: 20px;
}

.symbol-25px {
  width: 25px;
  height: 25px;
}

.symbol-30px {
  width: 30px;
  height: 30px;
}

.symbol-35px {
  width: 35px;
  height: 35px;
}

.symbol-40px {
  width: 40px;
  height: 40px;
}

.symbol-45px {
  width: 45px;
  height: 45px;
}

.symbol-50px {
  width: 50px;
  height: 50px;
}

.symbol-60px {
  width: 60px;
  height: 60px;
}

.symbol-75px {
  width: 75px;
  height: 75px;
}

.symbol-100px {
  width: 100px;
  height: 100px;
}

/* 徽章角標 (Symbol Badge) */
.symbol .symbol-badge {
  position: absolute;
  border: 2px solid #ffffff;
  border-radius: 100%;
  top: 0;
  start: 100%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
}

/* -------------------------------------------------------------------------
   10. 裝飾點與條紋 (Bullet Components)
   ------------------------------------------------------------------------- */
.bullet {
  display: inline-block;
  background-color: var(--bs-gray-400, #c4cada);
  flex-shrink: 0;
}

.bullet.bullet-dot {
  width: 4px;
  height: 4px;
  border-radius: 100% !important;
}

.bullet.bullet-vertical {
  width: 1px;
  height: 16px;
  vertical-align: middle;
}

.bullet.bullet-line {
  width: 10px;
  height: 2px;
  border-radius: 1px;
}

/* -------------------------------------------------------------------------
   11. 柔和色系背景、徽章與按鈕 (Soft / Light UI System)
   ------------------------------------------------------------------------- */
/* 柔和背景色 (Light Backgrounds) */
.bg-light-primary {
  background-color: rgba(27, 132, 255, 0.1) !important;
  color: #1b84ff !important;
}

.bg-light-success {
  background-color: rgba(23, 198, 83, 0.1) !important;
  color: #17c653 !important;
}

.bg-light-danger {
  background-color: rgba(248, 40, 90, 0.1) !important;
  color: #f8285a !important;
}

.bg-light-warning {
  background-color: rgba(246, 192, 0, 0.1) !important;
  color: #f6c000 !important;
}

.bg-light-info {
  background-color: rgba(114, 57, 234, 0.1) !important;
  color: #7239ea !important;
}

.bg-light-dark {
  background-color: rgba(30, 33, 41, 0.1) !important;
  color: #1e2129 !important;
}

/* 柔和徽章 (Light Badges) */
.badge.badge-light-primary {
  background-color: rgba(27, 132, 255, 0.1) !important;
  color: #1b84ff !important;
}

.badge.badge-light-success {
  background-color: rgba(23, 198, 83, 0.1) !important;
  color: #17c653 !important;
}

.badge.badge-light-danger {
  background-color: rgba(248, 40, 90, 0.1) !important;
  color: #f8285a !important;
}

.badge.badge-light-warning {
  background-color: rgba(246, 192, 0, 0.1) !important;
  color: #f6c000 !important;
}

.badge.badge-light-info {
  background-color: rgba(114, 57, 234, 0.1) !important;
  color: #7239ea !important;
}

.badge.badge-light-dark {
  background-color: rgba(30, 33, 41, 0.1) !important;
  color: #1e2129 !important;
}

/* 柔和按鈕 (Light Buttons) */
.btn.btn-light-primary {
  color: #1b84ff !important;
  background-color: rgba(27, 132, 255, 0.1) !important;
  border-color: transparent !important;
}

.btn.btn-light-primary:hover,
.btn.btn-light-primary:active {
  color: #ffffff !important;
  background-color: #1b84ff !important;
}

.btn.btn-light-success {
  color: #17c653 !important;
  background-color: rgba(23, 198, 83, 0.1) !important;
  border-color: transparent !important;
}

.btn.btn-light-success:hover,
.btn.btn-light-success:active {
  color: #ffffff !important;
  background-color: #17c653 !important;
}

.btn.btn-light-danger {
  color: #f8285a !important;
  background-color: rgba(248, 40, 90, 0.1) !important;
  border-color: transparent !important;
}

.btn.btn-light-danger:hover,
.btn.btn-light-danger:active {
  color: #ffffff !important;
  background-color: #f8285a !important;
}

/* -------------------------------------------------------------------------
   12. 像素級精準尺寸工具 (Pixel Utilities)
   ------------------------------------------------------------------------- */
/* 常用固定寬度 */
.w-5px {
  width: 5px !important;
}

.w-10px {
  width: 10px !important;
}

.w-15px {
  width: 15px !important;
}

.w-20px {
  width: 20px !important;
}

.w-25px {
  width: 25px !important;
}

.w-30px {
  width: 30px !important;
}

.w-35px {
  width: 35px !important;
}

.w-40px {
  width: 40px !important;
}

.w-45px {
  width: 45px !important;
}

.w-50px {
  width: 50px !important;
}

.w-55px {
  width: 55px !important;
}

.w-60px {
  width: 60px !important;
}

.w-65px {
  width: 65px !important;
}

.w-70px {
  width: 70px !important;
}

.w-75px {
  width: 75px !important;
}

.w-80px {
  width: 80px !important;
}

.w-90px {
  width: 90px !important;
}

.w-100px {
  width: 100px !important;
}

.w-125px {
  width: 125px !important;
}

.w-150px {
  width: 150px !important;
}

.w-175px {
  width: 175px !important;
}

.w-200px {
  width: 200px !important;
}

.w-250px {
  width: 250px !important;
}

.w-300px {
  width: 300px !important;
}

.w-350px {
  width: 350px !important;
}

.w-400px {
  width: 400px !important;
}

.w-500px {
  width: 500px !important;
}

/* 常用最小寬度 (Min-Width) */
.min-w-20px {
  min-width: 20px !important;
}

.min-w-30px {
  min-width: 30px !important;
}

.min-w-40px {
  min-width: 40px !important;
}

.min-w-50px {
  min-width: 50px !important;
}

.min-w-75px {
  min-width: 75px !important;
}

.min-w-100px {
  min-width: 100px !important;
}

.min-w-125px {
  min-width: 125px !important;
}

.min-w-150px {
  min-width: 150px !important;
}

.min-w-175px {
  min-width: 175px !important;
}

.min-w-200px {
  min-width: 200px !important;
}

.min-w-250px {
  min-width: 250px !important;
}

.min-w-300px {
  min-width: 300px !important;
}

/* 常用固定高度 */
.h-2px {
  height: 2px !important;
}

.h-4px {
  height: 4px !important;
}

.h-6px {
  height: 6px !important;
}

.h-8px {
  height: 8px !important;
}

.h-10px {
  height: 10px !important;
}

.h-15px {
  height: 15px !important;
}

.h-20px {
  height: 20px !important;
}

.h-25px {
  height: 25px !important;
}

.h-30px {
  height: 30px !important;
}

.h-35px {
  height: 35px !important;
}

.h-40px {
  height: 40px !important;
}

.h-45px {
  height: 45px !important;
}

.h-50px {
  height: 50px !important;
}

.h-55px {
  height: 55px !important;
}

.h-60px {
  height: 60px !important;
}

.h-75px {
  height: 75px !important;
}

.h-100px {
  height: 100px !important;
}

.h-125px {
  height: 125px !important;
}

.h-150px {
  height: 150px !important;
}

.h-200px {
  height: 200px !important;
}

/* 常用最小高度 (Min-Height) */
.min-h-20px {
  min-height: 20px !important;
}

.min-h-50px {
  min-height: 50px !important;
}

.min-h-100px {
  min-height: 100px !important;
}

.min-h-150px {
  min-height: 150px !important;
}

.min-h-200px {
  min-height: 200px !important;
}

/* 陰影微調 (Subtle Shadow) */
.shadow-xs {
  box-shadow: 0 0.1rem 0.5rem 0.15rem rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================================
   >>> [END] METRONIC COMPREHENSIVE EXTRACTED CORE FOR FRONTEND <<<
   ========================================================================== */