/* =========================
   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;
  line-height:0;
  color:#a8a8a8;
}

.nav-icon svg{
  display:block;
}

.nav-label{
  display:inline;
}

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

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

.sidebar a.active .nav-icon{
  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; }
  .nav-desktop{ display:none; }
  #sidebar-placeholder{
    display:block;
  }

  .sidebar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:76px;
    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 0;
    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;
    color:#a8a8a8;
  }

  .sidebar a.active .nav-icon{
    color:#e0b35a;
  }

  .nav-label{
    display:block;
    font-size:13px;
    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:70px;
  }

  .nav-icon{
    color:#a8a8a8;
  }

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

/* =========================
   CATALOGS ACCORDION
========================= */
.nav-catalog{
  width:100%;
}

.nav-catalog > summary{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  cursor:pointer;
  list-style:none;
  color:#e5e5e5;
  font-size:22px;
  font-weight:600;
  padding:16px 26px;
  user-select:none;
  transition:background-color 0.2s ease, color 0.2s ease;
}

.nav-catalog > summary::-webkit-details-marker{ display:none; }
.nav-catalog > summary::marker{ display:none; }

.nav-catalog > summary:hover{
  background:#141414;
  color:#f0d39b;
}

.nav-catalog.active > summary{
  background:#16120a;
  color:#e0b35a;
}

.nav-catalog.active > summary .nav-icon{
  color:#e0b35a;
}

/* Sub-links inside the accordion */
.sidebar .nav-sub{
  padding:12px 26px 12px 46px;
  font-size:19px;
  color:#c8c8c8;
}

.sidebar .nav-sub:hover{
  background:#141414;
  color:#f0d39b;
}

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

.sidebar .nav-sub.active .nav-icon{
  color:#e0b35a;
}

/* Tablet sub-link sizing */
@media(max-width:900px){
  .nav-catalog > summary{
    font-size:20px;
    padding:15px 22px;
  }

  .sidebar .nav-sub{
    font-size:18px;
    padding:10px 22px 10px 40px;
  }
}

/* Collapsed sidebar */
.sidebar.collapsed .nav-catalog > summary .nav-label{ display:none; }
.sidebar.collapsed .nav-catalog > summary{ padding:16px 0; justify-content:center; gap:0; }
.sidebar.collapsed .nav-catalog > summary .nav-icon{ display:block; }
.sidebar.collapsed .nav-catalog > :not(summary){ display:none; }

/* Mobile-only items: hidden on desktop */
.nav-mobile-only{ display:none !important; }

/* Mobile (≤800px): hide accordion, show individual tabs */
@media(max-width:800px){
  .nav-catalog{ display:none; }
  .nav-mobile-only{ display:flex !important; }
}