/* ===========================================================
   迅猛龙 Velociraptor · 移动端适配
   抽屉用内联 style 控制（mobile.js 驱动），CSS 只负责其余排版
   =========================================================== */

/* ── 侧栏 logo 竖版组合 ── */
.brand .raptor {
  display: block;
  width: 108px;
  height: auto;
  margin-bottom: 13px;
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* 顶栏 logo（只恐龙） */
.head-logo {
  height: 34px;
  width: auto;
  opacity: .9;
  flex: none;
}

header .divider { margin: 0 13px; }

/* 驾驶舱横幅 */
.dash-logo img {
  height: 62px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: .96;
  position: relative;
  z-index: 1;
}

/* ── 汉堡按钮（移动端） ── */
#burger {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-right: 10px;
}

#burger span {
  display: block;
  width: 17px;
  height: 1.8px;
  background: var(--ink);
  position: relative;
  transition: background .15s;
}

#burger span::before,
#burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.8px;
  background: var(--ink);
  transition: transform .22s;
}

#burger span::before { top: -5.5px; }
#burger span::after { top: 5.5px; }

body.nav-open #burger span { background: transparent; }
body.nav-open #burger span::before { transform: translateY(5.5px) rotate(45deg); }
body.nav-open #burger span::after { transform: translateY(-5.5px) rotate(-45deg); }

/* 遮罩 */
#scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 40, 50, .46);
  z-index: 88;
  backdrop-filter: blur(2px);
}

body.nav-open #scrim { display: block; }

/* ── 平板 ── */
@media (max-width: 1024px) {
  .brand .raptor { width: 92px; }
  .dash-logo img { height: 54px; }
}

/* ── 手机 ── */
@media (max-width: 860px) {
  #burger { display: flex; }

  /* 修复：100vh 在手机浏览器里含地址栏高度，导致 #view 底部被裁掉、滑不到底 */
  html, body { height: 100%; overflow: hidden; }
  #app {
    height: 100vh;
    height: 100dvh;          /* 支持 dvh 的浏览器优先 */
    overflow: hidden;
  }
  main { min-height: 0; overflow: hidden; }

  /* 真正的滚动容器：#view 必须能惯性滑动 */
  #view {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  /* 顶栏紧凑 + 吸顶 */
  /* 修复：父级 main 是 overflow:hidden 的 flex 容器，sticky 不生效且会干扰滚动
     改成 flex 固定高度的顶部条（不参与滚动） */
  header {
    padding: 11px 14px;
    height: auto;
    min-height: 54px;
    position: relative;
    z-index: 40;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    gap: 8px;
    flex: none;
  }

  header h2 { font-size: 16px !important; white-space: nowrap; }

  header .sub {
    font-size: 11px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header .stamp { display: none; }
  .head-logo { height: 26px; }
  header .divider { height: 18px; margin: 0 9px; }

  #view { padding: 14px 12px 60px !important; }

  /* 栅格塌成单列 */
  .grid.g2, .grid.g3, .grid.g4 {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  /* 卡片内边距收紧 */
  .card-b { padding: 13px !important; }
  .card-h { padding: 12px 13px !important; flex-wrap: wrap; gap: 5px; }
  .card-h h3 { font-size: 13.5px !important; }

  /* 表格横向滚动 */
  .card-b.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 540px; }
  .mini-t { min-width: 0; }

  .stat .v { font-size: 21px !important; }

  /* SKU 两列 */
  .sku-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .sku-name { font-size: 12px; min-height: 34px; }
  .sku-price .ret { font-size: 15px; }

  /* 工具栏堆叠 */
  .toolbar {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .toolbar .seg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .toolbar .seg button { flex: none; white-space: nowrap; }
  .toolbar .spacer { display: none; }
  .srch { width: 100% !important; box-sizing: border-box; }

  /* 驾驶舱横幅 */
  .dash-logo {
    padding: 15px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 13px !important;
    border-radius: 10px !important;
  }

  .dash-logo img { height: 44px !important; }
  .dash-logo .dl-t { font-size: 14px !important; }
  .dash-logo .dl-s { font-size: 10.5px !important; line-height: 1.5; }

  /* 合同 */
  .con-b { padding-left: 18px !important; padding-right: 14px !important; }
  .con-h { padding: 10px 14px !important; }
  .con-h .cn { width: 36px; font-size: 10.5px; }

  /* 时间轴两列 */
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 大图弹层 */
  .img-modal { padding: 12px; }
  .img-modal img { max-width: 100%; max-height: 80vh; }

  .rev-tbl, .rev-tbl td { font-size: 11px; }
}

/* ── 小屏 ── */
@media (max-width: 400px) {
  .sku-grid { grid-template-columns: 1fr !important; }
  .timeline { grid-template-columns: 1fr !important; }
  header h2 { font-size: 15px !important; }
  .dash-logo img { height: 36px !important; }
  .dash-logo .dl-s { display: none; }
}

/* ── 触屏 ── */
@media (hover: none) {
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
  .ed-cell { cursor: pointer; }
  .sku-card:hover { transform: none; box-shadow: none; }
  .sku-card:hover .sku-img img { transform: none; }
}

/* iOS 安全区 */
@supports (padding: env(safe-area-inset-bottom)) {
  #view { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }
}


/* ── 抽屉内部滚动（aside 移出 #app 后由自己承载滚动） ── */
@media (max-width: 860px) {
  aside > .brand { flex: none; }
  aside > nav,
  aside > nav#nav {
    flex: 1 1 auto !important;
    min-height: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}