/* MiniPlayLabs responsive sidebar layout.
 * Desktop: persistent and collapsible.
 * Mobile: off-canvas drawer with an explicit toggle.
 */

.shell {
  transition: grid-template-columns .22s ease;
}

.sidebar {
  transition: width .22s ease, padding .22s ease, opacity .18s ease, transform .22s ease;
}

.menu-toggle {
  position: relative;
  flex: 0 0 auto;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.menu-toggle:hover {
  border-color: rgba(168, 85, 247, .55);
  background: #111a2a;
}

.menu-toggle i {
  transition: transform .18s ease;
}

/* Desktop collapsed state: the content expands into the freed sidebar space. */
@media (min-width: 901px) {
  .shell.sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .shell.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .shell.sidebar-collapsed main {
    min-width: 0;
  }
}

/* Mobile keeps the same navigation as an off-canvas drawer. */
@media (max-width: 900px) {
  .shell {
    display: block;
  }

  .shell.sidebar-collapsed {
    display: block;
  }

  .shell.sidebar-collapsed .sidebar {
    width: 270px;
    padding: 16px;
    border-right: 1px solid var(--line);
    opacity: 1;
    pointer-events: auto;
  }

  .menu-toggle {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 620px) {
  .menu-toggle {
    width: 34px;
    height: 34px;
  }
}