/*!
 * 绿码归家 —— 后台主题
 * -------------------------------------------------------------------------
 * 主色取自小程序顶部条的深青绿 #0E7A6A，与前端保持一致。
 *
 * 启用方式：application/config.php 里 fastadmin.adminskin = 'skin-aad'
 * 加载位置：application/admin/view/common/meta.html（框架页与 iframe 内页都会加载）
 *
 * 写法约定（很重要）：
 *   · 带 .skin-aad 前缀的规则 —— 只在外层框架页生效（body 上才有这个类）
 *     用于头部、左侧菜单、标签栏这些"外壳"
 *   · 不带前缀的规则 —— iframe 内页也生效（内页 body 只有 inside-header inside-aside）
 *     用于按钮、表格、表单、分页这些"内容"
 *   如果给按钮加了 .skin-aad 前缀，iframe 里的按钮不会变色，别踩这个坑。
 *
 * 只改颜色、圆角、阴影、边框，不动宽高与定位，避免打乱 AdminLTE 的布局。
 */

/* =========================================================================
 * 调色板
 * ========================================================================= */
:root {
    --aad-primary: #0E7A6A;
    --aad-primary-dark: #0A5F53;
    --aad-primary-darker: #084C43;
    --aad-primary-light: #14A08C;
    /* 侧栏：由原来的深墨绿改成更浅、偏蓝的深青石板色，久看不压抑（后台自用，故与小程序品牌绿脱开） */
    --aad-sidebar: #1E3D4F;
    --aad-sidebar-sub: #18333F;
    --aad-sidebar-hover: #2A5266;
    --aad-sidebar-text: #A6BECB;
    /* 浅色底：由浅绿改成淡冷灰蓝，去掉刺眼的绿、加一点蓝，长时间看更舒服 */
    --aad-bg: #EFF2F7;
    --aad-tint: #EEF2F7;
    --aad-tint-line: #DCE4EC;
    --aad-mint: #3EC1A6;
    --aad-blue: #4A7DE0;
    --aad-red: #E4574C;
    --aad-amber: #E8A33D;
    --aad-text: #2E3742;
    --aad-muted: #8794A0;
    --aad-border: #E4E9EF;
}

/* =========================================================================
 * 〇、内容区背景：淡冷灰蓝
 * -------------------------------------------------------------------------
 * 外层框架的内容区 + 每个 iframe 内页的 body 都统一成 --aad-bg，
 * 比原来的浅绿更中性、偏一点蓝，长时间盯着不累眼。
 * 内页 body 只有 inside-header inside-aside（弹窗 is-dialog 不动）。
 * ========================================================================= */
.skin-aad .content-wrapper,
.skin-aad .right-side {
    background: var(--aad-bg);
}

body.inside-header.inside-aside:not(.is-dialog) {
    background: var(--aad-bg);
}

/* =========================================================================
 * 一、外层框架：顶部
 * ========================================================================= */
.skin-aad .main-header {
    background: #fff;
    box-shadow: 0 1px 0 rgba(14, 122, 106, .08), 0 2px 8px rgba(15, 42, 38, .04);
}

.skin-aad .main-header .navbar {
    background-color: #fff;
    min-height: 50px;
}

.skin-aad .main-header .navbar .nav > li > a {
    color: #5B6B68;
    font-weight: 400;
}

.skin-aad .main-header .navbar .nav > li > a:hover,
.skin-aad .main-header .navbar .nav > li > a:active,
.skin-aad .main-header .navbar .nav > li > a:focus,
.skin-aad .main-header .navbar .nav .open > a,
.skin-aad .main-header .navbar .nav .open > a:hover,
.skin-aad .main-header .navbar .nav .open > a:focus {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.skin-aad .main-header .navbar .sidebar-toggle {
    color: #5B6B68;
}

.skin-aad .main-header .navbar .sidebar-toggle:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

/* -------------------------------------------------------------------------
 * 内容区高度：正好等于「视口 - 头部 50px」
 * -------------------------------------------------------------------------
 * 这套多标签布局里，头部是占在文档流里的 50px（不是脱离文档流的 fixed 覆盖）。
 * backend.css 却按「fixed 头部」来算：`.content-wrapper { height:100% }`（=整屏）
 * 再 `padding-top:50px`。结果 头部50 + 内容区整屏 = 比视口高 50px，
 * 于是要么顶部凭空多 50px 空白、要么最后一屏被顶到屏幕外滚不到（反复出现的两个毛病，
 * 其实是同一个 50px 在作怪）。
 *
 * 正确做法：内容区高度 = 100vh - 50px（视口减头部），padding-top 归零。
 * 头部50 + 内容区(视口-50) = 正好一屏，iframe 既不溢出屏外、顶部也不空。
 * 100vh 是视口相对值，不依赖 height:100% 那条容易断的百分比链，最稳。
 * 作用域限定 .skin-aad，不改框架文件。
 * ------------------------------------------------------------------------- */
.skin-aad.fixed .content-wrapper,
.skin-aad.fixed .right-side {
    padding-top: 0;
    height: calc(100vh - 50px);
    /* ↓↓↓ 这两条是「最下面永远差一截」的真凶，缺一不可 ↓↓↓
     *
     * fastadmin.css 里有一条：
     *     .content-wrapper, .right-side { min-height: 100%; }
     * 而 .wrapper 是 height:100%（backend.css），所以这个 100% 解析出来就是 100vh。
     *
     * CSS 的规则是 **min-height 压过 height**：只写 height:calc(100vh - 50px) 没用，
     * 盒子实际高度会被 min-height 顶回 100vh。于是
     *     头部 50px（#firstnav 是 position:relative，占文档流）+ 内容区 100vh = 100vh + 50px
     * 比视口高出 50px；而外层 body 是 height:100% 不能滚，
     * 那多出来的 50px 就永久掉到屏幕外面 —— iframe 的最后一截怎么都看不到。
     *
     * 现象特征（可用来快速识别同类问题）：
     *   · 直接打开内页正常，套进 iframe 就少一截
     *   · 内页自己滚到底了，最后一块还是缺
     * 所以 min-height / max-height 必须跟 height 一起钉死。
     */
    min-height: calc(100vh - 50px);
    max-height: calc(100vh - 50px);
    /* 溢出交给 iframe 自己的原生滚动条，别让外层再长出一个滚动条 */
    overflow: hidden;
}

/* -------------------------------------------------------------------------
 * iframe 高度必须跟着容器走（「最下面显示不全」反复出现的真正原因）
 * -------------------------------------------------------------------------
 * addtabs 插件建标签时是这么写死 iframe 高度的：
 *
 *     iframeHeight: $(window).height() - 50      // jquery.addtabs.js 默认值
 *     <iframe height="{这个像素数}">
 *
 * 两个致命点：
 *   1. 它是**像素常量**，在脚本解析那一刻就算好了，之后再也不变 ——
 *      窗口一改大小/缩放，或算的时候视口和现在不一样，iframe 就和容器错位；
 *   2. 容器高度是 CSS 的 calc(100vh - 50px)。同一个高度有了两个来源，
 *      必然对不上。iframe 一旦比容器高，多出来的部分被顶到窗口下面，
 *      而外层 body 是 height:100% 不能滚 —— 于是「内页滚到底了，最后一块还是看不到」。
 *      这就是这个毛病反复回来的根因，光调 padding/height 治不好。
 *
 * 修法：让 iframe 用 CSS 填满 .tab-pane（框架已给它 height:100%），
 * 高度只剩「容器」这一个来源，窗口缩放自动跟随，不可能再错位。
 * !important 是为了盖掉 addtabs 写在标签上的 height 属性与可能的内联样式。
 * ------------------------------------------------------------------------- */
.skin-aad .tab-addtabs .tab-pane iframe {
    display: block;
    width: 100%;
    height: 100% !important;
    border: 0;
}

/* logo 区：和它正下方的侧栏同色系，深色面连成一整条，不再是一块绿贴一块蓝灰 */
.skin-aad .main-header .logo {
    background: linear-gradient(135deg, var(--aad-sidebar-hover) 0%, var(--aad-sidebar) 100%);
    color: #fff;
    font-weight: 600;
    letter-spacing: .5px;
    border-bottom: 0;
    border-right: 0;
}

.skin-aad .main-header .logo:hover {
    background: linear-gradient(135deg, #2F5C6E 0%, var(--aad-sidebar-hover) 100%);
}

.skin-aad .main-header li.user-header {
    background: linear-gradient(135deg, var(--aad-sidebar-hover) 0%, var(--aad-sidebar) 100%);
}

/* -------------------------------------------------------------------------
 * 顶部多标签：标签多了不要和右侧菜单挤在一起
 * -------------------------------------------------------------------------
 * backend.css 把标签条设成 `position:absolute; left:45px` 但没给右边界，
 * 开的标签一多就一直往右铺，钻到右侧「主页/清除缓存/头像」下面，挤成一团。
 * 给它一个右边界（留出右侧菜单的位置），装不下就在标签条内部横向滚动。
 * ------------------------------------------------------------------------- */
.skin-aad #firstnav .nav-addtabs {
    right: 360px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

/* 浮动的 li 改成行内块，配合 white-space:nowrap 才能横向滚动 */
.skin-aad #firstnav .nav-addtabs > li {
    float: none;
    display: inline-block;
    vertical-align: top;
}

/* 标签条的横向滚动条做细一点，别太抢眼 */
.skin-aad #firstnav .nav-addtabs::-webkit-scrollbar {
    height: 3px;
}

.skin-aad #firstnav .nav-addtabs::-webkit-scrollbar-thumb {
    background: var(--aad-tint-line);
    border-radius: 3px;
}

/* 右侧菜单不透明，即使标签滚动时也不会透出来叠字 */
.skin-aad #firstnav .navbar-custom-menu {
    background: #fff;
}

/* 顶部多标签页 */
.skin-aad .main-header .nav-addtabs > li > a {
    color: #6B7A77;
    border-right-color: var(--aad-border);
    background: #fff;
}

.skin-aad .main-header .nav-addtabs > li > a:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.skin-aad .main-header .nav-addtabs > li.active > a {
    color: var(--aad-primary);
    background: var(--aad-tint);
    box-shadow: inset 0 -2px 0 var(--aad-primary);
    border-right-color: var(--aad-border);
}

.skin-aad .main-header .navbar .nav-addtabs li > .close-tab {
    color: var(--aad-muted);
}

.skin-aad .main-header .navbar .nav-addtabs li > .close-tab:hover {
    color: var(--aad-red);
}

/* 顶部那条安全提示，改成克制的琥珀色，别一进来就一片刺眼的红 */
.skin-aad .main-header .alert-danger-light {
    background: #FDF6E8 !important;
    color: #8A6320 !important;
    font-size: 12px;
    padding: 6px 12px;
    border-bottom: 1px solid #F2E3C4 !important;
}

/* =========================================================================
 * 二、外层框架：左侧菜单
 * ========================================================================= */
.skin-aad .wrapper,
.skin-aad .main-sidebar,
.skin-aad .left-side {
    background: var(--aad-sidebar);
}

.skin-aad .main-sidebar {
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .15);
}

.skin-aad .sidebar a {
    color: var(--aad-sidebar-text);
}

.skin-aad .sidebar a:hover {
    text-decoration: none;
}

.skin-aad .user-panel > .info,
.skin-aad .user-panel > .info > a {
    color: #fff;
}

.skin-aad .sidebar-menu > li.header {
    color: #6E8F88;
    background: var(--aad-sidebar-sub);
    text-transform: none;
    font-size: 11px;
    letter-spacing: 1px;
}

/* 一级菜单 */
.skin-aad .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    padding-left: 12px;
    transition: background-color .15s ease, border-color .15s ease;
}

.skin-aad .sidebar-menu > li:hover > a {
    color: #fff;
    background: var(--aad-sidebar-hover);
    border-left-color: transparent;
}

.skin-aad .sidebar-menu > li.active > a {
    color: #fff;
    background: var(--aad-primary);
    border-left-color: var(--aad-mint);
    font-weight: 500;
}

/* 展开中的父级菜单 */
.skin-aad .sidebar-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

.skin-aad .sidebar-menu li.treeview.active > a,
.skin-aad .sidebar-menu li.treeview.treeview-open > a {
    background: var(--aad-sidebar-sub);
    border-left-color: var(--aad-mint);
    color: #fff;
}

/* 二级菜单 */
.skin-aad .sidebar-menu > li > .treeview-menu {
    background: var(--aad-sidebar-sub);
}

.skin-aad .sidebar-menu .treeview-menu {
    padding-left: 0;
}

.skin-aad .sidebar-menu .treeview-menu .treeview-menu {
    padding-left: 0;
}

.skin-aad .treeview-menu > li > a {
    color: #86A8A1;
    padding-left: 18px;
    border-left: 3px solid transparent;
}

.skin-aad .sidebar-menu .treeview-menu .treeview-menu > li > a {
    padding-left: 30px;
}

.skin-aad .treeview-menu > li > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.skin-aad .treeview-menu > li.active > a {
    color: #fff;
    background: var(--aad-primary);
    border-left-color: var(--aad-mint);
}

.skin-aad .sidebar-menu .treeview-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

/* 菜单搜索框 */
.skin-aad .sidebar-form {
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .08);
    background-color: rgba(255, 255, 255, .06);
    margin: 10px;
}

.skin-aad .sidebar-form input[type="text"],
.skin-aad .sidebar-form .btn {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid transparent;
    height: 34px;
}

.skin-aad .sidebar-form input[type="text"] {
    color: #DCEAE7;
    border-radius: 4px 0 0 4px;
}

.skin-aad .sidebar-form input[type="text"]::-webkit-input-placeholder {
    color: #6E8F88;
}

.skin-aad .sidebar-form input[type="text"]:focus,
.skin-aad .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
    background-color: #fff;
    color: #333;
}

.skin-aad .sidebar-form .btn {
    color: var(--aad-sidebar-text);
    border-radius: 0 4px 4px 0;
}

/* 收起侧栏时 */
.skin-aad.sidebar-collapse .sidebar-menu li:hover > a,
.skin-aad.sidebar-collapse .sidebar-menu li.active > a,
.skin-aad.sidebar-collapse .sidebar-menu .treeview-menu li.active > a {
    color: #fff;
    background: var(--aad-primary);
}

.skin-aad.sidebar-collapse .sidebar-menu .treeview-menu li.treeview > a {
    background: transparent;
    border-left-color: transparent;
}

.skin-aad .content-header {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 767px) {
    .skin-aad .main-header .navbar {
        background: linear-gradient(135deg, var(--aad-sidebar-hover) 0%, var(--aad-sidebar) 100%);
    }

    .skin-aad .main-header .navbar .nav > li > a,
    .skin-aad .main-header .navbar .sidebar-toggle {
        color: #fff;
    }

    .skin-aad .main-header .navbar .nav > li > a:hover,
    .skin-aad .main-header .navbar .sidebar-toggle:hover {
        background: rgba(0, 0, 0, .12);
        color: #fff;
    }

    .skin-aad .main-header .logo {
        border-right: none;
    }

    .skin-aad.multiplenav .sidebar .mobilenav a.btn-app {
        background: rgba(255, 255, 255, .06);
        color: #fff;
    }

    .skin-aad.multiplenav .sidebar .mobilenav a.btn-app.active {
        background: var(--aad-primary);
        color: #fff;
    }
}

/* =========================================================================
 * 三、内容区（不加 .skin-aad 前缀，iframe 内页同样生效）
 * ========================================================================= */

/* ---- 按钮 ---- */
.btn {
    border-radius: 4px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-success,
.btn-primary {
    background-color: var(--aad-primary);
    border-color: var(--aad-primary);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success:active:focus,
.open > .dropdown-toggle.btn-success,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--aad-primary-dark);
    border-color: var(--aad-primary-dark);
    color: #fff;
}

.btn-success.disabled,
.btn-success[disabled],
.btn-primary.disabled,
.btn-primary[disabled] {
    background-color: #86B5AD;
    border-color: #86B5AD;
}

.btn-info {
    background-color: var(--aad-blue);
    border-color: var(--aad-blue);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
    background-color: #3A67C4;
    border-color: #3A67C4;
}

.btn-danger {
    background-color: var(--aad-red);
    border-color: var(--aad-red);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger {
    background-color: #C9453B;
    border-color: #C9453B;
}

.btn-warning {
    background-color: var(--aad-amber);
    border-color: var(--aad-amber);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
    background-color: #D08F26;
    border-color: #D08F26;
}

.btn-default {
    background-color: #fff;
    border-color: var(--aad-border);
    color: #5B6B68;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    background-color: var(--aad-tint);
    border-color: var(--aad-tint-line);
    color: var(--aad-primary);
}

.btn-link {
    color: var(--aad-primary);
}

.btn-link:hover {
    color: var(--aad-primary-dark);
}

/* ---- 表单 ---- */
.form-control {
    border-radius: 4px;
    border-color: #DEE5E4;
    box-shadow: none;
    color: var(--aad-text);
}

.form-control:focus {
    border-color: var(--aad-primary-light);
    box-shadow: 0 0 0 3px rgba(14, 122, 106, .10);
}

.input-group-addon {
    background-color: var(--aad-tint);
    border-color: #DEE5E4;
    color: var(--aad-primary);
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(228, 87, 76, .12);
}

a {
    color: var(--aad-primary);
}

a:hover,
a:focus {
    color: var(--aad-primary-dark);
}

/* ---- 表格 ---- */
.table > thead > tr > th {
    background: var(--aad-tint);
    border-bottom: 1px solid var(--aad-tint-line);
    color: #38504B;
    font-weight: 600;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-top-color: #F0F4F3;
    color: var(--aad-text);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: #F4FAF9;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FBFDFD;
}

.table > tbody > tr.selected > td,
.table > tbody > tr.success > td {
    background-color: #E4F4F0 !important;
}

/* bootstrap-table 的外框与工具条 */
.bootstrap-table .fixed-table-container {
    border-color: var(--aad-border);
    border-radius: 4px;
}

.fixed-table-container thead th .th-inner {
    color: #38504B;
}

.bootstrap-table .fixed-table-toolbar .columns .btn {
    border-color: var(--aad-border);
}

.fixed-table-pagination .pagination-detail,
.fixed-table-pagination .pagination-info {
    color: var(--aad-muted);
}

/* ---- 分页 ---- */
.pagination > li > a,
.pagination > li > span {
    color: var(--aad-primary);
    border-color: var(--aad-border);
}

.pagination > li > a:hover {
    background-color: var(--aad-tint);
    border-color: var(--aad-tint-line);
    color: var(--aad-primary-dark);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--aad-primary);
    border-color: var(--aad-primary);
    color: #fff;
}

/* ---- 面板 / 卡片 ---- */
.panel,
.box {
    border-radius: 6px;
    border-color: var(--aad-border);
    box-shadow: 0 1px 3px rgba(15, 42, 38, .06);
}

.panel-default > .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--aad-border);
    color: var(--aad-text);
    font-weight: 600;
}

.panel-primary,
.panel-success {
    border-color: var(--aad-tint-line);
}

.panel-primary > .panel-heading,
.panel-success > .panel-heading {
    background: var(--aad-primary);
    border-color: var(--aad-primary);
    color: #fff;
}

.box.box-primary,
.box.box-success {
    border-top-color: var(--aad-primary);
}

.box.box-info {
    border-top-color: var(--aad-blue);
}

.box.box-danger {
    border-top-color: var(--aad-red);
}

.box.box-warning {
    border-top-color: var(--aad-amber);
}

/* ---- 内容区选项卡 ---- */
.nav-tabs {
    border-bottom-color: var(--aad-border);
}

.nav-tabs > li > a {
    color: #6B7A77;
    border-radius: 4px 4px 0 0;
}

.nav-tabs > li > a:hover {
    background: var(--aad-tint);
    border-color: transparent;
    color: var(--aad-primary);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--aad-primary);
    border-color: var(--aad-border) var(--aad-border) transparent;
    border-top: 2px solid var(--aad-primary);
    font-weight: 500;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background-color: var(--aad-primary);
}

/* ---- 标签 / 徽章 ---- */
.label {
    border-radius: 3px;
    font-weight: 500;
    padding: .25em .6em;
}

.label-success {
    background-color: var(--aad-primary);
}

.label-info {
    background-color: var(--aad-blue);
}

.label-danger {
    background-color: var(--aad-red);
}

.label-warning {
    background-color: var(--aad-amber);
}

.label-default {
    background-color: #9AA8A5;
}

.badge {
    background-color: var(--aad-primary);
}

/* 列表里的状态点（FastAdmin 用 text-success 之类渲染） */
.text-success {
    color: var(--aad-primary) !important;
}

.text-info {
    color: var(--aad-blue) !important;
}

.text-danger {
    color: var(--aad-red) !important;
}

.text-warning {
    color: var(--aad-amber) !important;
}

/* ---- 提示条 ---- */
.alert-success {
    background-color: var(--aad-tint);
    border-color: var(--aad-tint-line);
    color: #1E5C51;
}

.alert-info {
    background-color: #EEF3FD;
    border-color: #D6E2F8;
    color: #2F4E96;
}

/* ---- 开关 / 复选 ---- */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--aad-primary);
}

.checkbox label::after,
.radio label::after {
    color: var(--aad-primary);
}

/* ---- 弹窗（layer）---- */
.layui-layer-title {
    background: var(--aad-tint) !important;
    color: #1E5C51 !important;
    border-bottom: 1px solid var(--aad-tint-line) !important;
    font-weight: 600;
}

.layui-layer-btn .layui-layer-btn0 {
    background-color: var(--aad-primary) !important;
    border-color: var(--aad-primary) !important;
}

.layui-layer-dialog .layui-layer-content .layui-layer-ico1,
.layui-layer-setwin a {
    color: var(--aad-muted);
}

/* ---- 下拉菜单 ---- */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--aad-tint);
    color: var(--aad-primary);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background-color: var(--aad-primary);
}

/* ---- selectpage / select2 之类的选中态 ---- */
.sp_container .sp_result_area .sp_over,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--aad-primary) !important;
}

/* ---- 滚动条（Chromium）---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #C4D6D2;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--aad-primary-light);
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================================
 * 四、仪表盘专用（配合 admin/view/dashboard/index.html）
 * ========================================================================= */
.aad-dash {
    padding: 4px 0 0;
}

.aad-hero {
    /* 用侧栏同一族的深青石板色，不再用饱和绿。
       原来「绿横幅 + 蓝灰侧栏」是两块大面积不同色系撞在一起，看着最别扭。
       现在深色面（logo/侧栏/横幅）统一一个色系，绿色只留给按钮与选中态做点缀。 */
    background: linear-gradient(135deg, var(--aad-sidebar-hover) 0%, var(--aad-sidebar) 100%);
    border-radius: 8px;
    padding: 22px 26px;
    color: #fff;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.aad-hero:after {
    content: "";
    position: absolute;
    right: -40px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.aad-hero h2 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 600;
}

.aad-hero p {
    margin: 0;
    opacity: .85;
    font-size: 13px;
}

.aad-hero .aad-hero-meta {
    margin-top: 14px;
    font-size: 12px;
    opacity: .8;
}

.aad-hero .aad-hero-meta span {
    margin-right: 18px;
    white-space: nowrap;
}

.aad-stat {
    background: #fff;
    border: 1px solid var(--aad-border);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 16px;
    position: relative;
    transition: box-shadow .18s ease, transform .18s ease;
}

.aad-stat:hover {
    box-shadow: 0 6px 18px rgba(15, 42, 38, .08);
    transform: translateY(-1px);
}

.aad-stat .aad-stat-label {
    color: var(--aad-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.aad-stat .aad-stat-value {
    font-size: 26px;
    font-weight: 600;
    color: var(--aad-text);
    line-height: 1.1;
}

.aad-stat .aad-stat-value small {
    font-size: 12px;
    font-weight: 400;
    color: var(--aad-muted);
    margin-left: 4px;
}

.aad-stat .aad-stat-icon {
    position: absolute;
    right: 16px;
    top: 14px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.aad-stat.is-blue .aad-stat-icon {
    background: #EEF3FD;
    color: var(--aad-blue);
}

.aad-stat.is-amber .aad-stat-icon {
    background: #FDF6E8;
    color: var(--aad-amber);
}

.aad-stat.is-red .aad-stat-icon {
    background: #FDEDEC;
    color: var(--aad-red);
}

.aad-stat .aad-stat-foot {
    margin-top: 10px;
    font-size: 12px;
    color: var(--aad-muted);
    border-top: 1px dashed var(--aad-border);
    padding-top: 8px;
}

.aad-card {
    background: #fff;
    border: 1px solid var(--aad-border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.aad-card > .aad-card-head {
    padding: 12px 18px;
    border-bottom: 1px solid var(--aad-border);
    font-weight: 600;
    color: var(--aad-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aad-card > .aad-card-head .fa {
    color: var(--aad-primary);
    margin-right: 6px;
}

.aad-card > .aad-card-head small {
    font-weight: 400;
    color: var(--aad-muted);
}

.aad-card > .aad-card-body {
    padding: 16px 18px;
}

.aad-card > .aad-card-body.is-flush {
    padding: 0;
}

.aad-card .table {
    margin-bottom: 0;
}

.aad-card .table > thead > tr > th {
    background: #FAFCFC;
    border-bottom-color: var(--aad-border);
    font-size: 12px;
}

.aad-empty {
    text-align: center;
    color: var(--aad-muted);
    padding: 28px 0;
    font-size: 13px;
}

/* 上线前检查清单 */
.aad-check {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aad-check li {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--aad-border);
    font-size: 13px;
}

.aad-check li:last-child {
    border-bottom: none;
}

.aad-check li .aad-check-icon {
    width: 20px;
    flex: 0 0 20px;
    margin-top: 1px;
}

.aad-check li .aad-check-body {
    flex: 1;
}

.aad-check li .aad-check-body b {
    font-weight: 600;
    color: var(--aad-text);
}

.aad-check li .aad-check-body span {
    display: block;
    color: var(--aad-muted);
    font-size: 12px;
    margin-top: 2px;
}

.aad-check .ok {
    color: var(--aad-primary);
}

.aad-check .warn {
    color: var(--aad-amber);
}

.aad-check .todo {
    color: var(--aad-muted);
}

/* 首页内容概览的小格子 */
.aad-mini {
    display: flex;
    flex-wrap: wrap;
    margin: -6px;
}

.aad-mini > div {
    flex: 1 1 33.33%;
    min-width: 90px;
    padding: 6px;
}

.aad-mini .aad-mini-box {
    background: #FAFCFC;
    border: 1px solid var(--aad-border);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.aad-mini .aad-mini-box b {
    display: block;
    font-size: 18px;
    color: var(--aad-primary);
    font-weight: 600;
}

.aad-mini .aad-mini-box span {
    font-size: 12px;
    color: var(--aad-muted);
}

/* =========================================================================
 * 五、动效与质感
 * -------------------------------------------------------------------------
 * 原则：
 *   · 只动 opacity / transform / box-shadow / background —— 这几个不触发重排，
 *     不会让 AdminLTE 的布局跳动；
 *   · 时长控制在 .12s ~ .3s，运营一天点几百次，动画长了就是负担；
 *   · 不碰 layui 弹窗自带的进场动画，避免两套动画打架；
 *   · 文件末尾统一响应 prefers-reduced-motion，系统关了动效就全部退化成静态。
 * ========================================================================= */

@keyframes aad-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aad-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes aad-sheen {
    from {
        transform: translateX(-120%) skewX(-18deg);
    }
    to {
        transform: translateX(220%) skewX(-18deg);
    }
}

/* ---- 内容区进场：淡入 + 轻微上移 ----
   iframe 内页 body 只有 inside-header inside-aside，所以这里不能加 .skin-aad 前缀

   注意：动效只加在卡片这类内部元素上，不要加在整页最外层的容器上。
   最外层容器带 transform 会变成新的包含块，配合内页那条 height:100%
   很容易踩到「滚不到底」的坑，排查起来很费劲。 */
.panel-intro {
    animation: aad-rise .28s cubic-bezier(.22, .61, .36, 1) both;
}

/* 仪表盘的卡片依次浮现，做出层次感 */
.aad-dash .aad-stat {
    animation: aad-rise .34s cubic-bezier(.22, .61, .36, 1) both;
}

.aad-dash .row > div:nth-child(1) .aad-stat {
    animation-delay: .02s;
}

.aad-dash .row > div:nth-child(2) .aad-stat {
    animation-delay: .07s;
}

.aad-dash .row > div:nth-child(3) .aad-stat {
    animation-delay: .12s;
}

.aad-dash .row > div:nth-child(4) .aad-stat {
    animation-delay: .17s;
}

.aad-dash .aad-card {
    animation: aad-rise .34s cubic-bezier(.22, .61, .36, 1) .12s both;
}

/* ---- 左侧菜单：hover 右移一点 + 渐变高亮 ---- */
.skin-aad .sidebar-menu > li > a,
.skin-aad .treeview-menu > li > a {
    transition: background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    padding-left .18s cubic-bezier(.22, .61, .36, 1),
    box-shadow .18s ease;
}

.skin-aad .sidebar-menu > li:hover > a {
    padding-left: 16px;
    background: linear-gradient(90deg, var(--aad-sidebar-hover) 0%, rgba(16, 80, 71, .25) 100%);
}

.skin-aad .treeview-menu > li > a:hover {
    padding-left: 22px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 选中项：主色渐变 + 一点外扩阴影，让"我在这儿"一眼看到 */
.skin-aad .sidebar-menu > li.active > a,
.skin-aad .treeview-menu > li.active > a {
    background: linear-gradient(90deg, var(--aad-primary) 0%, rgba(14, 122, 106, .45) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

/* 展开中的分组：左侧竖线 + 底色，和折叠状态区分开 */
.skin-aad .sidebar-menu li.treeview.active > a,
.skin-aad .sidebar-menu li.treeview.treeview-open > a {
    background: linear-gradient(90deg, var(--aad-sidebar-sub) 0%, rgba(10, 50, 45, .35) 100%);
}

/* 分组箭头：展开时转 90 度 */
.skin-aad .sidebar-menu .treeview > a .fa-angle-left {
    transition: transform .2s cubic-bezier(.22, .61, .36, 1);
}

.skin-aad .sidebar-menu .treeview.active > a .fa-angle-left,
.skin-aad .sidebar-menu .treeview.treeview-open > a .fa-angle-left,
.skin-aad .sidebar-menu .treeview.menu-open > a .fa-angle-left {
    transform: rotate(-90deg);
}

/* 菜单图标：hover 时轻微放大，点起来有反馈 */
.skin-aad .sidebar-menu > li > a > .fa,
.skin-aad .treeview-menu > li > a > .fa {
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

.skin-aad .sidebar-menu > li:hover > a > .fa,
.skin-aad .treeview-menu > li > a:hover > .fa {
    transform: scale(1.14);
}

/* 二级菜单展开时子项逐条淡入（AdminLTE 用 slideDown 改高度，这里只叠加透明度） */
.skin-aad .sidebar-menu .treeview-menu > li {
    animation: aad-fade .26s ease both;
}

/* logo：hover 时一道光扫过 */
.skin-aad .main-header .logo {
    position: relative;
    overflow: hidden;
}

.skin-aad .main-header .logo:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
}

.skin-aad .main-header .logo:hover:before {
    animation: aad-sheen .7s ease-out;
}

/* ---- 顶部标签页：切换时下划线由细到粗 ---- */
.skin-aad .main-header .nav-addtabs > li > a {
    box-shadow: inset 0 0 0 var(--aad-primary);
    transition: background-color .18s ease, color .18s ease, box-shadow .24s cubic-bezier(.22, .61, .36, 1);
}

.skin-aad .main-header .nav-addtabs > li.active > a {
    box-shadow: inset 0 -2px 0 var(--aad-primary);
}

/* ---- 按钮：hover 抬起、按下回弹 ---- */
.btn {
    transition: background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .09s ease;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-danger,
.btn-warning {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(0, 0, 0, .04) 100%);
}

.btn-primary:hover,
.btn-success:hover {
    box-shadow: 0 4px 14px rgba(14, 122, 106, .26);
}

.btn-info:hover {
    box-shadow: 0 4px 14px rgba(74, 125, 224, .26);
}

.btn-danger:hover {
    box-shadow: 0 4px 14px rgba(228, 87, 76, .26);
}

.btn-warning:hover {
    box-shadow: 0 4px 14px rgba(232, 163, 61, .26);
}

.btn-default:hover {
    box-shadow: 0 2px 8px rgba(15, 42, 38, .08);
}

/* 按下去有回弹，禁用态不给反馈 */
.btn:active:not(.disabled):not([disabled]) {
    transform: translateY(1px) scale(.985);
    box-shadow: none;
}

.btn.disabled,
.btn[disabled] {
    box-shadow: none;
}

/* 工具条按钮依次浮现 */
.toolbar > .btn,
.toolbar > .btn-group {
    animation: aad-rise .26s cubic-bezier(.22, .61, .36, 1) both;
}

.toolbar > *:nth-child(2) {
    animation-delay: .03s;
}

.toolbar > *:nth-child(3) {
    animation-delay: .06s;
}

.toolbar > *:nth-child(4) {
    animation-delay: .09s;
}

.toolbar > *:nth-child(5) {
    animation-delay: .12s;
}

/* ---- 表格：行 hover 过渡 + 左侧色条提示当前行 ---- */
.table > tbody > tr {
    transition: background-color .14s ease, box-shadow .14s ease;
}

/* 色条画在第一个单元格上：<tr> 在 border-collapse: collapse 下 box-shadow 不一定绘制 */
.table-hover > tbody > tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--aad-primary-light);
}

.table > tbody > tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--aad-primary);
}

/* 表头排序箭头 */
.fixed-table-container thead th .sortable {
    transition: background-color .15s ease;
}

/* 行内操作按钮：默认淡一点，hover 到那一行才完全显现，列表看着干净 */
.table > tbody > tr > td .btn-xs {
    opacity: .82;
    transition: opacity .15s ease, transform .09s ease, box-shadow .16s ease;
}

.table > tbody > tr:hover > td .btn-xs {
    opacity: 1;
}

/* ---- 表单：聚焦时输入框轻微上浮 ---- */
.form-control {
    transition: border-color .16s ease, box-shadow .16s ease;
}

.form-control:focus {
    box-shadow: 0 0 0 3px rgba(14, 122, 106, .12), 0 2px 6px rgba(15, 42, 38, .05);
}

/* 说明文字：比标签淡一档，别抢注意力 */
.help-block {
    font-size: 12px;
    color: var(--aad-muted);
    margin-bottom: 0;
    margin-top: 5px;
}

.help-block.text-danger {
    color: #B0563F !important;
}

/* ---- 弹窗：圆角 + 大一点的投影（进场动画交给 layui 自己） ---- */
.layui-layer {
    border-radius: 8px !important;
    box-shadow: 0 18px 50px rgba(15, 42, 38, .22) !important;
}

.layui-layer-title {
    border-radius: 8px 8px 0 0 !important;
}

.layui-layer-page .layui-layer-content {
    border-radius: 0 0 8px 8px;
}

/* ---- 卡片 hover：仪表盘之外的面板也给一点层次 ---- */
.aad-card {
    transition: box-shadow .2s ease, transform .2s ease;
}

.aad-card:hover {
    box-shadow: 0 6px 20px rgba(15, 42, 38, .07);
}

.aad-mini .aad-mini-box {
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}

.aad-mini .aad-mini-box:hover {
    background: var(--aad-tint);
    border-color: var(--aad-tint-line);
    transform: translateY(-2px);
}

/* 上线前检查清单：整行 hover 有底色，方便对着一条条看 */
.aad-check li {
    transition: background-color .14s ease;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
}

.aad-check li:hover {
    background: #F7FBFA;
}

/* ---- 系统偏好里关掉动效时，全部退化成静态 ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================================
 * 六、仪表盘：四列统计卡
 * -------------------------------------------------------------------------
 * 断点看的是 iframe 宽度，不是浏览器窗口宽度。1024 的窗口减掉 230 的侧栏，
 * iframe 只剩 790 左右，落在 sm 区间，所以模板里用的是 col-sm-3。
 * 一列大概 160px 可用宽度，卡片的内边距和图标要相应收窄，否则标题会折行。
 * ========================================================================= */

/* 同一行的卡片等高，底部那行说明贴着卡片底边对齐 */
.aad-stat-row {
    display: flex;
    flex-wrap: wrap;
}

.aad-stat-row > [class*="col-"] {
    display: flex;
}

.aad-stat-row > [class*="col-"] > .aad-stat {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.aad-stat-row > [class*="col-"] > .aad-stat > .aad-stat-foot {
    margin-top: auto;
}

.aad-stat {
    padding: 14px 15px;
}

.aad-stat .aad-stat-label {
    margin-bottom: 6px;
    /* 标题不折行，真的放不下就省略，别把卡片撑歪 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 34px;
}

.aad-stat .aad-stat-value {
    font-size: 24px;
}

.aad-stat .aad-stat-icon {
    right: 12px;
    top: 12px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 9px;
    font-size: 14px;
}

.aad-stat .aad-stat-foot {
    font-size: 11px;
    line-height: 1.6;
    margin-top: 8px;
    padding-top: 7px;
}

/* 屏幕再宽一点就把内边距还回去 */
@media (min-width: 1200px) {
    .aad-stat {
        padding: 16px 18px;
    }

    .aad-stat .aad-stat-value {
        font-size: 26px;
    }

    .aad-stat .aad-stat-foot {
        font-size: 12px;
    }
}

/* 横幅里的上线前提醒：原来是一整块「上线前检查」卡片，占地方又长，
   收成一行小字。点进去就是系统配置，联调开关在那里关。 */
.aad-hero .aad-hero-meta .aad-hero-warn {
    display: inline-block;
    background: rgba(255, 255, 255, .16);
    border-radius: 11px;
    padding: 1px 10px;
    margin-right: 0;
}

.aad-hero .aad-hero-meta .aad-hero-warn a {
    color: #FFE6B8;
    transition: color .16s ease;
}

.aad-hero .aad-hero-meta .aad-hero-warn a:hover {
    color: #fff;
    text-decoration: none;
}

/* 小程序首页内容的小格子挪到了趋势图右边，一行放两个更耐看 */
.aad-mini > div {
    flex: 1 1 50%;
}

/* =========================================================================
 * 七、iframe 内页滚不到底的修复
 * -------------------------------------------------------------------------
 * backend.css 里有一条：
 *
 *     html, body { height: 100%; }
 *
 * 这条对**外层框架页**是必须的 —— 标签页里的 iframe 写的是 height="100%"，
 * 得靠这条把 100% 一层层撑下去。
 *
 * 但 backend.css 在**每个 iframe 内页**也会加载，于是内页的 body 被钉死成
 * iframe 那么高。内容一旦比 iframe 高（仪表盘就是），文档高度不跟着长，
 * 最后一段就滚不到 —— 这就是「下面有一部分，没办法下拉」。
 * 这是 height:100% 加在 html+body 上的经典坑，标准解法是换成 min-height。
 *
 * 只改内页（body 上有 inside-header inside-aside），弹窗（is-dialog）不动，
 * 外层框架页的 body 没有这些类，不受影响。
 * skin-aad.css 在 backend.css 之后加载，所以不用去改框架自己的文件。
 * ========================================================================= */
/* 真正的修复不在这个文件里 —— 见 application/admin/view/layout/default.html 里的内联 <style>。
 *
 * 原因：要改的是 `html` 上的 overflow，而 `html` 上没有任何能区分「外层框架页」和
 * 「iframe 内页」的类，在这个共用的皮肤文件里写不出精确的选择器。
 * layout/default.html 只有内页会用，所以那里才是唯一能精确命中的地方。
 *
 * 那边的方案：html{overflow:hidden} 断掉 overflow 向视口的传播，
 *             body{height:100%;overflow-y:auto} 让 body 自己成为滚动容器。
 * 这样滚动行为是确定的，不依赖各引擎对「body overflow 传播」的实现差异。
 *
 * 这里只留一条与之配套的：内页里的滚动条按主题配色（下面第八节的滚动条样式已覆盖）。 */
body.inside-header.inside-aside:not(.is-dialog) {
    /* 兜底：万一内联样式被清掉了，至少 body 还能跟着内容长高，不会整段截断 */
    min-height: 100%;
}

/* 仪表盘顶部不额外留白（内页 .content 的 padding 已经给了），底部交给 body::after 占位 */
.aad-dash {
    padding: 0;
}

/* Bootstrap 的 .row 有 :before/:after 清浮动伪元素，
   给 .row 加 display:flex 之后它们会变成 flex item 挤进第一行，
   有可能把第 4 张卡挤到下一行去。框架自己的 .row-flex 也是这么处理的。 */
.aad-stat-row.row:before,
.aad-stat-row.row:after {
    display: flex;
}

/* =========================================================================
 * 八、全局组件主题
 * -------------------------------------------------------------------------
 * 后台用的都是 Bootstrap 3 生态的老组件，默认样子偏旧（灰色块状选项卡、
 * 系统原生的单选复选、方角下拉）。这一节把它们统一到一套设计语言上：
 *
 *   控件高度 34px（小号 30px）· 圆角 6px · 边框 #DEE5E4
 *   聚焦：主色描边 + 3px 主色淡光圈
 *   悬浮：主色淡底 var(--aad-tint)
 *   浮层：8px 圆角 + 大投影，选中项主色淡底
 *
 * 全部不加 .skin-aad 前缀 —— iframe 内页的 body 上没有这个类，
 * 表单和表格都在内页里，加了就不生效。
 * ========================================================================= */

:root {
    --aad-ctl-h: 34px;
    --aad-ctl-h-sm: 30px;
    --aad-radius: 6px;
    --aad-radius-lg: 8px;
    --aad-line: #DEE5E4;
    --aad-ring: 0 0 0 3px rgba(14, 122, 106, .13);
    --aad-pop-shadow: 0 8px 28px rgba(15, 42, 38, .14);
}

/* -------------------------------------------------------------------------
 * 8.1 控件基线：高度、圆角、聚焦态
 * ---------------------------------------------------------------------- */
.form-control {
    height: var(--aad-ctl-h);
    border-radius: var(--aad-radius);
    border-color: var(--aad-line);
    padding: 6px 11px;
    font-size: 13px;
}

.form-control:focus {
    border-color: var(--aad-primary-light);
    box-shadow: var(--aad-ring);
}

textarea.form-control {
    height: auto;
    padding: 9px 11px;
    line-height: 1.65;
}

.input-sm,
.form-control.input-sm {
    height: var(--aad-ctl-h-sm);
    border-radius: var(--aad-radius);
    font-size: 12px;
}

.input-group-addon {
    border-radius: var(--aad-radius);
    border-color: var(--aad-line);
    padding: 6px 11px;
}

.input-group .form-control:first-child,
.input-group-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .form-control:last-child,
.input-group-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 按钮尺寸对齐输入框，避免一行里高低不齐 */
.btn {
    height: var(--aad-ctl-h);
    padding: 6px 14px;
    border-radius: var(--aad-radius);
    font-size: 13px;
    line-height: 1.5;
}

.btn-sm,
.btn-group-sm > .btn {
    height: var(--aad-ctl-h-sm);
    padding: 4px 11px;
    font-size: 12px;
    border-radius: var(--aad-radius);
}

.btn-xs,
.btn-group-xs > .btn {
    height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 5px;
}

/* 表单标签：col-sm-2 只有 16.7%，中文长标签（比如「报案定位误差(米)」）会挤成两行还错位 */
@media (min-width: 768px) {
    .form-horizontal .form-group > .control-label.col-sm-2 {
        width: 23%;
        padding-right: 14px;
    }

    .form-horizontal .form-group > .col-sm-8 {
        width: 71%;
    }
}

.form-horizontal .control-label {
    padding-top: 8px;
    line-height: 1.5;
    color: #5B6B68;
    font-weight: 500;
    word-break: break-word;
}

.form-horizontal .form-group {
    margin-bottom: 16px;
}

.form-control-static {
    padding-top: 7px;
    min-height: var(--aad-ctl-h);
}

/* -------------------------------------------------------------------------
 * 8.2 单选框与复选框：自绘，去掉系统原生外观
 *     只改外观，不动 position / margin —— Bootstrap 3 把 .radio / .checkbox
 *     里的 input 设成了 position:absolute; margin-left:-20px，改了会错位。
 *     勾号用内联 SVG 画，不用伪元素，省掉定位上下文的麻烦。
 * ---------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid #C4D2CF;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: -2px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

input[type="checkbox"] {
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: var(--aad-primary-light);
}

input[type="checkbox"]:checked {
    background-color: var(--aad-primary);
    border-color: var(--aad-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
    background-size: 11px 11px;
}

/* 主色底 + 内嵌白环 = 中间一个主色圆点，经典单选样式 */
input[type="radio"]:checked {
    background-color: var(--aad-primary);
    border-color: var(--aad-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    box-shadow: var(--aad-ring);
}

input[type="radio"]:checked:focus {
    box-shadow: inset 0 0 0 3px #fff, var(--aad-ring);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: #F2F5F4;
    border-color: #E1E8E6;
    cursor: not-allowed;
}

/* 一组单选/多选：横向排开，别一个一行也别贴太紧 */
.form-horizontal .radio,
.form-horizontal .checkbox {
    margin-top: 5px;
    margin-bottom: 0;
    padding-top: 0;
}

.form-horizontal .radio > label,
.form-horizontal .checkbox > label {
    display: inline-block;
    margin-right: 18px;
    margin-bottom: 6px;
    font-weight: 400;
    color: var(--aad-text);
    cursor: pointer;
}

/* 表格里的勾选列 */
.fixed-table-container .bs-checkbox input[type="checkbox"] {
    vertical-align: middle;
    margin: 0;
}

/* -------------------------------------------------------------------------
 * 8.3 下拉框（bootstrap-select）
 * ---------------------------------------------------------------------- */
.bootstrap-select > .dropdown-toggle {
    height: var(--aad-ctl-h);
    border-radius: var(--aad-radius) !important;
    border: 1px solid var(--aad-line);
    background: #fff;
    color: var(--aad-text);
    padding: 6px 26px 6px 11px;
    font-size: 13px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.bootstrap-select > .dropdown-toggle:hover {
    border-color: var(--aad-primary-light);
    background: #fff;
    color: var(--aad-text);
}

.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.open > .dropdown-toggle {
    border-color: var(--aad-primary-light) !important;
    box-shadow: var(--aad-ring) !important;
    outline: none !important;
    background: #fff;
    color: var(--aad-text);
}

.bootstrap-select > .dropdown-toggle .filter-option {
    line-height: 20px;
}

.bootstrap-select > .dropdown-toggle .bs-caret .caret {
    border-top-color: var(--aad-muted);
    transition: transform .18s ease;
}

.bootstrap-select.open > .dropdown-toggle .bs-caret .caret {
    transform: rotate(180deg);
}

.bootstrap-select .dropdown-menu {
    border-radius: var(--aad-radius-lg);
    border: 1px solid var(--aad-tint-line);
    box-shadow: var(--aad-pop-shadow);
    padding: 5px;
    margin-top: 4px;
}

.bootstrap-select .dropdown-menu li > a {
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--aad-text);
}

.bootstrap-select .dropdown-menu li > a:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.bootstrap-select .dropdown-menu li.selected > a {
    background: var(--aad-tint);
    color: var(--aad-primary);
    font-weight: 500;
}

.bootstrap-select .dropdown-menu li.selected > a .check-mark {
    color: var(--aad-primary);
}

.bootstrap-select .bs-searchbox .form-control {
    height: var(--aad-ctl-h-sm);
}

/* 原生 select（没挂 selectpicker 的地方）也别是方角 */
select.form-control {
    border-radius: var(--aad-radius);
    padding-right: 26px;
}

/* -------------------------------------------------------------------------
 * 8.4 关联选择（selectpage）—— 订单、车辆、司机这些外键用的就是它
 * ---------------------------------------------------------------------- */
.sp_container {
    border-radius: var(--aad-radius);
}

.sp_container .sp_element_box,
.sp_container.sp_container_open .sp_element_box {
    border-radius: var(--aad-radius);
    border-color: var(--aad-line);
    min-height: var(--aad-ctl-h);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sp_container .sp_element_box input.sp_input {
    height: 30px;
    font-size: 13px;
    color: var(--aad-text);
}

.sp_container.sp_container_open .sp_element_box,
.sp_container .sp_element_box:focus-within {
    border-color: var(--aad-primary-light);
    box-shadow: var(--aad-ring);
}

.sp_container .sp_result_area {
    border-radius: var(--aad-radius-lg);
    border: 1px solid var(--aad-tint-line);
    box-shadow: var(--aad-pop-shadow);
    overflow: hidden;
    margin-top: 4px;
}

.sp_container .sp_result_area li {
    padding: 7px 11px;
    font-size: 13px;
}

.sp_container .sp_result_area .sp_over,
.sp_container .sp_result_area .sp_selected {
    background-color: var(--aad-tint) !important;
    color: var(--aad-primary) !important;
}

.sp_container .sp_navi {
    background: #FAFCFC;
    border-top: 1px solid var(--aad-border);
}

.sp_container .sp_navi a {
    color: var(--aad-primary);
}

/* 已选中的标签（多选模式） */
.sp_container .sp_element_box li.selected_tag {
    background: var(--aad-tint);
    border-color: var(--aad-tint-line);
    color: var(--aad-primary);
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * 8.5 日期与时间（datetimepicker 单点 / daterangepicker 区间）
 * ---------------------------------------------------------------------- */
.bootstrap-datetimepicker-widget.dropdown-menu,
.daterangepicker.dropdown-menu,
.daterangepicker {
    border-radius: var(--aad-radius-lg);
    border: 1px solid var(--aad-tint-line);
    box-shadow: var(--aad-pop-shadow);
    padding: 8px;
    font-size: 13px;
}

/* 头部的「上一月 / 年月 / 下一月」 */
.bootstrap-datetimepicker-widget table th,
.daterangepicker .calendar-table th {
    color: #5B6B68;
    font-weight: 600;
    border-radius: 5px;
}

.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover,
.bootstrap-datetimepicker-widget table th.picker-switch:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.bootstrap-datetimepicker-widget table th.dow,
.daterangepicker .calendar-table thead tr:last-child th {
    color: var(--aad-muted);
    font-weight: 500;
}

/* 日期格子 */
.bootstrap-datetimepicker-widget table td.day,
.daterangepicker td.available {
    border-radius: 5px;
    transition: background-color .13s ease, color .13s ease;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.daterangepicker td.available:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--aad-primary);
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active,
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--aad-primary) !important;
    color: #fff !important;
    text-shadow: none;
}

/* 区间中间的日子用淡底连成一片 */
.daterangepicker td.in-range {
    background: var(--aad-tint);
    color: #1E5C51;
    border-radius: 0;
}

.daterangepicker td.active.start-date {
    border-radius: 5px 0 0 5px;
}

.daterangepicker td.active.end-date {
    border-radius: 0 5px 5px 0;
}

.daterangepicker td.active.start-date.end-date {
    border-radius: 5px;
}

.bootstrap-datetimepicker-widget table td.disabled,
.daterangepicker td.off {
    color: #C6D2CF;
}

/* 左边的快捷区间（今天 / 昨天 / 最近 7 天…） */
.daterangepicker .ranges li {
    border-radius: 5px;
    border: none;
    color: var(--aad-text);
    padding: 7px 12px;
    margin-bottom: 2px;
    transition: background-color .13s ease, color .13s ease;
}

.daterangepicker .ranges li:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.daterangepicker .ranges li.active {
    background: var(--aad-primary);
    color: #fff;
}

.daterangepicker .range_inputs .btn,
.daterangepicker .applyBtn {
    height: var(--aad-ctl-h-sm);
}

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    border-radius: 5px;
    border: 1px solid var(--aad-line);
    height: 28px;
}

/* 时间选择那一屏 */
.bootstrap-datetimepicker-widget .timepicker .btn,
.bootstrap-datetimepicker-widget .timepicker span.timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker span.timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker span.timepicker-second {
    border-radius: 5px;
}

.bootstrap-datetimepicker-widget .timepicker .btn:hover,
.bootstrap-datetimepicker-widget .timepicker span:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

.bootstrap-datetimepicker-widget .picker-switch td span:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

/* -------------------------------------------------------------------------
 * 8.6 列表页顶部的状态筛选：做成一排「筛选标签(chip)」
 *     框架默认是一排灰色方块 tab，很旧。这里改成每个状态一颗圆角标签，
 *     选中的填主色，其余描边白底。这是最常规、最不会「显得奇怪」的筛选样式。
 *     不再用 flex/::before/:has 那套拼装，避免各浏览器下表现不一致。
 * ---------------------------------------------------------------------- */
.panel-intro > .panel-heading {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--aad-border);
    line-height: 1;
}

.panel-intro > .panel-heading .nav-tabs {
    border-bottom: none;
    margin: 0;
}

/* li 用行内块，一排横向排列，不浮动（浮动会撑不出高度、显得错位） */
.panel-intro > .panel-heading .nav-tabs > li {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 0 0;
}

/* 每颗筛选标签：圆角、描边、白底 */
.panel-intro > .panel-heading .nav-tabs > li > a {
    margin: 0;
    border: 1px solid var(--aad-border) !important;
    background: #fff !important;
    color: #6B7A77 !important;
    border-radius: 14px;
    padding: 4px 15px;
    font-size: 13px;
    line-height: 18px;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.panel-intro > .panel-heading .nav-tabs > li > a:hover,
.panel-intro > .panel-heading .nav-tabs > li > a:focus {
    border-color: var(--aad-primary-light) !important;
    color: var(--aad-primary) !important;
    background: #fff !important;
}

/* 选中的那颗：填主色 */
.panel-intro > .panel-heading .nav-tabs > li.active > a,
.panel-intro > .panel-heading .nav-tabs > li.active > a:hover,
.panel-intro > .panel-heading .nav-tabs > li.active > a:focus {
    background: var(--aad-primary) !important;
    border-color: var(--aad-primary) !important;
    color: #fff !important;
    font-weight: 500;
}

/* 内容区里普通的 nav-tabs（不在 panel-heading 里的）改成下划线式 */
.content .nav-tabs {
    border-bottom: 1px solid var(--aad-border);
}

.content .nav-tabs > li > a {
    border: none;
    background: transparent;
    color: #6B7A77;
    padding: 8px 16px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .16s ease, border-color .16s ease;
}

.content .nav-tabs > li > a:hover {
    background: transparent;
    color: var(--aad-primary);
}

.content .nav-tabs > li.active > a,
.content .nav-tabs > li.active > a:hover,
.content .nav-tabs > li.active > a:focus {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--aad-primary);
    color: var(--aad-primary);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 8.7 表格工具条与行内操作
 *     主操作（添加）实心，其余描边，删除保留红色语义 —— 一排全是彩色按钮太吵。
 * ---------------------------------------------------------------------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.toolbar > .btn,
.toolbar > .btn-group {
    margin: 0 !important;
}

.toolbar > .btn-add {
    background: linear-gradient(180deg, var(--aad-primary-light) 0%, var(--aad-primary) 100%);
    border-color: var(--aad-primary);
    color: #fff;
}

.toolbar > .btn-add:hover {
    background: linear-gradient(180deg, var(--aad-primary) 0%, var(--aad-primary-dark) 100%);
    border-color: var(--aad-primary-dark);
    box-shadow: 0 4px 14px rgba(14, 122, 106, .26);
}

/* 刷新 / 编辑 / 更多 / 回收站：白底描边，鼠标上去才染主色 */
.toolbar > .btn-refresh,
.toolbar > .btn-edit,
.toolbar > .btn-more,
.toolbar > .btn-import,
.toolbar > .btn-recyclebin,
.toolbar > .btn-restoreall,
.toolbar > .btn-multi,
.toolbar > .btn-group > .btn-more {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--aad-line) !important;
    color: #5B6B68 !important;
    box-shadow: none;
}

.toolbar > .btn-refresh:hover,
.toolbar > .btn-edit:hover,
.toolbar > .btn-more:hover,
.toolbar > .btn-import:hover,
.toolbar > .btn-recyclebin:hover,
.toolbar > .btn-restoreall:hover,
.toolbar > .btn-multi:hover,
.toolbar > .btn-group > .btn-more:hover {
    background: var(--aad-tint) !important;
    border-color: var(--aad-tint-line) !important;
    color: var(--aad-primary) !important;
}

.toolbar > .btn-del,
.toolbar > .btn-destroyall {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #F0CBC7 !important;
    color: var(--aad-red) !important;
}

.toolbar > .btn-del:hover,
.toolbar > .btn-destroyall:hover {
    background: var(--aad-red) !important;
    border-color: var(--aad-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(228, 87, 76, .24);
}

/* 禁用态（没选中行时）不要看着像可点 */
.toolbar > .btn.disabled,
.toolbar > .btn[disabled] {
    opacity: .5;
    box-shadow: none !important;
}

/* 快速搜索框 + 右上角那几个图标按钮
   注意：这一条工具条是 bootstrap-table 自己拼的，靠 float 排版
   （.bs-bars 左浮动，.columns / .search 右浮动，右侧那组的视觉顺序是浮动反转出来的）。
   改成 flex 会把右侧那几个的顺序翻过来，所以这里只调样式，不动排版方式。 */
.fixed-table-toolbar .search input {
    height: var(--aad-ctl-h);
    border-radius: var(--aad-radius);
    border-color: var(--aad-line);
    min-width: 190px;
    font-size: 13px;
}

.fixed-table-toolbar .search input:focus {
    border-color: var(--aad-primary-light);
    box-shadow: var(--aad-ring);
}

.fixed-table-toolbar .btn-default,
.fixed-table-toolbar .btn-group > .btn {
    height: var(--aad-ctl-h);
    background: #fff;
    border: 1px solid var(--aad-line);
    color: #5B6B68;
    border-radius: var(--aad-radius);
}

.fixed-table-toolbar .btn-default:hover,
.fixed-table-toolbar .btn-group > .btn:hover {
    background: var(--aad-tint);
    border-color: var(--aad-tint-line);
    color: var(--aad-primary);
}

.fixed-table-toolbar .dropdown-menu {
    border-radius: var(--aad-radius-lg);
    border: 1px solid var(--aad-tint-line);
    box-shadow: var(--aad-pop-shadow);
    padding: 6px;
}

.fixed-table-toolbar .dropdown-menu > li > a,
.fixed-table-toolbar .dropdown-menu label {
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}

.fixed-table-toolbar .dropdown-menu > li > label:hover,
.fixed-table-toolbar .dropdown-menu > li > a:hover {
    background: var(--aad-tint);
    color: var(--aad-primary);
}

/* 行内的编辑 / 删除按钮：默认描边，hover 才上色 */
.fixed-table-container .btn-editone,
.fixed-table-container .btn-delone,
.fixed-table-container .btn-restoreone,
.fixed-table-container .btn-destroyone,
.fixed-table-container .btn-dragsort {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--aad-line) !important;
    color: #6B7A77 !important;
    box-shadow: none !important;
    margin: 0 2px;
}

.fixed-table-container .btn-editone:hover,
.fixed-table-container .btn-restoreone:hover,
.fixed-table-container .btn-dragsort:hover {
    background: var(--aad-primary) !important;
    border-color: var(--aad-primary) !important;
    color: #fff !important;
}

.fixed-table-container .btn-delone:hover,
.fixed-table-container .btn-destroyone:hover {
    background: var(--aad-red) !important;
    border-color: var(--aad-red) !important;
    color: #fff !important;
}

/* 分页条 */
.fixed-table-pagination .pagination > li > a {
    border-radius: var(--aad-radius) !important;
    margin: 0 2px;
    min-width: 32px;
    height: 32px;
    line-height: 20px;
}

.fixed-table-pagination .pagination-detail {
    font-size: 13px;
}

.fixed-table-pagination .page-list .btn {
    height: var(--aad-ctl-h-sm);
    border-radius: var(--aad-radius);
}

/* -------------------------------------------------------------------------
 * 8.8 通用搜索面板
 * ---------------------------------------------------------------------- */
.commonsearch-table {
    background: #FAFCFC;
    border: 1px solid var(--aad-border);
    border-radius: var(--aad-radius-lg);
    padding: 14px 14px 4px;
    margin-bottom: 12px;
}

.commonsearch-table .form-group {
    margin-bottom: 10px;
}

.commonsearch-table label {
    font-size: 12px;
    color: var(--aad-muted);
    font-weight: 500;
}

.commonsearch-table .operate {
    border-radius: var(--aad-radius);
    border-color: var(--aad-line);
    height: var(--aad-ctl-h);
    font-size: 12px;
}

/* -------------------------------------------------------------------------
 * 8.9 弹窗、提示、表单校验
 * ---------------------------------------------------------------------- */
.layui-layer-title {
    height: 46px;
    line-height: 46px;
    padding-left: 18px;
    font-size: 14px;
}

.layui-layer-page .layui-layer-content {
    padding: 4px 0;
}

.layui-layer-btn {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--aad-border);
}

.layui-layer-btn a {
    height: var(--aad-ctl-h-sm);
    line-height: 20px;
    border-radius: var(--aad-radius);
    padding: 4px 16px;
}

.layui-layer-setwin a {
    transition: opacity .15s ease;
}

.layui-layer-setwin a:hover {
    opacity: .7;
}

/* 弹窗里表单底部的确定按钮 */
.layer-footer {
    border-top: 1px solid var(--aad-border);
    padding-top: 14px;
    margin-top: 4px;
}

/* toastr 提示 */
#toast-container > div {
    border-radius: var(--aad-radius-lg);
    box-shadow: var(--aad-pop-shadow) !important;
    opacity: 1;
    font-size: 13px;
    padding: 14px 16px 14px 48px;
}

#toast-container > .toast-success {
    background-color: var(--aad-primary);
}

#toast-container > .toast-error {
    background-color: var(--aad-red);
}

#toast-container > .toast-info {
    background-color: var(--aad-blue);
}

#toast-container > .toast-warning {
    background-color: var(--aad-amber);
}

/* nice-validator 的校验提示 */
.n-invalid.form-control,
.n-invalid.form-control:focus {
    border-color: var(--aad-red) !important;
    box-shadow: 0 0 0 3px rgba(228, 87, 76, .12) !important;
}

.n-valid.form-control {
    border-color: var(--aad-primary-light) !important;
}

.msg-wrap .n-error {
    color: var(--aad-red);
    font-size: 12px;
}

.msg-wrap .n-ok {
    color: var(--aad-primary);
    font-size: 12px;
}

/* -------------------------------------------------------------------------
 * 8.10 左侧菜单升级：药丸式选中态、留白、层级更清楚
 * ---------------------------------------------------------------------- */
.skin-aad .sidebar {
    padding-bottom: 16px;
}

/* 管理员那块做成一张卡 */
.skin-aad .user-panel {
    padding: 14px 14px 12px;
    margin: 0 10px 6px;
    border-radius: var(--aad-radius-lg);
    background: rgba(255, 255, 255, .05);
}

.skin-aad .user-panel > .image > a > img {
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .14);
}

.skin-aad .user-panel > .info {
    padding: 4px 5px 5px 12px;
    font-size: 13px;
    font-weight: 500;
}

.skin-aad .user-panel > .info > p {
    margin-bottom: 2px;
}

.skin-aad .user-panel > .info > a {
    font-size: 11px;
    color: var(--aad-mint);
}

.skin-aad .sidebar-form {
    margin: 4px 10px 10px;
    border-radius: var(--aad-radius);
}

/* 一级菜单：不再用整条通栏底色，改成留白 + 圆角药丸 */
.skin-aad:not(.sidebar-collapse) .sidebar-menu > li > a,
.skin-aad:not(.sidebar-collapse) .treeview-menu > li > a {
    margin: 1px 10px;
    border-radius: var(--aad-radius);
    border-left: none;
    padding-left: 12px;
    font-size: 13.5px;
}

.skin-aad:not(.sidebar-collapse) .sidebar-menu > li:hover > a {
    padding-left: 15px;
    background: rgba(255, 255, 255, .07);
}

.skin-aad:not(.sidebar-collapse) .sidebar-menu > li.active > a,
.skin-aad:not(.sidebar-collapse) .treeview-menu > li.active > a {
    background: linear-gradient(135deg, var(--aad-primary-light) 0%, var(--aad-primary) 100%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    border-left: none;
    color: #fff;
}

/* 展开中的分组：只加一点底色，别和选中项抢 */
.skin-aad:not(.sidebar-collapse) .sidebar-menu li.treeview.active > a,
.skin-aad:not(.sidebar-collapse) .sidebar-menu li.treeview.treeview-open > a {
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    color: #fff;
}

/* 二级菜单：左边一条竖导轨，层级一眼看出来 */
.skin-aad:not(.sidebar-collapse) .sidebar-menu > li > .treeview-menu {
    background: transparent;
    position: relative;
    padding: 2px 0 4px;
    margin-left: 22px;
}

.skin-aad:not(.sidebar-collapse) .sidebar-menu > li > .treeview-menu:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 6px;
    width: 1px;
    background: rgba(255, 255, 255, .1);
}

.skin-aad:not(.sidebar-collapse) .treeview-menu > li > a {
    margin: 1px 10px 1px 0;
    padding-left: 14px;
    font-size: 13px;
}

.skin-aad:not(.sidebar-collapse) .treeview-menu > li > a:hover {
    padding-left: 17px;
    background: rgba(255, 255, 255, .06);
}

/* 菜单图标固定宽度，文字左边缘对齐 */
.skin-aad .sidebar-menu > li > a > .fa {
    width: 18px;
    margin-right: 8px;
    text-align: center;
}

.skin-aad .treeview-menu > li > a > .fa {
    width: 14px;
    margin-right: 6px;
    font-size: 12px;
    text-align: center;
}

/* 徽章（hot / new）小一点，别抢视线 */
.skin-aad .sidebar-menu .label,
.skin-aad .sidebar-menu small.label {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 9px;
    font-weight: 500;
}

/* 菜单搜索结果 */
.skin-aad .menuresult .list-group-item {
    background: var(--aad-sidebar-sub);
    border-color: rgba(255, 255, 255, .06);
    color: var(--aad-sidebar-text);
}

.skin-aad .menuresult .list-group-item:hover {
    background: var(--aad-primary);
    color: #fff;
}

/* =========================================================================
 * 九、等高两栏 与 个人资料页
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 9.1 等高两栏
 *     仪表盘下半部分是 8:4 两栏，左边（趋势图 / 最近订单）比右边高，
 *     右边卡片下面会空出一大块，看着像「内容没显示全」。
 *     用 flex 把两栏拉平，卡片主体自动撑满。
 * ---------------------------------------------------------------------- */
.aad-flex-row {
    display: flex;
    flex-wrap: wrap;
}

/* Bootstrap 的清浮动伪元素在 flex 容器里会变成 flex item 挤进第一行，压掉 */
.aad-flex-row.row:before,
.aad-flex-row.row:after {
    display: flex;
}

.aad-flex-row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}

.aad-flex-row > [class*="col-"] > .aad-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.aad-flex-row > [class*="col-"] > .aad-card > .aad-card-body {
    flex: 1 1 auto;
}

/* 首页内容那六个小格子跟着卡片一起长高，不留空档 */
.aad-flex-row .aad-card-body > .aad-mini {
    height: 100%;
    align-content: stretch;
}

.aad-mini > div {
    display: flex;
}

.aad-mini .aad-mini-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 表格类卡片被拉高之后，空白落在表格下面，边缘是齐的 */
.aad-flex-row .aad-card-body.is-flush {
    display: flex;
    flex-direction: column;
}

.aad-flex-row .aad-card-body.is-flush > .table {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    /* 窄屏一栏一个，不需要等高 */
    .aad-flex-row {
        display: block;
    }

    .aad-flex-row > [class*="col-"] {
        display: block;
    }
}

/* -------------------------------------------------------------------------
 * 9.2 个人资料页（general/profile）
 *     原来是 AdminLTE 的 box + 一列灰掉的 disabled 输入框，看着像坏了。
 *     现在左边一张卡：主色渐变头部放头像和姓名，只读信息用文本列出，
 *     真正能改的三项（昵称 / 邮箱 / 新密码）才是输入框。
 * ---------------------------------------------------------------------- */
.aad-profile .aad-card {
    overflow: hidden;
}

.aad-profile-hero {
    background: linear-gradient(135deg, var(--aad-primary) 0%, var(--aad-primary-darker) 100%);
    padding: 22px 20px 20px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.aad-profile-hero:after {
    content: "";
    position: absolute;
    right: -50px;
    top: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}

.aad-profile-hero h3 {
    margin: 12px 0 2px;
    font-size: 17px;
    font-weight: 600;
    position: relative;
}

.aad-profile-hero p {
    margin: 0;
    font-size: 12px;
    opacity: .82;
    position: relative;
}

/* 头像：白环 + 悬浮时盖一层主色遮罩提示可换 */
.aad-profile .profile-avatar-container {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto;
}

.aad-profile .profile-user-img {
    width: 86px;
    height: 86px;
    border: 3px solid rgba(255, 255, 255, .28);
    background: #fff;
    object-fit: cover;
}

.aad-profile .profile-avatar-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    background: rgba(8, 76, 67, .72);
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.aad-profile .profile-avatar-container:hover .profile-avatar-text {
    opacity: 1;
}

.aad-profile .profile-avatar-container button.faupload {
    position: absolute;
    inset: 0;
    width: 86px;
    height: 86px;
    border: none;
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

/* 只读信息 */
.aad-profile-meta {
    margin: 0 0 4px;
    padding: 0 0 12px;
    border-bottom: 1px dashed var(--aad-border);
}

.aad-profile-meta dt {
    font-size: 12px;
    color: var(--aad-muted);
    font-weight: 500;
    margin-top: 10px;
}

.aad-profile-meta dt:first-child {
    margin-top: 0;
}

.aad-profile-meta dd {
    margin: 2px 0 0;
    color: var(--aad-text);
    font-size: 13px;
    word-break: break-all;
}

.aad-profile-meta .aad-lock {
    display: block;
    color: var(--aad-muted);
    font-size: 11px;
    margin-top: 2px;
}

.aad-profile-meta .aad-lock .fa {
    margin-right: 3px;
}

/* 分段小标题 */
.aad-profile-section {
    margin: 16px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aad-text);
    padding-left: 9px;
    border-left: 3px solid var(--aad-primary);
    line-height: 1.4;
}

.aad-profile .form-group {
    margin-bottom: 14px;
}

.aad-profile .form-group > .control-label {
    display: block;
    font-size: 12px;
    color: #5B6B68;
    font-weight: 500;
    margin-bottom: 5px;
    padding-top: 0;
}

.aad-profile-actions {
    margin-top: 18px;
    margin-bottom: 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--aad-border);
    display: flex;
    gap: 8px;
}

.aad-profile-actions .btn {
    min-width: 84px;
}

.aad-profile-actions .btn-primary {
    background: linear-gradient(180deg, var(--aad-primary-light) 0%, var(--aad-primary) 100%);
    border-color: var(--aad-primary);
}

/* 右边的操作日志：工具条只有一个刷新按钮，别占太高 */
.aad-profile .toolbar {
    padding: 12px 14px 0;
    margin-bottom: 8px;
}

/* =========================================================================
 * 十、地图弹窗 与 保障项目预览
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 10.1 地图弹窗（aad/map）
 * ---------------------------------------------------------------------- */
.aad-map-wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    min-height: 380px;
    background: #fff;
}

.aad-map-bar {
    flex: 0 0 auto;
    padding: 10px 16px;
    border-bottom: 1px solid var(--aad-border);
    background: #FAFCFC;
    font-size: 13px;
    line-height: 1.9;
}

.aad-map-bar b {
    color: var(--aad-text);
    margin-right: 12px;
}

.aad-map-bar .aad-map-meta {
    color: #5B6B68;
    margin-right: 16px;
    white-space: nowrap;
}

.aad-map-bar .aad-map-meta .fa {
    color: var(--aad-primary);
    margin-right: 3px;
}

#aad-map-coord {
    color: var(--aad-muted);
    font-size: 12px;
}

.aad-map {
    flex: 1 1 auto;
    min-height: 260px;
}

/* 没配 Key / 加载失败时的兜底：不白屏，说清原因并给个能用的出口 */
.aad-map-fallback {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 24px;
    color: var(--aad-text);
}

.aad-map-fallback .fa-3x,
.aad-map-fallback .fa-2x {
    color: #C6D2CF;
    margin-bottom: 14px;
}

.aad-map-fallback p {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.9;
}

.aad-map-fallback code {
    background: var(--aad-tint);
    color: var(--aad-primary);
    border-radius: 4px;
    padding: 1px 6px;
}

.aad-map-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--aad-border);
    background: #fff;
    margin-top: 0;
}

.aad-map-picked {
    font-size: 13px;
    color: #5B6B68;
}

.aad-map-picked code {
    background: var(--aad-tint);
    color: var(--aad-primary);
    border-radius: 4px;
    padding: 2px 8px;
}

/* 列表里的「看地图 / 看轨迹」链接 */
.fixed-table-container a.dialogit {
    color: var(--aad-primary);
    white-space: nowrap;
}

.fixed-table-container a.dialogit:hover {
    color: var(--aad-primary-dark);
    text-decoration: underline;
}

.fixed-table-container a.dialogit .fa {
    margin-right: 2px;
}

/* 表单里的「地图选点」按钮 */
.aad-pick-btn {
    margin-top: 8px;
}

.aad-pick-btn .fa {
    margin-right: 4px;
    color: var(--aad-primary);
}

/* -------------------------------------------------------------------------
 * 10.2 保障项目：多选 + 当前内容预览
 * ---------------------------------------------------------------------- */
.aad-coverage-preview {
    margin-top: 10px;
    background: #FAFCFC;
    border: 1px solid var(--aad-border);
    border-radius: var(--aad-radius);
    padding: 10px 12px;
}

.aad-coverage-preview > b {
    display: block;
    font-size: 12px;
    color: var(--aad-muted);
    font-weight: 500;
    margin-bottom: 6px;
}

.aad-coverage-preview pre {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--aad-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* 多选下拉里选中的项做成小标签，比一长串逗号好读 */
.bootstrap-select.show-tick .dropdown-menu li a span.check-mark {
    color: var(--aad-primary);
}

.bootstrap-select > .dropdown-toggle .filter-option {
    white-space: normal;
    line-height: 1.5;
}

/* =========================================================================
 * 十一、仪表盘布局：瀑布流 + 页面自然滚动（内容一条不藏）
 * -------------------------------------------------------------------------
 * 上一版走过的弯路（别再回去）：把 .aad-dash 写死成 calc(100vh - 36px)，
 * 再给卡片加 overflow:auto，想硬塞进一屏。结果是**为了塞下去把内容藏起来了** ——
 * 「小程序首页内容」6 项只露 4 项、「最近投保订单」只露 1 行，
 * 正好和「需要全部显示完」相反。所以这里改成：
 *
 *   · 页面按内容自然长高，用 iframe 的原生滚动（高度只有一个来源，见第一节 iframe 规则）
 *   · 卡片不再内部滚动、不再强制等高 —— 谁高就多占点，不留空档
 *   · 下半部分两列瀑布流：左列（宽）趋势图 + 最近订单，右列（窄）最近报案
 *
 * 为什么不用 CSS multi-column 做真瀑布流：分栏会产生片段化，
 * echarts 的 canvas 在里面测宽容易出错。下半部分只有三张卡片，
 * 用「两列各自纵向堆叠」视觉效果一样，但不会踩 canvas 的坑。
 * ========================================================================= */
.aad-dash {
    padding: 0;
}

/* ---- 纵向节奏：紧凑但不挤 ---- */
.aad-dash > .aad-hero {
    padding: 13px 20px;
    margin-bottom: 10px;
}

.aad-dash > .aad-hero h2 {
    font-size: 17px;
    margin-bottom: 2px;
}

.aad-dash > .aad-hero p {
    font-size: 12px;
}

.aad-dash > .aad-hero .aad-hero-meta {
    margin-top: 7px;
}

.aad-dash > .aad-stat-row {
    margin-bottom: 10px;
}

.aad-dash .aad-stat {
    padding: 10px 12px;
}

.aad-dash .aad-stat .aad-stat-label {
    margin-bottom: 2px;
}

.aad-dash .aad-stat .aad-stat-value {
    font-size: 21px;
}

.aad-dash .aad-stat .aad-stat-foot {
    margin-top: 4px;
}

.aad-dash .aad-stat .aad-stat-icon {
    top: 10px;
    right: 10px;
}

.aad-dash .aad-card {
    margin-bottom: 10px;
}

.aad-dash .aad-card > .aad-card-head {
    padding: 8px 14px;
}

.aad-dash .aad-card > .aad-card-body {
    padding: 10px 14px;
}

/* -------------------------------------------------------------------------
 * 11.1 小程序首页内容：六个数字排成一行
 * -------------------------------------------------------------------------
 * 原来是 2×3 的格子塞在趋势图右边那一栏，卡片被强制拉到和趋势图等高，
 * 格子之间就被抻出大片空档 —— 这就是「感觉有点乱」的来源；
 * 而且高度不够时后两项直接被裁掉。
 * 现在整条独立成一行、六个等宽格子铺平：不留空档，也不会被裁。
 * ------------------------------------------------------------------------- */
.aad-dash .aad-mini-row .aad-mini {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    height: auto;
    /* 必须把基础规则里的 margin:-6px 清掉！
       那条负外边距是配合 `> div{padding:6px}` 的老写法。改用 gap 之后如果留着它，
       容器盒子会比内容矮 12px —— 格子就溢出卡片、压到下面的趋势图上（真出过这个 bug）。 */
    margin: 0;
}

.aad-dash .aad-mini-row .aad-mini > div {
    /* 六个等宽，不换行；min-width:0 允许被压缩，否则会溢出卡片 */
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    display: flex;
}

/* 模板里每格外面还套了一层 <a>。<a> 默认是 inline，
   不撑开也不是 flex 容器，于是里面的小框只有内容那么宽、靠左堆着 ——
   看起来就是「框很小、中间空档特别宽、六个宽度还不一样」。
   把这层 <a> 也变成撑满的 flex 项，小框才能填满各自那一格。 */
.aad-dash .aad-mini-row .aad-mini > div > a {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
}

.aad-dash .aad-mini-row .aad-mini .aad-mini-box {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px;
    text-align: center;
}

.aad-dash .aad-mini-row .aad-mini .aad-mini-box b {
    font-size: 18px;
    line-height: 1.2;
}

.aad-dash .aad-mini-row .aad-mini .aad-mini-box span {
    font-size: 11px;
    /* 标签放不下就省略，别把格子挤歪 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* -------------------------------------------------------------------------
 * 11.2 卡片一律按内容高度展开：不拉伸、不裁剪、不内部滚动
 * -------------------------------------------------------------------------
 * 两张明细表（最近投保订单 / 最近报案）已从仪表盘撤掉，所以不再需要瀑布流分栏；
 * 现在纵向就是：横幅 → 统计卡两行 → 首页内容一行 → 趋势图，正好一屏。
 * 选择器保留 .aad-waterfall 是为了兼容（万一以后又往下面加卡片）。
 * ------------------------------------------------------------------------- */
.aad-dash .aad-waterfall > [class*="col-"],
.aad-dash .aad-chart-row > [class*="col-"] {
    /* 显式取消 .aad-flex-row 那套「拉平等高」的行为 */
    display: block;
}

.aad-dash .aad-waterfall .aad-card,
.aad-dash .aad-chart-row .aad-card {
    /* 高度由内容决定：不拉伸、不裁剪、不内部滚动 */
    height: auto;
    overflow: visible;
}

.aad-dash .aad-waterfall .aad-card > .aad-card-body,
.aad-dash .aad-chart-row .aad-card > .aad-card-body {
    height: auto;
    overflow: visible;
}

/* 最后一块不留多余下边距，免得整页凭空多出一截 */
.aad-dash .aad-chart-row .aad-card {
    margin-bottom: 0;
}

/* 趋势图写死高度：echarts 要有确定高度才出图，
   瀑布流里没有可继承的父容器高度（height:100% 会塌成 0），所以固定像素。
   和模板里的内联 style 保持同值，互为兜底。 */
.aad-dash #echart {
    width: 100% !important;
    height: 240px !important;
}

/* 表格整条展开，不吸顶不内滚（内容全显示，页面滚） */
.aad-dash .aad-waterfall .aad-card .table > thead > tr > th {
    position: static;
}