/* ==========================================================================
   专家费系统 · UI 可访问性基线 (Phase 1 / P0)
   仅作用于继承 base.html 的页面；打印模板为独立 HTML，不受本文件影响。
   目标：可读文字 >=14px、文本对比度 >=4.5:1、焦点可见、金额不折行、触控 >=44px
   ========================================================================== */
:root{
  --ui-text:#1F2937;        /* 正文   14.68:1 */
  --ui-text-sub:#4B5563;    /* 次级    7.56:1 */
  --ui-text-aux:#6B7280;    /* 辅助    4.83:1 */
  --ui-primary:#0B5ED7;     /* 白字    5.84:1 */
  --ui-primary-dark:#094DB3;
  --ui-danger:#B42318;      /* 白字    6.57:1 */
  --ui-success:#067647;     /* 白字    5.69:1 */
  --ui-info:#026AA2;        /* 白字    5.86:1 */
  --ui-focus:#0B5ED7;
}

/* 1. 键盘焦点环 ---------------------------------------------------------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--ui-focus);
  outline-offset:2px;
  border-radius:3px;
}
:where(.btn,.form-control,.form-select):focus:not(:focus-visible){box-shadow:none}

/* 2. 文字对比度：把 Bootstrap 的浅灰统一提到 >=4.5:1 ---------------------- */
.text-muted{color:var(--ui-text-sub)!important}
.form-text,.form-control::placeholder{color:var(--ui-text-sub)}
.wf-done .wf-label,.wf-done .wf-dot{color:var(--ui-text-sub)!important}
.wf-done .wf-dot{background:#e9ecef;border-color:#ced4da}
a.text-muted:hover,a.text-muted:focus{color:var(--ui-primary)!important}

/* 3. 关键业务文字 >=14px（CSS max() 阻断 .small 嵌套导致的 10px 缩小） ----
      必须 !important：页面内 <style> 块与 style="font-size:.72rem" 内联声明
      出现在 base.html 之后，普通优先级无法覆盖。 */
.form-label,.form-check-label,.form-text,.wf-label,.rule-note,
table td .small,table th .small{font-size:max(14px,.875em)!important}

/* 4. 主色 / 语义色加深，保证白字 >=4.5:1 --------------------------------- */
.btn-primary{
  --bs-btn-bg:var(--ui-primary);--bs-btn-border-color:var(--ui-primary);
  --bs-btn-hover-bg:var(--ui-primary-dark);--bs-btn-hover-border-color:var(--ui-primary-dark);
  --bs-btn-active-bg:var(--ui-primary-dark);--bs-btn-active-border-color:var(--ui-primary-dark);
  --bs-btn-disabled-bg:var(--ui-primary);--bs-btn-disabled-border-color:var(--ui-primary);
}
.btn-danger{
  --bs-btn-bg:var(--ui-danger);--bs-btn-border-color:var(--ui-danger);
  --bs-btn-hover-bg:#912018;--bs-btn-hover-border-color:#912018;
  --bs-btn-active-bg:#912018;--bs-btn-active-border-color:#912018;
}
.btn-success{
  --bs-btn-bg:var(--ui-success);--bs-btn-border-color:var(--ui-success);
  --bs-btn-hover-bg:#055A36;--bs-btn-hover-border-color:#055A36;
  --bs-btn-active-bg:#055A36;--bs-btn-active-border-color:#055A36;
}
.bg-primary{background-color:var(--ui-primary)!important}
.bg-danger{background-color:var(--ui-danger)!important}
.bg-success{background-color:var(--ui-success)!important}
.bg-info{background-color:var(--ui-info)!important}
.text-primary{color:var(--ui-primary)!important}
.text-danger{color:var(--ui-danger)!important}
.text-success{color:var(--ui-success)!important}
/* 亮底徽章/按钮必须配深字：Bootstrap 默认白字在 warning 黄仅 1.63:1、info 青仅 1.96:1。
   info 底已统一改为深蓝 #026AA2，故保留白字（5.86:1）。 */
.badge.bg-warning,.badge.bg-light,.btn-warning,.btn-light{color:var(--ui-text)!important}
.badge.bg-info,.btn-info{color:#fff!important}

/* 5. 财务数字不折行 + 等宽数字 ------------------------------------------- */
table td,table th{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num-nowrap,td.text-end,th.text-end{white-space:nowrap}
.num-nowrap{font-variant-numeric:tabular-nums}
td.text-end .badge,td.text-end .btn{white-space:nowrap}

/* 6. 窄屏：看板改为「每位专家一张卡片」，金额与手机号不再被挤折 ----------- */
@media (max-width:768px){
  table.dash-table,table.dash-table tbody,table.dash-table tr,table.dash-table td{
    display:block;width:100%!important;box-sizing:border-box;
  }
  table.dash-table{table-layout:auto!important;border:0!important;background:transparent}
  table.dash-table thead,table.dash-table colgroup{display:none}
  table.dash-table tbody{border:0}
  table.dash-table tr{
    border:1px solid #dee2e6;border-radius:10px;background:#fff;
    margin:10px;padding:4px 10px;box-shadow:0 1px 2px rgba(16,24,40,.05);
  }
  table.dash-table td{
    border:0!important;border-bottom:1px solid #f1f3f5!important;
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:8px 2px!important;text-align:right!important;white-space:normal;
  }
  table.dash-table tr td:last-child{border-bottom:0!important}
  table.dash-table td::before{
    content:attr(data-label);flex:0 0 auto;font-weight:600;
    color:var(--ui-text-sub);text-align:left;font-size:14px;
  }
  table.dash-table td.num-nowrap{white-space:nowrap}
  /* 其余表格保持 Bootstrap 原生 .table-responsive 横向滚动，不改页面宽度 */
}

/* 7. 窄屏触控目标 >=44px + 间距 >=8px ------------------------------------ */
@media (max-width:768px){
  .btn:not(.btn-close),a.btn,summary.btn,.btn-sm,
  input.form-control,select.form-select,textarea.form-control{min-height:44px}
  .btn-sm{padding-top:.55rem;padding-bottom:.55rem}
  .btn + .btn,.d-flex.flex-wrap > .btn{margin-left:8px;margin-bottom:8px}
  /* 复选框本身不拉伸（避免变成竖条），扩大其 label 的点击区即可 */
  .form-check,.form-check-label{min-height:44px}
  .form-check-input{width:1.4em;height:1.4em;margin-top:0}
  .table .btn{min-height:44px}
}

/* 8. 降低动效（尊重系统设置） -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                        transition-duration:.01ms!important;scroll-behavior:auto!important}
}