/* keep your main stylesheet as base */
@import url("/style.css");

/* PAGE INNER - fixes width so header/nav/footer don't change when sidebars collapse */
#page-inner {
  max-width: 900px;      /* same as your original container width */
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* FLEX AREA (3-column) sits inside page-inner, not changing page-inner width */
#flex {
  display: flex;
  justify-content: flex-start; /* main at left, sidebars manually positioned */
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

#leftSidebar:not(.collapsed) { margin-right: 12px; }
#rightSidebar:not(.collapsed) { margin-left: 12px; }

/* SIDE-BARS: fixed width, but controlled by flex-basis so main expands naturally */
#leftSidebar, #rightSidebar {
  flex: 0 0 200px;   /* fixed 200px each when open */
  width: 200px;
  background-color: var(--darker-content);
  transition: width 260ms ease, background-color 200ms ease;
  box-sizing: border-box;
}

/* collapsed: make width 0, hide visual, but keep element in layout so main grows */
#leftSidebar.collapsed,
#rightSidebar.collapsed {
  flex: 0 0 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* MAIN: remove margin auto so it fills the remaining space inside page-inner.
   main will grow to take freed-up sidebar width automatically. */
main.sidebar-lr {
  background-color: var(--content);
  flex: 1;      /* grow to fill remaining space */
  padding: 20px;
  order: 2;
  margin: 0;
  min-height: auto;
  min-width: 500px;
  box-sizing: border-box;
  overflow: visible;   /* allow sticky buttons inside to work */
}

/* make sure the inner content doesn't center main itself and restrict widths */
main .main-body {
  max-width: 100%;
  
}

/* SIDEBAR TOGGLES: these are inside main and should be sticky to the viewport while within main */
#sidebarToggles {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* container itself shouldn't block clicks from buttons */
}

/* the actual buttons should be clickable */
.toggle-btn {
  pointer-events: all;
  background: var(--darker-content);
  color: var(--icon-color);
  border: 1px solid var(--light-content);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.2s;
}

/* left and right button spacing */
.toggle-btn.left { margin-right: auto; }
.toggle-btn.right { margin-left: auto; }

.toggle-btn:hover { background: var(--dark-content); }

/* ensure body never allows horizontal scroll due to collapsing behavior */
body { overflow-x: hidden; }

/* RESPONSIVE: on small screens, sidebars become overlays and ".collapsed" means "open overlay" */
@media (max-width: 800px) {
  #flex {
    flex-direction: column;
    align-items: stretch;
  }

  #leftSidebar, #rightSidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 75%;
    max-width: 320px;
    transform: translateX(-110%);
    opacity: 0;
    z-index: 1200;
    background: var(--dark-content);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    transition: transform 300ms ease;
  }

  #rightSidebar {
    right: 0;
    left: auto;
    transform: translateX(110%);
  }

  /* when "collapsed" on mobile we interpret that as "open overlay" */
  #leftSidebar.collapsed {
    transform: translateX(0);
    opacity: 1;
  }
  #rightSidebar.collapsed {
    transform: translateX(0);
    opacity: 1;
  }

  /* dim the page when sidebar overlay is open - use pseudo on page-inner */
  #page-inner::after {
    content: "";
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1100;
  }
  #leftSidebar.collapsed ~ #page-inner::after,
  #rightSidebar.collapsed ~ #page-inner::after {
    display: block;
  }

  /* sticky toggle buttons stay visible but reposition inside viewport corners */
  #sidebarToggles { position: fixed; top: 8px; left: 10px; right: 10px; }
  .toggle-btn { font-size: 22px; padding: 8px 12px; }
}


/* var(--- sidebar animation setup ---) */
#leftSidebar, #rightSidebar {
  transition: transform 0.35s ease;
  will-change: transform transform-origin;
}

/* left collapses by sliding left */
#leftSidebar.collapsed {
  transform: scaleX(0);
  transform-origin: left;
}

/* right collapses by sliding right */
#rightSidebar.collapsed {
  transform: scaleX(0);
  transform-origin: right;
}