/* =============================================================================
 * 响应式：确保任何屏幕宽度下**都不需要用户左右拉动**。
 *
 * 这里是三个**可复用模式**的唯一实现。以后写新页面直接套，不要各自发明。
 * 护栏：apps/common/tests_responsive.py（模板反模式 lint）+ scripts/check_responsive.py（真实浏览器检测）。
 *
 * ⚠ 为什么不直接给 body 加 `overflow-x: hidden` 了事：
 *   那只是把溢出的内容**裁掉**——用户确实不用拉了，但内容真的被切没了；还会连带破坏
 *   `position: sticky`（顶栏）。而且它会让护栏失效（scrollWidth 被裁剪后测不出来）。
 *   所以：**先修根因**，这里只做「让元素能收缩/能换行」的规则，不做遮盖。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 模式 0：flex 收缩纪律
 * flex item 默认 min-width:auto —— 里面有一个不可断行的长串（手机号、订单号、
 * 统一社会信用代码）就撑爆整行。这是最隐蔽的溢出源。
 * ------------------------------------------------------------------------- */
.app-navbar,
.ap-card,
.ap-page,
.pcoded-content {
  min-width: 0;
}
.ap-card .d-flex > *,
.ap-page .d-flex > * {
  min-width: 0;                /* 允许被压缩，而不是把父容器撑宽 */
}

/* 长串（订单号 / 统一社会信用代码 / 银行账号 / 文件路径 / 邮箱）必须能断行 */
.ap-break,
.ap-table .ap-break {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * 模式 1（用户端）：窄屏**卡片化表格** —— 每一行变成一张卡片，字段竖着排。
 * 完全不需要左右拉动（`.table-responsive` 只是页面不滚，表格内部还是要拉）。
 *
 * 用法：<table class="ap-table ap-stack">，每个 <td> 加 data-label="列名"。
 * 表头在窄屏隐藏，列名由 td::before 从 data-label 取 —— 无需重复写一遍 HTML。
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  table.ap-stack {
    display: block;
  }
  table.ap-stack thead {
    display: none;                       /* 列名改由每个单元格自己带 */
  }
  table.ap-stack tbody,
  table.ap-stack tr,
  table.ap-stack td {
    display: block;
    width: auto;
  }
  table.ap-stack tbody tr {
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fff;
  }
  table.ap-stack tbody tr:hover {
    background: #fff;
  }
  table.ap-stack tbody td {
    border: none;
    border-top: 1px solid #f3f3f6;
    padding: 8px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    /* 卡片化后，原来为了不换行而设的截断/nowrap 一律作废 —— 让它自然换行 */
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  table.ap-stack tbody td:first-child {
    border-top: none;
  }
  table.ap-stack tbody td::before {
    content: attr(data-label);
    color: #86868b;
    font-size: .78rem;
    font-weight: 600;
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  table.ap-stack tbody td:empty {
    display: none;                       /* 空单元格不占一行 */
  }
  /* 没有 data-label 的单元格（操作按钮列）：占整行、不显示列名 */
  table.ap-stack tbody td:not([data-label])::before {
    content: none;
  }
  table.ap-stack tbody td:not([data-label]) {
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 卡片化后表格不再需要横向滚动容器 */
  .table-responsive:has(> table.ap-stack) {
    overflow-x: visible;
  }
}

/* ---------------------------------------------------------------------------
 * 模式 2（后台）：表格保留**横向滚动容器**（管理员基本在桌面用）。
 * 页面本身绝不横滚，只有表格内部可滑。
 * ------------------------------------------------------------------------- */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
 * 模式 3：页头 / 工具条一律允许换行
 * `d-flex justify-content-between`（标题 + 按钮）在窄屏是经典溢出源。
 * ------------------------------------------------------------------------- */
.ap-page > .d-flex,
.ap-card-h {
  flex-wrap: wrap;
  gap: .5rem;
}

/* 窄屏收紧内边距（后台 .pcoded-content 写死 30px，手机上直接吃掉 60px） */
@media (max-width: 767.98px) {
  .pcoded-content {
    padding: 16px 12px !important;
  }
  .ap-main,
  .app-main {
    padding-left: 14px;
    padding-right: 14px;
  }
  .ap-card {
    padding: 16px 14px;
    border-radius: 16px;
  }
  .ap-h1 {
    font-size: 1.4rem;
  }
}

/* 图片永不撑破容器 */
img {
  max-width: 100%;
}
.app-brand img {
  max-width: 100%;
  height: auto;
  max-height: 44px;
}