/* site.css —— 自定义补充层（Bootstrap 覆盖不到的部分）。归属：P1/P2 看板代理。
 * 视觉意图取自原站 styles-board.css，组件化落地为 Bootstrap + 本层。
 */
:root {
  --brand: #c0392b;
  --brand-d: #96271b;
  --brand-l: #fdf3f1;
  --ok-c: #1d7a4f;
  --ok-bg: #eaf6f0;
  --ok-line: #bfe3d2;
  --warn-c: #c47f17;
  --warn-bg: #fff6e6;
}

/* ---------- 主题主色覆盖：Bootstrap 默认蓝 (#0d6efd) → 品牌绛红 ----------
 * bootstrap.min.css 里 .btn-primary / .btn-outline-primary / .text-bg-primary
 * 及表单 focus 色都是编译期硬编码的蓝色，必须在这里集中改写其 CSS 变量，
 * 避免页面残留蓝色主题。衍生态（hover / active / focus / disabled）一并对齐。
 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-d);
  --bs-btn-hover-border-color: var(--brand-d);
  --bs-btn-focus-shadow-rgb: 192, 57, 43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-d);
  --bs-btn-active-border-color: var(--brand-d);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 192, 57, 43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.text-bg-primary { color: #fff !important; background-color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.link-primary { color: var(--brand) !important; }
.link-primary:hover, .link-primary:focus { color: var(--brand-d) !important; }
/* 表单 focus（bootstrap 硬编码蓝边/蓝晕 → 品牌红晕） */
.form-control:focus, .form-select:focus {
  border-color: #e2a89d;
  box-shadow: 0 0 0 .2rem rgba(192, 57, 43, .15);
}
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: #e2a89d; box-shadow: 0 0 0 .2rem rgba(192, 57, 43, .15); }

/* 语义色例外：结算配置为绿色描边（原站语义，不随主题变红） */
#btnAugEntry {
  --bs-btn-color: var(--ok-c);
  --bs-btn-border-color: var(--ok-line);
  --bs-btn-bg: #f4fbf7;
  --bs-btn-hover-color: var(--ok-c);
  --bs-btn-hover-bg: var(--ok-bg);
  --bs-btn-hover-border-color: var(--ok-c);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ok-c);
  --bs-btn-active-border-color: var(--ok-c);
  --bs-btn-disabled-color: var(--ok-c);
  --bs-btn-disabled-border-color: var(--ok-line);
}
/* 顶栏工具栏描边按钮随主题（设计图：描边按钮为红色系） */
header.topbar .btn-outline-secondary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: #d9968b;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: #d9968b;
}

/* ---------- 顶栏布局：第一行 logo+统计，第二行工具栏整行居左 ----------
 * 设计图：页签/搜索/按钮行紧随头部之后居左铺满一行，不居中也不居右。
 */
/* 顶栏布局：第一行 logo+统计，第二行工具栏整行居左。
 * 设计图实测：统计行与工具栏行垂直间距约 27px、标题与统计区水平间距约 29px。
 * 注意必须 !important：HTML 上的 .gap-2 是带 !important 的 gap 简写，
 * 普通 row-gap/column-gap 长写会被其整体压制（SanyNote #42 前的 6px 就从未生效过）。 */
header.topbar { row-gap: 26px !important; column-gap: 24px !important; align-items: center; }
header.topbar .topactions { flex: 1 1 100%; gap: 6px !important; }
/* 窄屏（<lg，头部逐行堆叠）时收紧行/列距，避免大面积留白（设计图为宽屏基准） */
@media (max-width: 991.98px) {
  header.topbar { row-gap: 8px !important; column-gap: 8px !important; }
}

/* ---------- 顶部统计条（7 项，原站 tstat；紧凑高度对齐设计图） ---------- */
#topStats .tstat { display: inline-flex; flex-direction: column; line-height: 1.2;
  padding: 8px 13px; min-width: 78px;
  background: var(--brand-l); border: 1px solid #f0dcd7; border-radius: 9px; }
#topStats .tstat b { font-size: 1rem; line-height: 1.25; color: var(--brand); }
#topStats .tstat span { font-size: .72rem; line-height: 1.35; color: var(--bs-secondary-color); }
#topStats .tstat.ok { background: var(--ok-bg); border-color: #cbe8da; }
#topStats .tstat.ok b { color: var(--ok-c); }
#topStats .tstat.lk { background: #fdf0ee; border-color: #f0d0ca; }
#topStats .tstat.lk b { color: #8a7b78; }

/* ---------- 并列看板布局：每公司一列，等宽可横向滚动 ---------- */
main.board { display: flex; gap: 16px; align-items: flex-start; overflow: auto; }
main.board.as-tree { display: block; }

.board .co { flex: 1 1 0; min-width: 252px; max-width: 460px;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: .75rem; box-shadow: 0 1px 2px rgba(60, 30, 25, .05), 0 4px 14px rgba(60, 30, 25, .06); }
.board .co.drop { border-color: var(--brand); background: #fffaf9;
  box-shadow: 0 0 0 3px #f7e2dd; }

.col-head { padding: 10px 14px; border-bottom: 1px solid var(--bs-border-color);
  display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none;
  border-radius: .75rem .75rem 0 0; }
.col-head:hover { background: var(--brand-l); }
.col-title { font-size: .875rem; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.col-title small { display: block; font-weight: 400; font-size: .7rem;
  color: var(--bs-secondary-color); margin-top: 1px; }
.col-count { background: var(--brand); color: #fff; border-radius: 20px;
  padding: 1px 9px; font-size: .75rem; font-weight: 600; flex: 0 0 auto; }
.co.collapsed .col-count { background: var(--bs-secondary-color); }
.col-body { padding: 10px; min-height: 60px; }
.co.collapsed .col-body { display: none; }
.col-empty { color: var(--bs-secondary-color); font-size: .75rem; text-align: center; padding: 18px 0; }

/* ---------- 部门块 ---------- */
.dept { border: 1px solid var(--bs-border-color); border-radius: .55rem;
  margin-bottom: 9px; background: #fdfbfa; }
.dept:last-child { margin-bottom: 0; }
.dept.drop { border-color: var(--brand); background: #fff2ef; box-shadow: 0 0 0 2px #f9ded8; }
.dept-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  cursor: pointer; user-select: none; }
.dept-head:hover { background: var(--brand-l); border-radius: .5rem; }
.caret { font-size: 10px; color: var(--bs-secondary-color); transition: transform .18s;
  width: 11px; flex: 0 0 auto; }
.dept.collapsed .caret, .co.collapsed .col-head .caret,
.tnode.collapsed > .trow .caret, .tree.collapsed > .trow-group .caret { transform: rotate(-90deg); }
.dept-name { font-size: .82rem; font-weight: 600; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-cnt { font-size: .7rem; color: var(--bs-secondary-color); background: #fff;
  border: 1px solid var(--bs-border-color); border-radius: 20px; padding: 0 7px; flex: 0 0 auto; }
.dept.collapsed .dept-body { display: none; }
.dept-body { padding: 2px 8px 8px; display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.dept-body:empty::after { content: "拖动人员卡片到此"; color: #c9bfbc; font-size: .7rem; padding: 6px 2px; }
body.locked .dept-body:empty::after { content: "结构已锁定，暂不可拖入"; color: #cfc4c2; }

/* 部门头 ¥ 按钮（原站 btn ghost mini） */
.btn.ghost.mini { border: 1px solid var(--brand); background: #fff; color: var(--brand);
  border-radius: 6px; padding: 1px 8px; font-size: .72rem; line-height: 1.4; }
.btn.ghost.mini:hover { background: var(--brand-l); }

/* ---------- 人员卡片 chip（两行流式布局：姓名行 + 薪资按钮行，SanyNote #37） ---------- */
.pcard { position: relative; display: inline-flex; flex-direction: column; align-items: stretch;
  gap: 3px; padding: .28rem .55rem .32rem;
  border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg);
  font-size: .8rem; cursor: grab; user-select: none; min-width: 78px; max-width: 100%;
  transition: border-color .14s, box-shadow .14s, transform .14s; }
.pcard:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(192, 57, 43, .14);
  transform: translateY(-1px); }
.pcard .prow { display: inline-flex; align-items: baseline; gap: .3rem; min-width: 0; max-width: 100%; }
.pcard .nm { font-weight: 600; white-space: nowrap; }
.pcard .ps { color: var(--bs-secondary-color); font-size: .7rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.pcard .flag { position: absolute; top: -5px; right: -4px; background: var(--warn-c); color: #fff;
  font-size: 9px; border-radius: 8px; padding: 0 4px; line-height: 13px; }
/* 离职 / 二次入职 / 已调整 */
.pcard.left { background: #f7f5f4; border-style: dashed; }
.pcard.left .nm { color: var(--bs-secondary-color); font-weight: 500; }
.pcard.rh .nm::after { content: "复"; color: var(--warn-c); font-size: 10px; margin-left: 3px; }
.pcard.moved { border-color: #e6b8b0; background: #fffaf9; }
/* 薪资摘要按钮（原站 rulebtn sal）：改文档流第二行右对齐，不再绝对定位遮挡姓名 */
.pcard .rulebtn { align-self: flex-end; max-width: 100%;
  border: 1px solid #d9cfc9; background: #fbf8f6; color: var(--bs-secondary-color);
  border-radius: 5px; font-size: 10px; padding: 0 6px; line-height: 16px; cursor: pointer;
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard:hover .rulebtn { border-color: var(--brand); color: var(--brand); background: var(--brand-l); }
.pcard .rulebtn.on { background: var(--ok-bg); border-color: #cbe8da; color: var(--ok-c); }
.pcard .rulebtn.on:hover { background: #dcf0e6; }
/* 载入中（SanyNote #39）：禁用 + 转圈，防连点 */
.pcard .rulebtn:disabled { opacity: .62; cursor: wait; }
.pcard .rulebtn.arule-loading::before { content: ""; display: inline-block; width: 9px; height: 9px;
  margin-right: 4px; border: 1.5px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -1px; animation: arule-spin .7s linear infinite; }
@keyframes arule-spin { to { transform: rotate(360deg); } }

/* ---------- 拖拽态 ---------- */
.pcard.dragging { opacity: .4; transform: scale(.96); }
.drop { outline: 2px dashed var(--brand); outline-offset: 2px; background: rgba(192, 57, 43, .05); }

/* ---------- locked 态 ---------- */
body.locked .pcard { cursor: not-allowed; }
body.locked .pcard:hover { transform: none; border-color: var(--bs-border-color); box-shadow: none; }
body.locked main.board { filter: saturate(.85); }
body.locked .board .co, body.locked #tray { pointer-events: none; }
#btnLock.locked { background: #8a7b78; border-color: #8a7b78; color: #fff; }
#btnReset.locked { opacity: .45; }

/* ---------- 未归属托盘 ---------- */
#tray { flex-direction: column; }
#tray.border-dashed { border-style: dashed !important; border-color: #e3d3ae !important; background: #fffdf5; }
#tray.drop { border-color: var(--warn-c) !important; background: var(--warn-bg); }
#tray .tray-body { min-height: 56px; max-height: 132px; overflow: auto; }
#tray .tray-body:empty::after { content: "暂无未归属人员"; color: #c0b49a; font-size: .75rem; }

/* ---------- 组织架构树（缩进 + 连线 + 占比条） ---------- */
.tree { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: .75rem; box-shadow: 0 1px 2px rgba(60, 30, 25, .05), 0 4px 14px rgba(60, 30, 25, .06);
  max-width: 1000px; overflow: hidden; }
.tree.drop { border-color: var(--brand); box-shadow: 0 0 0 3px #f7e2dd; }
.trow { display: flex; align-items: center; gap: 9px; padding: 9px 14px; flex-wrap: wrap; }
.trow-group { background: linear-gradient(135deg, var(--brand), #d1503c); color: #fff;
  cursor: pointer; user-select: none; }
.trow-group:hover { filter: brightness(1.05); }
.trow-group .tname { font-size: .95rem; font-weight: 700; }
.trow-group .tsub { font-size: .75rem; opacity: .85; }
.trow-group .tcount { background: rgba(255, 255, 255, .22); color: #fff; border-color: transparent; }
.tree.collapsed .trow-cos { display: none; }
.tnode { border-left: 2px solid var(--bs-border-color); margin-left: 26px; }
.tree > .trow-cos > .tnode { border-left: none; margin-left: 0; }
.tnode.company.drop, .tnode.dept.drop { background: #fff5f2; }
.tnode.company { border-bottom: 1px solid var(--bs-border-color); }
.tnode.company:last-child { border-bottom: none; }
.trow-co { cursor: pointer; border-bottom: 1px solid var(--bs-border-color); background: #fdfbfa; user-select: none; }
.trow-co:hover { background: var(--brand-l); }
.trow-co .tname { font-size: .875rem; font-weight: 700; }
.trow-co .tcount { margin-left: auto; }
.tnode.collapsed > .trow-depts, .tnode.collapsed > .trow-mem { display: none; }
.trow-dept { background: #faf7f6; border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer; user-select: none; }
.trow-dept:hover { background: var(--brand-l); }
.trow-dept .tname { font-size: .82rem; font-weight: 600; }
.trow-mem { padding: 9px 14px; min-height: 44px; display: flex; flex-wrap: wrap;
  gap: 6px; align-content: flex-start; }
.trow-mem:empty::after { content: "拖动人员卡片到此部门"; color: #c9bfbc; font-size: .7rem; }
body.locked .trow-mem:empty::after { content: "结构已锁定，暂不可拖入"; color: #cfc4c2; }
.tcount { background: var(--brand-l); color: var(--brand); border: 1px solid #f0dcd7;
  border-radius: 20px; padding: 0 9px; font-size: .7rem; font-weight: 600; flex: 0 0 auto; }
.tbar { width: 88px; height: 6px; background: var(--bs-border-color); border-radius: 4px;
  overflow: hidden; flex: 0 0 auto; }
.tbar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.tname { flex: 0 1 auto; min-width: 0; }
.tsub { font-size: .7rem; color: var(--bs-secondary-color); }

/* ---------- 抽屉内表单（原站 fset/grid2/witems，Bootstrap 化） ---------- */
#dBody .fset { border: 1px solid var(--bs-border-color); border-radius: .6rem;
  padding: 13px 15px; margin-bottom: 14px; background: #fdfbfa; }
#dBody .fset > h3 { font-size: .82rem; font-weight: 700; margin-bottom: 3px;
  display: flex; align-items: center; gap: 7px; }
#dBody .fset > h3 .tag { font-size: .62rem; background: var(--brand-l); color: var(--brand);
  border: 1px solid #f0dcd7; border-radius: 5px; padding: 0 6px; font-weight: 600; }
#dBody .fset > p.sub { font-size: .7rem; color: var(--bs-secondary-color); margin-bottom: 11px; }
#dBody .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
#dBody .f label { display: block; font-size: .75rem; color: var(--bs-secondary-color); margin-bottom: 4px; }
#dBody .f textarea { min-height: 66px; resize: vertical; }
#dBody .witems { width: 100%; font-size: .75rem; margin-top: 4px; }
#dBody .witems th { font-weight: 600; color: var(--bs-secondary-color); padding: 6px 5px;
  font-size: .7rem; }
#dBody .witems td { padding: 3px 4px; vertical-align: middle; }
#dBody .witems .del { border: none; background: none; color: #c9bfbc; cursor: pointer;
  font-size: 15px; padding: 0 5px; line-height: 1; }
#dBody .witems .del:hover { color: var(--brand); }
#dBody .additem { margin-top: 9px; }
#dSaved.saved.warn { color: var(--warn-c); }
#dSaved.saved { color: var(--ok-c); }

/* ---------- 日志 / 去重报告行 ---------- */
#dBody .logs { display: flex; flex-direction: column; gap: 8px; }
#dBody .logrow { display: flex; gap: 10px; align-items: baseline; font-size: .75rem;
  flex-wrap: wrap; padding: 8px 11px; background: #fdfbfa;
  border: 1px solid var(--bs-border-color); border-radius: 8px; }
#dBody .logrow .tm { color: var(--bs-secondary-color); font-size: .7rem; flex: 0 0 auto;
  font-variant-numeric: tabular-nums; }
#dBody .logrow .mv { color: var(--bs-secondary-color); }
#dBody .logrow b { color: var(--bs-body-color); }
#dBody .empty { color: var(--bs-secondary-color); font-size: .82rem; text-align: center; padding: 34px 0; }

/* ---------- hidden 属性兜底（SanyNote #43） ----------
 * Bootstrap 的 .d-flex（display:flex !important）等作者级 display 会盖过 UA
 * 样式的 [hidden]{display:none}，导致 #lockbar 带 hidden 属性仍然显示。
 * 这里全局强制：有 hidden 属性就必须整条隐藏（#mask 旧规则并入）。 */
[hidden] { display: none !important; }

/* ---------- 自管遮罩（#mask，保留兼容） ----------
 * SanyNote #44：拖拽 move 保存 + 全量重载期间的 loading（转圈 + 提示文案，
 * 视觉沿用 .board-loading）。显示/隐藏由 board.js 切 hidden 属性，
 * 上方 [hidden]{display:none!important} 保证隐藏时整条不占位。 */
#mask.mask { position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: rgba(0, 0, 0, .35); z-index: 1040;
  color: #fff; font-size: .9rem; }
#mask.mask .spinner-border { width: 2.2rem; height: 2.2rem; }

/* ---------- 登录页（login.html，SanyNote #35） ---------- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 380px; max-width: calc(100vw - 32px); border: 1px solid #f0dcd7; }
.login-card .brand h1 { color: var(--brand); }
.login-err { margin-top: -4px; }

/* ---------- 看板加载占位（SanyNote #38）：接口返回前不再空白 ----------
 * SanyNote #45：spinner + 文案要在看板剩余区域内水平垂直居中。
 * main.board 是 align-items:flex-start 的横向 flex 容器，占位块作为其
 * flex 子项原本只有内容宽、贴左上；这里让它占满整行（flex:1 1 100%）
 * 并给足最小高度（约等于 header/tray 之外的剩余可视区），再用
 * justify-content:center + align-items:center 实现水平垂直双向居中。 */
.board-loading { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; flex: 1 1 100%;
  min-height: max(280px, 55vh); color: var(--bs-secondary-color); font-size: .85rem; }
.board-loading .spinner-border { width: 2.2rem; height: 2.2rem; color: var(--brand); }
.board-loading.error p { color: var(--brand-d); font-weight: 600; }

/* ---------- 顶栏用户区（admin.js 渲染） ---------- */
.topbar .userbox { gap: 8px; }
.topbar .userbox .uname { font-weight: 600; white-space: nowrap; }
.badge.rolebadge { font-weight: 600; }
.badge.rolebadge.role-admin { background: var(--brand-l); color: var(--brand);
  border: 1px solid #f0dcd7; }
.badge.rolebadge.role-viewer { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color); }

/* viewer（只读角色）：隐藏纯写操作按钮（后端 require_admin 兜底，这只是体验层） */
body.viewer #btnAttImport, body.viewer #btnLock, body.viewer #btnReset,
body.viewer #btnUnlock { display: none !important; }

/* ---------- 设置抽屉 · 用户管理（admin.js） ---------- */
#dBody .utable { font-size: .75rem; margin-bottom: 0; }
#dBody .utable th { font-weight: 600; color: var(--bs-secondary-color); font-size: .7rem; }
#dBody .utable td { padding: 6px 4px; vertical-align: middle; }
#dBody .utable .urole { width: 86px; font-size: .72rem; }
#dBody .utable .u-act { font-size: .72rem; padding: 2px 7px; }
.badge.uact { font-weight: 600; }
.badge.uact.on { background: var(--ok-bg); color: var(--ok-c); border: 1px solid var(--ok-line); }
.badge.uact.off { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color);
  border: 1px solid var(--bs-border-color); }
.badge.upwd { background: var(--warn-bg); color: var(--warn-c); font-weight: 600; }

/* ---------- 设计图复刻微调（SanyNote #36） ----------
 * 设计图：暖粉页面底色、白色锁定条（红锁+绛红标题）、标题与工具栏字号更大、
 * 按钮圆角 6px 更接近原设计。 */

/* ① 页面背景：暖粉（设计图取样），替换 Bootstrap 灰 */
body.bg-body-tertiary { background-color: #f9f1ee; }

/* ② 锁定提示条：白底卡片 + 红锁 + 绛红标题（不再是黄色 alert） */
.lockbar { background: #fff; border: 1px solid #f3e0db; border-radius: 8px;
  font-size: .84rem; }
.lockbar b { color: var(--brand-d); }
.lockbar .lk-ico { color: var(--brand); flex: 0 0 auto; }

/* ③ 标题与工具栏字号：对齐设计图实测（SanyNote #42 复核）
 * 设计图测量：标题字面 16px、副标题约 12px、统计数字 16px + 说明 11.5px、
 * 工具栏按钮字面 14px（按钮高约 33px）；此前标题被 .fs-5 的 !important 顶到 20px、
 * 统计数字 17.6px，整体偏大显得拥挤。
 * 按钮：窄屏用 .82rem 保证 14 个按钮一行放得下（1486 视口实测 1425px < 可用宽），
 * ≥1600px 宽屏恢复设计图的 .875rem + 8px 间距。 */
header.topbar .brand h1 { font-size: 1rem !important; } /* !important：压过 Bootstrap .fs-5 的 !important */
header.topbar .brand p { font-size: .75rem; }
header.topbar .topactions .btn {
  --bs-btn-font-size: .82rem;
  --bs-btn-padding-y: 5px;
  --bs-btn-padding-x: 11px;
  --bs-btn-border-radius: 6px;
  font-weight: 500;
}
@media (min-width: 1600px) {
  header.topbar .topactions { gap: 8px !important; }
  header.topbar .topactions .btn { --bs-btn-font-size: .875rem; }
}
header.topbar .form-control-sm,
header.topbar .form-select-sm { font-size: .82rem; height: 32px; }