/**
 * Мобильная вёрстка админки (≤767px). Классы навешиваются из AdminLayout.
 */
/* Сначала слева выезжает блок вкладок, затем из него колонка открывается слева направо. */
@keyframes unify-nav-fly-in {
  from { transform: translate3d(calc(-100% - 1.25rem), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@keyframes unify-content-from-nav {
  from { clip-path: inset(0 100% 0 0 round 0 16px 16px 0); }
  to { clip-path: inset(0 0 0 0 round 0 16px 16px 0); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .unify-admin-shell > .unify-admin-sidebar {
    position: relative;
    z-index: 2;
    animation: unify-nav-fly-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .unify-admin-shell > main.unify-content-frame {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-left: -12px;
    margin-right: 0.75rem;
    border: 1px solid #c4c4c8;
    border-left-color: transparent;
    border-radius: 0 16px 16px 0;
    padding-left: calc(12px + 1rem);
    animation: unify-content-from-nav 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .unify-admin-shell > .unify-admin-sidebar {
    position: relative;
    z-index: 2;
    animation: unify-nav-fly-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .unify-admin-shell > main.unify-content-frame {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-left: -12px;
    margin-right: calc(0.75rem + 12px);
    border: 1px solid #c4c4c8;
    border-left-color: transparent;
    border-radius: 0 16px 16px 0;
    padding-left: calc(12px + 1.5rem);
    animation: unify-content-from-nav 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
  }
}
@media (min-width: 1440px) {
  .unify-admin-shell > .unify-admin-sidebar {
    position: relative;
    z-index: 2;
    animation: unify-nav-fly-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .unify-admin-shell > main.unify-content-frame {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-left: -12px;
    margin-right: calc(1rem + 12px);
    border: 1px solid #c4c4c8;
    border-left-color: transparent;
    border-radius: 0 16px 16px 0;
    padding-left: calc(12px + 2rem);
    animation: unify-content-from-nav 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
  }
}
@keyframes unify-nav-settle {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
@media (min-width: 768px) {
  .unify-admin-sidebar.unify-sidebar-open,
  .unify-admin-sidebar.unify-sidebar-collapsed {
    overflow: hidden;
    transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .unify-admin-sidebar.unify-sidebar-open { width: 260px !important; }
  .unify-admin-sidebar.unify-sidebar-collapsed { width: 72px !important; }
  .unify-admin-sidebar.unify-sidebar-open nav,
  .unify-admin-sidebar.unify-sidebar-collapsed nav {
    animation: unify-nav-settle 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .unify-admin-shell > .unify-admin-sidebar,
  .unify-admin-shell > main.unify-content-frame {
    animation: none;
  }
}

@media (max-width: 767px) {
  .unify-admin-shell {
    width: 100%;
    max-width: 100vw;
  }

  .unify-admin-shell--mobile .unify-admin-sidebar {
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0 !important;
    width: min(280px, calc(100vw - env(safe-area-inset-left, 0px) - 2.5rem)) !important;
    max-width: calc(100vw - 2.5rem);
    border-radius: 0 1rem 1rem 0 !important;
    transform: translateX(-110%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 16px 48px rgb(0 0 0 / 0.22);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: none !important;
  }

  .unify-admin-shell--mobile.unify-admin-shell--nav-open .unify-admin-sidebar {
    transform: translateX(0);
  }

  .unify-mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .unify-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(228 228 231);
    background: #fff;
    color: rgb(24 24 27);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  }

  html.dark .unify-mobile-menu-btn {
    border-color: rgb(63 63 70);
    background: rgb(39 39 42);
    color: rgb(244 244 245);
  }

  .unify-admin-shell--mobile > main.unify-content-frame {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    margin: 0.5rem !important;
    margin-top: max(0.5rem, env(safe-area-inset-top, 0px)) !important;
    margin-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px)) !important;
    margin-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    padding: 0.75rem !important;
    border: 1px solid #c4c4c8 !important;
    border-radius: 16px !important;
    clip-path: none !important;
    transform: none !important;
    animation: none !important;
  }

  .unify-admin-shell--mobile kbd {
    display: none !important;
  }

  .unify-admin-shell--mobile .unify-surface-scroll {
    -webkit-overflow-scrolling: touch;
  }

  .unify-admin-shell--mobile .overflow-x-auto,
  .unify-admin-shell--mobile [class*="overflow-x-auto"] {
    max-width: 100%;
  }

  .unify-admin-shell--mobile table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .unify-admin-shell--mobile .unify-core-configs-split {
    grid-template-columns: 1fr !important;
  }

  .unify-admin-shell--mobile .unify-dorks-grid {
    grid-template-columns: 1fr !important;
  }

}

.unify-dorks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .unify-mobile-menu-btn,
  .unify-mobile-nav-backdrop {
    display: none !important;
  }
}
