/* ====================================================
   全域极简纯暗黑 (真·像素级居中对齐·全端响应式手机适配版)
   ==================================================== */

/* --- 1. 全局深黑底色与移动端视口防横晃 --- */
* {
    -webkit-font-smoothing: antialiased !important;
    box-sizing: border-box !important;
}

html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body, #root, .main-container {
    background-color: #0c0c0c !important;
    color: #e5e5e5 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

:root {
    --secondary: #141414 !important;
    --dark: #0c0c0c !important;
}

/* --- 2. 顶部导航栏 (无框纯文字，无任何杂线) --- */
nav.navbar, header.navbar, .navbar, .top-nav {
    background-color: #0c0c0c !important;
    border-bottom: 1px solid #1a1a1a !important;
    min-height: 50px !important;
    padding: 0 1.2rem !important;
}

@media (min-width: 769px) {
    nav.navbar, header.navbar, .navbar, .top-nav {
        height: 50px !important;
    }
}

nav.navbar *:not(.navbar-toggler):not(.navbar-toggler-icon),
nav.navbar *:not(.navbar-toggler):not(.navbar-toggler-icon)::before,
nav.navbar *:not(.navbar-toggler):not(.navbar-toggler-icon)::after,
.top-nav *:not(.navbar-toggler):not(.navbar-toggler-icon) {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background: transparent !important;
}

nav.navbar a, nav.navbar button, nav.navbar .btn, nav.navbar .nav-link {
    border: none !important;
    border-radius: 0 !important;
    color: #888888 !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 0.8rem 0.85rem !important;
    margin: 0 !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.15s ease !important;
}

nav.navbar a:hover, nav.navbar button:hover {
    color: #ffffff !important;
}

nav.navbar a.active, nav.navbar button.active, nav.navbar .nav-link.active,
nav.navbar .active, nav.navbar .active > a {
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: none !important;
}

nav.navbar .navbar-brand {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    margin-right: 1.2rem !important;
}

/* 顶部汉堡按钮 (移动端折叠菜单触发器) */
.navbar-toggler {
    background-color: #141414 !important;
    border: 1px solid #242424 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
}

/* --- 3. 第二层工具栏：真·图标居中对齐·去除滑块外框·全排严格 6px 间隙 --- */

/* 工具栏容器：纯黑底、底边线、单行 flex 绝对居中 */
.filtered-list-toolbar,
.list-toolbar,
.scene-toolbar,
[class*="toolbar"],
[class*="Toolbar"] {
    background-color: #0c0c0c !important;
    border-bottom: 1px solid #1a1a1a !important;
    border-top: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important; /* 各个直接组件块之间严格 6px */
    padding: 0.6rem 0 !important;
    box-sizing: border-box !important;
}

/* 工具栏内部所有外壳与按键组：全部 flex 单行居中、组内按键同样死锁 6px 间隙 */
.filtered-list-toolbar > div,
.filtered-list-toolbar > .btn-group,
.filtered-list-toolbar .btn-group,
.filtered-list-toolbar .list-operations,
.filtered-list-toolbar .list-operations .btn-group,
.filtered-list-toolbar .clearable-input-group,
.filtered-list-toolbar .search-term-input,
.filtered-list-toolbar .page-size-selector,
.filtered-list-toolbar .sort-by-select,
.filtered-list-toolbar .saved-filter-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px !important; /* 打破 Play 和 More 粘连，按键之间彻底统配 6px */
    box-sizing: border-box !important;
}

/* 消除所有工具栏元素自带的 margin，完全由 gap: 6px 掌控 */
.filtered-list-toolbar .btn,
.filtered-list-toolbar .btn-group,
.filtered-list-toolbar input,
.filtered-list-toolbar select,
.filtered-list-toolbar button {
    margin: 0 !important;
}

/* 统一所有按键（彻底消灭 Bookmark 和 More 因 padding 导致的下沉贴底问题） */
.filtered-list-toolbar .btn,
.filtered-list-toolbar .dropdown-toggle,
.filtered-list-toolbar button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    background-color: #161616 !important;
    border: 1px solid #242424 !important;
    color: #888888 !important;
    font-size: 0.86rem !important;
}

/* 彻底移除所有 dropdown-toggle 自带的下拉小三角箭头 ::after */
.filtered-list-toolbar .dropdown-toggle::after,
.filtered-list-toolbar .btn::after {
    display: none !important;
}

/* 内部图标（SVG）：强制无偏移绝对居中，彻底解决图标高低错位问题 */
.filtered-list-toolbar svg,
.filtered-list-toolbar .btn svg,
.filtered-list-toolbar .dropdown-toggle svg,
.filtered-list-toolbar .fa-icon,
.filtered-list-toolbar [class*="fa-"] {
    display: block !important;
    margin: auto !important;
    vertical-align: middle !important;
    max-height: 15px !important;
    max-width: 15px !important;
}

/* 纯图标按钮（书签、漏斗、日期箭头、播放、更多、网格、列表、墙、标签）：死锁 32x32 正方形 */
.filtered-list-toolbar .btn:not(.sort-by-select .dropdown-toggle),
.filtered-list-toolbar .saved-filter-dropdown .dropdown-toggle,
.filtered-list-toolbar #more-menu,
.filtered-list-toolbar .play-button,
.filtered-list-toolbar .filter-button {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
}

/* 日期排序按键：自适应“日期”文字宽度，并保持文字居中 */
.filtered-list-toolbar .sort-by-select .input-group-prepend,
.filtered-list-toolbar .sort-by-select .dropdown-toggle {
    width: auto !important;
    min-width: 48px !important;
    padding: 0 0.65rem !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 选中的白底“墙”按钮：严格强制锁定 32x32，绝不比旁边的按键凸出或大一圈 */
.filtered-list-toolbar .btn.active,
[class*="toolbar"] .btn.active {
    width: 32px !important;
    height: 32px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    font-weight: 600 !important;
}

/* 按钮悬停 */
.filtered-list-toolbar .btn:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* 搜索框：精准 32px 高度与文字居中 */
.filtered-list-toolbar input.clearable-text-field,
.filtered-list-toolbar input[type="search"] {
    width: 160px !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 0.75rem !important;
    border-radius: 6px !important;
    background-color: #161616 !important;
    border: 1px solid #242424 !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    display: block !important;
}

/* 下拉菜单（40 每页）：精准 32px 高度与文字居中 */
.filtered-list-toolbar .page-size-selector select {
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 1.4rem 0 0.65rem !important;
    border-radius: 6px !important;
    background-color: #161616 !important;
    border: 1px solid #242424 !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: block !important;
}

/* --- 4. 彻底消灭滑块外壳黑框（去除背景、无边框、无阴影） --- */
.filtered-list-toolbar .zoom-slider-container,
.zoom-slider-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 75px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 强制抹除 slider 上继承的任何 form-control 黑框与边框 */
.filtered-list-toolbar input[type="range"],
.filtered-list-toolbar .zoom-slider-container input,
input[type="range"].zoom-slider,
input[type="range"].form-control,
input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    height: 32px !important;
    width: 75px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: block !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #2a2a2a !important;
    height: 4px !important;
    border-radius: 2px !important;
    border: none !important;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    border: 1px solid #555555 !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    margin-top: -4px !important; /* 精准对齐 4px 轨道正中心 */
    box-shadow: none !important;
}

input[type="range"]::-moz-range-track {
    background: #2a2a2a !important;
    height: 4px !important;
    border-radius: 2px !important;
    border: none !important;
}

input[type="range"]::-moz-range-thumb {
    background: #ffffff !important;
    border: 1px solid #555555 !important;
    border-radius: 50% !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid #555555 !important;
}

/* --- 5. 彻底删除顶部页码栏与统计数字 (消除漂移错位与多余占位) --- */
.pagination-index-container,
.paginationIndex,
.scenes-stats,
.filter-container.paginationIndex {
    display: none !important;
}

/* 底部翻页栏（沉底居中，深黑极简） */
.pagination-footer-container,
.pagination-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 2rem 0 1rem 0 !important;
    width: 100% !important;
}

.pagination-footer .pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
}

.pagination-footer .pagination .btn,
.pagination-footer .pagination button,
.pagination-footer .pagination .page-link {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    line-height: 30px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    padding: 0 0.75rem !important;
    border: 1px solid #242424 !important;
    background-color: #161616 !important;
    color: #888888 !important;
}

.pagination-footer .pagination .btn:hover,
.pagination-footer .pagination button:hover,
.pagination-footer .pagination .page-link:hover {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* --- 6. 设置页左侧菜单彻底去蓝 --- */
.list-group-item, .nav-pills .nav-link {
    background: transparent !important;
    border: none !important;
    color: #888888 !important;
}

.list-group-item.active,
.nav-pills .nav-link.active,
.list-group-item[class*="active"] {
    background-color: #242424 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* --- 7. 折叠侧边栏、任务卡片、模态框与底层基础 --- */
.filter-sidebar, [class*="filter-sidebar"], [class*="sidebar"], .accordion,
.bg-secondary, .bg-dark, [class*="bg-secondary"], [class*="bg-dark"] {
    background: #0c0c0c !important;
    background-color: #0c0c0c !important;
    border-color: #1a1a1a !important;
    color: #b3b3b3 !important;
}

[class*="sidebar"] .accordion-button, [class*="sidebar"] .btn {
    background-color: #161616 !important;
    border: 1px solid #222222 !important;
    border-radius: 6px !important;
    color: #b3b3b3 !important;
    margin-bottom: 4px !important;
}

.card, .card-header, .card-body, [class*="queue"], [class*="task"] {
    background-color: #141414 !important;
    border: 1px solid #222222 !important;
    border-radius: 8px !important;
    color: #888888 !important;
}

.modal-content {
    background-color: #141414 !important;
    border: 1px solid #242424 !important;
    border-radius: 10px !important;
    color: #e5e5e5 !important;
}

.modal-header, .modal-footer {
    border-color: #1e1e1e !important;
}

.dropdown-menu {
    background-color: #141414 !important;
    border: 1px solid #242424 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
    padding: 4px !important;
}

.dropdown-item {
    color: #cccccc !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #222222 !important;
    color: #ffffff !important;
}

/* 进度条去蓝纯白 */
.progress, [class*="progress"] {
    background-color: #222222 !important;
    height: 4px !important;
    border-radius: 2px !important;
}

.progress-bar {
    background-color: #ffffff !important;
}

/* --- 8. 手机端与窄屏自适应响应式适配 (< 768px) --- */
@media (max-width: 768px) {
    /* (1) 顶部导航栏自适应：展开时允许容纳菜单列表，不被固定高度截断 */
    nav.navbar, header.navbar, .navbar, .top-nav {
        height: auto !important;
        min-height: 50px !important;
        padding: 0 0.85rem !important;
    }

    nav.navbar .navbar-brand {
        line-height: 50px !important;
        height: 50px !important;
        margin-right: 0 !important;
    }

    /* 移动端下拉菜单项 */
    .navbar-collapse {
        background-color: #0c0c0c !important;
        padding: 0.5rem 0 !important;
        border-top: 1px solid #1a1a1a !important;
    }

    .navbar-collapse a,
    .navbar-collapse button,
    .navbar-collapse .btn,
    .navbar-collapse .nav-link {
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 0.85rem !important;
        margin: 2px 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border-radius: 6px !important;
        font-size: 0.95rem !important;
    }

    .navbar-collapse a:hover,
    .navbar-collapse a.active,
    .navbar-collapse .nav-link.active {
        background-color: #161616 !important;
        color: #ffffff !important;
    }

    /* (2) 第二层工具栏：平滑横向滚动，死锁单行排布，绝不变乱 */
    .filtered-list-toolbar,
    .list-toolbar,
    .scene-toolbar,
    [class*="toolbar"],
    [class*="Toolbar"] {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 0.5rem 0.75rem !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .filtered-list-toolbar::-webkit-scrollbar,
    .list-toolbar::-webkit-scrollbar,
    .scene-toolbar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 所有按键和输入组抗挤压：严禁缩成扁形，维持精准 32px 高度与 6px 间隙 */
    .filtered-list-toolbar > *,
    .filtered-list-toolbar .btn,
    .filtered-list-toolbar .btn-group,
    .filtered-list-toolbar .clearable-input-group,
    .filtered-list-toolbar .page-size-selector,
    .filtered-list-toolbar .sort-by-select,
    .filtered-list-toolbar .saved-filter-dropdown,
    .filtered-list-toolbar .list-operations {
        flex-shrink: 0 !important;
    }

    /* 手机端完全隐藏缩放滑块（触屏无需滑块，节省宝贵宽度） */
    .filtered-list-toolbar .zoom-slider-container,
    .zoom-slider-container {
        display: none !important;
    }

    /* 手机端搜索框：130px 紧凑宽度，触屏操作更加利落 */
    .filtered-list-toolbar input.clearable-text-field,
    .filtered-list-toolbar input[type="search"] {
        width: 130px !important;
    }

    /* 触屏轻微按压反馈 */
    .filtered-list-toolbar .btn:active,
    .filtered-list-toolbar button:active {
        background-color: #262626 !important;
        transform: scale(0.96) !important;
        transition: transform 0.08s ease !important;
    }

    /* (3) 侧边筛选抽屉/弹窗：手机端自适应宽度与层级 */
    .filter-sidebar,
    .sidebar-pane,
    [class*="filter-sidebar"] {
        width: 100% !important;
        max-width: 100vw !important;
        background-color: #0c0c0c !important;
        z-index: 1060 !important;
    }

    /* (4) 底部翻页栏：手机端自适应换行，防止页码过多溢出边缘 */
    .pagination-footer .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }

    .pagination-footer .pagination .btn,
    .pagination-footer .pagination button,
    .pagination-footer .pagination .page-link {
        height: 30px !important;
        min-height: 30px !important;
        line-height: 28px !important;
        padding: 0 0.55rem !important;
        font-size: 0.8rem !important;
    }

    /* (5) 主内容区与卡片网格边距收敛 */
    .main-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* --- 9. 超小屏特别优化 (< 480px) --- */
@media (max-width: 480px) {
    .filtered-list-toolbar input.clearable-text-field,
    .filtered-list-toolbar input[type="search"] {
        width: 110px !important;
    }

    .filtered-list-toolbar {
        padding: 0.4rem 0.5rem !important;
        gap: 5px !important;
    }

    .filtered-list-toolbar > div,
    .filtered-list-toolbar .btn-group {
        gap: 5px !important;
    }
}

/* --- 10. 隐形精致窄滚动条 (PC端) --- */
::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
}

::-webkit-scrollbar-thumb {
    background: #242424 !important;
    border-radius: 10px !important;
}