/* ============================================================
   dtbm 浅色高端主题（MotionSites 风格 · 白底版）
   语言：白底 + 淡极光渐变点缀 + 多层柔影卡片 + 渐变主按钮 + 精致徽章。
   纯皮肤：只改配色/质感，不动布局与业务逻辑。逐页引入生效。
   ============================================================ */

:root {
    --p-bg: #f6f8fd;
    --p-card: #ffffff;
    --p-border: #e7edf7;
    --p-border-strong: #d6e0f0;
    --p-text: #14213b;
    --p-text2: #55647f;
    --p-text3: #94a3b8;
    --p-primary: #2563eb;
    --p-primary2: #06b6d4;
    --p-violet: #7c3aed;
    --p-radius: 16px;
    --p-radius-sm: 10px;
    --p-sh-1: 0 1px 2px rgba(20, 40, 80, .05), 0 6px 20px -8px rgba(20, 40, 80, .10);
    --p-sh-2: 0 2px 4px rgba(20, 40, 80, .06), 0 18px 44px -14px rgba(37, 99, 235, .22);
    --p-grad: linear-gradient(135deg, var(--p-primary), var(--p-primary2));
}

/* ---------- 底：近白 + 极淡的蓝紫极光（fixed） ---------- */
html { background: var(--p-bg); }
body { background: transparent !important; color: var(--p-text); }
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(55% 42% at 10% -5%, rgba(37, 99, 235, .07), transparent 60%),
        radial-gradient(45% 38% at 92% 0%, rgba(6, 182, 212, .06), transparent 60%),
        radial-gradient(50% 40% at 60% 110%, rgba(124, 58, 237, .05), transparent 65%),
        var(--p-bg);
}

/* ---------- 卡片：纯白 + 双层柔影 + 悬停抬升 ---------- */
.content-card, .layui-card, .m-card, .stat-card, .alert-card, .info-card,
.detail-card, .list-card, .empty-state, .page-header, .filter-bar, .search-bar {
    background: var(--p-card) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: var(--p-radius) !important;
    box-shadow: var(--p-sh-1) !important;
    color: var(--p-text);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.content-card:hover, .layui-card:hover, .m-card:hover, .alert-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--p-sh-2) !important;
}
.layui-card-header { background: transparent !important; color: var(--p-text) !important; border-bottom: 1px solid var(--p-border) !important; font-weight: 600; }

/* ---------- 标题：重字重 + 渐变短杠 + 渐变点缀 ---------- */
.page-title, .card-title {
    color: var(--p-text) !important;
    font-weight: 800;
    letter-spacing: .01em;
    position: relative;
}
.page-title::before, .card-title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: .95em;
    margin-right: 12px;
    vertical-align: -3px;
    border-radius: 3px;
    background: var(--p-grad);
    box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}
.page-header { padding: 22px 26px !important; }

/* ---------- 表格：干净留白 + 细腻分隔 + 悬停染色 ---------- */
.layui-table, .layui-table-view, .layui-table-box, .layui-table-header, .layui-table-body {
    background: transparent !important;
    color: var(--p-text) !important;
    border-color: var(--p-border) !important;
}
.layui-table th {
    background: #f4f7fd !important;
    color: #64748b !important;
    font-size: 12px;
    letter-spacing: .08em;
    border-color: var(--p-border) !important;
}
.layui-table td { border-color: #eef2f9 !important; color: var(--p-text) !important; background: transparent !important; }
.layui-table tbody tr:hover, .layui-table tbody tr:hover td { background: #f0f6ff !important; }

/* ---------- 表单控件 ---------- */
.layui-input, .layui-textarea, .layui-select {
    background: #fff !important;
    border-color: var(--p-border-strong) !important;
    border-radius: var(--p-radius-sm) !important;
    color: var(--p-text) !important;
    transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.layui-input:focus, .layui-textarea:focus {
    border-color: var(--p-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}
.layui-form-label { color: var(--p-text2) !important; }
.layui-form-select dl { border: 1px solid var(--p-border); border-radius: var(--p-radius-sm); box-shadow: var(--p-sh-2); }
.layui-form-select dl dd.layui-this { background: var(--p-primary); }

/* ---------- 按钮：主按钮渐变+彩影，次按钮描边 ---------- */
.layui-btn:not(.layui-btn-primary) {
    background: var(--p-grad);
    border: none;
    border-radius: var(--p-radius-sm);
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, .40);
    transition: transform .12s ease-out, box-shadow .15s ease-out;
}
.layui-btn:not(.layui-btn-primary):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(37, 99, 235, .50);
    opacity: 1;
}
.layui-btn-primary {
    background: #fff !important;
    border: 1px solid var(--p-border-strong) !important;
    border-radius: var(--p-radius-sm) !important;
    color: var(--p-text2) !important;
}
.layui-btn-primary:hover { border-color: var(--p-primary) !important; color: var(--p-primary) !important; }

/* ---------- 徽章/状态：柔和色底圆角胶囊 ---------- */
.risk-level, .alert-status, .summary-badge, .layui-badge, [class*="status-tag"] {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ---------- 卡片头条（alerts 卡片）：白底渐变淡带替代灰条 ---------- */
.card-summary {
    background: linear-gradient(90deg, #f2f6ff, #f8fbff) !important;
    color: var(--p-text) !important;
    border-bottom: 1px solid var(--p-border) !important;
}
.card-summary .summary-text { color: var(--p-text) !important; font-weight: 600; }
.summary-badge { background: #eef2ff !important; color: #4f46e5 !important; }
.card-actions, .timeline-legend, .timeline-expand-content {
    background: #f8fafd !important;
    border-color: var(--p-border) !important;
}

/* ---------- 处置决策条：现代警示淡染 ---------- */
[style*="FFF1F0"], [style*="fff1f0"] {
    background: #fff5f4 !important;
    border: 1px solid #ffd6d1 !important;
    border-radius: var(--p-radius-sm) !important;
}

/* ---------- 分页 ---------- */
.layui-laypage a, .layui-laypage span {
    background: #fff !important;
    border-color: var(--p-border) !important;
    color: var(--p-text2) !important;
    border-radius: 8px !important;
    margin: 0 2px;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--p-grad) !important; border-radius: 8px; }

/* ---------- 弹层 ---------- */
.layui-layer { border-radius: var(--p-radius) !important; box-shadow: 0 24px 64px -16px rgba(20, 40, 80, .28) !important; overflow: hidden; }
.layui-layer-title { background: #fbfcfe !important; border-bottom: 1px solid var(--p-border) !important; color: var(--p-text) !important; font-weight: 600; }
.layui-layer-btn a { background: var(--p-grad); border: none; border-radius: 8px; color: #fff !important; }
.layui-layer-btn .layui-layer-btn1 { background: #fff; border: 1px solid var(--p-border-strong); color: var(--p-text2) !important; }

/* ============================================================
   高级控件层：图例 chips / 胶囊搜索 / 定制下拉（通用钩子，全站复用）
   ============================================================ */

/* ---------- 图例：淡渐变横条 + 白色胶囊 chips，悬停轻抬 ---------- */
.timeline-legend {
    background: linear-gradient(90deg, #f4f8ff, #fbfdff) !important;
    border: 1px solid var(--p-border) !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
}
.legend-title { color: var(--p-text3) !important; font-size: 12px; letter-spacing: .04em; }
.legend-item {
    background: #fff;
    border: 1px solid var(--p-border);
    border-radius: 999px;
    padding: 4px 12px 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--p-text2);
    box-shadow: 0 1px 3px rgba(20, 40, 80, .06);
    transition: transform .15s ease-out, box-shadow .15s ease-out, color .15s ease-out;
}
.legend-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(20, 40, 80, .15);
    color: var(--p-text);
}
.legend-node { box-shadow: 0 0 0 3px rgba(20, 40, 80, .05); }

/* ---------- 工具栏：白色胶囊工作条 ---------- */
.toolbar {
    background: #fff !important;
    border: 1px solid var(--p-border) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    box-shadow: var(--p-sh-1) !important;
}
.toolbar .layui-btn { border-radius: 999px !important; }

/* ---------- 搜索框：放大镜图标 + 灰底胶囊，聚焦点亮（全站钩子：placeholder 含「搜索」的输入框） ---------- */
input[placeholder*="搜索"], input[placeholder*="search" i], .search-input {
    border-radius: 999px !important;
    padding-left: 38px !important;
    min-width: 240px;
    background-color: #f4f7fd !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px !important;
    border-color: transparent !important;
    transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out;
}
input[placeholder*="搜索"]:focus, .search-input:focus {
    background-color: #fff !important;
    border-color: var(--p-primary) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12) !important;
}

/* ---------- 原生下拉：去系统皮，胶囊 + 自绘箭头 + 焦点光环（全站钩子） ---------- */
.toolbar select, .filter-bar select, .page-header select, .layui-inline > select, select.m-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    border: 1px solid var(--p-border-strong);
    border-radius: 999px;
    padding: 7px 34px 7px 16px;
    font-size: 13px;
    color: var(--p-text2);
    cursor: pointer;
    line-height: 1.4;
    transition: border-color .15s ease-out, box-shadow .15s ease-out, color .15s ease-out;
}
.toolbar select:hover, .layui-inline > select:hover, select.m-select:hover {
    border-color: var(--p-primary);
    color: var(--p-text);
}
.toolbar select:focus, .layui-inline > select:focus, select.m-select:focus {
    outline: none;
    border-color: var(--p-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* ============================================================
   全组件覆盖：未点名元素的统一高级化
   ============================================================ */

/* ---------- 复选框 / 单选 / 开关 ---------- */
.layui-form-checkbox span, .layui-form-radio span { color: var(--p-text2); }
.layui-form-checked span, .layui-form-radioed span { color: var(--p-primary) !important; }
.layui-form-checkbox[lay-skin="primary"] i { border-color: var(--p-border-strong) !important; border-radius: 6px !important; }
.layui-form-checked[lay-skin="primary"] i { background: var(--p-grad) !important; border-color: transparent !important; }
.layui-form-radio > i { color: var(--p-border-strong); }
.layui-form-radioed > i { color: var(--p-primary) !important; }
.layui-form-switch { border-color: var(--p-border-strong) !important; background: #eef2f9; border-radius: 999px !important; }
.layui-form-onswitch { background: var(--p-grad) !important; border-color: transparent !important; }

/* ---------- 日期选择面板（laydate） ---------- */
.layui-laydate { border-radius: var(--p-radius-sm) !important; box-shadow: var(--p-sh-2) !important; border: 1px solid var(--p-border) !important; overflow: hidden; }
.layui-laydate-header { background: #fbfcfe; border-bottom: 1px solid var(--p-border); }
.layui-laydate .layui-this { background: var(--p-primary) !important; border-radius: 8px; }
.layui-laydate-footer span:hover { color: var(--p-primary); }

/* ---------- 消息提示 / 加载层 ---------- */
.layui-layer-msg { border-radius: 999px !important; box-shadow: 0 12px 32px -8px rgba(20, 40, 80, .25) !important; border: 1px solid var(--p-border) !important; }
.layui-layer-loading { background: transparent !important; box-shadow: none !important; }

/* ---------- 上传区：虚线舱位 ---------- */
.layui-upload-drag {
    background: #fafcff !important;
    border: 1.5px dashed var(--p-border-strong) !important;
    border-radius: var(--p-radius) !important;
    transition: border-color .15s ease-out, background .15s ease-out;
}
.layui-upload-drag:hover { border-color: var(--p-primary) !important; background: #f0f6ff !important; }

/* ---------- 进度条 ---------- */
.layui-progress { background: #eef2f9 !important; border-radius: 999px !important; }
.layui-progress-bar { background: var(--p-grad) !important; border-radius: 999px !important; }

/* ---------- 页签（页面内 tab） ---------- */
.layui-tab-title { border-color: var(--p-border) !important; }
.layui-tab-title li { color: var(--p-text2); transition: color .15s ease-out; }
.layui-tab-title .layui-this { color: var(--p-primary) !important; font-weight: 600; }
.layui-tab-title .layui-this::after { border: none !important; border-bottom: 2px solid var(--p-primary) !important; }
.layui-tab-card { border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; box-shadow: var(--p-sh-1) !important; overflow: hidden; }
.layui-tab-card > .layui-tab-title { background: #fbfcfe !important; }

/* ---------- 面包屑 / 引用块 ---------- */
.layui-breadcrumb a { color: var(--p-text3) !important; }
.layui-breadcrumb a:hover { color: var(--p-primary) !important; }
.layui-elem-quote {
    background: #f4f8ff !important;
    border-left: 4px solid var(--p-primary) !important;
    border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0 !important;
    color: var(--p-text2) !important;
}

/* ---------- 时间轴：节点光环 + 连线淡化（含 alerts 迷你时间轴） ---------- */
.mini-timeline-node, .timeline-node, .layui-timeline-axis {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.mini-timeline-node:hover { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
.layui-timeline-item::before { background: var(--p-border) !important; }

/* ---------- 空态：居中留白 + 淡图标感 ---------- */
.empty-state {
    color: var(--p-text3) !important;
    padding: 72px 20px !important;
    letter-spacing: .03em;
}
.empty-state:not(:has(i, svg, img))::before {
    content: '◎';
    display: block;
    font-size: 34px;
    margin-bottom: 12px;
    color: #c7d4e8;
}

/* ---------- 统计数字：渐变大数字钩子（.stat-value / .status-value / .kpi-num-lite） ---------- */
.stat-value, .status-value, .kpi-num-lite, .stat-num {
    background: var(--p-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---------- 链接 / 代码 ---------- */
a { color: var(--p-primary); transition: color .12s ease-out; }
a:hover { color: var(--p-primary2); }
code, .code, pre {
    background: #f4f7fd !important;
    border: 1px solid var(--p-border) !important;
    border-radius: 8px;
    color: #3b4c6b !important;
}

/* ---------- 表格工具行 / 表格容器圆角 ---------- */
.layui-table-tool { background: #fbfcfe !important; border-color: var(--p-border) !important; }
.layui-table-view { border-radius: var(--p-radius-sm) !important; overflow: hidden; box-shadow: var(--p-sh-1); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cdd9ec; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b3c5e0; }
::-webkit-scrollbar-track { background: transparent; }