/* ============================================================
   1. 强制后台管理系统表格中的单元格和表头不换行，开启横向滚动体验
   ============================================================ */
table tbody tr td,
table tbody tr th,
table thead tr th {
    white-space: nowrap !important;
}

/* ============================================================
   2. 全站后台列表：表格容器自适应视口高度，开启纵向+横向独立滚动（方案 2）
   ============================================================ */
.change-list #changelist-form .overflow-x-auto {
    /* 大幅释放容器高度，自适应屏幕 80% 以上视口空间，显示更多数据行 */
    max-height: calc(100vh - 130px);
    overflow-y: auto !important;
    overflow-x: auto !important;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

/* ============================================================
   3. 全站后台列表：表头冻结吸顶（Sticky Table Header）
   ============================================================ */
.change-list #result_list thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background-color: #ffffff !important;
    /* 利用内阴影实现贴合的下底边框分割线，不随滚动脱节 */
    box-shadow: inset 0 -1px 0 rgba(229, 231, 235, 1) !important;
}

/* 深色模式（Dark Mode）适配 */
html.dark .change-list #result_list thead th,
.dark .change-list #result_list thead th {
    background-color: #111827 !important;
    box-shadow: inset 0 -1px 0 rgba(55, 65, 81, 1) !important;
}

/* ============================================================
   4. 表格容器细滚动条美化（兼容 WebKit 与 Firefox）
   ============================================================ */
.change-list #changelist-form .overflow-x-auto::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.change-list #changelist-form .overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.4);
    border-radius: 9999px;
}
.change-list #changelist-form .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.7);
}
.change-list #changelist-form .overflow-x-auto::-webkit-scrollbar-track {
    background-color: transparent;
}
html.dark .change-list #changelist-form .overflow-x-auto::-webkit-scrollbar-thumb,
.dark .change-list #changelist-form .overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.5);
}

/* ============================================================
   5. 手机/移动端 & 全局：底部分页栏常驻吸附与深浅色模式适配
   ============================================================ */
.unfold-sticky-pagination {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;

    /* 浅色模式背景、边框与文字 */
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-top: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* 浅色模式下的页码链接与文字 */
.unfold-sticky-pagination a {
    color: #4b5563 !important;
    transition: color 0.15s ease;
}
.unfold-sticky-pagination a:hover {
    color: #111827 !important;
}
.unfold-sticky-pagination .showall {
    color: var(--color-primary-600, #4f46e5) !important;
}

/* ============================================================
   6. 深色模式（Dark Mode）专属深度适配
   ============================================================ */
html.dark .unfold-sticky-pagination,
.dark .unfold-sticky-pagination {
    /* 深色模式背景：与系统背景一致（#111827 / gray-900），微透毛玻璃 */
    background-color: rgba(17, 24, 39, 0.94) !important;
    border-top: 1px solid #374151 !important;
    color: #9ca3af !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45) !important;
}

/* 深色模式下的未选中页码链接 */
html.dark .unfold-sticky-pagination a,
.dark .unfold-sticky-pagination a {
    color: #9ca3af !important;
}
html.dark .unfold-sticky-pagination a:hover,
.dark .unfold-sticky-pagination a:hover {
    color: #f3f4f6 !important;
}

/* 深色模式下的当前激活页码 */
html.dark .unfold-sticky-pagination span[class*="text-primary"],
.dark .unfold-sticky-pagination span[class*="text-primary"] {
    color: #818cf8 !important;
    font-weight: 600 !important;
}

/* 深色模式下的“显示全部”与其它按钮文字 */
html.dark .unfold-sticky-pagination .showall,
.dark .unfold-sticky-pagination .showall {
    color: #818cf8 !important;
}
html.dark .unfold-sticky-pagination div,
.dark .unfold-sticky-pagination div {
    color: inherit;
}

/* 移动端触摸滚动与弹性布局优化 */
@media (max-width: 1023px) {
    .unfold-sticky-pagination {
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        min-height: 48px !important;
        padding-top: 0.5rem !important;
        scrollbar-width: none; /* Firefox */
        -webkit-overflow-scrolling: touch;
    }
    .unfold-sticky-pagination::-webkit-scrollbar {
        display: none; /* WebKit */
    }
    .unfold-sticky-pagination > div {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }
}