/* Shared layout only. Theme, telemetry and controls remain in their existing modules. */
:root {
  --layout-gutter: 24px;
  --layout-gap: 16px;
}

.workspace-header { padding-inline: var(--layout-gutter); }
.platform-brand-title strong { line-height: 1.4; }
.platform-meta { max-width: 100%; }
.workspace, .platform-meta > *, .monitor-heading > div,
.algorithm-heading > div, .quality-heading > div { min-width: 0; }

body.pages-v2 .page:is(.monitor-page, .realtime-page, .analysis-page, .carbon-page, .model-page, .quality-page) {
  padding: 24px var(--layout-gutter) 32px;
}
/* One page inset; individual cards, rather than another enclosing box, group content. */
body.pages-v2 .monitor-command-center {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.pages-v2 :is(.monitor-head, .topbar) {
  gap: 16px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  align-items: center;
}
body.pages-v2 :is(.monitor-heading, .algorithm-heading, .quality-heading) {
  flex: 1 1 320px;
  min-width: 0;
}
body.pages-v2 :is(.monitor-head-actions, .monitor-head-status, .topbar-status) {
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  margin-left: auto;
}
body.pages-v2 :is(.page-summary, .monitor-heading h1, .algorithm-heading h1, .quality-heading h1) {
  overflow-wrap: anywhere;
}
body.pages-v2 :is(.monitor-kpi-ribbon, .energy-kpi-ribbon, .quality-kpi-grid,
  .monitor-overview-grid, .monitor-system-grid, .analysis-grid, .analysis-insights,
  .carbon-chart-grid, .carbon-accounting-grid, .service-sections, .quality-workspace) {
  gap: var(--layout-gap);
}
body.pages-v2 :is(.monitor-kpi-ribbon, .energy-kpi-ribbon, .quality-kpi-grid) {
  margin-bottom: 24px;
}
body.pages-v2 :is(.panel-head, .table-toolbar, .control-zone-head) {
  flex-wrap: wrap;
  gap: 12px 16px;
}
body.pages-v2 :is(.panel-head, .table-toolbar, .control-zone-head) > div { min-width: 0; }
body.pages-v2 :is(.table-toolbar, .monitor-head-actions) :is(input, select) { max-width: 100%; }
body.pages-v2 :is(.monitor-kpi-card, .quality-kpi) small { overflow-wrap: anywhere; }
.dialog-head > div { min-width: 0; }
.dialog-head h2 { overflow-wrap: anywhere; }
.dialog-head > button { flex-shrink: 0; }

/* A full-width quality table is more useful than two narrow columns. */
@media (max-width: 1480px) {
  body.pages-v2 .quality-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1480px) {
  body.pages-v2 .pending-panel ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (min-width: 1280px) {
  body.pages-v2 :is(.monitor-kpi-ribbon, .energy-kpi-ribbon, .quality-kpi-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep the requested centred brand on wide screens; allow a complete title below that. */
@media (max-width: 1679px) and (min-width: 761px) {
  .workspace-header { height: auto; min-height: var(--header-height); padding-block: 12px; }
  .platform-brand { flex: 1 1 auto; }
  .platform-brand-title strong { white-space: normal; font-size: 20px; }
  .platform-meta { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
}

/* Desktop home: leave more useful space for the model at laptop widths. */
#overviewPage { --analysis-panel-width: clamp(260px, 18.25vw, 350px); }
#overviewPage .overview-analysis-overlay { width: var(--analysis-panel-width); padding: 18px; }
#overviewPage .overview-only-twin { --twin-reset-right: calc(var(--analysis-panel-width) + 16px); }
#overviewPage .overview-analysis-chart-head { flex-wrap: wrap; row-gap: 6px; }
#overviewPage .overview-analysis-legend { flex-wrap: wrap; gap: 8px 12px; }
#overviewPage .overview-analysis-source { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  :root { --layout-gutter: 20px; }
  body.pages-v2 :is(.monitor-head-actions, .monitor-head-status, .topbar-status) {
    width: auto;
    margin-left: 0;
  }
  /* Analytics become real document content, not an overlay covering the model. */
  #overviewPage #overviewVisualTwin { height: auto; overflow: visible; }
  #overviewPage .overview-visual-workspace { height: auto; }
  #overviewPage .overview-only-twin {
    display: block;
    height: var(--overview-visual-height);
    min-height: var(--overview-visual-height);
    --twin-reset-right: 16px;
    --twin-reset-bottom: 16px;
  }
  #overviewPage .overview-floating-analytics {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    height: auto;
    padding-top: 16px;
    transform: none;
    overflow: visible;
    pointer-events: auto;
  }
  #overviewPage .overview-analysis-overlay {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 540px;
    min-width: 0;
    padding: 18px;
  }
  #overviewPage .overview-analysis-period button { min-height: 44px; }
}

@media (max-width: 760px) {
  :root { --layout-gutter: 16px; --layout-gap: 12px; }
  .workspace-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    height: auto;
    gap: 12px;
    padding: 12px var(--layout-gutter);
  }
  .mobile-menu { margin: 0; }
  .platform-brand { width: auto; gap: 8px; }
  .platform-brand-title strong { white-space: normal; font-size: 16px; line-height: 1.5; }
  .platform-meta { grid-column: 1 / -1; width: 100%; margin: 0; gap: 8px; flex-wrap: wrap; }
  .weather-strip, .status-strip { flex: 1 1 auto; min-height: 36px; }
  .status-strip > #headerDataState { display: inline; }
  .header-updated-value > #headerUpdatedDate { display: inline; }
  body.pages-v2 .page:is(.monitor-page, .realtime-page, .analysis-page, .carbon-page, .model-page, .quality-page) {
    padding: 20px var(--layout-gutter) 28px;
  }
  body.pages-v2 :is(.monitor-head, .topbar) { margin-bottom: 20px; gap: 12px; }
  body.pages-v2 :is(.monitor-head-actions, .monitor-head-status, .topbar-status) {
    width: 100%;
    justify-content: flex-start;
  }
  body.pages-v2 .model-category-rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  body.pages-v2 .model-category-rail button { min-width: 0; width: 100%; flex: none; }
  body.pages-v2 .model-category-rail button + button { border-left: 0; }
  #overviewPage .overview-visual-head { padding: 12px 0; }
  #overviewPage .overview-visual-tabs { max-width: 100%; }
  #overviewPage .overview-analysis-overlay { padding: 16px; }
}

@media (max-width: 600px) {
  #overviewPage .overview-visual-workspace { --overview-visual-height: 340px; }
  #overviewPage .overview-visual-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
  }
  #overviewPage .overview-visual-tabs button {
    min-width: 0;
    min-height: 72px;
    padding: 8px 4px;
    flex-direction: column;
    gap: 6px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.5;
  }
  #overviewPage .overview-floating-analytics { grid-template-columns: minmax(0, 1fr); }
  #overviewPage .overview-analysis-overlay { height: auto; min-height: 540px; }
  body.pages-v2 .model-category-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pages-v2 :is(.monitor-kpi-ribbon, .energy-kpi-ribbon, .quality-kpi-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.pages-v2 :is(.monitor-kpi-card, .quality-kpi) {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px;
    gap: 10px;
  }
  body.pages-v2 :is(.monitor-kpi-icon, .quality-kpi-icon) { width: 36px; height: 36px; flex-basis: 36px; }
  body.pages-v2 :is(.monitor-kpi-icon, .quality-kpi-icon) img { width: 30px; height: 30px; }
}

@media (max-width: 380px) {
  .platform-meta { flex-direction: column; align-items: stretch; }
  .weather-strip, .status-strip { width: 100%; }
}

/* Reference guidance never changes the numeric KPI or takes the place of telemetry. */
#overviewPage .efficiency-reference[data-status="low"],
#overviewPage .efficiency-reference[data-status="high"] { color: #ffcf8a; }
.efficiency-reference-detail { margin: 0 0 18px; color: var(--text, #dffbf3); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.efficiency-reference-detail summary { cursor: pointer; padding: 8px 0; }
.efficiency-reference-detail summary:focus-visible { outline: 2px solid #63d5c6; outline-offset: 4px; }
.efficiency-reference-detail p { margin: 4px 0 8px; max-width: 75ch; }

/* Standard reference is secondary to daily operational readings. */
.carbon-reference-details { margin-top: 14px; font-size: var(--text-secondary); line-height: 1.7; overflow-wrap: anywhere; }
.carbon-reference-details summary { cursor: pointer; padding: 8px 0; font-weight: 600; }
.carbon-reference-details summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.carbon-reference-details p { margin: 8px 0; max-width: 75ch; }
.carbon-reference-details ul { margin: 8px 0; padding-inline-start: 20px; }
.carbon-reference-details li + li { margin-top: 6px; }
.carbon-method-facts dd { overflow-wrap: anywhere; }