/* ============================================================
   后台「数据大屏」专用样式（admin/screen.php 才引这个文件）
   ------------------------------------------------------------
   只有 admin/screen.php 会引入这个文件（index.php 前台大屏不引），
   所以这里的规则不会影响车间那块横屏大屏。分两段：

   一、手机上（≤900px）：一条竖线往下排 —— 顶栏 → KPI 两列 → 主图表区一张一行
       → 侧栏（明细/排行/占比）；每张图表卡固定高度，一屏正好读完一张；
       文字整体缩一档，去掉自动滚动（自动滚屏在手机上会「没读完就滑走」）。

   二、后台内嵌、桌面宽度（body.embed 且 >900px）：iframe 宽度一般 900~1300px，
       正好落在 style.css 的 ≤1200px 断点上（主区变一行一张 + 侧栏按比例分高），
       可 iframe 高度只有一屏（admin/index.php 里的 calc(100vh - 175px)），
       卡片会被按比例压成几十像素高 —— 图表没有高度可画，看着像坏了。
       这一档给每张卡一个可用高度，并让 iframe 内部纵向滚动。
       （直接用浏览器新标签打开 screen.php 时不会命中：那时宽度通常 >1200px，
         走的还是前台那套横屏驾驶舱布局，本文件在这一档等于什么都没改。）
   ============================================================ */

/* 后台内嵌版没有设备准入，遮罩永远不出现（防止脚本异常时盖住整块屏） */
.gate{display:none !important}
body.gated #app{visibility:visible}

@media (max-width:900px){
  /* ---------- 页面骨架：从「一屏铺满」改成「一列往下滚」 ---------- */
  html,body{height:auto}
  body{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #app{
    height:auto;min-height:100vh;
    padding:8px 8px 14px;gap:9px;
  }
  /* 手机上一列排下去就是一屏很长，入场动画的 16px 位移会让边界抖动，收掉 */
  #app > *{animation:none}

  /* ---------- 顶栏：手机上只留「刷新间隔」一行
     标题名称、天气、日期时间都去掉 —— 手机屏本来就窄，这些占掉两行还不如留给数据。 ---------- */
  .hud-header{
    position:sticky;top:0;z-index:30;      /* 往下滚时刷新条一直挂着 */
    display:flex;height:auto;padding:7px 11px;border-radius:8px;
    justify-content:flex-end;align-items:center;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  .hud-center,.hud-left{display:none}                        /* 标题名称 + 天气 */
  .hud-right{flex-direction:row;align-items:center;gap:10px}
  .hud-right .clock-row{display:none}                        /* 干支/日期 + 时间整块收掉 */
  .hud-refresh{gap:6px}
  .hud-refresh .rf-sel{font-size:13px;padding:4px 6px}
  .hud-refresh .rf-last{display:none}
  /* 后台版把「刷新时间」胶囊整个拿掉了（改间隔去后台「控制器」），
     这一页手机顶栏就什么都不剩了 —— 整条隐掉，别留一条空的 sticky 条占高度 */
  body.embed .hud-header{display:none}

  /* ---------- KPI：两列，最后一张落单时铺满一整行 ---------- */
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .kpi-row > .kpi{padding:11px 12px 10px 14px;border-radius:9px}
  .kpi-row > .kpi:last-child:nth-child(odd){grid-column:1 / -1}
  .kpi .label{font-size:12.5px;white-space:normal;line-height:1.35;padding-right:24px}
  .kpi .val{font-size:26px;margin-top:6px}
  .kpi .unit{font-size:13px}
  .kpi .ico{right:9px;top:9px;width:20px;height:20px;opacity:.7}
  .kpi .ring,.kpi .ring svg{width:40px;height:40px}
  .kpi .ring .r-txt{font-size:11px}
  .kpi .val-row{gap:8px;margin-top:6px}
  .kpi .val-tag{font-size:11px}
  .kpi .tail{font-size:11px;white-space:normal;line-height:1.5}
  .kpi .sub{font-size:11px}

  /* ---------- 内容区：主图表区和侧栏都变成一列 ---------- */
  .content{display:block;flex:none;min-height:0}
  .main,.side{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:9px;min-height:0}
  .side{margin-top:9px}
  .side > .card,.side > .card:first-child{flex:none}
  /* 每张卡固定高度：一屏一张图，看完往下滑（图表卡必须有明确高度，否则 ECharts 画不出来） */
  .main > .card,.side > .card{height:258px;border-radius:9px}
  /* 虚拟车间：手机上排成一列工位，一屏放不下就是一屏很高。
     高度按工位数算（--blocks 由 cockpit.js 写在卡片上），每个工位约 170px ——
     这样每块工位都能按设计尺寸 1:1 画出来，块里的字才看得清（见 scene.js 的自适应画布宽）。
     没拿到工位数时退回 min(56vh,400px)。 */
  .main > .card--scene,.side > .card--scene{
    height:calc(var(--blocks,0) * 170px + 52px);
    min-height:min(56vh,400px);
    grid-row:auto;                                          /* 桌面版的「跨两行」在单列里会把下面顶空 */
  }
  .main > .card:has(.tbl-wrap),.side > .card:has(.tbl-wrap){height:min(60vh,420px)}
  .main > .card:has(.scroll-list),.side > .card:has(.scroll-list){height:min(46vh,320px)}
  .card h3{font-size:13px;padding:8px 10px;gap:7px;letter-spacing:.8px}
  .card h3::before{height:12px}
  .card h3 .h3-ico{width:14px;height:14px}
  .card h3 .range-sel{font-size:11px;padding:2px 4px}
  .tag-live{font-size:10px}
  .card .body{padding:5px 7px 7px}

  /* ---------- 表格 / 列表：交给手指，关掉自动滚动 ---------- */
  .tbl-wrap{overscroll-behavior-x:contain}
  table.grid{font-size:12.5px}
  table.grid th,table.grid td{padding:6px 8px}
  .scroll-list{
    overflow-y:auto;mask-image:none;-webkit-mask-image:none;  /* 遮罩和自动滚动绑在一起，手机上都不用 */
  }
  .scroll-list ul{animation:none}
  .scroll-list li{padding:9px 10px;font-size:12.5px;line-height:1.5}
  .empty{font-size:12.5px;padding:20px}

  /* ---------- 底部：只留「编号 + 时间」 ---------- */
  .hud-foot{
    height:auto;min-height:30px;padding:6px 10px;font-size:11px;gap:5px 10px;flex-wrap:wrap;
    border-radius:8px;
  }
  .hud-foot .foot-c{display:none}
  .hud-foot .foot-l{font-size:11px}

  /* 顶栏是 sticky 的，提示条往下挪一点，别压在标题上 */
  .range-toast{bottom:4vh}
}

/* ---------- 小屏手机（iPhone SE / 老安卓机）再收一档 ---------- */
@media (max-width:380px){
  #app{padding:6px 6px 12px}
  .kpi-row > .kpi{padding:10px 10px 9px 12px}
  .kpi .val{font-size:23px}
  .main > .card,.side > .card{height:236px}
}

/* ---------- 后台内嵌 · 桌面宽度：卡片给足高度 + iframe 内部滚动 ---------- */
@media (min-width:901px){
  /* 高度不再锁死一屏：内容多就往下滚（在后台面板里滚，不影响后台外面） */
  body.embed{overflow-y:auto}
  body.embed #app{height:auto;min-height:100vh}

  /* 主区：一行一张（iframe 宽度已经命中 ≤1200 断点），每行至少 240px 给图表画。
     注意行高只是「下限」：图表卡是 auto 行，ECharts 画布的高度会反过来把行撑高，
     所以真正决定图表卡高度的是下面那条 .card--fit，不是这个数。 */
  body.embed .main{grid-auto-rows:minmax(240px,auto)}

  /* 主图表区的图表卡（报工趋势 / 各工序报工量，cockpit.js renderArea 打的 card--fit）：
     不给死高度就会长到 520px 上下（画布反撑的），把「虚拟车间」整张卡顶到屏幕外面。
     这里按视口给高度：本机 1080p（iframe 视口约 919px）算出来 ≈239px，正好是原来的一半，
     而且 12+顶栏+KPI+239+虚拟车间(420)+底栏 刚好回到一屏内，不用滚动。
     手机端走上面 ≤900 那段（.main > .card{height:258px}），不受这里影响。想再调只改这个数。 */
  body.embed .main > .card--fit{height:min(26vh,280px)}

  body.embed .main > .card--scene{grid-row:auto;height:min(46vh,420px)}
  body.embed .main > .card:has(.tbl-wrap){height:min(52vh,440px)}

  /* 侧栏：从「按比例分整列高」改成「每张一个固定高度」，否则明细表把下面的图表压没 */
  body.embed .side{flex:none;display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:11px}
  body.embed .side > .card,body.embed .side > .card:first-child{flex:0 0 auto;height:240px}
  body.embed .side > .card:has(.tbl-wrap){height:min(46vh,400px)}
  body.embed .side > .card:has(.scroll-list){height:min(42vh,320px)}
}