/* 简约白灰浅色风格弹窗组件样式 */

/* Element UI 弹窗基础样式重写 */
.el-dialog {
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;
    overflow: hidden !important;
}

.el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.3) !important;
}

.el-dialog__header {
    background: #fafbfc !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 16px 20px !important;
    position: relative;
}

.el-dialog__title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #212529 !important;
    line-height: 1.4 !important;
}

.el-dialog__headerbtn {
    top: 16px !important;
    right: 16px !important;
    width: 28px !important;
    height: 28px !important;
    background: #f8f9fa !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.el-dialog__headerbtn:hover {
    background: #dc3545 !important;
}

.el-dialog__close {
    color: #6c757d !important;
    font-size: 14px !important;
    font-weight: normal !important;
}

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

.el-dialog__body {
    padding: 20px !important;
    background: #ffffff !important;
    color: #495057 !important;
    line-height: 1.6 !important;
}

.el-dialog__footer {
    padding: 12px 20px 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f3f4 !important;
    text-align: right !important;
}

/* 表单样式优化 */
.el-form-item {
    margin-bottom: 18px !important;
}

.el-form-item__label {
    font-weight: 500 !important;
    color: #495057 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.el-input__inner {
    border-radius: 6px !important;
    border: 1px solid #ced4da !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    background: #ffffff !important;
}

.el-input__inner:focus {
    border-color: #1976d2 !important;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1) !important;
}

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

/* 按钮样式优化 */
.el-button {
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}

.el-button--primary {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

.el-button--primary:hover {
    background: #1565c0 !important;
    border-color: #1565c0 !important;
}

.el-button--default {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
}

.el-button--default:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}

.el-button--danger {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.el-button--danger:hover {
    background: #c82333 !important;
    border-color: #bd2130 !important;
}

/* 修改密码弹窗特定样式 */
.password-dialog .el-dialog {
    width: 460px !important;
}

.password-dialog .el-form-item__label {
    width: 90px !important;
}

.password-dialog .el-form-item__content {
    margin-left: 90px !important;
}

/* 头像设置弹窗样式 */
.avatar-dialog .el-dialog {
    width: 500px !important;
}

.avatar-upload-area {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 32px 16px;
    text-align: center;
    background: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
}

.avatar-upload-area:hover {
    border-color: #1976d2;
    background: rgba(25, 118, 210, 0.05);
}

.avatar-upload-area i {
    font-size: 40px;
    color: #adb5bd;
    margin-bottom: 12px;
    display: block;
}

.avatar-upload-area:hover i {
    color: #1976d2;
}

.avatar-upload-text {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
}

.avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e9ecef;
    margin: 0 auto 16px;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 微信绑定弹窗样式 */
.wechat-dialog .el-dialog {
    width: 380px !important;
}

.qr-code-container {
    text-align: center;
    padding: 16px;
}

.qr-code-container canvas {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.qr-code-tip {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px;
}

/* 退出登录确认弹窗样式 */
.logout-dialog .el-dialog {
    width: 400px !important;
}

.logout-dialog .el-dialog__body {
    text-align: center;
    padding: 32px 20px 20px !important;
}

.logout-icon {
    width: 56px;
    height: 56px;
    background: #fff3cd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border: 2px solid #ffeaa7;
}

.logout-icon i {
    font-size: 24px;
    color: #856404;
}

.logout-message {
    font-size: 16px;
    color: #495057;
    font-weight: 500;
    margin-bottom: 6px;
}

.logout-submessage {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.6;
}

/* 消息提示样式优化 */
.el-message {
    border-radius: 6px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e9ecef !important;
}

.el-message--success {
    background: #d4edda !important;
    border-color: #c3e6cb !important;
    color: #155724 !important;
}

.el-message--warning {
    background: #fff3cd !important;
    border-color: #ffeaa7 !important;
    color: #856404 !important;
}

.el-message--error {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
}

.el-message--info {
    background: #d1ecf1 !important;
    border-color: #bee5eb !important;
    color: #0c5460 !important;
}

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

.el-loading-spinner {
    margin-top: -25px !important;
}

.el-loading-spinner .circular {
    width: 42px !important;
    height: 42px !important;
}

.el-loading-spinner .path {
    stroke: #1976d2 !important;
    stroke-width: 2 !important;
}

.el-loading-text {
    color: #495057 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    margin-top: 12px !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .el-dialog {
        width: 90% !important;
        margin: 0 auto !important;
    }
    
    .password-dialog .el-dialog,
    .avatar-dialog .el-dialog,
    .wechat-dialog .el-dialog,
    .logout-dialog .el-dialog {
        width: 90% !important;
    }
    
    .el-dialog__body {
        padding: 16px 12px !important;
    }
    
    .el-dialog__footer {
        padding: 8px 12px 16px !important;
    }
    
    .password-dialog .el-form-item__label {
        width: 70px !important;
    }
    
    .password-dialog .el-form-item__content {
        margin-left: 70px !important;
    }
}

/* 动画效果 */
@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.el-dialog {
    animation: dialogSlideIn 0.2s ease-out !important;
}

/* 表单验证样式 */
.el-form-item.is-error .el-input__inner {
    border-color: #dc3545 !important;
}

.el-form-item__error {
    color: #dc3545 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding-top: 4px !important;
}

/* 工具提示样式 */
.el-tooltip__popper {
    background: #495057 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
}

.el-tooltip__popper .popper__arrow {
    border-top-color: #495057 !important;
}

.el-tooltip__popper .popper__arrow::after {
    border-top-color: #495057 !important;
}

/* 选择器样式 */
.el-select-dropdown {
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

.el-select-dropdown__item {
    color: #495057 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}

.el-select-dropdown__item:hover {
    background: #f8f9fa !important;
}

.el-select-dropdown__item.selected {
    background: #e3f2fd !important;
    color: #1976d2 !important;
    font-weight: 500 !important;
}

/* 日期选择器样式 */
.el-date-picker {
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

.el-picker-panel__header {
    background: #fafbfc !important;
    border-bottom: 1px solid #e9ecef !important;
}

.el-date-table th {
    color: #6c757d !important;
    font-weight: 500 !important;
}

.el-date-table td.today .cell {
    color: #1976d2 !important;
    font-weight: 500 !important;
}

.el-date-table td.current:not(.disabled) .cell {
    background: #1976d2 !important;
    color: #ffffff !important;
}

/* 分页器样式 */
.el-pagination {
    color: #495057 !important;
}

.el-pagination .el-pager li {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
}

.el-pagination .el-pager li:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}

.el-pagination .el-pager li.active {
    background: #1976d2 !important;
    border-color: #1976d2 !important;
    color: #ffffff !important;
}

.el-pagination .btn-prev,
.el-pagination .btn-next {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    border-radius: 4px !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
    background: #f8f9fa !important;
    border-color: #adb5bd !important;
}