/* ==========================================================================
   捷泰台账 · 设计规范层 app.css
   建立：2026-10-02（界面规范升级方案 第 1 批）
   规则：
     1) 只覆盖【具体 Bootstrap 类】，绝不覆盖全局 --bs-* 变量（避免连锁改变不可控组件）
     2) 本文件不参与打印：打印类模板（receipt_print / proforma_invoice /
        commercial_invoice / packing_list / salary_slip）的输出保持原样
     3) 只改「颜色 / 圆角 / 按钮层级」，本轮不动字号与布局（字号收敛单独一片，改完要量）
   ========================================================================== */

:root {
  /* —— 颜色（沿用现有品牌色）—— */
  --jt-primary:        #16499c;
  --jt-primary-hover:  #123a7d;
  --jt-primary-soft:   #eef3fb;
  --jt-link:           #0d6efd;
  --jt-success:        #198754;
  --jt-danger:         #dc3545;
  --jt-warning:        #ffc107;
  --jt-text:           #212529;
  --jt-muted:          #6c757d;
  --jt-border:         #dee2e6;
  --jt-bg-soft:        #f8f9fa;

  /* —— 字号 5 档（本片先登记，下一片收敛时逐页套用）—— */
  --jt-fs-xs:   12px;
  --jt-fs-sm:   13px;
  --jt-fs-base: 14px;
  --jt-fs-md:   16px;
  --jt-fs-lg:   18px;
  --jt-fs-xl:   22px;   /* KPI/金额数字（仪表盘、资金卡）*/

  /* —— 间距 4 档（4px 栅格）—— */
  --jt-sp-1: 4px;
  --jt-sp-2: 8px;
  --jt-sp-3: 12px;
  --jt-sp-4: 16px;

  /* —— 圆角 2 档 —— */
  --jt-r-sm: 4px;
  --jt-r-md: 8px;
}

/* ⚠️ 以下全部包在 @media screen 里 —— 打印 / PDF / 导出图片（html2canvas）完全不受本文件影响，
   满足方案 R1「对外单据输出保持现状」。 */
@media screen {

/* --------------------------------------------------------------------------
   1. 按钮规范：主 = 品牌实心 / 次 = 描边 / 危险 = 描边红（悬停才实心，防误点）
   -------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--jt-primary);
  --bs-btn-border-color: var(--jt-primary);
  --bs-btn-hover-bg: var(--jt-primary-hover);
  --bs-btn-hover-border-color: var(--jt-primary-hover);
  --bs-btn-active-bg: var(--jt-primary-hover);
  --bs-btn-active-border-color: var(--jt-primary-hover);
  --bs-btn-disabled-bg: var(--jt-primary);
  --bs-btn-disabled-border-color: var(--jt-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--jt-primary);
  --bs-btn-border-color: var(--jt-primary);
  --bs-btn-hover-bg: var(--jt-primary);
  --bs-btn-hover-border-color: var(--jt-primary);
  --bs-btn-active-bg: var(--jt-primary);
  --bs-btn-active-border-color: var(--jt-primary);
}

.btn-success {
  --bs-btn-bg: var(--jt-success);
  --bs-btn-border-color: var(--jt-success);
  --bs-btn-hover-bg: #146c43;
  --bs-btn-hover-border-color: #146c43;
}

/* 危险动作：默认描边，悬停/聚焦才实心 —— 降低列表里误点删除的概率 */
.btn-danger {
  --bs-btn-color: var(--jt-danger);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--jt-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--jt-danger);
  --bs-btn-hover-border-color: var(--jt-danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--jt-danger);
  --bs-btn-active-border-color: var(--jt-danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--jt-danger);
  --bs-btn-border-color: var(--jt-danger);
  --bs-btn-hover-bg: var(--jt-danger);
  --bs-btn-hover-border-color: var(--jt-danger);
}

/* 圆角与尺寸统一 */
.btn { border-radius: var(--jt-r-sm); }
.btn-sm { --bs-btn-font-size: var(--jt-fs-sm); }
.btn:focus-visible { outline: 2px solid var(--jt-primary-soft); outline-offset: 1px; }

/* 手机端：所有按钮触控热区 ≥44px（工具栏/行内小按钮除外，它们由 .btn-sm 兜底） */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-close) { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   2. 卡片 / 面板：统一圆角 8px、边框与阴影一致（不改变内部布局）
   -------------------------------------------------------------------------- */
.card,
.modal-content,
.offcanvas,
.dropdown-menu {
  border-radius: var(--jt-r-md);
  border-color: var(--jt-border);
}

/* --------------------------------------------------------------------------
   3. 表格：表头统一浅底 + 中性字色（原有 sticky 表头不受影响）
   -------------------------------------------------------------------------- */
.table > thead > tr > th,
.table > thead > tr > td {
  background-color: var(--jt-bg-soft);
  color: var(--jt-text);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. 链接与次要文字统一（不改结构）
   -------------------------------------------------------------------------- */
a { color: var(--jt-link); }
.text-muted, .text-body-secondary { color: var(--jt-muted) !important; }

/* --------------------------------------------------------------------------
   5. 徽标/标签统一圆角，与按钮尺度一致
   -------------------------------------------------------------------------- */
.badge { border-radius: var(--jt-r-sm); }

/* --------------------------------------------------------------------------
   6. 统一确认弹层 jtConfirm（配 static/js/jt-ui.js）
   z-index 2000 —— 必须高于 Bootstrap 弹窗(1055)与侧栏抽屉(1045)，
   否则在弹窗里点删除会被自己的弹窗盖住。
   -------------------------------------------------------------------------- */
.jt-mask {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.jt-dlg {
  width: min(440px, 94vw);
  background: #fff;
  border-radius: var(--jt-r-md);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .28);
  overflow: hidden;
}
.jt-hd {
  padding: 12px 16px;
  font-size: var(--jt-fs-md, 16px);
  font-weight: 600;
  color: var(--jt-text);
  border-bottom: 1px solid var(--jt-border);
}
.jt-dlg.jt-danger .jt-hd { color: var(--jt-danger); }
.jt-bd { padding: 14px 16px; font-size: var(--jt-fs-base, 14px); line-height: 1.6; white-space: pre-line; }
.jt-detail {
  margin-top: 8px; padding: 8px 10px;
  background: var(--jt-bg-soft);
  border-left: 3px solid var(--jt-primary);
  border-radius: var(--jt-r-sm);
  font-size: var(--jt-fs-sm, 13px);
  color: var(--jt-muted);
  word-break: break-all;
  white-space: pre-line;
}
.jt-typing { margin-top: 10px; }
.jt-typing label { font-size: var(--jt-fs-sm, 13px); color: var(--jt-muted); margin-bottom: 4px; display: block; }
.jt-ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  background: var(--jt-bg-soft);
  border-top: 1px solid var(--jt-border);
}
@media (max-width: 575.98px) {
  .jt-dlg { width: 100%; }
  .jt-ft { flex-direction: column-reverse; }
  .jt-ft .btn { min-height: 44px; width: 100%; }
}


  /* ========================================================================
     8) 状态徽标（badge）对比度与规格统一 —— 2026-10-02 批3 第一片
     问题：全站徽标 14+ 种 class 组合，其中 bg-warning(11 处)/bg-info(5 处) 没带
          text-dark ⇒ 黄底白字、青底白字看不清；bg-light 有的带边框有的不带。
     做法：只覆盖「具体 Bootstrap 类」（不动全局 --bs-* 变量），一处修正全站
          240+ 徽标；本节在 @media screen 内 ⇒ 打印/单据输出保持原样。
     ======================================================================== */
  .badge {
    font-weight: 500;
    border-radius: var(--jt-r-sm);
    padding: .32em .5em;
    vertical-align: middle;
    letter-spacing: .2px;
  }
  .badge.bg-warning { color: #663c00; }        /* 黄底 → 深棕字（对比度达标） */
  .badge.bg-info { color: #055160; }           /* 青底 → 深青字 */
  .badge.bg-light { border: 1px solid var(--jt-border); color: var(--jt-text); }
  .badge.bg-success, .badge.bg-danger, .badge.bg-primary,
  .badge.bg-secondary, .badge.bg-dark { color: #fff; }
  table .badge { line-height: 1.35; }          /* 表格里的徽标别把行撑高 */


  /* ========================================================================
     9) 空态（列表无数据）统一度量 —— 2026-10-02 批3 第二片
     现状：74 处空态文案样式基本一致，但内边距用了 py-1/py-2/py-3/py-4 四种、
          div 与 tr 两种容器。这里用「组合选择器」统一度量，模板一处不改。
     新写页面建议用 .jt-empty（图标 + 主文案 + 次级说明 + 可选动作按钮）。
     ======================================================================== */
  td[colspan].text-center.text-muted,
  td[colspan].text-muted.text-center {
    padding: 20px 10px;
    font-size: var(--jt-fs-base);
    line-height: 1.6;
  }
  .jt-empty { text-align: center; color: var(--jt-muted); padding: 22px 12px; line-height: 1.6; }
  .jt-empty .jt-empty-i { font-size: 26px; line-height: 1.2; opacity: .75; }
  .jt-empty .jt-empty-t { margin-top: 6px; font-size: var(--jt-fs-base); color: var(--jt-text); }
  .jt-empty .jt-empty-h { margin-top: 4px; font-size: var(--jt-fs-sm); }
  .jt-empty .jt-empty-act { margin-top: 10px; }


  /* ========================================================================
     10) 手机端横向溢出治理 —— 2026-10-02 批4 第一片（实测病因逐条对症）
     实测（390×844 全站 74 页巡检）：12 页出现页面级横向溢出，逐页做「隐藏二分」
     定位到四类病因，全部在此收口（均为「具体 Bootstrap 类」覆盖，不动 --bs-*）：
       ① flex 项默认 min-width:auto ⇒ 日期/输入框顶破卡片（/orders/in 溢出 112px）
       ② 工具条/徽标行 nowrap ⇒ 内容比屏幕宽（/receipts 7px、/po 16px、/site 45px、
          /salaries 128px）
       ③ .table-responsive 作为 flex 项时被内容撑宽（/recycle-bin 溢出 454px）
       ④ 表格内紧凑按钮热区只有 21px（触控偏小）
     ======================================================================== */
  @media (max-width: 767.98px) {
    /* ① 让表单控件能在 flex 行里收缩（date 控件固有宽度最典型） */
    .d-flex > input.form-control,
    .d-flex > select.form-control,
    .d-flex > select.form-select,
    .d-flex > input.form-control-sm,
    .d-flex > .input-group { min-width: 0; }
    /* ② 工具条与徽标行允许换行，别横向顶出屏幕 */
    .d-flex.align-items-center,
    .d-flex.align-items-end { flex-wrap: wrap; }
    .d-flex > form.d-flex,
    form.d-flex.gap-1 { flex-wrap: wrap; }
    /* 徽标：手机端允许换行（长文案徽标如「📙 采购明细（给厂家）」在窄屏不能 nowrap） */
    .badge { white-space: normal; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
    /* ③ 表格滚动容器永不超出父容器 */
    .table-responsive { max-width: 100%; min-width: 0; }
    /* ④ 触控点下限（Bootstrap btn-sm 原为 21~24px）
       ★2026-10-18 审计 P1：28px 实测仍偏小（手机 390px 下 /orders/in 73 个按钮里 59 个 <32px，手指点不着/易误触）。
       行业惯例 44×44（iOS HIG）/ 48dp（Material），行内小图标按钮取 36px 折中（再大行高会失控）。 */
    .btn-sm { min-height: 36px; min-width: 36px; padding-top: .25rem; padding-bottom: .25rem; }
    /* 行内极简按钮（py-0 px-1 那种 ✏️/✕/↺）单独保底：给足热区但不动视觉尺寸 */
    table .btn, table button { min-height: 34px; min-width: 34px; }
    table .btn.py-0, table button.py-0 { padding: .28rem .35rem !important; }
    /* ⑤ 手机上 9~11px 的徽标字实在看不清：统一抬到 11px（视觉仍比正文小，但可读） */
    .badge, .badge span, td .small { font-size: max(11px, 1em); }
    .badge[style*="font-size"], td .badge[style*="9px"], td span[style*="9px"] { font-size: 11px !important; }
    /* ⑥ 详情/列表页顶部的操作按钮群：手机上允许换行并保持 8px 间距，避免挤成一团 */
    .d-flex.gap-1 > .btn, .d-flex.gap-2 > .btn { margin-bottom: 2px; }
  }

}