/**
 * browse.css — 列表页样式
 * CSS 变量继承自 layout.css
 */

/* 页面容器 */
.browse-wrapper {
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    padding: 0;
}

/* 顶部操作栏 */
.browse-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.browse-header h3 {
    margin: 0;
    font-size: var(--fs-h3, 20px);
    font-weight: 600;
    color: var(--text-primary, #000);
}

.browse-actions {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

/* 表格容器 - overflow-y: auto 配合 thead sticky */
.gridview-container {
    background: var(--bg-primary, #fff);
    border-radius: 6px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    margin-top: 20px;
    position: relative;
    scrollbar-width: thin;
}
.gridview-container::-webkit-scrollbar { display: block; width: 8px; height: 8px; }

/* 表格样式 */
.grid-view {
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

.grid-view table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

/* 表头基础样式 */
.grid-view th {
    background: var(--bg-secondary, #F7F7F7) !important;
    font-weight: normal;
    color: var(--text-secondary, #555) !important;
    border: none !important;
    padding: 12px 14px !important;
    font-size: 14px;
    min-width: 80px;
    max-width: 300px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

/* 固定列 - 由模板 JS 动态应用 .frozen-col 类 */
.grid-view .frozen-col {
    position: sticky;
    z-index: 2;
    background: #eef2f5 !important;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

/* 固定列表头 - 更高 z-index */
.grid-view thead .frozen-col {
    z-index: 6;
    background: #eef2f5 !important;
}

/* 表头固定在顶部 */
.grid-view thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-secondary, #F7F7F7) !important;
}

/* 固定列表头 - 最高优先级（同时固定列+固定行） */
.grid-view thead th.frozen-col {
    z-index: 6;
}

/* 表格内容行 - 斑马纹 */
.grid-view tbody tr:nth-child(even) td {
    background: #fafafa;
}
.grid-view tbody tr:nth-child(odd) td {
    background: var(--bg-primary, #fff);
}

/* 鼠标悬停整行高亮（淡黄色，统一颜色） */
.grid-view tbody tr:hover td {
    background: var(--row-hover-bg, #f0f7ff) !important;
}

/* 固定列 hover 同色 */
.grid-view tbody tr:hover td:nth-child(1),
.grid-view tbody tr:hover td:nth-child(2) {
    background: var(--row-hover-bg, #f0f7ff) !important;
}

.grid-view td {
    vertical-align: middle !important;
    color: var(--text-primary, #1a1a1a);
    border: none !important;
    padding: 10px 14px !important;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.6;
    font-size: 14px;
}

/* 固定列斑马纹 - 确保不透明 */
.grid-view tbody tr:nth-child(even) .frozen-col {
    background: #f0f3f5 !important;
}
.grid-view tbody tr:nth-child(odd) .frozen-col {
    background: #eef2f5 !important;
}

/* 固定列 hover 同色 */
.grid-view tbody tr:hover .frozen-col {
    background: var(--row-hover-bg, #f0f7ff) !important;
}

.grid-view tbody tr:hover {
    background: var(--row-hover-bg, #f0f7ff) !important;
}

/* 等宽字体列（代码、ID等） */
.grid-view .monospace-column {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);}

/* 配置徽章 */
.config-badges .label {
    margin-right: 3px;
    font-size: var(--fs-xs, 13px);
}

/* 过滤器行 */
.grid-view thead tr:first-child th {
    background: var(--bg-secondary, #F7F7F7) !important;
    padding: 8px 14px !important;
    border: none !important;
}

.grid-view thead tr:nth-child(2) th {
    background: var(--bg-secondary, #F7F7F7) !important;
    padding: 12px 14px !important;
    border-top: none !important;
}

/* 列过滤输入框 */
.grid-view .filters input,
.grid-view .filters select {
    width: 100%;
    padding: 6px 10px;
    font-size: var(--fs-sm, 14px);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    box-sizing: border-box;
}

.grid-view .filters input:focus,
.grid-view .filters select:focus {
    border-color: var(--btn-primary-bg, #1a1a1a);
    outline: none;
    box-shadow: 0 0 0 2px var(--focus-ring, rgba(26,26,26,.20));
}

.grid-view .filters select {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 操作列链接 */
.grid-view .action-column a {
    color: var(--link-color, #0070D6);
    text-decoration: none;
    padding: 0 8px;
    font-size: var(--fs-sm, 14px);    border-right: 1px solid var(--border-color, #e0e0e0);
}

.grid-view .action-column a:last-child { border-right: none; }
.grid-view .action-column a:hover {
    color: var(--link-hover, #004fa3);
    text-decoration: underline;
}

/* 更多下拉菜单 */
.grid-view .browse-list-more {
    display: inline-block;
    margin-left: 8px;
    position: relative;
}

.grid-view .browse-list-more .btn {
    padding: 4px 10px;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);    border-radius: 4px;
    transition: all .2s;
}

.grid-view .browse-list-more .btn:hover {
    color: var(--btn-primary-bg, #1a1a1a);
    border-color: var(--btn-primary-bg, #1a1a1a);
    background: rgba(26, 26, 26, 0.05);
}

.grid-view .browse-list-more .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 120px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding: 6px 0;
    margin-top: 4px;
    z-index: 1000;
}

.grid-view .browse-list-more.open .dropdown-menu { display: block; }

.grid-view .browse-list-more .dropdown-menu li {
    list-style: none;
}

.grid-view .browse-list-more .dropdown-menu li a {
    display: block;
    padding: 8px 16px;
    color: var(--text-primary, #000);
    font-size: var(--fs-sm, 14px);    text-decoration: none;
    transition: background .2s;
}

.grid-view .browse-list-more .dropdown-menu li a:hover {
    background: var(--bg-secondary, #F7F7F7);
    color: var(--btn-primary-bg, #1a1a1a);
}

/* 分页信息 */
.gridview-container .clearfix {
    margin-top: 10px;
    padding: 10px 0;
}

.gridview-container .float-end {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gridview-container .summary {
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);}

/* 筛选和分组按钮 */
.browse-filter-btn,
.browse-group-btn,
.btn-filter,
.btn-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);    cursor: pointer;
    transition: all .2s;
}

.browse-filter-btn:hover,
.browse-group-btn:hover,
.btn-filter:hover,
.btn-group-toggle:hover {
    color: var(--btn-primary-bg, #1a1a1a);
    border-color: var(--btn-primary-bg, #1a1a1a);
    background: rgba(26, 26, 26, 0.05);
}

.browse-filter-btn.active,
.browse-group-btn.active,
.btn-filter.active,
.btn-group-toggle.active {
    color: #fff;
    background: var(--btn-primary-bg, #1a1a1a);
    border-color: var(--btn-primary-bg, #1a1a1a);
}

.browse-filter-btn::before {
    content: "\f0b0";
    font-family: FontAwesome;
}

.browse-group-btn::before,
.btn-group-toggle::before {
    content: "\f03a";
    font-family: FontAwesome;
}

/* 分页器 */
.gridview-container .pagination {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pager-jump {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
}

.pager-jump-label {
    color: var(--text-secondary, #666);
    font-size: var(--fs-sm, 14px);}

.pager-jump-input {
    width: 50px;
    padding: 4px 8px;
    font-size: var(--fs-sm, 14px);    border: none;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    border-radius: 0;
    text-align: center;
    background: transparent;
    transition: all 0.2s;
    outline: none;
}

.pager-jump-input:focus { border-bottom-color: var(--btn-primary-bg, #1a1a1a); }
.pager-jump-input:hover { border-bottom-color: var(--btn-primary-bg, #1a1a1a); }

.gridview-container .pagination > li > a,
.gridview-container .pagination > li > span {
    padding: 5px 12px;
    font-size: var(--fs-sm, 14px);    border: 1px solid var(--border-color, #e0e0e0);
    color: var(--text-secondary, #666);
    margin: 0 2px;
    border-radius: 4px;
    transition: all 0.2s;
}

.gridview-container .pagination > li > a:hover {
    background-color: var(--bg-secondary, #F7F7F7);
    border-color: var(--btn-primary-bg, #1a1a1a);
    color: var(--btn-primary-bg, #1a1a1a);
}

.gridview-container .pagination > .active > a,
.gridview-container .pagination > .active > span {
    background-color: var(--btn-primary-bg, #1a1a1a);
    border-color: var(--btn-primary-bg, #1a1a1a);
    color: #fff;
}

.gridview-container .pagination > .disabled > a,
.gridview-container .pagination > .disabled > span {
    color: #ccc;
    cursor: not-allowed;
    background-color: var(--bg-secondary, #F7F7F7);
}

.gridview-container .pagination > .disabled > a:hover {
    background-color: var(--bg-secondary, #F7F7F7);
    border-color: var(--border-color, #e0e0e0);
}

/* Footer 样式 */
.browse-footer {
    border-top: 1px solid var(--border-color, #e0e0e0);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    background: var(--bg-primary, #fff);
}

/* 表格工具栏（继承 .ombox-actions-card） */
.rl-table-toolbar {
    justify-content: space-between;
}

.rl-toolbar-left,
.rl-toolbar-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rl-search-form {
    display: flex;
    gap: 0;
}

.rl-search-input {
    border-radius: 4px 0 0 4px;
    min-width: 400px;
}

.rl-search-btn {
    border-radius: 0 4px 4px 0;
    margin-left: -1px;
}

/* 表格样式 */
.browse-data-table {
    background: var(--bg-primary, #fff);
}

/* 日夜模式额外覆盖 */
body.dark-mode .grid-view th,
body.dark-mode .browse-data-table thead th { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; }

body.dark-mode .grid-view td,
body.dark-mode .browse-data-table tbody td { background: var(--bg-primary); color: var(--text-primary); }

body.dark-mode .grid-view table,
body.dark-mode .grid-view tbody tr,
body.dark-mode .browse-data-table,
body.dark-mode .browse-data-table tbody tr { background: var(--bg-primary); }

body.dark-mode .grid-view tbody tr:hover,
body.dark-mode .grid-view tbody tr:hover td,
body.dark-mode .browse-data-table tbody tr:hover td { background: var(--row-hover-bg) !important; }

body.dark-mode .grid-view tbody tr:hover td:nth-child(1),
body.dark-mode .grid-view tbody tr:hover td:nth-child(2) { background: var(--row-hover-bg) !important; }

body.dark-mode .grid-view .frozen-col { background: #2a2d30 !important; }
body.dark-mode .grid-view tbody tr:hover .frozen-col { background: var(--row-hover-bg) !important; }

body.dark-mode .grid-view tbody tr:nth-child(even) td,
body.dark-mode .browse-data-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.03); }
body.dark-mode .grid-view tbody tr:nth-child(odd) td,
body.dark-mode .browse-data-table tbody tr:nth-child(odd) { background: var(--bg-primary); }
body.dark-mode .grid-view tbody tr:nth-child(even) .frozen-col { background: #2d3033 !important; }
body.dark-mode .grid-view tbody tr:nth-child(odd) .frozen-col { background: #2a2d30 !important; }
body.dark-mode .grid-view thead .frozen-col { background: var(--bg-secondary) !important; }

body.dark-mode .browse-data-table thead th:first-child { background-color: var(--bg-secondary) !important; }
body.dark-mode .browse-data-table tbody tr:nth-child(even) td:first-child { background-color: #2d3033 !important; }
body.dark-mode .browse-data-table tbody tr:nth-child(odd) td:first-child { background-color: #2a2d30 !important; }
body.dark-mode .browse-data-table tbody tr:hover td:first-child { background-color: var(--row-hover-bg) !important; }

body.dark-mode .grid-view table,
body.dark-mode .browse-data-table,
body.dark-mode .browse-data-table td,
body.dark-mode .browse-data-table th { border-color: var(--border-color) !important; }

body.dark-mode .browse-header,
body.dark-mode .rl-table-toolbar { background: var(--bg-primary); border-bottom-color: var(--border-color); }

body.dark-mode .browse-footer { background: var(--bg-primary); color: var(--text-secondary); border-top-color: var(--border-color); }

body.dark-mode .gridview-container .clearfix { background: var(--bg-primary); color: var(--text-secondary); }

body.dark-mode .browse-footer a { color: var(--text-secondary); }
body.dark-mode .grid-view a { color: var(--accent-primary) !important; }
body.dark-mode .not-set { color: #666 !important; }

body.dark-mode .gridview-container .pagination > .disabled > a,
body.dark-mode .gridview-container .pagination > .disabled > span { color: #555; }

body.dark-mode .pagination .page-link { background: var(--bg-primary); color: var(--text-secondary); border-color: var(--border-color); }
body.dark-mode .pagination .page-item:not(.disabled) .page-link:hover { background: var(--bg-secondary); color: var(--accent-primary); }
body.dark-mode .pagination .page-item.active .page-link { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }
body.dark-mode .pagination .page-item.disabled .page-link { background: var(--bg-secondary); border-color: var(--border-color); color: #555; }
body.dark-mode .summary { color: var(--text-secondary); }

body.dark-mode .pager-jump-label { color: var(--text-secondary); }
body.dark-mode .pager-jump-input { border-bottom-color: var(--border-color); color: var(--text-primary); }
body.dark-mode .pager-jump-input:focus,
body.dark-mode .pager-jump-input:hover { border-bottom-color: var(--accent-primary); }

body.dark-mode .dropdown-menu { background: var(--bg-primary); border-color: var(--border-color); }
body.dark-mode .dropdown-menu li a { color: var(--text-primary); }
body.dark-mode .dropdown-menu li a:hover { background: var(--bg-secondary); }
body.dark-mode .dropdown-divider { border-color: var(--border-color); }

body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode select { background: var(--bg-primary); color: var(--text-primary); border-color: var(--border-color); }

body.dark-mode .btn-group { background: transparent; }

/* ========================================================
   rl-template 列表模板样式（从 _rl-css.php 迁入）
   ======================================================== */
.rl-template { padding: 0; }

/* 表格容器（rl-template 专用） */
.rl-template .browse-table-container {
    margin: 0;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    position: relative;
    scrollbar-width: thin;
}
.rl-template .browse-table-container::-webkit-scrollbar { display: block; width: 8px; height: 8px; }
.rl-template .browse-table-container::-webkit-scrollbar-track { background: var(--bg-secondary, #f1f1f1); border-radius: 4px; }
.rl-template .browse-table-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
.rl-template .browse-table-container::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }
.rl-template .browse-table-container::-webkit-scrollbar-corner { background: var(--bg-secondary, #f1f1f1); }

@media (max-height: 768px) {
    .rl-template .browse-table-container { max-height: calc(100vh - 140px); }
}
@media (min-height: 1080px) {
    .rl-template .browse-table-container { max-height: calc(100vh - 180px); }
}

.rl-template .browse-footer { border-top: 1px solid var(--border-color, #d4d4d4); }

/* 筛选行默认隐藏 */
.quick-filter-thead { display: none; }
.quick-filter-thead.qf-visible { display: table-header-group; }

/* rl-template 暗色模式 */
body.dark-mode .rl-template .browse-table-container { background: var(--bg-primary); }
body.dark-mode .rl-template .browse-table-container::-webkit-scrollbar-track { background: #2d2d2d; }
body.dark-mode .rl-template .browse-table-container::-webkit-scrollbar-thumb { background: #555; }
body.dark-mode .rl-template .browse-table-container::-webkit-scrollbar-thumb:hover { background: #777; }
body.dark-mode .rl-template .browse-table-container::-webkit-scrollbar-corner { background: #2d2d2d; }
body.dark-mode .rl-template .browse-footer { border-top-color: var(--border-color); background: var(--bg-primary); color: var(--text-secondary); }

/* ========================================================
   分组筛选侧边栏
   ======================================================== */
.browse-left-sidebar .card-header--compact { padding: 10px 12px; }
.browse-left-sidebar .card-title--sm { font-size: 16px; font-weight: 600; margin: 0; }
.browse-left-sidebar .gf-clear-btn-inline { font-size: var(--fs-sm, 14px); font-weight: normal; color: var(--text-muted, #767676); }
.browse-left-sidebar .gf-clear-btn-inline:hover { color: var(--accent-danger, #c41e1e); }
.browse-left-sidebar .card-body--flush { padding: 0; }

/* kbd 快捷键标签 */
.kbd-hint { font-size: 11px; opacity: .6; }