/* ========================================
   BotCamp Training Notebook - Layout System
   RTL-compatible layout with fixed sidebar
   ======================================== */

/* ========================================
   PAGE WRAPPER
   ======================================== */
.page-wrapper {
  position: relative;
  min-height: 100vh;
  isolation: isolate; /* Creates stacking context */
  overflow-x: hidden;
  overflow-y: visible;
}

/* ========================================
   DESKTOP LAYOUT (1025px+)
   Fixed sidebar with margin-based content
   ======================================== */
@media (min-width: 1025px) {
  body {
    padding-top: var(--header-height);
  }

  /* Main content - margin on the start side (right in RTL) for sidebar */
  .main-content {
    /* margin-inline-start = margin-right in RTL */
    margin-inline-start: var(--sidebar-width);
    padding: 40px;
    max-width: calc(100vw - var(--sidebar-width) - 80px);
    width: 100%;
  }

  /* Sidebar - fixed on the start side (right in RTL) */
  .sidebar {
    position: fixed;
    top: var(--header-height);
    /* inset-inline-start = right in RTL */
    inset-inline-start: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: var(--z-sidebar, 999);
  }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
  .main-content {
    padding: 40px 60px;
    max-width: min(1000px, calc(100vw - var(--sidebar-width) - 120px));
    /* Center content in the available space */
    margin-inline-end: auto;
  }
}

/* Very Large Desktop (1600px+) */
@media (min-width: 1600px) {
  .main-content {
    max-width: min(1100px, calc(100vw - var(--sidebar-width) - 160px));
    padding: 40px 80px;
  }
}

/* Extra Large (1920px+) */
@media (min-width: 1920px) {
  .main-content {
    max-width: 1200px;
  }
}

/* ========================================
   TABLET LAYOUT (769px - 1024px)
   Sidebar as overlay
   ======================================== */
@media (max-width: 1024px) {
  body {
    padding-top: var(--header-height);
  }

  .main-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 40px;
  }

  /* Sidebar hidden by default, slides in from right (RTL) */
  .sidebar {
    position: fixed;
    top: var(--header-height);
    inset-inline-start: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    z-index: var(--z-sidebar, 999);
    transform: translateX(100%); /* Hidden off-screen */
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  /* Sidebar visible when active */
  .sidebar.active {
    transform: translateX(0);
  }

  /* Overlay behind sidebar */
  .sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay, 998);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

/* ========================================
   MOBILE LAYOUT (768px and below)
   ======================================== */
@media (max-width: 768px) {
  .main-content {
    padding: 20px;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
  }
}

/* ========================================
   SMALL MOBILE (480px and below)
   ======================================== */
@media (max-width: 480px) {
  .main-content {
    padding: 15px;
    max-width: 100%;
    margin: 0;
  }

  .sidebar {
    width: 100%;
  }
}