/* 文件：css/huanzhe-dangan.css - 患者档案专用样式（完整版） */

/* 患者列表容器 - 隐藏横向滚动条 */
.huanzhe-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 美化滚动条 - WebKit浏览器 (Chrome, Safari, Edge) */
.huanzhe-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.huanzhe-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.huanzhe-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.huanzhe-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 患者列表项 - 确保内容不溢出 */
.huanzhe-item {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100%;
    box-sizing: border-box;
}

/* 患者信息文字自动换行 */
.huanzhe-item-info {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
}

/* 患者姓名 - 防止过长姓名溢出 */
.huanzhe-item-name {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* 患者详情视图 - 确保所有内容不溢出 */
#huanzheDetailView {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* 历史诊断列表容器 - 隐藏横向滚动条 */
.history-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 历史诊断列表滚动条美化 */
.history-list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.history-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.history-list::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 历史诊断列表项 - 文字换行 */
.history-item {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* 表单区域 - 确保输入框不溢出 */
.huanzhe-info-form {
    max-width: 100%;
    box-sizing: border-box;
}

.form-group input,
.form-group select,
.form-group textarea {
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}

/* 弹窗内容容器 - 防止内容溢出 */
.huanzhe-modal-content {
    max-width: 100%;
    overflow: hidden;
}

/* 左侧列表区域 - 确保宽度正确 */
.huanzhe-left {
    width: 35%;
    max-width: 35%;
    overflow: hidden;
}

/* 右侧详情区域 - 确保宽度正确 */
.huanzhe-right {
    width: 65%;
    max-width: 65%;
    overflow: hidden;
}

/* 响应式设计 - 小屏幕适配 */
@media (max-width: 768px) {
    .huanzhe-left,
    .huanzhe-right {
        width: 100%;
        max-width: 100%;
    }
    
    .huanzhe-modal-body {
        flex-direction: column;
    }
    
    .huanzhe-left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
}

/* ===== 移动端患者档案 - 全新两层级设计 ===== */
@media (max-width: 768px) {
    /* 第一层：患者列表弹窗 - 底部上滑 */
    .huanzhe-modal {
        align-items: flex-end !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
    
    .huanzhe-modal .huanzhe-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        animation: mobileSlideUp 0.3s ease !important;
    }
    
    @keyframes mobileSlideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    /* 弹窗头部 */
    .huanzhe-modal .huanzhe-modal-header {
        position: sticky !important;
        top: 0 !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
        padding: 15px 20px !important;
        border-radius: 20px 20px 0 0 !important;
        z-index: 10 !important;
    }
    
    .huanzhe-modal .huanzhe-modal-header h2 {
        color: white !important;
        font-size: 18px !important;
        margin: 0 !important;
    }
    
    .huanzhe-modal .huanzhe-modal-header button {
        background: rgba(255,255,255,0.2) !important;
        color: white !important;
        border: none !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        cursor: pointer !important;
    }
    
    /* 搜索框 */
    .mobile-search-box {
        padding: 15px !important;
        background: white !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .mobile-search-box input {
        width: 100% !important;
        padding: 12px 15px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 30px !important;
        font-size: 14px !important;
        background: #f9fafb !important;
        outline: none !important;
    }
    
    .mobile-search-box input:focus {
        border-color: #10b981 !important;
        background: white !important;
    }
    
    /* 患者列表 */
    .mobile-patient-list {
        padding: 0 15px !important;
        background: white !important;
    }
    
    .mobile-patient-item {
        display: flex !important;
        align-items: center !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        cursor: pointer !important;
        transition: background 0.2s !important;
    }
    
    .mobile-patient-item:active {
        background: #f9fafb !important;
    }
    
    .mobile-patient-avatar {
        width: 48px !important;
        height: 48px !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .mobile-patient-avatar span {
        font-size: 20px !important;
        color: white !important;
    }
    
    .mobile-patient-info {
        flex: 1 !important;
    }
    
    .mobile-patient-name {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-patient-detail {
        font-size: 13px !important;
        color: #6b7280 !important;
    }
    
    .mobile-patient-arrow {
        color: #9ca3af !important;
        font-size: 18px !important;
    }
    
    /* 底部按钮 */
    .mobile-footer-btn {
        padding: 15px !important;
        background: white !important;
        border-top: 1px solid #f0f0f0 !important;
        position: sticky !important;
        bottom: 0 !important;
    }
    
    .mobile-footer-btn button {
        width: 100% !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: white !important;
        border: none !important;
        padding: 14px !important;
        border-radius: 30px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    
    /* 第二层：患者详情弹窗 */
    .mobile-detail-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: white !important;
        z-index: 10001 !important;
        animation: mobileSlideRight 0.3s ease !important;
        overflow-y: auto !important;
    }
    
    @keyframes mobileSlideRight {
        from { transform: translateX(100%); }
        to { transform: translateX(0); }
    }
    
    /* 详情头部 */
    .mobile-detail-header {
        position: sticky !important;
        top: 0 !important;
        background: linear-gradient(135deg, #10b981, #059669) !important;
        padding: 15px 20px !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        z-index: 10 !important;
    }
    
    .mobile-detail-header .back-btn {
        background: rgba(255,255,255,0.2) !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        color: white !important;
        cursor: pointer !important;
    }
    
    .mobile-detail-header .title {
        flex: 1 !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        color: white !important;
    }
    
    .mobile-detail-header .close-btn {
        background: rgba(255,255,255,0.2) !important;
        border: none !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        font-size: 20px !important;
        color: white !important;
        cursor: pointer !important;
    }
    
    /* 详情内容 */
    .mobile-detail-content {
        padding: 20px !important;
    }
    
    .mobile-info-card {
        background: #f9fafb !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .mobile-info-label {
        font-size: 12px !important;
        color: #6b7280 !important;
        margin-bottom: 6px !important;
    }
    
    .mobile-info-value {
        font-size: 15px !important;
        color: #1f2937 !important;
        font-weight: 500 !important;
        word-break: break-all !important;
    }
    
    /* 就诊历史列表 */
    .mobile-history-list {
        background: #f9fafb !important;
        border-radius: 16px !important;
        padding: 8px 0 !important;
        margin-bottom: 16px !important;
    }
    
    .mobile-history-item {
        padding: 12px 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
        cursor: pointer !important;
    }
    
    .mobile-history-item:last-child {
        border-bottom: none !important;
    }
    
    .mobile-history-title {
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #1f2937 !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-history-time {
        font-size: 11px !important;
        color: #9ca3af !important;
    }
    
    .mobile-history-preview {
        font-size: 12px !important;
        color: #6b7280 !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 底部按钮组 */
    .mobile-action-buttons {
        display: flex !important;
        gap: 12px !important;
        margin-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .mobile-action-buttons button {
        flex: 1 !important;
        padding: 12px !important;
        border-radius: 30px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }
    
    .mobile-edit-btn {
        background: #10b981 !important;
        color: white !important;
        border: none !important;
    }
    
    .mobile-delete-btn {
        background: white !important;
        color: #ef4444 !important;
        border: 1px solid #ef4444 !important;
    }
    
    /* 隐藏PC端原有布局中的左右分栏 */
    .huanzhe-modal .huanzhe-modal-body {
        padding: 0 !important;
    }
    
    .huanzhe-modal .huanzhe-left,
    .huanzhe-modal .huanzhe-right {
        display: none !important;
    }
    
    /* 显示移动端专用结构 */
    .mobile-patient-list-container {
        display: block !important;
    }
}