/* ============================================================
   Element UI 样式覆盖 (Element UI Overrides)
   确保组件风格与设计系统一致
   ============================================================ */

/* ── 输入框颜色继承 ── */
body .el-input__inner,
body .el-textarea__inner {
  color: inherit;
  font-family: var(--font-sans);
  height: 42px;
  border-radius: var(--border-radius-xs);
}

/* ── 输入框焦点增强 ── */
body .el-input__inner:focus,
body .el-textarea__inner:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ── 日期选择器面板 ── */
body .el-picker-panel,
body .el-date-picker,
body .el-picker-dropdown,
body .el-time-panel,
body .el-picker-panel__body,
body .el-picker-panel__footer,
body .el-time-panel__content,
body .el-time-spinner__wrapper {
  background: #fff !important;
  border-color: #e4e7ed !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ── 面板内部元素 ── */
body .el-picker-panel__sidebar,
body .el-picker-panel__shortcut,
body .el-date-table th,
body .el-date-table td,
body .el-month-table td,
body .el-year-table td,
body .el-time-spinner__item {
  background: #fff !important;
  color: #606266 !important;
}

/* ── 快捷项悬停 ── */
body .el-picker-panel__shortcut:hover,
body .el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #f5f7fa !important;
}

/* ── 日期表头边框 ── */
body .el-date-table th {
  border-bottom-color: #ebeef5 !important;
}

/* ── 日期单元格悬停 ── */
body .el-date-table td.available:hover,
body .el-month-table td .cell:hover,
body .el-year-table td .cell:hover {
  color: #409eff !important;
}

/* ── 面板按钮颜色 ── */
body .el-time-panel__btn,
body .el-picker-panel__icon-btn {
  color: #606266 !important;
}

/* ── 表单标签样式统一 ── */
body .el-form-item__label {
  font-weight: 600;
  color: #374151;
  font-size: var(--text-sm);
  padding-bottom: var(--space-1);
}

body .el-form-item {
  margin-bottom: 18px;
}

/* ── Switch 组件增强 ── */
body .el-switch__label {
  font-size: var(--text-xs);
  font-weight: 500;
}

body .el-switch__label.is-active {
  color: var(--color-primary);
}

/* ── Select 组件 ── */
body .el-select .el-input__inner {
  border-radius: var(--border-radius-xs);
}

/* ── 按钮增强 ── */
body .el-button--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  font-weight: 600;
  border-radius: var(--border-radius-xs);
  transition: all var(--duration-fast) var(--ease-default);
}

body .el-button--primary:hover {
  background: #2563eb;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.32);
  transform: none;
}

body .el-button--primary:active {
  transform: translateY(0);
}

body .el-button--default {
  border-radius: var(--border-radius-xs);
  font-weight: 500;
  transition: all var(--duration-fast) var(--ease-default);
}

body .el-button--default:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-200);
  background: var(--color-primary-50);
}

/* ── Slider 组件 ── */
body .el-slider__bar {
  background: var(--gradient-primary);
}

body .el-slider__button {
  border-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

/* ── Message 组件 ── */
body .el-message {
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(var(--blur-sm));
}

/* ── 消息框 ── */
body .el-message-box {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-2xl);
}

/* ── 移动端消息框详细响应式 ── */
@media (max-width: 768px) {
  .el-message-box {
    width: 90vw !important;
    max-width: 90vw !important;
    padding: 20px 16px !important;
  }

  .el-message-box__header {
    padding: 0 0 12px !important;
  }

  .el-message-box__title {
    font-size: 16px !important;
  }

  .el-message-box__content {
    padding: 10px 0 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .el-message-box__btns {
    padding: 0 !important;
  }

  .el-message-box__btns .el-button {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
  }
}

/* ── 暗色模式 Element UI 适配 ── */
[data-theme="dark"] .el-input__inner,
[data-theme="dark"] .el-textarea__inner {
  background-color: var(--bg-input) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .el-input__inner:focus,
[data-theme="dark"] .el-textarea__inner:focus {
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .el-input__inner::placeholder,
[data-theme="dark"] .el-textarea__inner::placeholder {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .el-select .el-input .el-select__caret {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .el-form-item__label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .el-switch__label {
  color: var(--text-tertiary) !important;
}

[data-theme="dark"] .el-switch__label.is-active {
  color: var(--color-primary-light) !important;
}

[data-theme="dark"] .el-slider__runway {
  background-color: var(--border-default) !important;
}

[data-theme="dark"] .el-button--default {
  background-color: var(--bg-input) !important;
  border-color: var(--border-default) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .el-button--default:hover {
  background: var(--color-primary-50) !important;
  color: var(--color-primary-light) !important;
  border-color: var(--color-primary-200) !important;
}

[data-theme="dark"] .el-picker-panel,
[data-theme="dark"] .el-date-picker,
[data-theme="dark"] .el-picker-dropdown,
[data-theme="dark"] .el-time-panel {
  background: #1e293b !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .el-picker-panel__sidebar,
[data-theme="dark"] .el-picker-panel__shortcut,
[data-theme="dark"] .el-date-table th,
[data-theme="dark"] .el-date-table td,
[data-theme="dark"] .el-month-table td,
[data-theme="dark"] .el-year-table td,
[data-theme="dark"] .el-time-spinner__item {
  background: #1e293b !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .el-picker-panel__shortcut:hover,
[data-theme="dark"] .el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #334155 !important;
}

[data-theme="dark"] .el-date-table th {
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .el-time-panel__btn,
[data-theme="dark"] .el-picker-panel__icon-btn {
  color: #94a3b8 !important;
}

[data-theme="dark"] .el-message-box {
  background: #1e293b !important;
  border-color: var(--border-default) !important;
}

[data-theme="dark"] .el-message-box__title {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .el-message-box__content {
  color: var(--text-secondary) !important;
}