/* ========================================
   爱卡云 - 黑白配色全局美化
   简约高级风格
   ======================================== */

/* ===== 全局背景 ===== */
body {
  background: #fafafa !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  color: #1a1a1a !important;
}

.template {
  background: transparent !important;
}

/* ===== 主内容区 ===== */
.el-main {
  background: #fafafa !important;
  padding: 24px !important;
}

/* ===== 通用卡片样式 ===== */
.el-card,
.card-box,
.main-card,
.info-box,
.money-box,
.statistics-bottom,
.product-list-box,
.recommend-box,
.recommend-box-open,
.WorkOrder-box,
.notice-box {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: all 0.25s ease !important;
}

.el-card:hover,
.card-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  border-color: #d0d0d0 !important;
}

.el-card__body {
  padding: 24px !important;
}

.el-card__header {
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 16px 24px !important;
  font-weight: 600 !important;
}

/* ===== 侧边栏 ===== */
.el-aside {
  background: #1a1a1a !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1) !important;
}

/* 侧边栏 Logo 区域 */
.el-aside .logo,
.el-aside .sidebar-logo {
  border-bottom: 1px solid #2a2a2a !important;
}

/* 侧边栏菜单项 */
.el-menu {
  background: transparent !important;
  border-right: none !important;
}

.el-menu-item,
.el-submenu__title {
  color: rgba(255,255,255,0.6) !important;
  height: 48px !important;
  line-height: 48px !important;
  transition: all 0.2s !important;
  border-radius: 6px !important;
  margin: 4px 10px !important;
  font-size: 14px !important;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

.el-menu-item.is-active {
  background: #fff !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.el-menu-item i,
.el-submenu__title i {
  color: inherit !important;
  margin-right: 10px !important;
  font-size: 16px !important;
}

.el-submenu .el-menu {
  background: rgba(0,0,0,0.2) !important;
}

.el-submenu .el-menu-item {
  height: 42px !important;
  line-height: 42px !important;
  padding-left: 48px !important;
  min-width: auto !important;
  font-size: 13px !important;
}

/* ===== 顶部菜单 ===== */
.el-header {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 0 24px !important;
}

/* ===== 按钮样式 ===== */
.el-button--primary {
  background: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 6px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  color: #fff !important;
  box-shadow: none !important;
}

.el-button--primary:hover {
  background: #000 !important;
  border-color: #000 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

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

.el-button--default {
  background: #fff !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  color: #333 !important;
  transition: all 0.2s !important;
}

.el-button--default:hover {
  border-color: #1a1a1a !important;
  color: #1a1a1a !important;
  background: #fafafa !important;
}

.el-button--success {
  background: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 6px !important;
  color: #fff !important;
}

.el-button--warning {
  background: #666 !important;
  border: 1px solid #666 !important;
  border-radius: 6px !important;
  color: #fff !important;
}

.el-button--danger {
  background: #fff !important;
  border: 1px solid #ff4d4f !important;
  border-radius: 6px !important;
  color: #ff4d4f !important;
}

.el-button--danger:hover {
  background: #ff4d4f !important;
  color: #fff !important;
}

.el-button--text {
  color: #1a1a1a !important;
}

.el-button--text:hover {
  color: #000 !important;
}

.el-button--mini,
.el-button--small {
  border-radius: 4px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

/* ===== 输入框样式 ===== */
.el-input__inner {
  border-radius: 6px !important;
  border: 1px solid #d9d9d9 !important;
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  background: #fff !important;
  color: #1a1a1a !important;
}

.el-input__inner:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06) !important;
}

.el-input__inner:hover {
  border-color: #8c8c8c !important;
}

.el-input__inner::placeholder {
  color: #bfbfbf !important;
}

.el-textarea__inner {
  border-radius: 6px !important;
  border: 1px solid #d9d9d9 !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  background: #fff !important;
}

.el-textarea__inner:focus {
  border-color: #1a1a1a !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06) !important;
}

.el-select .el-input__inner {
  cursor: pointer !important;
}

.el-input-group__append,
.el-input-group__prepend {
  background: #fafafa !important;
  border: 1px solid #d9d9d9 !important;
  color: #595959 !important;
}

/* ===== 表格样式 ===== */
.el-table {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

.el-table th {
  background: #fafafa !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  height: 48px !important;
  border-bottom: 2px solid #f0f0f0 !important;
}

.el-table td {
  font-size: 14px !important;
  color: #333 !important;
  height: 50px !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #fafafa !important;
}

.el-table__body tr.current-row > td {
  background: #f5f5f5 !important;
}

.el-table__empty-block {
  background: #fff !important;
}

/* ===== 标签页样式 ===== */
.el-tabs__item {
  font-size: 14px !important;
  font-weight: 500 !important;
  height: 48px !important;
  line-height: 48px !important;
  color: #8c8c8c !important;
  transition: all 0.2s !important;
}

.el-tabs__item:hover {
  color: #1a1a1a !important;
}

.el-tabs__item.is-active {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.el-tabs__active-bar {
  background: #1a1a1a !important;
  height: 2px !important;
}

.el-tabs__nav-wrap::after {
  background-color: #f0f0f0 !important;
  height: 1px !important;
}

/* ===== 分页样式 ===== */
.el-pagination {
  margin-top: 24px !important;
  justify-content: center !important;
  font-weight: 500 !important;
}

.el-pagination button,
.el-pagination .el-pager li {
  border-radius: 4px !important;
  margin: 0 2px !important;
  min-width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  transition: all 0.2s !important;
  background: #fff !important;
  color: #595959 !important;
}

.el-pagination .el-pager li:hover {
  color: #1a1a1a !important;
  background: #f5f5f5 !important;
}

.el-pagination .el-pager li.active {
  background: #1a1a1a !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.el-pagination button:disabled {
  color: #d9d9d9 !important;
  background: #fafafa !important;
}

/* ===== 弹窗样式 ===== */
.el-dialog {
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18) !important;
  border: 1px solid #f0f0f0 !important;
}

.el-dialog__header {
  background: #fff !important;
  padding: 20px 24px !important;
  margin-right: 0 !important;
  border-bottom: 1px solid #f5f5f5 !important;
}

.el-dialog__title {
  color: #1a1a1a !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #8c8c8c !important;
  font-size: 18px !important;
  transition: color 0.2s !important;
}

.el-dialog__headerbtn:hover .el-dialog__close {
  color: #1a1a1a !important;
}

.el-dialog__body {
  padding: 24px !important;
}

.el-dialog__footer {
  padding: 16px 24px !important;
  border-top: 1px solid #f5f5f5 !important;
}

/* ===== 消息提示 ===== */
.el-message {
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  border: 1px solid #f0f0f0 !important;
  padding: 14px 18px !important;
  background: #fff !important;
}

.el-message--success {
  color: #1a1a1a !important;
}

.el-message--error {
  color: #ff4d4f !important;
}

.el-message--warning {
  color: #faad14 !important;
}

.el-message--info {
  color: #1a1a1a !important;
}

.el-message__icon {
  font-size: 18px !important;
}

/* ===== 标签样式 ===== */
.el-tag {
  border-radius: 4px !important;
  padding: 0 10px !important;
  height: 24px !important;
  line-height: 22px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid !important;
}

.el-tag--success {
  background: #f6ffed !important;
  border-color: #b7eb8f !important;
  color: #52c41a !important;
}

.el-tag--warning {
  background: #fffbe6 !important;
  border-color: #ffe58f !important;
  color: #faad14 !important;
}

.el-tag--danger {
  background: #fff2f0 !important;
  border-color: #ffccc7 !important;
  color: #ff4d4f !important;
}

.el-tag--info {
  background: #fafafa !important;
  border-color: #d9d9d9 !important;
  color: #595959 !important;
}

.el-tag--primary {
  background: #f5f5f5 !important;
  border-color: #1a1a1a !important;
  color: #1a1a1a !important;
}

/* ===== 复选框和单选框 ===== */
.el-checkbox__inner {
  border-radius: 3px !important;
  border: 1px solid #d9d9d9 !important;
  width: 16px !important;
  height: 16px !important;
  transition: all 0.2s !important;
  background: #fff !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.el-checkbox__label {
  color: #333 !important;
  font-size: 14px !important;
}

.el-radio__inner {
  border: 1px solid #d9d9d9 !important;
  width: 16px !important;
  height: 16px !important;
  transition: all 0.2s !important;
  background: #fff !important;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #1a1a1a !important;
  background: #fff !important;
}

.el-radio__input.is-checked .el-radio__inner::after {
  background: #1a1a1a !important;
  width: 8px !important;
  height: 8px !important;
}

.el-radio__label {
  color: #333 !important;
  font-size: 14px !important;
}

/* ===== 开关 ===== */
.el-switch.is-checked .el-switch__core {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.el-switch__core {
  border-radius: 10px !important;
  border: 1px solid #d9d9d9 !important;
}

/* ===== 进度条 ===== */
.el-progress-bar__outer {
  background: #f5f5f5 !important;
  border-radius: 6px !important;
  height: 8px !important;
}

.el-progress-bar__inner {
  background: #1a1a1a !important;
  border-radius: 6px !important;
}

/* ===== 面包屑 ===== */
.el-breadcrumb__inner {
  color: #8c8c8c !important;
  font-size: 14px !important;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.el-breadcrumb__separator {
  color: #d9d9d9 !important;
}

/* ===== 下拉菜单 ===== */
.el-dropdown-menu {
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  border: 1px solid #f0f0f0 !important;
  padding: 6px !important;
}

.el-dropdown-menu__item {
  border-radius: 4px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  transition: all 0.2s !important;
  color: #333 !important;
}

.el-dropdown-menu__item:hover {
  background: #f5f5f5 !important;
  color: #1a1a1a !important;
}

/* ===== 时间线 ===== */
.el-timeline-item__node {
  background: #1a1a1a !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

.el-timeline-item__tail {
  border-left: 2px solid #f0f0f0 !important;
}

/* ===== 步骤条 ===== */
.el-step__head.is-process,
.el-step__head.is-success {
  color: #1a1a1a !important;
  border-color: #1a1a1a !important;
}

.el-step__title.is-process,
.el-step__title.is-success {
  color: #1a1a1a !important;
  font-weight: 600 !important;
}

.el-step__line-inner {
  background: #1a1a1a !important;
}

/* ===== 加载动画 ===== */
.el-loading-mask {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(2px) !important;
}

.el-loading-spinner .path {
  stroke: #1a1a1a !important;
}

.el-loading-spinner .el-loading-text {
  color: #1a1a1a !important;
}

/* ===== 空状态 ===== */
.el-empty__description p {
  color: #8c8c8c !important;
  font-size: 14px !important;
}

/* ===== 滚动条美化 ===== */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: #f5f5f5 !important;
}

::-webkit-scrollbar-thumb {
  background: #bfbfbf !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #8c8c8c !important;
}

/* ===== 页面标题 ===== */
.page-title,
.title-text,
.card-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  margin-bottom: 20px !important;
}

/* ===== 表单标签 ===== */
.el-form-item__label {
  font-size: 14px !important;
  color: #595959 !important;
  font-weight: 500 !important;
}

/* ===== 提示文字 ===== */
.el-form-item__error {
  color: #ff4d4f !important;
  font-size: 12px !important;
}

/* ===== 徽章 ===== */
.el-badge__content {
  background: #ff4d4f !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(255,77,79,0.3) !important;
}

/* ===== 头像 ===== */
.avatar,
.user-avatar,
.name-first {
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* ===== Tooltip ===== */
.el-tooltip__popper.is-dark {
  background: #1a1a1a !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

.el-tooltip__popper.is-dark .popper__arrow {
  border-top-color: #1a1a1a !important;
  border-bottom-color: #1a1a1a !important;
}

/* ===== Popover ===== */
.el-popover {
  border-radius: 8px !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .el-main {
    padding: 12px !important;
  }
  
  .el-card__body {
    padding: 16px !important;
  }
  
  .el-dialog {
    margin: 5vh !important;
    width: 90vw !important;
  }
}