@media (max-width: 1180px) {
  .chip.user span,
  .chip.role span {
    display: none;
  }

  .chip.user,
  .chip.role {
    width: 36px;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 980px) {
  .sidebar {
    width: min(var(--admin-sidebar-width), calc(100vw - 42px));
    transform: translateX(-105%);
    box-shadow: 28px 0 70px rgba(39, 76, 66, 0.16);
  }

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

  .sidebar.mobile-open + .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar.collapsed {
    width: min(var(--admin-sidebar-width), calc(100vw - 42px));
  }

  .sidebar.collapsed .brand-copy,
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .menu-link span,
  .sidebar.collapsed .logout span,
  .sidebar.collapsed .sidebar-search input {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .sidebar.collapsed .brand,
  .sidebar.collapsed .menu-link,
  .sidebar.collapsed .logout {
    justify-content: flex-start;
  }

  .sidebar.collapsed .sidebar-search,
  .sidebar.collapsed .sidebar-section-label {
    display: block;
  }

  .sidebar.collapsed .sidebar-search {
    pointer-events: auto;
  }

  .sidebar.collapsed .sidebar-search svg {
    left: 13px;
  }

  .sidebar.collapsed .menu {
    gap: 3px;
    padding: 2px 5px 10px;
  }

  .sidebar.collapsed .menu-group {
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .sidebar.collapsed .menu-group + .menu-group {
    margin-top: 6px;
  }

  .sidebar.collapsed .menu-link {
    min-height: 45px;
  }

  .sidebar.collapsed .menu-link svg {
    margin-inline: 0;
  }

  .main,
  .sidebar.collapsed + .sidebar-backdrop + .main {
    margin-left: 0;
  }

  .topbar {
    min-height: 76px;
  }

  :root {
    --admin-topbar-height: 82px;
  }
}

@media (max-width: 720px) {
  .topbar {
    gap: 10px;
    padding: 12px 14px;
  }

  .topbar .right {
    gap: 6px;
  }

  .chip.user,
  .chip.role,
  .chip.ok,
  .chip.wip {
    display: none;
  }

  .title-eyebrow {
    display: none;
  }

  .page-description {
    display: none;
  }

  .login {
    display: block;
    padding: 14px;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .login-aside {
    min-height: auto;
    padding: 30px 25px;
    border-right: 0;
    border-bottom: 1px solid var(--admin-line);
  }

  .login-aside h2 {
    max-width: 520px;
    margin-top: 22px;
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .login-points,
  .login-footnote {
    display: none;
  }

  .login-card {
    padding: 30px 24px 34px;
  }
}

@media (max-width: 480px) {
  .topbar .left {
    gap: 9px;
  }

  .title {
    max-width: 48vw;
  }

  .mode-switch {
    grid-template-columns: 1fr;
  }

  .mode-option {
    min-height: 65px;
  }
}