/* ==========================================================================
   聚丰商城 · 移动端体验增强 (v303)
   --------------------------------------------------------------------------
   设计原则：
     1. 只做「增强」，不改任何业务逻辑、不改任何结构
     2. 全部规则包在 @media 里 —— 桌面端零影响
     3. 优先级保守：只用类选择器与少量 !important 兜底既有行内样式
     4. 目标是「手机上不挤、不溢出、点得到」，不是重做设计

   覆盖范围：全站（base.html 引入）+ 独立页（mall_index 等自行引入）
   ========================================================================== */

/* ---------- 小屏：手机竖屏 ---------- */
@media (max-width: 768px) {

  /* ===== 1. 全局：防横向溢出、字号触控友好 ===== */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body {
    font-size: 15px;
  }

  /* 长英文/数字/订单号不撑破容器 */
  .table td, .table th, .card-body, .list-group-item {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ===== 2. 顶栏：允许换行，元素不挤压 ===== */
  .top-bar,
  .mobile-topbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .top-bar .logo-text { font-size: 1rem; }

  /* 商城顶部右侧导航：允许换行 + 缩小间距 */
  .right-nav {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .right-nav .login-btn,
  .right-nav .nav-link {
    padding: 5px 12px;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* ===== 3. 表格：横向滚动而非压扁 ===== */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive > .table {
    min-width: 640px;
  }
  /* 没有 .table-responsive 包裹的裸表格，给它自己滚动 */
  .card-body > .table:only-child {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ===== 4. 栅格：单列优先（只作用于本就没有断点的 col-md-*） ===== */
  .row > [class*="col-md-"]:not([class*="col-sm-"]):not([class*="col-lg-"]) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ===== 5. 按钮/表单：触控尺寸达标（≥44px） ===== */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .form-control, .form-select {
    min-height: 44px;
    font-size: 16px; /* iOS 下 <16px 会触发自动放大 */
  }
  textarea.form-control { min-height: 90px; }

  /* ===== 6. 卡片与内边距收紧，换更多可用宽度 ===== */
  .card-body { padding: 0.9rem; }
  .container, .container-fluid { padding-left: 12px; padding-right: 12px; }

  /* ===== 7. 模态框：接近全屏，避免内容被裁 ===== */
  .modal-dialog {
    margin: 0.6rem;
    max-width: calc(100% - 1.2rem);
  }
  .modal-body { max-height: 72vh; overflow-y: auto; }

  /* ===== 8. 分页与操作栏：可横向滑动 ===== */
  .pagination { flex-wrap: wrap; }
  .pagination .page-link { min-width: 40px; min-height: 40px; }

  /* ===== 9. 长表格的固定操作列不遮挡 ===== */
  .table .sticky-action { position: static !important; }

  /* ===== 10. 图片/图表自适应 ===== */
  img:not([class*="icon"]):not([class*="avatar"]):not([class*="logo"]) {
    max-width: 100%;
    height: auto;
  }
  canvas { max-width: 100%; }
}

/* ---------- 超小屏：老机型 / 分屏 ---------- */
@media (max-width: 400px) {
  body { font-size: 14px; }
  .top-bar .logo-text { font-size: 0.95rem; }
  .card-body { padding: 0.75rem; }
  .btn { font-size: 0.86rem; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ---------- PWA 独立窗口：安全区避让（刘海屏/底部横条） ---------- */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* 独立窗口下无需再让出浏览器地址栏高度 */
  .mobile-topbar {
    padding-top: env(safe-area-inset-top);
  }
}

/* ---------- 打印：不打印导航与按钮 ---------- */
@media print {
  .sidebar, .mobile-topbar, .top-bar, .bottom-nav, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; }
}