/**
 * 移动端表格响应式优化样式
 * Mobile Table Responsive CSS
 * 
 * 功能：
 * 1. 当屏幕宽度不足时，表格整体允许横向滑动
 * 2. 不挤压单元格内容，不强行换行，不缩小字体
 * 3. 上下table表格的容器宽度保持一致
 * 4. iOS/Android平滑滚动支持
 * 
 * 使用方法：
 * 1. 引入此CSS文件：<link rel="stylesheet" href="css/mobile-table-responsive.css">
 * 2. 在JavaScript中调用：initResponsiveTables();
 * 3. 或手动为table添加 class="responsive-table"
 */

/* ==================== 基础样式重置 ==================== */
* {
    box-sizing: border-box;
}

/* ==================== 表格滚动容器 ==================== */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    margin: 20px 0;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* 滚动条样式优化 */
.table-wrapper::-webkit-scrollbar {
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==================== 滚动提示 ==================== */
.scroll-hint {
    display: none;
    text-align: center;
    color: #666;
    font-size: 12px;
    padding: 8px;
    background: linear-gradient(90deg, #f0f8ff 0%, #e6f3ff 50%, #f0f8ff 100%);
    border-bottom: 1px solid #cce5ff;
    font-weight: 500;
    position: sticky;
    left: 0;
    z-index: 10;
}

/* 移动端显示滚动提示 */
@media screen and (max-width: 768px) {
    .scroll-hint {
        display: block;
    }
}

/* 滚动提示动画 */
@keyframes slideHint {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

.scroll-hint.animated {
    animation: slideHint 2s ease-in-out infinite;
}

/* ==================== 表格基础样式 ==================== */
.table-wrapper table,
table.responsive-table {
    width: auto !important; /* 允许表格超出容器宽度 */
    min-width: 100%; /* 最小宽度100% */
    border-collapse: collapse;
    background-color: #fff;
    table-layout: auto !important; /* 自动布局，不压缩内容 */
    margin: 0;
}

/* ==================== 单元格样式 ==================== */
.table-wrapper td,
.table-wrapper th,
table.responsive-table td,
table.responsive-table th {
    padding: 12px 15px;
    border: 1px solid #ddd;
    white-space: nowrap; /* 默认不换行 */
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
    min-width: 80px; /* 单元格最小宽度 */
}

/* 允许换行的单元格（添加 class="allow-wrap" 到td） */
.table-wrapper td.allow-wrap,
.table-wrapper th.allow-wrap,
table.responsive-table td.allow-wrap,
table.responsive-table th.allow-wrap {
    white-space: normal;
    word-wrap: break-word;
    word-break: keep-all; /* 韩文/中文优化 */
    min-width: 150px;
    max-width: 400px;
}

/* ==================== 移动端优化 ==================== */
@media screen and (max-width: 768px) {
    .table-wrapper td,
    .table-wrapper th,
    table.responsive-table td,
    table.responsive-table th {
        padding: 10px 12px;
        font-size: 13px;
        min-width: 100px; /* 移动端增加最小宽度 */
    }
    
    /* 移动端表格容器增加padding，方便滑动 */
    .table-wrapper {
        margin: 15px 0;
        border-radius: 6px;
    }
}

/* 小屏幕设备（手机竖屏） */
@media screen and (max-width: 480px) {
    .table-wrapper td,
    .table-wrapper th,
    table.responsive-table td,
    table.responsive-table th {
        padding: 8px 10px;
        font-size: 12px;
        min-width: 90px;
    }
}

/* ==================== 表头样式 ==================== */
.table-wrapper th,
table.responsive-table th {
    background-color: #f5f5f5;
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 5;
}

/* ==================== 表格行样式 ==================== */
.table-wrapper tr:nth-child(even),
table.responsive-table tr:nth-child(even) {
    background-color: #fafafa;
}

.table-wrapper tr:hover,
table.responsive-table tr:hover {
    background-color: #f0f7ff;
    transition: background-color 0.2s ease;
}

/* ==================== 表格类型变体 ==================== */

/* 紧凑型表格 */
.table-wrapper.compact td,
.table-wrapper.compact th {
    padding: 6px 10px;
    font-size: 12px;
}

/* 宽松型表格 */
.table-wrapper.spacious td,
.table-wrapper.spacious th {
    padding: 15px 20px;
    font-size: 15px;
}

/* 斑马纹表格 */
.table-wrapper.striped tr:nth-child(odd) {
    background-color: #fff;
}

.table-wrapper.striped tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 边框表格 */
.table-wrapper.bordered {
    border: 2px solid #ddd;
}

.table-wrapper.bordered td,
.table-wrapper.bordered th {
    border: 1px solid #ddd;
}

/* 无边框表格 */
.table-wrapper.borderless td,
.table-wrapper.borderless th {
    border: none;
    border-bottom: 1px solid #eee;
}

/* ==================== 特殊单元格样式 ==================== */

/* 数字对齐 */
.table-wrapper td.number,
.table-wrapper th.number,
table.responsive-table td.number,
table.responsive-table th.number {
    text-align: right;
    font-family: 'Courier New', monospace;
}

/* 居中对齐 */
.table-wrapper td.center,
.table-wrapper th.center,
table.responsive-table td.center,
table.responsive-table th.center {
    text-align: center;
}

/* 强调单元格 */
.table-wrapper td.highlight,
.table-wrapper th.highlight {
    background-color: #fff3cd;
    font-weight: 600;
}

/* 成功状态 */
.table-wrapper td.success {
    color: #155724;
    background-color: #d4edda;
}

/* 警告状态 */
.table-wrapper td.warning {
    color: #856404;
    background-color: #fff3cd;
}

/* 错误状态 */
.table-wrapper td.error {
    color: #721c24;
    background-color: #f8d7da;
}

/* ==================== 加载状态 ==================== */
.table-wrapper.loading {
    position: relative;
    min-height: 200px;
}

.table-wrapper.loading::after {
    content: '로딩 중...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==================== 响应式表格容器统一宽度 ==================== */
.tables-container .table-wrapper {
    width: 100%; /* 确保所有table-wrapper宽度一致 */
    margin-left: 0;
    margin-right: 0;
}

/* ==================== 打印样式 ==================== */
@media print {
    .table-wrapper {
        overflow: visible;
        border: none;
        box-shadow: none;
    }
    
    .scroll-hint {
        display: none;
    }
    
    .table-wrapper td,
    .table-wrapper th {
        white-space: normal;
        font-size: 10pt;
        padding: 6px;
    }
}

/* ==================== 无障碍支持 ==================== */
.table-wrapper:focus-within {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

/* 键盘导航支持 */
.table-wrapper table:focus {
    outline: none;
}