/*!
 * 宠盟主运营后台 · 设计系统 theme.css
 * 依据《后台设计资料汇总》: 8px 模数 · 品牌色+功能色 · 文字层级 · 统一控件态
 * 作为 layui 之上的统一皮肤, 各页在 layui.css 之后引入即可全局生效。
 */
:root {
    /* —— 品牌色(与小程序端呼应, 青绿冷色系, 沉稳) —— */
    --brand: #1fb6c9;
    --brand-d: #159bad;
    --brand-l: #e8f8fb;
    /* —— 功能色: 成功/链接/警告/错误 —— */
    --success: #16b777;
    --link: #1e9fff;
    --warning: #ff9f24;
    --error: #f53f3f;
    /* —— 文字层级: 标题/正文/二级/失效 —— */
    --t-title: #1d2129;
    --t-body: #4e5969;
    --t-2nd: #86909c;
    --t-disable: #c9cdd4;
    /* —— UI 元素色: 背景/表头/描边/分割 —— */
    --bg: #f2f3f5;
    --card: #ffffff;
    --thead: #f7f8fa;
    --border: #e5e6eb;
    --divider: #f0f1f3;
    /* —— 圆角/阴影/间距(8 模数) —— */
    --radius: 8px;
    --radius-s: 4px;
    /* 更轻的阴影(2-4px blur), 卡片/表格通用 */
    --shadow: 0 1px 3px 0 rgba(17, 31, 44, .06), 0 0 1px 0 rgba(17, 31, 44, .05);
    --shadow-h: 0 2px 8px 0 rgba(17, 31, 44, .1);
    /* —— 字号层级: 页面18 / 模块16 / 正文14 / 辅助12 —— */
    --fs-page: 18px;
    --fs-title: 16px;
    --fs-body: 14px;
    --fs-aux: 12px;
}

/* —— 基础排版: 正文 14px, 中文优先字体 —— */
body {
    background: var(--bg);
    color: var(--t-body);
    font-size: 14px;
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
}
.page { padding: 16px; }
h1, h2, h3, h4 { color: var(--t-title); }

/* —— 字体层级工具类: 标题/正文/辅助 分级色与字号 —— */
.t-page  { font-size: var(--fs-page);  font-weight: 600; color: var(--t-title); line-height: 1.4; }
.t-title { font-size: var(--fs-title); font-weight: 600; color: var(--t-title); line-height: 1.5; }
.t-body  { font-size: var(--fs-body);  color: var(--t-body); }
.t-aux   { font-size: var(--fs-aux);   color: var(--t-2nd); }
.page-title { font-size: var(--fs-page); font-weight: 600; color: var(--t-title); margin: 0 0 16px; line-height: 1.4; }

/* —— 卡片/工具栏: 圆角 8px + 轻阴影 + 浅边框 —— */
.toolbar, .layui-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.toolbar { padding: 14px 16px; margin-bottom: 16px; }
.layui-card-header { color: var(--t-title); font-weight: 600; font-size: var(--fs-title); border-bottom: 1px solid var(--divider); }

/* —— 按钮: 主色 + 交互态(hover 加深/圆角) —— */
.layui-btn { border-radius: var(--radius-s); transition: all .2s ease; }
.layui-btn-normal, .layui-btn.layui-btn-normal { background: var(--brand); }
.layui-btn-normal:hover { background: var(--brand-d); }
.layui-btn-primary { border-color: var(--border); color: var(--t-body); }
.layui-btn-primary:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
.layui-btn-danger { background: var(--error); }
.layui-btn-danger:hover { background: #e63232; }
.layui-btn-warm { background: var(--warning); }
.layui-btn-xs { border-radius: 3px; }
.layui-btn.layui-btn-disabled, .layui-btn.layui-btn-disabled:hover { color: var(--t-disable) !important; background: var(--thead) !important; border-color: var(--border) !important; }

/* —— 表格: 表头背景 + 细分割线 + 行 hover + 卡片化 —— */
.layui-table-view { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--card); margin: 0; }
.layui-table { margin: 0; }
.layui-table thead tr { background: var(--thead); }
.layui-table th { color: var(--t-title); font-weight: 600; border-color: var(--divider) !important; }
.layui-table td { border-color: var(--divider) !important; color: var(--t-body); }
.layui-table tbody tr { transition: background .15s; }
.layui-table tbody tr:hover { background: var(--brand-l) !important; }
.layui-table-page { border-top: 1px solid var(--divider); background: var(--card); }
.layui-table[lay-skin="line"] td, .layui-table[lay-skin="line"] th { border-color: var(--divider) !important; }

/* —— 输入/选择: 描边统一 + 焦点品牌色高亮 —— */
.layui-input, .layui-select, .layui-textarea { border-radius: var(--radius-s); border-color: var(--border); }
.layui-input:hover, .layui-textarea:hover { border-color: var(--brand) !important; }
.layui-input:focus, .layui-textarea:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 2px var(--brand-l); }
.layui-form-select dl dd:hover {
    background: var(--brand-l);
    color: var(--t-title);
}
.layui-form-select dl dd.layui-this,
.layui-form-select dl dd.layui-this:hover {
    background: var(--brand) !important;
    background-color: var(--brand) !important;
    color: #fff !important;
    font-weight: 500;
}
.layui-form-checked[lay-skin="primary"] i, .layui-form-radio > i:hover, .layui-form-radioed > i { color: var(--brand) !important; }
.layui-form-switch.layui-form-onswitch { background: var(--brand); border-color: var(--brand); }

/* —— 徽章: 胶囊圆角 + 语义功能色 —— */
.layui-badge, .layui-badge-rim {
    border-radius: 10px;
    padding: 2px 10px;
    height: auto;
    line-height: 1.5;
    font-size: 12px;
    font-weight: 500;
}
.layui-badge.layui-bg-blue { background: var(--link) !important; }
.layui-badge.layui-bg-green { background: var(--success) !important; }
.layui-badge.layui-bg-orange { background: var(--warning) !important; }
.layui-badge.layui-bg-red { background: var(--error) !important; }
.layui-badge.layui-bg-gray { background: #e5e6eb !important; color: var(--t-2nd) !important; }
/* 圆点计数徽章保持小尺寸 */
.layui-badge-dot { padding: 0; border-radius: 50%; }

/* —— 分组标题 —— */
.layui-elem-field.layui-field-title { margin: 18px 0 10px; border-top: none; }
.layui-field-title legend { color: var(--t-title); font-size: 15px; font-weight: 600; padding: 0 8px; }

/* —— 弹层: 圆角 + 头部统一 —— */
.layui-layer { border-radius: var(--radius) !important; box-shadow: var(--shadow-h) !important; }
.layui-layer-title { background: var(--card); color: var(--t-title); border-bottom: 1px solid var(--divider); font-weight: 600; }
.layui-layer-btn .layui-layer-btn0 { background: var(--brand); border-color: var(--brand); }

/* —— 空状态 —— */
.layui-table-view .layui-none { color: var(--t-2nd); padding: 44px 0; font-size: 13px; }

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

/* —— 统计小卡(dashboard 等可复用) —— */
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; transition: box-shadow .2s ease; }
.stat-card:hover { box-shadow: var(--shadow-h); }
.stat-card .num { font-size: 28px; font-weight: 700; color: var(--t-title); line-height: 1.2; }
.stat-card .label { color: var(--t-2nd); font-size: var(--fs-aux); margin-top: 6px; }

/* —— 分页/加载态: 品牌色高亮 —— */
.layui-laypage a:hover { color: var(--brand); }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background: var(--brand); }
.layui-laypage a, .layui-laypage span { border-radius: var(--radius-s); border-color: var(--border); }
.layui-table-view .layui-table-loading .layui-icon { color: var(--brand); }

/* —— 表单标签字号统一(辅助层级) —— */
.layui-form-label { color: var(--t-body); font-size: var(--fs-body); }
.layui-form-mid.layui-word-aux, .layui-word-aux { color: var(--t-2nd) !important; font-size: var(--fs-aux); }

/* —— 详情弹窗统一设计: 卡片分区 + KPI 高亮 + 默认头像 + 空状态 —— */
.dtl { padding: 6px 6px 10px; }
.dtl-hd { display: flex; align-items: center; gap: 14px; padding: 4px 4px 16px; }
.dtl-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--brand-l); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; flex: 0 0 auto; overflow: hidden; }
.dtl-hd .nm { font-size: var(--fs-page); font-weight: 700; color: var(--t-title); }
.dtl-hd .sub { color: var(--t-2nd); font-size: var(--fs-aux); margin-top: 3px; }
.dtl-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.dtl-sec-t { font-size: var(--fs-title); font-weight: 600; color: var(--t-title); margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }
.dtl-sec-t .layui-icon { color: var(--brand); font-size: 16px; }
.dtl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.dtl-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.dtl-item .k { color: var(--t-2nd); font-size: var(--fs-aux); margin-bottom: 3px; }
.dtl-item .v { color: var(--t-body); font-size: var(--fs-body); word-break: break-all; }
.dtl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dtl-kpi { background: var(--brand-l); border-radius: var(--radius); padding: 14px 10px; text-align: center; }
.dtl-kpi .kn { font-size: 22px; font-weight: 700; color: var(--brand-d); line-height: 1.2; }
.dtl-kpi .kl { color: var(--t-2nd); font-size: var(--fs-aux); margin-top: 4px; }
.dtl-empty { text-align: center; color: var(--t-2nd); padding: 28px 0; font-size: var(--fs-aux); }
.dtl-empty .layui-icon { font-size: 42px; color: var(--t-disable); display: block; margin-bottom: 8px; }
.dtl .layui-table { margin: 0; }

/* —— 运营页面通用骨架 —— */
.admin-page { padding: 20px; min-width: 760px; }
.admin-page-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    margin-bottom: 16px;
}
.admin-page-title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; color: var(--t-title); }
.admin-page-desc { margin-top: 5px; color: var(--t-2nd); font-size: 13px; line-height: 1.6; }
.admin-page-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.admin-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.admin-card-title { font-size: var(--fs-title); font-weight: 600; color: var(--t-title); margin-bottom: 14px; }
.admin-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 12px; padding: 14px 16px; margin-bottom: 16px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-toolbar-main, .admin-toolbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.admin-toolbar .layui-form-item, .admin-toolbar .layui-inline { margin-bottom: 0; margin-right: 0; }
.admin-toolbar .layui-input-inline { margin-right: 0; }
.admin-search { width: 280px; }
.admin-filter { width: 150px; }
.admin-callout {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 16px;
    border: 1px solid #cceff3; border-radius: var(--radius); background: #f0fbfc;
    color: #3f646a; font-size: 13px; line-height: 1.65;
}
.admin-callout .layui-icon { color: var(--brand); font-size: 17px; margin-top: 1px; }
.admin-callout.warning { background: #fff8ef; border-color: #ffe0ba; color: #8a5a20; }
.admin-callout.warning .layui-icon { color: var(--warning); }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 16px; }
.admin-stat-num { color: var(--t-title); font-weight: 700; font-size: 24px; line-height: 1.25; }
.admin-stat-num.brand { color: var(--brand-d); }
.admin-stat-num.success { color: var(--success); }
.admin-stat-num.warning { color: var(--warning); }
.admin-stat-label { color: var(--t-2nd); font-size: 12px; margin-top: 5px; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.admin-form-grid .span-2 { grid-column: 1 / -1; }
.admin-form-section { color: var(--t-title); font-size: 15px; font-weight: 600; padding: 4px 0 10px; margin: 4px 0 14px; border-bottom: 1px solid var(--divider); }
.admin-form-tip { color: var(--t-2nd); font-size: 12px; line-height: 1.55; margin-top: 6px; }
.admin-empty { text-align: center; color: var(--t-2nd); padding: 36px 12px; }
.admin-empty .layui-icon { display: block; color: var(--t-disable); font-size: 42px; margin-bottom: 8px; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--t-disable); }
.status-dot.on { background: var(--success); }
.status-dot.off { background: var(--t-disable); }
.table-primary { color: var(--t-title); font-weight: 600; }
.table-secondary { color: var(--t-2nd); font-size: 12px; margin-top: 3px; }

/* 弹层内表单统一留白 */
.admin-dialog-form { padding: 20px 24px 4px; }
.admin-dialog-form .layui-form-label { width: 90px; }
.admin-dialog-form .layui-input-block { margin-left: 120px; }
.admin-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 24px 18px; border-top: 1px solid var(--divider); }

@media (max-width: 1200px) {
    .admin-page { padding: 16px; min-width: 680px; }
    .admin-stats { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
    .admin-search { width: 230px; }
}