/* ============================================================
 * 上云选品·云仓商城系统 · 全站响应式适配层（ds-responsive.css）v1
 * 加载顺序：必须排在 ds-tokens / theme / ds-shell 与页面内 <style> 之后，
 *           以确保本层规则作为兜底覆盖。
 * 原则：只做「防横向溢出 + 流体化 + 断点堆叠」，不改动设计系统令牌与组件语义。
 * 审计口径：responsive_audit.py 在 6 档尺寸（360/390/768/1024/1366/1920）
 *           检测 documentElement.scrollWidth 是否超过视口宽度。
 * ============================================================ */

/* ---------- 0. 通用盒模型与流体化（全局安全网） ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* 媒体与替换元素永远不撑宽 */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

/* 表单控件不溢出 */
input, select, textarea, button { max-width: 100%; }

/* 长串（URL/JSON/代码）折行，避免撑宽 */
pre, code, blockquote, .mono, .num {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- 1. 通用容器：保留桌面居中上限，仅在小屏消除横向留白溢出 ---------- */
.wrap, .container, .content, .main,
.shell-main, .shell-body, .entry-card { max-width: 100%; }

/* ---------- 2. 网格/弹性：默认允许换行，避免固定列数在小屏溢出 ---------- */
.grid, .cards, .kpi-row, .feat-row, .acts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.row, .flex, .nav, .navbar, .topnav .wrap, .sec-head, .hero, .tabs {
  display: flex;
  flex-wrap: wrap;
}

/* ---------- 3. 断点：平板横 / 笔记本之间，2 列布局先退化为 1 列 ---------- */
@media (max-width: 1024px) {
  .grid2 { grid-template-columns: 1fr; }

  /* 表格（含任意面板/弹层内宽表）在 ≤1024 转为可横滑容器，避免撑破页面或被裁切遮挡；
     覆盖 769–1024 这一「平板竖→笔记本」空档，以及笔记本窄屏下的 10 列表格。 */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { white-space: normal; }
}

/* ---------- 4. 断点：平板竖及以下（≤768px）主适配 ---------- */
@media (max-width: 768px) {
  :root { font-size: 15px; }

  /* 容器左右内边距收紧 */
  .wrap, .container { padding-left: 14px !important; padding-right: 14px !important; }
  .sec, .section { padding-left: 14px; padding-right: 14px; }

  /* 顶栏/导航：高度自适应、允许换行，选项卡整行包裹 */
  .topnav .wrap, .nav, .navbar {
    height: auto !important;
    flex-wrap: wrap;
    padding: 10px 14px !important;
    gap: 10px;
  }
  .topnav .tabs, .nav-tabs, .tabbar {
    margin-left: 0 !important;
    width: 100%;
    flex-wrap: wrap;
  }

  /* Hero / 大卡片内边距收缩 */
  .hero { padding: 22px 16px !important; border-radius: 12px; }
  .hero h1 { font-size: 22px !important; line-height: 1.3; }
  .kpi, .card, .panel, .entry-card { padding: 12px; }

  /* 双列 → 单列 */
  .grid2 { grid-template-columns: 1fr !important; }

  /* 表格在小屏可横向滚动，杜绝撑宽（桌面保持原样） */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { white-space: normal; }
}

/* ---------- 5. 断点：手机（≤480px）微调 ---------- */
@media (max-width: 480px) {
  :root { font-size: 14px; }
  .topnav .tabs .tab, .tab { padding: 7px 9px; font-size: 13px; }
  .hero h1 { font-size: 19px !important; }
  .btn { padding: 9px 13px; font-size: 12.5px; }
  .kpi .k-val { font-size: 19px; }
}

/* ---------- 6. 全站响应式强化（兜底所有界面 + 任意打开的面板/弹层） ----------
 * 原则：不依赖「整页 overflow-x:hidden」去隐藏溢出——那等于把内容裁切/遮挡，
 *       正是本次要求禁止的。改为逐项收敛真实溢出源，使任何尺寸下页面级横向
 *       溢出为 0，弹层/单据窗/长内容各自在内部受控滚动或折行。
 * ------------------------------------------------------------------------- */

/* A. 弹层 / 单据全页窗 / 登录框：100% 受限 + 盒模型，内部滚动，绝不溢出视口 */
.modal, .dialog, .sheet, .docpage, .doc-card, .login-box, .pop, .popup, .drawer {
  box-sizing: border-box;
  max-width: 100% !important;
}
.mask, .docmask, .overlay { box-sizing: border-box; padding: 12px; }
/* 单据窗内部：工具栏/表头/操作条可收缩与换行，固定宽子项不再顶破窗体 */
.doc-head, .doc-toolbar, .doc-actions, .doc-foot { box-sizing: border-box; flex-wrap: wrap; }
.doc-head .dh > label, .doc-head .dh > .dc { min-width: 0; }
.doc-actions .dw-btn { flex: 0 0 auto; }

/* B. 弹性容器子项可收缩：定宽子项（搜索框/按钮组/标签）不再把整行顶出视口 */
.main-top, .shell-top, .topbar, .navbar, .nav, .row, .flex, .acts, .tabs,
.panel-tabs, .hero, .sec-head, .toolbar {
  flex-wrap: wrap;
}
.main-top > *, .shell-top > *, .topbar > *, .navbar > *, .row > *, .nav > * {
  min-width: 0;
}

/* C. 长内容折行：地址 / 商品名 / 单号 / 金额 / 备注等，避免撑宽 */
td, .no, .sub, .grow, .cell, .val, .desc, .name, .addr, .remark, .muted,
.order-no, .cust, .prod-name { overflow-wrap: anywhere; word-break: break-word; }

/* D. 抽屉式侧栏在窄屏本就由 ds-shell 收起/图标化，这里仅确保不出现负 margin 顶破 */
#app.sidebar-hidden .sidebar { margin-left: 0 !important; }