/* Custom styles to extend Tailwind */

/* Font settings */
html {
  transition: background-color 0.5s ease, color 0.5s ease;
}

body {
  font-family: 'Noto Sans TC', sans-serif;
  height: 100vh;
  overflow: hidden;
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
  scroll-padding-top: 80px; /* 確保錨點連結不被頭部遮擋 */
}

/* Font Awesome icons styling */
.fas, .far, .fab, .fa {
  vertical-align: middle;
}

/* Animation for icons */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(-180deg) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* 暗黑模式全局樣式覆蓋 */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #111827; /* dark:bg-gray-900 */
  color: #f9fafb; /* dark:text-gray-50 */
}

/* 暗黑模式下的頁頭樣式 */
header {
  background-color: #ffffff;
  color: #1f2937;
}

/* 暗黑模式下的頁頭樣式 */
html.dark header {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f9fafb; /* dark:text-gray-50 */
}

/* 內容容器樣式恢復原狀 */

/* 暗黑模式下的側邊欄樣式 */
html.dark #sidebar {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f9fafb; /* dark:text-gray-50 */
  border-color: #374151; /* dark:border-gray-700 */
}

/* 新主題系統 - 主題相關元素樣式 */
.theme-brand-primary {
  color: var(--brand-primary, #2563EB);
}

.theme-dept-name {
  color: var(--dept-name, #4B5563);
}

html.dark .theme-dept-name {
  color: var(--dept-name-dark, #FEF08A);
}

.theme-icon {
  color: var(--icon-color, #2563EB);
}

html.dark .theme-icon {
  color: var(--icon-color-dark, #FDE68A);
}

.theme-footer-highlight {
  color: var(--footer-highlight, #2563EB);
}

html.dark .theme-footer-highlight {
  color: var(--footer-highlight-dark, #FEF08A);
}

.theme-footer-text {
  color: var(--footer-text, #4B5563);
}

html.dark .theme-footer-text {
  color: var(--footer-text-dark, #FFFFFF);
}

/* 暗黑模式切換按鈕樣式 - Material Icons 版 */
#darkModeToggle {
  transition: all 0.3s ease;
  transform: scale(1);
  overflow: visible;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

#darkModeToggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.4);
  background-color: rgba(229, 231, 235, 0.5); /* 淺灰背景 */
}

#darkModeToggle .material-icons-round {
  font-size: 36px; /* 更大的圖標 */
}
#darkModeToggle:active {
  transform: scale(0.95);
}

html.dark #darkModeToggle {
  box-shadow: 0 0 15px rgba(236, 201, 75, 0.3);
}

html.dark #darkModeToggle:hover {
  background-color: rgba(55, 65, 81, 0.5); /* 暗色背景 */
}

html.dark #darkModeToggle .moon-icon {
  display: none;
}

html.dark #darkModeToggle .sun-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.moon-icon, .sun-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

html:not(.dark) .sun-icon {
  display: none;
}

/* 暗黑模式下的特殊樣式調整 */
html.dark .prose-dark {
  color: #e5e7eb;
}

/* 暗黑模式下的內容容器 */
html.dark #contentContainer {
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f3f4f6; /* dark:text-gray-100 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

/* 暗黑模式下的標題和段落 - 增強對比度 */
html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
  color: #ffffff; /* 純白色增強標題對比度 */
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.2); /* 輕微陰影增強可讀性 */
}

html.dark p {
  color: #f9fafb; /* dark:text-gray-50 - 更高對比的段落文字 */
}

/* 暗黑模式下的連結 - 增強對比度 */
html.dark a {
  color: #93c5fd; /* blue-300 - 更亮的藍色 */
  font-weight: 500; /* 稍微加粗 */
}

html.dark a:hover {
  color: #dbeafe; /* blue-100 - 更亮的懸停顏色 */
  text-decoration: underline; /* 加下劃線提高識別度 */
}

/* Layout settings */
.sidebar-footer {
  font-size: 0.8rem;
  line-height: 1.4;
}

/* 側邊欄 footer 暗黑模式樣式 - 增強對比度 */
html.dark .sidebar-footer {
  border-color: #4b5563 !important; /* dark:border-gray-600 - 增加邊界對比 */
  background-color: #1f2937; /* dark:bg-gray-800 */
  color: #f3f4f6 !important; /* 更亮的文字顏色 */
}

html.dark .sidebar-footer a {
  color: #93c5fd !important; /* blue-300 - 更亮的藍色 */
  font-weight: 500; /* 加粗以提高可讀性 */
}

html.dark .sidebar-footer a:hover {
  color: #dbeafe !important; /* blue-100 - 更亮的懸停顏色 */
  text-decoration: underline; /* 添加下劃線增強可識別性 */
}

/* Ensure main content fills available height */
main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 4rem); /* 4rem is approx header height */
}

#contentContainer {
  flex-grow: 1;
  overflow-y: auto;
}

/* Dark mode prose styling */
.prose-dark h1,
.prose-dark h2, 
.prose-dark h3,
.prose-dark h4,
.prose-dark h5,
.prose-dark h6,
.prose-dark strong {
  color: #f3f4f6;
}

.prose-dark a {
  color: #60a5fa;
}

.prose-dark p,
.prose-dark ul,
.prose-dark ol,
.prose-dark blockquote {
  color: #d1d5db;
}

.prose-dark code {
  color: #f9a8d4;
  background-color: #1f2937;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}

.prose-dark pre {
  background-color: #1f2937;
  color: #f3f4f6;
}

/* TOC tree styling */
.toc-item {
  margin-bottom: 0.25rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  cursor: pointer;
  margin-right: 0.5rem;
}

.toc-toggle:hover {
  background-color: rgba(156, 163, 175, 0.1);
}

.toc-link {
  display: inline-block;
  padding: 0.25rem 0;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  color: #4b5563;
  max-width: 100%;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

/* 為沒有文件的目錄標題添加特殊樣式 */
.toc-link:not([data-file]) {
  cursor: pointer;
  position: relative;
  font-weight: 500;
}

/* 目錄項目樣式 */
.toc-item {
  transition: all 0.2s ease;
}

.toc-item:hover {
  background-color: rgba(156, 163, 175, 0.1);
  border-radius: 0.25rem;
}

html.dark .toc-item:hover {
  background-color: rgba(191, 219, 254, 0.15); /* 藍色調背景增強懸停效果識別度 */
  border-left: 2px solid #60a5fa; /* 添加藍色邊框增加視覺效果 */
  padding-left: 2px; /* 補償邊框 */
}

/* 滑鼠懸停時顯示提示效果 */
.toc-link:not([data-file]):hover {
  color: #3b82f6; /* blue-500 */
  border-radius: 0.25rem;
  padding-left: 0.25rem;
  margin-left: -0.25rem;
}

html.dark .toc-link:not([data-file]):hover {
  color: #60a5fa !important; /* blue-400 */
}

html.dark .toc-link {
  color: #dbeafe !important; /* blue-100 - 更高對比度 */
}

.toc-link:hover {
  color: #2563eb;
}

html.dark .toc-link:hover {
  color: #93c5fd !important; /* blue-300 - 更鮮明的懸停顏色 */
  text-shadow: 0 0 1px rgba(219, 234, 254, 0.3); /* 輕微文字陰影增強識別度 */
}

.toc-link.active {
  color: #2563eb;
  font-weight: 600; /* 加粗 */
}

html.dark .toc-link.active {
  color: #bfdbfe !important; /* blue-200 - 更鮮明的活動顏色 */
  font-weight: 600; /* 加粗增強可讀性 */
}

.toc-children {
  padding-left: 1.5rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  width: 100%;
}

.toc-children.expanded {
  max-height: 1000px;
  transition: max-height 0.5s ease-in;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #sidebar.active {
    transform: translateX(0);
  }
}

/* Code block syntax highlighting */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: #f8f8f8;
  border-radius: 0.5rem;
}

/* 暗黑模式下的代碼塊樣式 */
html.dark .hljs {
  background: #111827; /* dark:bg-gray-900 */
  color: #f9fafb; /* dark:text-gray-50 */
}

/* 確保暗黑模式下的其他元素樣式 */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #374151; /* dark:bg-gray-700 */
  color: #f9fafb; /* dark:text-gray-50 */
  border-color: #4b5563; /* dark:border-gray-600 */
}

.dark .hljs {
  background: #1f2937;
}

/* Table styles */
.prose table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.prose table th,
.prose table td {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
}

.dark .prose table th,
.dark .prose table td {
  border-color: #374151;
}

.prose table th {
  background-color: #f3f4f6;
  font-weight: 600;
}

.dark .prose table th {
  background-color: #374151;
}

/* Progress indicator for content load */
.load-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #2563eb;
  z-index: 20;
  transition: width 0.2s ease-out;
}

.dark .load-progress {
  background-color: #3b82f6;
}

/* Enhanced Heading Styles for better hierarchy visualization */
.prose h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #1f2937;
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #4b5563;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

.prose h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.prose h6 {
  font-size: 1rem;
  font-weight: 600;
  color: #6b7280;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Dark mode heading styles */
.dark .prose h1 {
  color: #f3f4f6;
  border-bottom-color: #374151;
}

.dark .prose h2 {
  color: #e5e7eb;
  border-bottom-color: #374151;
}

.dark .prose h3 {
  color: #d1d5db;
}

.dark .prose h4 {
  color: #9ca3af;
}

.dark .prose h5,
.dark .prose h6 {
  color: #6b7280;
}

/* Animation for content transitions */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.content-fade-in {
  animation: fadeIn 0.3s ease-out;
}