/* ============================================================
     MODE 1 — DESKTOP (wide screens, > 992px)
     Sidebar is INLINE, pushes content over. Default = expanded.
     User can still manually collapse to icon rail if they want.
     ============================================================ */
.sidebar {
   width: var(--sidebar-width);
   background-color: var(--dark-1);
   color: #fff;
   display: flex;
   flex-direction: column;
   transition: width 0.20s ease;
   overflow: hidden;
   flex-shrink: 0;
   position: relative;
   z-index: 100;
}

   /*width: var(--sidebar-rail-width);*/
   .sidebar.collapsed {
      width: 50px;
      /*background-color: pink;*/
   }

   /*.sidebar .apterity-sidebar-logo.apterity-sidebar-logo {
      background-color: yellow;
   }

   .sidebar.collapsed .apterity-sidebar-logo.apterity-sidebar-logo--collapsed {
      background-color: lavender;
   }*/

   /* Expanded logo state */
   .sidebar .apterity-sidebar-logo.apterity-sidebar-logo--expanded {
      display: block !important;
      margin-left: 45px;
      /*background-color: skyblue;*/
   }

   /* Collapsed logo state */
   .sidebar .apterity-sidebar-logo.apterity-sidebar-logo--collapsed {
      display: none !important;
      margin-left: -20px;
      /*background-color: pink;*/
   }

   /* Parent state overrides */
   .sidebar.collapsed .apterity-sidebar-logo.apterity-sidebar-logo--expanded {
      display: none !important;
      /*background-color: blue;*/
   }

   .sidebar.collapsed .apterity-sidebar-logo.apterity-sidebar-logo--collapsed {
      display: block !important;
      /*background-color: red;*/
   }

   /*Base styles applied to both expanded and collapsed states */
   .sidebar .sidebar-newstory {
      border-radius: 50%;
      width: 30px;
      height: 30px;
      white-space: nowrap;
      padding: 3px 4px 4px 4px;
      margin-left: 32px;
   }
   /*Overrides strictly for the collapsed state */
   .sidebar.collapsed .sidebar-newstory {
      margin-left: 4px;
   }

.sidebar-top {
   display: flex;
   flex-direction: row;
   /*justify-content:space-between;*/
   align-items: center;
   height: 100px;
   padding: 0 12px;
}

/* WED OLD? */
/*.sidebar-logo {
   font-weight: 700;
   font-size: 1.1rem;
   white-space: nowrap;
   opacity: 1;
   transition: opacity 0.15s ease;
}

.sidebar.collapsed .sidebar-logo {
   opacity: 0;
   width: 0;
   pointer-events: none;
}*/

.apterity-toggle-btn {
   background: transparent;
   border: none;
   color: #fff;
   cursor: pointer;
   width: 36px;
   height: 36px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: auto;
   flex-shrink: 0;
   transition: background 0.20s ease;
}

   .apterity-toggle-btn:hover {
      background: rgba(255,255,255,0.1);
      background: transparent;
   }

.sidebar.collapsed .sidebar-top {
   justify-content: center;
}

.sidebar.collapsed .apterity-toggle-btn {
   margin-left: 0;
}

.nav-list {
   list-style: none;
   margin: 0;
   padding: 8px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.nav-item {
   display: flex;
   flex-direction: row; /* WED EVE */
   align-items: center;
   gap: 12px;
   /*padding: 10px 12px; WED EVE */
   border-radius: 6px;
   color: #c9cdd6;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: background 0.20s ease;
}

   .nav-item:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
   }

.nav-icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
}

/* WED EVE */
.sidebar .nav-text {
   opacity: 1;
   transition: opacity 0.20s ease;
   width:80px;
}

.sidebar.collapsed .nav-text {
   opacity: 0;
   width: 0;
   overflow: hidden;
}

.sidebar.collapsed .nav-item {
   /*justify-content: center; WED EVE */
   justify-content:flex-start;
   /*padding: 10px 0;*/
}

/* ============================================================
     MODE 2 — TABLET (768px – 992px)
     Default = icon-only rail, INLINE (still pushes content,
     but only by 60px so it doesn't eat much space).
     User can still expand it manually to full width if they want;
     when expanded on tablet it overlays instead of pushing further,
     since tablet space is tighter.
     ============================================================ */
@media (max-width: 992px) and (min-width: 769px) {
   .sidebar {
      /*width: var(--sidebar-rail-width);*/ /* icon rail is the default here */
      transition: width 0.20s ease, transform 0.20s ease, visibility 0.20s ease;

      /* from default */
      width: var(--sidebar-width);
      /*background-color: var(--dark-1);
      color: #fff;
      display: flex;
      flex-direction: column;
      transition: width 0.25s ease;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
      z-index: 100;*/
   }

      /*width: var(--sidebar-rail-width);*/
      .sidebar.collapsed {
         width: 50px;
         /*background-color: pink;*/
      }

      /*Base styles applied to both expanded and collapsed states */
      .sidebar  .sidebar-newstory {
         border-radius: 50%;
         width: 30px;
         height: 30px;
         white-space: nowrap;
         padding: 3px 4px 4px 4px;
         margin-left: 32px;
      }
      /*Overrides strictly for the collapsed state */
      .sidebar.collapsed  .sidebar-newstory {
         margin-left: 4px;
      }

   .sidebar-top {
      /*justify-content: center;*/
   }

   .apterity-toggle-btn {
      margin-left: 0;
   }

   /* WED EVE */
   .sidebar .nav-text {
      opacity: 1;
      transition: opacity 0.20s ease;
      width: 80px;
   }

   .sidebar.collapsed .nav-text {
      opacity: 0;
      width: 0;
      overflow: hidden;
      color: red;
      opacity: 1;
   }

   .nav-item {
      /*justify-content: center; WED EVE */
      /*padding: 10px 0;*/
   }
   /* Manually "expanded" on tablet = overlay on top, doesn't push content */
   .sidebar.expanded-overlay {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--sidebar-width);
      box-shadow: 2px 0 12px rgba(0,0,0,0.25);
   }

      .sidebar.expanded-overlay .sidebar-logo {
         opacity: 1;
         width: auto;
         pointer-events: auto;
      }

      .sidebar.expanded-overlay .sidebar-top {
         justify-content: flex-start;
      }

      .sidebar.expanded-overlay .apterity-toggle-btn {
         margin-left: auto;
      }

      .sidebar.expanded-overlay  .nav-text {
         opacity: 1;
         width: auto;
         overflow: visible;
      }

      .sidebar.expanded-overlay  .nav-item {
         justify-content: flex-start;
         padding: 10px 12px;
      }
}

/* ============================================================
     MODE 3 — MOBILE (<= 768px)
     Default = fully hidden. Sidebar becomes an off-canvas overlay
     drawer that slides in on top of content, zero layout space taken.
     ============================================================ */
@media (max-width: 768px) {
   .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--sidebar-width);
      transform: translateX(-100%); /* hidden by default */
      box-shadow: 2px 0 12px rgba(0,0,0,0.25);
   }

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

      /* WED OLD? */
      /* On mobile there's no icon-rail mode — it's all or nothing */
      /* .sidebar .sidebar-logo {
         opacity: 1;
         width: auto;
      }*/

      .sidebar  .nav-text {
         opacity: 1;
         width: auto;
         overflow: visible;
      }

      .sidebar  .nav-item {
         justify-content: flex-start;
         padding: 10px 12px;
      }

      .sidebar .sidebar-top {
         justify-content: flex-start;
      }

      .sidebar .apterity-toggle-btn {
         margin-left: auto;
      }

   .mobile-topbar {
      display: flex !important;
   }

   .scrim {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 90;
   }

      .scrim.visible {
         display: block;
      }
}

/* Mobile top bar with its own hamburger (hidden on tablet/desktop) */
.mobile-topbar {
   display: none;
   align-items: center;
   height: 56px;
   padding: 0 12px;
   background: #fff;
   border-bottom: 1px solid #e2e4ea;
   position: sticky;
   top: 0;
   z-index: 80;
}

   .mobile-topbar button {
      background: none;
      border: none;
      cursor: pointer;
      width: 36px;
      height: 36px;
   }

/* ---- Main content ---- */
.content-wrap {
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.main {
   flex: 1;
   padding: 32px;
}

   .main h1 {
      margin-top: 0;
      font-size: 1.4rem;
   }

.mode-banner {
   display: inline-block;
   padding: 6px 12px;
   border-radius: 6px;
   background: #e8ecff;
   color: #3346c9;
   font-size: 0.85rem;
   font-weight: 600;
   margin-bottom: 16px;
}

.hint {
   color: #667;
   font-size: 0.9rem;
   max-width: 520px;
   line-height: 1.6;
}

   .hint code {
      background: #eceef2;
      padding: 1px 5px;
      border-radius: 4px;
   }