/* App-wide layout — fill viewport, consistent spacing, centered content columns */

:root {
  --shell-pad-x: 16px;
  --shell-pad-y: 12px;
  --content-max: 1320px;
  --content-max-wide: 1440px;
  --content-max-narrow: 1100px;
  --panel-gap: 10px;
}

/* Main shell — scroll container below compact topbar */
.main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Base panel — grows with content; main scrolls the full tab */
.panel {
  display: none;
  flex: 1 0 auto;
  min-height: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: visible;
  padding: var(--shell-pad-y) var(--shell-pad-x);
  animation: fadeIn 0.2s ease;
}

.panel.active {
  display: flex;
}

/* Fill panels — natural height; scroll via .main */
.panel.panel-fill {
  overflow: visible;
  padding: var(--shell-pad-y) var(--shell-pad-x);
}

.panel .tab-page-header {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
}

.panel.panel-fill:not(.weekend-panel) > :not(.tab-page-header) {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
}

/* Weekend — stacked sections */
.panel.weekend-panel.panel-fill {
  padding: 8px 12px;
  gap: var(--panel-gap);
  overflow: visible;
}

/* Centered content below full-width tab header */
.panel.panel-center {
  padding: var(--shell-pad-y) var(--shell-pad-x);
  align-items: stretch;
  overflow: visible;
}

.panel.panel-center > .tab-page-header {
  flex: 0 0 auto;
}

.panel.panel-center > .form-panel-wrap,
.panel.panel-center > .tele-layout,
.panel.panel-center > .chassis-guide-panel {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* Wide panels — centered body, page scroll */
.panel.panel-wide {
  padding: var(--shell-pad-y) var(--shell-pad-x);
  align-items: stretch;
  overflow: visible;
}

.panel.panel-wide > .tab-page-header {
  flex: 0 0 auto;
}

.panel.panel-wide > .fuel-layout,
.panel.panel-wide > #data-viewer-root {
  flex: 0 0 auto;
  min-height: auto;
  width: min(100%, var(--content-max-wide));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

#panel-data.panel-wide {
  overflow: visible;
}

/* Tabbar — legacy horizontal bar; primary nav is .tab-grid in topbar */
.tabbar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabbar-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  flex: 1;
}

/* Weekend — section children */
.weekend-panel .wk-settings {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.weekend-panel .wk-main {
  flex: 0 0 auto;
  min-height: 360px;
  margin-bottom: 0;
}

.weekend-panel .wk-map-frame,
.weekend-panel .wk-map-host {
  min-height: 360px;
  height: auto;
}

.weekend-panel #weekend-map {
  min-height: 360px;
  height: 360px;
}

.weekend-panel .wk-workflow {
  flex: 0 0 auto;
}

/* Forms — centered, full width within column */
.form-panel-wrap {
  width: 100%;
  max-width: var(--content-max);
}

.form-layout {
  align-items: stretch;
}

/* M2 guide */
.chassis-guide-panel {
  width: 100%;
}

.chassis-guide-wrap {
  width: 100%;
  max-width: none;
}

#panel-chassisguide .chassis-guide-panel {
  margin-left: auto;
  margin-right: auto;
}

.checklist-panel,
#checklist-root {
  width: 100%;
  max-width: none;
}

#panel-checklist.panel-center {
  align-items: stretch;
}

#drivers-root,
#pit-stops-root,
#data-viewer-root {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  overflow: visible;
}

#drivers-root > *,
#pit-stops-root > * {
  flex: 0 0 auto;
  min-height: auto;
  width: 100%;
}

/* Data viewer — natural height, internal panes scroll */
#data-viewer-root .data-viewer-wrap {
  width: 100%;
  height: auto;
  min-height: 520px;
  max-height: none;
  flex: 0 0 auto;
}

/* Drivers / pits — natural height */
.tab-panel-wrap:not(.drv-layout) {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.tab-panel-wrap:not(.drv-layout) > .tab-header-row {
  flex: 0 0 auto;
}

.tab-panel-wrap:not(.drv-layout) > .form-card:first-of-type {
  flex: 0 0 auto;
}

.tab-panel-wrap:not(.drv-layout) > .form-card:last-child {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.tab-panel-wrap:not(.drv-layout) .pit-log-wrap {
  flex: 0 0 auto;
  min-height: 160px;
  max-height: none;
}

.tab-panel-wrap.drv-layout {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: auto;
  overflow: visible;
}

/* Fuel — stacked layout, scroll with page */
.fuel-layout {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  flex: 0 0 auto;
  min-height: auto;
  width: 100%;
}

.fuel-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--panel-gap);
  align-items: start;
}

.fuel-table-section {
  flex: 0 0 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.fuel-table-section .table-wrap {
  flex: 0 0 auto;
  min-height: 200px;
  max-height: none;
  overflow: auto;
}

.fuel-strategy-table {
  max-height: none;
  min-height: 120px;
  overflow: auto;
}

.fuel-table-section h2 {
  flex: 0 0 auto;
}

#fuel-chart-wrap {
  height: min(220px, 28vh);
  min-height: 140px;
  margin-top: 10px;
}

/* Telemetry — source + Task Manager-style performance pane */
.tele-layout {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  width: 100%;
  flex: 1;
  min-height: 0;
}

.tele-channels-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.tele-perf-list,
.tele-perf {
  width: 100%;
}

/* Generic card spacing inside panels */
.panel .card:last-child {
  margin-bottom: 0;
}

.panel-fill .card {
  margin-bottom: 0;
}

.tab-page-header {
  display: none;
}

/* Live timing — page scrolls; map keeps a usable min-height inside the flow. */
#panel-timing.panel.panel-fill {
  overflow: visible;
  flex: 1 0 auto;
  min-height: 0;
  max-height: none;
}

#panel-timing.panel-fill > .lt-root {
  flex: 1 0 auto;
  min-height: 0;
  overflow: visible;
}

html:has(body.timing-tab-active),
.main:has(#panel-timing.active),
.main.main-locked,
body.timing-tab-active {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Short viewports: still allow page scroll; keep chrome compact so the map is high. */
@media (max-height: 920px) {
  html:has(body.timing-tab-active),
  .main:has(#panel-timing.active),
  .main.main-locked,
  body.timing-tab-active {
    overflow-x: hidden;
    overflow-y: auto;
  }

  #panel-timing.panel.panel-fill {
    overflow: visible;
    flex: 1 0 auto;
    min-height: 0;
    max-height: none;
    padding-top: 4px;
  }

  #panel-timing.panel-fill > .lt-root {
    overflow: visible;
    flex: 1 0 auto;
    min-height: 0;
    gap: 3px;
  }

  #panel-timing .lt-link-bar,
  #panel-timing .lt-official-meta {
    display: none;
  }

  #panel-timing .lt-form.card {
    padding: 4px 8px;
  }

  #panel-timing .lt-official-header {
    padding: 2px 8px;
    gap: 8px;
  }

  #panel-timing .lt-screen-bar {
    gap: 3px;
  }

  #panel-timing .lt-screen-btn {
    padding: 3px 8px;
    font-size: 11px;
  }

  #panel-timing .lt-main {
    flex: 0 0 auto;
    min-height: min(52vh, 520px);
  }

  #panel-timing .lt-main.layout-overview #lt-screen-messages {
    flex: 0.55 1 0;
    min-height: 72px;
  }
}

@media (max-width: 1100px) {
  .fuel-top {
    grid-template-columns: 1fr;
  }

  .data-viewer-wrap {
    height: auto;
    min-height: 480px;
  }

  .drv-layout {
    overflow: visible;
    height: auto;
  }

  .weekend-panel .wk-main,
  .weekend-panel .wk-map-host,
  .weekend-panel #weekend-map {
    min-height: 280px;
  }

  .weekend-panel #weekend-map {
    height: 280px;
  }
}