/*!
 * compat.css — 跨浏览器 / 跨设备兼容层
 * 高效办公平台 · 全站共享
 *
 * 目标基线：
 *   Chrome/Edge 60+、Safari 11+（iOS 11+）、Firefox 60+、
 *   微信内置浏览器（iOS WKWebView / Android X5）、QQ/UC/360 等国产内核
 *
 * 设计原则：
 *   1. 渐进增强——不支持的特性自动降级，绝不阻断主流程
 *   2. 移动优先——小屏适配优先，大屏再增强
 *   3. 性能优先——低端设备主动削减昂贵渲染效果
 */

/* ══════════════════════════════════════════════════════════
   1. 视口高度：解决移动端浏览器地址栏导致的 100vh 跳动
      —— 优先 dvh，回退 --vh（由 compat.js 用 JS 计算真实视口）
   ══════════════════════════════════════════════════════════ */
:root {
  --vh: 1vh;              /* JS 兜底值，未执行时等价于 1vh */
  --safe-bottom: 0px;     /* 刘海屏底部安全区 */
  --safe-top: 0px;
}

/* iPhone 刘海屏 / 手势条安全区（需 viewport-fit=cover 配合） */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :root {
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-top: env(safe-area-inset-top);
  }
}

.min-vh-100,
.vh-100 {
  min-height: 100vh;            /* 老浏览器兜底 */
  min-height: calc(var(--vh, 1vh) * 100);
}

@supports (height: 100dvh) {
  .min-vh-100,
  .vh-100 {
    min-height: 100dvh;         /* 现代浏览器：动态视口，地址栏收缩不跳动 */
  }
}

/* ══════════════════════════════════════════════════════════
   2. 厂商前缀补全（Safari / 旧版 WebKit 内核必需）
   ══════════════════════════════════════════════════════════ */

/* 毛玻璃：Safari 仅识别 -webkit- 前缀 */
.backdrop-blur,
.modal-backdrop.show,
.offcanvas-backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 粘性定位：旧 Safari / UC 内核需要前缀 */
.sticky-top,
.position-sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* 弹性滚动惯性：iOS 老版本 */
.table-responsive,
.overflow-auto,
.offcanvas-body,
.modal-body {
  -webkit-overflow-scrolling: touch;
}

/* 文本溢出省略：多行 */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* iOS 点击高亮去除 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ══════════════════════════════════════════════════════════
   3. Flex gap 降级（Safari 14.1 以下不支持 flex 布局的 gap）
      —— 用 @supports 检测，不支持时改回 margin 方案
   ══════════════════════════════════════════════════════════ */
@supports not (gap: 1px) {
  .d-flex[class*="gap-"],
  .d-inline-flex[class*="gap-"],
  .status-pill {
    margin-right: -4px;
  }
  .d-flex[class*="gap-"] > *,
  .d-inline-flex[class*="gap-"] > *,
  .status-pill > * {
    margin-right: 4px;
  }
}

/* status-pill 内部图标间距：不依赖 gap 的稳妥写法 */
.status-pill > i,
.status-pill > svg {
  margin-right: .3em;
  flex: none;                 /* 防止图标被压缩 */
}

/* ══════════════════════════════════════════════════════════
   4. 移动端触摸体验
   ══════════════════════════════════════════════════════════ */

/* iOS 输入框聚焦时若字号 <16px 会强制放大页面，导致布局错乱 */
@media (max-width: 991.98px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  input.form-control-sm,
  select.form-control-sm {
    font-size: 16px !important;
  }
}

/* 触摸目标最小 44×44（Apple HIG / WCAG 2.5.5 建议） */
@media (pointer: coarse) {
  .btn,
  .nav-link,
  .page-link,
  .form-check-input,
  .list-group-item-action {
    min-height: 44px;
  }
  .btn-sm,
  .btn-close {
    min-height: 36px;
  }
  .form-check-input {
    min-width: 44px;
    min-height: 44px;
  }
  /* 小尺寸按钮组在触屏下适当增大点击区 */
  .btn-group-sm > .btn {
    min-height: 36px;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
}

/* ══════════════════════════════════════════════════════════
   5. 媒体元素自适应（防止图片/视频撑破布局、减少 CLS 抖动）
   ══════════════════════════════════════════════════════════ */
img,
svg,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* 未指定尺寸的图片在加载完成前预留空间，避免布局跳动 */
img:not([width]):not([height]) {
  aspect-ratio: auto 4 / 3;   /* 不支持 aspect-ratio 的浏览器自动忽略 */
}

/* 报修图片统一约束 */
.repair-img,
.img-preview {
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   6. 文本排版：中英混排换行、长串数字/URL 断行
   ══════════════════════════════════════════════════════════ */
body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;   /* 横屏时禁止 iOS 自动放大字号 */
  text-size-adjust: 100%;
}

/* 长单号、手机号、URL 强制断行，避免撑破卡片 */
.ticket-no,
.order-no,
.phone,
.badge,
code,
pre {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 表格内容不换行时可横向滚动，不撑破容器 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.table td,
.table th {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ══════════════════════════════════════════════════════════
   7. 横向溢出总兜底（任何未预料的宽元素都不会导致整页左右滑动）
   ══════════════════════════════════════════════════════════ */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   8. 低端设备 / 省电模式：主动削减昂贵渲染（性能优先）
   ══════════════════════════════════════════════════════════ */

/* 用户开启「减少动态效果」——关闭过渡与动画（无障碍 + 省电） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 支持但未启用减少动效时，统一用平滑滚动 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 低端设备（内存小/核心少）或不支持 backdrop-filter 时，
   关掉毛玻璃与阴影等昂贵绘制，改用纯色 */
@media (max-width: 576px) {
  .backdrop-blur,
  .offcanvas-backdrop,
  .modal-backdrop.show {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 强制省电/低性能模式：添加 .perf-lite 到 body 可手动开启 */
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

/* GPU 合成提示：仅对确实会动的元素开启，避免滥用耗尽显存 */
.offcanvas,
.modal,
.dropdown-menu,
.collapsing {
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════
   9. 滚动条美化（WebKit + Firefox 双标准）
   ══════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;                     /* Firefox */
  scrollbar-color: rgba(100, 116, 139, .4) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, .35);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, .6);
}

/* ══════════════════════════════════════════════════════════
   10. 打印适配（工单/报表可直接打印或导出 PDF）
   ══════════════════════════════════════════════════════════ */
@media print {
  .no-print,
  .navbar,
  .offcanvas,
  .btn,
  .pagination,
  footer,
  .alert-dismissible .btn-close {
    display: none !important;
  }

  body {
    background: #fff !important;
    font-size: 12pt;
  }

  .card,
  .table {
    box-shadow: none !important;
    border: 1px solid #dee2e6 !important;
  }

  /* 打印时表格不分页断裂 */
  .table-responsive {
    overflow: visible !important;
  }

  tr,
  td,
  th {
    page-break-inside: avoid;
  }

  a[href]::after {
    content: "";   /* 不打印链接地址，保持整洁 */
  }

  @page {
    margin: 12mm;
  }
}

/* ══════════════════════════════════════════════════════════
   11. 暗色模式友好（跟随系统，不强制改变品牌色）
   ══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* 仅对未显式设置背景的原生控件做适配，避免影响品牌识别 */
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  select option {
    color-scheme: dark;
  }
}

/* ══════════════════════════════════════════════════════════
   12. 断网 / 资源未加载时的降级（Bootstrap 失效也不至于不可用）
   ══════════════════════════════════════════════════════════ */
/* 若 Bootstrap 未能加载，保证基础可读性与可操作性 */
body:not(.bs-loaded) .container,
body:not(.bs-loaded) .container-fluid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ══════════════════════════════════════════════════════════
   13. 小屏精细化（≤360px，如 iPhone SE 一代 / 老安卓）
   ══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .card-body {
    padding: .85rem;
  }

  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.2rem; }

  .btn {
    padding: .45rem .7rem;
    font-size: .9rem;
  }

  /* 超小屏下表格进一步压缩 */
  .table td,
  .table th {
    padding: .4rem .35rem;
    font-size: .8rem;
  }
}

/* ══════════════════════════════════════════════════════════
   14. 大屏增强（≥1400px，避免内容拉伸过宽影响阅读）
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .container,
  .container-fluid {
    max-width: 1440px;
  }
}

/* ══════════════════════════════════════════════════════════
   15. 横屏适配（手机横屏时压缩纵向占位）
   ══════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  .min-vh-100,
  .vh-100 {
    min-height: auto;
  }

  .py-5,
  .my-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}