/* pages/_shared/sidebar.css
   Shared layout + sidebar nav (included on every page)
*/
.app-shell{
  display:flex;
  gap:20px;
  align-items:flex-start;
  width:100%;
}

.sidebar{
  flex:0 0 260px;
  max-width:260px;
  border:1px solid var(--border);
  border-radius:14px;
  background: radial-gradient(circle at top left, var(--panel1), var(--panel2));
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height:0;
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  height: fit-content;
  overflow: hidden;
  transition: transform 0.18s ease;
}

.sidebar-fab{
  display:none;
  position:fixed;
  left:14px;
  top:14px;
  z-index:1100;
  background:#1b1f2a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

.sidebar.collapsed{
  flex-basis:56px;
  max-width:56px;
  padding:10px 8px;
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.sidebar-brand{
  font-weight:700;
  color:var(--yellow);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:0.95rem;
  text-align:center;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar.collapsed .sidebar-brand{
  display:none;
}

.sidebar-toggle{
  background:#1b1f2a;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  line-height:1;
}

.sidebar-toggle:hover{ filter:brightness(1.08); }

.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
  overflow:auto;
  padding-right:4px;
}

.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 10px;
  background: linear-gradient(145deg, #0f1520, #0b0f17);
}

.sidebar-link:hover{
  border-color:var(--border);
  filter:brightness(1.05);
}

.sidebar-link .icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background: rgba(0,0,0,0.25);
  font-size:0.9rem;
}

.sidebar-link .label{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar.collapsed .sidebar-link{
  justify-content:center;
  padding:10px 6px;
}

.sidebar.collapsed .sidebar-link .label{
  display:none;
}

.app-main{
  flex:1;
  min-width:0;
}

/* On narrow screens, keep things usable */
@media (max-width: 900px){
  /* Off-canvas on mobile so it doesn't crush the content */
  .app-shell{ flex-direction:row; }
  .sidebar{
    position:fixed;
    left:12px;
    top:12px;
    margin-top:0 !important;
    max-height: calc(100vh - 24px);
    z-index:1050;
    box-shadow: 0 14px 34px rgba(0,0,0,0.55);
    /* Keep the floating arrow from covering the header text */
    padding-top: 52px;
  }

  /* Mobile uses the floating arrow button; hide the header toggle */
  .sidebar-toggle{ display:none; }
  .sidebar-header{ justify-content:center; }

  .sidebar-fab{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border-radius:12px;
    font-size:20px;
  }
  .sidebar.collapsed{
    transform: translateX(-120%);
  }
  .sidebar-fab{ display:block; }

  /* Docked menu button in the header area (scrolls with page, never covers title) */
  .mobile-title-wrap{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-left: 56px;   /* reserve space for button */
    padding-right: 56px;  /* keep title centered */
    margin-bottom: 8px;
  }

  .sidebar-fab.docked{
    position: absolute !important;
    left: 12px;
    top: 6px;
    right: auto !important;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }

  h1 .mobile-title-line1,
  h1 .mobile-title-line2{
    display: block;
    width: 100%;
    text-align: center;
  }
  h1 .mobile-title-line2{ margin-top: 4px; }

}