/* ============================================
   移动端表格滚动修复 - 2026年1月优化版
   带美化滚动条
   ============================================ */

/* ===== 1. 页面主容器防止横向滚动 ===== */
@media (max-width: 768px) {
    body,
    html,
    #page,
    #content,
    .site,
    .ast-container {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* 文章内容区域也要限制 */
    .entry-content,
    .post-content,
    article,
    .ast-article-single,
    .ast-article-post {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* ===== 2. 表格滚动容器 ===== */
@media (max-width: 768px) {
    .table-scroll-wrapper,
    figure.wp-block-table {
        overflow-x: scroll !important; /* 强制显示滚动条 */
        -webkit-overflow-scrolling: touch !important;
        margin: 15px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
}

/* ===== 2.5 滚动条美化样式 ===== */
@media (max-width: 768px) {
    /* Webkit浏览器（Chrome、Safari、Edge） */
    .table-scroll-wrapper::-webkit-scrollbar,
    figure.wp-block-table::-webkit-scrollbar {
        height: 8px !important; /* 滚动条高度 */
        background: transparent !important;
    }
    
    .table-scroll-wrapper::-webkit-scrollbar-track,
    figure.wp-block-table::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05) !important; /* 轨道颜色 */
        border-radius: 10px !important;
        margin: 0 10px !important; /* 两端留空 */
    }
    
    .table-scroll-wrapper::-webkit-scrollbar-thumb,
    figure.wp-block-table::-webkit-scrollbar-thumb {
        background: rgba(124, 140, 197, 0.6) !important; /* 滑块颜色 - 主题紫蓝色 */
        border-radius: 10px !important;
        transition: background 0.2s !important;
    }
    
    .table-scroll-wrapper::-webkit-scrollbar-thumb:hover,
    figure.wp-block-table::-webkit-scrollbar-thumb:hover {
        background: rgba(124, 140, 197, 0.9) !important; /* hover时更明显 */
    }
    
    /* Firefox浏览器 */
    .table-scroll-wrapper,
    figure.wp-block-table {
        scrollbar-width: thin !important; /* auto | thin | none */
        scrollbar-color: rgba(124, 140, 197, 0.6) rgba(0, 0, 0, 0.05) !important; /* 滑块色 轨道色 */
    }
}

/* ===== 3. 表格本体样式 ===== */
@media (max-width: 768px) {
    /* 所有表格统一处理 */
    .entry-content table,
    .post-content table,
    article table,
    .table-scroll-wrapper table,
    figure.wp-block-table table {
        display: table !important;
        width: auto !important; /* 让内容决定宽度 */
        min-width: 100% !important;
        max-width: none !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        margin: 0 !important;
    }
    
    /* 单元格样式 */
    .entry-content table th,
    .entry-content table td {
        padding: 10px 12px !important;
        white-space: nowrap !important; /* 防止内容换行导致表格变形 */
        box-sizing: border-box !important;
    }
    
    /* 第一列可以适当宽一点 */
    .entry-content table td:first-child,
    .entry-content table th:first-child {
        min-width: 80px !important;
    }
}

/* ===== 4. 特殊表格类型 ===== */
@media (max-width: 768px) {
    /* 2列详情表格 - 可以拉满不滚动 */
    table.detail-table,
    .ribo-profit-table,
    table[class*="info-table"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    table.detail-table td,
    .ribo-profit-table td {
        white-space: normal !important; /* 这类表格允许换行 */
    }
    
    /* 多列数据表格 - 必须滚动 */
    .poi-earnings-table,
    .poi-price-table,
    table.kabu-table,
    table[class*="comparison"] {
        width: auto !important;
        min-width: 600px !important; /* 强制最小宽度触发滚动 */
    }
}

/* ===== 5. Astra主题容器修复 ===== */
@media (max-width: 768px) {
    .ast-container,
    .ast-separate-container .ast-container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow-x: hidden !important;
    }
    
    .ast-separate-container .ast-article-single,
    .ast-separate-container .ast-article-post {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow-x: hidden !important;
    }
    
    .ast-separate-container .entry-content,
    .ast-separate-container .post-content {
        padding: 0 15px !important;
        overflow-x: hidden !important;
    }
    
    /* 背景色统一 */
    body.ast-separate-container {
        background: #fff !important;
    }
    
    /* 文章列表分隔线 */
    .ast-separate-container .ast-article-post {
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        padding-bottom: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .ast-separate-container .ast-article-post:last-child {
        border-bottom: none !important;
    }
}

/* ===== 6. 内容框样式 ===== */
@media (max-width: 768px) {
    .entry-content .guide-section,
    .entry-content section,
    .entry-content .box,
    .entry-content .referral-box,
    .entry-content .highlight-box,
    .entry-content .success-box,
    .entry-content .danger-box,
    .entry-content .info-box,
    .entry-content .purple-box,
    .entry-content .calculation-table {
        margin-left: -15px !important;
        margin-right: -15px !important;
        border-radius: 0 !important;
        max-width: calc(100% + 30px) !important;
    }
}

/* ===== 7. ポイ活/株主優待表格 ===== */
@media screen and (max-width: 1024px) {
    .poi-earnings-table,
    .poi-price-table,
    table.kabu-table {
        display: table !important;
        width: max-content !important;
        min-width: 100% !important;
    }
    
    .kabu-article,
    .kabu-card,
    .kabu-example {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}