// Element Plus Message z-index
:root {
  --el-message-z-index: 9999;
}

// body 样式
body {
  // background-color: #f5f7fa;
  color: #303133;
  transition: background-color 0.3s ease, color 0.3s ease;
}

// container-box 样式
.container-box {
  // background-color: #ffffff;
  // border: 1px solid #ebeef5;
  padding: 24px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 24px;
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination-bar {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 0 0;
}

// 修复 ElMessage 显示问题
// 只修复定位，保持 Element Plus 官方样式
.el-message {
  // 确保消息固定在页面顶部中央，不受父容器影响
  position: fixed !important;
  z-index: var(--el-message-z-index, 9999) !important;
  pointer-events: auto !important;
}

.wang-editor-wrapper{
  border: 1px solid #dcdfe6 !important;
  
  .toolbar-container{
    border-bottom: 1px solid #dcdfe6 !important;
  }
  
  .editor-container {
    background-color: #ffffff !important;
  }
  
  :deep(.w-e-text),
  :deep(.w-e-text-container) {
    background-color: transparent !important;
    
    * {
      color: #1a1a2e !important;
    }
    
    p {
      color: #1a1a2e !important;
      margin: 8px 0 !important;
      line-height: 1.8 !important;
      font-size: 14px !important;
      text-indent: 0 !important;
    }
    
    span {
      color: #1a1a2e !important;
      font-size: 14px !important;
      line-height: 1.8 !important;
    }
    
    strong, b {
      font-weight: 600 !important;
      color: #1a1a2e !important;
    }
    
    em, i {
      font-style: italic !important;
    }
    
    u {
      text-decoration: underline !important;
    }
    
    s, del {
      text-decoration: line-through !important;
    }
    
    h1 {
      color: #1a1a2e !important;
      font-size: 28px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    h2 {
      color: #1a1a2e !important;
      font-size: 24px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    h3 {
      color: #1a1a2e !important;
      font-size: 20px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    h4 {
      color: #1a1a2e !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    h5 {
      color: #1a1a2e !important;
      font-size: 16px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    h6 {
      color: #1a1a2e !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      margin: 16px 0 12px !important;
      line-height: 1.4 !important;
    }
    
    a {
      color: #3973ff !important;
      text-decoration: underline !important;
      
      &:hover {
        color: #3973ff !important;
        opacity: 0.8 !important;
      }
    }
    
    code {
      background-color: #f5f7fa !important;
      color: #1a1a2e !important;
      border: 1px solid #e4e7ed !important;
      border-radius: 3px !important;
      padding: 2px 6px !important;
      font-family: 'Consolas', 'Monaco', monospace !important;
      font-size: 13px !important;
    }
    
    pre {
      background-color: #f5f7fa !important;
      border: 1px solid #e4e7ed !important;
      border-radius: 4px !important;
      color: #1a1a2e !important;
      padding: 12px 16px !important;
      margin: 12px 0 !important;
      overflow-x: auto;
      
      code {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        color: #1a1a2e !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
      }
    }
    
    blockquote {
      border-left: 4px solid #3973ff !important;
      background-color: #f5f7fa !important;
      color: #606266 !important;
      padding: 8px 16px !important;
      margin: 12px 0 !important;
    }
    
    table {
      border-collapse: collapse !important;
      border: 1px solid #e4e7ed !important;
      width: 100% !important;
      
      th, td {
        border: 1px solid #e4e7ed !important;
        background-color: #ffffff !important;
        color: #1a1a2e !important;
        padding: 8px 12px !important;
        min-width: 60px;
      }
      
      th {
        background-color: #f5f7fa !important;
        font-weight: 600 !important;
      }
    }
    
    ul {
      list-style-type: disc !important;
      color: #1a1a2e !important;
      padding-left: 24px !important;
      margin: 8px 0 !important;
    }
    
    ol {
      list-style-type: decimal !important;
      color: #1a1a2e !important;
      padding-left: 24px !important;
      margin: 8px 0 !important;
    }
    
    li {
      color: #1a1a2e !important;
      line-height: 1.8 !important;
      margin: 4px 0 !important;
    }
    
    hr {
      border-top: 1px solid #e4e7ed !important;
      margin: 16px 0 !important;
    }
    
    img {
      max-width: 100% !important;
      border-radius: 4px !important;
      margin: 8px 0 !important;
    }
    
    video {
      max-width: 100% !important;
      border-radius: 4px !important;
      margin: 8px 0 !important;
    }
    
    .w-e-panel-tab-content {
      color: #1a1a2e !important;
    }
  }
}

html.dark {
  .wang-editor-wrapper {
    border-color: #3d3d3d !important;
    background-color: #1a1a1a !important;
    
    .toolbar-container {
      background-color: #2d2d2d !important;
      border-color: #3d3d3d !important;
    }
    
    .editor-container {
      background-color: #1a1a1a !important;
      
      &::-webkit-scrollbar-thumb {
        background: #4d4d4d !important;
      }
      
      &::-webkit-scrollbar-track {
        background: #2d2d2d !important;
      }
    }
    
    :deep(.w-e-text),
    :deep(.w-e-text-container) {
      background-color: transparent !important;
      
      * {
        color: #e0e0e0 !important;
      }
      
      p {
        color: #e0e0e0 !important;
        margin: 8px 0 !important;
        line-height: 1.8 !important;
        font-size: 14px !important;
        text-indent: 0 !important;
      }
      
      span {
        color: #e0e0e0 !important;
        font-size: 14px !important;
        line-height: 1.8 !important;
      }
      
      strong, b {
        font-weight: 600 !important;
        color: #e0e0e0 !important;
      }
      
      em, i {
        font-style: italic !important;
      }
      
      u {
        text-decoration: underline !important;
      }
      
      s, del {
        text-decoration: line-through !important;
      }
      
      h1 {
        color: #e0e0e0 !important;
        font-size: 28px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      h2 {
        color: #e0e0e0 !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      h3 {
        color: #e0e0e0 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      h4 {
        color: #e0e0e0 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      h5 {
        color: #e0e0e0 !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      h6 {
        color: #e0e0e0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        margin: 16px 0 12px !important;
        line-height: 1.4 !important;
      }
      
      a {
        color: #4f84ff !important;
        text-decoration: underline !important;
        
        &:hover {
          color: #4f84ff !important;
          opacity: 0.8 !important;
        }
      }
      
      code {
        background-color: #2d2d2d !important;
        color: #e0e0e0 !important;
        border-color: #3d3d3d !important;
      }
      
      pre {
        background-color: #2d2d2d !important;
        border-color: #3d3d3d !important;
        color: #e0e0e0 !important;
        
        code {
          background-color: transparent !important;
          border: none !important;
          color: #e0e0e0 !important;
        }
      }
      
      blockquote {
        border-left-color: #4f84ff !important;
        background-color: #2d2d2d !important;
        color: #b0b0b0 !important;
      }
      
      table {
        border-color: #3d3d3d !important;
        
        th, td {
          border-color: #3d3d3d !important;
          background-color: #1a1a1a !important;
          color: #e0e0e0 !important;
        }
        
        th {
          background-color: #2d2d2d !important;
        }
      }
      
      ul, ol, li {
        color: #e0e0e0 !important;
      }
      
      hr {
        border-top-color: #3d3d3d !important;
      }
      
      img, video {
        max-width: 100% !important;
        border-radius: 4px !important;
      }
      
      .w-e-panel-tab-content {
        color: #e0e0e0 !important;
      }
    }
  }
}
.el-form-item__label{
  min-width: 80px !important;
}