/* B12 Style Overrides for Legacy Dark Theme Classes
   這個檔案將舊的深色主題類別轉換為 B12 淺色專業風格 */

/* ========== 背景顏色覆蓋 ========== */
.bg-dark-bg,
body.bg-dark-bg {
  background: #f7fafc !important;
}

.bg-dark-card {
  background: #ffffff !important;
}

.bg-dark-border {
  background: #e2e8f0 !important;
}

/* ========== 文字顏色覆蓋 ========== */
.text-white {
  color: #1a202c !important;
}

.text-gray-200 {
  color: #4a5568 !important;
}

.text-gray-300 {
  color: #4a5568 !important;
}

.text-gray-400 {
  color: #718096 !important;
}

.text-gray-500 {
  color: #718096 !important;
}

.text-gray-600 {
  color: #718096 !important;
}

/* ========== 邊框顏色覆蓋 ========== */
.border-dark-border {
  border-color: #e2e8f0 !important;
}

.border-dark-card {
  border-color: #e2e8f0 !important;
}

/* ========== 玻璃卡片效果轉換為白色卡片 ========== */
.glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

.glass-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ========== 訊息氣泡樣式 ========== */
.message-bubble {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.message-bubble:hover {
  background: #f7fafc !important;
  border-color: #cbd5e0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.message-bubble p {
  color: #4a5568 !important;
}

/* ========== 模組卡片樣式 ========== */
.module-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.module-card:hover {
  background: #f7fafc !important;
  border-color: #667eea !important;
  box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.2) !important;
}

/* ========== 按鈕樣式覆蓋 ========== */
.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* ========== 表單輸入樣式 ========== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  background: #ffffff !important;
  color: #1a202c !important;
  border: 2px solid #e2e8f0 !important;
  -webkit-text-fill-color: #1a202c !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #a0aec0 !important;
  opacity: 1 !important;
}

/* 自動填充樣式覆蓋 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #1a202c !important;
}

/* ========== Select 樣式 ========== */
select {
  background: #ffffff !important;
  color: #1a202c !important;
}

select option {
  background-color: #ffffff !important;
  color: #1a202c !important;
}

/* ========== 漸變文字保持原樣 ========== */
.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ========== 標題樣式 ========== */
h1, h2, h3, h4, h5, h6 {
  color: #1a202c !important;
}

h1.gradient-text,
h2.gradient-text,
h3.gradient-text,
h4.gradient-text,
h5.gradient-text,
h6.gradient-text {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ========== 滾動條樣式 ========== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f7fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 0.375rem;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

/* ========== 圖表容器背景 ========== */
.chart-container,
#emotion-chart-container,
#activity-chart-container,
#coach-chart-container {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ========== 統計卡片 ========== */
.stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* ========== 標籤和徽章 ========== */
.badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

/* ========== 響應式調整 ========== */
@media (max-width: 768px) {
  .glass-card,
  .message-bubble {
    min-height: 60px;
  }
}

/* ========== 隱藏類別 ========== */
.hidden {
  display: none !important;
}

/* ========== 動畫保持原樣 ========== */
.fade-in,
.floating-animation,
.animate-fade-in,
.animate-slide-up {
  /* 保持原有動畫 */
}

/* ========== 特殊元素顏色覆蓋 ========== */
/* 保持情緒和分類的顏色 */
.border-l-blue-500,
.border-l-green-500,
.border-l-yellow-500,
.border-l-red-500,
.border-l-purple-500,
.border-l-pink-500,
.border-l-orange-500 {
  /* 保持邊框顏色 */
}

/* ========== 確保主容器正確顯示 ========== */
#app {
  background: #f7fafc !important;
}

#main-page {
  background: #f7fafc !important;
}

/* ========== 修復表格樣式 ========== */
table {
  background: #ffffff !important;
}

table th {
  background: #f7fafc !important;
  color: #1a202c !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

table td {
  color: #4a5568 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* ========== 修復模態框/彈窗 ========== */
.modal,
.dialog {
  background: rgba(0, 0, 0, 0.5) !important;
}

.modal-content,
.dialog-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
}