/* ===== 布局适配层（layout-fit.css）=====
   目标：在窄视口（Proma 预览面板常见 600–900px 宽）下，所有应用的页面都不出现
   内容越出边界、贴着窗口边、元素重叠错位；宽屏（>1200px）外观保持不变。
   手段：媒体查询收敛多列网格与多栏布局 + 顶栏允许换行 + 表格横向滚动容器（由 js/app.js 自动包裹）。
   引用位置：各页面 </head> 之前，作为最后一个样式表。
   注意：所有选择器统一加 html 前缀提升一级特异性——appshell.js 会在运行时再次注入
   style.css/style.css 等同级样式，若特异性相同会被它反超（.topbar 高度即为此类问题）。 */

/* ---------- 0. 卡片内容区留白 ----------
   theme-pro.css 把 .card-body 的内边距清零（.card-body{padding:0}），而绝大多数页面
   沿用旧版标记（.toolbar、裸 div、表格等不带内距的容器），内容会直接贴上卡片边框。
   这里补回与卡片标题一致的内衬（card-head 为 16px 24px）；已自带内距的 Pro 筛选区
   （.pro-filters 为 16px 24px）不叠加，保持通栏设计。窄视口在下方媒体查询里收紧为 14px。 */
html .card-body{padding:16px 24px}
html .card-body:has(> .pro-filters){padding:0}
/* 通栏卡片里的分页条自身仍需左右留白（否则“共 N 条”贴在卡片边框上） */
html .card-body:has(> .pro-filters)>.pager{padding-left:24px;padding-right:24px}

/* ---------- 1. 表格横向滚动容器 ----------
   table.tbl 的表头是 white-space:nowrap，宽表在窄视口会把父容器按 max-content 撑开，
   导致整块内容越出视口。包一层滚动容器后，表格在自己的容器内横向滚动，页面不再被撑破。 */
html .tbl-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%}
html .tbl-scroll>table{min-width:100%}
html .tbl-scroll::-webkit-scrollbar{height:8px}

/* ---------- 2. 顶栏：窄视口允许换行，禁止挤压与重叠 ---------- */
@media (max-width:1200px){
  html .topbar{height:auto;min-height:56px;flex-wrap:wrap;align-items:center;padding:8px 16px;gap:6px 12px}
  html .topbar .crumb{min-width:0;line-height:1.4}
  html .topbar .crumb b,html .topbar .btn-back{white-space:nowrap}
  html .topbar .top-right{flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}
  html .topbar .top-right>*{white-space:nowrap}
  html .topbar .theme-toggle{flex-shrink:0}
}
@media (max-width:900px){
  html .topbar .theme-toggle span{display:none}
  html .topbar{padding:8px 12px}
}

/* ---------- 3. 内容区留白：窄视口适度收紧，仍保留呼吸空间 ---------- */
@media (max-width:1000px){
  html .content{padding:16px}
  html .card-head,html .dialog-body{padding-left:14px;padding-right:14px}
  html .card-body{padding:14px}
  html .card-body:has(> .pro-filters){padding:0}
  html .card-body:has(> .pro-filters)>.pager{padding-left:14px;padding-right:14px}
}
@media (max-width:760px){
  html .content{padding:12px}
  html .sidebar{width:184px}
  html .card{border-radius:6px}
}
/* 侧栏品牌区：旧版标记（.logo 内联 b + span.sub）在窄侧栏会折行，收掉副标题 */
@media (max-width:1000px){
  html .sidebar .logo .sub{display:none}
  html .sidebar .logo b{white-space:nowrap;font-size:13px}
  html .sidebar .brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ---------- 4. 多列指标/表单网格：窄视口逐级收敛 ---------- */
@media (max-width:1200px){
  html .kpi,html .kpi3,html .kpi4,html .kpis,html .stats,html .metrics,html .steps,
  html .mini-stats,html .mv-grid,html .energy-cards,html .comp-grid,html .ov-grid,
  html .tri,html .testgrid,html .add-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  html .kpi,html .kpi3,html .kpi4,html .kpis,html .stats,html .metrics,html .steps,
  html .mini-stats,html .mv-grid,html .energy-cards,html .comp-grid,html .ov-grid,
  html .tri,html .testgrid,html .add-row{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 5. 双栏/三栏页面布局：窄视口改为上下堆叠 ---------- */
@media (max-width:1100px){
  html .cfg-layout,html .mon-layout,html .av-grid,html .overview-grid,html .new-grid,
  html .info-grid{grid-template-columns:minmax(0,1fr)}
  html .es-wrap,html .pj-wrap{flex-direction:column;align-items:stretch}
  html .es-main,html .pj-main{width:100%;min-width:0}
  html .es-tree,html .pj-side{width:auto;flex:none;position:static;max-height:none}
  html .tabs,html .perm-tabs,html .dev-tabs{overflow-x:auto;flex-wrap:nowrap}
  html .tabs .tab,html .perm-tabs .perm-tab,html .dev-tabs .tab{flex:0 0 auto}
  html .card-head,html .dev-bar,html .canvas-head,html .diagram-toolbar{flex-wrap:wrap;gap:8px}
  html .actions,html .toolbar,html .act-btns,html .chips,html .role-stats,html .legend{flex-wrap:wrap;gap:8px 12px}
}
@media (max-width:820px){
  html .seg span{padding:6px 10px;font-size:12px}
  html .mini-stat,html .kc,html .mv-card,html .kpi-card{padding-left:12px;padding-right:12px}
}

/* ---------- 6. 卡片与数值：长文本/大数字不撑破容器 ---------- */
html .kpi-card,html .kc,html .mv-card,html .mini-stat,html .metric,html .stat{min-width:0}
html .kpi-card .v,html .kc .v,html .mv-card .v,html .mini-stat .v,html .metric .v{overflow-wrap:anywhere}
html .card-title,html .card-head>div,html .dev-bar>div{min-width:0}

/* ---------- 7. 弹窗：任意视口下都完整可见（标题与底部按钮不被截断） ----------
   原来只在 ≤900px 时限制高度，导致「宽但矮」的窗口（如 1440×560）里高弹窗
   上下被裁切且无法滚动（.dialog 原本 max-height:none; overflow:hidden）。
   这里统一改成“弹窗限高 + 内容区滚动”的纵向弹性布局：标题栏与底部按钮固定，
   中间 .dialog-body 滚动，任何窗口尺寸下保存/取消都能点到。 */
html .mask .dialog{max-width:calc(100% - 24px);max-height:calc(100vh - 32px);
  display:flex;flex-direction:column;overflow:hidden}
html .mask .dialog-head,html .mask .dialog-foot{flex:0 0 auto}
html .mask .dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-width:900px){
  html .mask .dialog{max-width:calc(100% - 16px);max-height:calc(100vh - 24px)}
}

/* ---------- 8. 内联样式写死的多列结构：窄视口需要 !important 才能压过 ---------- */
@media (max-width:1100px){
  /* 电价日历：7 列日期格（内联 grid），列宽压到可读下限并允许卡片内横向滚动 */
  html #calGrid{grid-template-columns:repeat(7,minmax(76px,1fr))!important}
  html .card-body:has(> #calGrid){overflow-x:auto}
  /* 时段时序图：24 小时刻度段固定宽度，超出部分横向滚动 */
  html .tl-bar{overflow-x:auto}
  html .tl-seg{flex:0 0 36px}
}
@media (max-width:820px){
  html .tf-cell{padding:4px 4px;min-height:52px}
  html .tf-cell .d{font-size:11px}
}

/* ---------- 9. 分页组件（由 js/app.js 自动注入，深浅色均用主题变量） ---------- */
html .pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 4px 0;color:var(--t-3,#7a8aa5);font-size:12px;flex-wrap:wrap}
html .pager .total{color:var(--t-3,#7a8aa5)}
html .pager .total b{color:var(--t-1,#333);font-weight:600;margin:0 2px}
html .pager .psize{display:inline-flex;align-items:center;gap:4px}
html .pager .ps{height:28px;border:1px solid var(--bd,#cdd6e4);border-radius:4px;background:var(--bg-container,#fff);color:var(--t-1,#333);font-size:12px;padding:0 4px;outline:none}
html .pager .ps:focus{border-color:var(--c-primary,#2f6bd8)}
html .pager .pg{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--bd,#cdd6e4);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--bg-container,#fff);color:var(--t-2,#44506a);user-select:none}
html .pager .pg:hover:not(.active):not(.dis){border-color:var(--c-primary,#2f6bd8);color:var(--c-primary,#2f6bd8)}
html .pager .pg.active{background:var(--c-primary,#2f5597);border-color:var(--c-primary,#2f5597);color:#fff;font-weight:600}
html .pager .pg.dis{opacity:.45;cursor:not-allowed}
html .pager .dots{color:var(--t-3,#7a8aa5);padding:0 2px}
@media (max-width:820px){
  html .pager{justify-content:space-between;padding-top:12px;gap:6px}
}

/* ---------- 10. 驾驶舱（dashboard）：三栏驾驶舱在窄视口改为单栏纵向滚动 ---------- */
/* % 列宽 + gap 会把行宽撑出容器（宽屏下多出 8px），改用 fr 分配剩余空间 */
html .dash .main{grid-template-columns:minmax(0,22fr) minmax(0,56fr) minmax(0,22fr)}
@media (max-width:1100px){
  html body:has(> .dash){height:auto;min-height:100vh;overflow-y:auto}
  html .dash{height:auto;min-height:100vh;overflow:visible}
  html .dash .main{grid-template-columns:minmax(0,1fr);gap:10px}
  html .dash .head{height:auto;flex-wrap:wrap;gap:6px 12px;padding:6px 0}
  html .dash .kpis{grid-template-columns:1fr 1fr}
}