/* ========================================
   流光之境 - 設計系統覆蓋層
   Design System Overrides v2.0
   
   此檔案確保設計系統樣式優先於 Bootstrap
   ======================================== */

/* ===== Bootstrap 覆蓋 (Bootstrap Overrides) ===== */

/* === 按鈕系統覆蓋 === */
.btn {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-colors) !important;
  border-width: 2px !important;
  padding: var(--space-3) var(--space-6) !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-normal) !important;
}

.btn-primary {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: var(--text-on-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: var(--text-on-primary) !important;
}

.btn-primary:focus {
  box-shadow: var(--shadow-focus) !important;
}

.btn-primary:active {
  background-color: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}

.btn-secondary {
  background-color: var(--secondary-500) !important;
  border-color: var(--secondary-500) !important;
  color: var(--text-on-primary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--secondary-600) !important;
  border-color: var(--secondary-600) !important;
}

.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--primary-500) !important;
  color: var(--primary-600) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: var(--text-on-primary) !important;
}

/* === 卡片系統覆蓋 === */
.card {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition-normal) !important;
  background-color: var(--bg-primary) !important;
}

.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

.card-body {
  padding: var(--space-6) !important;
}

.card-title {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--secondary-600) !important;
  margin-bottom: var(--space-3) !important;
}

.card-text {
  color: var(--text-primary) !important;
  line-height: var(--line-height-relaxed) !important;
}

/* === 導航系統覆蓋 === */
.navbar {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sm) !important;
}

.navbar-brand {
  font-family: var(--font-family-accent) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--secondary-700) !important;
}

.navbar-nav .nav-link {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-secondary) !important;
  transition: var(--transition-colors) !important;
  padding: var(--space-2) var(--space-4) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--primary-600) !important;
}

.navbar-nav .nav-link.active {
  color: var(--primary-600) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* === 表單系統覆蓋 === */
.form-control {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-base) !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 2px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  transition: var(--transition-colors) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

.form-control:focus {
  border-color: var(--border-focus) !important;
  box-shadow: var(--shadow-focus) !important;
  outline: none !important;
}

.form-control::placeholder {
  color: var(--text-tertiary) !important;
}

.form-label {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--space-2) !important;
}

/* === 模態框系統覆蓋 === */
.modal-content {
  border-radius: var(--radius-2xl) !important;
  border: none !important;
  box-shadow: var(--shadow-2xl) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border-light) !important;
  padding: var(--space-6) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
}

.modal-title {
  font-family: var(--font-family-heading) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--secondary-700) !important;
}

.modal-body {
  padding: var(--space-6) !important;
}

.modal-footer {
  border-top: 1px solid var(--border-light) !important;
  padding: var(--space-6) !important;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl) !important;
}

/* === 警示系統覆蓋 === */
.alert {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) var(--space-6) !important;
  font-family: var(--font-family-primary) !important;
}

.alert-success {
  background-color: var(--success-50) !important;
  color: var(--success-900) !important;
  border-left: 4px solid var(--success-500) !important;
}

.alert-warning {
  background-color: var(--warning-50) !important;
  color: var(--warning-900) !important;
  border-left: 4px solid var(--warning-500) !important;
}

.alert-danger {
  background-color: var(--error-50) !important;
  color: var(--error-900) !important;
  border-left: 4px solid var(--error-500) !important;
}

.alert-info {
  background-color: var(--info-50) !important;
  color: var(--info-900) !important;
  border-left: 4px solid var(--info-500) !important;
}

/* === 分頁系統覆蓋 === */
.pagination .page-link {
  font-family: var(--font-family-primary) !important;
  color: var(--primary-600) !important;
  border-color: var(--border-light) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: var(--transition-colors) !important;
}

.pagination .page-link:hover {
  background-color: var(--primary-50) !important;
  border-color: var(--primary-300) !important;
  color: var(--primary-700) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: var(--text-on-primary) !important;
}

/* === 下拉選單覆蓋 === */
.dropdown-menu {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background-color: var(--bg-primary) !important;
  padding: var(--space-2) 0 !important;
}

.dropdown-item {
  font-family: var(--font-family-primary) !important;
  color: var(--text-primary) !important;
  padding: var(--space-2) var(--space-4) !important;
  transition: var(--transition-colors) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-50) !important;
  color: var(--primary-700) !important;
}

/* === 標籤覆蓋 === */
.badge {
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  font-size: var(--font-size-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  border-radius: var(--radius-full) !important;
}

.badge.bg-primary {
  background-color: var(--primary-500) !important;
  color: var(--text-on-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--secondary-500) !important;
  color: var(--text-on-primary) !important;
}

/* === 進度條覆蓋 === */
.progress {
  height: var(--space-2) !important;
  background-color: var(--neutral-200) !important;
  border-radius: var(--radius-full) !important;
}

.progress-bar {
  background-color: var(--primary-500) !important;
  transition: width var(--duration-normal) var(--ease-out) !important;
}

/* === 列表群組覆蓋 === */
.list-group-item {
  border-color: var(--border-light) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-family-primary) !important;
  padding: var(--space-4) var(--space-5) !important;
}

.list-group-item:hover {
  background-color: var(--neutral-50) !important;
}

.list-group-item.active {
  background-color: var(--primary-500) !important;
  border-color: var(--primary-500) !important;
  color: var(--text-on-primary) !important;
}

/* === 輸入群組覆蓋 === */
.input-group-text {
  background-color: var(--neutral-100) !important;
  border-color: var(--border-light) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-family-primary) !important;
}

/* === 分頁籤覆蓋 === */
.nav-tabs .nav-link {
  border-color: var(--border-light) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-family-primary) !important;
  font-weight: var(--font-weight-medium) !important;
  padding: var(--space-3) var(--space-5) !important;
  transition: var(--transition-colors) !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--primary-300) !important;
  color: var(--primary-600) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--bg-primary) !important;
  border-color: var(--primary-500) !important;
  color: var(--primary-600) !important;
}

/* === 工具提示覆蓋 === */
.tooltip {
  font-family: var(--font-family-primary) !important;
  font-size: var(--font-size-sm) !important;
}

.tooltip-inner {
  background-color: var(--neutral-800) !important;
  color: var(--text-on-dark) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
}

/* === 麵包屑覆蓋 === */
.breadcrumb {
  background-color: transparent !important;
  padding: var(--space-3) 0 !important;
  margin-bottom: var(--space-4) !important;
}

.breadcrumb-item {
  font-family: var(--font-family-primary) !important;
  color: var(--text-tertiary) !important;
}

.breadcrumb-item.active {
  color: var(--text-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-tertiary) !important;
}

/* === 表格覆蓋 === */
.table {
  font-family: var(--font-family-primary) !important;
  color: var(--text-primary) !important;
}

.table th {
  font-weight: var(--font-weight-semibold) !important;
  color: var(--text-secondary) !important;
  border-bottom: 2px solid var(--border-medium) !important;
  padding: var(--space-3) var(--space-4) !important;
}

.table td {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--neutral-50) !important;
}

.table-hover tbody tr:hover {
  background-color: var(--primary-50) !important;
}

/* === 響應式覆蓋 === */
@media (max-width: 767.98px) {
  .btn {
    padding: var(--space-2) var(--space-4) !important;
    font-size: var(--font-size-sm) !important;
  }
  
  .card-body {
    padding: var(--space-4) !important;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-4) !important;
  }
}

/* === 重要的全域覆蓋 === */
/* 確保所有文字使用設計系統字體，但排除圖標字體 */
*:not([class*="fa-"]):not([class*="bi-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad):not(.bi) {
  font-family: var(--font-family-primary), 'Noto Sans TC', sans-serif !important;
}

/* 確保圖標字體不被覆蓋 */
.fa, .fas, .far, .fal, .fab, .fad,
[class*="fa-"],
.bi, [class*="bi-"],
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone {
  font-family: inherit !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-heading) !important;
}

/* 確保所有過渡動畫使用設計系統 */
*,
*::before,
*::after {
  transition-timing-function: var(--ease-out) !important;
}

/* 確保所有圓角使用設計系統 */
.rounded {
  border-radius: var(--radius-md) !important;
}

.rounded-lg {
  border-radius: var(--radius-lg) !important;
}

.rounded-xl {
  border-radius: var(--radius-xl) !important;
}

/* 確保所有陰影使用設計系統 */
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow {
  box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}