/*
 * 金黄山智慧能源管理平台 · 跨屏响应式结构层
 * 覆盖：320–430 手机、768–1024 平板、1366/1440 办公屏、1920 大屏、2K/4K 超宽屏。
 * 原则：保留既有驾驶舱主题和数据状态，只调整空间、排列、触控与局部滚动行为。
 */

:root {
  --adaptive-page-max: 2240px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

:where(
  .dashboard,
  .dashboard-page,
  .home-command-center,
  .home-twin-workspace,
  .monitor-command-center,
  .monitor-panel,
  .monitor-system-grid,
  .monitor-device-grid,
  .monitor-storage-grid,
  .monitor-meter-grid,
  .energy-analysis-center,
  .carbon-analysis-center,
  .report-analysis-center,
  .algorithm-page,
  .quality-page,
  .energy-panel,
  .panel
) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(img, svg, canvas, video) {
  max-inline-size: 100%;
}

:where(
  .table-wrap,
  .algorithm-timeline-wrap,
  .energy-chart,
  .home-heatmap,
  .monitor-tabbar,
  .twin-view-switch
) {
  max-inline-size: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

:where(.table-wrap, .algorithm-timeline-wrap) {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

:where(.table-wrap, .algorithm-timeline-wrap, .monitor-tabbar, .twin-view-switch) {
  scrollbar-width: thin;
}

/* 任何业务网格都允许子项收缩；长标题和接口状态不能把卡片反向撑宽。 */
:where(
  .monitor-kpi-ribbon,
  .energy-kpi-ribbon,
  .monitor-system-grid,
  .monitor-device-grid,
  .monitor-storage-grid,
  .monitor-meter-grid,
  .energy-main-grid,
  .energy-group-grid,
  .carbon-chart-grid,
  .report-summary-grid,
  .algorithm-command-grid,
  .algorithm-lower-grid,
  .quality-kpi-grid,
  .quality-layout,
  .operations-source-strip,
  .operations-module-grid
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .monitor-kpi-card,
  .energy-panel-title,
  .monitor-heading,
  .panel-heading,
  .operations-source-strip
) :where(strong, span, p, small) {
  min-inline-size: 0;
}

:where(.monitor-kpi-card, .quality-kpi, .cockpit-kpi) strong {
  max-inline-size: 100%;
}

/*
 * 961–1480 px 带侧栏时，业务区实际只剩约 730–1260 px。
 * 四张大数字 KPI 强行同排会由数字和单位撑破卡片，统一改为两列。
 */
@media (min-width: 561px) and (max-width: 1480px) {
  :where(
    .energy-analysis-center,
    .carbon-analysis-center,
    .report-analysis-center,
    .algorithm-page,
    .operations-center
  ) .energy-kpi-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/*
 * 全平台内容安全层：标题、状态、接口字段和大数字都以卡片自身宽度为边界。
 * 数据表继续使用局部横向滚动，不通过压扁列宽换取“伪适配”。
 */
:where(
  .monitor-head,
  .monitor-heading,
  .monitor-device-head,
  .monitor-system-head,
  .monitor-pump-group-heading,
  .monitor-pump-realtime-heading,
  .monitor-valve-heading,
  .monitor-mcc-heading,
  .energy-panel-head,
  .energy-panel-title,
  .panel-heading,
  .table-heading,
  .trend-heading,
  .operations-panel-head,
  .carbon-standard-title-row,
  .opt-policy-section-head,
  .algorithm-assistant-head
) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(
  .dashboard-page,
  .monitor-panel,
  .energy-panel,
  .operations-center,
  .algorithm-page,
  .report-analysis-center
) :where(h1, h2, h3, h4, p, dt, dd, label) {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:where(
  .energy-panel-head,
  .panel-heading,
  .table-heading,
  .trend-heading,
  .monitor-device-head,
  .monitor-pump-group-heading,
  .monitor-pump-realtime-heading,
  .monitor-valve-heading,
  .monitor-mcc-heading,
  .operations-panel-head
) {
  flex-wrap: wrap;
  row-gap: 8px;
}

:where(.energy-panel-title, .monitor-heading, .monitor-device-title) {
  min-inline-size: 0;
}

:where(.energy-panel-title, .monitor-heading, .monitor-device-title) > :last-child {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:where(.monitor-kpi-card, .quality-kpi, .cockpit-kpi) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
}

:where(.monitor-kpi-card, .cockpit-kpi) > div {
  display: flex;
  min-inline-size: 0;
  max-inline-size: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
}

:where(.monitor-kpi-card, .cockpit-kpi) > div > span:first-child {
  flex: 0 0 100%;
  inline-size: 100%;
}

:where(.monitor-kpi-card, .cockpit-kpi) > div > strong {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-page .cockpit-kpi > div > strong {
  padding-block: 2px;
  line-height: 1.18;
}

:where(.monitor-kpi-card, .cockpit-kpi) > div > small {
  flex: 0 0 auto;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

:where(
  .monitor-equipment-kpi,
  .monitor-pump-param,
  .monitor-pump-realtime-card,
  .monitor-storage-card,
  .monitor-mcc-param,
  .monitor-valve-param,
  .operations-source-strip > div
) {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 561px) and (max-width: 1480px) {
  :where(
    .energy-analysis-center,
    .carbon-analysis-center,
    .report-analysis-center,
    .algorithm-page,
    .operations-center
  ) .energy-kpi-ribbon .monitor-kpi-card {
    min-height: 94px;
    padding: 13px 15px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
  }

  :where(
    .energy-analysis-center,
    .carbon-analysis-center,
    .report-analysis-center,
    .algorithm-page,
    .operations-center
  ) .energy-kpi-ribbon .monitor-kpi-icon {
    width: 48px;
    height: 48px;
  }

  :where(
    .energy-analysis-center,
    .carbon-analysis-center,
    .report-analysis-center,
    .algorithm-page,
    .operations-center
  ) .energy-kpi-ribbon .monitor-kpi-card strong {
    font-size: clamp(24px, 2.2vw, 29px);
  }
}

/* 低高度展厅屏与小笔记本：压缩垂直节奏，保留图表并消除面板底部裁切。 */
@media (min-width: 1181px) and (max-height: 820px) {
  .home-page .home-kpi-ribbon {
    padding-top: 9px;
    padding-bottom: 8px;
    gap: 10px;
  }

  .home-page .cockpit-kpi {
    min-height: 72px;
    padding: 9px 12px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .home-page .cockpit-kpi-icon {
    width: 40px;
    height: 40px;
  }

  .home-page .cockpit-kpi strong {
    font-size: clamp(20px, 1.55vw, 25px);
  }

  .home-page .home-twin-workspace {
    min-height: calc(100dvh - var(--shell-header-height) - 96px);
  }

  .home-page .home-float-panel {
    top: 12px;
    bottom: 12px;
    padding: 12px 14px;
  }

  .home-page .home-float-panel-header {
    min-height: 34px;
  }

  .home-page .home-panel-icon {
    width: 34px;
    height: 34px;
  }

  .home-page .home-float-panel-header h2 {
    font-size: 20px;
  }

  .home-page .home-period-switch {
    min-height: 34px;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .home-page .home-analysis-table > div {
    min-height: 38px;
  }

  .home-page .home-analysis-table dd strong {
    font-size: 21px;
  }

  .home-page .home-trend-heading {
    margin-top: 8px;
  }

  .home-page .home-energy-panel .home-cockpit-chart,
  .home-page .home-carbon-panel .home-cockpit-chart {
    height: 140px;
    min-height: 140px;
    flex-basis: 140px;
  }

  .home-page .home-chart-legend {
    margin-top: 2px;
  }
}

@media (min-width: 1181px) and (max-height: 720px) {
  .home-page .home-energy-panel .home-cockpit-chart,
  .home-page .home-carbon-panel .home-cockpit-chart {
    height: 124px;
    min-height: 124px;
    flex-basis: 124px;
  }

  .home-page .home-analysis-table > div {
    min-height: 35px;
  }
}

/* 办公屏：压缩固定外壳，把有效宽度优先留给图表和设备参数。 */
@media (min-width: 961px) and (max-width: 1480px) {
  :root {
    --shell-sidebar-width: 208px;
    --shell-content-gutter: 18px;
  }

  .sidebar {
    padding-right: 16px;
    padding-left: 16px;
  }

  .nav-item {
    padding-right: 12px;
    padding-left: 12px;
  }

  .platform-meta {
    right: 18px;
  }

  .platform-meta .weather-strip,
  .platform-meta .status-strip {
    padding-right: 9px;
    padding-left: 9px;
  }

  /* 八项能量参数和电表卡片按有效内容宽度重排，完整保留累计值与设备名称。 */
  #monitorPage .energy-data-grid,
  #monitorPage .meter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  #monitorPage .monitor-tab span {
    font-size: 13px;
    line-height: 16px;
  }
}

/* 小尺寸笔记本仍保留完整平台名称，避免右侧状态条覆盖标题尾部。 */
@media (min-width: 961px) and (max-width: 1180px) {
  .app-shell[data-active-page] .platform-brand-title strong {
    font-size: clamp(15px, 1.6vw, 18px);
    letter-spacing: 0;
  }
}

/* 平板及以下：抽屉侧栏、双层顶部栏、单行可滑动实时监测导航。 */
@media (max-width: 960px) {
  .platform-header {
    position: sticky;
    top: 0;
    grid-template-rows: minmax(44px, auto) auto;
    min-height: 0;
    height: auto;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .platform-meta {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    justify-content: flex-end;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .platform-meta::-webkit-scrollbar,
  .monitor-tabbar::-webkit-scrollbar,
  .twin-view-switch::-webkit-scrollbar {
    display: none;
  }

  .platform-meta > * {
    flex: 0 0 auto;
  }

  .monitor-page {
    margin-right: -20px;
    margin-left: -20px;
  }

  .app-shell[data-active-page="quality"] .quality-page {
    margin-right: -20px;
    margin-left: -20px;
  }

  .app-shell[data-active-page="monitor"] .monitor-tabbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-padding-inline: 10px;
    scroll-snap-type: inline proximity;
  }

  .app-shell[data-active-page="monitor"] .monitor-tab {
    width: auto;
    min-width: 0;
    flex: 0 0 128px;
    min-height: 44px;
    scroll-snap-align: start;
  }

  .monitor-head,
  .topbar,
  .topbar-compact {
    min-inline-size: 0;
  }

  .energy-panel-head,
  .panel-heading,
  .monitor-system-head {
    min-inline-size: 0;
  }

  .energy-panel-head > *,
  .panel-heading > *,
  .monitor-system-head > * {
    min-inline-size: 0;
  }
}

/* 小平板：数字孪生标题与四个视角入口固定为上下两行，避免临界宽度互相覆盖。 */
@media (max-width: 820px) {
  .home-page .home-twin-titlebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .home-page .home-twin-heading {
    position: static;
    width: 100%;
    min-width: 0;
    transform: none;
  }

  .home-page .twin-view-switch {
    grid-row: 2;
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
  }

  .home-page .twin-status,
  .home-page .twin-season-state {
    top: 122px;
    max-width: calc(50% - 22px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 手机：内容顺序优先，控制项不挤压，图表/表格保留可读宽度。 */
@media (max-width: 720px) {
  .dashboard {
    padding-bottom: max(112px, env(safe-area-inset-bottom));
  }

  .platform-brand strong,
  .monitor-heading h1,
  .section-title h2,
  .energy-panel-head h2 {
    overflow-wrap: anywhere;
  }

  .app-shell[data-active-page] .platform-brand strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(11px, 3.1vw, 14px);
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .monitor-page {
    margin-right: calc(-1 * max(14px, env(safe-area-inset-right)));
    margin-left: calc(-1 * max(14px, env(safe-area-inset-left)));
  }

  .app-shell[data-active-page="quality"] .quality-page {
    margin-right: calc(-1 * max(14px, env(safe-area-inset-right)));
    margin-left: calc(-1 * max(14px, env(safe-area-inset-left)));
  }

  .home-page {
    margin-right: calc(-1 * max(14px, env(safe-area-inset-right)));
    margin-left: calc(-1 * max(14px, env(safe-area-inset-left)));
  }

  .monitor-command-center,
  .energy-analysis-center,
  .carbon-analysis-center,
  .report-analysis-center {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .monitor-head,
  .energy-panel-head,
  .panel-heading,
  .table-heading,
  .trend-heading {
    align-items: flex-start;
  }

  .panel-heading,
  .table-heading,
  .trend-heading {
    flex-wrap: wrap;
  }

  .panel-heading > :is(.ghost-button, .range-badge, .status-pill),
  .energy-panel-head > :is(.monitor-pump-granularity, .carbon-price-now, .carbon-today-revenue) {
    max-width: 100%;
  }

  .analysis-mode-switch,
  .analysis-date-controls,
  .analysis-range-fields,
  .analysis-parameter-grid {
    width: 100%;
  }

  .analysis-date-controls,
  .analysis-range-fields,
  .analysis-parameter-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .analysis-date-separator {
    display: none;
  }

  .analysis-field,
  .analysis-field input,
  .analysis-parameter-grid .analysis-field input,
  .analysis-primary-button {
    width: 100%;
    min-width: 0;
  }

  :where(input, select, textarea, button) {
    max-width: 100%;
  }

  :where(input[type="date"], input[type="text"], input[type="number"], select, textarea) {
    font-size: 16px;
  }

  .monitor-system-stage {
    height: clamp(300px, 78vw, 420px);
    min-height: 300px;
  }

  .carbon-standard-title-row,
  .energy-rank-top {
    min-inline-size: 0;
  }

  .energy-rank-top strong,
  .carbon-standard-title-row p {
    overflow-wrap: anywhere;
  }

  .assistant-launcher {
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

/* 窄手机：日期、筛选和统计卡片改为真正单列，避免半宽控件失去可用性。 */
@media (max-width: 520px) {
  .platform-header {
    row-gap: 6px;
    padding-bottom: 7px;
  }

  .platform-meta {
    justify-content: flex-start;
  }

  .platform-meta .weather-strip,
  .platform-meta .status-strip {
    min-height: 36px;
  }

  .monitor-head-status {
    max-width: 100%;
    margin-left: 0 !important;
  }

  .app-shell[data-active-page="monitor"] .monitor-tab {
    flex-basis: 142px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .report-range-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .report-presets {
    width: 100%;
  }

  .report-field,
  .report-field input,
  .report-export-button {
    width: 100%;
    min-width: 0;
  }

  .report-sep {
    display: none;
  }

  .report-export-button {
    justify-content: center;
  }

  .trend-summary {
    grid-template-columns: 1fr;
  }

  .trend-summary > div:nth-child(even) {
    border-left: 0;
  }

  .trend-summary > div + div {
    border-top: 1px solid var(--line);
  }

  .algorithm-assistant-form > div {
    min-inline-size: 0;
  }

  /* 二维系统图摘要在手机端改为单卡滑动，不再露出半张跨框卡片。 */
  .app-shell[data-active-page="monitor"] .monitor-system-2d-telemetry {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 18px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
  }

  .app-shell[data-active-page="monitor"] .monitor-system-2d-card {
    width: 100%;
    scroll-snap-align: start;
  }

  /* 悬浮助手只保留入口图标，避免遮住手机端 KPI、图表和表格内容。 */
  .assistant-launcher {
    width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 3px;
    border-radius: 50%;
  }

  .assistant-launcher img {
    width: 44px;
    height: 44px;
  }

  .assistant-launcher > span {
    display: none;
  }
}

@media (min-width: 360px) and (max-width: 620px) {
  #monitorPage .monitor-kpi-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #monitorPage .monitor-kpi-card {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 96px;
    padding: 12px;
    gap: 10px;
  }

  #monitorPage .monitor-kpi-icon {
    width: 42px;
    height: 42px;
  }

  #monitorPage .monitor-kpi-card strong {
    font-size: clamp(20px, 5.4vw, 23px);
  }

  #monitorPage .monitor-kpi-card small {
    display: block;
    margin: 5px 0 0;
  }
}

@media (max-width: 380px) {
  .app-shell[data-active-page] .platform-brand strong {
    font-size: 12px;
    line-height: 1.3;
  }

  .platform-meta .weather-strip span,
  .platform-meta .weather-strip small,
  .platform-meta .status-strip > span:not(.pulse) {
    display: none;
  }

  .report-presets {
    grid-template-columns: 1fr;
  }

  .home-twin-workspace {
    padding-right: 8px;
    padding-left: 8px;
  }

  .home-float-panel {
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* 横屏手机/矮屏：收起非关键状态信息，把高度留给系统图和操作区。 */
@media (max-width: 960px) and (max-height: 560px) and (orientation: landscape) {
  .platform-header {
    grid-template-rows: minmax(44px, auto);
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }

  .platform-meta {
    display: none;
  }

  .monitor-command-center {
    min-height: calc(100dvh - 56px);
  }

  .monitor-system-stage,
  .home-page .home-system-stage {
    height: 300px;
    min-height: 280px;
  }
}

/* 超宽/4K：用页面身份区分业务页，不能排除其复用的 monitor-page 样式类。 */
@media (min-width: 1921px) {
  .dashboard-page:not(#homePage):not(#monitorPage):not(#qualityPage) {
    width: 100%;
    max-width: var(--adaptive-page-max);
    margin-right: auto;
    margin-left: auto;
  }

  .monitor-command-center {
    max-width: 2560px;
    margin-right: auto;
    margin-left: auto;
  }

  .home-command-center {
    max-width: 3440px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Compact metrics: keep the actual reading, not an ellipsis, on narrow screens. */
@media (max-width: 620px) {
  #monitorPage .monitor-kpi-card {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 8px;
  }

  #monitorPage .monitor-kpi-card strong {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }
}

/* Shared business-page rhythm, without changing cockpit or system-drawing geometry. */
:is(.energy-analysis-center, .carbon-analysis-center, .report-analysis-center, .operations-center, .algorithm-page) :is(.energy-panel-head, .operations-panel-head) {
  gap: 12px 16px;
  align-items: center;
}

:is(.energy-analysis-center, .carbon-analysis-center, .report-analysis-center, .operations-center, .algorithm-page) :is(.energy-panel-head, .operations-panel-head) > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.carbon-chart-card .energy-panel-head {
  height: auto;
  min-height: 78px;
}

/* Empty-state icons are not plot SVGs and must never inherit a chart's width floor. */
.dashboard-page .chart-empty .icon {
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  max-width: 22px;
}

:is(.monitor-kpi-card, .energy-kpi-card, .cockpit-kpi) strong {
  font-variant-numeric: tabular-nums;
}

.dashboard-page :is(button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--home-accent-strong, #72eddb);
  outline-offset: 3px;
}

@media (pointer: coarse) {
  :where(
    .mobile-menu-toggle,
    .monitor-tab,
    .ghost-button,
    .report-presets button,
    .report-export-button,
    .analysis-mode-button,
    .analysis-primary-button,
    .monitor-pump-granularity button
  ) {
    min-height: 44px;
  }
}

@media (hover: none) {
  :where(.energy-panel, .monitor-kpi-card, .quality-kpi, .cockpit-kpi):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .monitor-panel.is-active {
    animation: none;
  }
}