/* ============================================================
   一六八 · 手机端样式层 v3
   ------------------------------------------------------------
   生效范围：仅 @media(max-width:768px)，电脑端一行都不影响
   覆盖对象：所有打了 mc-1/mc-2 的表格（业务页 .tab-page + 弹窗 .modal）
      mc-1  列数 ≤7    → 单列卡片（一行一字段，首列作标题）
      mc-2  列数 ≥8    → 两列网格（宽表用，一条记录半屏内）
   维护约定：
     · 本文件只写手机版规则，不写电脑端
     · 每条规则前注明归属，方便定位
     · 老写法 table.mobile-cards 已废弃并统一到本文件
   ============================================================ */

@media (max-width:768px){

  /* ========== A. 卡片化基础（两种模式共用） ========== */
  table.mc-1,
  table.mc-2{
    display:block !important;
    width:100% !important;
    border:none !important;
    background:transparent !important;
    overflow:visible !important;
  }
  table.mc-1 thead,
  table.mc-2 thead{ display:none !important; }
  table.mc-1 tbody,
  table.mc-2 tbody{ display:block !important; width:100% !important; }

  table.mc-1 tr,
  table.mc-2 tr{
    background:#fff !important;
    border:1px solid #eef2f7 !important;
    border-radius:12px !important;
    margin:0 0 10px 0 !important;
    padding:10px 12px !important;
    box-shadow:0 1px 3px rgba(15,23,42,.05) !important;
    box-sizing:border-box !important;
    width:100% !important;
  }

  /* 列名 */
  table.mc-1 td::before,
  table.mc-2 td::before{
    content:attr(data-label);
    flex:0 0 auto;
    max-width:44%;
    color:#94a3b8 !important;
    font-size:11.5px !important;
    font-weight:600 !important;
    line-height:1.7;
    text-align:left !important;
    white-space:normal !important;
  }
  table.mc-1 td:not([data-label])::before,
  table.mc-2 td:not([data-label])::before{ display:none !important; }

  /* 操作列（列名含「操作」）：占满整行，按钮横排 */
  table.mc-1 td[data-label*="操作"],
  table.mc-2 td[data-label*="操作"]{
    display:block !important;
    padding:8px 0 0 0 !important;
    margin-top:6px !important;
    border-top:1px solid #f8fafc !important;
    text-align:left !important;
  }
  table.mc-2 td[data-label*="操作"]{ grid-column:1/-1 !important; }
  table.mc-1 td[data-label*="操作"]::before,
  table.mc-2 td[data-label*="操作"]::before{ display:none !important; }

  table.mc-1 td[data-label*="操作"] button,
  table.mc-2 td[data-label*="操作"] button,
  table.mc-1 td[data-label*="操作"] a,
  table.mc-2 td[data-label*="操作"] a{
    display:inline-block !important;
    margin:0 6px 6px 0 !important;
    padding:7px 12px !important;
    font-size:12px !important;
    border-radius:6px !important;
    width:auto !important;
    min-width:0 !important;
    white-space:nowrap !important;
  }

  /* 表格内的表单控件：铺满，避免被压成一条线 */
  table.mc-1 input:not([type=checkbox]):not([type=radio]),
  table.mc-2 input:not([type=checkbox]):not([type=radio]),
  table.mc-1 select,
  table.mc-2 select,
  table.mc-1 textarea,
  table.mc-2 textarea{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    font-size:13px !important;
  }
  table.mc-1 input[type=checkbox],
  table.mc-2 input[type=checkbox],
  table.mc-1 input[type=radio],
  table.mc-2 input[type=radio]{
    width:16px !important;
    min-width:16px !important;
    height:16px !important;
    margin:0 !important;
  }

  /* 「加载中…」整行占位：不套卡片 */
  table.mc-1 tr:has(td[colspan]),
  table.mc-2 tr:has(td[colspan]){
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:8px 0 !important;
  }
  table.mc-1 td[colspan],
  table.mc-2 td[colspan]{
    display:block !important;
    text-align:center !important;
    color:#94a3b8 !important;
    width:100% !important;
  }
  table.mc-1 td[colspan]::before,
  table.mc-2 td[colspan]::before{ display:none !important; }

  /* ========== B. 单列模式（≤7 列）：一行一字段，首列作标题 ========== */
  table.mc-1 tr{ display:block !important; }

  table.mc-1 td{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    border:none !important;
    padding:5px 0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    font-size:12.5px !important;
    line-height:1.6 !important;
    text-align:right !important;
  }

  table.mc-1 td:first-child{
    display:block !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:#1e293b !important;
    text-align:left !important;
    padding:0 0 8px 0 !important;
    margin:0 0 4px 0 !important;
    border-bottom:1px dashed #f1f5f9 !important;
  }
  table.mc-1 td:first-child::before{
    display:inline !important;
    margin-right:8px !important;
    font-size:11px !important;
    font-weight:500 !important;
    color:#a3aebf !important;
    vertical-align:middle;
  }

  /* ========== C. 两列模式（≥8 列）：宽表用，两列网格 ========== */
  table.mc-2 tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:0 12px !important;
    align-items:start !important;
  }
  table.mc-2 td{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    border:none !important;
    padding:5px 0 !important;
    white-space:normal !important;
    word-break:break-word !important;
    font-size:12.5px !important;
    line-height:1.6 !important;
    text-align:right !important;
  }

  /* ========== D. 页面级微调 ========== */

  /* 游戏管理：字段少但内容长，强制单列（沿用老规则意图） */
  #gamePage table.mc-2 tr{ grid-template-columns:1fr !important; }

  /* C岗 15 天点击区（原 layout.css 迁移） */
  .tab-page table td .day15-click-wrap{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:4px !important;
    justify-content:flex-end !important;
  }

  /* ===== 筛选/工具栏：由 js 打 .m-toolbar（不再靠 inline style 字符串猜） ===== */
  div.m-toolbar{
    flex-wrap:wrap !important;
    gap:8px !important;
    align-items:center !important;
  }
  div.m-toolbar > *{
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }
  /* 文本框独占一行：要打字的地方给足宽度 */
  div.m-toolbar > input:not([type=checkbox]):not([type=radio]):not([type=color]),
  div.m-toolbar > textarea{
    flex:1 1 100% !important;
    width:100% !important;
  }
  /* 下拉、按钮：一行两个 */
  div.m-toolbar > select,
  div.m-toolbar > button{
    flex:1 1 calc(50% - 4px) !important;
    width:auto !important;
  }
  /* 计数 / 说明文字：独占一行 */
  div.m-toolbar > span,
  div.m-toolbar > label,
  div.m-toolbar > strong{
    flex:1 1 100% !important;
    text-align:left !important;
  }
  /* 复选框本身不撑宽 */
  div.m-toolbar > input[type=checkbox],
  div.m-toolbar > input[type=radio]{
    flex:0 0 auto !important;
    width:16px !important;
    height:16px !important;
  }

  /* ===== 表单控件左右外边距归零 =====
     实测：select/input 带 margin:3px 又按 100% 宽排，净宽多 6px，
     撑破父容器 → 9 个页面垂直方向出现 2px 溢出 + 10 个弹窗内部产生横向滚动。
     只清左右，上下间距保留。 ===== */
  .tab-page select,
  .tab-page input,
  .tab-page textarea,
  .modal select,
  .modal input,
  .modal textarea{
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* ===== 指标卡 / 图表标题行：三列折行，避免被压扁后溢出被裁出屏幕 ===== */
  div.m-wrap{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  div.m-wrap > *{
    flex:1 1 calc(33.333% - 6px) !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* ============================================================
     顶栏 4 个操作按钮：颜色 / 语言 / 消息 / 退出
     为什么之前是坏的：layout.css 在 ≤1440px 隐藏了 #topRightTools，指望改用
     #homePageTools（我的主页标题栏），但那套只有 2 个按钮且被 display:none 打死，
     结果 4 个按钮都挤在顶栏里被压成 24px，点不准。
     布局：[☰][LOGO] …弹性空隙… [🔔][🎨][🌐][⏻]
     ============================================================ */
  .top-bar{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    height:56px !important;
    box-sizing:border-box !important;
  }
  .top-bar-left{
    display:flex !important;
    align-items:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    gap:8px !important;
    overflow:hidden !important;
  }
  /* 「当前登录：xxx｜角色：xxx」在手机顶栏不占位 */
  .top-bar-left > div:not(.mobile-menu-btn):not(.top-logo){
    display:none !important;
  }
  .top-logo{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
  }

  /* ---- 四个按钮统一外观：40×40 不收缩 ---- */
  #mobileMenuBtn,
  #topNotifIcon,
  #topRightTools .top-tool-btn,
  #mobileLogoutBtn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    flex:0 0 40px !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
    border:1px solid #e2e8f0 !important;
    background:#f8fafc !important;
    color:#1f2937 !important;
    font-size:18px !important;
    line-height:1 !important;
    overflow:hidden !important;
    cursor:pointer !important;
  }
  #mobileMenuBtn:active,
  #topNotifIcon:active,
  #topRightTools .top-tool-btn:active,
  #mobileLogoutBtn:active{
    background:#e2e8f0 !important;
    transform:scale(0.94);
  }

  /* 右侧工具容器：不收缩、间距 8px */
  #topRightTools{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    margin:0 !important;
  }
  #topRightTools .top-tool-btn{ gap:0 !important; }
  #topRightTools .tool-text{ display:none !important; }
  #topRightTools .tool-icon{ font-size:18px !important; line-height:1 !important; }

  /* 齿轮设置按钮：电脑/手机都到不了，纯占位，彻底隐藏 */
  #mobileSettingsBtn{ display:none !important; }
  #mobileSettingsMenu{ display:none !important; }
  /* 「我的主页」标题栏里那套按钮内容不全，保持隐藏，避免出现两套 */
  #homePageTools{ display:none !important; }

  /* 消息 / 退出：只留图标，不要文字 */
  /* 铃铛必须允许溢出，否则右上角的未读红点会被 overflow:hidden 裁掉 */
  #topNotifIcon{ font-size:18px !important; margin-right:0 !important; overflow:visible !important; }
  #mobileLogoutBtn .logout-text{ display:none !important; }
  #mobileLogoutBtn .logout-icon{ display:inline !important; font-size:18px !important; }
  #topNotifBadge{ top:-2px !important; right:-2px !important; }

}

/* ========== V1042 手机端：图表卡标题行的胶囊徽标不再被压扁 ==========
   现象（390px 实测）：6 张图表卡在手机上被挤成两列、每张仅 175px 宽，
   标题和右侧胶囊（近30天 / A/B/C / 转化率 / TOP榜）抢同一行，
   两个弹性子项同时被压缩 —— 标题折 2 行，胶囊文字也挤成 2~3 行，
   高度从应有的 19px 涨到 30~34px，看起来是「破了」的色块。
   修法：胶囊禁止换行、不参与压缩；标题行允许折行，放不下时胶囊整体
   落到第二行并靠右（与电脑端视觉一致）。
   选择器用 padding:2px 8px + border-radius:10px 定位，全文精确命中 6 个，
   且不绑定字号 —— 以后调字号不会失效。
   ================================================================= */
@media (max-width: 768px){
  div[style*="justify-content:space-between"][style*="margin-bottom:8px"]{
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
  }
  span[style*="padding:2px 8px"][style*="border-radius:10px"]{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }
}

/* ========== V1043 手机端：宽表卡片隐藏「序号」列 ==========
   卡片列表本身就是顺序排列，序号没有意义；
   但它占掉两列网格的整整一格，白浪费半行高度。
   隐藏后复选框会自然与第一个真实字段并排，省下一行。 ========== */
@media (max-width: 768px){
  table.mc-2 td[data-label="序号"]{
    display: none !important;
  }
  /* 备注类长文本：占满整行，别挤在半宽格里折行（备注 / 移交备注 / B移交备注 / 跟进备注） */
  table.mc-2 td[data-label*="备注"]{
    grid-column: 1 / -1 !important;
  }
  /* 列名宽度 44% → 52%：最长列名（A移交客资总数 / 1‑15天点击打卡）也能单行，
     两列网格里省下整整一行高度（B岗实测 402px → 383px）。 */
  table.mc-2 td::before{
    max-width: 52% !important;
  }
}

/* ========== V1044 手机端：解除 #mainPage 表格 1200px 下限 ==========
   index.html:1711 有 `#mainPage table{min-width:1200px!important}`，
   电脑端意图是宁可横向滚动也不压扁列。但 min-width 优先级高于 width，
   导致手机端卡片化的 width:100% 完全失效：卡片被塞进 1200px 宽，
   外层 overflow:auto 只能横滚（右侧看不见），overflow:hidden 直接裁掉
   —— 用户看到的就是「显示不全 + 电脑样式」。
   实测 390px：智联线索表 1200px（容器 344px），本规则后 342px。
   只作用于已卡片化的表（.mc-1/.mc-2），未卡片化的表行为完全不变；
   电脑端在 @media 之外，一行都不影响。 */
@media (max-width: 768px){
  #mainPage table.mc-1,
  #mainPage table.mc-2{
    min-width: 0 !important;
  }
}

/* ========== V1045 手机端：「人员与组织」下管理页卡片收尾 ==========
   1) mc-1（≤7 列单列卡片）此前没隐藏「序号」——单列一行一字段，
      序号纯占一行且会被 td:first-child 规则当成卡片标题，
      于是最显眼的一行是「序号 2」，真正的名称（公司名/部门名/小组名/
      游戏名）反而不突出。这里隐藏序号，并把第 2 列提为卡片标题。
      注意：下面这些规则必须带 #pageId 前缀。index.html:1710 有
        #mainPage table th,#mainPage table td{text-align:center !important;
                    padding:8px 6px !important;font-size:13px !important;}
      特异性 (1,0,0,2) 且带 !important，不带 id 前缀的 (0,x,y) 规则会被静默压掉
      （曾用 :has() 写法实测失效）。display/grid/min-width 不受它影响。
   2) 人员管理（14 列 mc-2）：复选框列原本只占半格、姓名没有强调。 */
@media (max-width: 768px){

  /* --- mc-1「人员与组织」4 页：隐藏序号，把第 2 列提为卡片标题 ---
     必须用 #pageId 前缀：index.html:1710 有
       #mainPage table th, #mainPage table td{ text-align:center !important;
                                               padding:8px 6px !important;
                                               font-size:13px !important; }
     特异性 (1,0,0,2) 且带 !important，会把下面这些属性无条件压掉。
     加 #pageId 后升到 (1,0,1,1) 才能胜出。实测见 2026-10-28 记录。
     只圈这 4 个页面（每页仅 1 张表、序号必为第 1 列、名称必为第 2 列），
     不动其他 mc-1 页面，零附带影响。 */
  #deptPage table.mc-1 td[data-label="序号"],
  #companyPage table.mc-1 td[data-label="序号"],
  #teamPage table.mc-1 td[data-label="序号"],
  #gamePage table.mc-1 td[data-label="序号"]{
    display: none !important;
  }

  #deptPage table.mc-1 td:nth-child(2),
  #companyPage table.mc-1 td:nth-child(2),
  #teamPage table.mc-1 td:nth-child(2),
  #gamePage table.mc-1 td:nth-child(2){
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    text-align: left !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 4px 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
  }
  #deptPage table.mc-1 td:nth-child(2)::before,
  #companyPage table.mc-1 td:nth-child(2)::before,
  #teamPage table.mc-1 td:nth-child(2)::before,
  #gamePage table.mc-1 td:nth-child(2)::before{
    display: inline !important;
    margin-right: 8px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #a3aebf !important;
    vertical-align: middle !important;
  }

  /* --- 人员管理：复选框列独占一行 --- */
  #personnelPage table.mc-2 tbody td:nth-child(1){
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    padding: 0 0 6px 0 !important;
  }

  /* --- 人员管理：姓名做成卡片标题 --- */
  #personnelPage table.mc-2 tbody td[data-label="姓名"]{
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 0 8px 0 !important;
    margin: 0 0 4px 0 !important;
    border-bottom: 1px dashed #f1f5f9 !important;
  }
  #personnelPage table.mc-2 tbody td[data-label="姓名"]::before{
    display: none !important;
  }
}


/* ========== V1047 手机端：A岗获客登记表单字段对齐 ==========
   现象（640px 宽实测）：9 个字段的标签与输入框 9 个全部错位。
   原因：index.html #aAddArea 内字段是「裸文本节点 + 控件」平铺的行内流，
   没有任何字段容器：
       客户姓名:<input id="aCusName" ...>
       获客游戏:<input id="aGame" ... style="width:150px">
   排不下时浏览器自由折行，标签留在一行末尾、控件掉到下一行开头。
   纯 CSS 无解——文本节点没有边界，无法单独控制。故在 HTML 侧加了
   .a-add-grid / .a-add-fld 两层容器（id、文案、onclick 全部原样保留）。

   两条硬约束：
   1) 本文件绝不设置 #aAddArea 的 display。js/auth.js:263-264 会按权限写
      inline style（none / block），被 CSS 覆盖会直接破坏权限控制。
   2) 电脑端 .a-add-grid / .a-add-fld 一律 display:contents，不产生盒子，
      视觉与改造前一致。 */

@media (min-width: 769px){
  .a-add-grid,
  .a-add-grid > .a-add-fld{ display: contents; }
}

@media (max-width: 768px){
  /* 字段网格：窄屏一列；宽到放得下两列时自动两列（minmax 240px） */
  .a-add-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 12px;
    align-items: start;
  }
  /* 单个字段：标签在上、控件在下，控件占满整格 */
  .a-add-grid > .a-add-fld{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .a-add-grid > .a-add-fld > input,
  .a-add-grid > .a-add-fld > select{
    width: 100% !important;   /* 覆盖 #aGame 的内联 width:150px */
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

/* ============ V1048 ============
   手机端表单左右留白。
   背景：#aPage 卡片的 padding 是「竖直 12~14px / 水平 0」，#aAddArea 自身 padding 也是 0，
   导致输入框与「保存」按钮距卡片内边缘只有 1px（就是卡片边框本身），
   方形输入框直接切进 12~16px 的圆角里，看着发闷。
   处理：在 1024px 及以下给 #aAddArea 加水平 14px 内边距。
   为什么是 1024：#aPage 的水平内边距在 1024 及以下是 0、1025 起变成 20px，
   所以贴边只发生在 1024 及以下；桌面端不受影响，视觉零变化。
   注意：依旧不设置 #aAddArea 的 display —— js/auth.js:263-264 靠 inline display 做权限显隐。
   ================================= */
@media (max-width: 1024px){
  #mainPage #aAddArea{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============ V1049 ============
   B岗获客登记表单：照 A岗同一套设计（字段容器 + 手机网格 + 左右留白）。
   为了不再复制一遍规则，A/B（以及后续 C岗）统一走通用类：
     .add-form-grid —— 字段网格容器
     .add-form-fld  —— 单个字段（标签在上、控件在下）
   原有 .a-add-grid / .a-add-fld 的规则保留不动（值完全一致，双保险）。

   桌面端 display:contents 让多出来的这一层 div 不参与布局，视觉与改造前一致；
   <=1024 走网格（窄屏一列，宽到放得下两列时自动两列）；
   为什么和留白一样是 1024：769~1024 这段是「卡片水平 padding=0 + 桌面内联流」的夹心区间，
   会掉回标签与输入框同行、标签被挤到行尾的旧样子，所以网格必须一路管到 1024。
   <=1024 额外加水平 14px 内边距 —— 因为 #aPage / #bPage 卡片的水平 padding
   在 1024 及以下都是 0，控件会直接顶到圆角边缘。

   注意：依旧不设置 #aAddArea / #bAddArea 的 display ——
   js/auth.js:263-264 靠 inline display 做权限显隐，CSS 一旦写死会破坏权限。
   ================================= */

@media (min-width: 1025px){
  .add-form-grid,
  .add-form-grid > .add-form-fld{ display: contents; }
}

@media (max-width: 1024px){
  .add-form-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px 12px;
    align-items: start;
  }
  .add-form-grid > .add-form-fld{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .add-form-grid > .add-form-fld > input,
  .add-form-grid > .add-form-fld > select,
  .add-form-grid > .add-form-fld > textarea{
    width: 100% !important;   /* 覆盖 #bGameCategory 等控件的内联 width */
    min-width: 0 !important;
    box-sizing: border-box;
  }
}

@media (max-width: 1024px){
  #mainPage #bAddArea{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============ V1050 ============
   C岗留存台账表单左右留白：补齐与 A岗/B岗（V1048/V1049）一致的 14px 水平内边距。
   背景：#cPage 卡片在 1024px 及以下水平 padding 为 0，#cAddArea 自身也为 0，
   导致 C 岗两列网格铺满卡片、输入框直接切进圆角，视觉上贴边发闷（用户 2026-10-30 反馈）。
   只加 padding，不设 display —— js/auth.js 靠 inline display 做权限显隐，写死会破坏权限。
   ================================= */
@media (max-width: 1024px){
  #mainPage #cAddArea{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ============ V1051 ——「手机统一显示」v1 ============
   口令：手机统一显示。只做手机端（<=1024px），桌面端零改动（规则全部在 media 内）。
   规则来源与 A岗/B岗/C岗 卡片化（V1048/V1049/V1050）一致，不引入新机制，不改任何 HTML/JS。
   1) 记账页左右留白 14px，与 A/B/C 岗同值。
   2) 记账页筛选区改两列等宽网格，避免控件宽窄参差。
   3) 弹窗「标签: 控件」原为同行混排 —— 控件独占一行，标签自然在上。
   4) 弹窗按钮 44px 高，拇指可点。

   【2026-10-30 实测记录 —— 弹窗字段为什么是 121px 高】
     拆解：19.6px 标签行 + 44px 控件 + 32px 内边距 + 空隙
     32px 来自 mobile-fix-v1.css 的：
       .modal .modal-body,
       .modal > div > div:not(:first-child):not(:last-child){ padding:16px 20px !important; }
     这条本意是给「弹窗内容区」加内边距，实际把每个字段行也当成了内容区。
     ⚠️ 首次用 :has() 提高特异性去覆盖，实测无效（浏览器判定特异性仍低于原规则）。
        最终采用「同选择器 + 同 !important，靠加载顺序靠后胜出」的写法，即下面 3c 段。
     结果：单字段 121px -> 78px，弹窗总高 807px -> 约 650px，一屏可放下且按钮可见。
   ================================================= */
@media (max-width: 1024px){

  /* 1. 记账页左右留白（仅 #ledgerPage，其他页面不动） */
  #mainPage #ledgerPage{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* 2. 记账页筛选区：两列等宽网格（#ledgerPage 内仅此 1 处内联 flex，已核实） */
  #ledgerPage > div[style*="display:flex"]{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  #ledgerPage > div[style*="display:flex"] > select,
  #ledgerPage > div[style*="display:flex"] > input,
  #ledgerPage > div[style*="display:flex"] > button,
  #ledgerPage > div[style*="display:flex"] > label{
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  /* 日期标签改成「上标题下控件」，与表单字段一致 */
  #ledgerPage > div[style*="display:flex"] > label{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #64748b !important;
  }
  #ledgerPage > div[style*="display:flex"] > label > input{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. 弹窗字段：控件独占一行，标签自然回到上一行 */
  .modal-content > div{
    line-height: 1.45 !important;
  }
  .modal-content > div > input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
  .modal-content > div > select,
  .modal-content > div > textarea{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 6px 0 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;   /* iOS 小于 16px 聚焦会自动放大 */
  }

  /* 3b. 支持 :has() 的设备：字段行改竖向弹性布局，消除行盒空隙。
         不支持的老设备保留上面的块级方案，不会破坏布局。
         :not(:has(> div)) 用于排除「凭证图片」这类含子 div 的复合行。 */
  @supports selector(:has(*)){
    .modal-content > div:has(> input, > select, > textarea):not(:has(> div)){
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 6px !important;
    }
    .modal-content > div:has(> input, > select, > textarea):not(:has(> div)) > input,
    .modal-content > div:has(> input, > select, > textarea):not(:has(> div)) > select,
    .modal-content > div:has(> input, > select, > textarea):not(:has(> div)) > textarea{
      margin: 0 !important;
    }
  }

  /* 3c. 覆盖 mobile-fix-v1 的 16px/20px 内边距。
         ⚠️ 必须逐字沿用原选择器，才能保证特异性完全一致、靠后加载胜出（改过就压不住）。 */
  .modal > div > div:not(:first-child):not(:last-child){
    padding: 4px 8px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 4. 弹窗按钮：44px 高，拇指可点 */
  .modal .modal-content button{
    min-height: 44px !important;
    height: auto !important;
    padding: 10px 18px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
  }
}

/* ============ V1052 ============
   权限分配「原生页面模式」样式（openPermissionAssignModal(targetEl) 渲染出来的那一坨）。
   背景：以前是把弹窗 DOM 搬进页面再逐个改 inline style 硬掰（190 行 hack，已删除）；
   现在页面模式由函数内部生成 .perm-assign-page-root + .modal-content，本段只管页面级外观：
     1) #permAssignPage 左右 14px 内边距 —— 与「手机统一显示」V1051 的页面留白一致，控件不贴卡片圆角；
     2) .perm-assign-page-root 白底、圆角 12、宽度 100% —— 页面里不再需要遮罩与阴影；
     3) 权限区高度自然撑开、overflow:visible —— 页面里必须能整页滚动，不能被内部小滚动条截断；
     4) ≤1024 输入控件 16px —— iOS 小于 16px 聚焦会自动放大页面（与 V1051 同一套理由）。
   仅作用于 #permAssignPage 与 .perm-assign-page-root，弹窗模式（插入 body 的 .modal）完全不受影响。
   ================================= */
#permAssignPage{
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}
.perm-assign-page-root{
  width: 100%;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
}
.perm-assign-page-root .perm-assign-modal-content{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  border-radius: 12px;
  box-shadow: none !important;
  background: #fff;
}
/* 权限区在页面里必须整段撑开，不能被内部滚动截断 */
#permAssignPage #permAssignPermSection,
.perm-assign-page-root #permAssignPermSection{
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex: none !important;
}
.perm-assign-page-root .perm-assign-modal-content > div{
  max-height: none !important;
}
@media (max-width: 1024px){
  #permAssignPage .perm-assign-page-root input,
  #permAssignPage .perm-assign-page-root select,
  #permAssignPage .perm-assign-page-root textarea{
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;   /* iOS 小于 16px 聚焦会自动放大 */
    box-sizing: border-box !important;
  }
}

/* ============ V1052b ============
   接 V1052：≤1024 时 css/mobile-fix-v1.css:1541 有一段针对弹窗的
     .modal-content{ width:95%!important; max-width:95%!important; max-height:90vh!important;
                     margin:5vh auto!important; border-radius:16px!important;
                     overflow-y:auto!important; overflow-x:hidden!important; }
   这些值对「页面模式」是错的：页面要满宽、无 5vh 外边距、不设 90vh 上限、不要内部滚动条。
   函数内部写的 inline style 没有 !important，压不住它，所以在这里用 id 前缀（1,3,0）+!important 压回去。
   仅命中 .perm-assign-page-root 下的节点，弹窗模式（.modal 里的 .modal-content）完全不受影响。
   ================================= */
@media (max-width: 1024px){
  #permAssignPage .perm-assign-page-root .perm-assign-modal-content{
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}