#main:has(.report) {
  padding-block-start: calc(var(--size-16) + var(--size-4));
  background-color: var(--color-bg);
}

#main:has(#report-int-actions) {
  padding-block-start: calc(var(--size-16) * 2);
}

#report-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: var(--sidebar-width, 0);
  inset-inline-end: 0;
  z-index: 20;
  background-color: var(--color-bg);
  border-block-end: var(--border) solid var(--color-border);
}

/* Report Views Layout */
.report-views-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-7);
  inline-size: 100%;
}

.report-view-row {
  display: flex;
  gap: var(--size-4);
  inline-size: 100%;
}

/* Dual layout: 2 charts in a row */
.report-view-row--dual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Single layout: full width */
.report-view-row--single {
  flex-wrap: nowrap;
}

/* Individual view items */
.report-view-item {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
}

/* Chart views: 25% of viewport height */
.report-view-item--chart {
  block-size: 25dvh;
}

/* Grid views: 60% of viewport height */
.report-view-item--row-charts,
.report-view-item--grid {
  max-block-size: 60dvh;
  min-block-size: 250px;
}

.report-view-item--row-charts {
  max-block-size: max-content;
}

/* Half width for dual chart layout */
.report-view-item--half {
  flex: 1 1 calc(50% - var(--size-2));
  min-inline-size: 0;
}

/* Full width for single view or grid */
.report-view-item--full {
  flex: 1 1 100%;
}

.report-view-item--full.report-view-item--chart {
  block-size: 30dvh;
}

/* Turbo frame within view items should fill container */
.report-view-item turbo-frame {
  display: flex;
  flex: 1;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
}

/* Ensure view content constrains properly */
.report-view-item .view {
  max-inline-size: 100%;
}

.report-view-item .view-body {
  max-inline-size: 100%;
}

/* Ensure chart canvas constrains properly */
.report-view-item canvas {
  max-inline-size: 100% !important;
  inline-size: 100% !important;
}

/* Responsive: Allow wrapping on smaller screens */
@media (width < 48rem) {
  .report-view-row--dual {
    flex-direction: column;
  }

  .report-view-item--half {
    inline-size: 100%;
    flex: 1 1 100%;
  }
}