/* Tailwind CSS Base Layer Configuration */
/* 此檔案定義 Tailwind CSS 的層級策略，確保與 Bootstrap 的和諧共存 */

@layer base {
  /* Reset 與基礎樣式 */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* 自定義 CSS 變數 - 與現有設計系統保持一致 */
  :root {
    --primary-color: #0056b3;
    --primary-dark: #003a75;
    --primary-light: #4d8ed6;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
  }

  /* 確保 Tailwind 文字樣式不與 Bootstrap 衝突 */
  .tailwind-scope {
    font-family: 'Noto Sans TC', sans-serif;
  }
}

@layer components {
  /* === 按鈕組件 === */
  .btn-primary-tw {
    @apply bg-primary text-white px-6 py-3 rounded-lg border-0 font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary-tw {
    @apply bg-secondary text-white px-6 py-3 rounded-lg border-0 font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-outline-primary-tw {
    @apply bg-transparent text-primary border-2 border-primary px-6 py-3 rounded-lg font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-primary hover:text-white hover:border-primary focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-outline-light-tw {
    @apply bg-transparent text-white border-2 border-white px-6 py-3 rounded-lg font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-white hover:text-gray-900 hover:border-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-outline-secondary-tw {
    @apply bg-transparent text-secondary border-2 border-secondary px-6 py-3 rounded-lg font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-secondary hover:text-white hover:border-secondary focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-light-tw {
    @apply bg-gray-100 text-gray-900 px-6 py-3 rounded-lg border-0 font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-success-tw {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg border-0 font-medium text-center no-underline inline-flex items-center justify-center;
    @apply hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
    @apply transition-all duration-200 ease-in-out;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-lg-tw {
    @apply px-8 py-4 text-lg;
  }

  .btn-sm-tw {
    @apply px-4 py-2 text-sm;
  }

  /* === 卡片組件 === */
  .card-tw {
    @apply bg-white rounded-lg shadow-md overflow-hidden;
    @apply hover:shadow-lg transition-shadow duration-300;
  }

  .card-body-tw {
    @apply p-6;
  }

  .card-header-tw {
    @apply px-6 py-4 bg-gray-50 border-b border-gray-200;
  }

  .card-footer-tw {
    @apply px-6 py-4 bg-gray-50 border-t border-gray-200;
  }

  .card-title-tw {
    @apply text-lg font-semibold text-gray-900 mb-2;
  }

  .card-text-tw {
    @apply text-gray-600 leading-relaxed;
  }

  /* === 表單組件 === */
  .form-control-tw {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    @apply transition-colors duration-200 placeholder-gray-400;
    @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
  }

  .form-control-error-tw {
    @apply w-full px-3 py-2 border border-red-300 rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent;
    @apply transition-colors duration-200 placeholder-red-400;
  }

  .form-label-tw {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }

  .form-select-tw {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md;
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
    @apply transition-colors duration-200 bg-white;
    @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
  }

  .form-check-tw {
    @apply flex items-center;
  }

  .form-check-input-tw {
    @apply h-4 w-4 text-primary border-gray-300 rounded;
    @apply focus:ring-2 focus:ring-primary;
  }

  .form-check-label-tw {
    @apply ml-2 text-sm text-gray-700;
  }

  /* === Alert 組件 === */
  .alert-tw {
    @apply p-4 rounded-md border;
  }

  .alert-success-tw {
    @apply bg-green-50 text-green-800 border-green-200;
  }

  .alert-danger-tw {
    @apply bg-red-50 text-red-800 border-red-200;
  }

  .alert-warning-tw {
    @apply bg-yellow-50 text-yellow-800 border-yellow-200;
  }

  .alert-info-tw {
    @apply bg-blue-50 text-blue-800 border-blue-200;
  }

  .alert-dismissible-tw {
    @apply relative pr-12;
  }

  /* === 導航組件 === */
  .navbar-tw {
    @apply bg-white shadow-sm;
  }

  .navbar-brand-tw {
    @apply flex-shrink-0 text-xl font-bold text-gray-900 no-underline;
  }

  .navbar-nav-tw {
    @apply flex space-x-8;
  }

  .nav-link-tw {
    @apply text-gray-700 hover:text-primary px-3 py-2 rounded-md text-sm font-medium no-underline;
    @apply transition-colors duration-200;
  }

  .nav-link-active-tw {
    @apply text-primary bg-blue-50;
  }

  .dropdown-menu-tw {
    @apply origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white;
    @apply ring-1 ring-black ring-opacity-5 focus:outline-none;
  }

  .dropdown-item-tw {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 no-underline;
    @apply transition-colors duration-200;
  }

  /* === Grid 系統組件 === */
  .container-tw {
    @apply max-w-5xl mx-auto px-4;
  }

  .container-fluid-tw {
    @apply w-full px-4;
  }
  
  /* 筆電響應式優化 */
  @media (min-width: 1200px) {
    .container-tw {
      @apply max-w-4xl;
    }
  }

  .row-tw {
    @apply flex flex-wrap -mx-4;
  }

  .row-tw > * {
    @apply w-full px-4;
  }

  .col-tw {
    @apply flex-1;
  }

  /* Bootstrap 兼容的欄位系統 */
  .col-tw-6 { @apply w-1/2; }
  .col-tw-4 { @apply w-1/3; }
  .col-tw-3 { @apply w-1/4; }
  .col-tw-8 { @apply w-2/3; }
  .col-tw-12 { @apply w-full; }
  
  /* 響應式欄位系統 */
  .col-tw-md-4 { @apply w-full md:w-1/3; }
  .col-tw-md-6 { @apply w-full md:w-1/2; }
  .col-tw-md-8 { @apply w-full md:w-2/3; }
  .col-tw-md-10 { @apply w-full md:w-5/6; }
  
  .col-tw-lg-4 { @apply w-full lg:w-1/3; }
  .col-tw-lg-7 { @apply w-full lg:w-7/12; }
  .col-tw-lg-8 { @apply w-full lg:w-2/3; }
  .col-tw-lg-12 { @apply w-full; }

  /* 自定義 5欄佈局支援 */
  .col-lg-2-4-tw {
    @apply w-full lg:w-1/5 px-4;
  }

  /* === 表格組件 === */
  .table-tw {
    @apply min-w-full divide-y divide-gray-200;
  }

  .table-bordered-tw {
    @apply border border-gray-300;
  }

  .table-striped-tw {
    @apply even:bg-gray-50;
  }

  .table-responsive-tw {
    @apply overflow-x-auto;
  }
}

@layer utilities {
  /* === 專案特定工具類別 === */
  
  /* 文字陰影效果 */
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .text-shadow-lg {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
  }

  /* 漸層背景 */
  .bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  }

  .bg-gradient-secondary {
    background: linear-gradient(135deg, var(--secondary-color), #8e9aaf);
  }

  /* 自定義陰影 */
  .shadow-custom {
    box-shadow: 0 4px 20px rgba(0, 86, 179, 0.1);
  }

  .shadow-hover {
    box-shadow: 0 8px 30px rgba(0, 86, 179, 0.15);
  }

  /* 動畫工具類別 */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }

  /* 響應式文字大小 */
  .text-responsive {
    @apply text-sm sm:text-base md:text-lg lg:text-xl;
  }

  /* 滾動行為 */
  .scroll-smooth {
    scroll-behavior: smooth;
  }

  /* Focus 狀態增強 */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
  }
}

/* === 動畫定義 === */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === 與 Bootstrap 共存的調整 === */
/* 確保 Tailwind 組件在 Bootstrap 存在時也能正常工作 */

/* 重設 Bootstrap 對 Tailwind 組件的影響 */
.btn-primary-tw,
.btn-secondary-tw,
.btn-outline-primary-tw,
.btn-outline-light-tw,
.btn-outline-secondary-tw,
.btn-light-tw,
.btn-success-tw {
  background-image: none !important;
  border-radius: 0.5rem !important;
}

/* 確保表單組件正確顯示 */
.form-control-tw,
.form-select-tw {
  background-image: none !important;
  background-clip: padding-box !important;
}

/* 確保卡片組件正確的邊框 */
.card-tw {
  border: none !important;
}

/* 移除 Bootstrap 對連結的預設樣式影響 */
.nav-link-tw:hover,
.dropdown-item-tw:hover {
  text-decoration: none !important;
}

/* === 輔助類別 === */
/* 用於漸進式遷移的輔助類別 */

/* 暫時隱藏 Bootstrap 組件 */
.bs-hide {
  display: none !important;
}

/* 暫時顯示 Tailwind 組件 */
.tw-show {
  display: block !important;
}

/* 遷移中的標記 */
.migrating {
  border: 2px dashed #ffc107 !important;
  position: relative;
}

.migrating::after {
  content: "遷移中";
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ffc107;
  color: #000;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 3px;
  font-weight: bold;
}