/* ============================================================================
   app-theme.css — 平台管理端 APK「移动优先」外壳层（2026-10-29）
   ----------------------------------------------------------------------------
   作用域：**全部规则限定在 `html.app-shell` 下**。
     · 桌面端（无该 class）→ 本文件一条规则都不生效，零回归；
     · 回滚 = 移除 index.html 里这一行 <link>，或删掉 app-shell.js（不改任何既有文件）。

   为什么单独成文件而不是改 admin-mobile.css：
     后者是「桌面优先 + max-width 降级」的 43 路由实证补丁，改它会同时影响桌面端。
     本文件是「App 外壳专属层」，加载在 skins.css 之后 ⇒ 能覆盖其上的皮肤规则。

   设计依据：`平台管理端APK-界面设计方案-移动优先-2026-10-29.md` §3、§11

   ⚠ 本轮**不含**色值修正（§5.3 的 --text-3 等）：
     那些 token 由 skins.css 的六皮肤 × 明暗共 12 组规则覆盖，逐个改动需逐皮肤回归，
     属方案 P2，单独立项做，避免与外壳改动混在一起。
   ========================================================================== */

/* ---------- 底部 Tab：默认不存在，只在 App 外壳里出现 ---------- */
.admin-tabbar{ display:none; }

@media (max-width: 1024px){
  html.app-shell .admin-tabbar{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0;
    height:calc(56px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
    background:var(--surface,#fff);
    border-top:1px solid var(--border,#E7EBF2);
    /* 侧边栏 z-index:60（抽屉打开时要盖住 Tab）⇒ Tab 取 55 */
    z-index:55;
  }
}

html.app-shell .admin-tabbar .app-tab{
  border:0; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  /* 390/5 = 78px 宽、56px 高，远超 44px 触控底线 */
  min-height:44px;
  font-family:inherit; font-size:11px; font-weight:500;
  color:var(--text-3,#616D89);
  cursor:pointer;
  /* 只动颜色与 transform：不触发重排 */
  transition:color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
html.app-shell .admin-tabbar .app-tab svg{
  width:22px; height:22px;
  opacity:.55;
  transition:opacity .15s ease;
}
html.app-shell .admin-tabbar .app-tab:active{ transform:scale(.97); }
html.app-shell .admin-tabbar .app-tab.is-active{
  color:var(--primary,#2563EB);
}
html.app-shell .admin-tabbar .app-tab.is-active svg{ opacity:1; }

/* ---------- 内容区必须让出 Tab 高度 ----------
   ⚠ 这条是「必须」不是「优化」：漏了它，列表最后一条会被 Tab 永久遮住，
     用户滚到底也看不见（我在原型阶段就踩过这个坑，见方案 §11 的教训）。 */
@media (max-width: 1024px){
  html.app-shell .admin-content{
    padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 12px);
  }
}

/* ---------- 抽屉打开时给个遮罩，避免"点了背景没反应"的困惑 ---------- */
html.app-shell .app-drawer-mask{
  position:fixed; inset:0; background:rgba(11,18,32,.42);
  z-index:59;            /* 低于侧边栏 60、高于 Tab 55 */
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
html.app-shell .app-drawer-mask.show{ opacity:1; pointer-events:auto; }

/* ---------- 尊重「减弱动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html.app-shell .admin-tabbar .app-tab,
  html.app-shell .admin-tabbar .app-tab svg,
  html.app-shell .app-drawer-mask{ transition:none; }
  html.app-shell .admin-tabbar .app-tab:active{ transform:none; }
}

/* ---------- 键盘可达：焦点必须可见（WCAG 2.4.7） ---------- */
html.app-shell .admin-tabbar .app-tab:focus-visible{
  outline:2px solid var(--primary,#2563EB);
  outline-offset:-2px;
  border-radius:8px;
}


/* ============================================================================
   APPSHELL_TOPBAR — 顶栏图标收敛（2026-10-29）
   ----------------------------------------------------------------------------
   问题：390px 下顶栏右侧有 6 个 44px 图标 + 用户块 = 264px+，把标题挤没。
   做法：**只隐藏、不删除**——原按钮仍在 DOM 里（app.js 靠 id 绑定，删了会炸），
        仅 App 模式下 display:none；「⋯」菜单项通过 .click() 触发原按钮 ⇒ 功能零损失。
   ========================================================================== */

/* App 模式：除「刷新」外的图标与用户块全部隐藏。
   🔴 必须同时 :not(.app-more-btn) —— 「更多」按钮本身也带 .icon-btn，
      漏了会被自己的规则打死（首版实测过：按钮存在但不可见，点不到）。
   🔴 #skinBtn 是 JS 动态插入的皮肤切换，不在 index.html 里，需单独列出。 */
html.app-shell .admin-topbar-right > .icon-btn:not(#btnRefresh):not(.app-more-btn),
html.app-shell .admin-topbar-right > .admin-user,
html.app-shell #skinBtn{
  display:none !important;
}

/* 「⋯」触发按钮：只在 App 模式显示 */
html.app-shell .app-more-btn{ display:flex; }
.app-more-btn{ display:none; }

/* 下拉菜单 */
html.app-shell .app-more-menu{
  position:fixed; top:calc(44px + 56px - 6px); right:10px;
  min-width:196px; background:var(--surface,#fff);
  border:1px solid var(--border,#E7EBF2); border-radius:14px;
  box-shadow:0 12px 32px rgba(16,27,51,.16);
  padding:6px; z-index:120;
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
}
html.app-shell .app-more-menu.show{ opacity:1; transform:none; pointer-events:auto; }

html.app-shell .app-more-menu__who{
  padding:10px 12px 8px; border-bottom:1px solid var(--border,#E7EBF2); margin-bottom:4px;
}
html.app-shell .app-more-menu__who b{ display:block; font-size:13.5px; color:var(--ink,#101B33); }
html.app-shell .app-more-menu__who small{ font-size:11px; color:var(--text-3,#616D89); }

html.app-shell .app-more-menu button{
  width:100%; border:0; background:none; text-align:left;
  padding:12px; border-radius:8px; font-family:inherit;
  font-size:14px; color:var(--ink,#101B33); cursor:pointer; min-height:44px;
  display:flex; align-items:center; gap:10px;
}
html.app-shell .app-more-menu button:active{ background:var(--primary-soft,#EFF6FF); }
html.app-shell .app-more-menu button.danger{ color:#DC2626; }
html.app-shell .app-more-menu__sep{ height:1px; background:var(--border,#E7EBF2); margin:4px 8px; }

@media (prefers-reduced-motion: reduce){
  html.app-shell .app-more-menu{ transition:none; }
}