/* ============================================
   Dark Mode - MailPanda Admin (Gray Theme)
   通过 .dark 类控制，配合 Tailwind class 策略
   ============================================ */

/* ---------- Element Plus Dark Overrides ---------- */
.dark {
  /* 基础背景色 - 纯灰色系 */
  --el-bg-color: #1e1e1e;
  --el-bg-color-overlay: #252525;
  --el-bg-color-page: #121212;
  --el-border-color: #333333;
  --el-border-color-light: #333333;
  --el-border-color-lighter: #2a2a2a;
  --el-border-color-extra-light: #1e1e1e;
  --el-text-color-primary: #e0e0e0;
  --el-text-color-regular: #c0c0c0;
  --el-text-color-secondary: #a0a0a0;
  --el-text-color-placeholder: #7a7a7a;
  --el-color-white: #1e1e1e;
  --el-color-black: #e0e0e0;
  --el-fill-color: #2a2a2a;
  --el-fill-color-light: #353535;
  --el-fill-color-lighter: #3a3a3a;
  --el-fill-color-blank: #1e1e1e;
  --el-mask-color: rgba(0, 0, 0, 0.6);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
  --el-color-info-light-9: #2a2a2a;
  --el-color-primary-light-9: #2a2a2a;
  --el-color-success-light-9: #1e2a1e;
  --el-color-warning-light-9: #2a2a1e;
  --el-color-danger-light-9: #2a1e1e;
  --el-color-error-light-9: #2a1e1e;

  /* Element Plus 组件变量 */
  --el-menu-bg-color: #1e1e1e;
  --el-menu-text-color: #c0c0c0;
  --el-menu-hover-bg-color: #353535;
  --el-menu-active-color: #409eff;
  --el-table-bg-color: #1e1e1e;
  --el-table-tr-bg-color: #1e1e1e;
  --el-table-header-bg-color: #252525;
  --el-table-hover-row-bg-color: #353535;
  --el-table-border-color: #333333;
  --el-table-header-text-color: #e0e0e0;
  --el-table-text-color: #c0c0c0;
  --el-pagination-bg-color: #1e1e1e;
  --el-pagination-button-bg-color: #2a2a2a;
  --el-pagination-hover-color: #409eff;
  --el-dialog-bg-color: #252525;
  --el-dialog-header-bg-color: #252525;
  --el-dialog-footer-bg-color: #252525;
  --el-input-bg-color: #2a2a2a;
  --el-input-text-color: #e0e0e0;
  --el-input-border-color: #333333;
  --el-input-hover-border-color: #409eff;
  --el-input-focus-border-color: #409eff;
  --el-select-bg-color: #2a2a2a;
  --el-select-input-color: #e0e0e0;
  --el-select-border-color-hover: #409eff;
  --el-dropdown-bg-color: #252525;
  --el-dropdown-menuItem-hover-fill: #353535;
  --el-dropdown-menuItem-hover-color: #409eff;
  --el-color-info-bg-color: #353535;
  --el-tag-bg-color: #353535;
  --el-tag-border-color: #333333;
  --el-card-bg-color: #1e1e1e;
  --el-card-border-color: #333333;
  --el-empty-fill-color-0: #1e1e1e;
  --el-empty-fill-color-1: #353535;
  --el-tabs-header-bg-color: #1e1e1e;
  --el-popover-bg-color: #252525;
  --el-popover-border-color: #333333;
  --el-message-bg-color: #252525;
  --el-message-border-color: #333333;
  --el-notification-bg-color: #252525;
  --el-notification-border-color: #333333;
  --el-tooltip-bg-color: #252525;
  --el-tooltip-border-color: #333333;
  --el-color-primary-dark-2: #66b1ff;
  --el-empty-fill-color-2: #2a2a2a;
  --el-empty-fill-color-3: #353535;
  --el-empty-fill-color-4: #3a3a3a;
  --el-empty-fill-color-5: #404040;
  --el-empty-fill-color-6: #454545;
  --el-empty-fill-color-7: #4a4a4a;
  --el-empty-fill-color-8: #505050;

  /* Switch 组件 */
  --el-switch-off-color: #444444;
  --el-switch-on-color: #409eff;
  --el-switch-border-color: #444444;

  /* Scrollbar */
  --el-scrollbar-bg-color: #333333;
  --el-scrollbar-hover-bg-color: #444444;

  /* Collapse */
  --el-collapse-header-bg-color: #1e1e1e;
  --el-collapse-content-bg-color: #1e1e1e;
  --el-collapse-border-color: #333333;

  /* Step */
  --el-step-line-color: #333333;
}

/* ---------- Custom Admin Layout Dark Overrides ---------- */
.dark .bg-white {
  background-color: #1e1e1e !important;
}

.dark .bg-gray-50 {
  background-color: #121212 !important;
}

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

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

.dark .text-gray-700 {
  color: #d0d0d0 !important;
}

.dark .text-gray-800 {
  color: #e0e0e0 !important;
}

.dark .hover\:text-gray-800:hover {
  color: #ffffff !important;
}

.dark .border-gray-200 {
  border-color: #333333 !important;
}

.dark .bg-gray-200 {
  background-color: #333333 !important;
}

.dark .hover\:bg-gray-100:hover {
  background-color: #353535 !important;
}

.dark .hover\:bg-primary\/5:hover {
  background-color: rgba(64, 158, 255, 0.12) !important;
}

.dark .text-primary {
  color: #66b1ff !important;
}

.dark .bg-primary\/10 {
  background-color: rgba(64, 158, 255, 0.15) !important;
}

.dark .hover\:text-primary:hover {
  color: #66b1ff !important;
}

.dark .bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Sidebar active - keep primary color */
.dark .nav-item.active > div:first-child {
  background: #409eff;
}

/* Header shadow */
.dark header[style*="box-shadow"] {
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3) !important;
}

/* Element Plus dark overrides for specific components */
.dark .el-button--default {
  --el-button-bg-color: #2a2a2a;
  --el-button-border-color: #333333;
  --el-button-text-color: #c0c0c0;
  --el-button-hover-bg-color: #353535;
  --el-button-hover-border-color: #409eff;
  --el-button-hover-text-color: #409eff;
  --el-button-active-bg-color: #2a2a2a;
  --el-button-active-border-color: #66b1ff;
}

.dark .el-button--primary {
  --el-button-bg-color: #409eff;
  --el-button-border-color: #409eff;
  --el-button-text-color: #ffffff;
  --el-button-hover-bg-color: #66b1ff;
  --el-button-hover-border-color: #66b1ff;
}

.dark .el-dialog {
  border: 1px solid #333333;
}

.dark .el-table th.el-table__cell {
  background-color: #252525 !important;
}

.dark .el-table tr:hover > td.el-table__cell {
  background-color: #353535 !important;
}

/* Tabs */
.dark .el-tabs__item {
  color: #a0a0a0;
}

.dark .el-tabs__item.is-active {
  color: #409eff;
}

.dark .el-tabs__item:hover {
  color: #66b1ff;
}

.dark .el-tabs__active-bar {
  background-color: #409eff;
}

/* Dropdown menu */
.dark .el-dropdown-menu__item {
  color: #c0c0c0;
}

.dark .el-dropdown-menu__item:hover {
  background-color: #353535;
  color: #409eff;
}

/* Page header / breadcrumb */
.dark .el-page-header {
  --el-page-header-bg-color: transparent;
}

/* Card */
.dark .el-card {
  background-color: #1e1e1e;
  border-color: #333333;
}

/* Select dropdown */
.dark .el-select-dropdown {
  background-color: #252525;
  border-color: #333333;
}

.dark .el-select-dropdown__item {
  color: #c0c0c0;
}

.dark .el-select-dropdown__item.hover {
  background-color: #353535;
}

.dark .el-select-dropdown__item.selected {
  color: #409eff;
  background-color: #2a2a2a;
}

/* Date picker */
.dark .el-date-table td {
  color: #c0c0c0;
}

.dark .el-date-table td.today {
  color: #409eff;
}

/* Pagination */
.dark .el-pager li {
  background-color: #2a2a2a;
  color: #c0c0c0;
}

.dark .el-pager li.active {
  background-color: #409eff;
  color: #ffffff;
}

.dark .el-pagination button {
  background-color: #2a2a2a;
  color: #c0c0c0;
}

/* Message box */
.dark .el-message-box {
  background-color: #252525;
  border-color: #333333;
}

/* Notification */
.dark .el-notification {
  background-color: #252525;
  border: 1px solid #333333;
}

/* Alert */
.dark .el-alert--info {
  background-color: #2a2a2a;
  border-color: #333333;
}

/* Form label */
.dark .el-form-item__label {
  color: #d0d0d0;
}

/* Radio / Checkbox */
.dark .el-radio__label {
  color: #c0c0c0;
}

.dark .el-checkbox__label {
  color: #c0c0c0;
}

/* Tag */
.dark .el-tag {
  border-color: #333333;
}

/* Collapse */
.dark .el-collapse-item__header {
  color: #c0c0c0;
  background-color: #1e1e1e;
}

.dark .el-collapse-item__wrap {
  background-color: #1e1e1e;
}

/* Progress */
.dark .el-progress-bar__outer {
  background-color: #333333;
}

/* Timeline */
.dark .el-timeline-item__tail {
  border-color: #333333;
}

/* Descriptions */
.dark .el-descriptions__title {
  color: #e0e0e0;
}

.dark .el-descriptions__label {
  color: #a0a0a0;
}

.dark .el-descriptions__body {
  background-color: #1e1e1e;
  border-color: #333333;
}

/* Divider */
.dark .el-divider {
  border-color: #333333;
}

/* Statistic */
.dark .el-statistic__head {
  color: #a0a0a0;
}

.dark .el-statistic__content {
  color: #e0e0e0;
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dark ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.dark ::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

/* Tabler icons in dark mode */
.dark .ti {
  color: #c0c0c0;
}

/* Transition for smooth theme change */
html {
  transition: background-color 0.3s ease;
}

html.dark {
  background-color: #121212;
}

/* V-cloak stays visible during flash prevention */
.dark [v-cloak] { display: none !important; }

/* Dark mode toggle button active state */
.dark .dark-mode-btn {
  color: #ffd700;
}

/* ---------- Page custom classes dark overrides ---------- */
.dark .k-card {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
}

.dark .bg-fff {
  background-color: #1e1e1e !important;
}

.dark .version-template-card {
  background: linear-gradient(135deg, #17283a 0%, #1e1e1e 60%) !important;
  border-color: #29445f !important;
}

.dark .shadow-s-10 {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark .switch-panel {
  background-color: #1e1e1e !important;
  border-color: #333333 !important;
}

.dark .credit-balance-panel {
  background-color: #1a1a2e !important;
  border-color: #2a2a4a !important;
}

.dark .el-descriptions {
  --el-descriptions-table-bg-color: #1e1e1e;
  --el-descriptions-item-bg-color: #1e1e1e;
}

.dark .el-descriptions__cell {
  background-color: #1e1e1e !important;
}

.dark .el-descriptions__label.is-bordered-label {
  background-color: #252525 !important;
  color: #c0c0c0 !important;
}

.dark .el-descriptions__content.is-bordered-content {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}