/* ==========================================================================
   燕山大学安全工作处 - 组织机构与职能分工表专用样式 (functions-table.css)
   【独立文件 · 仅本页生效 · 移动端4列完全自适应显示 + 表头纯白】
   ========================================================================== */

/* ── 1. 外层容器自适应 ── */
.boda-page-content,
.boda-article-detail,
.boda-article-detail .v_news_content,
.boda-article-detail [id^="vsb_content"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── 2. 表格全局基础样式 ── */
.boda-page-content table,
.boda-article-detail table,
.v_news_content table,
[id^="vsb_content"] table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
    box-sizing: border-box !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(10, 27, 92, 0.04) !important;
}

/* 清除富文本自带的固定高度与背景 */
.boda-page-content table,
.boda-page-content table tr,
.boda-page-content table th,
.boda-page-content table td,
.boda-article-detail table,
.boda-article-detail table tr,
.boda-article-detail table th,
.boda-article-detail table td {
    background-image: none !important;
    height: auto !important;
}

/* 单元格通用基础样式：保证始终为 table-cell，高度更舒展大气，内容垂直居中 */
.boda-page-content table td,
.boda-page-content table th,
.boda-article-detail table td,
.boda-article-detail table th {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 18px 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
}

/* 彻底清除单元格内部段落的 margin-bottom，实现完美的垂直居中，杜绝文字上浮偏顶 */
.boda-page-content table td p,
.boda-page-content table th p,
.boda-article-detail table td p,
.boda-article-detail table th p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.65 !important;
}

/* 确保表格内所有子元素自然换行，避免产生文字溢出叠字 */
.boda-page-content table td,
.boda-page-content table td *,
.boda-article-detail table td,
.boda-article-detail table td * {
    white-space: normal !important;
    word-break: break-all !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   【核心修复 1】表头第一行（全列1、2、3、4）：绝对纯白 + 燕大深蓝渐变底色
   彻底保证第1列至第4列表头颜色纯白，字重加粗，居中排版
   ========================================================================== */
.boda-page-content table thead th,
.boda-page-content table thead td,
.boda-page-content table tr.firstRow th,
.boda-page-content table tr.firstRow td,
.boda-article-detail table thead th,
.boda-article-detail table thead td,
.boda-article-detail table tr.firstRow th,
.boda-article-detail table tr.firstRow td {
    background: linear-gradient(135deg, #0a1b5c 0%, #1f296a 100%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    text-align: center !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    padding: 16px 14px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* 表头内的 p, span, font, strong 等所有内嵌子标签全部强制纯白居中 */
.boda-page-content table thead th *,
.boda-page-content table thead td *,
.boda-page-content table tr.firstRow th *,
.boda-page-content table tr.firstRow td *,
.boda-article-detail table thead th *,
.boda-article-detail table thead td *,
.boda-article-detail table tr.firstRow th *,
.boda-article-detail table tr.firstRow td * {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* ==========================================================================
   【核心修复 2】数据行各列样式（严格限定在 :not(.firstRow) 中，绝不污染表头）
   ========================================================================== */
.boda-page-content table tbody tr:not(.firstRow) td,
.boda-article-detail table tbody tr:not(.firstRow) td {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #334155 !important;
    vertical-align: middle !important;
    padding: 18px 20px !important;
}

.boda-page-content table tbody tr:not(.firstRow) td *,
.boda-article-detail table tbody tr:not(.firstRow) td * {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

/* 第一列（机构设置/科室名称）：数据行加粗深黑灰，水平居中 + 垂直居中，表头除外 */
.boda-page-content table tbody tr:not(.firstRow) td:first-child,
.boda-page-content table tbody tr:not(.firstRow) td:first-child *,
.boda-article-detail table tbody tr:not(.firstRow) td:first-child,
.boda-article-detail table tbody tr:not(.firstRow) td:first-child * {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* 第二列（职责）：垂直居中 + 自然段落排版 + 适度内边距 */
.boda-page-content table tbody tr:not(.firstRow) td:nth-child(2),
.boda-article-detail table tbody tr:not(.firstRow) td:nth-child(2) {
    text-align: justify !important;
    vertical-align: middle !important;
    line-height: 1.7 !important;
    padding: 18px 22px !important;
}

/* 第三列（办公地点）：垂直居中 + 水平居中 */
.boda-page-content table tbody tr:not(.firstRow) td:nth-child(3),
.boda-page-content table tbody tr:not(.firstRow) td:nth-child(3) *,
.boda-article-detail table tbody tr:not(.firstRow) td:nth-child(3),
.boda-article-detail table tbody tr:not(.firstRow) td:nth-child(3) * {
    text-align: center !important;
    vertical-align: middle !important;
}

/* 第四列（联系电话）：垂直居中 + 水平居中 + 燕大蓝高亮，表头除外 */
.boda-page-content table tbody tr:not(.firstRow) td:nth-child(4),
.boda-page-content table tbody tr:not(.firstRow) td:nth-child(4) *,
.boda-article-detail table tbody tr:not(.firstRow) td:nth-child(4),
.boda-article-detail table tbody tr:not(.firstRow) td:nth-child(4) * {
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 600 !important;
    color: #1f296a !important;
}

/* 电话链接 */
.boda-page-content table td a,
.boda-article-detail table td a {
    color: #1f296a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.boda-page-content table td a:hover,
.boda-article-detail table td a:hover {
    color: #e8a020 !important;
    text-decoration: underline !important;
}

/* 斑马纹交替变色 */
.boda-page-content table tbody tr:not(.firstRow):nth-child(odd) td,
.boda-article-detail table tbody tr:not(.firstRow):nth-child(odd) td {
    background-color: #f8fafc !important;
}

.boda-page-content table tbody tr:not(.firstRow):nth-child(even) td,
.boda-article-detail table tbody tr:not(.firstRow):nth-child(even) td {
    background-color: #ffffff !important;
}

.boda-page-content table tbody tr:not(.firstRow):hover td,
.boda-article-detail table tbody tr:not(.firstRow):hover td {
    background-color: #eef4ff !important;
}

/* ==========================================================================
   【核心修复 3】移动端适配（<= 768px）：4列在一屏内全部完整展示，杜绝溢出
   ========================================================================== */
@media (max-width: 768px) {
    /* 表格自适应容器 */
    .table-responsive-wrapper,
    .boda-page-content,
    .boda-article-detail {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 关键：采用 table-layout: fixed + 100% 宽度，直接将 4 列在一屏内完整呈现！
       彻底消除“只能显示两列、后面两列溢出不见”的问题 */
    .boda-page-content table,
    .boda-article-detail table,
    .v_news_content table,
    [id^="vsb_content"] table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important; /* 严格按指定百分比自适应充满当前屏幕 */
        margin: 10px 0 !important;
        border-radius: 6px !important;
    }

    /* 4列适配比例：机构 23% | 职责 37% | 地点 18% | 电话 22% */
    .boda-page-content table tr td:nth-child(1),
    .boda-page-content table tr th:nth-child(1),
    .boda-article-detail table tr td:nth-child(1),
    .boda-article-detail table tr th:nth-child(1) {
        width: 23% !important;
        padding: 8px 3px !important;
        font-size: 0.76rem !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tbody tr:not(.firstRow) td:nth-child(1) *,
    .boda-article-detail table tbody tr:not(.firstRow) td:nth-child(1) * {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tr td:nth-child(2),
    .boda-page-content table tr th:nth-child(2),
    .boda-article-detail table tr td:nth-child(2),
    .boda-article-detail table tr th:nth-child(2) {
        width: 37% !important;
        padding: 8px 4px !important;
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
        text-align: justify !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tbody tr:not(.firstRow) td:nth-child(2) *,
    .boda-article-detail table tbody tr:not(.firstRow) td:nth-child(2) * {
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tr td:nth-child(3),
    .boda-page-content table tr th:nth-child(3),
    .boda-article-detail table tr td:nth-child(3),
    .boda-article-detail table tr th:nth-child(3) {
        width: 18% !important;
        padding: 8px 2px !important;
        font-size: 0.72rem !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tbody tr:not(.firstRow) td:nth-child(3) *,
    .boda-article-detail table tbody tr:not(.firstRow) td:nth-child(3) * {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tr td:nth-child(4),
    .boda-page-content table tr th:nth-child(4),
    .boda-article-detail table tr td:nth-child(4),
    .boda-article-detail table tr th:nth-child(4) {
        width: 22% !important;
        padding: 8px 2px !important;
        font-size: 0.72rem !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    .boda-page-content table tbody tr:not(.firstRow) td:nth-child(4) *,
    .boda-article-detail table tbody tr:not(.firstRow) td:nth-child(4) * {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    /* 移动端表头字体适配：确保纯白，并保证在一行 */
    .boda-page-content table thead th,
    .boda-page-content table thead td,
    .boda-page-content table tr.firstRow td,
    .boda-page-content table tr.firstRow th,
    .boda-article-detail table thead th,
    .boda-article-detail table thead td,
    .boda-article-detail table tr.firstRow td,
    .boda-article-detail table tr.firstRow th {
        padding: 10px 2px !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }

    .boda-page-content table tr.firstRow td *,
    .boda-page-content table tr.firstRow th *,
    .boda-article-detail table tr.firstRow td *,
    .boda-article-detail table tr.firstRow th * {
        font-size: 0.78rem !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }
}