/* Delphi Digital紧急样式修复 */
/* 目标: 解决"样式缺失"问题，提供基本样式 */
/* 方法: 使用CSS变量定义样式，不依赖@apply指令 */
/* 版本: v1.0 - 紧急修复 */

/* ===== 基础样式修复 ===== */
/* 确保基础样式应用 */
body {
  background-color: var(--color-bg-primary, #0e1012);
  color: var(--color-text-primary, #ffffff);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== 容器样式 ===== */
.container {
  max-width: 80rem; /* 1280px - max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem;
  }
}

/* ===== 导航组件紧急样式 ===== */
/* 导航栏 */
header.sticky {
  background-color: var(--color-bg-secondary, #1f2124);
  border-bottom: 1px solid var(--color-border, #2a2e32);
}

/* 导航标签 */
.nav-tab {
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition: background-color 0.2s, color 0.2s;
  color: var(--color-text-tertiary, #979fa7);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.nav-tab:hover {
  color: var(--color-text-primary, #ffffff);
  background-color: rgba(42, 46, 50, 0.5); /* dark-700 with 50% opacity */
}

.nav-tab.active {
  color: var(--color-text-primary, #ffffff);
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
}

/* 搜索框 */
.input {
  background-color: var(--color-bg-secondary, #1f2124);
  border: 1px solid var(--color-border, #2a2e32);
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.5rem 0.75rem 0.5rem 2.5rem; /* pl-10 pr-4 py-2 */
  color: var(--color-text-primary, #ffffff);
  width: 16rem; /* w-64 */
}

.input::placeholder {
  color: var(--color-text-muted, #67707b);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-blue-500, #2e90fa);
  box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2); /* focus:ring-2 focus:ring-primary-blue-500 */
}

/* ===== 侧边导航栏样式 ===== */
/* 侧边导航栏容器 */
#sidebar {
  background-color: var(--color-bg-secondary, #1f2124);
  border-right: 1px solid var(--color-border, #2a2e32);
}

/* 侧边导航项 */
.side-nav-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border-radius: 0.375rem; /* rounded-md */
  color: var(--color-text-tertiary, #979fa7);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
}

.side-nav-item:hover {
  color: var(--color-text-primary, #ffffff);
  background-color: rgba(42, 46, 50, 0.5); /* dark-700 with 50% opacity */
}

.side-nav-item.active {
  color: var(--color-text-primary, #ffffff);
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
}

/* 帮助分类标题 */
.text-xs.uppercase {
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  color: var(--color-text-muted, #67707b);
}

/* 移动端遮罩 */
#sidebar-overlay {
  transition: opacity 0.3s ease;
}

/* 主内容区域偏移 */
main.lg\:ml-64 {
  margin-left: 16rem; /* 64 * 0.25rem = 16rem */
}

/* ===== 内容区域紧急样式 ===== */
/* 页面标题 */
h1.text-4xl {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 600; /* font-semibold */
  color: var(--color-text-primary, #ffffff);
  margin-bottom: 0.5rem; /* mb-2 */
}

/* 统计信息 */
#page-stats {
  font-size: 0.875rem; /* text-sm */
  color: var(--color-text-tertiary, #979fa7);
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space-x-2 */
}

/* ===== 筛选栏紧急样式 ===== */
/* 筛选按钮 */
.filter-btn {
  padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  transition: background-color 0.2s, color 0.2s;
  color: var(--color-text-tertiary, #979fa7);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.filter-btn:hover {
  color: var(--color-text-primary, #ffffff);
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
}

.filter-btn.active {
  color: var(--color-text-primary, #ffffff);
  background-color: var(--color-primary-blue-600, #007afb);
}

/* 排序选择器 */
.select {
  background-color: var(--color-bg-secondary, #1f2124);
  border: 1px solid var(--color-border, #2a2e32);
  border-radius: 0.5rem; /* rounded-lg */
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  color: var(--color-text-primary, #ffffff);
}

.select:focus {
  outline: none;
  border-color: var(--color-primary-blue-500, #2e90fa);
  box-shadow: 0 0 0 2px rgba(46, 144, 250, 0.2);
}

/* ===== 内容网格紧急样式 ===== */
/* 网格容器 */
#content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 768px) {
  #content-grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
  }
}

@media (min-width: 1024px) {
  #content-grid {
    grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
  }
}

/* 卡片样式 */
.card {
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
  border: 1px solid var(--color-border, #2a2e32);
  border-radius: 0.75rem; /* rounded-xl */
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.card:hover {
  border-color: var(--color-border-light, #363a3f); /* dark-600 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

/* ===== 分页紧急样式 ===== */
/* 分页容器 */
#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* space-x-2 */
}

/* 分页按钮 */
.btn {
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 500; /* font-medium */
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary {
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
  color: var(--color-text-primary, #ffffff);
}

.btn-secondary:hover {
  background-color: var(--color-dark-600, #363a3f); /* dark-600 */
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 页码按钮 */
.btn-pagination {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem; /* rounded-md */
  background-color: var(--color-bg-tertiary, #2a2e32); /* dark-700 */
  color: var(--color-text-primary, #ffffff);
}

.btn-pagination.active {
  background-color: var(--color-primary-blue-600, #007afb);
}

/* ===== 页脚紧急样式 ===== */
footer {
  background-color: var(--color-bg-secondary, #1f2124); /* dark-900 */
  border-top: 1px solid var(--color-border, #2a2e32); /* border-t border-dark-700 */
  margin-top: 4rem; /* mt-16 */
}

/* ===== 加载动画 ===== */
.loading-spinner {
  width: 2.5rem; /* w-10 */
  height: 2.5rem; /* h-10 */
  border: 4px solid var(--color-border, #2a2e32); /* border-4 border-dark-700 */
  border-top-color: var(--color-primary-blue-600, #007afb); /* border-t-primary-blue-600 */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== 移动端优化 ===== */
@media (max-width: 768px) {
  .container {
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem;
  }
  
  #content-grid {
    grid-template-columns: 1fr;
  }
  
  .input {
    width: 100%;
  }
}

/* ===== 字体优化覆盖 ===== */
/* 确保字体优化CSS仍然工作 */
/* 如果font-optimization.css加载，这些样式将被覆盖或增强 */