/* ===== 主题（浅色内容 + 扁平浅色侧栏） ===== */
:root{
  --bg:#f5f7fb; --text:#1f2937; --muted:#6b7280; --primary:#4f46e5;
  --card-bg:#ffffff; --card-border:#e9edf4; --shadow:0 6px 18px rgba(15,23,42,.06);
  --side-bg:#ffffff; --side-border:#e9edf4; --side-text:#1f2937; --side-muted:#6b7280;
  --side-hover:#f3f4f6; --side-active:#eef2ff;
  --r-md:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.app-body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

/* 顶栏 */
.app-topbar{height:64px;position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #eef2f7;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.brand{color:#111827;display:flex;align-items:center}
.brand-logo{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(135deg,#6366f1,#3b82f6)}
.brand-logo img{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1)}
.brand-name{font-weight:700;letter-spacing:.2px}
.userpill{display:inline-flex;align-items:center;gap:.6rem;padding:6px 10px;border-radius:999px;text-decoration:none;color:#111827;background:#f3f4f6;border:1px solid #e5e7eb;transition:all .2s ease}
.userpill:hover{background:#e7e9ee}
.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.username{font-size:13px;color:#111827}
.datetime{color:var(--muted)!important}

/* 主体布局 */
.app-main{display:flex;gap:18px;min-height:calc(100vh - 64px - 40px);padding:18px 18px 0 18px}

/* 侧栏 */
.app-sidebar{width:250px;padding:16px!important;background:var(--side-bg);border:1px solid var(--side-border);border-radius:var(--r-md);box-shadow:var(--shadow)}
.side-nav.flat .section-title{color:var(--side-muted);font-size:12px;letter-spacing:.4px;margin:4px 8px 10px}
.side-nav.flat .nav-link{color:var(--side-text);text-decoration:none;display:block;padding:.6rem .85rem;border-radius:10px;transition:all .15s ease}
.side-nav.flat .nav-link:hover{background:var(--side-hover)}
.side-nav.flat .nav-link.active{background:var(--side-active);color:#1e1b4b;box-shadow:0 0 0 1px rgba(79,70,229,.2) inset}

/* 内容容器/卡片 */
.app-content{flex:1 1 auto;padding:0 2px 18px 2px}
.content-card,.kpi-card{
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow);
}
.card-title{font-weight:700;color:#111827}

/* 状态栏 */
.app-statusbar{height:40px;margin-top:18px;background:#fff;border-top:1px solid #eef2f7}

/* 登录页 */
.login-body{background:var(--bg);display:flex;align-items:center;justify-content:center;min-height:100vh;color:#111827}
.auth-card{max-width:420px;width:92%;background:#fff;border:1px solid var(--card-border);border-radius:var(--r-md);box-shadow:var(--shadow)}
.captcha-img{padding:.6rem .9rem;background:#111827;color:#22c55e;font-weight:700;letter-spacing:2px;border-radius:.6rem}

/* 目录树 & 芯片 */
.tree .tree-node{border-left:2px solid #eef2f7;margin-left:2px;padding-left:12px}
.tree .tree-row{display:flex;align-items:center;gap:10px;padding:.45rem .5rem;border-radius:10px;transition:background .15s ease}
.tree .tree-row:hover{background:#f8fafc}
.tree .tree-name{min-width:120px}
.tree .tree-meta{font-size:12px}
.tree .tree-leaf{color:#64748b}
.tree .btn{line-height:1}
.tree-toggle{padding:.125rem .35rem}
.chip-p.active,.chip-c.active{background:var(--side-active);border-color:rgba(79,70,229,.45);color:#1e1b4b;box-shadow:0 0 0 1px rgba(79,70,229,.2) inset}

/* KPI 卡片 */
.kpi-card{display:flex;align-items:center;gap:12px;transition:transform .15s ease, box-shadow .15s ease}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.kpi-icon{width:42px;height:42px;min-width:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}
.kpi-blue{background:#3b82f6}.kpi-red{background:#ef4444}.kpi-green{background:#10b981}.kpi-amber{background:#f59e0b}
.kpi-meta .kpi-label{font-size:12px;color:#6b7280;letter-spacing:.2px}
.kpi-meta .kpi-value{font-size:22px;font-weight:700;color:#111827;margin-top:2px}

/* 快捷操作 */
.quick-action{display:flex;align-items:center;gap:10px;background:#fff;border:1px dashed rgba(0,0,0,.1);border-radius:14px;padding:12px 14px;text-decoration:none;color:#111827;transition:all .15s ease}
.quick-action:hover{background:#f9fafb;border-color:rgba(17,24,39,.25)}
.qa-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
.qa-blue{background:#3b82f6}.qa-red{background:#ef4444}.qa-green{background:#10b981}.qa-amber{background:#f59e0b}

/* 柱状图容器（固定高度 + 让 canvas 填满） */
.chart-panel{position:relative;width:100%;height:360px}
.chart-panel canvas{display:block;width:100%!important;height:100%!important}


/* ==== Chart.js 高度无限增长修复：固定包裹容器高度 ==== */
.chart-wrap {
  position: relative;
  width: 100%;
  /* 高度由不同类控制，以便按需复用 */
}
.chart-h-360 { height: 360px; }

/* 画布必须是 block，否则会继承图片的默认基线导致父容器高度抖动 */
.chart-wrap canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important; /* 由容器决定最终高度 */
}

/* 保险：全局避免 canvas 被外部样式覆盖为 auto 导致撑高 */
canvas {
  display: block;
  max-width: 100%;
}

/* ==== Dashboard 顶部 KPI 卡片优化 ==== */
.kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
.kpi-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
}
.kpi-meta .kpi-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .2px;
}
.kpi-meta .kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin-top: 2px;
}
.kpi-blue { background: #3b82f6; }
.kpi-green { background: #10b981; }
.kpi-amber { background: #f59e0b; }
.kpi-red { background: #ef4444; }