/* App-level layout and panes */
.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Two-pane layout (legacy support) */
.two-pane {
  display: grid;
  grid-template-columns: 360px 1fr;
  column-gap: 0;
  height: calc(100vh - 4rem);
  transition: grid-template-columns 0.3s ease;
}

.two-pane.sidebar-collapsed { grid-template-columns: 60px 1fr; }

/* Three-pane layout - document scroll, sticky sidebars */
.three-pane {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--highlights-width);
  column-gap: 0;
  transition: grid-template-columns 0.3s ease;
  position: relative;
  min-height: 100vh;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.three-pane.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-width); }
.three-pane.highlights-collapsed { grid-template-columns: var(--sidebar-width) 1fr var(--highlights-collapsed-width); }
.three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width); }

/* Desktop: sticky sidebars, document scroll */
@media (min-width: 769px) {
  .pane.sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    align-self: start;
  }
  
  .pane.main {
    margin: 0 auto;
    padding: 0 var(--main-horizontal-padding);
    min-height: 100vh;
    overflow: visible !important;
    height: auto !important;
  }
  
  .pane.highlights {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    align-self: start;
  }
}

/* Remove padding when sidebar is collapsed for zero gap */
.three-pane.sidebar-collapsed .pane.main { padding-left: 0; }
.three-pane.sidebar-collapsed.highlights-collapsed .pane.main { padding-left: 0; }

/* Mobile three-pane layout */
@media (max-width: 768px) {
  .three-pane {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .three-pane.sidebar-collapsed,
  .three-pane.highlights-collapsed,
  .three-pane.sidebar-collapsed.highlights-collapsed { grid-template-columns: 1fr; }
  
  .pane.main {
    margin: 0 auto;
    padding: 0.5rem;
  }
}

/* Ensure panes are stacked in the correct order on desktop */
@media (min-width: 769px) {
  /* Desktop stacking to keep highlights above main without overlap */
  .three-pane .pane.sidebar { z-index: 1; }
  .three-pane .pane.main { z-index: 1; }
  .three-pane .pane.highlights { z-index: 2; }
}

/* Mobile pane styles */
@media (max-width: 768px) {
  /* Both sidepanes slide in as overlays */
  .pane.sidebar,
  .pane.highlights {
    position: fixed;
    top: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    background: #1a1a1a;
    z-index: 1001; /* Above backdrop */
    transition: transform 0.3s ease;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }
  /* Ensure content fills the mobile sidepanes */
  .pane.sidebar > *,
  .pane.highlights > * { width: 100%; height: 100%; }
  /* Remove borders from containers in mobile overlays */
  .pane.sidebar .bookmarks-container,
  .pane.highlights .highlights-container { border: none; border-radius: 0; flex: 1; min-height: 0; }
  /* Bookmarks sidebar from left */
  .pane.sidebar { left: 0; transform: translateX(-100%); }
  .pane.sidebar.mobile-open { transform: translateX(0); box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5); }
  /* Highlights sidebar from right */
  .pane.highlights { right: 0; transform: translateX(100%); }
  .pane.highlights.mobile-open { transform: translateX(0); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5); }
  .pane.main { 
    grid-column: 1; 
    grid-row: 1; 
    padding: 0.5rem; 
    max-width: 100%; 
    transition: opacity 0.2s ease;
  }
  /* Hide main content when sidepanes are open on mobile */
  .three-pane .pane.main.mobile-hidden { opacity: 0; pointer-events: none; }
  /* Mobile buttons and backdrop now use Tailwind utilities in component */
}