/* Responsive breakpoints and grid */

/* ── App Shell Grid ── */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  height: 100vh;
  overflow: hidden;
}

.app-sidebar {
  grid-column: 1;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-1);
  display: flex;
  flex-direction: column;
}

.app-main {
  grid-column: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-base);
}

/* ── Request/Response Split ── */
.request-response-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.request-panel {
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.response-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Mobile: sidebar as drawer ── */
@media (max-width: 767px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100%;
    z-index: var(--z-overlay);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }

  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .app-main {
    grid-column: 1;
  }

  .request-response-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .request-panel {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-overlay) - 1);
}

@media (max-width: 767px) {
  .sidebar-overlay.is-visible {
    display: block;
  }
}

/* ── Utilities ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.items-center {
  align-items: center;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}