/* 暗黑主题全局样式 - 现代化邮件系统UI */

/* CSS变量定义 - 默认暗黑主题 */
:root,
.dark-theme,
.dark-theme-container,
[data-theme="dark"],
body,
body.dark-theme {
  /* 主要颜色 */
  --primary-bg: #0f0f0f;
  --secondary-bg: #1a1a1a;
  --tertiary-bg: #2a2a2a;
  --card-bg: #1e1e1e;
  --hover-bg: #2d2d2d;
  
  /* 文字颜色 */
  --primary-text: #ffffff;
  --secondary-text: #cccccc;
  --muted-text: #808080;
  --accent-text: #4a9eff;
  
  /* 边框和分割线 */
  --border-color: #333333;
  --border-hover: #4a4a4a;
  --border-focus: #4a9eff;
  
  /* 状态颜色 */
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --info-color: #1890ff;
  
  /* 圆角 */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  
  /* 阴影 */
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  /* 过渡动画 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}



/* 基础样式 */
html {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

body {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  transition: var(--transition-normal);
}

#app {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  min-height: 100vh;
}

/* Naive UI 组件样式覆盖 */

/* 布局组件 */
.n-layout,
.n-layout-header,
.n-layout-content,
.n-layout-footer,
.n-layout-sider {
  background-color: var(--secondary-bg) !important;
  color: var(--primary-text) !important;
  border-color: var(--border-color) !important;
}

/* 卡片组件 */
.n-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-light) !important;
  color: var(--primary-text) !important;
  transition: var(--transition-normal) !important;
}

.n-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-medium) !important;
  transform: translateY(-2px);
}

.n-card .n-card-header {
  color: var(--primary-text) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 600;
}

.n-card .n-card__content {
  color: var(--primary-text) !important;
}

/* 按钮组件 */
.n-button {
  border-radius: var(--border-radius-md) !important;
  font-weight: 500 !important;
  transition: var(--transition-fast) !important;
}

.n-button--primary-type {
  background-color: var(--accent-text) !important;
  border-color: var(--accent-text) !important;
  color: #ffffff !important;
}

.n-button--primary-type:hover {
  background-color: #3a8bef !important;
  border-color: #3a8bef !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-light) !important;
}

.n-button--secondary-type {
  background-color: var(--tertiary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--primary-text) !important;
}

.n-button--secondary-type:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--border-hover) !important;
}

/* 输入框组件 */
.n-input {
  background-color: var(--tertiary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--primary-text) !important;
  border-radius: var(--border-radius-md) !important;
  transition: var(--transition-fast) !important;
}

.n-input:hover {
  border-color: var(--border-hover) !important;
}

.n-input:focus,
.n-input.n-input--focus {
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2) !important;
}

.n-input__input-el {
  color: var(--primary-text) !important;
}

.n-input__input-el::placeholder {
  color: var(--muted-text) !important;
}

/* 表格组件 */
.n-data-table {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-lg) !important;
}

.n-data-table-th {
  background-color: var(--tertiary-bg) !important;
  color: var(--primary-text) !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-weight: 600;
}

.n-data-table-td {
  color: var(--primary-text) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.n-data-table-tr:hover .n-data-table-td {
  background-color: var(--hover-bg) !important;
}

/* 分页组件 */
.n-pagination {
  color: var(--primary-text) !important;
}

.n-pagination-item {
  background-color: var(--tertiary-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--primary-text) !important;
  border-radius: var(--border-radius-sm) !important;
}

.n-pagination-item:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--border-hover) !important;
}

.n-pagination-item--active {
  background-color: var(--accent-text) !important;
  border-color: var(--accent-text) !important;
  color: #ffffff !important;
}

/* 警告框组件 */
.n-alert {
  border-radius: var(--border-radius-md) !important;
  border: 1px solid var(--border-color) !important;
}

.n-alert--info-type {
  background-color: rgba(24, 144, 255, 0.1) !important;
  border-color: var(--info-color) !important;
  color: var(--info-color) !important;
}

.n-alert--success-type {
  background-color: rgba(82, 196, 26, 0.1) !important;
  border-color: var(--success-color) !important;
  color: var(--success-color) !important;
}

.n-alert--warning-type {
  background-color: rgba(250, 173, 20, 0.1) !important;
  border-color: var(--warning-color) !important;
  color: var(--warning-color) !important;
}

.n-alert--error-type {
  background-color: rgba(255, 77, 79, 0.1) !important;
  border-color: var(--error-color) !important;
  color: var(--error-color) !important;
}

/* 表单组件 */
.n-form {
  color: var(--primary-text) !important;
}

.n-form-item-label {
  color: var(--primary-text) !important;
  font-weight: 500;
}

/* 选择器组件 */
.n-select {
  background-color: var(--tertiary-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--primary-text) !important;
  border-radius: var(--border-radius-md) !important;
}

.n-select:hover {
  border-color: var(--border-hover) !important;
}

.n-select-menu {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-medium) !important;
}

.n-select-option {
  color: var(--primary-text) !important;
}

.n-select-option:hover {
  background-color: var(--hover-bg) !important;
}

.n-select-option--selected {
  background-color: var(--accent-text) !important;
  color: #ffffff !important;
}

/* 开关组件 */
.n-switch {
  background-color: var(--tertiary-bg) !important;
}

.n-switch--active {
  background-color: var(--accent-text) !important;
}

/* 模态框组件 */
.n-modal {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-heavy) !important;
  color: var(--primary-text) !important;
}

/* 工具提示组件 */
.n-tooltip {
  background-color: var(--tertiary-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-sm) !important;
  box-shadow: var(--shadow-light) !important;
}

/* 下拉菜单组件 */
.n-dropdown-menu {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: var(--shadow-medium) !important;
}

.n-dropdown-option {
  color: var(--primary-text) !important;
}

.n-dropdown-option:hover {
  background-color: var(--hover-bg) !important;
}

/* 自定义工具类 */
.dark-theme-container {
  background-color: var(--primary-bg) !important;
  color: var(--primary-text) !important;
  min-height: 100vh;
  max-width: none !important; /* 移除宽度限制 */
  width: 100% !important; /* 确保使用全宽 */
}

.dark-theme-card {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-light);
  padding: 16px;
  max-width: 1200px !important; /* 增加卡片最大宽度 */
}

.dark-theme-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-medium) !important;
  transform: translateY(-2px);
}

.dark-theme-text-primary {
  color: var(--primary-text) !important;
}

.dark-theme-text-secondary {
  color: var(--secondary-text) !important;
}

.dark-theme-text-muted {
  color: var(--muted-text) !important;
}

.dark-theme-text-accent {
  color: var(--accent-text) !important;
}

/* 邮件内容样式 */
.mail-content-dark {
  background-color: var(--card-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 16px;
  max-width: 1200px !important; /* 增加邮件内容最大宽度 */
  width: 100% !important;
}

.mail-item-dark {
  background-color: var(--tertiary-bg) !important;
  color: var(--primary-text) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-md) !important;
  padding: 12px;
  margin-bottom: 8px;
  transition: var(--transition-fast) !important;
}

.mail-item-dark:hover {
  background-color: var(--hover-bg) !important;
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-light);
  transform: translateY(-1px);
}





/* 响应式设计 */
@media (max-width: 768px) {
  .dark-theme-card {
    margin: 8px;
    padding: 12px;
    border-radius: var(--border-radius-md);
  }
  
  .n-card {
    margin: 8px !important;
    border-radius: var(--border-radius-md) !important;
  }
  
  .n-button {
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .dark-theme-card {
    margin: 4px;
    padding: 8px;
  }
  
  .n-card {
    margin: 4px !important;
    padding: 12px !important;
  }
}