/* 自定义样式 */

/* 设置页面底色 */
body {
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 头部样式 */
.el-header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
}

/* 侧边栏样式 */
.el-aside {
    transition: all 0.3s;
    overflow-x: hidden;
}

/* 表格样式优化 */
.el-table {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.el-table__header th {
    background-color: #f8f9fb !important;
    font-weight: 600;
}

/* 表单样式 */
.el-form-item {
    margin-bottom: 22px;
}

/* 卡片样式 */
.bg-white {
    background-color: #ffffff;
    transition: all 0.3s;
}

.shadow {
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.08);
}

.bg-white.rounded-lg {
    border-radius: 8px;
}

/* 按钮样式优化 */
.el-button + .el-button {
    margin-left: 8px;
}

.el-button--primary {
    background-color: #409eff;
}

.el-button--danger {
    background-color: #f56c6c;
}

/* 标签样式 */
.el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
}

/* 输入框样式 */
.el-input__inner:focus, .el-textarea__inner:focus {
    border-color: #409eff;
}

/* 规则编辑区域样式 */
.rulePattern {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

/* 对话框样式 */
.el-dialog {
    border-radius: 8px;
    overflow: hidden;
}

.el-dialog__header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fb;
}

.el-dialog__body {
    padding: 20px;
}

.el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background-color: #f8f9fb;
}

/* 测试结果区域 */
.test-results {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fb;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .el-aside {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
    }
    
    .container.mx-auto {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .el-container.container {
        flex-direction: column;
    }
}

/* 加载动画 */
.el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);
}

/* 表格空数据提示 */
.el-table__empty-text {
    color: #909399;
    font-size: 14px;
}

/* 动画效果 */
.el-button, .el-tag, .el-input__inner, .bg-white {
    transition: all 0.3s ease;
}

/* 消息提示样式 */
.el-message {
    min-width: 300px;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* 禁用按钮的样式 */
.el-button.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 表单验证错误提示 */
.el-form-item__error {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 2px;
}

/* 聚焦元素样式 */
.el-input.is-focus .el-input__inner {
    border-color: #409eff;
}

/* 选择器样式 */
.el-select .el-input.is-focus .el-input__inner {
    border-color: #409eff;
}