@charset "utf-8";
/* ============================================================================
   战略预算业财一体化系统 · 全站响应式统一层  (v1.0 · 2026-09-30)
   ----------------------------------------------------------------------------
   【为什么把响应式集中到这一个文件】
     22 个页面各自内嵌 <style>，各自打补丁必然漏、必然不一致。
     本文件是全站唯一的响应式来源。所有页面在 </head> **之前** 引入它
     （★必须是内嵌 <style> 之后：同权重时后出现的胜出，这样无需 !important）。
     任何页面新增断点/改列数，只改这里。

   【四条设计红线】（对准要求：手机/平板「显示不失真、不缺失遗漏」）
     1. 不失真 = 不靠浏览器整体缩放。
        判据：任何一页在 390px 宽下 document.scrollWidth 必须 == 视口宽。
        凡「内容比屏幕宽」，一律改为**内部横滚容器**，绝不撑破页面本身。
     2. 不缺失 = 不靠 overflow:hidden 藏。
        被挤的元素要么换行、要么进横滚容器、要么改纵向堆叠。
        ★因此本文件**不设** body{overflow-x:hidden} —— 那恰恰是"藏内容"。
     3. 不缩字 = -webkit-text-size-adjust:100% 关掉 iOS 自动膨胀文本；
        手机断点下正文 ≥11px，触控目标 ≥36~40 CSS px。
     4. 不改语义 = A4 凭证预览、1920 大屏画布这类**有物理尺寸的东西**，
        不为适配手机而改比例，只把它们放进可横滚/可纵向滚动的容器。

   【断点口径】
     1440+  桌面        ｜ 1024 平板横（iPad 横屏）
      820   平板竖（iPad 768）/ 手机横 —— **侧栏抽屉化临界点**
      560   小屏手机横  ｜ 400/380 主流手机竖（iPhone 12~15 = 390）

   【页面族（由 assets/responsive.js 打在 <body> 上）】
     .yc-shell   7 个业务页（有 .side 侧栏）：工作台/后台/导入/凭证/报表/月末/预算
     .yc-screen  大屏页与面板页（有 .kpis / .hd / body 直排内容）
     .yc-print   print.html 凭证打印（A4 语义，只加滚动容器）
     .yc-fixed   dashboard.html 1920 定宽画布（等比缩放页，单独处置）
     其余（login.html 等）不加类，本文件不干预
   ============================================================================ */


/* ==========================================================================
   1. 全局底座
   ========================================================================== */
html {
  /* iOS/微信浏览器会自动放大正文（"字号忽大忽小"＝失真），关掉 */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, svg, video, canvas { max-width: 100%; }

/* 栅格子项默认 min-width:auto —— 项内不换行的长数字/长表头会把栅格撑破，
   这是本项目手机端横向溢出的**头号根因**（.kpis 6 等分在 390px 下被 "249,134.00" 撑到 470px）。
   统一放行收缩，配合下面的 breakpoints 才是完整解法。 */
.kpis > *, .cards > *, .cards2 > *, .cards3 > *,
.row3 > *, .grid2 > *, .grid3 > *, .grid > *,
.gpwrap > *, .chkgrid > *, .trio > *, .trend > *,
.wall > *, .mid > *, .mods > *, .mods.b6 > *, .set-grid > *,
.hbar > *, .gpline > *, .wfr > *, .bar > *, .hrow > * {
  min-width: 0;
}

/* 长数字允许在极端窄屏下断行，避免"最后一位被切掉"（失真）或"撑破容器"（溢出） */
.kpi .v, .card .num, .kpi .vl, .tc .n, .gpline .gv, .hbar .n, .wfr .amt {
  overflow-wrap: anywhere;
}

/* 表单控件：内联 style 里写死的 width（admin 240px / import 120px 等）在手机上会溢出。
   max-width 永远压得住 width，一条规则兜住所有。 */
input, select, textarea, button { max-width: 100%; }


/* ==========================================================================
   2. 表格安全网（配合 responsive.js 自动包裹）
   --------------------------------------------------------------------------
   <table> 里 th 常带 white-space:nowrap，min-content 会大于卡片宽度 →
   手机上出现"前几列看得见、后面列整列丢"。CSS 无法自己"包一层"，
   所以由 responsive.js 把裸表格包进 .yc-tw，这里只管它的表现。
   ========================================================================== */
.yc-tw {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.yc-tw > table { margin-bottom: 0; }

/* 可横滚时给一行提示（仅手机断点显示），让用户知道"内容没丢，是能滑的" */
.yc-tw-hint {
  display: none;
  font-size: 11px;
  line-height: 1.6;
  color: #8A9A94;
  margin: 2px 0 5px;
  letter-spacing: .5px;
}
.yc-tw-hint.show { display: block; }
.yc-tw::-webkit-scrollbar { height: 6px; }
.yc-tw::-webkit-scrollbar-thumb { background: rgba(90,154,138,.42); border-radius: 3px; }
.yc-tw::-webkit-scrollbar-track { background: rgba(90,154,138,.08); border-radius: 3px; }


/* ==========================================================================
   3. 业务外壳（.yc-shell）：侧栏 200px → 手机抽屉
   --------------------------------------------------------------------------
   手机 390px 时 .side 占 51%，.main 只剩 49% —— admin / budget / import /
   month_end / reports / voucher 六页**同一根因**，在这里一次性解决。
   ========================================================================== */
.yc-burger {
  display: none;                 /* 桌面隐藏，仅在 .yc-shell 的手机断点出现 */
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(90,154,138,.42);
  border-radius: 9px;
  background: #fff;
  color: #3C8274;
  font-size: 19px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.yc-burger:active { background: #F1F7F4; }

.yc-mask {
  display: none;
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(24,48,42,.45);
  -webkit-tap-highlight-color: transparent;
}
body.yc-drawer .yc-mask { display: block; }

@media (max-width: 820px) {
  /* —— 顶栏：不再固定 60px，允许换行，控件全部 ≥36px 可点 —— */
  .yc-shell .top {
    height: auto; min-height: 54px;
    padding: 7px 11px;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .yc-shell .top .brand {
    font-size: 13px; gap: 7px;
    flex: 1 1 150px; min-width: 0;
    letter-spacing: 0;
  }
  .yc-shell .top img { height: 24px; }
  .yc-shell .top .right {
    font-size: 12px; gap: 8px;
    flex-wrap: wrap; justify-content: flex-end;
    margin-left: auto;
  }
  /* 账套名与角色徽标在手机上重复且占位，隐藏（信息在「后台管理」里仍可见） */
  .yc-shell .top .co,
  .yc-shell .top .role-badge { display: none; }
  .yc-shell .top .period { padding: 3px 10px; font-size: 11.5px; }
  .yc-shell .top .avatar { width: 28px; height: 28px; font-size: 12px; }
  .yc-shell .top a.logout { padding: 9px 6px; font-size: 12.5px; }
  .yc-shell .top select { font-size: 12px; padding: 6px 8px; min-height: 34px; }
  .yc-burger { display: inline-flex; }

  /* —— 主体：单列 + 侧栏改抽屉 —— */
  .yc-shell .body { display: block; min-height: 0; }
  .yc-shell .side {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 78vw; max-width: 300px;
    z-index: 1200;
    padding-top: 14px;
    overflow-y: auto; overflow-x: hidden;
    transform: translateX(-103%);
    transition: transform .22s ease;
    box-shadow: 2px 0 18px rgba(20,50,42,.22);
    will-change: transform;
  }
  body.yc-drawer .side { transform: none; }
  .yc-shell .side .nav { padding: 15px 20px; font-size: 15px; min-height: 44px; }
  .yc-shell .main {
    width: 100%; min-width: 0;
    padding: 14px 12px 30px;
    overflow: visible;           /* 让真正的溢出暴露出来被修，而不是被 .main 吞掉 */
  }
  body.yc-drawer { overflow: hidden; }   /* 抽屉打开时锁背景滚动 */

  /* —— 栅格退化 —— */
  .yc-shell .cards,
  .yc-shell .mods,
  .yc-shell .mods.b6 { grid-template-columns: repeat(2, 1fr); }
  .yc-shell .cards { gap: 10px; }
  .yc-shell .grid,
  .yc-shell .grid2,
  .yc-shell .grid3 { grid-template-columns: 1fr; }
  .yc-shell .card { padding: 13px 12px; }
  .yc-shell .card .num { font-size: 19px; }
  .yc-shell .mod { padding: 14px 10px; }
  .yc-shell .mod .ic { width: 42px; height: 42px; }
  .yc-shell .chart svg { height: 150px; }
  .yc-shell .tabs { flex-wrap: wrap; gap: 8px; }
  .yc-shell .tabs a { padding: 9px 16px; min-height: 38px; }
  .yc-shell .sec-title { font-size: 14px; margin-top: 12px; }

  /* 手机顶栏空间有限：账套名与期间在报表页/工作台内仍可见，顶栏先让位给汉堡与退出 */
  .yc-shell .top .period { display: none; }

  /* 业务导入页：左「模块选择」固定 200px + 右「工作区」并排 →
     390px 下右侧只剩 146px，而工具栏 min-content 有 191px → 溢出 33px。
     手机上改为上下堆叠，模块列表在上、工作区在下（顺序与视觉习惯一致）。 */
  .yc-shell .import-wrap { flex-direction: column; gap: 12px; }
  .yc-shell .import-wrap .mod-select { width: auto; }
  .yc-shell .import-wrap .work { width: 100%; min-width: 0; }
  .yc-shell .toolbar { flex-wrap: wrap; gap: 8px; }
  .yc-shell .toolbar .mod-name { font-size: 15px; }
}

/* 极窄屏（iPhone SE 320 / 小屏安卓 360）：再退一列，绝不溢出 */
@media (max-width: 360px) {
  .yc-shell .cards,
  .yc-shell .mods,
  .yc-shell .mods.b6 { grid-template-columns: 1fr; }
  .yc-shell .card .num { font-size: 22px; }
  .yc-shell .top .brand { flex-basis: auto; font-size: 12.5px; }
  .yc-shell .top .period { display: none; }
}


/* ==========================================================================
   4. 大屏页 / 面板页（.yc-screen）：列退化 + 留白收紧 + 固定宽自适应
   --------------------------------------------------------------------------
   覆盖对象：screen.html / screen_preview.html / screen_l1_proto.html /
             screen_l2.html / screen_l2_preview.html / screen_l2_proto.html /
             screen_l3.html / screen_l34.html / screen_l34_preview.html /
             screen_l4.html / screen_l5.html / business.html
   这些页各自的 @media(max-width:1100px) 只退了 .kpis/.cards，
   .row3/.grid2/.gpwrap/.wall 仍是固定多列 → 手机横向溢出 +80~150px。
   ========================================================================== */
@media (max-width: 820px) {
  body.yc-screen { padding: 14px 13px 32px; }

  /* 头部：横向排列改纵向，避免标题被挤成两行还溢出 */
  body:is(.yc-screen,.yc-panel) .hd { flex-direction: column; align-items: flex-start; gap: 9px; }
  body:is(.yc-screen,.yc-panel) .hd h1 { font-size: 18px; letter-spacing: 0; padding-left: 10px; }
  body:is(.yc-screen,.yc-panel) .hd img { height: 38px; }
  body:is(.yc-screen,.yc-panel) .hd p,
  body:is(.yc-screen,.yc-panel) .hd .sub { font-size: 11.5px; }
  body:is(.yc-screen,.yc-panel) .hd .rt { margin-left: 0; text-align: left; width: 100%; }
  body:is(.yc-screen,.yc-panel) .hd .ctrl { flex-wrap: wrap; }
  body.yc-screen h2,
  body:is(.yc-screen,.yc-panel) .card h3 { font-size: 15px; }

  /* —— 列退化：多列 → 单列纵向堆叠（内容一个字都不少）——
     ★顺序有讲究：先出「单列兜底」，再出「保留多列」的例外。
       因为 .grid 与 .kpis / .cards 常写在同一个元素上（class="grid kpis"），
       两条规则权重相同（0,2,1）→ 后写的胜出。若把兜底写在后面，KPI 条会被压成单列。 */
  body:is(.yc-screen,.yc-panel) .grid,
  body:is(.yc-screen,.yc-panel) .cards,
  body:is(.yc-screen,.yc-panel) .cards2,
  body:is(.yc-screen,.yc-panel) .cards3,
  body:is(.yc-screen,.yc-panel) .row3,
  body:is(.yc-screen,.yc-panel) .grid2,
  body:is(.yc-screen,.yc-panel) .grid3,
  body:is(.yc-screen,.yc-panel) .gpwrap,
  body:is(.yc-screen,.yc-panel) .chkgrid,
  body:is(.yc-screen,.yc-panel) .trio,
  body:is(.yc-screen,.yc-panel) .trend,
  body:is(.yc-screen,.yc-panel) .wall,
  body:is(.yc-screen,.yc-panel) .mid { grid-template-columns: 1fr; }

  /* —— 例外：KPI 条在手机上仍保留 2 列（比单列省一半纵向滚动）——
     数字降到 17px 保证「-1,234,567.89」这种最长串也放得下。 */
  body:is(.yc-screen,.yc-panel) .kpis,
  body:is(.yc-screen,.yc-panel) .grid.kpis { grid-template-columns: repeat(2, 1fr); }
  body:is(.yc-screen,.yc-panel) .kpis { gap: 9px; }
  body:is(.yc-screen,.yc-panel) .kpi .v { font-size: 17px; }
  body:is(.yc-screen,.yc-panel) .kpi .vl { font-size: 22px; }
  body:is(.yc-screen,.yc-panel) .mid { height: auto; }
  body:is(.yc-screen,.yc-panel) .card { padding: 13px 13px; }

  /* 条形/瀑布行内的固定宽列收窄（行内 inline width 由下面 §5 兜底） */
  body:is(.yc-screen,.yc-panel) .hbar .k { width: auto; max-width: 38%; text-align: left; font-size: 11.5px; }
  body:is(.yc-screen,.yc-panel) .hbar .n { width: 96px; font-size: 11.5px; }
  body:is(.yc-screen,.yc-panel) .hbar .p { width: 38px; font-size: 11px; }
  body:is(.yc-screen,.yc-panel) .gpline .gv { width: 108px; font-size: 11.5px; }
  body:is(.yc-screen,.yc-panel) .gpline .who { width: 40px; }
  body:is(.yc-screen,.yc-panel) .wfr { grid-template-columns: 1fr; gap: 3px; font-size: 12.5px; }
  body:is(.yc-screen,.yc-panel) .wfr .amt,
  body:is(.yc-screen,.yc-panel) .wfr .pct,
  body:is(.yc-screen,.yc-panel) .wfr .pc { text-align: left; }
  body:is(.yc-screen,.yc-panel) .wfbg { height: 20px; }
  body:is(.yc-screen,.yc-panel) .bar { grid-template-columns: 62px 1fr 78px; gap: 7px; font-size: 12px; }
  body:is(.yc-screen,.yc-panel) .bar .v,
  body:is(.yc-screen,.yc-panel) .hrow .hscore { font-size: 12px; }
  body:is(.yc-screen,.yc-panel) .hrow { grid-template-columns: 62px 1fr 44px; gap: 8px; }
  body:is(.yc-screen,.yc-panel) .gm .amt { float: none; display: block; margin-top: 3px; }
  body:is(.yc-screen,.yc-panel) .footer-note,
  body.yc-screen footer { font-size: 11px; }
  body:is(.yc-screen,.yc-panel) .legend { font-size: 11px; }
}

/* 极小屏（<381px，如 iPhone SE / 安卓小屏）：KPI 再退一列，绝不溢出 */
@media (max-width: 380px) {
  body:is(.yc-screen,.yc-panel) .kpis { grid-template-columns: 1fr; }
  body:is(.yc-screen,.yc-panel) .kpi .v { font-size: 18px; }
}


/* ==========================================================================
   4b. 定宽画布页（.yc-fixed = dashboard.html，1920×1080 等比缩放）
   --------------------------------------------------------------------------
   ① 与屏幕无关的既有缺陷：.kbar{height:132px} 装不下 .kpi 的 140px 内容，
      而 .kpi{overflow:hidden} → 全断点（含桌面）纵向丢 10px。
      体检 4 个视口都报「被裁 4」，就是它。改成高度自适应。
   ② 手机/平板竖屏：等比缩放＝把 1920 宽压进 390，字号乘 0.2 → 5px，**这就是失真**。
      所以 ≤820 放弃缩放，改为纵向堆叠的真实响应式版式（一字不少、字号可读）。
      fit() 会往 #stage 写内联 transform，因此这里必须 !important 才压得住。
   ========================================================================== */
body.yc-fixed .kbar { height: auto; min-height: 132px; }

@media (max-width: 820px) {
  html body.yc-fixed,
  body.yc-fixed #wrap {
    height: auto; min-height: 100vh;
    overflow: visible;
    position: static;
  }
  body.yc-fixed #stage {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    padding: 14px 13px 64px;
  }
  body.yc-fixed .hd { height: auto; flex-wrap: wrap; gap: 10px; }
  body.yc-fixed .hd img { height: 36px; }
  body.yc-fixed .hd h1 { font-size: 18px; letter-spacing: 0; }
  body.yc-fixed .hd p { font-size: 11.5px; }
  body.yc-fixed .hr { margin-left: 0; width: 100%; flex-wrap: wrap; }
  body.yc-fixed .pd { font-size: 13px; padding: 6px 12px; }
  body.yc-fixed .kbar { grid-template-columns: repeat(2, 1fr); gap: 10px; min-height: 0; }
  body.yc-fixed .kpi { padding: 13px 15px; }
  body.yc-fixed .kpi .vl { font-size: 26px; }
  body.yc-fixed .kpi .lb { font-size: 13px; }
  body.yc-fixed .kpi .sb { font-size: 12px; gap: 10px; flex-wrap: wrap; }
  body.yc-fixed .mid { grid-template-columns: 1fr; height: auto; gap: 14px; }
  body.yc-fixed .card { padding: 13px 15px; }
  body.yc-fixed h2 { font-size: 15.5px; }
  body.yc-fixed .wfr { grid-template-columns: 1fr; gap: 3px; font-size: 13px; }
  body.yc-fixed .wfr .amt,
  body.yc-fixed .wfr .pc { text-align: left; }
  body.yc-fixed .wfbg { height: 20px; }
  body.yc-fixed .trio { grid-template-columns: 1fr; gap: 10px; }
  body.yc-fixed .tc .t { height: auto; }
  body.yc-fixed .tc .n { font-size: 24px; }
  body.yc-fixed .ins { font-size: 13.5px; line-height: 1.8; }
  body.yc-fixed .trend { grid-template-columns: 1fr; height: auto; gap: 14px; }
  body.yc-fixed .tcell h3 { font-size: 14px; }
  body.yc-fixed footer {
    position: static;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    font-size: 11px;
  }
}


/* ==========================================================================
   4c. 「一屏不滚动」页（L5 数智大屏的 5 个 tab 页）
   --------------------------------------------------------------------------
   L5 按"一屏不滚动"设计：html,body{height:100%} → .stage{flex:1;min-height:0}
   → .pane{height:100%;overflow:hidden}，靠固定视口高度把内容压进一屏。
   这在手机上必然失败：内容纵向堆叠后高度翻倍，而 .pane 仍锁死 100% →
   体检实测 #p-overview 内容 576px 被裁到 409px（**丢 167px＝缺失**）。
   ≤820 改为放开高度、允许纵向滚动。★.chart 必须补显式高度：
   它原本靠 flex:1 撑开，容器改成 auto 高度后会塌成 0（图全没了）。
   ========================================================================== */
@media (max-width: 820px) {
  body.yc-screen { height: auto; min-height: 100vh; }
  body.yc-screen .stage { flex: none; min-height: 0; height: auto; }
  body.yc-screen .pane,
  body.yc-screen .pane.show { height: auto; overflow: visible; }
  body.yc-screen .card.grow { flex: none; }
  body.yc-screen .scroll { flex: none; overflow: visible; min-height: 0; }
  body.yc-screen .chart { flex: none; height: 250px; min-height: 250px; }
  body.yc-screen .lamp .v { font-size: 19px; }
  body.yc-screen .tabs .tab {
    padding: 9px 14px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}


/* ==========================================================================
   5. 弹窗 & 内联固定宽度兼容层
   --------------------------------------------------------------------------
   历史页面把宽度写进了 inline style（改属性选择器比改 22 个页面安全）：
     voucher.html  .modal-box  width:760px;margin-left:-380px  ← 手机上完全跑出屏幕
     print.html    .modal-box  width:680px
     screen_l2.html .hbar .k   width:150px（覆盖 CSS，所以这里必须 !important）
     screen_l3.html .row 内层  min-width:120px
     screen.html    数值列     width:110px
   ========================================================================== */
@media (max-width: 820px) {
  /* 弹窗：定宽 → 自适应，并允许超高时滚动（否则"确定"按钮点不到＝功能缺失） */
  .modal { align-items: flex-start; overflow-y: auto; padding: 12px; }
  .modal-box {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
    left: 12px !important; right: 12px !important;
    margin-left: 0 !important;
    padding: 16px 14px !important;
    max-height: 86vh;
  }
  .modal-box .set-grid { grid-template-columns: 1fr; }
  .modal-box .set-grid label { flex-wrap: wrap; gap: 4px; }
  .modal-box .set-grid input,
  .modal-box .set-grid select { width: 100%; }
  .modal-foot { flex-wrap: wrap; }

  /* 内联写死的固定宽度 → 放开（max-width 也压不住 grid 项的 min-content，故直接改 width） */
  [style*="width:110px"], [style*="width:120px"], [style*="width:130px"],
  [style*="width:150px"], [style*="width:200px"], [style*="width:240px"],
  [style*="width:300px"] { width: auto !important; }
  [style*="min-width:120px"] { min-width: 0 !important; }

  /* 内联写死的栅格列 → 单列。
     典型：screen_l2_proto.html 的 style="grid-template-columns:340px 1fr"，
     在 390px 下卡片被压成 26px 宽、并把整页撑出 +43px（实测）。
     这里只列本项目实际出现过的几种，避免把"本来就合适的 1fr"也一起改掉。 */
  [style*="340px 1fr"],
  [style*="1fr 2.2fr"],
  [style*="1.15fr 1fr"],
  [style*="1fr 1fr 1fr"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(6,1fr)"] { grid-template-columns: 1fr !important; }
}

/* 触控可达：判定条件=「窄屏」**或**「粗指针」，两个都要。
   · 只按屏宽判：平板横屏 1024px 用 iPad 打开时会漏掉（它是手指操作）。
   · 只按 pointer:coarse 判：部分安卓浏览器/WebView 与桌面模拟环境不上报该媒体特性，
     手机上会完全不生效（体检就踩到这个坑：Playwright 默认 pointer:fine）。
   所以两个条件取"或"。目标 ≥40×40 CSS px（Apple HIG 44 / Android 48 的下限口径）。 */
@media (max-width: 820px), (pointer: coarse) {
  /* ---- 分档标准（与体检工具 audit_responsive.py 的分档判定一致）----
     主控件 40px ｜ 表格/报表行内按钮 36px ｜ 输入类 34px（排除勾选框）
     单一 40px 会把数据密集的报表行撑散，反而更难读 —— 故分档而非一刀切。 */

  /* ① 主控件（顶栏 / 页头 / 工具条 / 导航）—— 40px
     ★汉堡必须排除：本块的条件是「窄屏 **或** 粗指针」，触屏笔记本/大平板
       在 1440px 下也满足 `pointer:coarse` → 会把汉堡放出来，而它 >820px 时点了没反应
       （responsive.js 的 open() 直接 return）＝一个看得见却按不动的死按钮。 */
  .yc-shell .top a,
  .yc-shell .top select, .yc-shell .top button:not(.yc-burger),
  .yc-panel .top .right a, .yc-panel .top .right select, .yc-panel .top .right button,
  .yc-panel .hd .ctrl a, .yc-panel .hd .ctrl select, .yc-panel .hd .ctrl button,
  .yc-screen .hd .ctrl a, .yc-screen .hd .ctrl select, .yc-screen .hd .ctrl button,
  .yc-screen .hd a.alink,
  .yc-print .toolbar button,
  .toolbar button,
  .crumbs a, .foot a, .tabs a, .tabs .tab,
  .side .nav,
  /* login 只补"触控目标"，布局仍由它自带的 @media 管（不干预其响应式设计）——
     但"忘记密码"132×12 在手机上确实难按，而它是每个手机用户第一眼要点的东西 */
  .login-col a, .login-col button { min-height: 40px; }

  /* ★ min-height 对 display:inline 的元素**不生效** —— 光设高度，链接不会长高。
     实测踩到：a.logout / a.alink / 面包屑 / 页脚链接全部"设了 40px 却仍 36px"。
     ★ 注意 `budget.html` 顶栏是**裸 `<a>`（无 .logout 类）**，所以这里必须写成 `.top a`；
       只写 `.top a.logout` 会漏掉它（体检实测漏了 3 个断点）。 */
  .yc-shell .top a,
  .yc-panel .top .right a,
  .yc-panel .hd .ctrl a,
  .yc-screen .hd a.alink, .yc-screen .hd .ctrl a,
  .crumbs a, .foot a,
  .login-col a,
  .yc-shell .top button:not(.yc-burger) { display: inline-flex; align-items: center; }

  /* ② 表格 / 报表行内的小按钮 —— 36px：再大就把数据行撑散，反而难读 */
  table button, .row button, .rpt button, button.btn { min-height: 36px; }

  /* ③ 其余裸按钮兜底（#btnQuery / #btnGen 这类没有 .btn 类的工具条按钮）*/
  button { min-height: 36px; }

  /* ④ 输入类控件（★必须排除 checkbox/radio，否则 18px 的勾选框会被拉成 34px 高） */
  select,
  input:not([type="checkbox"]):not([type="radio"]) { min-height: 34px; }
}


/* ==========================================================================
   6. 打印页（.yc-print）：保住 A4 语义，只把纸张放进横滚容器
   --------------------------------------------------------------------------
   手机 390px 时 #preview（A4 横向 ≈907px）把整页撑到 927px → 浏览器把**整页**
   缩小显示，凭证上的字变成蚂蚁＝典型失真；且右侧内容滑不到＝缺失。
   解法：外层横滚容器 —— 页面本身不溢出（不失真），纸张原尺寸可左右滑（不缺失）。
   ========================================================================== */
/* 横向滚动容器不加宽度条件：纸张宽度是物理宽度，任何视口下都不许它撑破页面。
   桌面 1440px 时 907px 的纸放得下 → 不出现滚动条；平板 1024 也放得下；
   一旦窗口更窄（或纸张换成 A4 纵向 1123px）就自动变成"可左右滑"。 */
body.yc-print .preview-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

@media (max-width: 820px) {
  body.yc-print .preview-wrap { padding: 12px 8px 28px; }
  body.yc-print #preview { margin: 0 auto; }
  /* 纸面内的表格**故意不包 .yc-tw**（那是 A4 语义，动了就不叫凭证了），
     所以这里没有 JS 插入的 .yc-tw-hint —— 用纯 CSS 补一条横滚提示，
     sticky 定位让它始终停在可视区，滑到哪儿都看得见。 */
  body.yc-print .preview-wrap::before {
    content: "◀ 左右滑动查看完整凭据（A4 原尺寸，不缩放） ▶";
    display: block;
    position: sticky;
    left: 0;
    width: 100%;
    padding: 2px 0 8px;
    font-size: 11px;
    color: #8A9A94;
    text-align: center;
  }
  /* 工具栏/提示条由 fixed 改常规流：手机上 fixed 双条会吃掉 110px 且互相压叠 */
  body.yc-print .toolbar {
    position: static;
    height: auto; min-height: 56px;
    flex-wrap: wrap; gap: 8px;
    padding: 8px 10px;
  }
  body.yc-print .toolbar .brand { font-size: 13.5px; }
  /* §5 已把工具栏按钮定到 40px，本块**不得再降级**（后面写者胜，写 36 会把它压回去） */
  body.yc-print .toolbar button { padding: 9px 15px; min-height: 40px; }
  body.yc-print .tipbox { position: static; padding: 6px 10px; font-size: 11.5px; }
}


/* ==========================================================================
   7. 打印例外：任何"为屏幕"的重排都不许带进纸面
   ========================================================================== */
@media print {
  .yc-burger, .yc-mask, .yc-tw-hint { display: none !important; }
  body.yc-print .preview-wrap::before { display: none !important; }   /* 提示条不许印到纸上 */
  .yc-tw { overflow: visible !important; }

  body.yc-print .preview-wrap { overflow: visible !important; padding: 0 !important; }
  body.yc-drawer { overflow: visible !important; }
  .yc-shell .side { position: static !important; transform: none !important; width: auto !important; box-shadow: none !important; }
}