/* =====================================================================
   oosite 变量驱动主题引擎
   - 颜色 × 风格 双维度正交组合（无限自定义色 + 经典/现代/暗夜）
   - 全部规则以 body.skin-oosite-active 作用域 + !important 覆盖 console.css
   - 默认（经典 + 原样色）零回归：变量即原版 ThinkAdmin 取值
   ===================================================================== */

:root {
    /* ---- 颜色 token（默认 = 原版值，保证 default 零回归）---- */
    /* 注意：渐变两端默认取同色，使 default 呈现"纯色"效果，与原版完全一致； */
    /*      JS 派生配色时会把 bg2 设为更暗的色，从而呈现渐变。 */
    --oos-side-bg: #393D49;
    --oos-side-bg2: #393D49;
    --oos-side-text: #ffffff;
    --oos-menu-bg: #6d6e80;            /* 子菜单项底色（原内联 #6d6e80） */
    --oos-menu-hover: hsla(0, 0%, 39%, .2);  /* 原 Layui 菜单悬浮色 */
    --oos-header-bg: #393D49;
    --oos-header-bg2: #393D49;
    --oos-header-glass: linear-gradient(90deg, #393D49, #393D49);
    --oos-header-text: #ffffff;
    --oos-primary: #1E9FFF;            /* 强调主色（仅 oos-accent 时启用） */
    --oos-primary-hover: #40a9ff;
    --oos-link: #1E9FFF;

    /* ---- 风格 token ---- */
    --oos-radius: 0px;
    --oos-shadow: none;
    --oos-surface: #ffffff;
    --oos-bg: #f2f3f5;
    --oos-text: #333333;
    --oos-border: rgba(0, 0, 0, .08);
    --oos-glass: none;                 /* backdrop-filter */
    --oos-stripe: #f7f9fc;             /* 表格斑马纹 */
    --oos-row-hover: #eef4ff;          /* 表格行悬浮 */
}

/* 风格：现代（圆角 + 阴影 + 毛玻璃 + 表格美化） */
body.oos-style-modern {
    --oos-radius: 8px;
    --oos-shadow: 0 6px 22px rgba(17, 24, 39, .08);
    --oos-surface: #ffffff;
    --oos-bg: #f4f6f9;
    --oos-border: rgba(17, 24, 39, .08);
    --oos-glass: blur(10px);
    --oos-stripe: #f7f9fc;
    --oos-row-hover: #eef4ff;
}

/* 风格：暗夜（深色表面 + 浅色文字 + 更深侧栏 + 毛玻璃） */
body.oos-style-dark {
    --oos-radius: 8px;
    --oos-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    --oos-surface: #1e2530;
    --oos-bg: linear-gradient(135deg, #141821, #1b2230);
    --oos-text: #e6e8eb;
    --oos-border: rgba(255, 255, 255, .10);
    --oos-glass: blur(12px);
    /* 深色下用半透明白做斑马纹/悬浮，保证浅色文字可读 */
    --oos-stripe: rgba(255, 255, 255, .05);
    --oos-row-hover: rgba(255, 255, 255, .10);
}

/* ===================== 基础结构（始终生效） ===================== */

/* 左则菜单侧栏：渐变主色 */
body.skin-oosite-active .layui-layout > .layui-side {
    background: linear-gradient(180deg, var(--oos-side-bg), var(--oos-side-bg2)) !important;
}

/* 子菜单项底色（覆盖内联 #6d6e80） */
body.skin-oosite-active .layui-layout > .layui-side .layui-side-scroll dl a {
    background: var(--oos-menu-bg) !important;
    color: var(--oos-side-text) !important;
}

/* 侧栏导航 UL 本体与展开子菜单容器仍是原版 #393D49 / rgba(0,0,0,.3) 硬编码，
   会以黑色块状残留，设为透明露出 .layui-side 主题渐变 */
body.skin-oosite-active .layui-layout > .layui-side .layui-nav-tree,
body.skin-oosite-active .layui-layout > .layui-side .layui-nav-child {
    background: transparent !important;
}

/* 二级父项（覆盖内联 background:#393D49）与常规菜单项透明，露出侧栏渐变 */
body.skin-oosite-active .layui-layout > .layui-side .layui-nav-tree > li > a,
body.skin-oosite-active .layui-layout > .layui-side .layui-nav-item > a {
    background: transparent !important;
    color: var(--oos-side-text) !important;
}
body.skin-oosite-active .layui-layout > .layui-side .layui-nav-item a:hover {
    background: var(--oos-menu-hover) !important;
}

/* 顶栏：主色渐变（覆盖 console.css #393D49 !important） */
body.skin-oosite-active .layui-header {
    background: linear-gradient(90deg, var(--oos-header-bg), var(--oos-header-bg2)) !important;
}
body.skin-oosite-active .layui-header .layui-logo {
    color: var(--oos-header-text) !important;
}

/* 主体背景（暗夜为渐变） */
body.skin-oosite-active .layui-layout > .layui-body {
    background: var(--oos-bg) !important;
}

/* 内容卡片：圆角 + 阴影 + 表面色 */
body.skin-oosite-active .layui-layout > .layui-body > .layui-card {
    border-radius: var(--oos-radius) !important;
    box-shadow: var(--oos-shadow) !important;
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
}

/* 输入框 / 文本域 / 下拉 圆角（现代/暗夜） */
body.skin-oosite-active.oos-style-modern .layui-input,
body.skin-oosite-active.oos-style-modern .layui-textarea,
body.skin-oosite-active.oos-style-modern .layui-form-select .layui-input,
body.skin-oosite-active.oos-style-modern .layui-btn,
body.skin-oosite-active.oos-style-dark .layui-input,
body.skin-oosite-active.oos-style-dark .layui-textarea,
body.skin-oosite-active.oos-style-dark .layui-form-select .layui-input {
    border-radius: var(--oos-radius) !important;
}
body.skin-oosite-active.oos-style-dark .layui-input,
body.skin-oosite-active.oos-style-dark .layui-textarea,
body.skin-oosite-active.oos-style-dark .layui-form-select .layui-input {
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
    border-color: var(--oos-border) !important;
}

/* 顶栏毛玻璃（现代/暗夜） */
body.skin-oosite-active.oos-style-modern .layui-header,
body.skin-oosite-active.oos-style-dark .layui-header {
    background: var(--oos-header-glass) !important;
    -webkit-backdrop-filter: var(--oos-glass) !important;
    backdrop-filter: var(--oos-glass) !important;
}

/* ---- 顶栏防跑版：菜单过多时禁止换行重叠，收紧间距，超出部分横向滚动兜底 ---- */
body.skin-oosite-active .layui-header .layui-nav {
    white-space: nowrap;
}
/* layui-nav-item 原生 float:left，float 会无视 nowrap 而 wrap 到第二行与右侧项重叠，
   改回 inline-block 让 nowrap 生效；配合 overflow 横向滚动兜底 */
body.skin-oosite-active .layui-header .layui-nav .layui-nav-item {
    float: none !important;
}
body.skin-oosite-active .layui-header .layui-layout-left {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;           /* Firefox 隐藏滚动条 */
}
body.skin-oosite-active .layui-header .layui-layout-left::-webkit-scrollbar {
    display: none;                   /* Chrome 隐藏滚动条 */
}
body.skin-oosite-active .layui-header .layui-layout-left .layui-nav-item > a {
    padding: 0 12px !important;
    font-size: 13px;
}
body.skin-oosite-active .layui-header .layui-layout-right .layui-nav-item > a {
    padding: 0 12px !important;
}

/* ===================== 强调色（仅 oos-accent 启用） ===================== */
/* 顶栏当前选中项 */
body.skin-oosite-active.oos-accent .layui-header .layui-nav-item.layui-this {
    background: var(--oos-primary) !important;
}
/* 侧栏激活菜单项：主色填充 */
body.skin-oosite-active.oos-accent .layui-layout > .layui-side .layui-nav-tree .layui-this > a,
body.skin-oosite-active.oos-accent .layui-layout > .layui-side .layui-nav-item.layui-this > a {
    background: var(--oos-primary) !important;
    color: #fff !important;
}
/* 主按钮：仅主题化"普通/常规"按钮，保留语义色（danger/warm/disabled）与描边按钮（primary） */
body.skin-oosite-active.oos-accent .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled) {
    background: var(--oos-primary) !important;
    border-color: var(--oos-primary) !important;
    color: #fff !important;
}
body.skin-oosite-active.oos-accent .layui-btn:not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm):not(.layui-btn-disabled):hover {
    background: var(--oos-primary-hover) !important;
    border-color: var(--oos-primary-hover) !important;
}
/* 描边按钮（如"重置"）：透明底 + 主色描边文字，避免与主色底同色导致文字不可见 */
body.skin-oosite-active.oos-accent .layui-btn-primary {
    background: transparent !important;
    border: 1px solid var(--oos-primary) !important;
    color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-btn-primary:hover {
    background: var(--oos-primary) !important;
    color: #fff !important;
}
/* 内容区链接（仅未显式着色的链接跟随主题） */
body.skin-oosite-active.oos-accent .layui-body a {
    color: var(--oos-link);
}
/* 开关选中 */
body.skin-oosite-active.oos-accent .layui-form-onswitch {
    background: var(--oos-primary) !important;
    border-color: var(--oos-primary) !important;
}
/* 分页当前页 */
body.skin-oosite-active.oos-accent .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background: var(--oos-primary) !important;
}
/* 选项卡选中 */
body.skin-oosite-active.oos-accent .layui-tab-title .layui-this {
    color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-tab-title .layui-this:after {
    border-bottom-color: var(--oos-primary) !important;
}
/* 表格头主色（与表格美化联动） */
body.skin-oosite-active.oos-accent .layui-table-header,
body.skin-oosite-active.oos-accent .layui-table thead tr {
    background: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-table thead tr th,
body.skin-oosite-active.oos-accent .layui-table-header th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600;
}

/* ===================== 表格美化（现代/暗夜） ===================== */
body.skin-oosite-active.oos-style-modern .layui-table,
body.skin-oosite-active.oos-style-dark .layui-table {
    border-radius: var(--oos-radius);
    overflow: hidden;
}
body.skin-oosite-active.oos-style-modern .layui-table thead tr,
body.skin-oosite-active.oos-style-dark .layui-table thead tr {
    background: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-style-modern .layui-table thead tr th,
body.skin-oosite-active.oos-style-dark .layui-table thead tr th {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600;
}
/* 斑马纹与悬浮：用变量随风格切换（暗夜为半透明白，保证浅色文字可读） */
body.skin-oosite-active.oos-style-modern .layui-table[lay-even] tbody tr:nth-child(even),
body.skin-oosite-active.oos-style-dark .layui-table[lay-even] tbody tr:nth-child(even),
body.skin-oosite-active.oos-style-modern .layui-table[lay-even] tbody tr:nth-child(even) > td,
body.skin-oosite-active.oos-style-dark .layui-table[lay-even] tbody tr:nth-child(even) > td {
    background: var(--oos-stripe) !important;
}
body.skin-oosite-active.oos-style-modern .layui-table tbody tr:hover,
body.skin-oosite-active.oos-style-dark .layui-table tbody tr:hover,
body.skin-oosite-active.oos-style-modern .layui-table tbody tr:hover > td,
body.skin-oosite-active.oos-style-dark .layui-table tbody tr:hover > td {
    background: var(--oos-row-hover) !important;
}
/* 暗夜：表格单元格深色化 */
body.skin-oosite-active.oos-style-dark .layui-table,
body.skin-oosite-active.oos-style-dark .layui-table td,
body.skin-oosite-active.oos-style-dark .layui-table th,
body.skin-oosite-active.oos-style-dark .layui-table-view .layui-table,
body.skin-oosite-active.oos-style-dark .layui-table-body {
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
    border-color: var(--oos-border) !important;
}
body.skin-oosite-active.oos-style-dark .layui-table-view,
body.skin-oosite-active.oos-style-dark .layui-table-grid-down {
    background: var(--oos-surface) !important;
    border-color: var(--oos-border) !important;
}

/* ===================== 暗夜：卡片内文字/边框适配 ===================== */
body.skin-oosite-active.oos-style-dark .layui-card-header {
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
    border-color: var(--oos-border) !important;
}
body.skin-oosite-active.oos-style-dark .layui-elem-field,
body.skin-oosite-active.oos-style-dark .layui-elem-quote {
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
    border-color: var(--oos-border) !important;
}

/* ===================== 切换入口按钮显隐（替代旧 skin-oosite-* 类） ===================== */
/* inline-block 与 layui-nav-item 原生 float:left 布局兼容；block 会脱离浮动流导致与相邻项重叠 */
body.skin-oosite-active .skin-switch-item {
    display: inline-block !important;
    white-space: nowrap;
}

/* ===================== 主题切换面板（玻璃拟态卡片） ===================== */
.oos-skin-panel {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
.oos-skin-card {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(17, 24, 39, .18);
    padding: 16px;
    color: #333;
}
.oos-skin-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}
.oos-skin-sub {
    font-size: 12px;
    color: #888;
    margin: 12px 0 8px;
}
.oos-skin-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.oos-swatch {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
    border: 2px solid transparent;
}
.oos-swatch:hover {
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.oos-swatch.oos-active {
    border-color: #333;
    box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(0, 0, 0, .25);
}
.oos-skin-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px;
    border-radius: 9px;
    border: 2px solid transparent;
}
.oos-skin-custom.oos-active {
    border-color: var(--oos-primary, #1E9FFF);
    background: rgba(30, 159, 255, .08);
}
.oos-skin-custom input[type=color] {
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    padding: 0;
}
.oos-skin-custom-tip {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}
.oos-skin-styles {
    display: flex;
    gap: 6px;
}
.oos-style-opt {
    flex: 1;
    text-align: center;
    padding: 7px 0;
    font-size: 13px;
    border-radius: 9px;
    cursor: pointer;
    background: #f1f2f4;
    color: #555;
    transition: all .15s ease;
}
.oos-style-opt:hover {
    background: #e6e8ec;
}
.oos-style-opt.oos-active {
    background: var(--oos-primary, #1E9FFF);
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 159, 255, .35);
}

/* =====================================================================
   配色补漏（oos-accent：让默认蓝/绿残留组件跟随主题主色）
   ===================================================================== */

/* ---- 表单聚焦态（layui 默认蓝色边框/光晕） ---- */
body.skin-oosite-active.oos-accent .layui-input:focus,
body.skin-oosite-active.oos-accent .layui-textarea:focus,
body.skin-oosite-active.oos-accent .layui-form-select .layui-input:focus {
    border-color: var(--oos-primary) !important;
    box-shadow: 0 0 0 2px var(--oos-primary-soft, rgba(30, 159, 255, .22)) !important;
}

/* ---- 复选框：常规与 primary 描边两种 ---- */
body.skin-oosite-active.oos-accent .layui-form-checked i {
    background-color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-form-checked[lay-skin="primary"] {
    border-color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-form-checked[lay-skin="primary"] i {
    background-color: var(--oos-primary) !important;
    color: #fff !important;
}

/* ---- 单选框 ---- */
body.skin-oosite-active.oos-accent .layui-form-radioed {
    border-color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-form-radioed > i {
    color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .layui-form-radio > i:hover {
    color: var(--oos-primary);
}

/* ---- layer 弹窗主按钮（本仓库硬编码 #1E9FFF） ---- */
body.skin-oosite-active.oos-accent .layui-layer-btn .layui-layer-btn0 {
    border-color: var(--oos-primary) !important;
    background-color: var(--oos-primary) !important;
    color: #fff !important;
}
body.skin-oosite-active.oos-accent .layui-layer-btn .layui-layer-btn0:hover {
    border-color: var(--oos-primary-hover) !important;
    background-color: var(--oos-primary-hover) !important;
}

/* ---- laydate 日期控件（v5.0.9：选中 .laydate-selected / 当日 .layui-this / 底部日期链接 #5FB878） ---- */
body.skin-oosite-active.oos-accent .layui-laydate-content td.laydate-selected {
    background-color: var(--oos-primary) !important;
    color: #fff !important;
}
body.skin-oosite-active.oos-accent .layui-laydate .layui-this {
    background-color: var(--oos-primary) !important;
    color: #fff !important;
}
body.skin-oosite-active.oos-accent .layui-laydate-footer span[lay-type="date"] {
    color: var(--oos-primary) !important;
}

/* ---- xm-select 多选下拉（v1.2.4：选中标签 .xm-label-block 配色由 JS 内联写入，需 !important 覆盖） ---- */
body.skin-oosite-active.oos-accent .xm-select .xm-label-block {
    background-color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .xm-select .xm-icon {
    color: var(--oos-primary) !important;
}
body.skin-oosite-active.oos-accent .xm-body .xm-option:hover .xm-option-content {
    color: var(--oos-primary);
}

/* ---- 分页元素暗夜可读性（layui 默认深色文字在暗夜下不可见） ---- */
body.skin-oosite-active.oos-style-dark .layui-laypage a,
body.skin-oosite-active.oos-style-dark .layui-laypage span,
body.skin-oosite-active.oos-style-dark .layui-laypage button,
body.skin-oosite-active.oos-style-dark .layui-laypage .layui-laypage-count,
body.skin-oosite-active.oos-style-dark .layui-laypage .layui-laypage-limits {
    color: var(--oos-text) !important;
}
body.skin-oosite-active.oos-style-dark .layui-laypage a,
body.skin-oosite-active.oos-style-dark .layui-laypage span {
    background: transparent !important;
}

/* =====================================================================
   暗夜风格补漏（内容页容器/标题/表单块）
   ===================================================================== */

/* ThinkAdmin 内容页主容器（console.css:132 白底硬编码，暗夜下必须深色化） */
body.skin-oosite-active.oos-style-dark .think-box-shadow {
    background: var(--oos-surface) !important;
    color: var(--oos-text) !important;
    border-radius: var(--oos-radius);
    box-shadow: var(--oos-shadow) !important;
}

/* 现代风格：内容页主容器同样圆角化 + 柔和阴影（与 layui-card 一致） */
body.skin-oosite-active.oos-style-modern .think-box-shadow {
    border-radius: var(--oos-radius);
    box-shadow: var(--oos-shadow) !important;
}

/* 内容页 fieldset（条件搜索区）与 legend */
body.skin-oosite-active.oos-style-dark fieldset {
    border-color: var(--oos-border) !important;
    color: var(--oos-text) !important;
}
body.skin-oosite-active.oos-style-dark fieldset legend {
    color: var(--oos-text) !important;
}

/* 暗夜下内容区普通文字（表格/输入框已单独处理，这里兜底继承链上的硬编码深色文字容器） */
body.skin-oosite-active.oos-style-dark .layui-body .layui-table-page {
    color: var(--oos-text);
}

/* 暗夜下表单标签/说明文字可读性（layui 默认深色文字在深色表面上不可见） */
body.skin-oosite-active.oos-style-dark .layui-body .layui-form-label,
body.skin-oosite-active.oos-style-dark .layui-body .layui-form-mid,
body.skin-oosite-active.oos-style-dark .layui-body .layui-form-item > label,
body.skin-oosite-active.oos-style-dark .layui-body .layui-form-pane .layui-form-label {
    color: var(--oos-text) !important;
    background: transparent !important;
    border-color: var(--oos-border) !important;
}