.sidebar {
  width: 280px;
  min-width: 0;
  max-width: none;
  transition: width 0.35s ease-in-out, margin-left 0.35s ease-in-out,
    left 0.35s ease-in-out, right 0.35s ease-in-out;
}

/* Phones & portrait tablets: fully hidden by default, drawer when toggled open */
@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -280px;
  }

  .sidebar.collapsed {
    margin-left: 0;
  }
}

/* Large desktops: collapsed sidebar shrinks to an icon-only rail */
@media (min-width: 1200px) {
  .sidebar.collapsed {
    width: 76px;
    margin-left: 0;
  }

  .sidebar.collapsed .sidebar-content {
    overflow: visible;
  }

  .sidebar.collapsed .sidebar-brand {
    padding: 1.15rem 0;
    text-align: center;
  }

  .sidebar.collapsed .sidebar-brand img {
    height: 40px !important;
    width: 40px !important;
  }

  .sidebar.collapsed .sidebar-header {
    text-indent: -9999px;
    padding: 1.5rem 0 0.375rem;
  }

  .sidebar.collapsed .sidebar-item {
    text-align: center;
  }

  .sidebar.collapsed .sidebar-link {
    padding: 0.625rem 0;
    border-left-width: 0;
  }

  .sidebar.collapsed .sidebar-link svg,
  .sidebar.collapsed .sidebar-link i {
    margin-right: 0;
  }

  .sidebar.collapsed .sidebar-link span {
    display: none;
  }

  .sidebar.collapsed .sidebar-badge {
    display: none;
  }

  .sidebar.collapsed .sidebar-cta {
    display: none;
  }
}

/* Tablets & touch devices: collapsed hides the sidebar entirely
   (overrides the icon-only rail above for coarse/non-hover pointers) */
@media (min-width: 992px) and (pointer: coarse), (min-width: 992px) and (hover: none) {
  .sidebar.collapsed {
    width: 280px;
    margin-left: -280px;
  }

  .sidebar.collapsed ~ .main {
    width: 100%;
  }
}