/* ==========================================================================
   cq_admin 组件层（页头 / 卡片 / 表格 / 表单 / 徽标 / 分页）
   依赖：cq-tokens.css、cq-layout.css，须在其后加载
   手法：覆盖 Bootstrap 5 的类，业务页无需加额外类即整体换肤
   ========================================================================== */

/* ---------- 2.5 页头（全站统一标题区，由 head.php 统一渲染） ---------- */
.cq-pagehead{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 16px;
  margin-bottom:16px;
  /* 与卡片内容左对齐：container-fluid(gutter 12px) + col(12px) = 24px */
  padding-left:1.5rem; padding-right:1.5rem;
}
.cq-pagehead-main{ flex:1 1 auto; min-width:200px }
.cq-pagehead-title{
  margin:0; font-size:20px; font-weight:700; color:#111827; line-height:1.3;
}
.cq-pagehead-desc{
  margin:4px 0 0; font-size:12.5px; color:var(--cq-text-soft);
}
.cq-pagehead-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.cq-pagehead-actions .btn{ min-height:34px; padding:5px 14px; font-size:13px }

/* ---------- 3. 卡片（.card 与 .cq-card 等价，业务页统一用 .cq-card）---------- */
.card, .cq-card{
  background:var(--cq-surface);
  border:1px solid var(--cq-border);
  border-radius:var(--cq-radius-card);
  box-shadow:0 2px 6px rgba(16,24,40,.05);
  margin-bottom:16px;
}
.card-header, .cq-card-header{
  padding:13px 16px;
  background:var(--cq-surface);
  border-bottom:1px solid var(--cq-border);
  border-radius:var(--cq-radius-card) var(--cq-radius-card) 0 0;
  font-size:15px; font-weight:600; color:#111827;
}
.cq-card-title, .card-title{ margin:0; font-size:15px; font-weight:600; color:#111827 }
.card-body, .cq-card-body{ padding:16px }
.card-footer, .cq-card-footer{
  padding:11px 16px; background:#fafbfd;
  border-top:1px solid var(--cq-border);
  border-radius:0 0 var(--cq-radius-card) var(--cq-radius-card);
  color:var(--cq-text-soft);
  font-size:13px; line-height:1.7;
}
.cq-card-footer .fa-info-circle{
  margin-right:6px; color:var(--cq-primary);
}
/* 表格类卡片：去掉内边距让表格贴边 */
.card-table > .card-body, .cq-card-table > .cq-card-body{ padding:0 }

/* 紧凑/扁平卡片：用于筛选栏 */
.cq-card.cq-card-compact > .cq-card-header{ padding:10px 12px }
.cq-card.cq-card-compact > .cq-card-body{ padding:10px 12px }
.cq-card.cq-card-flat{
  box-shadow:none;
  border-color:var(--cq-border);
  background:var(--cq-surface-2);
}

/* 卡片内直接挂 list-group（如首页信息卡）：贴边、去首尾边框 */
.cq-card > .list-group{ border-left:0; border-right:0; border-radius:0; margin-bottom:0 }
.cq-card > .list-group > .list-group-item:first-child{ border-top:0 }
.cq-card > .list-group > .list-group-item:last-child{ border-bottom:0 }

/* 卡片标题：文字与右侧操作（刷新按钮）flex 对齐 */
.cq-card-title{ display:flex; align-items:center; gap:8px }
.cq-card-title .float-end,
.cq-card-title .float-end{ float:none; margin-left:auto }

/* ---------- 4. 状态徽标（pill） ---------- */
.cq-badge{
  display:inline-block;
  margin:2px 4px 2px 0;
  padding:2px 9px;
  border-radius:var(--cq-radius-pill);
  font-size:11.5px; font-weight:600; line-height:1.6;
  white-space:nowrap; vertical-align:middle;
}
.cq-badge .fa{ margin-right:4px; font-size:11px; vertical-align:0 }
.cq-badge a{ color:inherit }
.cq-badge-success{ background:var(--cq-success-bg); color:var(--cq-success-fg) }
.cq-badge-warning{ background:var(--cq-warning-bg); color:var(--cq-warning-fg) }
.cq-badge-danger { background:var(--cq-danger-bg);  color:var(--cq-danger-fg) }
.cq-badge-info   { background:var(--cq-info-bg);    color:var(--cq-info-fg) }
.cq-badge-muted  { background:var(--cq-neutral-bg); color:var(--cq-neutral-fg) }

/* 卡片标题 warning 变体（如手续费利润头） */
.cq-card-header.cq-header-warning{
  background:var(--cq-warning-bg);
  color:var(--cq-warning-fg);
  border-bottom-color:transparent;
}

/* 让 BS5 原生 badge 也走同一套观感 */
.badge{ font-weight:600; font-size:11.5px; border-radius:var(--cq-radius-pill) }

/* ---------- 5. 表格 ---------- */
.table{ margin-bottom:0; color:var(--cq-text); font-size:13px }
.table > thead > tr > th{
  background:var(--cq-surface-2);
  color:#475569;
  font-size:12px; font-weight:600;
  letter-spacing:.2px;
  padding:10px 14px;
  border-bottom:1px solid var(--cq-border);
  white-space:nowrap;
}
.table > tbody > tr > td{
  padding:11px 14px;
  border-color:#f1f5f9;
  vertical-align:middle;
}
.table > tbody > tr{ height:var(--cq-row-h) }
.table-hover > tbody > tr:hover > td{ background:#eff6ff }
.table-striped > tbody > tr:nth-of-type(odd) > td{ background:#f8fafc }
.table-striped.table-hover > tbody > tr:hover > td{ background:#eff6ff }

/* 金额等宽右对齐 */
.cq-num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }

/* 表格操作列 */
.cq-ops{ white-space:nowrap }
.cq-ops a, .cq-ops button{
  color:var(--cq-primary); background:none; border:0; padding:0 6px; font-size:13px;
}
.cq-ops a:hover, .cq-ops button:hover{ color:var(--cq-primary-dark); text-decoration:underline }
.cq-ops .danger{ color:#dc2626 }
.cq-ops .danger:hover{ color:#b91c1c }

/* ---------- 6. bootstrap-table 容器 ---------- */
.bootstrap-table{ margin:0 }
.fixed-table-container{ border:0 !important; border-radius:0 }
.bootstrap-table .fixed-table-toolbar{
  padding:12px 16px;
  border-bottom:1px solid var(--cq-border);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  position:relative; z-index:1; /* 创建独立层叠上下文，避免内部元素飘到侧栏之上 */
}
/* 列筛选/全屏/刷新等按钮由 table.js 在初始化后移入 #searchToolbar 操作区，
   与左侧查询按钮同排对齐；下方仅作兜底（未移动场景下的基础样式） */
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .fullscreen,
.bootstrap-table .fixed-table-toolbar .refresh,
.bootstrap-table .fixed-table-toolbar .toggle{
  flex:0 0 auto; float:none !important;
}
.bootstrap-table .fixed-table-toolbar .search input{
  height:34px; padding:5px 12px;
  border:1px solid var(--cq-border-strong);
  border-radius:var(--cq-radius-ctl);
  box-shadow:none; font-size:13px;
}
.bootstrap-table .fixed-table-toolbar .search input:focus{
  border-color:var(--cq-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  outline:none;
}
.bootstrap-table .fixed-table-toolbar .columns label{
  display:flex; align-items:center; gap:6px; margin:0;
  padding:3px 8px; font-weight:500; font-size:13px;
}

/* bootstrap-table 工具栏按钮（列设置/全屏/刷新等）：图标必须可见 */
.fixed-table-toolbar .btn,
.fixed-table-toolbar .columns .btn,
.fixed-table-toolbar .columns-right .btn{
  min-width:36px; min-height:34px;
  padding:5px 10px;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  border:1px solid var(--cq-border-strong);
  background:#fff; color:#475569; font-size:13px;
}
.fixed-table-toolbar .btn:hover{
  background:#f8fafc; border-color:#94a3b8; color:#1e293b;
}
.fixed-table-toolbar .btn i.fa,
.fixed-table-toolbar .btn .fa{
  font-family:'FontAwesome'; font-size:13px; color:#64748b;
}
.fixed-table-toolbar .btn:hover .fa{ color:#475569 }
/* 隐藏 bootstrap-table 内部可能重复的旧 caret，只保留 BS5 自动三角 */
.fixed-table-toolbar .caret,
.dropdown-group .caret{ display:none }
.fixed-table-toolbar .dropdown-toggle::after,
.dropdown-group .dropdown-toggle::after{ margin-left:6px }
/* 列设置下拉项 */
.fixed-table-toolbar .dropdown-menu .dropdown-item label{ color:#334155 }
.fixed-table-toolbar .dropdown-menu .dropdown-item:hover{ background:#f1f5f9 }

/* 工具栏下拉菜单须高于固定侧栏（侧栏 z-index:1035），且不被卡片裁剪。
   按钮组本身不再提升 z-index，防止滚动时覆盖侧栏。 */
.fixed-table-toolbar .dropdown-menu{ z-index:1040 }

/* ---------- 9. 分页栏：信息在左，控件在右，无中间空白 ---------- */
.fixed-table-pagination{
  padding:12px 16px;
  border-top:1px solid var(--cq-border);
  background:var(--cq-surface-2);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.fixed-table-pagination .float-start,
.fixed-table-pagination .pagination-info,
.fixed-table-pagination .pagination-detail,
.fixed-table-pagination .page-list{
  font-size:12.5px; color:#64748b; line-height:34px;
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
}
.fixed-table-pagination .float-end,
.fixed-table-pagination .pagination,
.fixed-table-pagination .pagination-detail{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
}
.fixed-table-pagination .float-end{ margin-left:0 }
.fixed-table-pagination .page-list{ gap:6px }
.fixed-table-pagination .page-list .btn-group{ display:inline-flex }
.fixed-table-pagination .page-jump-to{
  display:flex; align-items:center; gap:6px;
  color:#64748b; font-size:12.5px;
}
.fixed-table-pagination .page-jump-to input{
  width:54px; height:34px; padding:5px 8px;
  border:1px solid var(--cq-border-strong); border-radius:var(--cq-radius-ctl);
  text-align:center; font-size:13px;
}
.fixed-table-pagination .page-jump-to .btn{
  height:34px; padding:5px 12px; font-size:12.5px;
}
.fixed-table-loading{ background:rgba(255,255,255,.85); color:var(--cq-text-soft); font-size:13px }
.table > tbody > tr.no-records-found > td{
  padding:32px 14px; color:var(--cq-text-mute); text-align:center;
}

/* ---------- 7. 表单 ---------- */
.form-label{ font-size:13px; font-weight:600; color:#475569; margin-bottom:5px }
.form-control, .form-select{
  padding:7px 12px;
  border:1px solid var(--cq-border-strong);
  border-radius:var(--cq-radius-ctl);
  font-size:13.5px; color:var(--cq-text);
}
.form-control:focus, .form-select:focus{
  border-color:var(--cq-primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-control::placeholder{ color:var(--cq-text-mute) }
.form-text{ font-size:12px; color:var(--cq-text-mute) }
.input-group-text{
  border-color:var(--cq-border-strong);
  background:#f8fafc; color:var(--cq-text-soft);
  font-size:13px;
}
/* 筛选区：标签在上（通用表单），搜索工具栏里会重写为横向 */
.cq-filter-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  align-items:end;
}
.cq-filter-actions{ display:flex; gap:8px; flex:0 0 auto }

/* 筛选栏：紧凑横向 flex 布局（标签与控件同行，保证整排高度一致、上下对齐） */
#searchToolbar.cq-filter-grid{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  align-items:center;
}
#searchToolbar .cq-form-group{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  margin-bottom:0; flex:0 0 auto;
}
#searchToolbar .cq-form-group > label{
  flex:0 0 auto;
  font-size:13px; font-weight:600; color:#475569; line-height:1; margin:0; white-space:nowrap;
}
#searchToolbar .form-control,
#searchToolbar .form-select,
#searchToolbar .input-group-text{
  min-height:34px; padding:5px 10px;
  font-size:13px;
}
#searchToolbar .form-control,
#searchToolbar .form-select,
#searchToolbar .input-group{ width:auto; min-width:120px }
/* 关键字段宽度 */
#searchToolbar select[name="column"]{ min-width:140px }
#searchToolbar input[name="value"]{ min-width:200px }
#searchToolbar input[name="uid"]{ width:100px }
#searchToolbar input[name="channel"]{ width:85px }
#searchToolbar select[name="dstatus"]{ min-width:130px }
#searchToolbar select[name="status"]{ min-width:115px }
#searchToolbar select[name="order"]{ min-width:140px }
#searchToolbar .input-daterange{ min-width:240px; max-width:300px }
#searchToolbar .cq-filter-actions{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-left:auto;
}
#searchToolbar .btn{ min-height:34px; padding:5px 14px; font-size:13px }

/* ---------- 8. 按钮 ---------- */
.btn{ font-size:13.5px; font-weight:500; border-radius:var(--cq-radius-ctl) }
.btn-sm{ font-size:12.5px }
.btn:focus, .btn:active:focus{ box-shadow:0 0 0 3px rgba(37,99,235,.18) }
.btn-primary{
  background:var(--cq-primary); border-color:var(--cq-primary);
  box-shadow:0 1px 2px rgba(37,99,235,.18);
}
.btn-primary:hover{ background:var(--cq-primary-dark); border-color:var(--cq-primary-dark) }
.btn-outline-secondary{
  border-color:var(--cq-border-strong); color:#475569; background:#fff;
}
.btn-outline-secondary:hover{ background:#f1f5f9; border-color:#94a3b8; color:#1e293b }
.btn-outline-secondary .fa{ color:#64748b }

.cq-card-header .btn-outline-secondary{
  color:#334155; border-color:#94a3b8; background:#fff;
}
.cq-card-header .btn-outline-secondary:hover{
  background:#f1f5f9; border-color:#64748b; color:#0f172a;
}

/* ---------- 9. 分页 ---------- */
.pagination{ margin:0 }
.pagination .page-link{
  border-color:var(--cq-border-strong);
  color:#475569; margin:0 3px;
  border-radius:var(--cq-radius-ctl) !important;
  padding:6px 12px; font-size:13px;
}
.pagination .page-link:hover{
  background:var(--cq-primary-soft);
  border-color:var(--cq-primary);
  color:var(--cq-primary-dark);
}
.pagination .active > .page-link{
  background:var(--cq-primary); border-color:var(--cq-primary); color:#fff;
}

/* ---------- 9.5 下拉菜单 ---------- */
.dropdown-menu{
  border-color:var(--cq-border-strong);
  box-shadow:0 4px 12px rgba(16,24,40,.08);
  border-radius:var(--cq-radius-ctl);
  font-size:13px;
}
.dropdown-menu .dropdown-item{
  color:#334155; padding:7px 14px;
  display:flex; align-items:center; gap:8px;
}
.dropdown-menu .dropdown-item:hover{ background:#f1f5f9; color:#1e293b }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{ background:var(--cq-primary-soft); color:var(--cq-primary) }
.dropdown-menu .dropdown-divider{ border-color:var(--cq-border) }

/* ---------- 10. 空状态 ---------- */
.cq-empty{
  padding:48px 16px; text-align:center; color:var(--cq-text-mute);
}
.cq-empty .fa{ font-size:32px; color:#cbd5e1; display:block; margin-bottom:12px }
.cq-empty p{ margin:0; font-size:13px }

/* ---------- 11. 登录页 ----------
   访客页（login / reg / findpwd / OAuth）为「垂直居中单卡片」布局：
   .cq-login-wrap 是占满剩余高度的 flex 容器，卡片与页脚版权均为其中的子项，
   两者需同处一个纵向 flex 列，否则版权会被 flex 排到卡片右侧。 */
.cq-login-wrap{
  min-height:calc(100vh - var(--cq-topbar-h));
  display:flex; flex-direction:column;              /* 纵向排列：卡片 + 版权 */
  align-items:center; justify-content:center;
  padding:48px 16px;
}
.cq-login-footer{                                   /* 版权：卡片下方居中 */
  margin-top:20px; text-align:center;
  font-size:12px; color:var(--cq-text-mute);
}
.cq-login-footer a{ color:var(--cq-text-soft) }
.cq-login-footer a:hover{ color:var(--cq-primary) }

.cq-login-card{
  width:100%; max-width:460px;
  box-shadow:0 12px 48px rgba(2,8,20,.14);
}
/* 卡片头与卡片体同底色同圆角，去掉分隔线，让标题与表单成为一个整体
   （此前 header 留了 border-bottom + 上圆角，形成一圈视觉断线） */
.cq-login-card .cq-card-header{
  background:var(--cq-surface); border-bottom:0;
  border-radius:var(--cq-radius-card) var(--cq-radius-card) 0 0;
  padding:36px 36px 0; text-align:center;
}
.cq-login-card .cq-card-title{
  justify-content:center;
  font-size:20px; font-weight:700; color:#111827; letter-spacing:.3px;
}
.cq-login-card .cq-card-body{ padding:26px 36px 34px }
.cq-login-form .cq-input-icon{ margin-bottom:20px }
.cq-login-form .cq-input-icon:last-of-type{ margin-bottom:24px }
.cq-login-form .btn-lg{ min-height:48px; font-weight:600; letter-spacing:.2px }
/* 访客页输入框尺寸统一：BS5 .form-control-lg 的 20px 字号偏大且高度过高，
   与 tab / 按钮的节奏不协调，此处收紧到 16px / 46px。 */
.cq-login-form .form-control-lg{
  font-size:16px; min-height:46px; height:46px;
  border-radius:var(--cq-radius-ctl);
}
.cq-login-form .form-control-lg::placeholder{ font-size:15px }

/* ---------- 下划线式 tab（分段控件） ----------
   默认 tab 外观来自 app.css(BS3 .nav-tabs>li>a) 与 BS5 原生「卡片式」tab，
   在白色卡片里边框过重，故整体接管为「下划线式」。
   🔴 选择器刻意**只认 `.cq-tabs-underline` 显式标记**，不用 `.cq-card .nav-tabs`
   —— 全站还有 transfer_add / transfer_red（4 路通道切换）等页面的 .nav-tabs
   就在 .cq-card 内，把它们等分成整宽会破坏原有布局。想用下划线观感的页面，
   在 `<ul class="nav nav-tabs">` 上自行加 `cq-tabs-underline` 即可。
   已标记：登录页（login/reg/findpwd 的登录方式切换）、首页统计图卡。
   两处坑：
   1) .nav-link 必须 display:block，否则 border-bottom 只到文字宽度、下划线不铺满；
   2) 选中态 border-bottom-color 需 !important —— app.css:377 的
      `.nav-tabs > li.active > a{border-bottom-color:#fff !important}` 会把它压掉。
   兼容 BS3 结构（> li[.active] > a）与 BS5 结构（> li > a.nav-link[.active]）。
   🔴 另：登录 form 是 .cq-card-body 的直接子元素，会被设计系统里给「后台内联筛选栏」
   写的 `.cq-card-body > form:not(.cq-form-horizontal):not(:has(> .row)){display:flex...}`
   命中，导致 form 变 flex 行、子元素按内容宽收缩（tab/输入框/按钮三者宽度全不一致）。
   登录表单必须恢复常规块级纵向流。 */
.cq-login-form{ display:block !important }
.cq-tabs-underline,
.cq-login-form .nav-tabs{
  border-bottom:1px solid var(--cq-border);
  gap:4px;
}
.cq-tabs-underline > li,
.cq-login-form .nav-tabs > li{ flex:1 1 0 }
.cq-tabs-underline > li > a,
.cq-login-form .nav-tabs > li > a{
  display:block; width:100%;
  border:0; border-bottom:2px solid transparent;
  border-radius:0; margin-bottom:-1px;
  padding:10px 8px; font-size:14px; font-weight:600;
  color:var(--cq-text-soft); background:transparent;
  text-align:center; text-decoration:none;
  transition:color .15s, border-color .15s;
}
.cq-tabs-underline > li > a:hover,
.cq-login-form .nav-tabs > li > a:hover{
  color:var(--cq-primary); border-bottom-color:var(--cq-border-strong);
}
.cq-tabs-underline > li > a.active,
.cq-login-form .nav-tabs > li > a.active{
  color:var(--cq-primary); background:transparent;
  border-bottom-color:var(--cq-primary) !important;
}
/* BS3 结构下 .active 挂在 <li> 上，一并兜底 */
.cq-tabs-underline > li.active > a,
.cq-login-form .nav-tabs > li.active > a{
  color:var(--cq-primary); background:transparent;
  border-bottom-color:var(--cq-primary) !important;
}

/* 输入框带图标（前缀 / 后缀） */
.cq-input-icon{ position:relative }
.cq-input-icon .form-control{ padding-left:38px }
.cq-input-icon .form-control-lg{ padding-left:42px }
.cq-input-icon.has-suffix .form-control{ padding-right:118px }
.cq-input-icon-prefix{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--cq-text-mute); pointer-events:none; font-size:14px; line-height:1;
}
.cq-input-icon-suffix{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center;
}
.cq-input-icon-suffix img{ cursor:pointer; border-radius:6px; display:block; max-width:110px; height:auto }

/* ---------- 小手机（<576px）：筛选栏全宽堆叠、卡片收紧 ---------- */
@media (max-width:575px){
  .card-body, .cq-card-body{ padding:12px }
  .cq-card.cq-card-compact > .cq-card-header,
  .cq-card.cq-card-compact > .cq-card-body{ padding:10px }
  .cq-card-title{ font-size:14px }

  /* 筛选栏：字段全宽竖排 */
  #searchToolbar.cq-filter-grid{ gap:10px 10px }
  #searchToolbar .cq-form-group{ flex:1 1 100% }
  #searchToolbar .form-control,
  #searchToolbar .form-select,
  #searchToolbar .input-group,
  #searchToolbar .input-daterange{ min-width:0; width:100% }
  #searchToolbar select[name="column"],
  #searchToolbar input[name="value"],
  #searchToolbar input[name="uid"],
  #searchToolbar input[name="channel"],
  #searchToolbar select[name="dstatus"],
  #searchToolbar select[name="status"],
  #searchToolbar select[name="order"]{ width:100%; min-width:0 }
  #searchToolbar .input-daterange{ max-width:none }

  /* 按钮全宽堆叠 */
  #searchToolbar .cq-filter-actions{
    flex:1 1 100%; margin-left:0;
  }
  #searchToolbar .cq-filter-actions .btn{ flex:1 1 auto }

  /* 表格工具栏允许换行，避免按钮挤压 */
  .fixed-table-toolbar .bars,
  .fixed-table-toolbar .columns{ flex-wrap:wrap }
}

/* ==========================================================================
   2026-09-01 · 由原兼容垫片迁移回来的原生规则
   --------------------------------------------------------------------------
   原垫片有双重职责：① 把旧版类名"翻译"成 cq 观感；② 承载非旧版专属的
   统一规则（按钮尺寸 / 裸控件箭头 / 表单横排 / 分隔线）。② 类规则本就属于
   设计系统，迁移回来以免删除垫片后出现视觉回退。旧版类名此前已全部改为
   cq-* 前缀或 BS5 原生类（如整宽按钮 w-100、栅格偏移 offset-* 等）。
   ========================================================================== */

/* ---------- 按钮统一尺寸（与工具栏 34px 一致）---------- */
.btn{ min-height:34px; display:inline-flex; align-items:center; justify-content:center; padding:5px 14px; line-height:1.2; transition:background .15s, border-color .15s, color .15s, box-shadow .15s }
.btn-sm{ min-height:30px; padding:3px 12px; font-size:12.5px }
.btn-lg{ min-height:42px; padding:8px 20px; font-size:14px }
.cq-btn-xs{ min-height:24px; padding:1px 9px; font-size:12px; border-radius:6px }

/* ---------- 裸表单控件（无 .form-control 时也要对齐）---------- */
input[type=text], input[type=number], input[type=email],
input[type=password], input[type=search], input[type=url],
input[type=tel], input[type=date], input[type=time]{
  min-height:34px; padding:5px 10px; font-size:13px;
  border:1px solid var(--cq-border-strong); border-radius:var(--cq-radius-ctl);
  background:#fff; color:var(--cq-text);
  transition:border-color .15s, box-shadow .15s; box-sizing:border-box;
}
input[type=text]:focus, input[type=number]:focus, input[type=email]:focus,
input[type=password]:focus, input[type=search]:focus, input[type=url]:focus,
input[type=tel]:focus, input[type=date]:focus, input[type=time]:focus,
select:focus, textarea:focus{
  border-color:var(--cq-primary); outline:none;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
select:not(.form-select){
  padding:5px 28px 5px 10px; border:1px solid var(--cq-border-strong);
  border-radius:var(--cq-radius-ctl); background-color:#fff; color:var(--cq-text);
  font-size:13px; min-height:34px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath d='M8 11.5L3 6h10z'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 8px center; background-size:14px;
}

/* ---------- 表单：cq- 前缀类（旧版 admin 迁移页沿用，统一观感）---------- */
.cq-form-group{ margin-bottom:1rem }
.cq-control-label{ display:inline-block; font-size:13px; font-weight:600; color:#475569; margin-bottom:5px }
.cq-form-horizontal .cq-form-group{ display:block; margin-bottom:1rem }
.cq-form-horizontal .cq-control-label{ display:inline-block; margin-bottom:.25rem }

/* 横排表单（类名 cq-form-inline；含 .cq-card-body 下的裸 form） */
.cq-form-inline,
.cq-card-body > form:not(.cq-form-horizontal):not(:has(> .row)){
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px;
}
.cq-form-inline .cq-form-group,
.cq-card-body > form:not(.cq-form-horizontal) > .cq-form-group{
  display:inline-flex; flex-wrap:nowrap; align-items:center; gap:6px 10px; margin:0;
}
.cq-form-inline label,
.cq-form-inline .cq-control-label,
.cq-card-body > form:not(.cq-form-horizontal) > .cq-form-group > label,
.cq-card-body > form:not(.cq-form-horizontal) > .cq-form-group > .cq-control-label{
  margin:0; white-space:nowrap; font-size:13px; font-weight:600; color:#475569;
}
.cq-form-inline .form-control,
.cq-form-inline select,
.cq-card-body > form:not(.cq-form-horizontal) > .form-control,
.cq-card-body > form:not(.cq-form-horizontal) > select,
.cq-card-body > form:not(.cq-form-horizontal) > .cq-form-group .form-control,
.cq-card-body > form:not(.cq-form-horizontal) > .cq-form-group select{
  width:auto; min-width:120px; flex:0 0 auto;
}
.cq-card-body > form > .row{ flex:1 1 100%; width:100% }

/* 卡片内网格表单：字段等宽、按钮与输入框底部对齐、高度一致 */
.cq-card-body form.row .btn{ min-height:38px }
.cq-card-body form.row .input-daterange{ width:100% }

/* 搜索栏兜底：保证 #searchToolbar 始终横向（无论页面是否挂 cq-filter-grid / cq-form-inline） */
#searchToolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px }

/* ---------- 分隔线 .line（原项目自定义类，沿用）---------- */
.line{ margin:16px 0; height:0; border-top:1px solid var(--cq-border) }
.line-dashed{ border-top-style:dashed }

/* ---------- 项目工具类：用于收敛高频 inline style（BS5 无等价精确值的补丁）---------- */
.cq-text-silver{ color:silver }
.cq-w-100px{ width:100px }
.cq-w-80px{ width:80px }
.cq-minw-100{ min-width:100px }
.cq-mt-10{ margin-top:10px }
.cq-pt-10{ padding-top:10px }
.cq-pb-10{ padding-bottom:10px }
.cq-p-15{ padding:15px }
.cq-py-8{ padding:8px 0 }
.cq-border-bottom{ border-bottom:1px solid #dddddd }

/* ---------- cq-ui：Toastify 通知配色（替代 layui layer.msg/alert）---------- */
.cq-toast{ border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.15); font-size:14px; padding:12px 18px; color:#fff; max-width:340px; background:#343a40 }
.cq-toast .toastify__body{ word-break:break-all }
.cq-toast-success{ background:#198754 !important }
.cq-toast-error{ background:#dc3545 !important }
.cq-toast-warn{ background:#f0ad4e !important }
.cq-toast-info{ background:#0d6efd !important }

/* ---------- cq-ui：Loading 浮层（替代 layui layer.load）---------- */
.cq-loading-mask{ position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.55) }
.cq-loading-box{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:22px 30px; background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.12) }
.cq-loading-text{ color:#495057; font-size:14px }

/* ---------- cq-ui：alert/confirm 弹窗正文 ---------- */
.cq-modal-alert p, .cq-modal-confirm p{ margin:0; line-height:1.7; color:#333 }

/* ==========================================================================
   2026-10-13 · 首页（user/index.php）收尾补充
   --------------------------------------------------------------------------
   首页是 user/ 里唯一仍大量沿用老主题（BS3）标记的页面。以下规则只补
   「老类名已从 HTML 移除、但没有 BS5 等价物」的缺口，不做整页重写。
   ========================================================================== */

/* ---------- 统计卡：图标圆 + 大数字 ---------- */
.cq-stat-card{ padding:18px 16px; overflow:hidden; position:relative }
.cq-stat-card .cq-stat-ico{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; color:#fff; flex:0 0 auto;
}
.cq-stat-card .cq-stat-num{
  font-size:24px; font-weight:600; line-height:1.25;
  margin:0 0 2px; color:var(--cq-text);
}
.cq-stat-card .cq-stat-num .cq-stat-unit{ font-size:13px; font-weight:400; color:var(--cq-text-mute); margin:0 2px }
.cq-stat-card .cq-stat-label{ font-size:12.5px; color:var(--cq-text-mute) }
.cq-stat-card .cq-stat-corner{ position:absolute; top:10px; right:12px; font-size:12px; line-height:1 }

/* 图标底色（与数字色呼应）。
   ⚠️ cq-tokens.css 只定义了 `--cq-*-bg` / `--cq-*-fg` 两种语义 token，
   并不存在 `--cq-success` / `--cq-info` 这类单值 token；此处取 `-fg` 深色档
   （与原老主题 text-*-dk 观感一致），不要写成 var(--cq-success) 之类的空值 ——
   变量未定义时整条声明会**静默失效**（不报错、颜色直接丢失）。 */
.cq-stat-ico-primary{ background:var(--cq-primary) }
.cq-stat-ico-success{ background:var(--cq-success-fg) }
.cq-stat-ico-info   { background:var(--cq-info-fg) }
.cq-stat-ico-muted  { background:#64748b }

/* 数字强调色 */
.cq-stat-num-primary{ color:var(--cq-primary) }
.cq-stat-num-success{ color:var(--cq-success-fg) }
.cq-stat-num-info   { color:var(--cq-info-fg) }

/* ---------- 头像卡：封面色条 + 圆形头像 ---------- */
.cq-profile-cover{
  position:relative; height:112px;
  border-radius:var(--cq-radius-card) var(--cq-radius-card) 0 0;
  background:linear-gradient(120deg, var(--cq-info-fg), var(--cq-primary));
}
.cq-profile-cover .btn{ position:absolute; top:14px }
.cq-profile-cover .btn:first-child{ right:16px }
.cq-profile-cover .btn + .btn{ left:16px }
.cq-profile-body{ text-align:center; padding:0 20px 18px }
.cq-profile-avatar{
  width:88px; height:88px; margin:-46px auto 0;
  border-radius:50%; overflow:hidden; background:#fff; position:relative;
  border:3px solid #fff; box-shadow:0 2px 12px rgba(2,8,20,.14);
}
.cq-profile-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.cq-profile-name{ font-size:18px; font-weight:600; margin:10px 0 4px; color:var(--cq-text) }
.cq-profile-meta{ font-size:13.5px; color:var(--cq-text-soft) }

/* ---------- 头像卡底部 KPI（今日/昨日 收入·支出）---------- */
.cq-kpi-strip{ display:flex; border-top:1px solid var(--cq-border); background:var(--cq-surface-2) }
.cq-kpi-strip .cq-kpi{
  flex:1 1 0; padding:14px 8px; text-align:center; color:var(--cq-text-soft);
  text-decoration:none; display:block;
}
.cq-kpi-strip .cq-kpi + .cq-kpi{ border-left:1px solid var(--cq-border) }
.cq-kpi-strip .cq-kpi-num{ font-size:20px; font-weight:600; color:var(--cq-text); line-height:1.3 }
.cq-kpi-strip .cq-kpi-txt{ font-size:12.5px; margin-top:2px }
.cq-kpi-strip .cq-kpi .fa{ margin-right:4px; font-size:12px }

/* ---------- 图表卡：标题行 + 开关 ---------- */
/* 🔴 注意：本文件上方的 `.cq-card .nav-tabs > li{ flex:1 1 0 }` 是**下划线式 tab**
   的等分规则（给登录页/全宽 tab 用），但图表卡的 tab 在 .cq-chart-bar 这个 flex 行里、
   只占左侧一小段。若不覆盖，li 的 `flex-basis:0` 会让 tab 被压成 ~86px 宽、
   文字挤成两行、下划线被 flex 拉伸成 66px 高。
   故此处显式恢复 li 为内容宽（flex:0 0 auto）+ 水平排列。 */
.cq-chart-card .cq-chart-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px 0;
}
.cq-chart-card .nav-tabs{
  padding:0 16px; border-bottom:1px solid var(--cq-border);
  flex:0 1 auto; flex-wrap:nowrap;
}
.cq-chart-card .nav-tabs > li{ flex:0 0 auto }
.cq-chart-card .nav-tabs > li > a{ white-space:nowrap; padding:10px 16px; min-width:96px }
.cq-chart-card .tab-content{ padding:8px 16px 16px }

/* 纯 CSS 开关（等价老主题 .i-switch，但按当前设计系统着色） */
.cq-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; user-select:none }
.cq-switch input{ position:absolute; opacity:0; width:0; height:0 }
.cq-switch .cq-switch-track{
  position:relative; flex:0 0 auto; width:38px; height:21px;
  background:var(--cq-border-strong); border-radius:30px;
  transition:background .18s ease;
}
.cq-switch .cq-switch-track::after{
  content:""; position:absolute; top:2px; left:2px;
  width:17px; height:17px; background:#fff; border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.cq-switch input:checked + .cq-switch-track{ background:var(--cq-primary) }
.cq-switch input:checked + .cq-switch-track::after{ transform:translateX(17px) }
.cq-switch input:focus-visible + .cq-switch-track{ box-shadow:0 0 0 3px rgba(37,99,235,.22) }
.cq-switch .cq-switch-text{ font-size:12.5px; color:var(--cq-text-soft); white-space:nowrap }

/* ---------- 公告卡：列表项排版 ---------- */
/* 🔴 必须用 .cq-card > .list-group > .list-group-item 提高优先级：
   BS5 的 `.list-group-item{ display:block }` 与本文件的
   `.cq-card > .list-group > .list-group-item:first-child{ border-top:0 }`
   都带 :first-child，若不显式加 `.cq-card > .list-group` 前缀，
   `.cq-ann-item` 的 display:flex 会被压过、时间戳换行。 */
.cq-card > .list-group > .list-group-item.cq-ann-item{ display:flex; align-items:flex-start; gap:9px; line-height:1.7 }
.cq-card > .list-group > .list-group-item.cq-ann-item > .fa{ margin-top:4px; flex:0 0 auto; color:var(--cq-warning-fg) }
.cq-ann-body{ flex:1 1 auto; min-width:0; word-break:break-word }
.cq-card > .list-group > .list-group-item.cq-ann-item > .cq-ann-time{
  flex:0 0 auto; margin-left:auto; padding-left:10px;
  font-size:12px; color:var(--cq-text-mute); white-space:nowrap;
}
.cq-ann-empty{ padding:22px 16px; text-align:center; color:var(--cq-text-mute); font-size:13px }

/* 公告条数多时限高滚动，并在底部加渐隐，避免第三条被"硬切" */
.cq-ann-list{ max-height:222px; overflow-y:auto; scrollbar-width:thin }
.cq-ann-list.cq-ann-fade{
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent);
          mask-image:linear-gradient(180deg, #000 calc(100% - 22px), transparent);
}
.cq-ann-list::-webkit-scrollbar{ width:6px }
.cq-ann-list::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px }

/* 内容内层容器：原 index.php 用老主题 .wrapper-md(20px/15px)，
   但 .cq-main 已提供 22px 内边距 → 只保留底部按钮区的 15px 槽位，去掉重复顶部内边距 */
.cq-page-inner{ padding-bottom:4px }
.cq-page-inner > .row:first-child{ margin-top:0 }

@media (max-width:575px){
  .cq-chart-card .cq-chart-bar{ padding:10px 12px 0; flex-wrap:wrap; row-gap:4px }
  /* 手机上 tab + 开关无法并排（2 个 tab 各 ~106px + 开关 96px > 390px），
     若继续 nowrap 会把整页撑出横向滚动条 → 此处允许 tab 换行、去 nowrap。 */
  .cq-chart-card .nav-tabs{ padding:0 12px; flex:1 1 100%; flex-wrap:wrap }
  .cq-chart-card .nav-tabs > li > a{ white-space:normal; padding:8px 10px; font-size:13.5px }
  /* 开关独占一行时贴左，避免被挤出右边界（视觉上像被裁掉） */
  .cq-chart-card .cq-switch{ margin-left:0; flex:1 1 100%; padding:4px 16px 0 }
  .cq-chart-card .tab-content{ padding:6px 12px 12px }
  .cq-kpi-strip .cq-kpi-num{ font-size:17px }
  /* 首页统计卡：手机上数字略收，避免 2 列时换行 */
  .cq-stat-card{ padding:14px 12px }
  .cq-stat-card .cq-stat-num{ font-size:20px }
  .cq-stat-card .cq-stat-ico{ width:38px; height:38px; font-size:16px }
  /* 资料卡封面按钮：手机上缩短文案区、缩小间距，两个按钮都能放下 */
  .cq-profile-cover .btn{ top:10px; padding:3px 10px; font-size:12px }
  .cq-profile-cover .btn:first-child{ right:10px }
  .cq-profile-cover .btn + .btn{ left:10px }
}
