/* ==================================
     Sidebar Base
  ================================== */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sb-w);
    background: var(--sb-bg);
    color: var(--sb-fg);
    z-index: 1200;
    transform: none;
  }
  
  /* Brand */
  .sidebar-brand {
    padding: 20px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--sb-border);
  }
  
  .sidebar-brand img {
    height: 34px;
  }
  
  /* Nav */
  .sidebar-nav {
    padding: 10px 0;
  }
  
  .nav-link {
    display: flex;
    align-items: center;
    color: #c8c8c8;
    padding: 10px 18px;
    font-size: 15px;
    text-decoration: none;
    transition: background .2s, color .2s;
  }
  
  .nav-link:hover {
    background: #14171c;
    color: var(--sb-hover);
  }
  
  .nav-link.active {
    background: #14171c;
    color: var(--sb-active);
  }
  
  .nav-link i {
    margin-right: 10px;
    font-size: 1.1rem;
  }
  
  /* Unterpunkte */
  .sublink {
    padding-left: 45px !important;
    font-size: 14px;
    color: #dcdcdc;
  }
  .sublink:hover {
    color: var(--sb-hover);
  }
  
  /* Badge */
  .badge-pill {
    background: var(--sb-active);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: auto;
  }
  
  .plus {
    background: #fff;
    color: #000;
  }
  
  /* Separator */
  .sidebar-sep {
    border-top: 1px solid var(--sb-border);
    margin: 10px 0;
  }
  
  /* Dropdown Button */
  .dropdown-toggle {
    border: none !important;
    background: none;
    width: 100%;
    text-align: left;
  }
  
  .dropdown-toggle::after {
    display: none !important;
  }
  
  /* Collapse */
  .collapse {
    background: #111318;
  }
  
  /* ==================================
     Support Status
  ================================== */
  .status-online {
    color: #17d68f;
    font-weight: 600;
  }
  .status-offline {
    color: #dc3545;
    font-weight: 600;
  }
 /* ==================================
   XS + SM  < 768px  (Handy)
================================== */
@media (max-width: 767.98px) {

  #burgerBtn {
    display: flex !important;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .sidebar .collapse {
    display: none;
  }
  .sidebar .collapse.show {
    display: block;
  }
}


/* ==================================
   MD + LG  768 – 1199px  (Tablet)
================================== */
@media (min-width: 768px) and (max-width: 1199.98px) {

  #burgerBtn {
    display: flex !important;
  }

  .sidebar {
    transform: translateX(0);
    width: 72px; /* col-md kompatibel */
    transition: width .25s ease;
  }

  .sidebar.open {
    width: var(--sb-w);
  }

  .main-content {
    margin-left: 72px !important;
    transition: margin-left .25s ease;
  }

  .sidebar.open ~ .main-content {
    margin-left: var(--sb-w) !important;
  }

  .sidebar .collapse {
    display: none;
  }
  .sidebar.open .collapse.show {
    display: block;
  }
}


/* ==================================
   XL  1200 – 1399px  (kleiner Desktop)
================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {

  #burgerBtn {
    display: flex !important;
  }

  .sidebar {
    width: var(--sb-w);
  }

  .main-content {
    margin-left: var(--sb-w) !important;
  }
}


/* ==================================
   XXL  ≥ 1400px  (Desktop)
================================== */
@media (min-width: 1400px) {

  #burgerBtn {
    display: none !important;
  }

  .sidebar {
    width: var(--sb-w);
  }

  .main-content {
    margin-left: var(--sb-w) !important;
  }
}