/* ============================================================
 * portrait.css — 竖屏大屏模式（LSCM-65 立式一体机 1080×1920）
 * ------------------------------------------------------------
 * 纯增量：所有规则均以 html.portrait-mode 作用域限定，
 * 不影响横屏（车间电脑）既有渲染。
 * 由 dashboard.html 头部的 mode 探测脚本自动/参数切换：
 *   · ?mode=portrait  强制竖屏模式
 *   · ?mode=landscape 强制关闭（便于在竖屏设备上调试横屏）
 *   · 无参数 → 依据屏幕方向自动（竖屏时开启）
 *
 * 目标：内容保持 16:9 原始比例「按宽度等比缩放、不重排」，
 *       隐藏左侧导航；整屏只占上方约 1/3（10.8rem ≈ 607px @1080w），
 *       下方露出 html 的深色背景（--bg-deep）。
 * ============================================================ */

/* 1) 仅按宽度缩放：覆盖 common.css 的 calc(min(100vw / 19.2, 100vh / 10.8))，
      使竖屏下与横屏同一套 16:9 比例（不因高度大而放大内容）。 */
html.portrait-mode {
  font-size: calc(100vw / 19.2);
}

/* 2) 整页锁定为 16:9 高度（10.8rem ≈ 607px @1080w），顶部对齐；
      高度之外的区域露出 html 深色背景（--bg-deep）。
      !important 用于覆盖 common.css 的 body{height:100vh} 与
      dashboard.html 内联的 .board-page{height:100vh}。 */
html.portrait-mode body,
html.portrait-mode body.board-page,
html.portrait-mode .board-page {
  width: 100vw;
  height: 10.8rem !important;
  min-height: 10.8rem !important;
  max-height: 10.8rem !important;
  overflow: hidden !important;
}

/* 3) 隐藏左侧导航，主内容区撑满整宽 */
html.portrait-mode .sidebar { display: none !important; }
html.portrait-mode .app-main { width: 100vw; }
html.portrait-mode .content { width: 100%; }

/* 4) 限高下内容按顶对齐；行容器（.v2row / .board-row）保持与横屏一致的
      flex 规则。说明：因整页被锁定为 16:9（10.8rem）且字号仅按宽度缩放，
      竖屏内容区高度比例与横屏完全相同 → 行布局为纯等比缩放，
      不存在被拉伸/挤压的情况，故无需覆盖行容器的 flex。 */
html.portrait-mode .board-content { justify-content: flex-start; }