/* ==========================================================================
   Sub2API 后台自定义样式（RC sb2.apeclue.cc）
   部署位置：RC /opt/sub2api/custom/sb2-custom.css
   注入方式：nginx sub_filter（见 sites-enabled/sb2.apeclue.cc）
   作用：后台表格页（账号/密钥/用户等）保留表格内部滚动条的前提下，
         1) 压缩页面四周固定区域（标题/筛选/分页/边距），把高度还给表格
         2) 压紧表头和行高，一屏能看到更多行
   调整：直接改本文件数值保存即可（浏览器 Ctrl+F5 强制刷新一次生效）。
   想一屏看更多账号：表格右上角「更多操作 → 列」里藏掉不用的列，
   行会明显变矮（选择会记住在浏览器里）。
   ========================================================================== */

/* ---------- 布局：四周压缩，表格区变长 ---------- */

/* 三段（操作/筛选、表格、分页）间距 1.5rem → 0.5rem，整体高度重新计算 */
.table-page-layout {
    height: calc(100vh - 64px - 1.5rem) !important;
    gap: .5rem !important;
}

/* 主内容区上下留白 2rem → 0.75rem（与上面的 calc 配套） */
main {
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}

/* 标题/筛选/按钮区紧凑 */
.layout-section-fixed h1 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
}
.layout-section-fixed .btn {
    padding: .3rem .6rem !important;
    font-size: 12px !important;
}
.layout-section-fixed .select-trigger {
    min-height: 0 !important;
    padding: .25rem .5rem !important;
    font-size: 12px !important;
}
.layout-section-fixed input {
    padding: .25rem .5rem !important;
    font-size: 12px !important;
}

/* ---------- 表格：行高压紧 ---------- */

.table-scroll-container th {
    padding: .45rem .6rem !important;
    font-size: 11px !important;
}
.table-scroll-container td {
    padding: .4rem .6rem !important;
    font-size: 12px !important;
}
.table-wrapper td > div {
    gap: 2px !important;
}

/* 操作列按钮横排（原来是竖排，白白撑高每一行） */
.table-wrapper tbody td:last-child > div {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 2px !important;
}

/* ---------- 进一步压缩（2026-07-28 第二轮） ---------- */

/* 顶栏 64px → 48px，表格区高度同步 +16px */
header {
    height: 3rem !important;
    min-height: 3rem !important;
}
.table-page-layout {
    height: calc(100vh - 48px - 1rem) !important;
    gap: .4rem !important;
}
main {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

/* 行内容行距压紧 */
.table-wrapper td,
.table-wrapper td * {
    line-height: 1.25 !important;
}

/* 平台/类型徽标竖排改横排环绕（占行高大户） */
.table-wrapper td > .flex.min-w-0.flex-col {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
}

/* 筛选区/分页区再压 */
.layout-section-fixed .select-trigger {
    font-size: 11px !important;
    padding: .2rem .4rem !important;
}
.layout-section-fixed .btn {
    font-size: 11px !important;
}
.layout-section-fixed:last-child {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

/* ---------- 窄窗口（768~1024px）也保持表格内部滚动 ----------
   前端在 <1024px 会自动切 mobile-mode，把表格改成整页滚动，
   整页一滚吸顶表头就缩到顶栏后面丢失。这里按回内部滚动。
   <768px 是卡片布局，没有表头问题，保持原样不动。 */
@media (min-width: 768px) {
    .table-page-layout.mobile-mode .layout-section-scrollable {
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }
    .table-page-layout.mobile-mode .table-scroll-container {
        height: 100% !important;
        overflow: hidden !important;
        border: 1px solid rgb(229 231 235) !important;
        border-radius: 1rem !important;
        background-color: #fff !important;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05) !important;
    }
    .dark .table-page-layout.mobile-mode .table-scroll-container {
        border-color: rgb(51 65 85) !important;
        background-color: rgb(30 41 59) !important;
    }
}