/* 后台样式。学的是整体排版、菜单方式与表格形态（设计文档第 3.3 节）：
   密集表格 + 紧凑筛选条 + 表下分页，不做浅色卡片流与大留白仪表盘——
   那样逐行核对数据的效率会明显下降。 */
:root{
  --bg:#dbe2ec;
  --panel:#ffffff;
  --line:#c8d2e0;
  --hair:#eef1f5;
  --text:#333333;
  --muted:#7d8798;
  --primary:#42a5f5;        /* 与操作端同主色，两端看起来是一套系统 */
  --th-top:#353535;         /* 列表表头深灰 */
  --th-bottom:#1b1b1b;
  --form-th:#2c5d98;        /* 表单标签深蓝 */
  --report-th:#387b9a;      /* 报表主表头蓝绿 */
  --report-sub:#deeff8;     /* 报表次级表头 */
  --total-row:#def8ec;      /* 合计行浅绿 */
  --row-hover:#ffff99;      /* 行悬停浅黄，用于逐行核对定位 */
  --banker:#e53935;
  --player:#1e88e5;
  --ok:#2e7d32;
}
*{box-sizing:border-box}
/* hidden 属性必须压过下面任何写了 display 的类（.mask/.field 都写了）。
   少了这条，带 hidden 的弹层会全部同时显示出来。 */
[hidden]{display:none !important}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:13px/1.5 "Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ── 顶栏 + 一级模块菜单 ─────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:16px;height:44px;padding:0 12px;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-size:15px;font-weight:600}
.tb-sub{font-size:12px;color:var(--muted)}
.tb-left{display:flex;align-items:center;gap:8px}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-item{font-size:12px;color:var(--muted)}
.modules{display:flex;gap:2px}
.modules button{
  height:30px;padding:0 16px;border:1px solid var(--line);background:#f4f7fa;
  font-size:13px;color:var(--text);cursor:pointer;border-radius:2px;
}
.modules button:hover{border-color:var(--primary);color:var(--primary)}
.modules button.on{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── 内容区 + 二级页签 ───────────────────────────── */
.content{padding:10px 12px 24px}
/* 页签与内容区共享一条边，选中页签与面板连通 */
.tabs{display:flex;gap:2px;margin-bottom:-1px;position:relative;z-index:1}
.tabs button{
  height:28px;padding:0 14px;border:1px solid var(--line);border-bottom:0;
  background:#edf1f6;font-size:12px;cursor:pointer;color:var(--text);border-radius:2px 2px 0 0;
}
.tabs button.on{background:#fff;color:var(--primary);font-weight:600}
.panel{border:1px solid var(--line);background:var(--panel)}
.panel-heading{
  height:30px;display:flex;align-items:center;justify-content:center;
  background:#f4f7fa;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;
}
.panel-note{padding:6px 10px;border-top:1px solid var(--hair);font-size:12px;color:var(--muted)}

/* 筛选条：紧贴表格上沿，一行放完，标签与输入对齐成列 */
.filter{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:7px 10px;border-bottom:1px solid var(--line);background:#fbfcfe;
}
.filter label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.filter input,.filter select{height:26px;padding:0 6px;border:1px solid var(--line);border-radius:2px;font-size:12px}
.filter input:focus,.filter select:focus{outline:0;border-color:var(--primary)}
.filter .right{margin-left:auto;display:flex;gap:6px}

/* ── 表格：全边框、深色表头、行悬停浅黄、文本居中金额右对齐 ── */
.table-wrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:12px}
table.grid th{
  background:linear-gradient(var(--th-top),var(--th-bottom));color:#fff;font-weight:600;
  padding:5px 8px;border:1px solid #111;white-space:nowrap;text-align:center;
}
table.grid td{padding:4px 8px;border:1px solid var(--line);text-align:center}
table.grid tbody tr:hover td{background:var(--row-hover)}
table.grid td.num{text-align:right}
table.grid td.left{text-align:left}
table.grid tr.total td{background:var(--total-row);font-weight:600}
table.grid.report th{background:var(--report-th);border-color:#2d6a85}
table.grid.report th.sub{background:var(--report-sub);color:#1b3f52}
.empty{padding:18px;text-align:center;color:var(--muted)}

.pager{display:flex;align-items:center;gap:6px;padding:7px 10px;border-top:1px solid var(--line);font-size:12px}
.pager .total{color:var(--muted)}

.tag{display:inline-block;padding:0 6px;border-radius:2px;font-size:11px;background:var(--hair);color:var(--muted)}
.tag.ok{background:#e8f5e9;color:var(--ok)}
.tag.warn{background:#fff3e0;color:#ef6c00}
.tag.err{background:#ffebee;color:#c62828}
.tag.run{background:#e3f2fd;color:#1565c0}
.money-pos{color:var(--ok);font-weight:600}
.money-neg{color:var(--banker);font-weight:600}

.btn{
  height:26px;padding:0 10px;border:1px solid var(--line);background:#fff;border-radius:2px;
  font-size:12px;color:var(--text);cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.06);color:#fff}
.btn-sm{height:22px;padding:0 7px;font-size:11px}
.btn-danger{border-color:#e57373;color:#c62828}
.btn:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.ops{display:flex;gap:4px;justify-content:center}

/* ── 弹框：短表单走居中弹框，表单做成表格，标签列深蓝 ── */
.mask{position:fixed;inset:0;z-index:50;background:rgba(20,28,40,.45);display:flex;align-items:center;justify-content:center}
/* 未登录：顶栏与内容区整体不渲染，只留登录框 */
body.pre-auth .topbar,body.pre-auth .content{display:none}
.dialog{width:460px;max-height:88vh;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:2px}
.dialog-narrow{width:340px}
.dialog-title{height:30px;display:flex;align-items:center;justify-content:center;background:#f4f7fa;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.dialog-body{padding:10px;overflow-y:auto}
.dialog-foot{display:flex;justify-content:center;gap:8px;padding:8px;border-top:1px solid var(--hair)}
table.form-table{width:100%;border-collapse:collapse;font-size:12px}
table.form-table th{
  width:92px;background:var(--form-th);color:#fff;font-weight:400;
  padding:5px 8px;border:1px solid #27527f;text-align:right;white-space:nowrap;
}
table.form-table td{padding:4px 6px;border:1px solid var(--line)}
table.form-table input,table.form-table select{width:100%;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:2px;font-size:12px}
.field{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.field>span{width:70px;color:var(--muted);text-align:right;font-size:12px}
.field input{flex:1;height:26px;padding:0 6px;border:1px solid var(--line);border-radius:2px}
.form-error{min-height:18px;color:var(--banker);font-size:12px;padding-top:6px}
.form-hint{font-size:11px;color:var(--muted);line-height:1.6}

/* ── 登录页 ───────────────────────────────────────── */
/* 与操作端同一套品牌块，只换标题条与标签色：标题条用列表表头的深灰渐变、
   标签用表单深蓝，一眼能看出这是后台而不是操作端。 */
body.pre-auth #loginMask{
  background:
    radial-gradient(120% 70% at 50% 0%,#e8edf5 0%,rgba(232,237,245,0) 60%),
    linear-gradient(180deg,var(--bg) 0%,#ccd6e4 100%);
}
.login-box{width:376px;margin-top:-24px}
.login-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
.login-logo{
  width:40px;height:40px;flex:none;border-radius:2px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;
}
.login-brand-text{display:flex;flex-direction:column;line-height:1.3}
.login-brand-text b{font-size:17px;letter-spacing:1px}
.login-brand-text i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:1.5px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.login-card-title{
  height:30px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(var(--th-top),var(--th-bottom));color:#fff;
  font-size:13px;font-weight:600;letter-spacing:1px;
}
.login-card-body{padding:18px 20px 14px}
.login-field{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.login-field>span{width:30px;flex:none;color:var(--form-th);font-size:12px;text-align:right}
.login-field input{
  flex:1;min-width:0;height:34px;padding:0 10px 0 32px;font-size:13px;color:var(--text);
  border:1px solid var(--line);border-radius:2px;
  background-repeat:no-repeat;background-position:10px center;background-size:14px 14px;
}
.login-field input::placeholder{color:#b4bdcb}
.login-field input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(66,165,245,.16)}
.ipt-user{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a94a6'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 14.5c0-3.3 2.7-5.2 6-5.2s6 1.9 6 5.2z'/%3E%3C/svg%3E")}
.ipt-pwd{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a94a6' stroke-width='1.5'%3E%3Cpath d='M5.3 7.2V5.1a2.7 2.7 0 0 1 5.4 0v2.1'/%3E%3Crect x='3.3' y='7.2' width='9.4' height='6.8' rx='1.2' fill='%238a94a6' stroke='none'/%3E%3C/svg%3E")}
.login-error{
  margin:0 0 10px 40px;padding:5px 8px;font-size:12px;
  background:#fdecea;color:#c62828;border-left:2px solid var(--banker);
}
.login-submit{width:100%;height:36px;font-size:14px;letter-spacing:4px}
.login-note{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--hair);
  font-size:11px;color:var(--muted);text-align:center;line-height:1.6;
}
.login-copy{margin-top:14px;text-align:center;font-size:11px;color:var(--muted)}

.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:80;
  padding:7px 14px;background:rgba(20,28,40,.9);color:#fff;border-radius:2px;font-size:12px;
}