/* =============================================================================
   Element Plus 风格后台主题
   Why：在 Bootstrap3/AdminLTE 体系上做视觉层覆盖，使后台观感与 Element Plus 一致
   （配色/圆角/阴影/组件形态），引入顺序需位于 append.css 与 skins/*.css 之后
   ============================================================================= */

/* ---- 设计变量 ---- */
:root {
    --ep-color-primary: #409eff;
    --ep-color-success: #67c23a;
    --ep-color-warning: #e6a23c;
    --ep-color-danger: #f56c6c;
    --ep-color-info: #909399;
    --ep-text-primary: #303133;
    --ep-text-regular: #606266;
    --ep-text-secondary: #909399;
    --ep-border-color: #dcdfe6;
    --ep-border-light: #ebeef5;
    --ep-fill-blank: #ffffff;
    --ep-fill-light: #f5f7fa;
    --ep-bg-page: #f2f3f5;
}

/* ---- 全局字体与背景（Element 官方字体栈） ---- */
body,
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

body { color: var(--ep-text-regular); font-size: 14px; }

/* 细滚动条 */
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: #909399; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- 顶部导航：白底 + 细分隔线 + 轻阴影 ---- */
.main-header {
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    border-bottom: 1px solid var(--ep-border-light);
}

.main-header .navbar {
    background-color: #fff;
    border-bottom: none;
}

.main-header .navbar .nav > li > a {
    color: var(--ep-text-regular);
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus {
    background: var(--ep-fill-light);
    color: var(--ep-color-primary);
}

.main-header .logo,
.main-header .navbar .sidebar-toggle {
    background-color: #fff;
    color: var(--ep-text-primary) !important;
    border-right: 1px solid var(--ep-border-light);
}

.main-header .navbar .sidebar-toggle:hover { background: var(--ep-fill-light); }

.main-header .logo { font-weight: 600; letter-spacing: .5px; }
.main-header .logo:hover { background-color: #fff !important; }

/* 顶部多页签 */
.nav-addtabs { border-bottom: 1px solid var(--ep-border-light); background: #fff; }
.nav-addtabs > li > a {
    border-radius: 4px 4px 0 0 !important;
    color: var(--ep-text-regular);
    border: 1px solid transparent !important;
}
.nav-addtabs > li.active > a {
    color: var(--ep-color-primary) !important;
    background: var(--ep-fill-light) !important;
    border-color: var(--ep-border-light) !important;
    border-bottom-color: #fff !important;
}

/* ---- 侧边栏：Element 浅色菜单风格 ---- */
.main-sidebar,
.left-side {
    background-color: #fff;
    box-shadow: 1px 0 4px rgba(0, 21, 41, .06);
}

/* 压过 AdminLTE skin-* 的深色侧栏 */
.skin-black-blue .main-header .logo,
.skin-black-blue .main-header .navbar,
.skin-black-blue .main-sidebar,
.skin-black-blue .left-side,
.skin-black-blue .main-header li.user-header {
    background-color: #fff;
}

.main-sidebar .sidebar { padding-top: 0; }

/* 菜单搜索框 */
.main-sidebar .sidebar-form {
    border: none;
    margin: 12px;
    border-radius: 4px;
    background: var(--ep-fill-light);
}
.main-sidebar .sidebar-form input[type=text] {
    background: var(--ep-fill-light);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ep-text-regular);
    height: 32px;
}
.main-sidebar .sidebar-form input[type=text]:focus {
    border-color: var(--ep-color-primary);
    background: #fff;
}
.main-sidebar .sidebar-form .btn { color: var(--ep-text-secondary); background: transparent; }

/* 一级菜单项 */
.sidebar-menu > li {
    border-bottom: none;
}
.sidebar-menu > li > a {
    color: var(--ep-text-primary);
    border-left: 3px solid transparent;
    margin: 2px 8px;
    border-radius: 6px;
    padding: 11px 12px;
    font-size: 14px;
    line-height: 20px;
    transition: background-color .15s, color .15s;
}
.sidebar-menu > li > a:hover {
    background: var(--ep-fill-light);
    color: var(--ep-color-primary);
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active > a:hover {
    background: #ecf5ff;
    color: var(--ep-color-primary);
    border-left-color: var(--ep-color-primary);
    font-weight: 600;
}
.sidebar-menu > li.header {
    color: var(--ep-text-secondary);
    background: transparent;
    font-size: 12px;
    padding: 12px 16px 4px;
}

/* 子菜单 */
.sidebar-menu .treeview-menu {
    background: transparent;
    border-radius: 0 0 6px 6px;
    margin: 0 8px 4px 8px;
    padding: 4px 0;
}
.sidebar-menu .treeview-menu > li > a {
    color: var(--ep-text-regular);
    font-size: 13px;
    padding: 8px 16px 8px 36px;
    border-radius: 4px;
    margin: 0 8px;
}
.sidebar-menu .treeview-menu > li > a:hover { color: var(--ep-color-primary); background: var(--ep-fill-light); }
.sidebar-menu .treeview-menu > li.active > a { color: var(--ep-color-primary); font-weight: 600; }

/* ---- 内容区 ---- */
.content-wrapper,
.right-side {
    background-color: var(--ep-bg-page);
}

.content-header > h1 > small { color: var(--ep-text-secondary); }

/* ---- 面板：白底圆角 + 轻阴影 + 扁平化标题 ---- */
.panel {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
    margin-bottom: 16px;
}

.panel-default > .panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--ep-border-light);
    border-radius: 8px 8px 0 0;
    color: var(--ep-text-primary);
    padding: 14px 16px;
}

.panel-heading .panel-lead em {
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    color: var(--ep-text-primary);
}

.panel-heading .panel-lead small { color: var(--ep-text-secondary); }

.panel-body { padding: 16px; }

.panel-intro .panel-heading .panel-heading-btn .btn { margin-left: 6px; }

/* ---- 表格：Element 表格形态 ---- */
.table > thead > tr > th {
    background: var(--ep-fill-light);
    color: var(--ep-text-regular);
    font-weight: 600;
    border-bottom: 1px solid var(--ep-border-light);
    padding: 10px 12px;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--ep-border-light);
    color: var(--ep-text-primary);
    padding: 10px 12px;
    vertical-align: middle;
}

.table > tbody > tr:hover > td { background-color: var(--ep-fill-light); }

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th { background-color: transparent; }

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
    border-color: var(--ep-border-light);
}

/* bootstrap-table 容器与工具栏 */
.bootstrap-table .table { border-radius: 6px; overflow: hidden; }
.fixed-table-container { border-radius: 6px; }
.fixed-table-toolbar { padding: 8px 0; }
.fixed-table-pagination .pagination-detail { color: var(--ep-text-secondary); }

/* ---- 按钮：Element 五色系 ---- */
.btn {
    border-radius: 4px;
    font-size: 13px;
    padding: 7px 15px;
    transition: background-color .15s, border-color .15s, color .15s;
    outline: none;
}

.btn:active { box-shadow: none; }

.btn-primary {
    background-color: var(--ep-color-primary);
    border-color: var(--ep-color-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.btn-success {
    background-color: var(--ep-color-success);
    border-color: var(--ep-color-success);
}
.btn-success:hover, .btn-success:focus, .btn-success.active {
    background-color: #85ce61;
    border-color: #85ce61;
}

.btn-warning {
    background-color: var(--ep-color-warning);
    border-color: var(--ep-color-warning);
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.active {
    background-color: #ebb563;
    border-color: #ebb563;
}

.btn-danger {
    background-color: var(--ep-color-danger);
    border-color: var(--ep-color-danger);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.active {
    background-color: #f78989;
    border-color: #f78989;
}

.btn-info {
    background-color: var(--ep-color-info);
    border-color: var(--ep-color-info);
}
.btn-info:hover, .btn-info:focus { background-color: #a6a9ad; border-color: #a6a9ad; }

.btn-default,
.btn-white {
    background: #fff;
    border-color: var(--ep-border-color);
    color: var(--ep-text-regular);
}
.btn-default:hover, .btn-default:focus,
.btn-white:hover, .btn-white:focus {
    color: var(--ep-color-primary);
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.btn-xs { padding: 3px 9px; font-size: 12px; }
.btn-sm { padding: 5px 11px; }
.btn-lg { padding: 10px 19px; }

/* ---- 表单控件 ---- */
.form-control {
    border-radius: 4px;
    border-color: var(--ep-border-color);
    color: var(--ep-text-primary);
    height: 32px;
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
    font-size: 13px;
}

.form-control:focus {
    border-color: var(--ep-color-primary);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, .12);
}

.form-control[disabled], .form-control[readonly] { background: var(--ep-fill-light); }

.input-group-addon { background: var(--ep-fill-light); border-color: var(--ep-border-color); color: var(--ep-text-secondary); }

textarea.form-control { height: auto; }

label, .control-label { color: var(--ep-text-primary); font-weight: 500; }

/* select 下拉箭头保持原生，微调高度 */
select.form-control { padding: 5px 10px; }

/* ---- 分页：Element 圆角按钮风 ---- */
.pagination > li > a,
.pagination > li > span {
    border-radius: 4px !important;
    margin: 0 3px;
    border: 1px solid var(--ep-border-color);
    color: var(--ep-text-regular);
    padding: 4px 10px;
}

.pagination > li > a:hover { color: var(--ep-color-primary); border-color: #c6e2ff; background: #ecf5ff; }

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

/* ---- 标签/徽章：Element Tag 圆角 ---- */
.label {
    border-radius: 4px;
    font-weight: normal;
    padding: 3px 8px;
    font-size: 12px;
}

.label-success { background: #f0f9eb; color: var(--ep-color-success); }
.label-danger { background: #fef0f0; color: var(--ep-color-danger); }
.label-warning { background: #fdf6ec; color: var(--ep-color-warning); }
.label-info { background: #f4f4f5; color: var(--ep-color-info); }
.label-primary { background: #ecf5ff; color: var(--ep-color-primary); }

.badge {
    background: var(--ep-color-danger);
    border-radius: 8px;
    font-weight: normal;
}

/* ---- 下拉菜单 ---- */
.dropdown-menu {
    border-radius: 6px;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    padding: 6px 0;
}

.dropdown-menu > li > a {
    color: var(--ep-text-regular);
    padding: 7px 16px;
    font-size: 13px;
}

.dropdown-menu > li > a:hover {
    background: var(--ep-fill-light);
    color: var(--ep-color-primary);
}

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

/* ---- 模态框 / layer 弹层 ---- */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.modal-header { border-bottom: 1px solid var(--ep-border-light); padding: 14px 18px; }
.modal-header .modal-title { font-size: 16px; font-weight: 600; color: var(--ep-text-primary); }
.modal-footer { border-top: 1px solid var(--ep-border-light); padding: 12px 18px; }

/* ---- layer 弹层：Element Dialog 形态 ----
   Why 全部带 !important：backend.css 的 .layui-layer-fast 定制（深蓝标题/灰按钮区）
   使用了 !important 且与主题层同特异性，必须以同强度压制 */
.layui-layer {
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15) !important;
    overflow: hidden;
}

/* 标题栏：白底深字 + 细分隔线（压掉 FastAdmin 深蓝标题栏） */
.layui-layer-title,
.layui-layer-fast .layui-layer-title {
    background: #fff !important;
    border-bottom: 1px solid var(--ep-border-light) !important;
    color: var(--ep-text-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* 关闭按钮：去雪碧图图标，改为文字 ×，hover 主色 */
.layui-layer-fast .layui-layer-setwin .layui-layer-close1 {
    background: none !important;
    width: 45px;
    color: #909399 !important;
    font: normal 24px/45px sans-serif;
    text-align: center;
    text-indent: 0;
}

.layui-layer-fast .layui-layer-setwin .layui-layer-close1::before {
    content: '\00d7';
}

.layui-layer-fast .layui-layer-setwin .layui-layer-close1:hover {
    color: var(--ep-color-primary) !important;
    background: var(--ep-fill-light) !important;
}

/* 操作按钮区：白底 + 右对齐（EP 对话框按钮形态），压掉灰色操作区 */
.layui-layer-fast .layui-layer-btn {
    background: #fff !important;
    text-align: right !important;
    padding: 10px 16px !important;
    border-top: 1px solid var(--ep-border-light);
}

.layui-layer-fast .layui-layer-btn a,
.layui-layer-btn a {
    background: #fff !important;
    color: var(--ep-text-regular) !important;
    border: 1px solid var(--ep-border-color) !important;
    border-radius: 4px !important;
    height: 30px;
    line-height: 28px;
    padding: 0 15px;
    margin-left: 8px;
    font-size: 13px;
    transition: all .15s;
}

.layui-layer-fast .layui-layer-btn a:hover,
.layui-layer-btn a:hover {
    color: var(--ep-color-primary) !important;
    border-color: #c6e2ff !important;
    background: #ecf5ff !important;
}

/* 主按钮（btn0）：EP 主色实底 */
.layui-layer-fast .layui-layer-btn .layui-layer-btn0,
.layui-layer-btn .layui-layer-btn0 {
    background: var(--ep-color-primary) !important;
    border-color: var(--ep-color-primary) !important;
    color: #fff !important;
}

.layui-layer-fast .layui-layer-btn .layui-layer-btn0:hover,
.layui-layer-btn .layui-layer-btn0:hover {
    background: #66b1ff !important;
    border-color: #66b1ff !important;
    color: #fff !important;
}

/* msg 轻提示（layer.msg）：深色条改为 EP Message 白底卡片 */
.layui-layer-dialog {
    background: #fff !important;
    border: 1px solid var(--ep-border-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !important;
}

.layui-layer-dialog .layui-layer-content {
    color: var(--ep-text-primary) !important;
}

/* iframe 弹窗内容区与遮罩 */
.layui-layer-iframe .layui-layer-content {
    background: #fff;
}

.layui-layer-shade {
    background-color: rgba(0, 0, 0, .45) !important;
    opacity: 1 !important;
}

/* ---- 右侧控制栏 / 用户菜单细节 ---- */
.control-sidebar-bg { background: #fff; }
.control-sidebar { background: #fff; color: var(--ep-text-regular); }
.control-sidebar .control-sidebar-subheading { color: var(--ep-text-primary); }

.navbar .user-menu > .dropdown-menu > li > a { color: var(--ep-text-regular); }

/* ---- 表单校验错误与提示（jQuery validate / toastr） ---- */
.help-block { color: var(--ep-color-danger); font-size: 12px; }

.toastr-toast {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}

/* ---- selectpage 组件贴近 Element 下拉 ---- */
.selectpage .sp_container .sp_input_box { border-radius: 4px; }
.selectpage .sp_result_area {
    border-radius: 6px;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.selectpage .sp_result_area .sp_result_list ul li.sp_over { background: var(--ep-fill-light); color: var(--ep-color-primary); }
.selectpage .sp_result_area .list_box .sp_select_page { color: var(--ep-color-primary); }

/* ---- datatimepicker 微调 ---- */
.datetimepicker-dropdown {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

/* ---- 卡片化通用元素（bootstrap .box 兼容） ---- */
.box {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

.box-header { color: var(--ep-text-primary); }

/* ---- 脚注/杂项去特征化 ---- */
a { color: var(--ep-color-primary); }
a:hover, a:focus { color: #66b1ff; }

.text-primary { color: var(--ep-color-primary); }
.text-success { color: var(--ep-color-success); }
.text-danger { color: var(--ep-color-danger); }
.text-warning { color: var(--ep-color-warning); }
.text-info { color: var(--ep-color-info); }

.bg-aqua, .bg-green, .bg-yellow, .bg-red, .bg-blue {
    border-radius: 8px;
}

/* InfoBox（AdminLTE 小组件）改为白底描边 */
.info-box {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* =============================================================================
   皮肤压制修正：skin-black-blue 的规则带 .skin-black-blue 前缀（特异性更高），
   会压过上面的通用覆盖，导致 logo/展开子菜单仍是深色底。此处以同等特异性
   （且加载顺序在后）夺回控制权，统一为 Element 浅色菜单
   ============================================================================= */

/* logo 与折叠按钮 */
.skin-black-blue .main-header .logo { background-color: #fff; color: var(--ep-text-primary); border-right: 1px solid var(--ep-border-light); }
.skin-black-blue .main-header .navbar .sidebar-toggle { color: var(--ep-text-primary); }
.skin-black-blue .main-header .navbar { background-color: #fff; border-bottom: none; }
.skin-black-blue .main-header .navbar .nav > li > a { color: var(--ep-text-regular); }
.skin-black-blue .main-header .navbar .nav > li > a:hover { background: var(--ep-fill-light); color: var(--ep-color-primary); }
.skin-black-blue .main-header li.user-header { background-color: var(--ep-color-primary); }

/* 一级菜单（含展开态） */
.skin-black-blue .sidebar-menu > li > a { color: var(--ep-text-primary); background: transparent; border-left-color: transparent; }
.skin-black-blue .sidebar-menu > li:hover > a { background: var(--ep-fill-light); color: var(--ep-color-primary); }
.skin-black-blue .sidebar-menu > li.active > a,
.skin-black-blue .sidebar-menu li.treeview.active > a,
.skin-black-blue .sidebar-menu li.treeview.treeview-open > a {
    background: #ecf5ff;
    color: var(--ep-color-primary);
    border-left-color: var(--ep-color-primary);
    font-weight: 600;
}
.skin-black-blue .sidebar-menu li.treeview.active > a:hover,
.skin-black-blue .sidebar-menu li.treeview.treeview-open > a:hover { background: #ecf5ff; color: var(--ep-color-primary); }

/* 展开子菜单：白底浅色（压掉皮肤的黑底） */
/* Why 带 li 元素提升特异性：skin 的 ".sidebar-menu > li > .treeview-menu" 为 0,3,1，
   低于它的覆盖会被压掉导致子菜单仍显示皮肤深色底 #181f23 */
.skin-black-blue .sidebar-menu > li > .treeview-menu,
.skin-black-blue .sidebar-menu .treeview-menu,
.skin-black-blue .sidebar-menu .treeview-menu .treeview-menu { background: transparent; }

.skin-black-blue .sidebar-menu .treeview-menu li { background: transparent; border: none; }
.skin-black-blue .sidebar-menu .treeview-menu > li > a,
.skin-black-blue .sidebar-menu .treeview-menu li.treeview > a {
    color: var(--ep-text-regular);
    background: transparent;
    border: none;
    border-radius: 4px;
}
.skin-black-blue .treeview-menu > li > a:hover { background: var(--ep-fill-light); color: var(--ep-color-primary); }
.skin-black-blue .treeview-menu > li.active > a,
.skin-black-blue .treeview-menu > li.active > a:hover { background: transparent; color: var(--ep-color-primary); font-weight: 600; }

/* 菜单分组标题 */
.skin-black-blue .sidebar-menu > li.header { background: transparent; color: var(--ep-text-secondary); }

/* 折叠态：悬停弹出子菜单改为白底浮层 */
.skin-black-blue.sidebar-collapse .sidebar-menu li:hover > a,
.skin-black-blue.sidebar-collapse .sidebar-menu li.active > a { background: #ecf5ff; color: var(--ep-color-primary); }
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu { background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); border-radius: 0 6px 6px 0; }
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu li.treeview > a,
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu li.active > a { color: var(--ep-text-regular); background: transparent; }
.skin-black-blue.sidebar-collapse .sidebar-menu .treeview-menu li.active > a { color: var(--ep-color-primary); font-weight: 600; }