/* 自定义 element 暗黑模式 */
html.dark {
  /* wangEditor */
  --w-e-toolbar-color: #eeeeee !important;
  --w-e-toolbar-bg-color: #151a3d !important;
  --w-e-textarea-bg-color: #151a3d !important;
  --w-e-textarea-color: #eeeeee !important;
  --w-e-toolbar-active-bg-color: #464646 !important;
  --el-bg-color: #1b2127 !important; /* 调整为主背景色 */
  //--el-bg-color-page:#314f60 !important;
  --w-e-toolbar-border-color: var(--el-border-color-darker);

  // 这里是颜色集合
  --base-container-frame-color: #000000;
  --base-container-flex-color: #050d16;

  .el-main {
    // background: url('@/assets/bg.png') no-repeat !important;
    // background-size: cover !important; /* 确保图片覆盖整个背景 */
    // background-position: center; /* 背景图片居中 */
    // background-repeat: no-repeat; /* 不重复背景图片 */
  }

  .el-button {
    --el-button-bg-color: #1b2127;
  }

  .el-menu {
    background-color: #1b2127;
  }

  .el-scrollbar {
    background-color: #232d37; /* 调整滚动条背景色 */
  }

  .el-aside {
    background-color: #232d37; /* 调整侧边栏背景色 */
  }

  .el-input {
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整输入框背景色 */
    outline: none; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */

    --el-input-border-color: #075497 !important;
  }

  .el-select {
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整选择器背景色 */
    outline: none; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */
  }

  .el-select__wrapper {
    box-shadow: 0 0 0 1px #075497 inset !important;
  }

  .el-date-editor {
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整日期选择器背景色 */
    outline: none; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */
    box-shadow: 0 0 0 1px #075497 inset !important;
  }

  .el-date-range-picker {
    background-color: rgba(26, 60, 90, 0.8);
  }

  .el-picker-panel__footer {
    background-color: rgba(26, 60, 90, 0.8);
  }

  .el-date-table td.in-range .el-date-table-cell {
    background-color: rgba(22, 82, 140, 0.8);
  }

  .el-time-panel__footer {
    background-color: rgba(22, 82, 140, 1);
  }

  .el-time-panel {
    background-color: rgba(22, 82, 140, 1);
  }

  .ant-picker {
    border: 1px solid #075497;
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整时间选择器背景色 */
    outline: none; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */
    ::placeholder {
      //通过这个设置
      color: #6c6c6c;
    }
  }

  .ant-picker-panel-container {
    background-color: rgba(22, 82, 140);
  }

  .anticon {
    color: gray;
  }

  .ant-picker-input > input {
    color: #ffffff;
  }

  .ant-picker-clear {
    background-color: rgba(26, 60, 90, 0.8);
  }

  /* 全局修改日期选择器背景色 */
  .el-picker-panel.el-date-picker,
  .el-picker-panel.el-date-picker .el-picker-panel__body,
  .el-picker-panel.el-date-picker .el-picker-panel__body-wrapper {
    background-color: rgba(26, 60, 90, 0.8);
  }

  /* 可选：顺带把文字调亮，适配深色背景 */
  .el-picker-panel.el-date-picker {
    color: #ffffff;
  }

  .el-textarea__inner {
    border: 1px solid #075497;
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整文本域背景色 */
    outline: none !important; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */
    box-shadow: none;
  }

  .ant-input {
    border: 1px solid #075497;
    border-radius: 4px; /* 圆角边框 */
    background-color: rgba(26, 60, 90, 0.8); /* 调整输入框背景色 */
    outline: none !important; /* 去掉默认的点击后 outline 样式 */
    background-clip: padding-box; /* 确保背景（包括阴影）只到 padding 边缘 */
    transition:
      box-shadow 0.3s ease,
      border 0.3s ease; /* 过渡效果 */
    box-shadow: none;
    color: #e1e1e1;
  }

  .el-select-dropdown {
    background-color: rgba(26, 60, 90, 0.8);
  }

  /* 覆盖 el-select 下拉框项悬停时的背景颜色 */
  .el-select-dropdown__item:hover {
    background-color: #075497;
  }

  .el-table th {
    color: #e7e7e7 !important; /* 表头文字颜色 */
  }

  .el-table {
    --el-table-border-color: #0f3c63 !important;
    --el-table-border: 2px solid #0f3c63 !important;
    --el-fill-color-light: #224668;
    --el-table-header-bg-color: #2c2c2c !important;
    --el-table-current-row-bg-color: #1d3f70;
  }

  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: #224668 !important;
  }

  .el-dialog.custom-dialog {
    border: 3px solid #101938; /* 边框颜色和宽度 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 10px 22px rgba(83, 74, 177, 0.1); /* 阴影效果 */
    height: 620px;
  }

  .el-dialog__header {
    background-color: rgba(12, 18, 27, 0.9); /* 矩形背景色 */
    color: #ffffff; /* 标题文字颜色 */
    font-size: 20px; /* 标题文字大小 */
    font-weight: bold; /* 标题字体加粗 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中标题 */
    align-items: center; /* 垂直居中标题 */
    position: relative; /* 允许绝对定位关闭按钮 */
    border-radius: 8px; /* 圆角矩形 */
    border: 1px solid rgba(204, 204, 204, 0); /* 矩形边框 */
    padding: 1vh !important;
    border-bottom: none !important;
    margin-bottom: 1vh !important;
  }

  /* 右侧关闭按钮，保持在矩形右侧居中 */
  .el-dialog__headerbtn {
    position: absolute;
    right: 10px; /* 离右侧边距 10px */
    top: 50%; /* 顶部距离 50%  */
    transform: translateY(-50%); /* 垂直居中 */
  }

  /* 自定义关闭按钮样式 */
  .el-dialog__close {
    font-size: 16px; /* 关闭按钮大小 */
    color: #fff; /* 关闭按钮颜色 */
  }

  .w-e-bar-item button:hover,
  .w-e-menu-tooltip-v5::before {
    color: #eeeeee;
  }

  /* login */
  .login-container {
    background-color: #1a2a3a !important;

    .login-box {
      background-color: rgb(0 0 0 / 80%) !important;

      .login-form {
        box-shadow: rgb(255 255 255 / 12%) 0 2px 10px 2px !important;

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