/**
 * h5-adaptive.css —— 全设备适配热补丁（2026-09-14）
 * 覆盖范围：
 *   1. iOS 刘海屏/灵动岛/刘海安全区（env(safe-area-inset-*)），同时兼容安卓挖孔屏
 *   2. iPad / 折叠屏宽屏断点（768px / 1024px），头部与按钮锁定尺寸防放大变形
 *   3. 深色模式跟随系统（页面级背景/文字）
 *   4. ProMotion 120Hz 渲染优化 + 系统字体放大防护
 * 前提：index.html 的 viewport 已含 viewport-fit=cover（已存在）
 * 说明：本文件直接补丁编译产物；源码工程已同步修改（wt-header.vue / adaptive.scss / safe-area.js），
 *       下次用 HBuilderX 重新编译后本文件可保留（选择器一致，不冲突）。
 */

/* ================= 1. 安全区适配（优先级高于编译产物里的内联样式） ================= */

/* 顶部状态栏 / 刘海 / 灵动岛：头部高度 = 安全区顶部 + 44px 内容区
   普通浏览器 env()=0 时高度仍为 44px，观感与原来完全一致；
   全屏 PWA / 添加到主屏幕 / App WebView 内自动抬高，按钮不被遮挡 */
.header-box {
  height: calc(env(safe-area-inset-top, 0px) + 44px) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  /* 注意：原生 CSS 不支持 rpx，基础内边距按 375px 视口下 30rpx≈15px 换算并与安全区相加 */
  padding-right: calc(15px + env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* 头部占位元素同步抬高，防止页面内容钻到头部底下 */
.space {
  height: calc(env(safe-area-inset-top, 0px) + 44px) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  box-sizing: border-box !important;
}

/* 左侧抽屉导航：从安全区下方开始展开 */
.draw-wrap {
  top: env(safe-area-inset-top, 0px) !important;
}

/* 底部操作条 / Home Indicator 留白（iOS 全面屏、安卓手势条通用） */
.uni-tabbar,
.uni-tabbar-bottom,
tabbar,
.uni-page-footer,
.tabbar-safe {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom) !important;
  box-sizing: border-box !important;
}

/* 横屏时右侧圆角裁切防护（按钮不被手机圆角切掉） */
.right1 {
  margin-right: max(0px, env(safe-area-inset-right, 0px));
  line-height: 1.2;
  white-space: nowrap;
}

/* ================= 2. ProMotion 120Hz 渲染优化 =================
   动画只走 transform/opacity 合成层，减少掉帧 */
.draw-wrap,
.shadow,
.uni-popup,
.uni-mask {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.uni-scroll-view,
.uni-scrollbar {
  -webkit-overflow-scrolling: touch;
}

/* ================= 3. 系统字体放大防护（安卓字体 110%~200% 不撑爆布局） ================= */
.text-wrap {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.header-box .title,
.header-box .right1 {
  overflow: visible;
}

/* ================= 4. 宽屏断点：iPad / 折叠屏展开 / 横屏 ================= */

@media screen and (min-width: 768px) {
  /* --- 头部与按钮锁定 px 尺寸：rpx 在大屏等比放大导致按钮巨大化，这里固定 --- */
  .header-box .img {
    width: 26px !important;
    height: 26px !important;
  }
  .header-box .title {
    font-size: 19px !important;
  }
  .header-box .right1 {
    height: 44px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    border-radius: 22px !important;
  }
  .header-box .right .img {
    width: 26px !important;
    height: 26px !important;
    margin-left: 18px !important;
  }
  .draw-wrap {
    width: 300px !important;
  }

  /* --- 内容区限宽居中，防止 21:9 / iPad 全屏拉伸变形 ---
     选择器必须与 h5-fullscreen-layout.css 的
     "uni-page-body > .container, uni-page-body > uni-view.container"(特异性更高) 对齐，
     否则 !important 同权重下按特异性比较会输，限宽不生效（二次验证实测发现）。
     若某页面视觉异常，注释掉 .container/.containers 一组即可快速回退。 */
  uni-page-body > .container,
  uni-page-body > uni-view.container,
  .container,
  .containers,
  uni-page-body > .containers {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* fixed 头部与居中内容对齐 */
  .header-box {
    max-width: 720px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media screen and (min-width: 1024px) {
  uni-page-body > .container,
  uni-page-body > uni-view.container,
  .container,
  .containers,
  uni-page-body > .containers {
    max-width: 1100px !important;
  }
  .header-box {
    max-width: 1100px !important;
  }
}

/* ================= 5. 深色模式（跟随系统自动切换 · 全站深色化 v2） =================
   分层策略：
   ① 页面底色与正文色（html/body/uni-page-body）
   ② 主容器 .container/.containers 深色底 + 背景图 multiply 压暗（消除浅紫渐变割裂）
   ③ 卡片/输入框/弹窗/抽屉：浅色载体转深蓝灰 #1a2136
   ④ 文字打捞：仅针对审计发现的深色文字语义类与卡片内裸文本（排除 .color-* 品牌色）
   ⑤ 图片上的文字（banner/swiper）保持原深字，不参与打捞 */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
  /* --- ① 页面底色与正文色 --- */
  html,
  body,
  #app,
  uni-app,
  uni-page,
  uni-page-wrapper,
  uni-page-body {
    background-color: #0e1424 !important;
  }
  body,
  uni-page-body {
    color: #e8eaf6 !important;
  }
  /* --- ② 主容器深色化：背景图与深色底 multiply 混合压暗 --- */
  .container,
  .containers,
  uni-page-body > .container,
  uni-page-body > uni-view.container {
    background-color: #0e1424 !important;
    background-blend-mode: multiply !important;
  }
  /* --- ③ 卡片类载体转深 --- */
  .card-box,
  .new-user-box,
  .data-card,
  .list-item,
  .stat-card,
  .serve-box,
  .tab-bar,
  .tab-item:not(.active),
  .input-wrap,
  .dialog-item,
  .data-item,
  .tui-modal-box,
  .modal-btns,
  .draw-wrap {
    background-color: #1a2136 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }
  /* --- ④ 文字打捞 --- */
  /* 4a 显式深色工具类 */
  .color-black {
    color: #e8eaf6 !important;
  }
  .color-gray {
    color: #9aa3bd !important;
  }
  /* .color-title 是 #222 渐变文字（background-clip:text），深色下换浅色渐变 */
  .color-title {
    background: linear-gradient(270deg, #e8eaf6 50%, #e8eaf6) !important;
  }
  /* 4b 语义文本类（来自九大板块审计数据） */
  .title,
  .name,
  .label,
  .desc,
  .dialog-label,
  .dialog-value,
  .tab-text,
  .data-label,
  .data-value,
  .data-info,
  .data-icon,
  .serve-label,
  .serve-title,
  .serve-info,
  .modal-title,
  .modal-content,
  .no-message,
  .info-wrap,
  .hot-text,
  .wd-full {
    color: #e8eaf6 !important;
  }
  /* 4c 卡片内裸文本打捞：排除 .color-* 品牌色（红涨绿跌/高亮等） */
  .card-box span:not([class*="color-"]),
  .card-box div:not([class*="color-"]),
  .data-card span:not([class*="color-"]),
  .data-card div:not([class*="color-"]),
  .list-item span:not([class*="color-"]),
  .list-item div:not([class*="color-"]),
  .stat-card span:not([class*="color-"]),
  .stat-card div:not([class*="color-"]),
  .serve-box span:not([class*="color-"]),
  .serve-box div:not([class*="color-"]),
  .dialog-item span,
  .dialog-item div,
  .tui-modal-box span:not([class*="color-"]),
  .tui-modal-box div:not([class*="color-"]) {
    color: #e8eaf6 !important;
  }
  /* 4d 输入框：深底浅字 */
  .input-wrap input,
  uni-input-input,
  .input {
    color: #e8eaf6 !important;
    caret-color: #e8eaf6 !important;
  }
  /* 4e 分隔线压暗 */
  .line {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }
  /* 4f 例外保护：banner/轮播图上的文字保持深字（背景图未反转，浅底深字仍可读） */
  .swiper-box .title,
  .swiper-box uni-view,
  .swiper-container .title,
  .new-user-box .title {
    color: #222 !important;
  }
  /* 4g 头部深色化：滚动后 header 会变成品牌浅紫实底，深色下统一压暗为半透明深色 */
  .header-box {
    background: rgba(14, 20, 36, 0.92) !important;
    color: #e8eaf6 !important;
  }
  .header-box .title,
  .header-box .left,
  .header-box .flexa,
  .header-box div {
    color: #e8eaf6 !important;
  }
  /* 汉堡菜单等深色线条图标反色为浅色（真机复核点） */
  .header-box .left .img {
    filter: invert(1) brightness(1.35);
  }
}