/* ==========================================================================
   Layout — CSS Grid Shell
   Responsive grid layout for trading terminal.
   Breakpoints: mobile < 768 | tablet 768+ | desktop 1200+ | wide 1600+
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Body — base setup
   --------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* ---------------------------------------------------------------------------
   Main Container — below header, above footer
   --------------------------------------------------------------------------- */
.main-container {
  position: relative;
  display: grid;
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height) - var(--footer-height));
  height: calc(100dvh - var(--header-height) - var(--footer-height));
  overflow: hidden;

  /* Mobile-first: single column, sidebar hidden */
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content";
}

/* ---------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------- */
.auto-snipe-sidebar {
  grid-area: sidebar;
  width: var(--sidebar-width);
  background: var(--bg-surface);
  border-right: 1px solid var(--border-muted);
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
  flex-direction: column;
  transition:
    opacity 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 100ms,
    transform 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 100ms;
}

.auto-snipe-sidebar.sidebar--open {
  display: flex;
}

/* ---------------------------------------------------------------------------
   Content Area — holds listings + activity
   --------------------------------------------------------------------------- */
.content-area {
  grid-area: content;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  transition:
    opacity 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
    transform 400ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ---------------------------------------------------------------------------
   Listings Section — fills available space, scrolls independently
   --------------------------------------------------------------------------- */
.listings-section {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listings-container {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Activity Section — hidden on mobile/tablet
   --------------------------------------------------------------------------- */
.activity-section {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--border-muted);
  background-color: var(--bg-surface);
}

.activity-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Activity Filters
   --------------------------------------------------------------------------- */
.activity-filters {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-muted);
  flex-shrink: 0;
}

/* ==========================================================================
   Tablet — 768px+
   Sidebar visible, content fills remainder
   ========================================================================== */
@media (min-width: 768px) {
  .main-container {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "sidebar content";
  }

  .auto-snipe-sidebar {
    display: flex;
  }
}

/* ==========================================================================
   Desktop — 1200px+
   Sidebar + listings + activity side-by-side
   ========================================================================== */
@media (min-width: 1200px) {
  .content-area {
    flex-direction: row;
  }

  .activity-section {
    display: flex;
    width: var(--activity-width);
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Wide — 1600px+
   Wider activity panel
   ========================================================================== */
@media (min-width: 1600px) {
  .activity-section {
    width: 380px;
  }
}

/* ---------------------------------------------------------------------------
   Mobile sidebar overlay (when toggled open on mobile)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .auto-snipe-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: var(--footer-height);
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    display: flex;
  }

  .auto-snipe-sidebar.sidebar--open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0, 0, 0, 0.6);
    z-index: calc(var(--z-sidebar) - 1);
  }

  .sidebar-overlay.is-visible {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Section headers (re-usable)
   --------------------------------------------------------------------------- */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-muted);
  min-height: 44px;
  flex-shrink: 0;
}

.section-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Scrollable containers
   --------------------------------------------------------------------------- */
.scroll-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   Responsive container helper
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}