/* =====================================================================
   v2 视觉体系 · 试点样式表
   ---------------------------------------------------------------------
   只由两个页面加载（案件列表 view/case/index.html、工作总览
   view/index/dashboard_user.html），用来验证「新视觉」在真系统上的
   实际效果。其余页面不引本文件，样式完全不受影响。

   验证通过后，把本文件的规则合并进 public/static/b-components.css
   与 view/layout/base.html，即全站生效。

   设计要点（四个字：重点 / 呼吸 / 颜色 / 质感）
     重点  —— 关键数字 28px，页标题 23px，次要信息退到灰
     呼吸  —— 内容区留白 24~26px，表格行高 48px，卡片间距 14px
     颜色  —— 主色蓝 #2563EB，状态各有浅底，逾期红底反白
     质感  —— 卡片圆角 10px + 极轻阴影，侧栏改白底
   ===================================================================== */

/* ---------- 1. 变量层 ---------- */
:root {
  --bg: #EBEFF4;
  --card: #FFFFFF;
  --line: #E6E8EB;
  --line2: #F0F1F3;
  --accent: #2563EB;
  --accent-soft: #EDF4FF;
  --accent-line: #C7DBFF;
  --ok: #0E8A56;        --ok-soft: #E6F5EE;
  --warn: #B06E0B;      --warn-soft: #FDF3E2;
  --danger: #D02B22;    --danger-soft: #FCEBE9;
  --grey-soft: #F2F3F5;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 3px rgba(16,24,40,.07), 0 6px 16px rgba(16,24,40,.055);
}

/* ---------- 2. 侧栏改白底（深色侧栏是「老后台」观感的主因） ---------- */
.b-side {
  background: #FFFFFF !important;
  border-right: 1px solid var(--line) !important;
}
/* logo 原图透明底深墨字，深底时靠反色滤镜转白；白底必须去掉滤镜，否则隐身 */
.b-logo { filter: none !important; -webkit-filter: none !important; }
.b-brand { border-bottom: 1px solid var(--line) !important; }
.b-brand-t { color: #1A1D21 !important; }
.b-brand-s { color: #8B95A1 !important; }

.b-nav a {
  font-size: 13.5px !important;
  letter-spacing: .02em !important;
  color: #4A525C !important;
  border-radius: var(--radius-sm);
  padding: 9px 10px !important;
  margin-bottom: 1px;
  box-shadow: none !important;
}
.b-nav a:hover { background: #F7F8FA; color: #1A1D21 !important; }
.b-nav a.on {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.b-nav a.on .icon { opacity: 1; }
.b-nav-g {
  color: #8B95A1 !important;
  border-top: 1px solid var(--line) !important;
}
.b-nav-g::before { background: var(--accent) !important; }
.b-side-user { border-top: 1px solid var(--line) !important; }
.b-side-user b { color: #1A1D21 !important; }
.b-side-user a, .b-side-user button { color: #5A6470 !important; border-bottom-color: var(--line) !important; }
.b-side-user a:hover, .b-side-user button:hover { color: var(--accent) !important; }

/* ---------- 3. 页面底色与正文 ---------- */
main { background: var(--bg) !important; }
/* 系统正文统一 13px（铁律），试点放宽到 14px——律师长时间扫读更舒服 */
.text-sm, .text-base { font-size: 14px !important; }
main { font-size: 14px; }

/* ---------- 4. 卡片：圆角 + 轻阴影，从纸面上浮起来 ---------- */
.b-panel, .b-card, .b-stat {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  background: var(--card) !important;
  border-color: var(--line) !important;
}
/* 统计卡：数字是这一页的答案，给它排场 */
.b-stat { padding: 17px 19px !important; }
.b-stat-num {
  font-size: 28px !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #1A1D21 !important;
}
/* 分栏统计卡的选中态：朱砂竖条 → 蓝色左边条 + 浅蓝底 */
a.b-stat[class*="border-["] , .b-stat.is-on {
  background: #F8FAFF !important;
  border-color: var(--accent-line) !important;
}

/* ---------- 4.5 页标题（「重点」的第一落点） ----------
   系统全局 main h1 = 18px，与区块标题（15px）只差一档，页面打开没有主次。
   试点提到 23px：一眼知道自己在哪一页，也是新视觉区别于旧版最直观的一处。 */
main h1 {
  font-size: 23px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}
/* 兜底：系统里有 22 处 h1 上写了 text-xl / text-2xl，会被 base.html 的
   `.text-xl{16px!important}`（类选择器，特异性高于 main h1）压回 16px，页标题照样立不住。
   这里用 h1.text-xl（0-1-1）压过 .text-xl（0-1-0）。不改模板是怕牵连打印页等独立布局。 */
h1.text-xl, h1.text-2xl, main h1.text-xl, main h1.text-2xl {
  font-size: 23px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em;
}

/* ---------- 5. 区块标题 ---------- */
.b-block-head { padding-bottom: 2px; }
.b-block-title {
  font-size: 15px !important;
  color: #1A1D21 !important;
}
.b-block-title .icon { color: var(--accent); }
.b-block-count {
  background: var(--grey-soft) !important;
  color: #5A6470 !important;
  border-radius: var(--radius-round, 999px);
  padding: 1px 9px !important;
}
.b-page-note { font-size: 13px !important; color: #8B95A1 !important; }

/* ---------- 6. 徽标：浅底圆角，扫读能跳出来 ---------- */
.b-badge {
  border-radius: var(--radius-xs) !important;
  border: 0 !important;
  background: var(--grey-soft) !important;
  color: #5A6470 !important;
  font-size: 12px !important;
  padding: 2px 9px !important;
  font-weight: 500;
}
.b-badge.is-open    { background: var(--accent-soft) !important; color: var(--accent) !important; }
.b-badge.is-done    { background: var(--ok-soft) !important;     color: var(--ok) !important; }
.b-badge.is-warn    { background: var(--warn-soft) !important;   color: var(--warn) !important; }
.b-badge.is-overdue { background: var(--danger) !important;       color: #fff !important; }
.b-badge.is-muted   { background: var(--grey-soft) !important;   color: #8B95A1 !important; font-weight: 400; }

/* b-tag（手写色块归并来的标记）同样处理 */
.b-tag {
  border-radius: var(--radius-xs) !important;
  border: 0 !important;
  font-size: 12px !important;
  padding: 2px 9px !important;
  font-weight: 500;
}
.b-tag.bg-red-50,   .b-tag[class*="bg-red-50"]   { background: var(--danger-soft) !important; color: var(--danger) !important; }
.b-tag.bg-amber-50, .b-tag[class*="bg-amber-50"] { background: var(--warn-soft) !important;   color: var(--warn) !important; }
.b-tag.bg-orange-50,.b-tag[class*="bg-orange-50"]{ background: var(--warn-soft) !important;   color: var(--warn) !important; }
.b-tag.bg-green-50, .b-tag[class*="bg-green-50"] { background: var(--ok-soft) !important;     color: var(--ok) !important; }
.b-tag.bg-blue-50,  .b-tag[class*="bg-blue-50"]  { background: var(--accent-soft) !important; color: var(--accent) !important; }
.b-tag.bg-slate-100,.b-tag[class*="bg-slate-100"]{ background: var(--grey-soft) !important;   color: #5A6470 !important; font-weight: 400; }

/* ---------- 7. 表格：行高放宽到 48px，表头浅底 ---------- */
.b-table { font-size: 14px !important; border-radius: 0; }
.b-table thead th {
  background: #FAFBFC !important;
  border-bottom: 1px solid var(--line) !important;
  color: #8B95A1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
}
.b-table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line2) !important;
  color: #5A6470 !important;
}
.b-table tbody tr:hover { background: #F7F8FA !important; }
/* 主列（案件名称、当前阶段）保持近黑 + 中等字重，其余退灰 */
.b-table tbody td.font-medium,
.b-table tbody td a { color: #1A1D21 !important; font-weight: 500; }
/* 行首紧迫色条：改圆角端头，别在表格里显得生硬 */
.b-table tbody tr td:first-child { position: relative; }

/* ---------- 8. 按钮：圆角 + 蓝主色 ---------- */
.b-btn {
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  border-color: var(--line) !important;
  background: #fff !important;
  color: #3A4450 !important;
}
.b-btn:hover { background: #F7F8FA !important; border-color: #D5D8DD !important; }
/* 变体保护：上面 .b-btn 强制了白底+边框+13.5px，两个变体会被压坏——
   b-btn-text（8 处）本是无框纯文字，不保就变成白方块；
   b-btn-sm（171 处）本是 12px 紧凑小钮，不保就跟着放大到 13.5px。 */
.b-btn-text {
  background: none !important;
  border-color: transparent !important;
  min-height: auto !important;
  padding: 0 8px !important;
}
.b-btn-text:hover { background: #F2F3F5 !important; border-color: transparent !important; }
.b-btn-sm { font-size: 12px !important; }
.b-btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(37,99,235,.28) !important;
}
.b-btn-primary:hover { background: #1D4FD8 !important; border-color: #1D4FD8 !important; color: #fff !important; }
.b-btn-danger { color: var(--danger) !important; border-color: #F0C4BF !important; }
.b-btn-danger:hover { background: var(--danger) !important; color: #fff !important; }

/* ---------- 9. 表单控件 ---------- */
.b-input, .b-select, .b-textarea {
  border-radius: var(--radius-sm) !important;
  border-color: #D8DBE0 !important;
  background: #fff !important;
  font-size: 14px !important;
}
.b-input:focus, .b-select:focus, .b-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* ---------- 10. 空态 / 收尾 ---------- */
.b-empty { padding: 44px 20px !important; }
.b-empty-title { font-size: 15px !important; color: #1A1D21 !important; }
.b-empty-why { font-size: 13px !important; color: #8B95A1 !important; }
.b-foot { font-size: 13px !important; color: #8B95A1 !important; }
.b-pager a, .b-pager span {
  border-radius: var(--radius-xs) !important;
  border: 1px solid var(--line) !important;
  padding: 5px 11px !important;
  color: #5A6470 !important;
  background: #fff;
}
.b-pager a:hover { background: #F7F8FA !important; }

/* ---------- 11. 倒计时 / 关注区 ---------- */
.b-focus { border-radius: var(--radius) !important; }
.b-panel .divide-y > li,
.b-panel .divide-y > div { padding-top: 13px !important; padding-bottom: 13px !important; }

/* ---------- 12. 逾期与金额 ---------- */
.b-amt-in  { color: var(--ok) !important; }
.b-amt-out { color: var(--danger) !important; }