/* ============================================================================
   门店通（连锁版）管理后台 · antd 皮肤层
   ============================================================================

   为什么有这个文件
   ----------------
   平台超管后台（`platform_admin/`）引的是 antd@4.24.15 的 **CSS 层**、DOM 手写 antd 类名；
   商户后台（`web_admin/`）是 Bootstrap 5.3 + 手写卡片。两套后台观感不一致：
   侧栏一个深蓝渐变 220px、一个 antd 深黑 208px；控件一个 38px 圆角 .375rem、
   一个 32px 圆角 2px。本文件把 Bootstrap 的组件外观**翻译**成 antd 观感，让两者统一。

   ⚠️ 这是「皮肤层」，不是「换框架」。三条边界，动之前先想清楚：
     1. **一个字都不动 Bootstrap 的 JS。** web_admin 有 15 处 `bootstrap.Modal` 调用
        （tasks / broadcast / users / task_review / conversations / shelf_admin_list）。
        撤掉 Bootstrap 的 CSS 会让模态框塌成「页面里一块常驻可见的内容」——不报错，就是难看。
     2. **不引 antd.min.css。** 它自带全局 reset（body 字体/行高、h1–h6 margin、
        button/input 默认样式），与 Bootstrap 的 reset 必然互相打架，且冲突点不可枚举。
     3. **图标继续用 bootstrap-icons。** `bootstrap-icons.css` 是独立文件，
        与 `bootstrap.css` 无依赖关系（`.bi` 类来自前者）。所以 165 处图标一处都不用改。

   加载顺序即胜负
   --------------
   本文件在 `base.html` 里引在 `<style>` **之后**：同 specificity 时后写的赢。
   而页面级的 `{% block extra_head %}` 排在最后，**有意让页面自己的样式赢**
   （那是业务定制，比如 settings 的 `.config-input-wrap .form-control`）。

   `!important` 的使用纪律（写新规则时必须守）
   ------------------------------------------
   只允许加在**视觉 token** 上：颜色 / 背景 / 圆角 / 阴影 / 字号 / 边框色 / 高度。
   **不许**加在 display / position / width / flex-* 上 —— 那会破坏各页布局，
   而且 Bootstrap 的 utility（`.d-flex` / `.justify-content-*` / `.bg-*`）自带 `!important`，
   跟它们对抗只会两败俱伤、还查不出是谁赢的。

   窄屏（≤768px）注意
   ------------------
   `base.html` 在窄屏把侧栏收到 60px。**但按钮高度不能跟着 antd 收到 32px** ——
   门店确实会用手机开 5100 的后台页（见 `topics/08` 的防火墙规则），
   触控目标低于 40px 点不准。所以 media query 里把控件拉回 ≥40px（同 `mobile.html` 的口径）。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 设计 token
   --------------------------------------------------------------------------- */
:root {
  /* 主色（antd 4 默认蓝） */
  --ad-primary:        #1890ff;
  --ad-primary-hover:  #40a9ff;
  --ad-primary-active: #096dd9;
  --ad-primary-bg:     #e6f7ff;   /* Tag / Alert 的浅底 */

  /* 语义色（对齐 antd 的 success / warning / error） */
  --ad-success:        #52c41a;
  --ad-success-bg:     #f6ffed;
  --ad-success-border: #b7eb8f;
  --ad-warning:        #faad14;
  --ad-warning-bg:     #fffbe6;
  --ad-warning-border: #ffe58f;
  --ad-error:          #ff4d4f;
  --ad-error-bg:       #fff2f0;
  --ad-error-border:   #ffccc7;
  --ad-info:           #1890ff;
  --ad-info-bg:        #e6f7ff;
  --ad-info-border:    #91d5ff;

  /* 文字三级（antd 用黑的不同透明度，不是灰阶色板） */
  --ad-text:            rgba(0, 0, 0, .85);
  --ad-text-secondary:  rgba(0, 0, 0, .65);
  --ad-text-disabled:   rgba(0, 0, 0, .25);

  /* 描边 / 背景 */
  --ad-border:       #d9d9d9;      /* 控件边框 */
  --ad-border-split: #f0f0f0;      /* 分隔线、卡片边框 */
  --ad-bg-layout:    #f0f2f5;      /* 页面底 */
  --ad-bg-container: #ffffff;
  --ad-bg-head:      #fafafa;      /* 表头、Tag 底 */

  /* 尺寸 */
  --ad-radius:    2px;             /* antd 4 默认圆角 */
  --ad-control-h: 32px;            /* 默认控件高 */
  --ad-font-size: 14px;
  --ad-line-height: 1.5715;
  --ad-sider-w:   208px;
  --ad-sider-bg:  #001529;
  --ad-sider-sub: #000c17;         /* 二级菜单底（比一级更深） */
  --ad-header-h:  64px;

  --ad-shadow-card:  0 1px 2px 0 rgba(0, 0, 0, .03), 0 1px 6px -1px rgba(0, 0, 0, .02), 0 2px 4px 0 rgba(0, 0, 0, .02);
  --ad-shadow-modal: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
  --ad-shadow-focus: 0 0 0 2px rgba(24, 144, 255, .20);

  --ad-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* ---------------------------------------------------------------------------
   1. 基础：字体、底色、链接色
   Bootstrap 5.3 把链接色挂在 --bs-link-color 上，改这个变量即可全局生效。
   --------------------------------------------------------------------------- */
:root {
  --bs-link-color: var(--ad-primary);
  --bs-link-color-rgb: 24, 144, 255;
  --bs-link-hover-color: var(--ad-primary-hover);
  --bs-body-color: var(--ad-text);
  --bs-body-font-size: var(--ad-font-size);
  --bs-border-color: var(--ad-border-split);
  --bs-border-radius: var(--ad-radius);
}

body {
  font-family: var(--ad-font) !important;
  font-size: var(--ad-font-size);
  line-height: var(--ad-line-height);
  color: var(--ad-text);
}

/* 标题统一：antd 的标题是「同色不同字号」，不是 Bootstrap 的深灰 + 粗体 */
h1, h2, h3, h4, h5, h6 { color: var(--ad-text); }
h1, h2 { font-weight: 600; }
h3, h4, h5 { font-weight: 500; }
h6 { font-weight: 500; font-size: 14px; }

hr { border-color: var(--ad-border-split); opacity: 1; }
code {
  color: #c41d7f; background: var(--ad-bg-head);
  padding: 1px 5px; border-radius: var(--ad-radius); font-size: 13px;
}
.text-muted { color: var(--ad-text-secondary) !important; }

/* 滚动条：antd 是细灰条，Bootstrap 不管这个 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .3); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------------
   2. 按钮
   高度用 --bs-btn-line-height 凑到 32px（14 × 1.5715 ≈ 22，加 8 内边距 + 2 边框）。
   --------------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 15px;
  --bs-btn-font-size: var(--ad-font-size);
  --bs-btn-line-height: var(--ad-line-height);
  --bs-btn-font-weight: 400;
  --bs-btn-border-radius: var(--ad-radius);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-box-shadow: var(--ad-shadow-focus);
  --bs-btn-disabled-opacity: .4;
  transition: all .3s cubic-bezier(.645, .045, .355, 1);
}

/* 主按钮 */
.btn-primary {
  --bs-btn-bg: var(--ad-primary);
  --bs-btn-border-color: var(--ad-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ad-primary-hover);
  --bs-btn-hover-border-color: var(--ad-primary-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ad-primary-active);
  --bs-btn-active-border-color: var(--ad-primary-active);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--ad-primary);
  --bs-btn-disabled-border-color: var(--ad-primary);
  --bs-btn-disabled-color: #fff;
}

/* 次按钮 / 默认按钮：白底 + 灰边 + 深字（antd 的 default button） */
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ad-border);
  --bs-btn-color: var(--ad-text);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: var(--ad-primary-hover);
  --bs-btn-hover-color: var(--ad-primary-hover);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: var(--ad-primary-active);
  --bs-btn-active-color: var(--ad-primary-active);
  --bs-btn-disabled-color: var(--ad-text-disabled);
  --bs-btn-disabled-border-color: var(--ad-border);
  --bs-btn-disabled-bg: var(--ad-bg-head);
}
.btn-secondary { --bs-btn-bg: var(--ad-bg-head); --bs-btn-hover-bg: #f0f0f0; --bs-btn-active-bg: #e6e6e6; }

/* 语义按钮 */
.btn-danger {
  --bs-btn-bg: var(--ad-error); --bs-btn-border-color: var(--ad-error);
  --bs-btn-hover-bg: #ff7875; --bs-btn-hover-border-color: #ff7875;
  --bs-btn-active-bg: #d9363e; --bs-btn-active-border-color: #d9363e;
}
.btn-success {
  --bs-btn-bg: var(--ad-success); --bs-btn-border-color: var(--ad-success);
  --bs-btn-hover-bg: #73d13d; --bs-btn-hover-border-color: #73d13d;
  --bs-btn-active-bg: #389e0d; --bs-btn-active-border-color: #389e0d;
}
.btn-warning {
  --bs-btn-bg: var(--ad-warning); --bs-btn-border-color: var(--ad-warning);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-hover-bg: #ffc53d; --bs-btn-hover-border-color: #ffc53d;
  --bs-btn-active-bg: #d48806; --bs-btn-active-border-color: #d48806;
}
.btn-info {
  --bs-btn-bg: var(--ad-primary); --bs-btn-border-color: var(--ad-primary);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-light {   /* 侧栏底部那两个按钮用的就是这个类（深底上的描边按钮） */
  --bs-btn-color: rgba(255, 255, 255, .85);
  --bs-btn-border-color: rgba(255, 255, 255, .35);
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-color: #fff;
  --bs-btn-border-radius: var(--ad-radius);
}
.btn-link {
  --bs-btn-color: var(--ad-primary);
  --bs-btn-hover-color: var(--ad-primary-hover);
  --bs-btn-active-color: var(--ad-primary-active);
  text-decoration: none;
}

/* 尺寸档：antd 的 small = 24px，large = 40px */
.btn-sm {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 7px;
  --bs-btn-font-size: var(--ad-font-size);
  --bs-btn-border-radius: var(--ad-radius);
  min-height: 24px;
}
.btn-lg {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 15px;
  --bs-btn-font-size: 16px;
  --bs-btn-border-radius: var(--ad-radius);
}

/* 按钮组 / 输入框组的圆角与分隔线要跟着 2px 走 */
.btn-group > .btn { border-radius: var(--ad-radius); }
.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn { border-radius: var(--ad-radius); }

/* ---------------------------------------------------------------------------
   3. 表单控件
   ⚠️ 高度只加在 input / select 上，**不能加在 .form-control 本身** ——
      textarea 也带 .form-control，设 height 会把多行框压成一条线。
   --------------------------------------------------------------------------- */
.input-group-text {
  font-size: var(--ad-font-size);
  color: var(--ad-text-secondary);
  background: var(--ad-bg-head);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  padding: 4px 11px;
}

input.form-control,
input.form-control-sm,
input.form-control-lg,
select.form-select,
select.form-select-sm,
select.form-select-lg {
  height: var(--ad-control-h);
  padding: 4px 11px;
  font-size: var(--ad-font-size);
  line-height: var(--ad-line-height);
  color: var(--ad-text);
  background-color: var(--ad-bg-container);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  transition: all .3s;
}
.form-control,
.form-select,
textarea.form-control {
  padding: 4px 11px;
  font-size: var(--ad-font-size);
  line-height: var(--ad-line-height);
  color: var(--ad-text);
  background-color: var(--ad-bg-container);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  transition: all .3s;
}
.btn-sm { font-size: var(--ad-font-size); }

.form-control::placeholder,
textarea.form-control::placeholder { color: var(--ad-text-disabled); }

/* 焦点态：antd 是「边框变亮 + 一圈淡蓝光晕」，不是 Bootstrap 的粗蓝描边 */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--ad-primary-hover) !important;
  box-shadow: var(--ad-shadow-focus) !important;
  outline: 0;
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: #f5f5f5;
  color: var(--ad-text-disabled);
  border-color: var(--ad-border);
}

.form-label {
  font-size: var(--ad-font-size);
  color: var(--ad-text);
  margin-bottom: 8px;
}
.form-text,
.form-check-label,
.invalid-feedback { font-size: 13px; }
.form-text { color: var(--ad-text-secondary); }
.form-check-input { border-color: var(--ad-border); border-radius: var(--ad-radius); }
.form-check-input:checked {
  background-color: var(--ad-primary);
  border-color: var(--ad-primary);
}
.form-check-input:focus { box-shadow: var(--ad-shadow-focus); border-color: var(--ad-primary-hover); }
.form-range::-webkit-slider-thumb { background-color: var(--ad-primary); }

/* input-group 里的按钮要跟输入框等高 */
.input-group > .btn { height: var(--ad-control-h); padding: 4px 11px; }
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text { height: 24px; padding: 0 7px; }

/* ---------------------------------------------------------------------------
   4. 表格（antd Table）
   ⚠️ `.table > :not(caption) > * > *` 是 Bootstrap 5 的单元格选择器（比 td/th 更稳，
      能盖住它自己的 padding 定义）。表头的 `background` 要写在 thead 上而不是 th 上，
      否则会跟 Bootstrap 的 `--bs-table-bg`（cell 级）打架。
   ⚠️ 表头**必须显式取消 uppercase**：base.html 的 `.table-card table th` 声明了
      `text-transform: uppercase`，那条规则在皮肤层之后加载、又比 `.table thead th`
      更具体，会让中文表头看着「忽大忽小」。
   --------------------------------------------------------------------------- */
.table {
  --bs-table-color: var(--ad-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ad-border-split);
  --bs-table-striped-bg: var(--ad-bg-head);
  --bs-table-hover-bg: var(--ad-bg-head);
  --bs-table-hover-color: var(--ad-text);
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 16px;
  font-size: var(--ad-font-size);
  border-bottom-width: 1px;
  border-bottom-color: var(--ad-border-split);
}

.table > thead { background: var(--ad-bg-head); }
.table > thead th {
  color: var(--ad-text);
  font-weight: 500;
  font-size: var(--ad-font-size);
  text-transform: none !important;   /* 见上：顶掉 base.html 的 uppercase */
  letter-spacing: 0 !important;
  white-space: nowrap;
  border-bottom: 1px solid var(--ad-border-split);
}
/* 表头去掉底部那条粗线（Bootstrap 的 thead 默认有 2px） */
.table > thead > tr > th { border-bottom: 1px solid var(--ad-border-split); }

.table > tbody > tr:last-child > * { border-bottom-color: transparent; }
.table-sm > :not(caption) > * > * { padding: 8px 16px; }

/* hover 行：直接写属性，别依赖 Bootstrap 的 --bs-table-accent-bg（5.3 已改成 state 变量） */
.table-hover > tbody > tr:hover > * { background-color: var(--ad-bg-head); color: var(--ad-text); }

.table-responsive { border-radius: var(--ad-radius); }

/* ---------------------------------------------------------------------------
   5. 卡片（antd Card：白底 + 1px 淡边 + 2px 圆角 + 几乎不可见的阴影）
   Bootstrap 5.3 的 .card 用 --bs-card-* 变量，直接覆盖即可。
   --------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--ad-bg-container);
  --bs-card-border-color: var(--ad-border-split);
  --bs-card-border-radius: var(--ad-radius);
  --bs-card-inner-border-radius: var(--ad-radius);
  --bs-card-spacer-x: 24px;
  --bs-card-spacer-y: 20px;
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-x: 24px;
  --bs-card-cap-padding-y: 16px;
  box-shadow: var(--ad-shadow-card);
}
.card-header {
  border-bottom: 1px solid var(--ad-border-split);
  font-weight: 500;
  font-size: 16px;
  color: var(--ad-text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 6px;
}
.card-footer { border-top: 1px solid var(--ad-border-split); background: transparent; }
.card-title { font-size: 16px; font-weight: 500; color: var(--ad-text); margin-bottom: 8px; }
.card-subtitle { color: var(--ad-text-secondary); }

/* ---------------------------------------------------------------------------
   6. Tag / 徽标
   ⚠️ 各页状态徽标写的是 `badge bg-success` 这类 —— `.bg-*` 是 Bootstrap 的 utility
      （自带 !important）。要让它们变成 antd 的「浅底 + 同色字」，必须同样上 !important，
      否则得到的是 Bootstrap 的饱和色块，一屏十来个像打翻了颜料盘。
   --------------------------------------------------------------------------- */
.badge {
  --bs-badge-padding-x: 7px;
  --bs-badge-padding-y: 0;
  --bs-badge-font-size: 12px;
  --bs-badge-font-weight: 400;
  --bs-badge-color: var(--ad-text);
  --bs-badge-border-radius: var(--ad-radius);
  height: 22px;
  line-height: 20px;
  border: 1px solid var(--ad-border);
  background: var(--ad-bg-head);
  color: var(--ad-text);
  vertical-align: middle;
}

.badge.bg-primary   { background: var(--ad-info-bg)    !important; color: var(--ad-primary) !important; border-color: var(--ad-info-border)    !important; }
.badge.bg-success   { background: var(--ad-success-bg) !important; color: var(--ad-success) !important; border-color: var(--ad-success-border) !important; }
.badge.bg-warning   { background: var(--ad-warning-bg) !important; color: #d48806           !important; border-color: var(--ad-warning-border) !important; }
.badge.bg-danger    { background: var(--ad-error-bg)   !important; color: #cf1322           !important; border-color: var(--ad-error-border)   !important; }
.badge.bg-info      { background: var(--ad-info-bg)    !important; color: var(--ad-primary) !important; border-color: var(--ad-info-border)    !important; }
.badge.bg-secondary { background: var(--ad-bg-head)    !important; color: var(--ad-text-secondary) !important; border-color: var(--ad-border)     !important; }
.badge.bg-light     { background: var(--ad-bg-head)    !important; color: var(--ad-text)    !important; border-color: var(--ad-border)         !important; }
.badge.bg-dark      { background: #fafafa              !important; color: var(--ad-text)    !important; border-color: var(--ad-border)         !important; }

/* ---------------------------------------------------------------------------
   7. 提示条（antd Alert：浅底 + 淡边 + 2px 圆角，不是 Bootstrap 的「左粗边」）
   --------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--ad-radius);
  --bs-alert-padding-x: 15px;
  --bs-alert-padding-y: 8px;
  --bs-alert-margin-bottom: 16px;
  --bs-alert-border-width: 1px;
  font-size: var(--ad-font-size);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.alert-primary, .alert-info {
  --bs-alert-bg: var(--ad-info-bg);
  --bs-alert-border-color: var(--ad-info-border);
  --bs-alert-color: var(--ad-text);
}
.alert-success { --bs-alert-bg: var(--ad-success-bg); --bs-alert-border-color: var(--ad-success-border); --bs-alert-color: var(--ad-text); }
.alert-warning { --bs-alert-bg: var(--ad-warning-bg); --bs-alert-border-color: var(--ad-warning-border); --bs-alert-color: var(--ad-text); }
.alert-danger, .alert-error { --bs-alert-bg: var(--ad-error-bg); --bs-alert-border-color: var(--ad-error-border); --bs-alert-color: var(--ad-text); }
.alert .btn-close { margin-left: auto; flex: none; }
/* antd Alert 左侧那个图标位：Bootstrap 没提供，用 ::before 补一个色点 */
.alert::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  flex: none; margin-top: 8px;
  background: var(--bs-alert-border-color);
}
.alert-success::before { background: var(--ad-success); }
.alert-warning::before { background: var(--ad-warning); }
.alert-danger::before, .alert-error::before { background: var(--ad-error); }
.alert-info::before, .alert-primary::before { background: var(--ad-primary); }

/* ---------------------------------------------------------------------------
   8. 分页（antd Pagination：32px 方块、2px 圆角、当前项蓝底白字）
   --------------------------------------------------------------------------- */
.pagination {
  --bs-pagination-padding-x: 6px;
  --bs-pagination-padding-y: 0;
  --bs-pagination-font-size: var(--ad-font-size);
  --bs-pagination-color: var(--ad-text);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--ad-border);
  --bs-pagination-border-radius: var(--ad-radius);
  --bs-pagination-hover-color: var(--ad-primary);
  --bs-pagination-hover-bg: #fff;
  --bs-pagination-hover-border-color: var(--ad-primary);
  --bs-pagination-focus-color: var(--ad-primary);
  --bs-pagination-focus-bg: #fff;
  --bs-pagination-focus-box-shadow: var(--ad-shadow-focus);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--ad-primary);
  --bs-pagination-active-border-color: var(--ad-primary);
  --bs-pagination-disabled-color: var(--ad-text-disabled);
  gap: 8px;
}
.page-link {
  min-width: var(--ad-control-h);
  height: var(--ad-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   9. 模态框（antd Modal：2px 圆角 + 无边框 + 三段式分隔线）
   ⚠️ base.html 的 #changePasswordModal 在标签上写了 inline 的 border-radius:12px
      和 background:#fafbfc —— inline 样式优先级最高，这里盖不住，已直接改掉那两处。
   --------------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow-modal);
}
.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ad-border-split);
  align-items: center;
}
.modal-title { font-size: 16px; font-weight: 500; color: var(--ad-text); }
.modal-body { padding: 24px; font-size: var(--ad-font-size); }
.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ad-border-split);
  gap: 8px;
}
.modal-footer > * { margin: 0; }   /* 顶掉 Bootstrap 的 .modal-footer > * { margin: 0 } 之外的手写间距 */
.modal-backdrop.show { opacity: .45; }
.modal-dialog { margin-top: 100px; }   /* antd 的 Modal 距顶 100px，不是垂直居中 */
.modal-dialog-centered { margin-top: 0; }
.btn-close { opacity: .45; }
.btn-close:hover { opacity: .85; }

/* ---------------------------------------------------------------------------
   10. 下拉 / 提示 / 折叠 / 标签页
   这些在后台页用得不多（全站 data-bs-* 只有 17 处），统一观感即可，别做深。
   --------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--ad-border-split);
  --bs-dropdown-border-radius: var(--ad-radius);
  --bs-dropdown-font-size: var(--ad-font-size);
  --bs-dropdown-link-active-bg: var(--ad-info-bg);
  --bs-dropdown-link-active-color: var(--ad-primary);
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08);
  padding: 4px 0;
}
.dropdown-item { padding: 5px 12px; }

.tooltip {
  --bs-tooltip-bg: rgba(0, 0, 0, .85);
  --bs-tooltip-border-radius: var(--ad-radius);
  --bs-tooltip-font-size: 12px;
}
.popover {
  --bs-popover-border-color: var(--ad-border-split);
  --bs-popover-border-radius: var(--ad-radius);
  --bs-popover-header-bg: var(--ad-bg-head);
}

.accordion {
  --bs-accordion-border-color: var(--ad-border-split);
  --bs-accordion-border-radius: var(--ad-radius);
  --bs-accordion-inner-border-radius: var(--ad-radius);
  --bs-accordion-btn-focus-box-shadow: var(--ad-shadow-focus);
  --bs-accordion-active-color: var(--ad-primary);
  --bs-accordion-active-bg: var(--ad-info-bg);
  --bs-accordion-btn-font-size: var(--ad-font-size);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--ad-border-split);
  --bs-nav-tabs-link-active-color: var(--ad-primary);
  --bs-nav-link-font-size: var(--ad-font-size);
  --bs-nav-link-padding-y: 8px;
  --bs-nav-link-padding-x: 16px;
}
.nav-tabs .nav-link { border-radius: var(--ad-radius) var(--ad-radius) 0 0; }

/* 进度条 / 骨架屏等零星组件，顺手统一色 */
.progress { --bs-progress-border-radius: var(--ad-radius); --bs-progress-bar-bg: var(--ad-primary); height: 8px; }
.spinner-border { border-width: .18em; }

/* ---------------------------------------------------------------------------
   11. 窄屏兜底：控件高度拉回 ≥40px（触控目标）
   ⚠️ 只覆盖高度与内边距，不碰布局。理由见文件头「窄屏注意」。
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-sm { min-height: 40px; padding: 0 11px; }
  input.form-control, select.form-select { height: 40px; }
  .pagination .page-link { min-width: 40px; height: 40px; }
}