/* =============================================================
   后台紫色主题（覆盖式）
   -------------------------------------------------------------
   这个文件只改颜色，不改任何结构和尺寸，所以在原样式之后加载即可，
   Layui / Bootstrap 的文件一个字都不动，功能完全不受影响。
   ============================================================= */

:root {
    /* 主色：和小程序端统一成紫色系 */
    --primary:          #6c5ce7;
    --primary-dark:     #4b3ecb;
    --primary-light:    #a29bfe;
    --primary-soft:     #efedfd;

    /* 顶栏：深紫渐变 */
    --header-1:         #2b1e4f;
    --header-2:         #453171;

    /* 页面与文字 */
    --bg:               #f5f6fb;
    --card:             #ffffff;
    --text:             #2d3142;
    --text-muted:       #6b7085;
    --border:           #e6e8f0;
}

/* ---------- 页面底色与文字 ---------- */
body {
    background: var(--bg);
    color: var(--text);
}

/* 顶部导航栏：原来是纯色 #393D49，改成深紫渐变 */
.header,
.navbar-inverse {
    background: linear-gradient(90deg, var(--header-1) 0%, var(--header-2) 100%) !important;
    border-color: var(--header-1) !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: #d9d5f5;
}

/* 鼠标悬停 / 当前页：加一条主色下划线，比单纯变亮更清楚 */
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: rgba(108, 92, 231, .55);
    box-shadow: inset 0 -3px 0 var(--primary-light);
}

/* 移动端展开按钮的三道杠 */
.navbar-inverse .navbar-toggle {
    border-color: rgba(255, 255, 255, .35);
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, .12);
}
.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

/* ---------- 卡片配色：改成同色系渐变，避免原来几组颜色互相打架 ---------- */
.bg-purple {
    background: linear-gradient(135deg, #6c5ce7, #8b7bf0) !important;
    color: #fff !important;
}
.bg-cyan {
    background: linear-gradient(135deg, #1fb6c6, #45c9d6) !important;
    color: #fff !important;
}
.bg-brown {
    background: linear-gradient(135deg, #e08b3c, #f0a558) !important;
    color: #fff !important;
}
.bg-pink {
    background: linear-gradient(135deg, #ec5f8a, #fd7fae) !important;
    color: #fff !important;
}
.bg-yellow {
    background: linear-gradient(135deg, #f0a72c, #fbc35c) !important;
    color: #fff !important;
}
.bg-gray {
    background: linear-gradient(135deg, #636e72, #7b858f) !important;
    color: #fff !important;
}
/* 补：首页「单集售出金额」用的是 card-header bg-danger，
   但 bg-danger 没有底色、标题又被 [class*="bg-"] 规则强制变白，
   结果白字写白底看不见。这里只给卡片标题栏补齐红色渐变底。 */
.card > .card-header.bg-danger,
.card-header.bg-danger {
    background: linear-gradient(135deg, #ff8a8a, #e85252) !important;
    color: #fff !important;
}
.bg-green {
    background: linear-gradient(135deg, #16a085, #2bc4a5) !important;
    color: #fff !important;
}
.bg-red {
    background: linear-gradient(135deg, #e74c3c, #f0655a) !important;
    color: #fff !important;
}
.bg-blue {
    background: linear-gradient(135deg, #2d8cf0, #58a9f5) !important;
    color: #fff !important;
}

/* 卡片本体：白底 + 柔和阴影 + 主色顶边 */
.card,
.layui-card {
    border: none;
    border-radius: 6px;
    background: var(--card);
    box-shadow: 0 1px 3px rgba(45, 49, 66, .06), 0 6px 16px rgba(45, 49, 66, .05);
}

.card > .card-header,
.layui-card > .layui-card-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    color: var(--text);
    font-weight: 500;
}

/* 卡片标题：
   白底卡片必须用深色字，只有带 bg-* 彩色头的卡片才用白色，
   否则白底上写白字会完全看不见 */
.card > .card-header > h4 {
    color: var(--text);
    font-weight: 500;
    letter-spacing: .3px;
}
.card > .card-header[class*="bg-"] > h4 {
    color: #fff;
    font-weight: 400;
}
.card > .card-body > p {
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
}

/* 卡片右上角的「更多」按钮：同样按卡片头底色区分 */
.card-actions > li > button {
    color: var(--text-muted);
}
.card > .card-header[class*="bg-"] .card-actions > li > button {
    color: rgba(255, 255, 255, .85);
}
.card-actions > li > button:hover {
    color: var(--primary);
}
.card > .card-header[class*="bg-"] .card-actions > li > button:hover {
    color: #fff;
}

/* ---------- 按钮 ---------- */
/* Layui 默认按钮原来是青绿色 #009688，统一换成主紫 */
.layui-btn {
    background-color: var(--primary);
}
.layui-btn:hover,
.layui-btn:active {
    background-color: var(--primary-dark);
}
.layui-btn-primary {
    background-color: #fff;
    color: var(--text);
    border-color: var(--border);
}
.layui-btn-primary:hover {
    border-color: var(--primary);
    color: var(--primary);
    background-color: var(--primary-soft);
}
.layui-btn-normal {
    background-color: var(--primary);
}
.layui-btn-warm {
    background-color: #f0a72c;
}
.layui-btn-danger {
    background-color: #e74c3c;
}
.layui-btn-disabled,
.layui-btn-disabled:hover {
    background-color: #c9ccd8;
    color: #fff;
}

/* Bootstrap 按钮 */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}
.btn-link {
    color: var(--primary);
}

/* ---------- 表格 ---------- */
.layui-table th,
.table > thead > tr > th {
    background-color: var(--primary-soft);
    color: var(--primary-dark);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
}

.table-hover > tbody > tr:hover {
    background-color: var(--primary-soft);
}

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

/* 斑马纹也调成浅紫，和主色呼应 */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafaff;
}

/* ---------- 表单 ---------- */
.layui-input:focus,
.layui-textarea:focus,
.layui-select:focus,
.form-control:focus {
    border-color: var(--primary-light) !important;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, .12) !important;
}

.layui-form-checked[lay-skin="primary"] i,
.layui-form-checkbox[lay-skin="primary"]:hover i,
.layui-form-checked i,
.layui-form-select dl dd.layui-this,
.layui-layedit-tool .layui-this {
    border-color: var(--primary);
    background-color: var(--primary);
}

.layui-form-radio > i:hover,
.layui-form-radioed > i {
    color: var(--primary);
}

.layui-form-switch {
    border-color: var(--primary);
}
.layui-form-onswitch {
    border-color: var(--primary);
    background-color: var(--primary);
}

/* ---------- 分页 ---------- */
.layui-laypage a,
.layui-laypage span {
    border-color: var(--border);
    color: var(--text-muted);
}
.layui-laypage a:hover {
    color: var(--primary);
    border-color: var(--primary-light);
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: var(--primary);
}
.layui-laypage .layui-laypage-curr em {
    color: #fff;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}
.pagination > li > a {
    color: var(--primary);
}

/* ---------- 标签 / 徽标 / 链接 ---------- */
a {
    color: var(--primary);
}
a:hover,
a:focus {
    color: var(--primary-dark);
}

.label-primary,
.badge-primary {
    background-color: var(--primary);
}
.label-success, .badge-success { background-color: #16a085; }
.label-warning, .badge-warning { background-color: #f0a72c; }
.label-danger,  .badge-danger  { background-color: #e74c3c; }
.label-info,    .badge-info    { background-color: #2d8cf0; }

/* ---------- 弹层 / 选项卡 ---------- */
.layui-layer-title {
    background: linear-gradient(90deg, var(--header-1), var(--header-2));
    color: #fff;
    border-bottom: none;
}

.layui-tab-title .layui-this {
    color: var(--primary-dark);
}
.layui-tab-title .layui-this:after {
    border-color: var(--primary);
}
.layui-tab-brief > .layui-tab-title .layui-this {
    color: var(--primary);
}
.layui-tab-brief > .layui-tab-more li.layui-this:after,
.layui-tab-brief > .layui-tab-title .layui-this:after {
    border-bottom-color: var(--primary);
}

/* 进度条 */
.layui-progress-bar,
.progress-bar {
    background-color: var(--primary);
}

/* ---------- 面板与页脚 ---------- */
.panel-primary > .panel-heading {
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
}
.panel-default > .panel-heading {
    background: var(--primary-soft);
    color: var(--primary-dark);
    border-color: var(--border);
}

.panel-footer,
.navbar-fixed-bottom {
    background: var(--card);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* 页面主标题区：左边一条主色竖线，视觉上和顶栏呼应 */
h1, h2, h3, h4 {
    color: var(--text);
}

/* =============================================================
   登录页（页面结构和交互都不动，只换颜色）
   ============================================================= */
.containerT h1 {
    color: #fff !important;
    font-weight: 300;
    letter-spacing: 2px;
}

/* 粒子画布还没画出来时先垫一层深紫，避免白底上看不见白色标题 */
#container {
    background: #241f45 !important;
}

/* 输入框：原来边框和文字都是白色半透明，聚焦时变白底。
   这里只调整透明度让它在紫色粒子背景上更清楚，宽度动画保持原样 */
#entry_form input {
    border-color: rgba(255, 255, 255, .5) !important;
    background-color: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
}
#entry_form input:hover {
    background-color: rgba(255, 255, 255, .3) !important;
}
#entry_form input:focus {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--text) !important;
}

/* 按钮：白底黑字 → 紫色渐变白字 */
form button {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    color: #fff !important;
}
form button:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
}

/* 登录失败的提示文字：红色保留语义，调柔和一点 */
.prompt {
    color: #ffb8b8 !important;
}