/**
 * 知识库模态框样式修复文件
 * 陕西大模智能科技有限公司
 * 
 * 目的：修复知识库创建弹窗的视觉问题
 * 问题：1) 关闭图标悬停光标异常 2) 取消按钮背景显示异常
 * 解决：定义专用的知识库模态框样式，确保视觉效果正常
 */

/* ==========================================================================
   知识库模态框关闭按钮样式修复
   ========================================================================== */

/* 知识库模态框关闭按钮 */
#createKnowledgeModal .modal-header .close,
#importDocumentModal .modal-header .close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #6c757d !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
    cursor: pointer !important; /* 修复光标样式 - 小手样式 */
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
}

/* 关闭按钮悬停效果 */
#createKnowledgeModal .modal-header .close:hover,
#importDocumentModal .modal-header .close:hover,
#createKnowledgeModal .modal-header .close:focus,
#importDocumentModal .modal-header .close:focus {
    opacity: 1 !important;
    color: #495057 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    transform: none !important; /* 避免变形 */
}

/* 关闭按钮活动状态 */
#createKnowledgeModal .modal-header .close:active,
#importDocumentModal .modal-header .close:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    transform: scale(0.95) !important;
}

/* ==========================================================================
   知识库模态框取消按钮样式修复
   ========================================================================== */

/* 知识库模态框取消按钮 */
#createKnowledgeModal .modal-footer .btn-secondary,
#importDocumentModal .modal-footer .btn-secondary {
    background-color: #6c757d !important; /* 修复背景显示异常 */
    border-color: #6c757d !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    user-select: none !important;
    border: 1px solid #6c757d !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
}

/* 取消按钮悬停效果 */
#createKnowledgeModal .modal-footer .btn-secondary:hover,
#importDocumentModal .modal-footer .btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 取消按钮焦点效果 */
#createKnowledgeModal .modal-footer .btn-secondary:focus,
#importDocumentModal .modal-footer .btn-secondary:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25) !important;
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #ffffff !important;
}

/* 取消按钮活动状态 */
#createKnowledgeModal .modal-footer .btn-secondary:active,
#importDocumentModal .modal-footer .btn-secondary:active {
    background-color: #545b62 !important;
    border-color: #4e555b !important;
    color: #ffffff !important;
    transform: translateY(0) !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

/* 取消按钮禁用状态 */
#createKnowledgeModal .modal-footer .btn-secondary:disabled,
#importDocumentModal .modal-footer .btn-secondary:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   知识库模态框主要按钮样式优化
   ========================================================================== */

/* 创建知识库按钮 */
#createKnowledgeModal .modal-footer .btn-primary,
#importDocumentModal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) !important;
}

/* 主要按钮悬停效果 */
#createKnowledgeModal .modal-footer .btn-primary:hover,
#importDocumentModal .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3) !important;
}

/* 主要按钮焦点效果 */
#createKnowledgeModal .modal-footer .btn-primary:focus,
#importDocumentModal .modal-footer .btn-primary:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* ==========================================================================
   响应式设计
   ========================================================================== */

/* 小屏幕适配 */
@media (max-width: 576px) {
    #createKnowledgeModal .modal-header .close,
    #importDocumentModal .modal-header .close {
        top: 10px !important;
        right: 15px !important;
        font-size: 20px !important;
        width: 28px !important;
        height: 28px !important;
    }
    
    #createKnowledgeModal .modal-footer .btn,
    #importDocumentModal .modal-footer .btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}

/* 中等屏幕适配 */
@media (min-width: 577px) and (max-width: 768px) {
    #createKnowledgeModal .modal-header .close,
    #importDocumentModal .modal-header .close {
        font-size: 22px !important;
        width: 30px !important;
        height: 30px !important;
    }
}

/* ==========================================================================
   浏览器兼容性
   ========================================================================== */

/* IE11 兼容性 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #createKnowledgeModal .modal-header .close,
    #importDocumentModal .modal-header .close {
        display: block !important;
        float: right !important;
    }
}

/* Edge 兼容性 */
@supports (-ms-ime-align: auto) {
    #createKnowledgeModal .modal-footer .btn-secondary,
    #importDocumentModal .modal-footer .btn-secondary {
        background: #6c757d !important;
    }
}

/* Firefox 兼容性 */
@-moz-document url-prefix() {
    #createKnowledgeModal .modal-header .close,
    #importDocumentModal .modal-header .close {
        -moz-appearance: none !important;
    }
}

/* Safari 兼容性 */
@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        #createKnowledgeModal .modal-footer .btn,
        #importDocumentModal .modal-footer .btn {
            -webkit-appearance: none !important;
        }
    }
}