/* user_sidebar.css - mobile first responsive */

/* ===== Tokens ===== */
:root{
  --brand-primary:#4F6F1F;
  --brand-secondary:#8FAF3C;
  --brand-dark:#2F3E0E;
  --brand-light:#F7F8F2;

  --sidebar-width:240px;
  --sidebar-collapsed-width:72px;
  --navbar-height:0px; /* dynamically set via JS */
  --transition-speed:0.35s;
}

/* ===== Base Reset ===== */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{height:100%;}

body{
  margin:0;
  background:var(--brand-light);
  padding-top:var(--navbar-height);
  min-height:calc(100dvh - var(--navbar-height));
  overflow-x:hidden;
}

/* ===== Sidebar (Mobile First: Off-canvas) ===== */
#sidebar{
  position:fixed;
  top:var(--navbar-height);
  left:0;
  width:var(--sidebar-width);
  height:calc(100dvh - var(--navbar-height));
  background:var(--brand-dark);
  overflow-y:auto;
  overflow-x:hidden;
  z-index:1030;
  transform:translateX(-100%);
  transition:transform var(--transition-speed) ease, width var(--transition-speed) ease;
  will-change:transform,width;
}

/* Open state on mobile (using existing class) */
body.sidebar-collapsed #sidebar{
  transform:translateX(0);
  width:var(--sidebar-width);
}

/* Links */
#sidebar .nav-link{
  color:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  white-space:nowrap;
  transition:background .2s ease;
}

#sidebar a:hover,
#sidebar a.active{
  background:var(--brand-secondary);
}

#sidebar .link-text{
  transition:opacity .2s ease;
}

/* Main Content (mobile first: no left margin) */
.main-content{
  flex:1;
  margin-left:0;
  min-height:calc(100dvh - var(--navbar-height));
  padding:2.5rem 1rem;
  margin-top:.2em;
  margin-bottom:5.2em;
  transition:margin-left var(--transition-speed) ease;
}

/* Prevent page scroll when sidebar open (mobile) */
body.sidebar-collapsed{
  overflow:hidden;
}

/* ===== Desktop (≥992px): Docked Sidebar with collapse width ===== */
@media (min-width:992px){

  /* Sidebar visible by default */
  #sidebar{
    transform:translateX(0);
    width:var(--sidebar-width);
  }

  /* Collapsed desktop state (existing class) */
  body.sidebar-collapsed #sidebar{
    width:var(--sidebar-collapsed-width);
    transform:translateX(0);
  }

  /* Text hide only for desktop-collapsed */
  body.sidebar-collapsed #sidebar .link-text{
    opacity:0;
    pointer-events:none;
  }

  /* Main content shifts right */
  .main-content{
    margin-left:var(--sidebar-width);
  }

  body.sidebar-collapsed .main-content{
    margin-left:var(--sidebar-collapsed-width);
  }

  /* Allow page scroll on desktop even when collapsed */
  body.sidebar-collapsed{
    overflow:auto;
  }
}