/* =========================
   SIDEBAR WRAPPER
========================= */
#sidebar-placeholder{
  display:flex;
  align-self:stretch;
  flex-shrink:0;
  transition:width 0.2s ease;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  width:250px;
  background:#0a0a0a;
  padding:22px 0;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  border-right:1px solid #1a1a1a;
  box-sizing:border-box;
  position:relative;
  transition:width 0.2s ease;
  overflow:hidden;
}

/* =========================
   COLLAPSE TOGGLE
========================= */
.sidebar-toggle{
  position:absolute;
  top:14px;
  right:10px;
  width:24px;
  height:24px;
  background:#1e1e1e;
  border:1px solid #333;
  border-radius:5px;
  color:#888;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  z-index:10;
  transition:color 0.15s, background 0.15s;
  flex-shrink:0;
}
.sidebar-toggle:hover{
  background:#2a2a2a;
  color:#f0d39b;
}

/* =========================
   COLLAPSED STATE
========================= */
.sidebar.collapsed{
  width:54px;
}
.sidebar.collapsed .nav-label{
  display:none;
}
.sidebar.collapsed .ad-box{
  display:none;
}
.sidebar.collapsed a{
  padding:16px 0;
  justify-content:center;
  gap:0;
}
.sidebar.collapsed .nav-icon{
  display:block;
}
.sidebar.collapsed .sidebar-toggle{
  right:auto;
  left:50%;
  transform:translateX(-50%);
}

/* =========================
   SIDEBAR LINKS
========================= */
.sidebar a{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  text-decoration:none;
  color:#e5e5e5;
  font-size:22px;
  font-weight:600;
  padding:16px 26px;
  transition:background-color 0.2s ease, color 0.2s ease;
}

.nav-icon{
  display:none;
  font-size:20px;
  line-height:1;
}

.nav-label{
  display:inline;
}

.sidebar a:hover{
  background:#141414;
  color:#f0d39b;
}

.sidebar a.active{
  background:#16120a;
  color:#e0b35a;
}

/* =========================
   SIDEBAR AD SPACE
========================= */
.ad-box{
  width:calc(100% - 32px);
  margin:28px 16px 0 16px;
  min-height:420px;
  background:#171717;
  border:1px dashed #8a611c;
  border-radius:8px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
}

.ad-box ins{
  display:block;
  width:100%;
  max-width:100%;
}

/* =========================
   TABLET
========================= */
@media (max-width: 900px){
  .sidebar{
    width:210px;
  }

  .sidebar a{
    font-size:20px;
    padding:15px 22px;
  }
}

/* =========================
   PHONE - BOTTOM NAV
========================= */
@media (max-width: 800px){
  .sidebar-toggle{ display:none; }
  #sidebar-placeholder{
    display:block;
  }

  .sidebar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:72px;
    padding:0;
    margin:0;
    background:#0a0a0a;
    border-right:none;
    border-top:1px solid #1a1a1a;
    display:flex;
    flex-direction:row;
    align-items:stretch;
    justify-content:space-around;
    z-index:1000;
  }

  .sidebar a{
    flex:1 1 25%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:8px 4px;
    margin:0;
    font-size:12px;
    font-weight:600;
    text-align:center;
    min-width:0;
  }

  .nav-icon{
    display:block;
    font-size:20px;
  }

  .nav-label{
    display:block;
    font-size:12px;
    line-height:1;
  }

  .sidebar a:hover{
    background:transparent;
    color:#e5e5e5;
  }

  .sidebar a.active{
    background:#16120a;
    color:#e0b35a;
  }

  .ad-box{
    display:none;
  }
}

@media (max-width: 520px){
  .sidebar{
    height:68px;
  }

  .nav-icon{
    font-size:18px;
  }

  .nav-label{
    font-size:11px;
  }
}