/* ============================================================================
   杂物柜 · 全站手机适配（个人中心 + 信息页 / 协议页共用）
   ----------------------------------------------------------------------------
   作用范围：只作用于 ≤768px；PC（≥769px）完全不受影响。
   加载方式：放在各页面自身 <style> 之后（同权重下后加载的胜）。
   覆盖页面：
     · public/admin/_profile_layout.php  →  个人中心全部 17 个页面
     · src/templates/page.tpl.php        →  独特优势 / 关于网站 / 联系我们 / 提供意见
     · src/templates/legal.tpl.php       →  用户协议 / 隐私政策
   ========================================================================== */

/* ============================================================================
   一、PC 基础规则（必须写在 @media 之前！写在后面会覆盖掉手机端设置）
   ========================================================================== */
.m-menu-btn { display: none; }    /* PC：不显示「☰ 页面菜单」 */
.m-tabbar   { display: none; }    /* PC：不显示底部 Tab 栏 */

/* ============================================================================
   二、手机端
   ========================================================================== */
@media (max-width: 768px) {

  /* ==========================================================================
     0. 全局兜底：彻底禁止横向滚动
     ========================================================================== */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .wrap { overflow-x: hidden; max-width: 100%; }
  img, svg, video, iframe { max-width: 100%; height: auto; }
  /* 手机没有 hover，tooltip 会溢出屏幕，一律不显示 */
  [data-tooltip]::after { display: none !important; }

  /* ★ 底部留出 Tab 栏高度（含 iOS 手势条安全区），否则页脚被遮挡 */
  body { padding: 10px 10px 120px !important; }

  /* ==========================================================================
     1. 顶栏
     ========================================================================== */
  .topbar {
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 10px 12px !important;
    border-radius: 12px;
    margin-bottom: 10px !important;
  }
  .topbar a.logo { height: 34px !important; gap: 7px !important; flex: 0 0 auto; }
  .topbar a.logo img { height: 22px !important; width: 22px !important; }
  .topbar a.logo .logo-text { font-size: 18px !important; }
  .topbar .right { gap: 8px !important; margin-left: auto; }
  .topbar .right > a { font-size: 13px !important; }
  .user-btn { padding: 7px 11px !important; font-size: 13px !important; }

  /* ==========================================================================
     2. 布局
     ========================================================================== */
  .layout {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  /* ---------- 2-1. 「☰ 页面菜单」按钮 ---------- */
  .m-menu-btn {
    display: flex !important;
    align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 12px 16px;
    margin: 0 0 8px;
    border: 0;
    border-radius: 12px;
    background: #4b5563;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  }
  .m-menu-btn:active { background: #374151; }
  .m-menu-btn .arrow { margin-left: 4px; font-size: 12px; opacity: .75; transition: transform .2s; }
  .m-menu-btn.open .arrow { transform: rotate(180deg); }

  /* ---------- 2-2. 侧栏：默认收起，点按钮展开成竖向列表 ---------- */
  .sidebar {
    display: none !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 2px !important;
    overflow: visible !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }
  .sidebar.show { display: flex !important; }

  /* 子菜单正常显示（不再拍平） */
  .sidebar .submenu { display: block !important; padding: 2px 0 6px !important; }

  .sidebar > a,
  .sidebar .submenu a {
    flex: none !important;
    display: block !important;
    width: 100%;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.4;
    white-space: normal;
    background: transparent;
  }
  .sidebar .submenu a { padding: 10px 16px 10px 34px !important; font-size: 13px !important; }

  .sidebar > a.active,
  .sidebar .submenu a.active {
    background: #00AA88 !important;
    color: #fff !important;
    font-weight: 600;
  }

  /* 顶部「个人中心」头像块 */
  .sidebar > a.user-block {
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 8px !important;
    background: transparent !important;
  }
  .sidebar .user-avatar {
    height: auto !important;
    padding: 3px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    margin: 0 !important;
  }
  .sidebar .user-name { display: inline !important; font-size: 12px !important; color: #cbd5e1; }

  /* ==========================================================================
     3. 内容区
     ========================================================================== */
  .content {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
  }
  .content h1 { font-size: 19px !important; margin-bottom: 14px !important; }

  /* ==========================================================================
     4. 网格一律单列（原来 minmax(320px) 会撑破屏幕）
     ========================================================================== */
  .ov-cards,
  .rec-grid,
  .sec-cards,
  .quick-cards,
  .stats,
  .adv-pledge,
  .ab-pledge,
  .ab-grid,
  .ct-grid,
  .ct-sla { grid-template-columns: 1fr !important; }

  /* ==========================================================================
     5. 表格：横向滑动，不撑破页面
     ========================================================================== */
  .content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ==========================================================================
     6. 表单控件 16px，防 iOS 聚焦放大
     ========================================================================== */
  input, textarea, select { font-size: 16px !important; }

  /* ==========================================================================
     7. 按钮触摸区域
     ========================================================================== */
  .btn, .btn-primary, .btn-danger { min-height: 40px; padding: 10px 16px !important; }
  .btn-sm { min-height: 34px; padding: 7px 12px !important; font-size: 13px !important; }

  /* ==========================================================================
     8. 页脚
     ========================================================================== */
  .site-footer {
    margin-top: 16px !important;
    padding: 14px 12px !important;
    border-radius: 12px;
  }
  .site-footer-inner { font-size: 12.5px !important; line-height: 2 !important; }
  .site-footer .sep { display: none !important; }
  .site-footer-inner a { display: inline-block; margin: 2px 8px; }

  /* ==========================================================================
     9. 弹窗
     ========================================================================== */
  .mask {
    padding: 8px !important;
    align-items: flex-start !important;
    padding-top: 10px !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal,
  .modal.wide,
  .modal.xwide {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: 88vh;
    padding: 14px 16px !important;
    margin: 0 auto;
  }
  .modal * { min-width: 0; }

  /* ==========================================================================
     10. 底部 Tab 栏
     ========================================================================== */
  .m-tabbar {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: var(--card, #fff);
    border-top: 1px solid var(--line, #e5e6eb);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -3px 14px rgba(0, 0, 0, .10);
  }
  .m-tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 0;
    color: #8a9099;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.2;
  }
  .m-tab span { font-size: 21px; line-height: 1; }
  .m-tab.active { color: #00AA88; }
  .m-tab:active { background: rgba(0, 170, 136, .08); }

  /* ==========================================================================
     11. 信息页内容兜底
     ========================================================================== */
  .adv-page, .about-page, .contact-page { font-size: 14.5px; }
  .adv-page .adv-card,
  .about-page .ab-card,
  .contact-page .ct-panel { padding: 16px 14px !important; }
}