/* ext-mobile.css — 用户中心移动端适配（W5-1）
   断点：<=900px 平板/大屏手机 → 单列 + 侧栏抽屉；<=700px 表格卡片化；<=600px 手机细化。
   原则：只做覆盖，不改任何模块的 DOM；侧栏抽屉完全复用现有 body.nav-open 机制
   （app.js 已把 #customer-menu 的 click 绑成 body.classList.add('nav-open')）。
   触控：ext-mobile.js 检测 (pointer: coarse) 时给 body 加 .ext-touch。 */

/* ============================ <=900px：单列 + 抽屉 ============================ */
@media (max-width: 900px) {
  .console-shell{display:block;padding:0;min-height:100dvh}

  .main{padding:0 16px max(28px,env(safe-area-inset-bottom));min-width:0;overflow-x:hidden}

  .topbar{position:sticky;top:0;z-index:20;margin:0 -16px 18px;padding:10px 16px;height:62px;gap:8px;
    border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 74%,transparent);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}

  /* 抽屉开关：800px 以下由 admin-shared 打开，801–900px 这段得自己补，否则抽屉拉不出来 */
  .menu-toggle{display:inline-flex}
  .sidebar-close{display:inline-flex}

  .sidebar{position:fixed;z-index:60;top:0;left:0;bottom:0;width:min(300px,86vw);height:100dvh;
    border-radius:0 22px 22px 0;padding:20px 14px max(16px,env(safe-area-inset-bottom));
    transform:translateX(-110%);visibility:hidden;overflow-y:auto;
    -webkit-overflow-scrolling:touch;transition:transform .2s ease,visibility .2s}

  body.nav-open .sidebar{transform:translateX(0);visibility:visible}

  body.nav-open .nav-backdrop{display:block;position:fixed;inset:0;z-index:50;border:0;border-radius:0;
    background:rgba(10,8,17,.45)}

  .nav-stack button{min-height:44px}

  .ext-grid{grid-template-columns:1fr}
  .ext-row{gap:10px}

  .ext-input,.ext-select,.ext-textarea{width:100%;font-size:16px}   /* >=16px 防 iOS 聚焦自动缩放 */

  .ext-btn,.ext-tab{min-height:40px}                                /* 触控目标 >=40px */
  .ext-btn{padding:9px 14px}

  .ext-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;padding:0 0 6px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ext-tabs::-webkit-scrollbar{display:none}
  .ext-tab{flex:0 0 auto;white-space:nowrap}

  .ext-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  .ext-modal{padding:14px}
  .ext-modal>.ext-card{max-height:88dvh}
  .ext-kv{grid-template-columns:minmax(80px,38%) 1fr}
  .ext-card{padding:14px;border-radius:16px;margin-bottom:12px}
  .ext-card>h3{font-size:14px}
  .ext-code{font-size:12px}
}

/* ==================== <=700px：.ext-table 变卡片行（thead 隐藏，td 用 data-label） ====================
   data-label 由 ext-mobile.js 从 thead th 自动写入，这里只负责画。 */
@media (max-width: 700px) {
  .ext-table{display:block;overflow:visible;border-collapse:separate;border-spacing:0}
  .ext-table thead{display:none}
  .ext-table tbody{display:block}

  .ext-table tr{display:block;margin:0 0 10px;padding:2px 12px 4px;
    border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
  .ext-table tr:last-child{margin-bottom:0}

  .ext-table td{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border:0;border-bottom:1px dashed var(--line);padding:8px 0;
    white-space:normal;text-align:right;word-break:break-word}
  .ext-table tr td:last-child{border-bottom:0}

  .ext-table td::before{content:attr(data-label);flex:0 0 auto;max-width:46%;
    color:var(--muted);font-size:12px;line-height:1.5;text-align:left}

  .ext-table td:empty{display:none}
  .ext-table td[colspan]{justify-content:center;text-align:center;border-bottom:0}
  .ext-table td[colspan]::before{content:none}
  .ext-table tr:hover td{background:transparent}
}

/* ================================ <=600px：手机 ================================ */
@media (max-width: 600px) {
  .main{padding:0 12px max(24px,env(safe-area-inset-bottom))}
  .topbar{margin:0 -12px 14px;padding:8px 12px;height:56px}
  .topbar h1{font-size:15px}

  .ext-card{padding:12px;border-radius:14px;margin-bottom:10px}
  .ext-grid{grid-template-columns:1fr;gap:10px}

  /* .ext-row 换行 + 按钮整行 */
  .ext-row{flex-direction:column;align-items:stretch;gap:8px}
  .ext-row>.ext-btn,.ext-row>button{width:100%;min-height:44px}
  .ext-row .ext-input,.ext-row .ext-select{width:100%}

  .ext-btn{min-height:44px}
  .ext-tab{padding:8px 14px;font-size:13px}
  .ext-tabs{gap:6px}

  /* .ext-modal 全屏化 */
  .ext-modal{padding:0;align-items:stretch}
  .ext-modal>.ext-card{max-width:none;width:100%;max-height:100dvh;height:100dvh;margin:0;
    border-radius:0;padding:16px 14px max(16px,env(safe-area-inset-bottom));
    overflow:auto;-webkit-overflow-scrolling:touch}

  /* .ext-kv 变单列 */
  .ext-kv{grid-template-columns:1fr;gap:2px}
  .ext-kv dt{margin-top:8px;font-size:12px}
  .ext-kv dt:first-of-type{margin-top:0}

  .ext-table tr{padding:2px 10px 4px}
  .ext-table td{padding:7px 0;font-size:13px}
  .ext-empty{padding:12px;font-size:12px}
  .ext-code{font-size:11.5px}
  .ext-badge{font-size:11px}
}

/* ===================== 触控设备（body.ext-touch 由 ext-mobile.js 添加） ===================== */
body.ext-touch .ext-btn,
body.ext-touch .ext-tab{min-height:44px}

body.ext-touch .ext-input,
body.ext-touch .ext-select,
body.ext-touch .ext-textarea{min-height:42px}

body.ext-touch .nav-stack button{min-height:46px}

/* 触屏没有 hover：关掉 hover-only 反馈，改成 :active，避免「点了像没反应」 */
@media (hover: none), (pointer: coarse) {
  .ext-btn:hover{filter:none}
  .ext-table tr:hover td{background:transparent}
  .ext-btn:active,.ext-tab:active{transform:scale(.985);filter:brightness(.92)}
}