/* ==========================================================================
   律智云 · 移动端布局（H5 / 窄屏浏览器）
   由 app.js 在 body 上打 .mobile（H5 内嵌模式，或视口 ≤980px）。
   目标：单列流式、触控友好、无横向溢出、文字不被挤压。
   ========================================================================== */

/* ------------------------------ 底部导航 ------------------------------ */
.tabbar{display:none}
body.mobile .tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--ink-150);
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -8px 24px -18px rgba(16,24,40,.55);
}
.tabbar .tab{
  flex:1;min-width:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 2px 6px;min-height:52px;
  text-decoration:none;color:var(--ink-400);
  font-size:10.5px;line-height:1.2;letter-spacing:.01em;
  transition:color .16s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tabbar .tab .ic{display:flex;transition:transform .2s var(--ease)}
.tabbar .tab.on{color:var(--brand-600);font-weight:600}
.tabbar .tab.on .ic{transform:translateY(-1px) scale(1.05)}
.tabbar .tab:active{background:var(--ink-50)}
.tabbar .nav-badge{
  position:absolute;top:3px;left:50%;margin-left:3px;
  min-width:15px;height:15px;padding:0 4px;box-sizing:content-box;
  border-radius:var(--r-full);border:1.5px solid #fff;
  background:var(--danger);color:#fff;
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;
}
.tabbar .nav-badge[hidden]{display:none}

/* ------------------------------ 外壳 ------------------------------ */
body.mobile .app{grid-template-columns:minmax(0,1fr)}
body.mobile .topbar{
  height:54px;padding:0 13px;gap:8px;
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
body.mobile .tb-title{font-size:var(--t-15)}
body.mobile .tb-sub{display:none}
body.mobile .tb-chip{max-width:118px;font-size:10px;padding:5px 9px}
body.mobile .tb-right{gap:6px}
/* 顶栏上的次要按钮在窄屏收起文字，只留图标 */
body.mobile .tb-right .btn-sm{display:none}

body.mobile .view{
  padding:13px 13px calc(76px + env(safe-area-inset-bottom,0px));
  -webkit-overflow-scrolling:touch;
}

/* ------------------------------ 栅格折叠 ------------------------------ */
/* 一次性覆盖所有多列栅格：移动端一律单列，避免任何卡片被压到不能阅读 */
body.mobile .g2,
body.mobile .g3,
body.mobile .g4,
body.mobile .dash-row,
body.mobile .pf-grid,
body.mobile .geo-grid{grid-template-columns:minmax(0,1fr)}

body.mobile .quick-grid,
body.mobile .mod-grid{grid-template-columns:minmax(0,1fr)}
/* 快捷入口做成两列小卡更省纵向空间，但列宽不足以放下描述时自动退化为单列 */
body.mobile .quick-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
body.mobile .mod-grid.tight{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}

/* ------------------------------ 卡片与间距 ------------------------------ */
body.mobile .card{border-radius:var(--r-lg)}
body.mobile .card-pad{padding:14px}
body.mobile .card-head{
  padding:12px 14px;gap:8px;flex-wrap:wrap;   /* 标题与右侧按钮换行，避免互相挤压 */
}
body.mobile .card-head h3{font-size:var(--t-14)}
body.mobile .card-head .right{margin-left:auto;gap:6px;flex-wrap:wrap}
body.mobile .card-head .right .small{display:none}
body.mobile .grid{gap:12px}
body.mobile .divider{margin:14px 0}

/* 指标卡：字号下调并允许数值缩小，防止长金额被 overflow:hidden 裁掉 */
body.mobile .stat{padding:14px 15px}
body.mobile .stat .v{font-size:var(--t-24)}
body.mobile .stat .v small{font-size:var(--t-12)}
body.mobile .stat .x{font-size:var(--t-11);line-height:1.55}

/* ------------------------------ 表格 ------------------------------ */
/* .table-wrap 已具备横向滚动，这里只补触控与最小列宽约束 */
body.mobile .table-wrap{
  margin:0 -14px;padding:0 14px;
  -webkit-overflow-scrolling:touch;
}
body.mobile .tbl{min-width:520px}
/* 日志表是固定布局，列宽写死才有意义，移动端保持原宽度横向滚动 */
body.mobile .tbl-logs{min-width:760px}
body.mobile .tbl th,body.mobile .tbl td{padding:9px 10px;font-size:var(--t-12)}
body.mobile .tbl th{white-space:nowrap}

/* --- 卡片模式（.tbl.cards）---
   宽表格横向滚动虽能看全，但每行要来回拖动才能读懂，窄屏体验很差。
   这里把每行改成一张卡片，字段名取自 td 的 data-label。 */
body.mobile .table-wrap.cards-wrap{margin:0;padding:0}
body.mobile .tbl.cards{min-width:0;display:block}
body.mobile .tbl.cards thead{display:none}
body.mobile .tbl.cards tbody,body.mobile .tbl.cards tr,body.mobile .tbl.cards td{display:block;width:auto}
body.mobile .tbl.cards tr{
  border:1px solid var(--ink-150);border-radius:var(--r);
  background:var(--card);padding:12px 13px;margin-bottom:10px;
  box-shadow:var(--sh-xs);
}
body.mobile .tbl.cards tr:active{background:var(--ink-25)}
body.mobile .tbl.cards td{
  display:flex;gap:10px;align-items:flex-start;
  padding:4px 0;border:none;font-size:var(--t-12);line-height:1.6;
}
body.mobile .tbl.cards td::before{
  content:attr(data-label);flex:none;width:68px;
  color:var(--ink-400);font-size:var(--t-11);line-height:1.8;
}
/* 首列（案件名）作为卡片标题：去掉字段名，加一条分隔线 */
body.mobile .tbl.cards td[data-label="案件"]{
  display:block;padding:0 0 9px;margin-bottom:5px;
  border-bottom:1px solid var(--ink-100);
}
body.mobile .tbl.cards td[data-label="案件"]::before{display:none}
body.mobile .tbl.cards td[data-label="案件"] .nm{font-size:var(--t-14);line-height:1.5}
body.mobile .tbl.cards td[data-label="操作"]{justify-content:flex-end;padding-top:8px}
body.mobile .tbl.cards td[data-label="操作"]::before{display:none}

/* ------------------------------ 表单与按钮 ------------------------------ */
body.mobile .input,
body.mobile .select,
body.mobile .textarea{font-size:16px;min-height:42px}  /* ≥16px 可避免 iOS 聚焦缩放 */
body.mobile .textarea{min-height:84px}
body.mobile .btn{min-height:38px}
body.mobile .btn-sm{min-height:32px}
body.mobile .field{margin-bottom:12px}
body.mobile .field label{font-size:var(--t-12)}
body.mobile .row{flex-wrap:wrap}
body.mobile .modal{max-width:100%;border-radius:var(--r-lg)}

/* ------------------------------ 工作台 ------------------------------ */
body.mobile .dash-row{margin-top:12px}
body.mobile .hero-card{padding:18px}
body.mobile .hero-card h2{font-size:var(--t-20)}
body.mobile .hero-actions{position:static;margin-top:14px}

/* ------------------------------ 个人中心 ------------------------------ */
body.mobile .pf-hero-body{flex-direction:column;align-items:flex-start;gap:14px}
body.mobile .pf-hero-act{width:100%;flex-wrap:wrap}
body.mobile .pf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ------------------------------ 通讯录 ------------------------------ */
/* 左栏（列表）与右栏（会话）在移动端上下堆叠；会话打开时整屏显示会话 */
body.mobile .ct-wrap{grid-template-columns:minmax(0,1fr)}
body.mobile .ct-left,body.mobile .ct-right{min-height:auto}
body.mobile .ct-list{max-height:none}
body.mobile .ct-msgs{max-height:52vh}
body.mobile .ct-line{max-width:86%}
body.mobile .ct-img img{max-width:200px;max-height:200px}
body.mobile .ct-emoji{left:12px;right:auto;bottom:auto;top:-16px;transform:translateY(-100%);width:min(266px,calc(100vw - 40px))}

/* ------------------------------ GEO ------------------------------ */
body.mobile .geo-hero{padding:22px 18px 20px;border-radius:var(--r-lg)}
body.mobile .geo-hero h1{font-size:var(--t-24)}
body.mobile .geo-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.mobile .geo-kpi .v{font-size:var(--t-20)}
body.mobile .geo-engines,body.mobile .geo-abilities{grid-template-columns:minmax(0,1fr)}
body.mobile .geo-hero-act{flex-direction:column;align-items:stretch}
body.mobile .geo-hero-act .btn{width:100%;justify-content:center}
body.mobile .geo-entry-note{margin-top:9px}

/* ------------------------------ 多端预览 ------------------------------ */
/* 设备框在手机上超出屏幕宽度，改为等比缩放而不是横向溢出 */
body.mobile .device-stage{gap:18px}
body.mobile .device,body.mobile .mp-stage{transform:scale(.82);transform-origin:top center;margin-bottom:-120px}

/* ------------------------------ 登录页 ------------------------------ */
/* 登录页在桌面是 1.06fr / .94fr 两栏 + height:100vh + overflow:hidden。
   窄屏下两栏各只剩约 200px，而中文可逐字断行，标题与说明会被压成一根根竖条；
   overflow:hidden 又把滚动锁死，被挤出去的内容再也看不到。
   移动端改为单列纵向流，并解除高度锁定，让整页可以正常滚动。
   面板内边距同步收窄，避免内容区只剩一百多像素。 */
body.mobile .login{
  height:auto;min-height:100vh;min-height:100dvh;
  grid-template-columns:minmax(0,1fr);
  overflow:visible;
}
body.mobile .login-hero{padding:30px 20px 28px;justify-content:flex-start}
body.mobile .login-brand{gap:11px;margin-bottom:26px}
body.mobile .login-brand .mark{width:44px;height:44px;border-radius:14px;font-size:22px}
body.mobile .login-hero h1{font-size:var(--t-24);line-height:1.38;margin-bottom:13px}
body.mobile .login-hero .sub{font-size:var(--t-12);line-height:1.85;margin-bottom:24px}
body.mobile .login-points{grid-template-columns:minmax(0,1fr);gap:10px}
body.mobile .login-point{padding:13px 15px}
body.mobile .login-point:hover{transform:none}          /* 触屏没有 hover，避免误触位移 */
body.mobile .login-chain{margin-top:24px;gap:7px}
body.mobile .login-foot{margin-top:0;padding-top:22px}
body.mobile .login-panel{padding:22px 16px 34px}
/* 注意：不覆盖 .login-box 的 416px 宽度上限 ——
   窄屏下它本就不生效，而平板（768 左右）保留上限才能让表单居中而不过度拉伸。
   卡片自带 34px 内边距，叠上面板的 16px 后 375 宽只剩不到 270px，故窄屏收到 20px。 */
body.mobile .login-box{padding:26px 20px 20px;border-radius:var(--r-lg)}
body.mobile .login-head{margin-bottom:18px}
body.mobile .login-box h2{font-size:var(--t-20)}
/* 说明文字要求单行：桌面端点满内容区就够放，窄屏则按可用宽度流式缩字号
   （28 个汉字 × 字号 ≤ 卡片内容区，内容区约为 100vw-76px）。
   低于 340px 时代入值已到下限仍放不下，才回落到折行 ——
   否则会被卡片的 overflow:hidden 直接裁断，比折行更难看。 */
body.mobile .login-box .tip{font-size:clamp(9.5px,calc((100vw - 76px) / 29),12px)}
@media (max-width:339px){
  body.mobile .login-box .tip{white-space:normal;font-size:var(--t-11)}
}
body.mobile .login-qr img{width:68px;height:68px}

/* ------------------------------ 组织树（平台管理） ------------------------------ */
/* .tree-kids 每层累加 34px 缩进（margin 22 + padding 12），四级组织在 390 宽下
   可用宽度只剩约 290px；而 .tree-node 是「不换行的 flex」，组织名与
   「账号 / 授权模块」会被压到 min-content —— 中文最小宽度是一个字，
   于是整块文字退化成一列竖排的单字。
   移动端收紧缩进，并让信息行与操作按钮另起一行。 */
body.mobile .tree-kids{margin-left:12px;padding-left:9px}
body.mobile .tree-node{
  flex-wrap:wrap;column-gap:8px;row-gap:5px;
  padding:10px 11px;align-items:center;
}
/* 组织名给一个 flex-basis，放不下时连同标签整体换行，而不是逐字被压扁 */
body.mobile .tree-node b{flex:1 1 140px;min-width:0;font-size:var(--t-13)}
body.mobile .tree-node .tag{flex:none}
/* .spacer 是 flex:1 的占位条。移动端改成「整行宽、零高」，当作换行符用：
   名称与标签留在第一行，账号信息与操作按钮落到第二行 */
body.mobile .tree-node>.spacer{flex:0 0 100%;height:0;min-width:0}
body.mobile .tree-node>.small.muted{flex:1 1 auto;min-width:0;margin-right:auto;line-height:1.55}
/* 案件阶段行的操作按钮：被 .spacer 顶到下一行后会贴在左侧，
   给紧随 spacer 的第一个按钮 auto 外边距，让其与后续按钮一起靠右对齐 */
body.mobile .tree-node>.spacer+.btn{margin-left:auto}

/* ------------------------------ 案件台账 ------------------------------ */
/* 指标卡：.case-kpi 用 auto-fill + minmax(210px,1fr)，窄屏一行放不下两张
   （2×210+14=434 > 可用约 364），于是退化成 4 行，纵向被拉得很长。
   移动端固定两列，正好两行放完。 */
body.mobile .case-kpi{
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));  /* 手机 2 列，平板 4 列 */
  gap:10px;margin-bottom:14px;
}
body.mobile .case-kpi .stat{padding:12px 13px}
/* 两列后单元格窄了近一半，额度数字容易顶到溢出，字号下调一档 */
body.mobile .case-kpi .stat .v{font-size:var(--t-20)}

/* 筛选条：搜索框独占一行，三个下拉与右侧条数同处一行。
   下拉原本 min-width:136px（桌面口径），三个就要 426px，只能折行。 */
body.mobile .filters{padding:12px;gap:8px}
body.mobile .filters .input{flex:1 1 100%;min-width:0}
body.mobile .filters .select{flex:1 1 0;min-width:0;padding:8px}
body.mobile .filters .spacer{display:none}          /* 占位条在换行布局下只会白占一行 */
body.mobile .filters .small.muted{flex:0 0 auto;margin-left:auto}

/* ------------------------------ 任务日历 ------------------------------ */
/* 月历 + 当日详情在窄屏改为上下堆叠。
   格子里放不下条目名称，就把色条拉通整格、标题隐掉 ——
   一周七列在 390 宽下每格仅约 46px，硬塞文字只会变成一列碎字。 */
body.mobile .cal-wrap{grid-template-columns:minmax(0,1fr);gap:12px}
body.mobile .cal-bar{padding:12px 13px;gap:8px;flex-wrap:wrap}
body.mobile .cal-title{font-size:var(--t-15)}
body.mobile .cal-nav{gap:1px}
body.mobile .cal-nav .btn{height:26px}
body.mobile .cal-week{gap:2px;padding:10px 10px 6px}
body.mobile .cal-grid{gap:2px;padding:8px 10px 12px}
body.mobile .cal-cell{min-height:44px;padding:4px 5px 5px;gap:4px;border-radius:8px}
body.mobile .cal-d{width:20px;height:20px;font-size:var(--t-11);border-radius:7px}
body.mobile .cal-evs{gap:2px}
body.mobile .ev em{display:none}
body.mobile .ev i{width:100%;height:4px;border-radius:2px}
body.mobile .cal-more{padding:0 5px;font-size:9px}
body.mobile .cal-legend{gap:8px 13px;padding:11px 13px}
/* 触屏没有 hover，操作按钮常态全显，否则编辑 / 删除根本点不到 */
body.mobile .cal-acts{opacity:1}

/* ------------------------------ 经营统计 ------------------------------ */
/* 12 根柱子挤在 390 宽里，列间距收到 3px；高度同步降一档，
   否则「收案趋势」一张图就把首屏占满 */
body.mobile .chart-bars{gap:3px;height:148px}
body.mobile .cb-v,body.mobile .cb-l{font-size:10px}
/* 金额口径的柱顶标签（如「328万」）比纯数字宽得多，12 列并排会互相压住。
   这里改成固定列宽 + 卡片内横向滚动，保证标签可读 ——
   比把字号缩到看不清要好。件数口径不加这个限制，仍是一屏放得下。 */
body.mobile .chart-bars.is-amount{overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
body.mobile .chart-bars.is-amount .cb-col{flex:0 0 46px}
/* 环形图与图例在窄屏改为上下排列，图例不再被挤成一条窄线 */
body.mobile .cht-flex{gap:14px;justify-content:center}
body.mobile .legend-list{min-width:100%}
body.mobile .lg-row em{width:34px}
body.mobile .st-bars{gap:11px}

/* ------------------------------ 开庭排期 ------------------------------ */
/* 日期列在窄屏改为「横在开庭卡上方」的分组标题：左侧固定 104px 在手机上太奢侈 */
body.mobile .hd-day{flex-direction:column;gap:8px}
body.mobile .hd-date{width:auto;flex-direction:row;align-items:center;gap:8px;padding-top:0}
body.mobile .hd-date b{font-size:var(--t-14)}
/* 操作按钮单独占一行并靠右，避免把案件名与法院挤成两三字一折 */
body.mobile .hd-row{flex-wrap:wrap;padding:11px 12px;gap:8px}
body.mobile .hd-main{flex:1 1 auto;min-width:0}
body.mobile .hd-acts{
  flex:1 1 100%;justify-content:flex-end;
  border-top:1px dashed var(--ink-150);padding-top:8px;
}