/* ==================================
   DESKTOP SIDEBAR
================================== */

.sidebar-panel {
  width: 280px;
  flex: 0 0 280px;

  background: linear-gradient(180deg, #111827, #0b132b);

  overflow-y: auto;
  overflow-x: hidden;

  padding: 20px;

  height: auto;

  z-index: 2000;

  border-right: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.35);
}

/* ==================================
   SCROLLBAR
================================== */

.sidebar-panel::-webkit-scrollbar {
  width: 7px;
}

.sidebar-panel::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 20px;
}

/* ==================================
   SEARCH
================================== */

.sidebar-search {
  margin-bottom: 20px;
}

.sidebar-search input {
  width: 100%;

  padding: 12px;

  border-radius: 10px;

  background: #020617;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: white;

  outline: none;
}

.sidebar-search input:focus {
  border-color: #38bdf8;
}

/* ==================================
   MENU
================================== */

.sidebar-menu {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.sidebar-section {
  margin-top: 20px;

  margin-bottom: 8px;

  color: #38bdf8;

  font-size: 13px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.sidebar-menu a {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 14px;

  border-radius: 10px;

  color: #cbd5e1;

  text-decoration: none;

  font-weight: 600;

  background: rgba(255, 255, 255, 0.02);

  border: 1px solid transparent;

  transition: 0.25s;
}

.sidebar-menu a:hover {
  background: #1e293b;

  color: white;

  border-color: rgba(56, 189, 248, 0.35);

  transform: translateX(5px);
}

/* ==================================
   MOBILE MENU BUTTON
================================== */

.mobile-menu-button-wrap {
  display: none;
}

.mobile-menu-toggle {
  background: #111827;

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 10px;

  font-weight: 700;

  cursor: pointer;
}

/* ==================================
   CLOSE BUTTON
================================== */

.sidebar-close-btn {
  display: none;

  width: 100%;

  margin-top: 25px;

  padding: 12px;

  border-radius: 10px;

  background: #dc2626;

  color: white;

  border: none;

  font-weight: 800;

  cursor: pointer;
}
@media (max-width: 900px) {
  /* ==============================
MOBILE MENU BUTTON
============================== */

  .mobile-menu-button-wrap {
    display: block !important;

    width: 100%;

    padding: 10px 15px;

    background: #0b132b;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-menu-toggle {
    display: block !important;

    width: 100%;

    height: 50px;

    background: #111827;

    color: #fff;

    border: 1px solid rgba(56, 189, 248, 0.35);

    border-radius: 10px;

    font-size: 20px;

    font-weight: 700;

    cursor: pointer;
  }

  /* ==============================
MOBILE APP LAYOUT
============================== */

  .app-layout {
    display: flex;

    flex-direction: column;

    width: 100%;
  }

  /* ==============================
MOBILE SIDEBAR
============================== */

  .sidebar-panel {
    order: 1;

    width: 100%;

    flex: none;

    height: auto;

    max-height: 0;

    padding: 0 20px;

    overflow: hidden;

    background: linear-gradient(180deg, #111827, #0b132b);

    border-right: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    transition:
      max-height 0.35s ease,
      padding 0.35s ease;
  }

  /* ==============================
SIDEBAR OPEN
============================== */

  .sidebar-panel.open {
    max-height: 1200px;

    padding: 20px;

    overflow-y: auto;
  }

  /* ==============================
PAGE CONTENT
============================== */

  .main-content {
    order: 2;

    width: 100%;
  }

  /* ==============================
CLOSE BUTTON
============================== */

  .sidebar-close-btn {
    display: block !important;

    width: 100%;

    margin-top: 25px;

    padding: 12px;

    border-radius: 10px;

    background: #dc2626;

    color: #fff;

    border: none;

    font-weight: 800;

    cursor: pointer;
  }

  /* ==============================
HIDE ITEMS MOVED TO MOBILE HUD
============================== */

  .sidebar-menu a.mobile-hud-moved {
    display: none !important;
  }
}

/* ==============================
DESKTOP SHOW MOVED ITEMS
============================== */

@media (min-width: 901px) {
  .sidebar-menu a.mobile-hud-moved {
    display: flex;
  }
}
/* ==================================
   HIDE HUD MOVED LINKS ON MOBILE
================================== */

@media (max-width: 900px) {
  aside.sidebar-panel .sidebar-menu a.mobile-hud-moved {
    display: none !important;
  }
}