/* ================================================================
 * iPad / 触屏 通用适配（全站引入，放在各页样式之后覆盖）
 * 只放"跨页通用"的触控规则；每页的 100dvh / 断点在各页自身处理。
 * ================================================================ */

/* 1) 消除 iOS 点击灰色高亮块；可点元素去 300ms 双击延迟 */
* { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label,
.chip, .fchip, .ah-chip, .card, .ex-card, .zoomctl button,
[role="button"], [onclick] { touch-action: manipulation; }

/* 2) 自研手势容器：手势归 App，别被 Safari 当作整页缩放/滚动
 *    portal 地图 #mapWrap；三维大屏 #stage 及其 canvas */
#mapWrap, #stage, #stage canvas {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

/* 3) 触屏专属（手指操作）：放大关键触控目标 + 点按反馈 */
@media (pointer: coarse) {
  /* 触控目标 ≥ 44pt */
  .zoomctl button { width: 44px; height: 44px; font-size: 21px; }
  .fchip { min-height: 40px; }
  .ah-chip { min-height: 44px; padding: 10px 14px; }
  #backPortal { padding: 9px 15px; }
  .eye { padding: 13px; margin: -13px; }   /* 密码显隐图标：18px→44px 可点热区，位置不变 */

  /* 点按反馈（品牌青，替代默认蓝框） */
  .fchip:active, .card:active, .ah-chip:active, .ex-card:active,
  .zoomctl button:active, .btn:active, button:active { transform: scale(.96); }

  /* 桌面靠 hover 才显的"进入"箭头，触屏改常显 */
  .card .go { opacity: 1 !important; }

  /* 长按不弹系统选择/拷贝菜单 */
  .card, .ex-card, .fchip, .node-label, .brand, h1 { -webkit-touch-callout: none; }
}

/* 4) 全面屏 iPad 安全区（圆角/底部指示条）——保守内缩，不改动布局主体 */
@supports (padding: max(0px)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* 5) 深色兜底（全局生效，不限全屏模式）：任何露出处——状态栏区/底部指示条/overscroll——
 *    都铺站点深色，杜绝白条/白边。html 在 body 之后，桌面正常视图不受影响。 */
html { background: #060d18; }

/* 添加到主屏 · 全屏 App（black-translucent 状态栏，内容延伸到顶部） */
@media (display-mode: standalone) {
  html, body { background: #060d18; }
  /* portal 顶栏：加高一个安全区 + 不透明深色底 → 状态栏区变成干净的深色顶栏，不再透出较亮的地图底、不显空档 */
  header {
    padding-top: env(safe-area-inset-top) !important;
    min-height: calc(76px + env(safe-area-inset-top));
    height: auto !important;
    background: #0b1626 !important;
  }
  main { height: calc(100dvh - 76px - env(safe-area-inset-top)) !important; }
  /* 三维大屏(home)：topbar 下移一个安全区避开状态栏；两侧面板的 top 由 home.js 按顶栏
   * 实际底边动态定位(见 fitPanels)，不管顶栏换行/安全区都不与 KPI 行重叠，故此处不固定 */
  body:has(#stage) .topbar { top: calc(18px + env(safe-area-inset-top)) !important; padding-top: 0 !important; }
  /* 底部内容避让指示条 */
  .side, .list { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ================================================================
 * 二级 ECharts 大屏页 · iPad 适配（横屏为主；竖屏引导横屏）
 * 用 :has() + class 选择器精准限定，不影响 portal / login / home
 * ================================================================ */
/* iPad 横屏(≤1366 宽)：收窄 cockpit 固定三栏，给中间三维/图表更多空间 */
@media (max-width: 1366px) {
  .main { grid-template-columns: 284px 1fr 300px !important; }
}
/* 横屏矮屏(≤860 高)：解除固定大屏页的 overflow 裁切，允许纵向滚动看全 */
@media (max-height: 860px) {
  body:has(.wrap), body:has(.lwrap), body:has(.fwrap) { overflow-y: auto !important; height: auto !important; }
  .wrap, .lwrap, .fwrap { height: auto !important; min-height: 100dvh; }
}
/* 竖屏(数据密集页不重排)：全屏"请横置 iPad"引导 */
#rotate-hint { display: none; }
#rotate-hint .ic { width: 66px; height: 66px; margin-bottom: 20px; animation: rothint 2.6s ease-in-out infinite; }
#rotate-hint b { color: #eaf6ff; font-size: 22px; font-weight: 800; letter-spacing: .5px; margin-bottom: 10px; }
#rotate-hint span { color: #7c93a5; font-size: 14px; }
@keyframes rothint { 0%,55%,100% { transform: rotate(0); } 26%,40% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 1024px) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 99999; background: #070e1a;
    flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8vw;
  }
}