/* ============================================================================
   移动端高级适配层（平台后台 + 机构后台共用）
   ----------------------------------------------------------------------------
   加载顺序：app.css → (机构另加 org.css) → 本文件，所以这里最后落地、可覆盖前两者。
   断点：
     ≤900px  布局切换
               · 机构：左侧栏 → 顶部标题栏 + 底部 tab 栏（总览/学员/教务/收费/更多）
               · 平台：顶部导航放大为可点大按钮
     ≤600px  列表表格 → 卡片（每行一张卡，字段名用 data-label 显示）
   兼容硬约束（老 iPad Air / iOS Safari 12）：
     · 不用 display:flex 的 gap 做间距（Safari 14.1 才支持），一律 margin/padding；
       display:grid 的 gap 在老 Safari 可用，但本文件也统一避免，保持简单
     · 不用 :has() / 容器查询做关键布局，不依赖任何外部字体 / CDN
     · 表格字段名：HTML 里原本没有 data-label，由 org.js 运行时按表头补上（不改业务 HTML）；
       即使 JS 没跑，最多只是少一行字段名，卡片布局照样成立
   ＝＝ 本文件只做表现层，不含任何业务逻辑 ＝＝
   ============================================================================ */

/* ============================================================================
   一、≤900px：通用（触控 / 表单 / 性能 / 安全区）
   ============================================================================ */
@media (max-width:900px){

  /* 去掉移动端 300ms 双击缩放延迟，避免「双击把页面顶大」 */
  a,button,.btn,label,input,select,textarea,[role=button]{touch-action:manipulation}

  /* 所有可点元素最小 44×44（够手指点，少误触） */
  .btn,button,input[type=submit],input[type=button],.nav a,.me .quit,a.quit{min-height:44px}
  .btn{padding:11px 16px;font-size:14px}
  .btn.lg{padding:13px 22px;font-size:15px}

  /* 表单：单列；输入框 16px（iOS 聚焦时不会自动放大页面，放大后横向就错位了） */
  input[type=text],input[type=password],input[type=email],input[type=number],
  input[type=tel],input[type=search],input[type=date],select,textarea{
    font-size:16px;padding:12px 14px;
  }
  .form-grid,.grid2,.kv{grid-template-columns:1fr}
  .toolbar input[type=text]{max-width:none}

  /* 操作按钮在手机上占满整行，更好点。
     间距一律用 margin：老 iPad Air 的 Safari 不支持 display:flex 的 gap，
     靠 gap 的间距会塌成 0，按钮会粘在一起。 */
  .actions{gap:0;margin-top:18px}
  .actions > *{margin:0 10px 8px 0}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .quick{gap:0}
  .quick a{margin:0 10px 10px 0}
  /* 学员姓名块里的头像与文字：同样给 margin 兜底 */
  .who i{margin-right:10px}

  /* 少一层模糊、少一层阴影，长列表滚动更顺（模糊只有顶栏保留一点点） */
  body{background-attachment:scroll}
  .card,.kpi,.stat,.flash,.localbar,.env,.toast{-webkit-backdrop-filter:none;backdrop-filter:none}
  .card{background:rgba(19,24,39,.74);box-shadow:0 14px 34px -26px rgba(0,0,0,.9)}
  .kpi{background:rgba(19,24,39,.66);box-shadow:0 10px 24px -20px rgba(0,0,0,.9)}

  /* 按压反馈：手指点下去有回应 */
  .btn:active{transform:translateY(1px) scale(.985)}
  .quick a:active,.pager a:active{transform:scale(.975)}

  /* 横向（刘海屏横屏）左右安全区 */
  .wrap,.main{padding-left:calc(14px + env(safe-area-inset-left));
              padding-right:calc(14px + env(safe-area-inset-right))}

  /* ---- 移动端底部固定「保存」操作条（safe-area 适配） ---- */
  /* 机构后台内容区是 <main class="main">，平台是 <main class="wrap">，两种都要匹配 */
  .main form > .actions:last-of-type,
  .wrap form > .actions:last-of-type{
    position:sticky;bottom:0;z-index:6;
    margin-top:20px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,15,26,.95);
    border:1px solid var(--line-2);border-radius:14px;
  }
  /* 机构侧底部有 tab 栏（约 58px），保存条要落在它上面 */
  .shell .main form > .actions:last-of-type{
    bottom:calc(60px + env(safe-area-inset-bottom));
    padding-bottom:10px;border-radius:14px;
  }
}

/* ============================================================================
   二、≤600px：列表表格 → 卡片
   一行一张小卡：第一列当标题（不显示字段名），其余每格「字段名 + 值」两列，
   末列（操作）单独一行占满。字段名来自 data-label（org.js 补）。
   ============================================================================ */
@media (max-width:600px){

  /* 关掉机构侧 ≤900 的整表横向滚动，改成纵向卡片 */
  .card.tight{overflow:visible;padding:10px 12px}

  .tbl{display:block;width:100%;min-width:0;border-spacing:0}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tr{
    display:block;margin:0 0 10px;padding:12px 14px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 10px 24px -20px rgba(0,0,0,.9);
  }
  .tbl tbody tr:last-child{margin-bottom:0}
  .tbl tbody tr:hover{background:var(--surface)}

  .tbl td{
    display:flex;flex-wrap:wrap;align-items:baseline;
    width:auto;padding:4px 0;border:0;
    white-space:normal!important;text-align:left;font-size:13.5px;color:var(--ink-2);
  }
  /* 字段名（data-label）固定一列，右面是值 */
  .tbl td::before{
    content:attr(data-label);
    flex:0 0 78px;max-width:78px;
    color:var(--muted);font-size:12px;font-weight:500;
  }
  /* 没有 data-label 的格子（表头缺省）不占位 */
  .tbl td:not([data-label])::before{display:none}

  /* 把被 app.css 在窄屏隐藏的第 3 列放回来（本文件在后，同权重时覆盖） */
  .tbl td:nth-child(3){display:flex}

  /* 第一列 = 卡片标题（不显示字段名） */
  .tbl td:first-child{
    display:block;padding:0 0 9px;margin:0 0 7px;
    border-bottom:1px dashed rgba(255,255,255,.1);
    font-size:14.5px;
  }
  .tbl td:first-child::before{display:none}

  /* 末列：与上方数据之间加一条虚线分隔（操作列有按钮、数据列有文字都适用）。
     字段名照旧显示——操作列的表头本来就是空的，data-label 不存在，
     由上面的 td:not([data-label])::before{display:none} 自动收起，无需特判。 */
  .tbl td:last-child{
    padding-top:11px;margin-top:7px;
    border-top:1px dashed rgba(255,255,255,.1);
  }
  .tbl td:last-child .btn{min-height:44px;padding:10px 16px;font-size:14px}
  .tbl td:last-child .btn + .btn{margin-left:8px}

  /* 卡片里的小标签、状态药丸不换行 */
  .tbl td .st,.tbl td .tag,.tbl td .mono{white-space:nowrap}

  /* 空状态 / 统计在手机上更紧凑 */
  .kpis{grid-template-columns:1fr 1fr}
  .card.empty,.empty-state{padding:40px 18px}
}

/* ============================================================================
   三、窄屏细节
   ============================================================================ */
@media (max-width:380px){
  .tbl td::before{flex-basis:66px;max-width:66px}
  .kpis{grid-template-columns:1fr}
}

/* ============================================================================
   四、机构「更多」抽屉（结构由 org.js 运行时生成；桌面端一律不显示）
   ============================================================================ */
.mtab-sheet{display:none}
@media (min-width:901px){
  .side .item.mtab-more,.mtab-sheet{display:none!important}
}
@media (max-width:900px){
  .mtab-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:59;
    display:none;
    padding:12px 12px calc(74px + env(safe-area-inset-bottom));
    padding-left:calc(12px + env(safe-area-inset-left));
    padding-right:calc(12px + env(safe-area-inset-right));
    background:rgba(11,15,26,.98);
    border-top:1px solid var(--line-2);
    box-shadow:0 -20px 44px -26px rgba(0,0,0,.95);
  }
  .mtab-sheet.open{display:block}
  .mtab-sheet .mtab-tip{
    font-size:12px;color:var(--muted);margin:0 2px 8px;
  }
  .mtab-sheet a{
    display:block;margin:0 0 8px;padding:13px 15px;min-height:48px;
    border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);
    color:var(--ink);font-size:15px;font-weight:500;
  }
  .mtab-sheet a:last-child{margin-bottom:0}
  .mtab-sheet a.on{border-color:var(--brand-line);background:var(--brand-soft);color:#fff}
  .mtab-sheet a:active{transform:scale(.985)}
}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion:reduce){
  .btn:active,.quick a:active,.pager a:active,.mtab-sheet a:active{transform:none!important}
}