/* Universal 3-column layout */
.aidc-layout {
  --col-left: 300px;
  --col-center: 450px;
  --col-left-collapsed: 64px;
  --gap: 8px;
  --page-padding: 8px;

  width: 100%;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  min-height: 0;
  flex: 1 1 0%;
}

.aidc-layout--3col {
  display: grid !important;
  grid-template-columns: var(--col-left) var(--col-center) minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
  padding-top: 12px;
  min-height: 0;
}

.aidc-layout--3col.tree-collapsed {
  grid-template-columns: var(--col-left-collapsed) var(--col-center) minmax(0, 1fr);
}

/* Prevent overflow issues inside grid columns */
.aidc-layout--3col > * {
  min-width: 0;
  min-height: 0;
  height: auto;          /* override height:100% from aidc-scroll — grid stretch handles height */
  overflow: hidden;
}

/* Optional semantic column classes (recommended) */
.aidc-col--left   { grid-column: 1; }
.aidc-col--center { grid-column: 2; }
.aidc-col--right  { grid-column: 3; }

@media (max-width: 1200px) {
  .aidc-layout--3col {
    grid-template-columns: var(--col-left) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .aidc-col--right {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .aidc-layout--3col {
    grid-template-columns: 1fr;
  }
  .aidc-col--left,
  .aidc-col--center,
  .aidc-col--right {
    grid-column: 1;
  }
}