/* ==========================================================================
   专家费系统 · UI 设计系统收敛 (Phase 2 / P1)
   顺序在 ui-a11y.css 之后；打印模板为独立 HTML，不受本文件影响。
   ========================================================================== */
:root{
  --ui-navy:#023666;         /* 品牌深蓝，取自 logo */
  --ui-navy-2:#034784;
  --ui-gold:#FFC904;         /* 品牌金黄，只作强调 */
  --ui-line:#D8E2EE;
  --ui-surface:#F4F7FB;
}

/* 1. 三端统一 header：深蓝品牌 + 金黄端标识 -------------------------------- */
.app-header{background:var(--ui-navy)!important;border-bottom:3px solid var(--ui-gold);padding:.45rem 0}
.app-header .navbar-brand{color:#fff!important;font-weight:700;gap:.55rem!important}
.app-title{font-size:1.02rem;letter-spacing:.01em;color:#fff}
.app-role{display:inline-block;padding:.18rem .55rem;border-radius:999px;
  background:var(--ui-gold);color:#3D2E00!important;font-size:.78rem;font-weight:800;
  white-space:nowrap;border:1px solid #E0AE00}
.app-header-expert .app-role{margin-left:auto}
.app-header .navbar-toggler{border-color:rgba(255,255,255,.55)}
.app-header .navbar-toggler:focus-visible{outline:3px solid #fff;outline-offset:2px}
.app-header .navbar-toggler-icon{filter:brightness(0) invert(1)}
.app-nav{gap:2px}
.app-nav-link{color:#DBE8F7!important;border-radius:6px;padding:.42rem .7rem!important;
  font-size:14px;font-weight:600;white-space:nowrap}
.app-nav-link:hover,.app-nav-link:focus{background:rgba(255,255,255,.13);color:#fff!important}
.app-nav-link.is-active{background:var(--ui-gold)!important;color:#3D2E00!important;font-weight:800}
.app-user{color:#EAF2FC;font-size:14px}
.app-user .form-select{background-color:#fff;color:var(--ui-text)}
@media (max-width:991.98px){
  .app-nav{margin-top:.5rem}
  .app-user{margin-top:.6rem;padding-top:.6rem;border-top:1px solid rgba(255,255,255,.2);width:100%}
  .app-nav-link{padding:.6rem .7rem!important;min-height:44px;display:flex;align-items:center}
  .app-header .navbar-toggler{min-height:44px;min-width:52px}
}

/* 2. 状态标签组件（看板卡片头部统一，最多 3 个 +「+N」） --------------------- */
.status{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .6rem;
  border-radius:999px;font-size:13px;font-weight:700;line-height:1.25;
  white-space:nowrap;border:1px solid transparent;vertical-align:middle}
.status-attention{background:#FFF4CC;color:#6B4100;border-color:#E0B100}
.status-danger{background:#FEE4E2;color:#8C1D18;border-color:#F0AEA8}
.status-info{background:#E0F2FE;color:#024C74;border-color:#93CFEE}
.status-done{background:#DCF5E8;color:#055938;border-color:#9CD9BA}
.status-more{background:#EEF2F7;color:#334155;border-color:#CBD5E1}

/* 3. 长徽标防溢出（用户反馈：标签超过框） ---------------------------------- */
.sms-badge-cell{max-width:100%;overflow-wrap:anywhere}
table td .badge,.card-header .badge{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.badge{border-radius:999px;padding:.35em .6em;font-weight:600;font-size:.82rem}

/* 4. 搜索区：按钮不再被压成竖排 -------------------------------------------- */
.app-search-select{min-width:132px;flex:0 1 160px}
.app-search-input{min-width:150px;flex:1 1 190px}
.app-search-btn{flex-shrink:0;white-space:nowrap}
/* 4a. 桌面看板搜索区：状态筛选 + 输入框 + 搜索按钮强制同一行。
       修复前 .app-search 作为外层 flex item 未声明伸缩，宽度被压成 367px，
       三控件放不下后被 Bootstrap .flex-wrap 把按钮挤到第二行。 */
@media (min-width:769px){
  .app-search{flex:1 1 420px;min-width:420px;flex-wrap:nowrap!important;justify-content:flex-end}
  .app-search-select{flex:0 0 auto;width:auto;min-width:132px}
  .app-search-input{flex:0 1 190px;width:auto;min-width:150px}
  .app-search-btn{flex:0 0 auto;white-space:nowrap}
}
@media (max-width:768px){
  /* 第一行：状态筛选整行；第二行：输入框 + 搜索按钮同行，按钮不再孤立换行 */
  .app-search{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .app-search-select{grid-column:1/-1;width:100%}
  .app-search-input{grid-column:1;min-width:0;width:100%}
  .app-search-btn{grid-column:2;white-space:nowrap}
}

/* 5. 审核页：辅助功能降级、主操作突出 -------------------------------------- */
.assist-card{border:1px solid var(--ui-line)!important}
.assist-card>.card-header{background:var(--ui-surface)!important;color:var(--ui-text)!important;
  border-bottom:1px solid var(--ui-line)}
.review-action-card{border:1px solid var(--ui-line)!important}
.review-action-card>.card-header{background:#fff!important;color:var(--ui-navy)!important;
  border-left:4px solid var(--ui-primary);border-bottom:1px solid var(--ui-line)}
.review-action-card .badge.bg-primary{background:var(--ui-primary)!important}

/* 6b. 描边按钮统一到提案色板：Bootstrap 默认 outline 文字在白/浅灰底仅
       4.27~4.30:1，warning 描边黄字更低至 1.63:1，一并修正。 */
.btn-outline-primary,.btn-outline-success,.btn-outline-info,
.btn-outline-warning,.btn-outline-secondary{
  color:var(--ui-primary)!important;border-color:var(--ui-primary)!important}
.btn-outline-success{color:var(--ui-success)!important;border-color:var(--ui-success)!important}
.btn-outline-info{color:var(--ui-info)!important;border-color:var(--ui-info)!important}
.btn-outline-warning{color:#6B4100!important;border-color:#A66A00!important}
.btn-outline-secondary{color:#475569!important;border-color:#64748B!important}
.btn-outline-primary:hover,.btn-outline-primary:focus-visible,
.btn-outline-success:hover,.btn-outline-success:focus-visible,
.btn-outline-info:hover,.btn-outline-info:focus-visible,
.btn-outline-secondary:hover,.btn-outline-secondary:focus-visible{
  color:#fff!important}
.btn-outline-primary:hover,.btn-outline-primary:focus-visible{background:var(--ui-primary)!important}
.btn-outline-success:hover,.btn-outline-success:focus-visible{background:var(--ui-success)!important}
.btn-outline-info:hover,.btn-outline-info:focus-visible{background:var(--ui-info)!important}
.btn-outline-secondary:hover,.btn-outline-secondary:focus-visible{background:#475569!important}
.btn-outline-warning:hover,.btn-outline-warning:focus-visible{
  background:#6B4100!important;border-color:#6B4100!important;color:#fff!important}

/* 6. 危险操作统一视觉（Phase 3 再换统一确认弹层） -------------------------- */
.btn-outline-danger:not(:disabled){
  color:#8C1D18!important;border-color:#C93A2E!important;background:#FFF5F4!important;
  font-weight:600}
.btn-outline-danger:not(:disabled):hover,.btn-outline-danger:not(:disabled):focus{
  color:#fff!important;background:var(--ui-danger)!important;border-color:var(--ui-danger)!important}
.btn-outline-danger:disabled{opacity:.55}

/* 7. 标题层级：h1 保持原 h5 视觉，但大纲与读屏可定位 ----------------------- */
h1.h5,h1.card-title{font-size:1.25rem;line-height:1.35;margin-bottom:0}
h1.h5.mb-3{margin-bottom:1rem}

/* 8. 移动端防横向溢出（上线前检查 P0：390px 视口 navbar-brand 实测 442px，
       撑宽整页导致横向滚动；账号表格此前也未包 table-responsive） */
@media (max-width:768px){
  .app-header .navbar-brand .app-title{display:none}      /* 移动端隐藏长系统名，避免撑宽；系统名仍在 <title> 与页头 */
  .app-header .navbar-brand img{max-width:120px;height:28px}
  .app-header .navbar-brand{white-space:normal;min-width:0}
  .app-role{font-size:.72rem;padding:.15rem .45rem}
}

/* 9. 工作台「管理后台」入口：与同级功能按键轻微错位 + 区分 */
.app-nav-admin{margin-left:1.1rem;padding-left:.7rem;border-left:1px solid rgba(255,255,255,.3)}
.app-nav-admin .app-nav-link{font-weight:600}