/**
 * RuoYi 经典蓝主题 —— 全局覆盖层
 * 基于 ruoyi-dark-ui/ruoyi-classic-blue-prototype.html 设计规范
 * 覆盖 H+ / Bootstrap 3 默认样式，统一为企业后台浅色卡片风。
 */

/* ============================================================ 设计 Token */
:root {
  --brand: #1677ff;
  --brand-hover: #4096ff;
  --brand-active: #0958d9;
  --brand-soft: #e6f4ff;
  --brand-soft2: #f0f7ff;
  --ok: #52c41a;
  --warn: #faad14;
  --danger: #ff4d4f;
  --info: #13c2c2;
  --ink: #1f2430;
  --ink-2: #40485a;
  --ink-3: #7a8398;
  --ink-4: #aab3c5;
  --line: #eef1f6;
  --line-2: #e3e8f0;
  --line-3: #d5dbe6;
  --bg: #f3f5f9;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  --shadow-brand: 0 4px 12px -2px rgba(22,119,255,.35);

  --cb-white: #fff;
  --warn-2: #ffc53d;
  --warn-deep: #fa8c16;
  --warn-soft: #fff7e6;
  --warn-soft2: #fff2e8;
  --danger-2: #ff7875;
  --danger-deep: #ff7a45;
  --ok-2: #73d13d;
  --ok-soft: #f6ffed;
  --info-2: #36cfc9;
  --cb-gray-50: #fafbfc;
  --cb-gray-100: #f5f5f5;
  --cb-gray-150: #f2f4f7;
  --ink-02: rgba(16,24,40,.02);
  --ink-03: rgba(16,24,40,.03);
  --ink-04: rgba(16,24,40,.04);
  --ink-12: rgba(16,24,40,.12);
  --ink-18: rgba(16,24,40,.18);
  --ink-35: rgba(16,24,40,.35);
  --ink-45: rgba(16,24,40,.45);
  --brand-06: rgba(22,119,255,.06);
  --brand-12: rgba(22,119,255,.12);
  --brand-15: rgba(22,119,255,.15);
  --brand-25: rgba(22,119,255,.25);
  --brand-28: rgba(22,119,255,.28);
  --brand-35: rgba(22,119,255,.35);
  --brand-40: rgba(22,119,255,.4);
  --brand-50: rgba(22,119,255,.5);
  --ok-06: rgba(82,196,26,.06);
  --ok-10: rgba(82,196,26,.1);
  --ok-50: rgba(82,196,26,.5);
  --info-10: rgba(19,194,194,.1);
  --warn-08: rgba(250,173,20,.08);
  --warn-10: rgba(250,173,20,.1);
  --warn-15: rgba(250,173,20,.15);
  --warn-60: rgba(250,173,20,.6);
  --danger-06: rgba(255,77,79,.06);
  --danger-10: rgba(255,77,79,.1);
  --danger-50: rgba(255,77,79,.5);
  --bg-40: rgba(243,245,249,.4);
  --bg-50: rgba(243,245,249,.5);
  --bg-90: rgba(243,245,249,.9);
}


/* ============================================================ 全局重置 */
html, body { height: 100%; }
body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.gray-bg { background: var(--bg) !important; }
.white-bg { background: var(--cb-white) !important; }

/* 全局滚动条：更细更淡，减少视觉干扰；hover 时才略微显色 */
/* 使用 !important 覆盖 ry-ui.css 中 10px 的强制滚动条宽度 */
::-webkit-scrollbar { width: 5px !important; height: 5px !important; -webkit-appearance: none !important; }
::-webkit-scrollbar-thumb { background: var(--line-2) !important; border-radius: 99px !important; border: 1px solid var(--bg) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3) !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-corner { background: transparent !important; }

.num { font-variant-numeric: tabular-nums; }

/* ============================================================ 排版 */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-weight: 600;
}

a { color: var(--brand); transition: color .15s; }
a:hover, a:focus { color: var(--brand-hover); text-decoration: none; }

/* ============================================================ 按钮 */
.btn {
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all .16s;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--cb-white);
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--cb-white);
}

.btn-success {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--cb-white);
}
.btn-success:hover, .btn-success:focus { background: var(--ok-2); border-color: var(--ok-2); color: var(--cb-white); }

.btn-warning {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--cb-white);
}
.btn-warning:hover, .btn-warning:focus { background: var(--warn-2); border-color: var(--warn-2); color: var(--cb-white); }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--cb-white);
}
.btn-danger:hover, .btn-danger:focus { background: var(--danger-2); border-color: var(--danger-2); color: var(--cb-white); }

.btn-info {
  background: var(--info);
  border-color: var(--info);
  color: var(--cb-white);
}
.btn-info:hover, .btn-info:focus { background: var(--info-2); border-color: var(--info-2); color: var(--cb-white); }

.btn-default, .btn-white {
  background: var(--cb-white);
  border-color: var(--line-3);
  color: var(--ink-2);
}
.btn-default:hover, .btn-white:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--cb-white);
}

.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 5px; }
.btn-rounded { border-radius: 999px; }

/* ============================================================ 表单 */
.form-control {
  border: 1px solid var(--line-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  height: 38px;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-12) !important;
}
.form-control::placeholder { color: var(--ink-4); }

.input-group-addon {
  background: var(--cb-white);
  border-color: var(--line-3);
  color: var(--ink-4);
}

select.form-control { color: var(--ink); }

textarea.form-control { height: auto; }

label { font-weight: 500; color: var(--ink-2); }
label.is-required::before {
  content: "*";
  color: var(--danger);
  margin-right: 4px;
}

/* ============================================================ 表格 */
.table {
  color: var(--ink-2);
  font-size: 13px;
}
.table>thead>tr>th {
  background: var(--bg-50);
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-3);
  font-weight: 500;
  font-size: 12px;
  padding: 10px 14px;
}
.table>tbody>tr>td {
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 14px;
  vertical-align: middle;
}
.table-striped>tbody>tr:nth-of-type(odd) { background: transparent; }
.table-hover>tbody>tr:hover { background: var(--cb-gray-50) !important; }

.bootstrap-table .table { border: none; }
.fixed-table-container { border: none; border-radius: 0; }

/* 操作列「更多操作」弹出层：按钮纵向排列，避免横向溢出 */
.popover { max-width: 180px; }
.popover-content { min-width: 96px; padding: 8px 10px; }
.popover-content .btn {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 0 5px;
  white-space: nowrap;
}
.popover-content .btn:last-child { margin-bottom: 0; }

/* ============================================================ 卡片 / 面板 */
.ibox {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.ibox-title {
  border-bottom: 1px solid var(--line);
  padding: 16px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0;
}
.ibox-title h5 { font-size: 14.5px; font-weight: 600; }
.ibox-content { padding: 20px; }

.box {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.box-header {
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}
.box-title { font-size: 14.5px; font-weight: 600; color: var(--ink); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.panel-default>.panel-heading {
  background: var(--cb-white);
  border-color: var(--line);
  color: var(--ink);
}

/* 原型风格卡片 */
.cb-card {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.cb-card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 14.5px;
}
.cb-card-body { padding: 20px; }

/* ============================================================ 状态标签 */
.cb-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
}
.cb-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cb-badge-success { color: var(--ok); background: var(--ok-10); }
.cb-badge-success::before { background: var(--ok); }
.cb-badge-warn { color: var(--warn); background: var(--warn-15); }
.cb-badge-warn::before { background: var(--warn); }
.cb-badge-danger { color: var(--danger); background: var(--danger-10); }
.cb-badge-danger::before { background: var(--danger); }
.cb-badge-info { color: var(--info); background: var(--info-10); }
.cb-badge-info::before { background: var(--info); }

/* ============================================================ 侧栏 */
/* 对齐原型 ruoyi-demo-modules：侧栏 236px 白底（覆盖 H+ 200px） */
body.fixed-sidebar .navbar-static-side,
body.canvas-menu .navbar-static-side {
  width: 236px !important;
}
body.mini-navbar .navbar-static-side {
  width: 70px !important;
}
nav .logo,
.navbar-static-side .logo {
  width: 236px !important;
  transition: width .2s;
}
body.mini-navbar nav .logo,
body.mini-navbar .navbar-static-side .logo {
  width: 70px !important;
  padding-left: 17px;
}
.navbar-static-side,
body .navbar-static-side,
body.skin-1 .navbar-static-side,
body.skin-2 .navbar-static-side,
body.skin-3 .navbar-static-side,
body.skin-4 .navbar-static-side {
  background: var(--cb-white) !important;
  border-right: 1px solid var(--line);
  box-shadow: 1px 0 0 var(--ink-02);
}
/* 底部用户区不遮挡菜单 */
.sidebar-collapse { padding-bottom: 64px !important; }
.logo,
body .logo,
body.skin-1 .logo,
body.skin-2 .logo,
body.skin-3 .logo,
body.skin-4 .logo {
  background: transparent !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  height: 56px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.logo-lg {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
  color: var(--cb-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  margin-right: 10px;
  box-shadow: 0 2px 6px -1px var(--brand-40), inset 0 1px 0 rgba(255,255,255,.25);
  flex-shrink: 0;
  align-self: center;
}
.brand-icon img {
  width: 19px;
  height: 19px;
  display: block;
}
.logo-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}
.logo-text {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .2px;
  white-space: nowrap;
  line-height: 1.15;
}

/* 分组标题：业务菜单 / 系统菜单（对齐原型 menu-group-title） */
#side-menu .nav-header {
  display: block;
  padding: 14px 16px 6px;
  color: var(--ink-4);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
}
#side-menu .nav-header::before,
#side-menu .nav-header::after { display: none; }

#side-menu.nav > li > a,
#side-menu .nav > li > a,
.navbar-static-side #side-menu > li > a {
  color: var(--ink-2);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  margin: 1px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .15s, color .15s;
}
#side-menu.nav > li > a:hover,
#side-menu .nav > li > a:hover,
#side-menu.nav > li > a:focus,
#side-menu .nav > li > a:focus {
  background: var(--bg);
  color: var(--ink);
}

#side-menu.nav > li.active,
#side-menu .nav > li.active,
#side-menu.nav > li.active:hover,
#side-menu .nav > li.active:hover,
#side-menu.nav > li.active:focus,
#side-menu .nav > li.active:focus {
  background: transparent !important;
  border-left: 0 !important;
}

#side-menu.nav > li.active > a,
#side-menu .nav > li.active > a,
#side-menu.nav > li.active > a:hover,
#side-menu .nav > li.active > a:hover,
#side-menu.nav > li.active > a:focus,
#side-menu .nav > li.active > a:focus {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  font-weight: 700;
}

#side-menu .nav-label { font-size: 13px; font-weight: 500; }
/* 顶级目录菜单（有子菜单的一级菜单）：点击仅展开/折叠，不跳转 */
#side-menu .cb-menu-dir { cursor: pointer; text-decoration: none !important; }
#side-menu .cb-menu-dir:hover,
#side-menu .cb-menu-dir:focus { text-decoration: none !important; }
#side-menu .arrow {
  color: var(--ink-4);
  font-size: 12px;
  margin-left: auto;
  transition: transform .2s, color .15s;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#side-menu .active > a > .arrow { color: var(--brand); }

/* 侧栏消息角标 */
.cb-menu-badge {
  margin-left: auto;
  margin-right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--danger);
  color: var(--cb-white);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cb-hidden { display: none !important; }

/* 外链菜单右侧外部链接图标 */
.cb-external-icon {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#side-menu .nav-second-level,
#side-menu .nav-third-level,
#side-menu .nav-four-level,
#side-menu .nav-second-level.collapse,
#side-menu .nav-second-level.collapse.in,
body .nav-second-level,
body .nav-third-level,
body .nav-four-level {
  background: var(--cb-white) !important;
  padding: 0;
  position: relative;
  left: 0;
}

#side-menu .nav-second-level li,
#side-menu .nav-third-level li,
#side-menu .nav-four-level li { border-bottom: none !important; padding-left: 0; padding-right: 0; }

#side-menu .nav-second-level li a,
#side-menu .nav-third-level li a,
#side-menu .nav-four-level li a {
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 8px 14px 8px 42px !important;
  border-radius: 8px;
  margin: 1px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
#side-menu .nav-second-level li a::before,
#side-menu .nav-third-level li a::before,
#side-menu .nav-four-level li a::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background .15s;
}
#side-menu .nav-second-level li a:hover,
#side-menu .nav-third-level li a:hover,
#side-menu .nav-four-level li a:hover { color: var(--brand); background: var(--bg); }
#side-menu .nav-second-level li.active > a,
#side-menu .nav-third-level li.active > a,
#side-menu .nav-four-level li.active > a { color: var(--brand); font-weight: 600; background: var(--brand-soft); box-shadow: none !important; border-left: 0 !important; }
#side-menu .nav-second-level li.active > a::before,
#side-menu .nav-third-level li.active > a::before,
#side-menu .nav-four-level li.active > a::before { background: var(--brand); }

/* 子菜单滚动条浅色化 */
#side-menu .nav-second-level::-webkit-scrollbar,
#side-menu .nav-third-level::-webkit-scrollbar { width: 4px; height: 4px; }
#side-menu .nav-second-level::-webkit-scrollbar-thumb,
#side-menu .nav-third-level::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 0; }
#side-menu .nav-second-level::-webkit-scrollbar-thumb:hover,
#side-menu .nav-third-level::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* 侧栏底部用户区 */
.cb-sidebar-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
  background: var(--cb-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
}
.cb-sidebar-footer .cb-sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--cb-white);
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
}
.cb-sidebar-footer .cb-sidebar-userinfo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cb-sidebar-footer .cb-sidebar-username {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-sidebar-footer .cb-sidebar-role {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-sidebar-footer .cb-sidebar-logout {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--ink-4);
  font-size: 13px;
  flex-shrink: 0;
  transition: all .15s ease;
}
.cb-sidebar-footer .cb-sidebar-logout:hover {
  background: var(--bg);
  color: var(--danger);
}

/* 折叠态隐藏底部用户区文字，只留头像和退出 */
.mini-navbar .cb-sidebar-footer .cb-sidebar-userinfo,
body.mini-navbar .cb-sidebar-footer .cb-sidebar-userinfo { display: none; }
.mini-navbar .cb-sidebar-footer,
body.mini-navbar .cb-sidebar-footer { padding: 12px 8px; justify-content: center; gap: 6px; }
.mini-navbar .cb-sidebar-footer .cb-sidebar-logout,
body.mini-navbar .cb-sidebar-footer .cb-sidebar-logout { display: none; }

/* 侧栏折叠态的菜单项仍保持白底 */
.mini-navbar .navbar-static-side #side-menu.nav > li > a,
body.mini-navbar .navbar-static-side #side-menu.nav > li > a { color: var(--ink-2); background: transparent !important; }
.mini-navbar .navbar-static-side #side-menu.nav > li.active > a,
body.mini-navbar .navbar-static-side #side-menu.nav > li.active > a { color: var(--brand) !important; background: var(--brand-soft) !important; }

/* 折叠态悬停弹出的子菜单强制白底 */
.mini-navbar .nav-second-level,
body.mini-navbar .nav-second-level,
.mini-navbar .nav-third-level,
body.mini-navbar .nav-third-level { background: var(--cb-white) !important; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }

/* 隐藏旧 H+ 侧栏激活条与深色皮肤残余 */
.fixed-sidebar .nav:not(.navbar-toolbar)>li.active { border-left: 0 !important; }
body.skin-1 .navbar-static-side .nav > li.active,
body.skin-2 .navbar-static-side .nav > li.active,
body.skin-3 .navbar-static-side .nav > li.active,
body.skin-4 .navbar-static-side .nav > li.active { border-left: 0 !important; }

/* slimscroll 在侧栏的滚动条：更细更淡 */
.slimScrollBar { background: var(--line-3) !important; border-radius: 99px; opacity: .25 !important; width: 4px !important; }
.slimScrollRail { opacity: 0 !important; }

/* 侧栏折叠后仍保持白底与品牌激活态 */
.mini-navbar .navbar-static-side,
body.mini-navbar .navbar-static-side { background: var(--cb-white) !important; }
.mini-navbar .nav > li.active > a,
body.mini-navbar .nav > li.active > a { background: var(--brand-soft) !important; color: var(--brand) !important; }

/* ============================================================ 顶部导航 */
.navbar.navbar-static-top {
  background: var(--cb-white);
  border-bottom: 1px solid var(--line);
  height: 56px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.navbar-header { height: 56px; display: flex; align-items: center; }

/* 面包屑 */
.cb-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
  transition: background .15s ease;
}
.cb-breadcrumb:hover { background: var(--bg); }
.cb-breadcrumb .fa-home { color: var(--brand); font-size: 14px; }
.cb-breadcrumb .fa-angle-right { color: var(--ink-4); font-size: 12px; }
.cb-breadcrumb strong { color: var(--ink); font-weight: 600; }

.minimalize-styl-2 {
  color: var(--ink-3) !important;
  background: transparent;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0 8px;
}
.minimalize-styl-2:hover { background: var(--bg); color: var(--ink) !important; }

/* 用户菜单靠右 */
.navbar-top-links {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  gap: 6px;
}

/* 全局搜索框（原型：灰底圆角 8px，宽 224px） */
.cb-global-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px 0 14px;
  height: 36px;
  color: var(--ink-4);
  font-size: 12.5px;
  transition: all .15s ease;
  cursor: pointer;
  min-width: 224px;
}
.cb-global-search:hover {
  border-color: var(--line-3);
  background: var(--cb-white);
}
.cb-global-search .fa-search { font-size: 13px; }
.cb-global-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-global-search-kbd {
  margin-left: auto;
  font-size: 10px;
  border: 1px solid var(--line-3);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--ink-4);
  background: var(--cb-white);
  line-height: 1;
}

/* 顶部工具按钮统一为 36x36 圆角图标按钮 */
.cb-topbar-btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  background: transparent;
  transition: all .15s ease;
  position: relative;
}
.cb-topbar-btn:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.cb-topbar-btn > .fa,
.cb-topbar-btn > .glyphicon {
  color: var(--brand);
  font-size: 16px;
}
.cb-topbar-btn .cb-badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--cb-white);
  box-shadow: 0 0 0 1px var(--danger);
}
/* 数字徽标（未读消息数，可容纳两位数） */
.cb-topbar-btn .cb-badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--danger);
  color: var(--cb-white);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  border: 2px solid var(--cb-white);
  box-shadow: 0 0 0 1px var(--danger);
}

/* 用户下拉触发器：圆形头像 + 用户名 + 下拉箭头（对齐参考图 real-home.png） */
.cb-user-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  overflow: visible;
  transition: background .15s ease, box-shadow .15s ease;
}
.cb-user-trigger:hover { background: var(--bg) !important; }
.cb-user-trigger img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-soft);
  flex-shrink: 0;
}
.cb-avatar-fallback {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--cb-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
/* 头像图片加载失败时由 onerror 摘掉该类，露出首字母兜底 */
.cb-avatar-fallback-hide { display: none !important; }
.cb-user-trigger .cb-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-user-trigger .cb-user-caret {
  font-size: 10px;
  color: var(--ink-4);
  transition: transform .15s ease;
}

.navbar-top-links .dropdown { position: relative; }
/* 下拉触发区向下延伸 6px，覆盖 trigger 与 menu 之间的间隙，
   防止鼠标移入菜单途中触发 mouseleave 导致菜单关闭 */
.navbar-top-links .dropdown > a.cb-user-trigger {
  position: relative;
}
.navbar-top-links .dropdown > a.cb-user-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -6px;
}
.navbar-top-links .dropdown.open > a.cb-user-trigger .cb-user-caret { transform: rotate(180deg); }
.navbar-top-links .dropdown .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;
  margin: 0;
}
.navbar-top-links .dropdown.open > a.cb-topbar-btn { background: var(--brand-soft); color: var(--brand); }
.navbar-top-links .dropdown.open > a.cb-user-trigger { background: var(--brand-soft) !important; border-color: var(--brand-soft); color: var(--brand) !important; }

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px -10px var(--ink-12);
}

/* ============================================================ 横向菜单(topnav) 专属 */
/* 仅作用于顶部导航模板，避免影响侧栏模式 */
.topnav-mode #navMenu {
  margin-left: 8px;
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs {
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li {
  margin: 0;
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  transition: all .15s ease;
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li > a:hover {
  background: var(--bg);
  color: var(--ink);
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li.active > a,
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li > a:focus {
  background: var(--brand-soft);
  color: var(--brand);
  border: none;
  font-weight: 600;
}
.topnav-mode #navMenu .navbar-toolbar.nav-tabs > li > a > .fa {
  color: var(--brand);
  font-size: 14px;
}

/* topnav 顶栏右侧：非 cb-* 类链接兜底 */
.topnav-mode .navbar-top-links li a:not(.cb-topbar-btn):not(.cb-user-trigger) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  background: transparent;
  transition: all .15s ease;
}
.topnav-mode .navbar-top-links li a:not(.cb-topbar-btn):not(.cb-user-trigger):hover {
  background: var(--brand-soft);
  color: var(--brand);
}
.topnav-mode .navbar-top-links li a:not(.cb-topbar-btn):not(.cb-user-trigger) > .fa {
  color: var(--brand);
  font-size: 15px;
}
.topnav-mode .navbar-top-links .dropdown.open > a:not(.cb-topbar-btn):not(.cb-user-trigger) {
  background: var(--brand-soft);
  color: var(--brand);
}

/* topnav 用户菜单：与侧栏模式一致的药丸触发器（头像 + 用户名 + 箭头） */
.topnav-mode .navbar-top-links .user-menu > a.cb-user-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  overflow: visible;
  transition: background .15s ease, box-shadow .15s ease;
}
.topnav-mode .navbar-top-links .user-menu > a.cb-user-trigger:hover { background: var(--bg) !important; }
.topnav-mode .navbar-top-links .user-menu > a.cb-user-trigger img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-soft);
  flex-shrink: 0;
}

/* topnav 下拉触发区向下延伸 6px，覆盖 trigger 与 menu 之间的间隙，
   防止鼠标移入菜单途中触发 mouseleave 导致菜单关闭 */
.topnav-mode .navbar-top-links .dropdown > a:not(.cb-topbar-btn):not(.cb-user-trigger) {
  padding-bottom: 14px;
  margin-bottom: -6px;
  position: relative;
}

/* ============================================================ 内容标签页（原型 tabsBar：42px 高，药丸 tab）
 * ⚠️ 页签必须写成 `.content-tabs .page-tabs a.menuTab` 这一层，并保留必要 `!important`：
 *    RuoYi 原生的页签样式分散在三个文件里，特异性都比裸 `.menuTab` 高，会被整体压掉——
 *      · css/style.css  `.content-tabs .roll-nav`(0,2,0)、`nav.page-tabs`(0,1,1)、`.page-tabs a`(0,1,1)
 *      · css/skins.css  `.page-tabs a`(0,1,1，color 带 !important)、
 *                       `.skin-blue .page-tabs a.active`(0,3,1，background/color 带 !important)
 *    只写 `.menuTab`(0,1,0) / `.menuTab.active`(0,2,0) 的后果：页签退化成
 *    50×28、2px 圆角、#1890ff 实心的原生小色块，和经典蓝的浅色药丸风完全不搭。
 *    本段统一提到 `.content-tabs .page-tabs a.menuTab` 层级，把控制权收回主题层。 */
.content-tabs {
  position: relative;               /* 左右按钮为绝对定位，需保留定位上下文 */
  background: var(--cb-white);
  border-bottom: 1px solid var(--line);
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.content-tabs nav.page-tabs {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;                      /* 覆盖原生 width:100000px 的假滚动宽度 */
  height: 42px;
  margin: 0 94px 0 30px;            /* 让开左侧 1 个、右侧 2 个功能按钮 */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.content-tabs .page-tabs-content {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}

/* 页签本体：浅色药丸（未选中=透明 / 悬停=浅灰 / 选中=品牌浅蓝） */
.content-tabs .page-tabs a.menuTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;                     /* 覆盖原生 min-width:50px */
  padding: 6px 12px;
  margin: 0;                        /* 覆盖原生 margin:5px 0 0 4px */
  border: 1px solid transparent;    /* 预留描边位，避免选中时尺寸跳动 */
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 18px;                /* 覆盖原生 line-height:26px */
  white-space: nowrap;
  text-align: left;
  color: var(--ink-2) !important;
  background: transparent !important;
  transition: background .15s ease, color .15s ease;
}
.content-tabs .page-tabs a.menuTab:hover {
  color: var(--ink) !important;
  background: var(--bg) !important;
}
.content-tabs .page-tabs a.menuTab.active,
.content-tabs .page-tabs a.menuTab.active:hover {
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
  border-color: transparent;
  font-weight: 600;
}
/* 「首页」页签加房子图标：用伪元素而不是真 <i>，因为 index.js 绑定了
   $('.menuTabs').on('click', '.menuTab i', closeTab)，真 <i> 会被当成关闭按钮 */
.content-tabs .page-tabs a.menuTab[data-id$="/system/main"]::before {
  content: "\f015";                 /* FontAwesome 4.7 fa-home */
  font-family: FontAwesome;
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}
/* 关闭按钮（除首页外的页签由 index.js 动态插入） */
.content-tabs .page-tabs a.menuTab i.fa-times-circle,
.content-tabs .page-tabs a.menuTab .fa.icon-close {
  font-size: 12px;
  color: var(--ink-4) !important;
  margin-left: 2px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent !important;
  transition: all .15s ease;
}
.content-tabs .page-tabs a.menuTab:hover i.fa-times-circle,
.content-tabs .page-tabs a.menuTab:hover .fa.icon-close,
.content-tabs .page-tabs a.menuTab.active i.fa-times-circle,
.content-tabs .page-tabs a.menuTab.active .fa.icon-close { color: var(--ink-3) !important; }
.content-tabs .page-tabs a.menuTab i.fa-times-circle:hover,
.content-tabs .page-tabs a.menuTab .fa.icon-close:hover {
  background: var(--danger-10) !important;
  color: var(--danger) !important;
}

/* 左右滚动 / 刷新按钮：26px 圆角方块，与 42px 页签栏垂直居中 */
.content-tabs .roll-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.content-tabs .roll-left { left: 8px; border-right: 0; }
.content-tabs .roll-right { right: 8px; border-left: 0; }
.content-tabs .roll-right.tabRight { right: 72px; }
.content-tabs .roll-nav:hover { color: var(--brand); background: var(--bg); }

/* 页签刷新按钮（文字按钮，宽度自适应） */
.content-tabs .tabReload {
  width: auto;
  padding: 0 10px;
  gap: 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* ============================================================ 主内容区自适应 */
/* 侧栏 236px，主内容区右移 236px 并占满剩余宽度（无黑边） */
#page-wrapper {
  width: calc(100% - 236px) !important;
  margin-left: 236px !important;
  min-width: 0 !important;
}
body.mini-navbar #page-wrapper {
  width: calc(100% - 70px) !important;
  margin-left: 70px !important;
}
body.canvas-menu #page-wrapper,
body.top-navigation #page-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
}
.mainContent,
#content-main {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
/* 对齐原型顶栏 56px + 页签 42px，覆盖 H+ 默认高度差，保证 iframe 区精确铺满 */
#content-main { height: calc(100% - 136px) !important; }
.tagsview-hide#content-main { height: calc(100% - 94px) !important; }
.footer-hide#content-main { height: calc(100% - 100px) !important; }
.tagsview-footer-hide#content-main { height: calc(100% - 58px) !important; }
.RuoYi_iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* ============================================================ 页脚 */
.footer {
  background: var(--cb-white);
  border-top: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 12px;
  padding: 14px 20px;
}

/* ============================================================ 搜索区 / 工具栏 */
.search-collapse {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 20px;
  border-bottom: none;
}
.select-list ul { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.select-list ul li { display: flex; align-items: center; gap: 8px; }
.select-list input, .select-list select {
  border: 1px solid var(--line-3);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12.5px;
  color: var(--ink);
  height: 32px;
}
.select-list input:focus, .select-list select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-12);
}

/* 工具栏容器：bootstrap-table 会把 #toolbar 整体搬进 .fixed-table-toolbar .bs-bars，
   而 .bs-bars 是 pull-left 收缩宽度的 —— 原来那圈 border 就变成一个「只包住按钮的小方框」，
   右侧和下侧各甩出一条线，非常难看。按设计交付原型（toolbarBtns），工具栏应是
   无边框的纯 flex 行：卡片感由上方「搜索卡片」与下方「表格卡片」各自承担。 */
.btn-group-sm {
  background: transparent;
  border: 0;
  padding: 12px 20px;
}

/* 表格卡片：与工具栏解绑后需要自己是一张完整卡片
   （原型 tableHTML：白底 + 1px 描边 + 12px 圆角 + 轻投影） */
.select-table.table-striped {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 0 0 12px;
}

/* ============================================================ 表单页 */
.form-horizontal .form-group {
  margin-bottom: 20px;
}
.form-horizontal .control-label {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 12.5px;
}
.form-header {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.form-header::before { display: none; }
.main-content {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 16px;
}

/* ============================================================ 分页 */
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--cb-white);
  box-shadow: var(--shadow-brand);
}
.pagination>li>a, .pagination>li>span {
  color: var(--ink-2);
  border-color: var(--line-3);
}
.pagination>li>a:hover { color: var(--brand); border-color: var(--brand); background: var(--cb-white); }

/* ============================================================ layer 弹窗 */
body .layui-layer {
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -12px var(--ink-18);
}
body .layui-layer-title {
  background: var(--cb-white);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius) var(--radius) 0 0;
}
body .layui-layer-btn .layui-layer-btn0 {
  background: var(--brand);
  border-color: var(--brand);
  border-radius: var(--radius-sm);
}

/* ============================================================ 通用工具类 */
.cb-text-ink { color: var(--ink); }.cb-text-ink-2 { color: var(--ink-2); }
.cb-text-ink-3 { color: var(--ink-3); }
.cb-text-ink-4 { color: var(--ink-4); }
.cb-text-brand { color: var(--brand); }
.cb-text-ok { color: var(--ok); }
.cb-text-warn { color: var(--warn); }
.cb-text-danger { color: var(--danger); }
.cb-text-info { color: var(--info); }

.cb-bg-brand-soft { background: var(--brand-soft); }
.cb-bg-ok-soft { background: var(--ok-10); }
.cb-bg-warn-soft { background: var(--warn-15); }
.cb-bg-danger-soft { background: var(--danger-10); }
.cb-bg-info-soft { background: var(--info-10); }
.cb-bg-page { background: var(--bg); }

.cb-border { border: 1px solid var(--line); }
.cb-border-2 { border: 1px solid var(--line-2); }
.cb-border-3 { border: 1px solid var(--line-3); }

.cb-radius { border-radius: var(--radius); }
.cb-radius-sm { border-radius: var(--radius-sm); }
.cb-radius-lg { border-radius: var(--radius-lg); }

.cb-shadow-card { box-shadow: var(--shadow-card); }
.cb-shadow-brand { box-shadow: var(--shadow-brand); }

.cb-font-mono { font-family: "JetBrains Mono", Consolas, monospace; }

/* 动效 */
.cb-trans { transition: all .16s; }
.cb-kpi-card { transition: box-shadow .22s, transform .22s; }
.cb-kpi-card:hover { box-shadow: 0 10px 24px -10px var(--ink-12); transform: translateY(-2px); }

/* ============================================================ 旧 H+ 兼容覆盖 */
.dashboard-header { background: transparent !important; border: none !important; }
.wrapper-content { padding: 20px; }

/* 修正 bootstrap 3 在经典蓝下的冲突 */
.navbar-default { background: transparent; border: none; }
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background: var(--bg); color: var(--ink); }

/* 隐藏旧版 H+ 侧边栏激活条 */
.fixed-sidebar .nav:not(.navbar-toolbar)>li.active { border-left: 0 !important; }

/* ============================================================ 服务监控（ruoyi-demo-modules 原型） */
.cb-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 992px) { .cb-usage-grid { grid-template-columns: 1fr; } }

.cb-usage-card {
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
}
.cb-usage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cb-usage-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cb-usage-name { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.cb-usage-value { font-size: 26px; font-weight: 700; color: var(--ink); font-family: "JetBrains Mono", Consolas, monospace; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cb-usage-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.cb-usage-bar {
  height: 8px; border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  margin-top: 6px;
}
.cb-usage-bar > i {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--info));
  transition: width .4s ease;
}
.cb-usage-bar.danger > i { background: linear-gradient(90deg, var(--danger), var(--danger-2)); }
.cb-usage-bar.warn > i { background: linear-gradient(90deg, var(--warn), var(--warn-2)); }

/* ============================================================ 监控信息表（属性:值 两列） */
.cb-info-table { width: 100%; border-collapse: collapse; }
.cb-info-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.cb-info-table tr:last-child td { border-bottom: none; }
.cb-info-table td:first-child {
  width: 140px;
  color: var(--ink-3);
  font-weight: 500;
  background: var(--bg-40);
}
.cb-info-table td:nth-child(2) { color: var(--ink); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; word-break: break-all; }
.cb-info-table td:nth-child(3) { width: 140px; color: var(--ink-3); font-weight: 500; background: var(--bg-40); }
.cb-info-table td:nth-child(4) { color: var(--ink); font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; word-break: break-all; }

/* ============================================================ 树表 / ztree 适配 */
.bootstrap-tree-table .table>tbody>tr>td:first-child { color: var(--ink); }
.bootstrap-tree-table .table>tbody>tr>td { border-bottom: 1px solid var(--line); }
.ztree li a { color: var(--ink-2); border-radius: 6px; padding: 2px 6px; }
.ztree li a:hover { background: var(--bg); text-decoration: none; }
.ztree li a.curSelectedNode { background: var(--brand-soft); color: var(--brand); border: none; opacity: 1; }
.ztree li span.button { margin-right: 3px; }

/* ============================================================ 状态 pill（表格内状态文字） */
.cb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500;
  padding: 2px 10px; border-radius: 999px;
  white-space: nowrap;
}
.cb-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cb-pill-ok { color: var(--ok); background: var(--ok-10); }
.cb-pill-warn { color: var(--warn); background: var(--warn-15); }
.cb-pill-danger { color: var(--danger); background: var(--danger-10); }
.cb-pill-info { color: var(--info); background: var(--info-10); }
.cb-pill-brand { color: var(--brand); background: var(--brand-soft); }

/* 旧 H+ 的 .text-danger/.text-success 微调 */
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }

/* ============================================================ 工具栏行（原型 toolbarBtns：无边框纯 flex 行） */
.btn-group-sm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-group-sm .btn { margin: 0; }
.btn-group-sm .btn i { margin-right: 0; }

/* bootstrap-table 把「工具栏」和「右侧图标组」一起包进 .fixed-table-toolbar（一个 left 浮 + 一个 right 浮）。
   改成 flex 一行：左右两端对齐、垂直居中，不再靠浮动，避免两组元素高低错位。 */
.bootstrap-table .fixed-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}
.bootstrap-table .fixed-table-toolbar::after { display: none; }
.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search {
  float: none !important;
  margin: 0 !important;
}
.bootstrap-table .fixed-table-toolbar .columns { padding-right: 20px; margin-left: auto !important; }
/* 按钮多时允许左侧工具栏收缩换行，而不是把卡片撑破 */
.bootstrap-table .fixed-table-toolbar .bs-bars { flex: 1 1 auto; min-width: 0; }

/* ============================================================ 页面标题头（原型 pageHead） */
.cb-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.cb-page-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.cb-page-sub { font-size: 12.5px; color: var(--ink-4); margin: 4px 0 0; }

/* ============================================================ 工具箱卡片墙 */
.cb-page { padding: 24px; }
.cb-page-head-extra { display: flex; align-items: center; gap: 10px; }
.cb-search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--cb-white); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 7px 12px; width: 240px; transition: .15s; font-size: 12.5px;
}
.cb-search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-12); }
.cb-search-box i { color: var(--ink-4); font-size: 13px; }
.cb-search-box input { border: none; outline: none; flex: 1; font-size: 12.5px; color: var(--ink); background: transparent; }

/* 图例 */
.cb-tool-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-bottom: 12px; font-size: 11.5px; color: var(--ink-3);
}
.cb-legend-label { font-weight: 600; color: var(--ink-2); }
.cb-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cb-legend-badge {
  display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700;
}
.cb-legend-badge.builtin { background: var(--brand-soft); color: var(--brand); }
.cb-legend-badge.external { background: var(--info-10); color: var(--info); }
.cb-legend-badge.hot { background: var(--warn-soft); color: var(--warn-deep); }
.cb-legend-badge.new { background: var(--ok-soft); color: var(--ok); }

.cb-tool-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cb-cat-chip {
  padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2); background: var(--cb-white); cursor: pointer; transition: .15s;
}
.cb-cat-chip:hover { border-color: var(--brand); color: var(--brand); }
.cb-cat-chip.on { background: var(--brand); border-color: var(--brand); color: var(--cb-white); font-weight: 600; }

/* 按分类分组 */
.cb-tool-group { margin-bottom: 14px; }
.cb-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cb-group-name { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cb-group-count { font-size: 11px; color: var(--ink-4); }

/* 紧凑工具网格：固定 4 列，避免分类内工具少时单卡被拉得过宽 */
.cb-tool-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1200px) { .cb-tool-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cb-tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cb-tool-grid { grid-template-columns: 1fr; } }
.cb-tool-card {
  position: relative; background: var(--cb-white); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; cursor: pointer; transition: .18s;
  box-shadow: 0 1px 2px var(--ink-04);
  display: flex;
}
.cb-tool-card:hover { border-color: var(--brand); box-shadow: 0 8px 20px -6px var(--brand-25); transform: translateY(-2px); }
.cb-card-type {
  position: absolute; top: 0; left: 0; font-size: 9px; font-weight: 700; letter-spacing: .5px;
  color: var(--cb-white); background: var(--brand); padding: 2px 6px; border-bottom-right-radius: 8px;
}
.cb-card-type.external { background: var(--info); }
.cb-tool-card .cb-card-body { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; margin-top: 2px; }
.cb-card-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: 14px; transition: .18s;
}
.cb-tool-card:hover .cb-card-icon { background: var(--brand); color: var(--cb-white); }
.cb-card-info { min-width: 0; flex: 1; }
.cb-card-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cb-card-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-card-desc {
  font-size: 11.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-card-link {
  font-size: 10.5px; color: var(--ink-4); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "JetBrains Mono", Consolas, monospace;
  display: flex; align-items: center; gap: 4px;
}
/* 顶部：hot/new/停用 内联标签（对齐原型 toolTags） */
.cb-tag {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 9px; font-weight: 600; padding: 0 5px; border-radius: 999px;
  flex-shrink: 0; line-height: 16px;
}
.cb-tag i { font-size: 9px; }
.cb-tag.hot { color: var(--warn-deep); background: var(--warn-soft); }
.cb-tag.new { color: var(--danger-deep); background: var(--warn-soft2); }
.cb-tag.stop { color: var(--ink-4); background: var(--cb-gray-100); }
/* 右上角 hover 图标操作（对齐原型 tool-actions） */
.cb-card-actions {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 3px;
  opacity: 0; transition: opacity .15s;
}
.cb-tool-card:hover .cb-card-actions { opacity: 1; }
.cb-card-act {
  width: 24px; height: 24px; border: none; background: var(--bg-90); border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-4); cursor: pointer; transition: .15s; font-size: 11px;
}
.cb-card-act.edit:hover { color: var(--brand); background: var(--brand-soft); }
.cb-card-act.del:hover { color: var(--danger); background: var(--danger-10); }

.cb-tool-empty {
  text-align: center; color: var(--ink-4); padding: 60px 0;
}
.cb-tool-empty i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .4; }

/* 弹窗表单 */
.cb-form .form-group { margin-bottom: 14px; }
.cb-form .control-label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }
.cb-form .required { color: var(--danger); }
.cb-form .cb-radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.cb-radio, .cb-checkbox { font-size: 12.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }
.cb-radio input[type=radio], .cb-checkbox input[type=checkbox] { margin: 0 5px 0 0; position: relative; top: -1px; }
.cb-form-inline { display: flex; gap: 22px; flex-wrap: wrap; }
.cb-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal-header { border-bottom: 1px solid var(--line); background: var(--cb-white); border-radius: 12px 12px 0 0; }
.modal-footer { border-top: 1px solid var(--line); background: var(--cb-white); border-radius: 0 0 12px 12px; }
.modal-content { border-radius: 12px; border: none; box-shadow: 0 20px 60px -20px var(--ink-35); }
.modal-body { background: var(--cb-white); }
.modal-backdrop { background-color: var(--ink-45); }
#toolModal .modal-dialog { margin-top: 60px; max-width: 520px; }

/* ============================================================ 对齐原型 ruoyi-demo-modules：表格 / 工具栏 / 分页 */
/* 表格：表头 var(--cb-gray-50) 12px 600，行高 42px，hover var(--cb-gray-50)（对齐原型 .th/.td） */
.bootstrap-table .table thead th,
.select-table thead th,
.table-striped thead th,
.table > thead > tr > th {
  background: var(--cb-gray-50) !important;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  white-space: nowrap;
}
.bootstrap-table .table tbody td,
.select-table tbody td,
.table > tbody > tr > td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--cb-gray-150) !important;
  color: var(--ink-2);
  font-size: 12.5px;
  vertical-align: middle;
}
.table-hover > tbody > tr:hover > td,
.bootstrap-table .table tbody tr:hover td,
.select-table tbody tr:hover td {
  background: var(--cb-gray-50) !important;
}

/* 工具栏按钮：严格对齐设计交付原型 toolbarBtns —— 新增实底蓝、其余一律描边。
   ⚠️ 模板里 新增=btn-success / 修改=btn-primary / 删除=btn-danger / 导出=btn-warning，
   与原型语义并非一一对应（原型：新增 primary、修改 plain、导出 green），所以这里按
   「按钮在工具栏里的角色」重新映射，而不是照搬 Bootstrap 的颜色命名。 */
.btn-group-sm .btn,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn,
.select-table .btn-group .btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none;
  transition: all .15s ease;
}
/* 图标固定 14px 槽位：fa-plus / fa-remove / fa-edit 这类字符本身宽窄差很多，
   不固定槽位会让每个按钮的文字起始位置参差不齐，看起来就是"按钮大小不统一" */
.btn-group-sm .btn > i,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn > i {
  width: 14px;
  margin-right: 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1;
}

/* 主操作（新增）：实底蓝 —— 原型 {t:'新增',c:'primary'} */
.btn-group-sm .btn-success,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-success {
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: var(--cb-white) !important;
  box-shadow: 0 2px 6px -2px var(--brand-50);
}
.btn-group-sm .btn-success:hover,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-success:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}

/* 中性操作（修改、刷新缓存一类）：灰描边 —— 原型 c:'plain' */
.btn-group-sm .btn-primary,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-primary,
.btn-group-sm .btn-default,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-default {
  background: var(--cb-white) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}
.btn-group-sm .btn-primary:hover,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-primary:hover,
.btn-group-sm .btn-default:hover,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-default:hover {
  background: var(--brand-soft2) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* 导出：绿描边 —— 原型 {t:'导出',c:'green'}（原来用橙描边，和删除的红描边同屏容易混淆） */
.btn-group-sm .btn-warning,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-warning {
  background: var(--cb-white) !important;
  border: 1px solid var(--ok-50) !important;
  color: var(--ok) !important;
}
.btn-group-sm .btn-warning:hover,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-warning:hover {
  background: var(--ok-06) !important;
  border-color: var(--ok) !important;
}

/* 删除（含其它危险操作）：红描边 —— 原型 {t:'删除',c:'red'} */
.btn-group-sm .btn-danger,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-danger {
  background: var(--cb-white) !important;
  border: 1px solid var(--danger-50) !important;
  color: var(--danger) !important;
}
.btn-group-sm .btn-danger:hover,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn-danger:hover {
  background: var(--danger-06) !important;
  border-color: var(--danger) !important;
}

/* 禁用态：未勾选行时「修改 / 删除」应明显不可用。
   原来实底蓝的 .btn-primary 只带 bootstrap 的 opacity .65，仍然很"抢眼"，
   在没有任何数据被选中的默认状态下，视觉重心全落在了一个点不动的按钮上。 */
.btn-group-sm .btn.disabled,
.btn-group-sm .btn[disabled],
.bootstrap-table .fixed-table-toolbar .bs-bars .btn.disabled,
.bootstrap-table .fixed-table-toolbar .bs-bars .btn[disabled] {
  background: var(--cb-white) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-4) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* 表格右上角图标组（搜索框开关 / 刷新 / 卡片视图 / 列）：去掉 bootstrap-table 默认的
   "每格一圈描边"，否则一排小方块加竖线，和左边按钮组撞在一起很碎。改成无边框图标按钮，
   hover 才浮出浅蓝底；尺寸与左侧工具栏按钮同为 32px。 */
.bootstrap-table .fixed-table-toolbar .columns {
  display: flex;
  align-items: center;
  gap: 2px;
}
.bootstrap-table .fixed-table-toolbar .columns .btn,
.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group .btn {
  height: 32px;
  min-width: 32px;
  padding: 0 7px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink-3) !important;
  box-shadow: none !important;
  font-size: 13px;
  line-height: 1;
}
.bootstrap-table .fixed-table-toolbar .columns .btn:hover,
.bootstrap-table .fixed-table-toolbar .columns .btn:focus,
.bootstrap-table .fixed-table-toolbar .columns .btn:active {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: transparent !important;
}
.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group { margin-left: 0 !important; }

/* 分页：28px 方块按钮，当前页蓝底（原型 paginationHTML） */
.bootstrap-table .pagination,
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pagination > li { margin: 0; }
.pagination > li > a,
.pagination > li > span {
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  line-height: 26px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
  background: var(--cb-white) !important;
  font-size: 12.5px !important;
  text-align: center;
  transition: all .15s ease;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: var(--cb-white) !important;
  font-weight: 600;
  box-shadow: 0 2px 6px -2px var(--brand-50) !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover {
  border-color: var(--line) !important;
  color: var(--ink-4) !important;
  background: var(--cb-white) !important;
}

/* 搜索卡片：白底 12px 圆角（原型 searchBar 卡片） */
.search-collapse {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: var(--shadow-card);
}

/* 页面内容留白对齐原型 p-6（24px） */
.cb-page { padding: 24px; }

/* 发消息弹窗：成员选择器 */
.cb-user-picker {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--cb-white);
  overflow: hidden;
}
.cb-user-picker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  background: var(--cb-gray-50);
}
.cb-user-picker-head .cb-search-box {
  margin: 0;
  flex: 1;
  min-width: 160px;
}
.cb-user-picker-head .cb-search-box input { width: 100%; }
.cb-user-picker-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.cb-user-picker-head .btn { padding: 5px 10px; font-size: 12px; line-height: 1.4; }
.cb-user-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  background: var(--cb-white);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 10px;
}
.cb-user-count b { color: var(--brand); font-weight: 600; }
.cb-user-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.cb-user-empty {
  grid-column: 1 / -1;
  padding: 32px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-4);
}
.cb-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cb-white);
  cursor: pointer;
  margin: 0;
  transition: all .15s ease;
}
.cb-user-item:hover,
.cb-user-item.cb-user-item--checked {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.cb-user-item input[type=checkbox] {
  margin: 0;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.cb-user-item .cb-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb-user-item .cb-user-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-user-item .cb-user-id {
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 消息记录弹窗 */
.cb-log-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cb-log-filter .cb-search-box { width: 220px; margin: 0; }
.cb-log-filter .form-control {
  height: 36px;
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink);
  background: var(--cb-white);
  box-shadow: none;
  transition: .15s;
}
.cb-log-filter .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-12);
}
.cb-pill-danger {
  background: #fff1f0;
  color: var(--danger);
}
.wrapper-content { padding: 24px; }

/* ============================================================ 企微模块（bus/wecom）组件
   说明：企微三页原使用 Tailwind Play CDN + lucide CDN（生产禁用、内网必然白屏），
   现统一下沉到经典蓝体系，与工具箱共用同一套 Token、圆角、阴影与交互范式。 */

/* iframe 内嵌页：隐藏右侧滚动条避免黑边，保留滚轮滚动 */
.cb-iframe-page,
.cb-iframe-page body { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cb-iframe-page::-webkit-scrollbar,
.cb-iframe-page body::-webkit-scrollbar { display: none; }

/* ---------- 应用卡片墙 ---------- */
.cb-app-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cb-app-card {
  position: relative;
  background: var(--cb-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-app-card:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 24px -12px var(--brand-28);
  transform: translateY(-2px);
}
.cb-app-head { display: flex; align-items: flex-start; gap: 12px; }
.cb-app-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.cb-app-info { min-width: 0; flex: 1; }
.cb-app-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-app-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cb-app-agent { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; font-family: "JetBrains Mono", Consolas, monospace; }
.cb-app-desc {
  font-size: 12px; color: var(--ink-3); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-app-meta {
  font-size: 11.5px; color: var(--ink-3); margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.cb-app-meta i { color: var(--ink-4); font-size: 12px; }
.cb-app-secret { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.cb-app-secret > span { color: var(--ink-3); }
.cb-secret-code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 4px;
  padding: 2px 6px;
  word-break: break-all;
}
.cb-secret-eye {
  border: none; background: transparent; padding: 0 2px;
  color: var(--ink-4); cursor: pointer; transition: color .15s;
}
.cb-secret-eye:hover { color: var(--brand); }
.cb-app-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cb-app-actions { display: flex; gap: 8px; }
.cb-app-actions + .cb-app-actions { margin-top: 8px; }
.cb-btn-block { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* ---------- 双栏布局（左主内容 + 右侧指引） ---------- */
.cb-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.cb-split-wide { display: grid; grid-template-columns: 236px 1fr; gap: 16px; align-items: start; }

/* ---------- 连接配置：连接头 ---------- */
.cb-conn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cb-conn-head .cb-app-icon { width: 44px; height: 44px; }
.cb-conn-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.cb-conn-desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.cb-conn-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 5px 10px; border-radius: 8px; }
.cb-conn-badge.on { color: var(--ok); background: var(--ok-10); }
.cb-conn-badge.off { color: var(--warn); background: var(--warn-10); }

/* ---------- 提示框 / 指引列表 ---------- */
.cb-hint-box {
  background: var(--brand-06);
  border: 1px solid var(--brand-15);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.6;
}
.cb-hint-box b { color: var(--ink); }
.cb-guide-title {
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.cb-guide-title i { color: var(--brand); }
.cb-guide-list { list-style: none; margin: 0; padding: 0; }
.cb-guide-list li {
  display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2);
  line-height: 1.7; margin-bottom: 10px;
}
.cb-guide-list li:last-child { margin-bottom: 0; }
.cb-guide-list i { color: var(--brand); flex-shrink: 0; margin-top: 5px; font-size: 11px; }
.cb-guide-list b { color: var(--ink); }
.cb-hint { font-size: 11.5px; color: var(--ink-4); margin-top: 4px; line-height: 1.5; }

/* ---------- 部门树 ---------- */
.cb-panel { background: var(--cb-white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.cb-panel-head {
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.cb-panel-head i { color: var(--brand); }
.cb-panel-head .cb-head-extra { margin-left: auto; }
.cb-dept-tree { padding: 8px; max-height: 520px; overflow: auto; }
.cb-dept-row {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  color: var(--ink-2); font-size: 13px; transition: background .12s, color .12s;
}
.cb-dept-row:hover { background: var(--bg); }
.cb-dept-row.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.cb-dept-row i { color: var(--ink-4); font-size: 12px; }
.cb-dept-row.active i { color: var(--brand); }
.cb-dept-children { padding-left: 16px; }

/* ---------- 成员表 ---------- */
.cb-table-scroll { overflow: auto; max-height: 520px; }
.cb-plain-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cb-plain-table th {
  background: var(--cb-gray-50); color: var(--ink-3);
  font-size: 12px; font-weight: 600; text-align: left;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}
.cb-plain-table td {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: 12.5px;
  vertical-align: middle;
}
/* 消息记录：时间、应用、接收人、状态列不换行；内容列溢出省略 */
.cb-plain-table td:nth-child(1),
.cb-plain-table td:nth-child(2),
.cb-plain-table td:nth-child(3),
.cb-plain-table td:nth-child(5) { white-space: nowrap; }
.cb-plain-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-plain-table td:nth-child(5) { text-align: center; }
.cb-plain-table tbody tr:hover td { background: var(--cb-gray-50); }
.cb-plain-table tbody tr:last-child td { border-bottom: none; }
.cb-plain-table .cb-empty-row { text-align: center; color: var(--ink-4); padding: 40px 0; }

/* ---------- 弹窗：表单栅格 ---------- */
/* 显式初始隐藏，避免部分覆盖样式导致 modal 在页面加载时闪现 */
#toolModal, #appModal, #connModal, #sendModal, #historyModal { display: none; }
.cb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
#appModal .modal-dialog,
#connModal .modal-dialog,
#historyModal .modal-dialog { margin-top: 60px; max-width: 560px; }
#historyModal .modal-dialog { max-width: 680px; }
/* sendModal 的弹窗宽度由 .cb-send-dialog 自身控制（920px） */
.cb-form .form-control { border-radius: 8px; border-color: var(--line-2); height: 38px; }
.cb-form textarea.form-control { height: auto; }
.cb-form .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-12); }
.cb-form .form-control-static { font-size: 12.5px; color: var(--ink-3); }

/* ---------- 消息历史 ---------- */
.cb-hist-list { max-height: 56vh; overflow: auto; }
.cb-hist-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cb-hist-item:last-child { border-bottom: none; }
.cb-hist-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-hist-to { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.cb-hist-time { margin-left: auto; font-size: 11.5px; color: var(--ink-4); font-family: "JetBrains Mono", Consolas, monospace; }
.cb-hist-body { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; word-break: break-all; white-space: pre-wrap; }

/* ---------- 响应式 ---------- */
@media (max-width: 1400px) {
  .cb-app-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .cb-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .cb-app-grid { grid-template-columns: 1fr; }
  .cb-split-wide { grid-template-columns: 1fr; }
  .cb-dept-tree, .cb-table-scroll { max-height: none; }
}
@media (max-width: 560px) {
  .cb-form-grid { grid-template-columns: 1fr; }
  .cb-page { padding: 16px; }
  .cb-page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .cb-page-head-extra { flex-direction: column; align-items: stretch; }
  .cb-search-box { width: auto; }
}

/* ---------- 无障碍：键盘可见焦点 + 减弱动效 ---------- */
.cb-app-card:focus-visible,
.cb-dept-row:focus-visible,
.cb-secret-eye:focus-visible,
.cb-app-actions .btn:focus-visible,
.cb-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* 应用卡片入场动效（轻微、可降级） */
@keyframes cbFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cb-app-card { animation: cbFadeUp .42s cubic-bezier(.2, .8, .2, 1) both; }
.cb-app-grid .cb-app-card:nth-child(2)  { animation-delay: .06s; }
.cb-app-grid .cb-app-card:nth-child(3)  { animation-delay: .12s; }
.cb-app-grid .cb-app-card:nth-child(4)  { animation-delay: .18s; }
.cb-app-grid .cb-app-card:nth-child(5)  { animation-delay: .24s; }
.cb-app-grid .cb-app-card:nth-child(n+6) { animation-delay: .30s; }
/* 首次渲染后标记 ready，后续筛选重渲染不再重复播放入场动画 */
.cb-app-grid.cb-app-grid--ready .cb-app-card { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .cb-app-card, .cb-dept-row, .cb-secret-eye, .cb-trans { transition: none !important; animation: none !important; }
  .cb-app-card:hover { transform: none; }
}

/* ============================================================
 *  发送消息弹窗  ·  双栏：左 = 接收人(成员/部门/标签)，右 = 编辑
 *  设计基准：经典蓝 cb-* 体系，参考"审批助手"信息密度
 * ============================================================ */
#sendModal.cb-send-modal .modal-dialog.cb-send-dialog {
  margin-top: 48px;
  max-width: 920px;
  width: calc(100vw - 80px);
}
#sendModal.cb-send-modal .modal-content.cb-send-content {
  border-radius: 14px;
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 70px -24px var(--ink-35);
  overflow: hidden;
}
/* —— Header —— */
.cb-send-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--cb-white);
}
.cb-send-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink);
}
.cb-send-title > .fa { color: var(--brand); font-size: 16px; }
.cb-send-title-main { font-weight: 600; }
.cb-send-dot { color: var(--ink-4); }
.cb-send-title-sub {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-weight: 500;
}
.cb-send-close {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-size: 14px;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: 6px;
  transition: all .15s ease;
}
.cb-send-close:hover { background: var(--cb-gray-50); color: var(--ink); }
.cb-send-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* —— Body：左右双栏 —— */
.cb-send-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 460px;
}
.cb-send-pane {
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.cb-send-pane--left { border-right: 1px solid var(--line); }
.cb-send-pane--right { background: var(--cb-white); }

.cb-send-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cb-send-row-action {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.cb-send-stat {
  font-size: 12px;
  color: var(--ink-3);
}
.cb-send-stat b { color: var(--brand); font-weight: 600; padding: 0 2px; }
.cb-send-stat--mute { margin-left: auto; color: var(--ink-4); }

.cb-send-link {
  cursor: pointer;
  color: var(--brand);
  text-decoration: none;
  transition: color .15s ease;
}
.cb-send-link:hover { color: var(--brand-hover); }
.cb-send-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

.cb-send-search { margin-bottom: 0; }

/* —— Tabs：成员/部门/标签 —— */
.cb-send-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin: 12px 0 4px;
}
.cb-send-tab {
  position: relative;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
  transition: color .15s ease;
}
.cb-send-tab:hover { color: var(--ink); }
.cb-send-tab.active {
  color: var(--brand);
  font-weight: 600;
}
.cb-send-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}
.cb-send-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; }

/* —— 部门快捷 chips —— */
.cb-send-dept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.cb-send-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--cb-white);
  cursor: pointer;
  transition: all .15s ease;
}
.cb-send-chip:hover { border-color: var(--brand); color: var(--brand); }
.cb-send-chip.active {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
  font-weight: 600;
}

/* —— 成员列表 · 头像行 —— */
.cb-send-list {
  flex: 1;
  overflow-y: auto;
  margin: 0 -8px;
  padding: 4px 8px 0;
}
.cb-send-list-empty {
  padding: 36px 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-4);
}
.cb-send-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
  user-select: none;
}
.cb-send-row:hover { background: var(--brand-soft); }
.cb-send-row.is-checked { background: var(--brand-soft); }
.cb-send-row:focus-within { outline: 2px solid var(--brand); outline-offset: -2px; }

.cb-send-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-active));
  color: var(--cb-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 1px 2px var(--ink-15);
}
.cb-send-avatar--wide { background: linear-gradient(135deg, var(--info), #0e9ea0); }

.cb-send-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-send-row-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-send-row-sub {
  font-size: 11.5px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-send-row-sub .cb-send-row-dept { color: var(--ink-3); }
.cb-send-row-sub .cb-send-row-dot { padding: 0 6px; color: var(--ink-4); }
.cb-send-row-sub .cb-send-row-id { font-family: "JetBrains Mono", "SF Mono", Consolas, monospace; }

.cb-send-row-check {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
  margin: 0;
}

/* —— 部门行（tab=部门） —— */
.cb-send-dept-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}
.cb-send-dept-row:hover { background: var(--brand-soft); }
.cb-send-dept-row .cb-send-avatar {
  background: linear-gradient(135deg, #5e7bff, #4063e0);
}
.cb-send-dept-row-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* —— 右栏：所属应用/消息类型/消息内容 —— */
.cb-send-app {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--cb-gray-50);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
}
.cb-send-app-agent {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--ink-4);
  margin-left: 6px;
}
.cb-send-select {
  background-color: var(--cb-white);
  cursor: pointer;
}
.cb-send-md-tip {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--brand-soft);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.cb-send-md-tip code {
  padding: 0 3px;
  border-radius: 4px;
  background: var(--cb-white);
  color: var(--brand);
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
}
.cb-send-mt { margin-top: 14px; }
.cb-send-textarea {
  width: 100%;
  flex: 1;
  min-height: 180px;
  resize: vertical;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cb-white);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-send-textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-12);
}
.cb-send-counter {
  text-align: right;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* —— Footer —— */
.cb-send-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--cb-gray-50);
}
.cb-send-tip {
  font-size: 12px;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cb-send-tip .fa { color: var(--info); }
.cb-send-buttons {
  display: inline-flex;
  gap: 10px;
  margin-left: auto;
}

/* —— 必填星标 —— */
.cb-required::after {
  content: " *";
  color: var(--danger);
  font-weight: 600;
}
/* 收起的窄屏：双栏折叠为单列 */
@media (max-width: 760px) {
  .cb-send-body { grid-template-columns: minmax(0, 1fr); }
  .cb-send-pane--left { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-send-tab, .cb-send-link, .cb-send-close, .cb-send-chip, .cb-send-row { transition: none !important; }
}

/* ============================================================
 *  通知日志详情弹窗
 * ============================================================ */
.cb-alert-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cb-alert-detail-title {
  flex: 1;
  min-width: 0;
}
.cb-alert-detail-title h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 7px 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.cb-alert-detail-meta {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cb-alert-detail-meta .mono {
  font-family: "JetBrains Mono", Consolas, monospace;
}
.cb-alert-detail-meta .dot { color: var(--ink-4); }

/* 元数据表格：label | value 单列，标签列不再挤成竖条 */
.cb-alert-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cb-alert-meta-table tr:not(:last-child) td { border-bottom: 1px solid var(--line); }
.cb-alert-meta-table td {
  padding: 11px 16px;
  font-size: 13px;
  line-height: 1.5;
  vertical-align: top;
}
.cb-alert-meta-table td:first-child {
  width: 110px;
  color: var(--ink-3);
  font-weight: 500;
  background: var(--cb-gray-50);
  white-space: nowrap;
}
.cb-alert-meta-table td:last-child {
  color: var(--ink);
  word-break: break-word;
}
.cb-alert-meta-table .cb-badge { vertical-align: middle; }
.cb-alert-meta-table .fa-weixin { color: var(--ok); margin-right: 4px; }

/* 原始详情 / 通知内容 区块 */
.cb-alert-section { margin-bottom: 18px; }
.cb-alert-section:last-of-type { margin-bottom: 0; }
.cb-alert-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.cb-alert-section-title .fa { color: var(--brand); font-size: 12px; }
.cb-alert-pre {
  background: var(--cb-white);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: "JetBrains Mono", Consolas, monospace;
}
.cb-alert-pre--text {
  font-family: inherit;
  color: var(--ink);
  background: var(--cb-white);
}
.cb-alert-section--detail .cb-alert-pre { background: var(--cb-gray-50); }

/* 底部操作 */
.cb-alert-detail-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}