/* ============================================================
   皮肤：五菱蓝红（SGMW Brand Skin）
   ------------------------------------------------------------
   主色调：#265ece（五菱蓝） / #c12156（五菱红）
   本皮肤把视觉语言映射到五菱品牌色：
        顶栏：蓝 → 紫 → 红 三段渐变工作条
        侧栏：深蓝渐变 + 品牌红高亮当前项
   加载顺序：theme.css → base.css → extend.css → 本文件
   ============================================================ */

:root{
    /* ---- 品牌主色 ---- */
    --wl-primary:#265ece;               /* 五菱蓝 */
    --wl-primary-dark:#1e4bab;          /* 蓝·按下 */
    --wl-primary-light:#517ed8;         /* 蓝·悬停 */
    --wl-danger:#c12156;                /* 五菱红 */
    --wl-danger-dark:#a51a48;           /* 红·按下 */
    --wl-danger-light:#cd4d78;          /* 红·悬停 */
    --wl-danger-dis:rgba(202,80,120,0.6);  /* 红·禁用 */

    /* ---- 蓝红渐变 ---- */
    --wl-gradient:linear-gradient(90deg,#265ece 0%,#3452c8 26%,#6b3ba8 62%,#c12156 100%);
    --wl-gradient-soft:linear-gradient(90deg,rgba(38,94,206,.10) 0%,rgba(107,59,168,.10) 62%,rgba(193,33,86,.10) 100%);
    --wl-gradient-blue:linear-gradient(135deg,#3d6fe0 0%,#265ece 100%);
    --wl-gradient-blue-hover:linear-gradient(135deg,#4b7ae8 0%,#2f66e0 100%);
    --wl-gradient-red:linear-gradient(135deg,#a51a48 20%,#c12156 50%);
    --wl-gradient-red-hover:linear-gradient(135deg,#e04079 20%,#cf2b60 50%);
    --wl-menu-bg:rgba(193,33,86,1);
    /*--wl-menu-bg:rgba(255,255,255,.18);*/
    --wl-right-top:linear-gradient(90deg,#265ece 0%,#3452c8 15%,#6b3ba8 35%,#c12156 100%);

    /* ---- 中性色 ---- */
    --wl-text:#303133;
    --wl-text-sub:#606266;
    --wl-text-muted:#909399;
    --wl-border:#e4e7ed;
    --wl-border-light:#ebeef5;
    --wl-bg:#f2f5fb;
    --wl-radius:10px;
    --wl-shadow:0 2px 12px rgba(38,94,206,.07);
    --wl-shadow-hover:0 6px 20px rgba(38,94,206,.16);
}

/* =========================================================
 一、全局底色
============================================================ */
body{
    background:var(--wl-bg);
    color:var(--wl-text);
}
.main-content{
    background:var(--wl-bg) !important;
}
.layui-body{
    background:var(--wl-bg);
}

/* ============================================================
   二、左侧菜单：深蓝渐变 + 品牌红高亮
   ============================================================ */
.vertical-menu{
    background:linear-gradient(180deg,#265ece 0%,#2349b0 42%,#1a3378 100%) !important;
    border-right:none !important;
    /* 右缘红晕：呼应品牌红，同时弱化侧栏与内容区的硬边界
    box-shadow:4px 0 18px rgba(26,51,120,.20),inset -1px 0 0 rgba(193,33,86,.45); */
}
body[data-sidebar=dark] .vertical-menu{
    background:linear-gradient(180deg,#265ece 0%,#2349b0 42%,#1a3378 100%) !important;
    border-right:none !important;
}
/* blank 模式侧栏同样收敛到品牌蓝渐变 */
body[data-sidebar=blank] .vertical-menu{
    background:linear-gradient(180deg,#265ece 0%,#2349b0 42%,#1a3378 100%) !important;
    border-right:none !important;
}

/* Logo 区：与顶栏渐变首色一致，横向无缝衔接 */
.navbar-brand-box{
    background:#265ece !important;
    border-bottom:none !important;
}
body[data-sidebar=dark] .navbar-brand-box{
    background:var(--wl-primary) !important;
    border-bottom:none !important;
}
.navbar-brand-box .logo-lg{
    color:#fff !important;
    font-weight:600;
    letter-spacing:1px;
}

/* 菜单文字 */
#sidebar-menu ul li a,
#sidebar-menu ul li a i{
    color:rgba(232,238,255,.82) !important;
}
body[data-sidebar=dark] #sidebar-menu ul li a,
body[data-sidebar=dark] #sidebar-menu ul li a i{
    color:rgba(232,238,255,.82) !important;
}
#sidebar-menu ul li a:hover {
    color:#fff !important;
    background:rgba(255,255,255,.10);
}
/* 清除 theme.css 遗留的绿色激活态（body[data-sidebar=dark] .mm-active > a 为 #67C23A） */
#sidebar-menu ul.metismenu > li.mm-active > a,
#sidebar-menu ul li.mm-active > a,
body[data-sidebar=dark] .mm-active > a,
body[data-sidebar=dark] .mm-active > a i{
    color:#fff !important;
}

/* 菜单项：圆角 + 过渡 */
#sidebar-menu ul li a{
    border-radius:8px;
    margin:3px 8px;
    padding:.48rem .6rem !important;
    transition:background .2s ease,color .2s ease;
    display:block;
}
#sidebar-menu ul li ul.sub-menu li a{
    margin:2px 8px 2px 18px;
    padding:.42rem .6rem !important;
    font-size:13px;
}

/* 当前项：品牌红渐变胶囊 */
#sidebar-menu ul.metismenu > li.mm-active > a,
#sidebar-menu ul li.mm-active > a{
    background:var(--wl-menu-bg) !important;
    color:#fff !important;
    /*box-shadow:0 4px 12px rgba(193,33,86,.30);*/
    box-shadow:0 2px 8px rgba(0,0,0,.12);
    font-weight:600;
}
/*#sidebar-menu ul.metismenu > li.mm-active > a > i,
#sidebar-menu ul li.mm-active > a i{
    color:#fff !important;
}*/
/* 二级当前项：红色文字 + 左侧红条 */
/*#sidebar-menu ul li ul.sub-menu li a.active,
#sidebar-menu ul li ul.sub-menu li.mm-active > a{
    color:#ffb3c9 !important;
}
#sidebar-menu ul li ul.sub-menu li a.active i,
#sidebar-menu ul li ul.sub-menu li.mm-active > a i{
    color:#ffb3c9 !important;
}*/
#sidebar-menu ul li ul.sub-menu li a.active::before{
    content:"";
    position:absolute;
    left:2px;top:50%;
    transform:translateY(-50%);
    width:3px;height:14px;
    border-radius:2px;
    background:var(--wl-danger);
}

/* 展开箭头 */
.metismenu .has-arrow:after{
    border-color:rgba(232,238,255,.70) !important;
}
#sidebar-menu ul li.mm-active > a.has-arrow:after{
    border-color:#fff !important;
}

/* 折叠态（70px）：悬浮展开面板 */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a{
    color:#fff !important;
    background:rgba(255,255,255,.14) !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i{
    color:#fff !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul{
    background:#2349b0 !important;
    box-shadow:3px 5px 14px rgba(20,40,100,.28) !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul ul{
    background:#1e3f9c !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a{
    color:rgba(232,238,255,.85) !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover{
    color:#fff !important;
}

/* ============================================================
   三、顶部导航栏：蓝 → 紫 → 红 渐变工作条
   ============================================================ */
/* 顶栏：蓝→紫→红 渐变工作条
   注：底部渐变描边用伪元素而非 border，避免撑高 65px 顶栏导致页签栏错位 */
#page-topbar{
    position:relative;
    background:var(--wl-right-top) !important;
    border:none !important;
    box-shadow:0 2px 14px rgba(38,94,206,.26);
}
#page-topbar::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:2px;
    background:linear-gradient(90deg,#265ece 0%,#6b3ba8 55%,#c12156 100%);
    pointer-events:none;
}
body[data-topbar=dark] #page-topbar{
    background:var(--wl-right-top) !important;
    border:none !important;
}
#page-topbar .navbar-header i,
#page-topbar .navbar-header .iconbutton,
#page-topbar .navbar-header .el-dropdown-link{
    color:#fff !important;
}
/* 顶栏内下拉菜单为白底，文字与图标还原深色 */
#page-topbar .navbar-header .el-dropdown-menu__item,
#page-topbar .navbar-header .el-dropdown-menu__item i{
    color:#606266 !important;
}
#page-topbar .navbar-header .el-dropdown-menu__item:hover{
    background:var(--wl-gradient-soft) !important;
    color:var(--wl-primary) !important;
}
.header-item{
    border-radius:8px;
}
.navbar-header .dropdown .show.header-item,
.header-item:hover{
    background-color:rgba(255,255,255,.20) !important;
    color:#fff !important;
}

/* ============================================================
   四、标签页（layui myTab）
   ============================================================ */
.layadmin-pagetabs .layui-tab-title{
    background:#fff;
    box-shadow:0 2px 10px rgba(38,94,206,.06);
}
.layadmin-pagetabs .layui-tab-title li{
    color:#7a869e;
    border-radius:8px 8px 0 0;
    transition:all .2s;
}
.layadmin-pagetabs .layui-tab-title li:hover{
    color:var(--wl-primary);
    background:rgba(38,94,206,.06);
}
.layadmin-pagetabs .layui-tab-title li.layui-this{
    color:var(--wl-danger) !important;
    font-weight:600;
    background:rgba(193,33,86,.06);
}
.layadmin-pagetabs .layui-tab-title li:after{
    background:var(--wl-gradient) !important;
    height:3px !important;
    border-radius:3px;
}
.layadmin-pagetabs .layui-tab-title li.layui-this .layui-tab-close{
    color:var(--wl-danger) !important;
}

/* ============================================================
   五、卡片与内容区
   ============================================================ */
.el-card{
    border:none !important;
    border-radius:var(--wl-radius) !important;
    box-shadow:var(--wl-shadow) !important;
    transition:box-shadow .25s ease;
}
.el-card.min-height{
    min-height:calc(100vh - 30px);
}
.el-card.is-hover-shadow:hover,
.el-card:hover{
    box-shadow:var(--wl-shadow-hover) !important;
}
.el-card__header{
    border-bottom:1px solid var(--wl-border-light) !important;
    font-weight:600;
}
/* 卡片标题左侧品牌色竖条 */
.el-card__header > span:first-child{
    position:relative;
    padding-left:10px;
}
.el-card__header > span:first-child::before{
    content:"";
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:3px;height:14px;
    border-radius:2px;
    background:var(--wl-gradient);
}

/* ============================================================
   六、Element 组件新皮肤
   ============================================================ */

/* ---------- 6.1 按钮 ---------- */
.el-button{
    transition:all .2s ease;
    border-radius:6px !important;
    font-weight:500;
}
.el-button:hover{
    transform:translateY(-1px);
}
/* 主按钮：品牌蓝渐变 */
.el-button--primary{
    background:var(--wl-gradient-blue) !important;
    border-color:var(--wl-primary) !important;
    box-shadow:0 2px 8px rgba(38,94,206,.22);
}
.el-button--primary:hover,
.el-button--primary:focus{
    background:var(--wl-gradient-blue-hover) !important;
    border-color:var(--wl-primary-light) !important;
    box-shadow:0 4px 14px rgba(38,94,206,.30);
}
.el-button--primary:active{
    background:var(--wl-primary-dark) !important;
    border-color:var(--wl-primary-dark) !important;
}
/* 危险按钮：品牌红渐变 */
.el-button--danger{
    background:var(--wl-gradient-red);
    border-color:var(--wl-danger) ;
    box-shadow:0 2px 8px rgba(193,33,86,.22);
}
.el-button--danger:hover,
.el-button--danger:focus{
    background:var(--wl-gradient-red-hover);
    border-color:var(--wl-danger-light);
    box-shadow:0 4px 14px rgba(193,33,86,.30);
}
.el-button--danger:active{
    background:var(--wl-danger-dark);
    border-color:var(--wl-danger-dark);
}
.el-button--success{
    background:#4caf50;
    border-color:#4caf50;
}
.el-button--warning{
    background:#e6a23c;
    border-color:#e6a23c;
}
/* 朴素按钮：品牌浅色底 */
.el-button--primary.is-plain{
    background:#e9effa !important;
    color:var(--wl-primary) !important;
    border:1px solid #b7c8ef !important;
    box-shadow:none;
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus{
    background:var(--wl-primary) !important;
    color:#fff !important;
    border-color:var(--wl-primary) !important;
}
.el-button--danger.is-plain{
    background:#f9e9ee !important;
    color:var(--wl-danger) !important;
    border:1px solid #efc2cf !important;
    box-shadow:none;
}
.el-button--danger.is-plain:hover,
.el-button--danger.is-plain:focus{
    background:var(--wl-danger) !important;
    color:#fff !important;
    border-color:var(--wl-danger) !important;
}
/* 禁用态 */
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover{
    background:#b9c8ea !important;
    border-color:#b9c8ea !important;
    box-shadow:none;
}

.el-button--warning.is-disabled,
.el-button--warning.is-disabled:active,
.el-button--warning.is-disabled:focus,
.el-button--warning.is-disabled:hover {
    color: #fff;
    background-color: #f3d19e;
    border-color: #f3d19e
}


.el-button--danger.is-disabled,
.el-button--danger.is-disabled:active,
.el-button--danger.is-disabled:focus,
.el-button--danger.is-disabled:hover {
    color: #fff;
    background-color: var(--wl-danger-dis);
    border-color: #cd8c99;
}

/* 文字按钮 / 链接按钮 */
.el-button--text,
.el-button--text:hover,
.el-button--text:focus{
    color:var(--wl-primary) !important;
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none;
}
.el-button--text:hover{
    color:var(--wl-danger) !important;
}
a{
    color:var(--wl-primary);
}
a:hover{
    color:var(--wl-danger);
}

/* ---------- 6.2 表单控件 ---------- */
.el-input__inner,
.el-textarea__inner{
    border-radius:6px;
    border-color:var(--wl-border);
}
.el-input__inner:focus,
.el-textarea__inner:focus{
    border-color:var(--wl-primary) !important;
    box-shadow:0 0 0 2px rgba(38,94,206,.10);
}
.el-input__inner:hover,
.el-textarea__inner:hover{
    border-color:var(--wl-primary-light);
}
.el-select .el-input.is-focus .el-input__inner{
    border-color:var(--wl-primary) !important;
}
.el-form-item__label{
    color:var(--wl-text-sub);
}
/* 必填星号 */
.el-form-item.is-required > .el-form-item__label:before,
.el-form-item.is-required > .el-form-item__label::before{
    color:var(--wl-danger);
}
.el-form-item__error{
    color:var(--wl-danger);
}
/* 单选 / 复选 */
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner{
    background:var(--wl-primary) !important;
    border-color:var(--wl-primary) !important;
}
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label{
    color:var(--wl-primary);
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner{
    background:var(--wl-primary) !important;
    border-color:var(--wl-primary) !important;
    box-shadow:-1px 0 0 0 var(--wl-primary) !important;
}
.el-checkbox-button__orig-radio:checked + .el-checkbox-button__inner{
    background:var(--wl-primary) !important;
    border-color:var(--wl-primary) !important;
    box-shadow:-1px 0 0 0 var(--wl-primary) !important;
}
/* 开关 */
.el-switch.is-checked .el-switch__core{
    background:var(--wl-primary) !important;
    border-color:var(--wl-primary) !important;
}
.el-switch.is-checked .el-switch__label.is-active{
    color:var(--wl-primary);
}
/* 滑块 */
.el-slider__bar{
    background:var(--wl-primary) !important;
}
.el-slider__button{
    border-color:var(--wl-primary) !important;
}
/* 数字输入框 */
.el-input-number.is-controls-position-right .el-input__inner{
    text-align:left;
}

/* ---------- 6.3 表格 ---------- */
.el-table{
    border-radius:8px;
    color:var(--wl-text);
}
.el-table th.el-table__cell{
    background:#eef2fb !important;
    color:#3c4a63;
    font-weight:700;
}
.el-table--border,
.el-table--group{
    border-radius:8px;
    overflow:hidden;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
    background:rgba(38,94,206,.05) !important;
}
.el-table .warning-row{
    background:#fdf6ec !important;
}
.el-table .success-row{
    background:#f0f9eb !important;
}
.el-table td.el-table__cell.is-loading:before{
    background:rgba(38,94,206,.06);
}
/* 表格内分页 */

/* ---------- 6.4 分页 ---------- */
.el-pagination.is-background .el-pager li:not(.disabled).active{
    background:var(--wl-gradient-blue) !important;
    box-shadow:0 2px 8px rgba(38,94,206,.32);
}
.el-pagination.is-background .el-pager li:not(.disabled):hover{
    color:var(--wl-primary);
}
.el-pagination__total,
.el-pagination__jump{
    color:var(--wl-text-sub);
}

/* ---------- 6.5 标签 Tag ---------- */
.el-tag{
    border-radius:6px;
}
.el-tag--info{
    background:#f4f4f5 !important;
    border-color:#e9e9eb !important;
    color:#909399 !important;
}

/* ---------- 6.6 对话框 / 消息 / 通知 ---------- */
.el-dialog{
    border-radius:12px !important;
    box-shadow:0 12px 44px rgba(31,45,92,.20) !important;
}
.el-dialog__header{
    border-bottom:1px solid var(--wl-border-light);
}
.el-dialog__title{
    font-weight:600;
    color:var(--wl-text);
}
.el-dialog__headerbtn .el-dialog__close{
    color:var(--wl-text-muted);
}
.el-dialog__headerbtn:hover .el-dialog__close{
    color:var(--wl-danger);
}
.el-message-box{
    border-radius:12px !important;
}
.el-message-box__title{
    font-weight:600;
}
.el-message-box__btns .el-button--primary{
    background:var(--wl-gradient-blue) !important;
}
.el-message{
    border-radius:8px;
    box-shadow:0 4px 18px rgba(31,45,92,.14);
}
.el-notification{
    border-radius:10px;
}

/* ---------- 6.7 下拉 / 菜单 / 气泡 ---------- */
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover{
    background:var(--wl-gradient-soft) !important;
    color:var(--wl-primary) !important;
}
.el-dropdown-menu{
    border-radius:8px;
    box-shadow:0 4px 18px rgba(31,45,92,.14);
}
.el-select-dropdown__item.selected{
    color:var(--wl-primary) !important;
    font-weight:600;
}
.el-menu{
    border-right:none;
}
.el-menu--horizontal{
    border-bottom:1px solid var(--wl-border-light);
}
.el-menu-item:hover,
.el-submenu__title:hover{
    background-color:rgba(38,94,206,.06);
}
.el-menu-item.is-active{
    color:var(--wl-primary) !important;
    font-weight:600;
}
.el-popover,
.el-tooltip__popper.is-dark{
    border-radius:8px;
}
.el-popover{
    border-color:var(--wl-border-light);
}

/* ---------- 6.8 选项卡 ---------- */
.el-tabs__item.is-active,
.el-tabs__item:hover{
    color:var(--wl-primary) !important;
}
.el-tabs__active-bar{
    background:var(--wl-gradient) !important;
    height:3px !important;
}
.el-tabs__item{
    color:var(--wl-text-sub);
}

/* ---------- 6.9 日期 / 时间选择器 ---------- */
/* 选中日：品牌蓝渐变底 + 白字 */
.el-date-table td.current:not(.disabled) span{
    background:var(--wl-gradient-blue) !important;
    color:#fff !important;
}
/* 今天：品牌红描边 + 红字，不占用选中态的蓝底 */
.el-date-table td.today:not(.current) span{
    color:var(--wl-danger) !important;
    font-weight:700;
}
.el-date-table td.available:hover,
.el-date-table td.available:hover span{
    background:var(--wl-primary) !important;
    color:#fff !important;
}
.el-picker-panel__icon-btn:hover{
    color:var(--wl-primary);
}
.el-date-table td.today:hover span{
    color:#fff !important;
}
.el-month-table td .cell:hover,
.el-year-table td .cell:hover{
    color:var(--wl-primary);
}

/* ---------- 6.10 树 / 级联 ---------- */
.el-tree-node.is-current > .el-tree-node__content{
    color:var(--wl-primary) !important;
}
.el-tree-node__content:hover{
    background:rgba(38,94,206,.06);
}
.el-tree-node.is-checked > .el-tree-node__content{
    color:var(--wl-primary) !important;
}
.el-cascader-menu__item.is-active,
.el-cascader-menu__item:hover{
    color:var(--wl-primary) !important;
}
.el-cascader-panel__empty-text{
    color:var(--wl-text-muted);
}

/* ---------- 6.11 穿梭框 ---------- */
.el-transfer-panel{
    border-radius:8px;
    overflow:hidden;
}
.el-transfer-panel__header{
    background:#eef2fb;
}
.el-transfer-panel__filter .el-input__inner{
    border-radius:16px;
}
.el-transfer-panel__list.is-filterable{
    border-radius:0 0 8px 8px;
}

/* ---------- 6.12 上传 ---------- */
.el-upload--picture-card:hover,
.el-upload:focus{
    border-color:var(--wl-primary);
    color:var(--wl-primary);
}
.el-upload-dragger:hover{
    border-color:var(--wl-primary);
}
.el-upload-dragger .el-upload__text em{
    color:var(--wl-primary);
}

/* ---------- 6.13 进度条 / 评分 / 徽标 ---------- */
.el-progress__text{
    color:var(--wl-text-sub);
}
/* 评分星星：Element 通过 colors prop 以 inline style 上色（默认金色），
   这里只兜底未显式传 colors 的场景，保持行业惯例的金色语义，
   不要用 !important 覆盖 inline style，否则业务传入的颜色会失效 */
.el-rate__icon.is-active,
.el-rate__icon--active{
    color:#f7ba2a;
}
.el-badge__content.is-fixed{
    background:var(--wl-danger);
}

/* ---------- 6.14 折叠面板 / 步骤条 / 时间线 ---------- */
.el-collapse-item__header{
    color:var(--wl-text);
    font-weight:600;
}
.el-collapse-item__header.is-active{
    color:var(--wl-primary);
}
.el-step__title.is-process,
.el-step__title.is-finish{
    color:var(--wl-text);
}
.el-step__head.is-process{
    color:var(--wl-primary);
    border-color:var(--wl-primary);
}
.el-step__head.is-finish{
    color:var(--wl-primary);
    border-color:var(--wl-primary);
}
.el-step__head.is-success{
    color:var(--wl-primary);
    border-color:var(--wl-primary);
}
.el-timeline-item__node{
    background:var(--wl-primary);
}
.el-timeline-item__tail{
    border-left-color:var(--wl-border);
}

/* ---------- 6.15 警告条 ---------- */
.el-alert--info.is-light{
    background:#e9effa;
    color:var(--wl-primary);
}

/* ---------- 6.16 描述列表 / 空状态 ---------- */
.el-descriptions__label{
    color:var(--wl-text-sub);
}
.el-empty__description p{
    color:var(--wl-text-muted);
}

/* ---------- 6.17 载入中 ---------- */
.el-loading-spinner .path{
    stroke:var(--wl-primary);
}

/* ============================================================
   七、滚动条（保持 30px 宽/高约定）
   ============================================================ */
::-webkit-scrollbar-thumb{
    background-color:#bcc8e4;
}
::-webkit-scrollbar-thumb:hover{
    background-color:#93a6d6;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece{
    background-color:transparent;
}

/* ============================================================
   八、基础样式层的旧色覆盖（base.css / extend.css）
   ------------------------------------------------------------
   这些文件早于本皮肤加载，用同等/更高特异性 + !important 覆盖，
   避免直接改动基础文件（便于回退与复用）。
   ============================================================ */
/* extend.css：文字辅助色 */
.text-danger{color:var(--wl-danger) !important;}
.text-primary{color:var(--wl-primary) !important;}
/* extend.css：单选/多选按钮组选中态为「蓝字白底」，
   与本皮肤「蓝底白字」冲突，需同步文字色 */
.el-radio-button__orig-radio:checked + .el-radio-button__inner{
    color:#fff !important;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner{
    color:#fff !important;
}
/* base.css：表格行高亮 */
.el-table .rowLight{
    background:#e9effa !important;
}
/* base.css：图片列表勾选态（默认绿） */
.image-wrap input[type="checkbox"]:checked + i,
.image-wrap input[type="radio"]:checked + i{
    background:var(--wl-primary);
    color:#fff;
}
/* base.css / extend.css：上传框 hover 描边 */
.image-uploader .el-upload:hover,
.logo-uploader .el-upload:hover{
    border-color:var(--wl-primary);
}

/* ============================================================
   九、其他细节
   ============================================================ */
.m-015{
    margin:15px;
}
.sum-card{
    border-radius:10px !important;
}
.text-white{
    color:#fff !important;
}
.text-danger{
    color:var(--wl-danger) !important;
}
/* 工作台统计卡片：仅增强悬浮 */
#app .el-card.text-white{
    border-radius:12px !important;
    transition:transform .2s ease,box-shadow .2s ease;
}
#app .el-card.text-white:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(31,45,92,.16) !important;
}
/* 链接型标签页（角色权限等） */
.tags-view-item.active{
    color:var(--wl-primary);
    border-color:var(--wl-primary);
}
/* 树形选择器 */
.vue-treeselect__control{
    border-color:var(--wl-border);
}

/* ============================================================
   十、首页「快捷操作」入口卡片
   ------------------------------------------------------------
   原实现用 el-tag 承载，视觉上只是一排灰标签，且 el-tag 在其它
   页面承担状态标签语义（成功/禁用），不适合全局改造。
   这里改为页面专属的 .quick-item 卡片，语义仍是「可点击的入口」。
   ============================================================ */
/* 注意：此处不用 flex gap —— 项目其余样式从未使用过 gap，
   且 flex gap 在 IE11 / 老 Safari 上不生效，改用 margin 实现间距 */
.quick-wrap{
    display:flex;
    flex-wrap:wrap;
    margin:-5px;
}
.quick-item{
    position:relative;
    display:flex;
    align-items:center;
    min-width:132px;
    max-width:230px;
    margin:5px;
    padding:9px 28px 9px 10px;
    border:1px solid var(--wl-border);
    border-radius:9px;
    background:#fff;
    cursor:pointer;
    outline:none;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
/* 图标底色块 */
.quick-item__icon{
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin-right:9px;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    background:var(--wl-gradient-blue);
    box-shadow:0 2px 6px rgba(38,94,206,.22);
    transition:transform .2s ease;
}
/* 标题：单行省略，过长不撑破卡片 */
.quick-item__text{
    font-size:13px;
    color:var(--wl-text);
    line-height:1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* 右上角移除按钮
   注意：不能用 opacity:0 + hover 显现 —— 触屏设备没有 hover，
   按钮将永远不可见。这里常显为浅灰，悬浮时加深。
   padding 扩大点击热区（视觉上仍是小叉号） */
.quick-item__close{
    position:absolute;
    top:0;
    right:0;
    padding:5px 6px;
    font-size:12px;
    line-height:1;
    color:#c3ccdc;
    cursor:pointer;
    transition:color .2s ease;
}
.quick-item:hover .quick-item__close{
    color:var(--wl-text-muted);
}
.quick-item__close:hover{
    color:var(--wl-danger) !important;
}

/* 悬浮态：抬升 + 品牌色描边 + 图标放大 */
.quick-item:hover,
.quick-item:focus{
    border-color:var(--wl-primary);
    background:#fbfcff;
    box-shadow:0 6px 18px rgba(38,94,206,.16);
    transform:translateY(-2px);
}
.quick-item:hover .quick-item__icon,
.quick-item:focus .quick-item__icon{
    transform:scale(1.08);
}
/* 键盘焦点：额外加一圈可见描边，鼠标点击不触发 */
.quick-item:focus{
    outline:2px solid var(--wl-primary-light);
    outline-offset:1px;
}

/* 6 色循环：蓝 → 靛 → 紫 → 品红 → 红 → 玫红
   与工作台统计卡片的色序保持一致 */
.quick-item--c0 .quick-item__icon{background:linear-gradient(135deg,#3d6fe0 0%,#265ece 100%);box-shadow:0 2px 6px rgba(38,94,206,.24);}
.quick-item--c1 .quick-item__icon{background:linear-gradient(135deg,#3d5fc8 0%,#4f46b8 100%);box-shadow:0 2px 6px rgba(79,70,184,.24);}
.quick-item--c2 .quick-item__icon{background:linear-gradient(135deg,#5540b8 0%,#6b3ba8 100%);box-shadow:0 2px 6px rgba(107,59,168,.24);}
.quick-item--c3 .quick-item__icon{background:linear-gradient(135deg,#8a3a9c 0%,#a3357e 100%);box-shadow:0 2px 6px rgba(163,53,126,.24);}
.quick-item--c4 .quick-item__icon{background:linear-gradient(135deg,#c12156 0%,#a81b49 100%);box-shadow:0 2px 6px rgba(193,33,86,.24);}
.quick-item--c5 .quick-item__icon{background:linear-gradient(135deg,#d6336f 0%,#c12156 100%);box-shadow:0 2px 6px rgba(214,51,111,.24);}

/* 空状态 */
.quick-empty{
    padding:26px 0;
    text-align:center;
    color:var(--wl-text-muted);
}
.quick-empty > i{
    font-size:34px;
    color:#c9d3e8;
}
.quick-empty p{
    margin:8px 0 14px;
    font-size:13px;
}