﻿/*html, body {
    overflow: hidden;
    height: 100%;
}*/
div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom:none;
}
#tbTable_info{line-height:38px;}
.dt-scroll-body {
    min-height: 200px;
}
tfoot {
    display: table-header-group;
}
.btndropdown{cursor:pointer}

/* 旧操作列 .td-btns：统一为新胶囊按钮样式（与 .td-actions 一致，CSS 层全站生效） */
.td-btns,
.td-actions {
    min-width: 230px;   /* 撑开操作列 td：DataTables fixed 布局下列宽按表头文本分配，不设最小宽会导致 td 太窄、按钮每行一个 */
}

.td-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.td-btns a {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-primary);
    background-color: var(--admin-primary-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .td-btns a:hover {
        background-color: #d5d9fb;
        color: var(--admin-primary-hover) !important;
        text-decoration: none;
    }

/* .td-action 单数类：直接用在 <a> 上的操作按钮（SpiderClientList 等服务端渲染页），
   与 .td-actions/.td-btns 胶囊样式统一 */
a.td-action {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-primary);
    background-color: var(--admin-primary-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    a.td-action:hover {
        background-color: #d5d9fb;
        color: var(--admin-primary-hover) !important;
        text-decoration: none;
    }

.td-btns .dropdown-menu>div{padding:5px;}

/* ============================================================
   表格规范（第二批实验）：表头/链接/操作列/状态色 全站统一
   ============================================================ */

/* 表头：浅底 + 规范字号字重 */
.table thead th {
    background-color: var(--admin-border-soft);
    color: var(--admin-text);
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

/* 表格内链接：统一主色（badge/btn 除外——它们有自身颜色体系，避免蓝字黄底冲突） */
.table a:not(.badge):not(.btn) {
    color: var(--admin-primary);
    text-decoration: none;
}

    .table a:not(.badge):not(.btn):hover {
        color: var(--admin-primary-hover);
        text-decoration: underline;
    }

/* 操作列按钮（DataGrid.render.actions 生成的 .td-actions 内，最多 5 个一行）
   容器 flex 定义见 tokens.css（.td-actions），此处为按钮样式 */
.td-actions a {
    flex: 0 0 auto;      /* 按钮宽度自适应文字内容 */
    min-width: 0;
    white-space: nowrap; /* 文字不换行，长按钮单行显示 */
    margin: 0;
    padding: 2px 8px;
    text-align: center;
    line-height: 1.5;
    font-size: 12px;
    color: var(--admin-primary);
    background-color: var(--admin-primary-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .td-actions a:hover {
        background-color: #d5d9fb;
        color: var(--admin-primary-hover) !important;
        text-decoration: none;
    }

/* 深色下操作列按钮 hover：主色底 + 白字（对比度最强，避免浅底亮字刺眼） */
[data-theme="dark"] .td-actions a:hover,
[data-theme="dark"] .td-btns a:hover,
[data-theme="dark"] a.td-action:hover {
    background-color: var(--admin-primary);
    color: #fff !important;
}

/* 紧凑图标按钮：操作列按钮特别多时使用（DataGrid.render.actions 配 icon） */
.td-actions a.td-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    vertical-align: middle;
}

    .td-actions a.td-action-icon:hover {
        background-color: var(--admin-primary);
        color: #fff;
    }

/* 表格内状态色规范（替代硬编码 color:red/green 等） */
.table .text-danger {
    color: var(--admin-danger) !important;
}

    .table .text-danger:hover {
        color: var(--admin-danger) !important;
    }

.table .text-success {
    color: var(--admin-success) !important;
}

/* 浅色徽章深色文字：bg-warning 等浅底配深字，避免白字黄底对比度差 */
.badge.bg-warning,
.badge.bg-info,
.badge.bg-light {
    color: #343a40;
}

/* 表格专用 card：压缩内边距（搜索表单与表格分卡后，表格卡顶部留白过大 + 左右浪费） */
.card-body.table-card {
    padding: 8px 12px;   /* 上下 8px（表格紧凑），左右 12px（模板 24px 收紧） */
}

.td-btns .dropdown-menu>div{padding:5px;}

.oldurl {
    margin-left: 10px;
}

.home-page-item {
    display: none;
}

.side-nav .home-page-item.side-nav-item.menuitem-active > a:not(.collapsed) > span.menu-arrow {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

@media only screen and (max-width: 600px) {
    .home-page-item {
        display: block;
    }
}

.copydata {
    color: #02a8b5
}

.chartContainer {
    width: 100%
}

.word-break {
    word-wrap: break-word;
    white-space: normal;
    word-break: break-all;
    /*max-width: 100px;*/
}

.ql-editor {
    min-height: 400px;
}

.bg-gray {
    background-color: #98a6ad !important
}

.page-title-box .page-title .page-subtitle {
    font-size: 14px;
    margin-left: 10px;
    font-weight: 700
}



.leftside-menu {
    width: 200px
}

.content-page {
    margin-left: 200px;
}

.navbar-custom {
    left: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    width: 200px;
}

.site-name {
    color: #fff;
    font-weight: bold
}

    .site-name img {
        border-radius: 100%
    }

.nav-user .account-user-avatar {
    left: 22px;
}

.modal-footer {
    justify-content: center;
}

    .modal-footer button {
        margin-left: 5px;
        margin-right: 10px;
    }

.jq-toast-single {
    text-align: center !important;
}

.modal {
    background-color: #00000069
}

    .modal .col-form-label {
        text-align: right
    }

.table.dataTable{margin-top:10px}
.table.dataTable > tbody > tr > td {
    padding: 10px;
}

table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
    text-align: left;
}

.table.dataTable {
    border-collapse: collapse !important;
    margin-bottom: 0px !important;
}

.table td .btn-sm {
    margin-left: 3px;
    margin-right: 3px;
    padding: 0.1rem 0.4rem;
    font-size: 12px;
}

.table .table-active td {
    font-weight: bold;
}

/*上传*/
.uploadContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #F5F6F9;
    width: 100px;
    height: 100px;
}

    .uploadContainer .upload-button img {
        width: 98px;
        height: 98px;
    }

        .uploadContainer .upload-button img.upload-bg {
            width: 64px;
            height: 64px;
        }

    .uploadContainer .progress-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

        .uploadContainer .progress-wrap .progress-bar {
            width: 0px;
            height: 4px;
            background-color: #2c8ef8
        }

        .uploadContainer .progress-wrap .progress-txt {
            font-size: 11px;
            color: #444;
            display: block;
            text-align: center;
            width: 100%
        }

    .uploadContainer .upload-del {
        position: absolute;
        right: -12px;
        top: -19px;
        z-index: 10000;
        font-size: 24px;
        display: none;
    }

        .uploadContainer .upload-del span:hover {
            color: #ff0000;
        }


/*分页*/
.jump_button {
    width: 54px;
    height: 33px;
    color: #fff;
    padding: inherit;
}


.my_dataTables_jump {
    display: flex;
    justify-content: flex-end;
    margin-left: 10px;
}

    .my_dataTables_jump span {
        width: 54px;
        height: 33px;
        border: 1px solid var(--admin-border-soft);
        background-color: var(--admin-border-soft);
        color: var(--admin-text-soft);
        cursor: auto;
    }

        .my_dataTables_jump span:hover {
            color: var(--admin-text-soft);
        }

    .my_dataTables_jump input {
        height: 34px;
        width: 65px;
        background-color: #fff;
        border: 1px solid var(--admin-border-soft);
        background-color: var(--admin-border-soft);
    }

#jump_page_space {
    background-color: #fff;
    text-align: center
}

/* 顶栏功能按钮 hover 反馈（主题切换/全屏/通知/头像） */
.navbar-custom .topbar-menu .nav-link:hover {
    color: var(--admin-primary);
}

/* 顶栏 flex 一行布局：左侧菜单+面包屑，右侧 主题/全屏/通知/头像 始终同行。
   覆盖模板的 float 体系（.button-menu-mobile 的 float+负margin、.topbar-menu 的 float） */
.navbar-custom .button-menu-mobile {
    float: none;
    margin-left: 0;
}

.navbar-custom .topbar-menu {
    float: none !important;
}

    .navbar-custom .topbar-menu li {
        float: none;
    }

/* 顶栏左侧：菜单图标与面包屑文字垂直居中对齐 */
.navbar-custom .navbar-left .breadcrumb {
    align-items: center;
    margin-left: 8px;
}

    .navbar-custom .navbar-left .breadcrumb li {
        display: inline-flex;
        align-items: center;
    }

/* ============================================================
   全站移动端适配（覆盖 Hyper 模板默认行为）
   ============================================================ */

/* 1. 图片防溢出：全局兜底，任何图片不撑破容器 */
img {
    max-width: 100%;
}

/* 2. 页面标题区：模板在移动端 display:none 隐藏了右侧操作按钮，
   这里恢复显示，改为"标题在上、按钮换行在下"的纵向布局 */
@media (max-width: 767.98px) {
    .page-title-box {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
        padding-top: 15px;
        padding-bottom: 5px;
    }

    .page-title-box .page-title {
        line-height: 1.5;
        white-space: normal;
        word-break: break-word;
    }

    .page-title-box .page-title-right {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        float: none;
        margin: 0;
    }

    .page-title-box .page-title-right .btn {
        margin: 0;
    }
}

/* 3. 筛选区移动端：控件不溢出、换行间距正常 */
@media (max-width: 767.98px) {
    form.row > .col-auto,
    .filter-bar > .col-auto {
        margin-bottom: 8px;
    }

    form.row .form-control,
    form.row .form-select,
    .filter-bar .form-control,
    .filter-bar .form-select {
        max-width: 100%;
        min-width: 0;
    }
}

/* 4. 筛选区规范化兜底：form.row 内嵌套 row 时修正负 margin 溢出，
   并让内层 row 内 col-auto 正常换行（老页面常见结构，逐页改造前先兜底） */
form.row > .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* 5. 顶栏图标统一大小：主题切换/全屏/通知 一致（模板 .noti-icon 为 22px） */
.navbar-custom .topbar-menu .nav-link > i {
    font-size: 22px;
    vertical-align: middle;
}



/* ============================================================
   深色模式适配补充（2026-08-07 用户反馈）
   1. 全局链接色：统一走 --admin-link（暗色下亮化）
   2. 滚动条：暗色下深色滚动条（默认系统浅色滚动条刺眼）
   ============================================================ */

/* 1. 全局链接色（:where 零特异性，.text-info 等类仍可正常覆盖）
   仅作用于非按钮/徽章的链接，避免破坏 btn-primary/badge 自身颜色 */
a:where(:not(.btn):not(.badge)) {
    color: var(--admin-link);
    transition: color 0.15s ease;
}

a:where(:not(.btn):not(.badge)):hover {
    color: var(--admin-link-hover);
}

/* 2. 滚动条（Webkit 内核 + Firefox） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.20);
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.35);
    }

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.22);
}

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.38);
    }

/* Firefox */
:root {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

[data-theme="dark"] {
    scrollbar-color: rgba(255, 255, 255, 0.30) transparent;
}

/* ============================================================
   主色统一：现代 Indigo 蓝 #6366F1（2026-08-07 用户选定）
   覆盖 Hyper 模板硬编码 #6366f1 → var(--admin-primary)，全站组件生效
   ============================================================ */

/* btn-primary（模板硬编码 #6366f1） */
.btn-primary {
    --bs-btn-bg: var(--admin-primary);
    --bs-btn-border-color: var(--admin-primary);
    --bs-btn-hover-bg: var(--admin-primary-hover);
    --bs-btn-hover-border-color: var(--admin-primary-hover);
    --bs-btn-active-bg: var(--admin-primary-hover);
    --bs-btn-active-border-color: var(--admin-primary-hover);
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
    box-shadow: 0 2px 6px 0 rgba(99, 102, 241, 0.4);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary:not(:disabled):not(.disabled):active {
        background-color: var(--admin-primary-hover);
        border-color: var(--admin-primary-hover);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: var(--admin-primary);
        border-color: var(--admin-primary);
    }

/* 分页激活 */
.page-item.active .page-link {
    background-color: var(--admin-primary);
    border-color: var(--admin-primary);
}

/* 文字/背景/徽章主色 */
.text-primary {
    color: var(--admin-primary) !important;
}

.bg-primary {
    background-color: var(--admin-primary) !important;
}

.badge-primary {
    background-color: var(--admin-primary);
}

/* 表单控件聚焦主色
   2026-08-15：模板 app.min.css 有 `.form-control:valid:focus { box-shadow:none !important }`（普通输入框默认 :valid 触发，
   (0,3,0)+!important 会压掉光晕）→ 用 :focus:focus 提到同级特异性 + !important，靠后加载取胜，恢复 Indigo 光晕 */
.form-control:focus:focus,
.form-select:focus:focus {
    border-color: var(--admin-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}

/* 侧边栏激活菜单：模板 rgba(99,102,241,.08) → indigo 透明白 */
.side-nav .menuitem-active > a {
    background-color: rgba(99, 102, 241, 0.08) !important;
    color: var(--admin-primary) !important;
}

/* 侧边栏菜单 hover 提亮（2026-08-16 用户反馈：模板 hover 仅文字变白，深色底上不明显）——
   一级/二级/三级菜单统一加半透明白背景衬托；侧边栏在浅色（#313a46）与暗色（#2a3340）
   主题下均为深色底，该背景通用适用。color 加 !important：浅色主题下模板
   body[data-leftbar-theme=dark] 规则特异性 (0,3,1) 更高，压掉 #fff 需提权 */
.side-nav .side-nav-link:hover,
.side-nav .side-nav-second-level li a:hover,
.side-nav .side-nav-third-level li a:hover,
.side-nav .side-nav-forth-level li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

/* ============================================================
   Modal 统一样式（全站 90+ 标准 Bootstrap modal）
   ============================================================ */
.modal-content {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--admin-border);
    background-color: var(--admin-card-bg);
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.modal-body {
    padding: 16px;
}

.modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--admin-border);
    background-color: var(--admin-card-bg);
}

/* 暗色弹窗（2026-08-15）：统一内部背景 + 外边框 + 强阴影
   模板 app-dark 的 modal-content 是 #464F5B（比头尾亮），深色下 body 区显得漂浮且整体无轮廓；
   改为与卡片同色 + 1px 边框 + 高实阴影，弹窗在深背景上"咬住"边缘、轮廓清晰 */
[data-theme="dark"] .modal-content {
    border: 1px solid var(--admin-border);
    background-color: var(--admin-card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 暗色下 modal 头/尾背景一致 */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--admin-card-bg);
}

/* ============================================================
   浅色语义文本适度加深（2026-08-15）：保留 Hyper 原色相，白底对比度从 2.0~3.1 提到 2.6~3.8，
   仅"适当调整对比度"，不做大跳变；深色模式由下方 [data-theme="dark"] 段覆盖。
   说明：site.css 在 app.min.css 之后加载，同权重规则后载生效。
   ============================================================ */
.text-success {
    color: #0aa678 !important;
}

.text-info {
    color: #2891b1 !important;
}

.text-warning {
    color: #cf9500 !important;
}

.text-danger {
    color: #ea4568 !important;
}

/* ============================================================
   深色主题系统优化（2026-08-07 用户反馈）
   1. 文字提亮（暗色下灰蒙蒙）
   2. 功能色柔化暖色调（警示不刺眼）
   ============================================================ */

[data-theme="dark"] body {
    color: var(--admin-text);
    /* 页面底色走 token（2026-08-15）：模板 #343a40 与卡片 #3a4655 太接近，卡片浮不起来；
       改 --admin-bg #222c38 后与卡片拉开 ~18 色阶，层次清晰 */
    background-color: var(--admin-bg);
}

/* 侧边栏深色加深（2026-08-15）：#313a46 → #2a3340，与卡片 #3a4655 区分，形成纵深
   模板 app-dark 用 background:#37404a !important，需 !important 覆盖 */
[data-theme="dark"] .leftside-menu {
    background-color: #2a3340 !important;
}

/* 表格文字提亮 */
[data-theme="dark"] .table {
    --bs-table-color: var(--admin-text);
    color: var(--admin-text);
}

    [data-theme="dark"] .table td,
    [data-theme="dark"] .table th {
        --bs-table-color: var(--admin-text);
    }

/* 卡片/输入框文字跟随 token */
[data-theme="dark"] .card {
    background-color: var(--admin-card-bg);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    color: var(--admin-text);
    background-color: var(--admin-bg);
}

/* 功能色暗色统一（柔化暖色调，避免荧光刺眼） */
[data-theme="dark"] .text-success {
    color: var(--admin-success) !important;
}

[data-theme="dark"] .text-info {
    color: var(--admin-info) !important;
}

[data-theme="dark"] .text-warning {
    color: var(--admin-warning) !important;
}

[data-theme="dark"] .text-danger {
    color: var(--admin-danger) !important;
}

[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-danger {
    color: #222c38;   /* 深色文字，浅底徽章在暗色下保持可读 */
}

/* ============================================================
   Modal 移动端适配（2026-08-07）：宽 modal（lg/xl）不溢出、内容可滚动
   ============================================================ */
@media (max-width: 767.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100vw - 0.75rem);
        margin: 0.375rem auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 0.75rem);
    }

    /* 弹窗内容超高时可内部滚动，避免整个弹窗超出屏幕 */
    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 底部按钮铺满，方便触控 */
    .modal-footer {
        flex-wrap: wrap;
    }

        .modal-footer .btn {
            flex: 1 1 auto;
            margin-left: 0;
        }

            .modal-footer .btn + .btn {
                margin-left: 6px;
            }
}

/* ============================================================
   表格裸 <a> 操作列兜底（P1，2026-08-07）
   126 页操作列是无容器的裸链接按钮，用 :has() 精准识别：
   单元格内 ≥2 个直接子链接 = 操作列特征（内容列通常单个链接，不会误伤）
   ============================================================ */
.table tbody td:has(> a + a) > a:not(.badge):not(.btn) {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--admin-primary);
    background-color: var(--admin-primary-light);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

    .table tbody td:has(> a + a) > a:not(.badge):not(.btn):hover {
        background-color: #d5d9fb;
        color: var(--admin-primary-hover) !important;
        text-decoration: none;
    }

[data-theme="dark"] .table tbody td:has(> a + a) > a:not(.badge):not(.btn):hover {
    background-color: var(--admin-primary);
    color: #fff !important;
}

/* ============================================================
   搜索卡与表格卡间距压缩（全站通用，2026-08-08 用户确认 4px）
   规则：含筛选表单（form.row）的 card 压缩底部间距
   form.row 是 88 页拆卡页面的统一筛选表单结构，精准命中搜索卡；
   编辑页 form 非 row 结构不会误伤
   ============================================================ */
.card:has(> .card-body > form.row) {
    margin-bottom: 4px;
}

    .card:has(> .card-body > form.row) .card-body {
        padding: 12px;   /* 全方向一致 12px（原 top 24 / bottom 4 / 左右 24） */
    }

/* ============================================================
   折叠态侧边栏弹出菜单层级修复（2026-08-31）
   问题：condensed 态下 .leftside-menu z-index 被压到 5，页面内容区出现
         sticky/fixed/z-index 元素时，侧栏容器 stacking context 被盖住，
         导致鼠标悬停弹出的子菜单“消失”或显示不全。
   修复：
     1) 侧栏容器 z-index 从 5 提到 var(--z-sidebar, 1030)（高于 sticky 1020 / dropdown 1000，
        低于 modal 1050 / toast 1080），避免被内容区压住；
     2) .collapse > ul 分支补齐 z-index:9999，与 :hover > ul 分支保持一致。
   ============================================================ */
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .wrapper .leftside-menu {
    z-index: var(--z-sidebar, 1030) !important;
}

body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapse > ul,
body[data-leftbar-compact-mode=condensed]:not(.authentication-bg) .side-nav .side-nav-item:hover > .collapsing > ul {
    z-index: 9999 !important;
}
