/* ============================================================
   小树平台 · 手机端增强层（mobile.css）
   原则：仅作用于 ≤981px 视口（与原站移动断点对齐），桌面端完全不受影响。
   只改布局/CSS，不触碰任何业务逻辑 JS。主色沿用 #0f766e。

   ⚠️ 桌面端默认隐藏底部 Tab 栏（.m-tabbar{display:none!important}），
      仅在 ≤981px 时才 display:flex，避免桌面出现悬浮条遮住内容。
   ============================================================ */

/* 桌面端默认隐藏底部 Tab 栏 */
.m-tabbar { display: none !important; }

/* 搜索框外独立的 🔍 切换按钮：手机端搜索框已常驻，此按钮多余 */
.header .search-toggle,
.header button.search-toggle,
.header .icon-btn.search-toggle,
button.icon-btn.search-toggle[aria-label="搜索工具"] { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; }

/* Tab 基础样式（父级在桌面端隐藏，故此处无条件无害） */
.m-tab {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important; gap: 2px !important;
  background: none !important; border: none !important; cursor: pointer;
  color: #64748b; font-size: 11px !important; line-height: 1 !important;
  -webkit-tap-highlight-color: transparent; padding: 4px 0 !important;
}
.m-tab svg { width: 22px !important; height: 22px !important; display: block !important; }
.m-tab.active { color: #0f766e !important; }
.m-tab:active { opacity: .65 !important; }

@media (max-width: 981px) {
  /* 底部 Tab 栏在手机端显示 */
  .m-tabbar {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 56px !important; display: flex !important;
    background: #fff !important; border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -2px 14px rgba(15, 30, 28, .12) !important;
    z-index: 9999 !important; padding-bottom: env(safe-area-inset-bottom, 0) !important;
    width: 100% !important;
  }

  :root { --sidebar-w: 0 !important; }
  .main { margin-left: 0 !important; width: 100% !important; position: relative; z-index: 1; }
  .content { padding: 8px 12px 100px !important; margin-top: 0 !important; overflow-x: visible !important; }
  .sidebar {
    transform: translateX(-100%) !important; z-index: 10000 !important; box-shadow: none !important;
    visibility: hidden !important; pointer-events: none !important;
    width: 82vw !important; max-width: 300px !important;
  }
  .sidebar.open {
    transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, .3) !important;
  }

  /* ---- Header：汉堡 + 品牌 + 桌面端右侧图标（参考电脑端，图标化） ---- */
  .header { flex-wrap: nowrap !important; gap: 6px !important; position: relative; z-index: 10; padding: 6px 10px !important; min-height: auto !important; align-items: center !important; }

  /* 搜索框整体在手机端移除（彻底消除顽固的 🔍，用户建议去掉搜索框） */
  .search-box { display: none !important; }
  /* 搜索框外独立的 🔍 切换按钮：一并隐藏，双保险 */
  .header .search-toggle,
  .header button.search-toggle,
  .header .icon-btn.search-toggle { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

  /* 桌面端右侧图标区在手机端恢复显示：登录(含我的) / 退出 / 设置 三项，紧凑排列 */
  .header-right { display: flex !important; align-items: center !important; gap: 2px !important; margin-left: 6px !important; flex-shrink: 0 !important; }
  .header-right .icon-btn { padding: 4px 6px !important; font-size: 13px !important; margin-left: 0 !important; border-radius: 12px !important; }
  .header-right .ib-text { display: none !important; } /* 手机端仅图标，省横向空间 */
  /* 隐藏其余桌面图标（新建批改 / 门户 / 主题 / 帮助 / 福利），仅留登录与设置 */
  .header-right .hd-cta,
  .header-right button.icon-btn[onclick^="Portal"],
  .header-right #themeBtn,
  .header-right button.icon-btn[onclick^="showHelp"],
  .header-right button.icon-btn[onclick^="openBenefits"] { display: none !important; }

  /* 登录态账号区：隐藏「安全」，保留「我的 / 退出」；仅截断用户名，徽标必须可见 */
  #authArea button.icon-btn[onclick^="openSecurity"] { display: none !important; }
  #authArea .auth-user {
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    max-width: none !important; overflow: visible !important;
    font-size: 12px !important; white-space: nowrap !important; flex-shrink: 1 !important; min-width: 0 !important;
  }
  /* 仅用户名段允许截断（mobile-nav.js 在加载时把用户名文本包到 <span class="au-name"> 内），徽标/日期/我的不受影响 */
  #authArea .auth-user .au-name { overflow: hidden !important; text-overflow: ellipsis !important; max-width: 56px !important; display: inline-block !important; vertical-align: middle !important; flex-shrink: 1 !important; min-width: 0 !important; }
  #authArea .badge-vip { font-size: 10px !important; padding: 1px 5px !important; flex-shrink: 0 !important; }

  /* 品牌区缩小 */
  .mobile-brand { flex: 0 0 auto !important; }
  .mobile-brand .mb-logo { width: 28px !important; height: 28px !important; font-size: 14px !important; line-height: 28px !important; }
  .mobile-brand .mb-name { font-size: 14px !important; }
  /* 汉堡菜单按钮 */
  .menu-btn { flex: 0 0 auto !important; font-size: 20px !important; padding: 6px !important; background: none !important; border: none !important; cursor: pointer; }

  /* ---- Banner 压缩 ---- */
  .banner { margin-bottom: 10px !important; padding: 12px 10px !important; border-radius: 12px !important; }
  .banner h2 { font-size: 18px !important; margin-bottom: 4px !important; }
  .banner p { font-size: 13px !important; margin-bottom: 6px !important; }

  /* ---- 筛选栏：确保横向滚动，最后一个 chip 不被截断 ---- */
  .filter-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; gap: 8px !important; padding: 6px 24px 10px 2px !important; margin: 0 !important; scrollbar-width: none; width: calc(100% + 4px) !important; box-sizing: border-box !important; }
  .filter-bar::-webkit-scrollbar { display: none !important; }
  .filter-bar .filter-chip, .filter-bar button, .filter-bar span { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }

  /* ---- 工具网格 ---- */
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .tool-card { padding: 10px !important; min-height: 0 !important; }
  .tool-card.grader-feature { grid-column: 1 / -1 !important; }
  .section-title { font-size: 15px !important; margin-top: 8px !important; }

  /* ---- Footer：补偿底部 Tab 栏遮挡 ---- */
  .footer { padding-bottom: 80px !important; }

  /* ---- 新手引导（#xsGuide）在手机端必须盖过底部 Tab 栏；
         Tab 栏 z-index 9999、侧栏 z-index 10000，所以引导层取 10001。 ---- */
  #xsGuide { z-index: 10001 !important; }
  /* 引导卡片给 Tab 栏让出空间：56px Tab 栏高 + 20px 安全间距 = bottom 76px。
     原 index.html 内嵌媒体查询只写 bottom:20px，会被 Tab 栏完全覆盖导致"下一步"点不到。 */
  .xsg-card, .xsg-card.g1, .xsg-card.g2, .xsg-card.g3 {
    bottom: 76px !important; max-height: calc(100vh - 56px - 40px) !important; overflow-y: auto !important;
  }

  /* ---- Portal 弹窗在手机端可关闭 ---- */
  .portal-modal { z-index: 300 !important; }
  .portal-close { display: block !important; width: 36px !important; height: 36px !important; font-size: 18px !important; }
}

/* ============================================================
   后台管理面板 · 手机端适配 v2（紧凑美观，纯 CSS 不动 admin.js）
   目标：底部卡片式弹窗、Tab 横滑、2 列统计、输入行横向紧凑、表格横滑。
   ============================================================ */
@media (max-width: 981px) {
  #adminOverlay { z-index: 10002 !important; padding: 10px 0 0 !important; align-items: flex-end !important; }
  #adminOverlay .panel {
    width: 100% !important; max-width: none !important;
    height: calc(100vh - 10px) !important; max-height: calc(100vh - 10px) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,.30) !important;
  }
  #adminOverlay .panel-head {
    padding: 12px 16px !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0)) !important;
    position: sticky !important; top: 0 !important; z-index: 2 !important;
    background: var(--card) !important; border-bottom: 1px solid var(--border) !important;
  }
  #adminOverlay .panel-body {
    max-height: none !important; overflow-y: auto !important; flex: 1 1 auto !important;
    padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Tab 栏横向滚动 */
  .admin-tabs {
    flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    gap: 6px !important; padding-bottom: 6px !important; margin-bottom: 10px !important;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none !important; }
  .admin-tab {
    flex-shrink: 0 !important; white-space: nowrap !important;
    padding: 6px 10px !important; font-size: 12px !important; border-radius: 8px !important;
  }

  /* 统计卡片：2 列网格，更紧凑 */
  #adminStats > div {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important; margin-bottom: 10px !important;
  }
  #adminStats > div > div {
    min-width: auto !important; flex: none !important;
    padding: 8px 10px !important; border-radius: 10px !important;
    background: var(--bg) !important; border: 1px solid var(--border) !important;
  }
  #adminStats > div > div > div:first-child { font-size: 11px !important; color: var(--text-3) !important; }
  #adminStats > div > div > div:last-child { font-size: 16px !important; margin-top: 2px !important; font-weight: 700 !important; }

  /* 输入行：横向紧凑排列，不够时换行，避免纵向巨卡 */
  .admin-gen-row {
    gap: 6px !important; margin-bottom: 10px !important;
    flex-wrap: wrap !important; align-items: center !important;
  }
  .admin-gen-row input[type=text] {
    flex: 1 1 160px !important; min-width: 0 !important;
    font-size: 14px !important; padding: 7px 10px !important; min-height: 36px !important;
  }
  .admin-gen-row input[type=number] {
    flex: 0 0 72px !important; width: 72px !important; min-width: 0 !important;
    font-size: 14px !important; padding: 7px 8px !important; min-height: 36px !important;
  }
  .admin-gen-row select {
    flex: 1 1 auto !important; min-width: 0 !important;
    font-size: 14px !important; padding: 7px 8px !important; min-height: 36px !important;
  }
  .admin-unit { font-size: 11px !important; color: var(--text-3) !important; margin: 0 2px !important; }
  .admin-mini-btn {
    flex: 1 1 auto !important; min-width: 64px !important; min-height: 36px !important;
    font-size: 12px !important; padding: 7px 12px !important; border-radius: 8px !important;
  }

  /* 表格：横向滚动 + 紧凑行高 */
  .admin-table { display: block !important; overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch; font-size: 12px !important; }
  .admin-table th, .admin-table td { padding: 6px 8px !important; }
  .admin-table td { vertical-align: middle !important; }
  .admin-actions { gap: 4px !important; }
  .admin-action { min-height: 26px !important; padding: 2px 6px !important; font-size: 11px !important; border-radius: 4px !important; }
  .admin-username { max-width: 110px !important; }
  .admin-badge { font-size: 10px !important; padding: 1px 5px !important; }

  /* 分页控件 */
  #codesPager, #membersPager, #renewMembersPager, #renewLogPager, #ordersPager {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center;
    margin-bottom: 18px !important;
  }
  #codesPager button, #membersPager button, #renewMembersPager button,
  #renewLogPager button, #ordersPager button {
    min-height: 38px !important; padding: 8px 14px !important; font-size: 13px !important;
  }
  #codesPager > span, #membersPager > span, #renewMembersPager > span,
  #renewLogPager > span, #ordersPager > span { font-size: 11px !important; }

  /* 微信 webview 底部悬浮工具栏（缩放/+- 球/地址栏）会遮挡页面最底部元素：
     ① 后台弹窗内容区末尾加 72px 占位，确保分页条滚动后仍可见可点
     ② 「我的」页面管理后台入口底部留空，避免被压住 */
  #adminOverlay .panel-body::after {
    content: "" !important; display: block !important; height: 72px !important; flex-shrink: 0 !important;
  }
  #adminBtn { margin-bottom: 72px !important; }

  /* IP 封禁：文本输入框优先占满 */
  #adminTabIp .admin-gen-row input[type=text] { flex: 1 1 100% !important; }

  /* ---- Hero 小树插画：手机端恢复显示（覆盖原站 ≤980px 的 display:none） ---- */
  .xs-tree { display: block !important; width: 140px !important; left: 50% !important; transform: translateX(-50%) !important; bottom: -10px !important; opacity: .85 !important; z-index: 2 !important; }
  .grass-hill { display: block !important; opacity: .5 !important; }
}

/* 超窄屏（≤480px）：再收紧一圈 */
@media (max-width: 480px) {
  #adminOverlay { padding: 6px 0 0 !important; }
  #adminOverlay .panel { height: calc(100vh - 6px) !important; max-height: calc(100vh - 6px) !important; border-radius: 14px 14px 0 0 !important; }
  #adminOverlay .panel-body { padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0)) !important; }
  .admin-tab { padding: 5px 8px !important; font-size: 11px !important; }
  .admin-gen-row input[type=number] { flex: 0 0 66px !important; width: 66px !important; padding: 6px 7px !important; }
  .admin-mini-btn { min-width: 56px !important; padding: 6px 10px !important; font-size: 11.5px !important; min-height: 34px !important; }
  .admin-table th, .admin-table td { padding: 5px 6px !important; font-size: 11.5px !important; }
  .admin-username { max-width: 90px !important; }
  .admin-action { min-height: 24px !important; padding: 2px 5px !important; font-size: 10px !important; }
}