/* aside */

@media (min-width: 1280px) {
  .min-w-sidebar-xl {
    min-width: 7.25rem; /* 116px */
  }
}
@media (min-width: 1280px) {
  .max-w-filters-xl {
    max-width: 21rem;
  }
}
@media (min-width: 1280px) {
  .justify-between-xl {
    justify-content: space-between;
  }
}
@media (min-width: 768px) {
  .mb-md-0 {
    margin-bottom: 0;
  }
}
@media (min-width: 1280px) {
  .mb-xl-0 {
    margin-bottom: 0;
  }
}
@media (min-width: 1280px) {
  .block-xl {
    display: block;
  }
}
@media (min-width: 768px) {
  .max-w-filters-md {
    max-width: 21rem;
  }
}
@media (min-width: 1280px) {
  .flex-xl {
    display: flex !important;
  }
}
@media (min-width: 1280px) {
  .block-xl {
    display: block;
  }
}
@media (max-width: 1280px) {
  .hidden-sm {
    display: none;
  }
}
@media (min-width: 1280px) {
  .hidden-xl {
    display: none !important;
  }
}

@media (max-width: 1280.98px) {
  .hidden-md-down {
    display: none !important;
  }
}

@media (min-width: 1280px) and (min-width: 1024px) {
  .overflow-visible-lg-xl {
    overflow: visible;
  }
}
@media (min-width: 1280px) {
  .opacity-100-xl {
    opacity: 1 !important;
  }
}

/* main margin-left */

@media (min-width: 1280px) {
  .main-ml {
    margin-left: 7.5rem !important;
  }
}
/* header margin-left */
@media (min-width: 1280px) {
  .header-ml {
    margin-left: 7.5rem !important;
  }
}

.max-w-sidebar {
  max-width: 20rem;
}

.right-0 {
  right: 0;
}
.top-16 {
  top: 4rem;
}
.z-50 {
  z-index: 50;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}

.rounded-full {
  border-radius: 9999px;
}
.bg-blue {
  --tw-bg-opacity: 1;
  background: linear-gradient(
    to right,
    rgba(116, 116, 249, 1),
    rgba(48, 48, 237, 1)
  );
}
aside {
  width: 116px;
  transition: width 0.4s ease;
}

aside.sidebar-open {
  width: 320px;
}

.toggle-button {
  transform: translateX(50%) scale(1) translateZ(0);
  transition: transform 0.1s ease;
}

.toggle-button:hover {
  transform: translateX(50%) scale(1.05) translateZ(0);
}

.icon {
  transition: transform 0.3s ease;
}

.icon.rotated {
  transform: rotate(180deg);
}

/* margin */
.mx-9 {
  margin-left: 2.25rem;
  margin-right: 2.25rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.ml-7 {
  margin-left: 1.75rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
/* padding */
.px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
.py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}
.pb-8 {
  padding-bottom: 2rem;
}
/* width and height */
.w-16 {
  width: 4rem;
}

.h-16 {
  height: 4rem;
}
.h-6 {
  height: 1.5rem;
}
.h-px {
  height: 1px;
}
.w-6 {
  width: 1.5rem;
}

.shrink-0 {
  flex-shrink: 0;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.fa-md {
  font-size: 1.5em;
}

/* burger-menu */
body {
  margin: 0;
  font-family: sans-serif;
}

/* Кнопка бургер */
.burger-menu {
  font-size: 24px;
  margin: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: relative;
}

/* Скрываем бургер при открытом меню */
.burger-menu.hidden {
  display: none;
}

/* Выезжающее меню */
.sidebar-mob {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #fff;
  overflow: hidden;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}

/* Меню открыто */
.sidebar-mob.open {
  width: 320px;
}

/* Шапка меню */
.sidebar-mob-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  font-weight: bold;
}

/* Кнопка закрытия */
.sidebar-close-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Контент */
.sidebar-mob-content {
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
}

/* Затемнение */
.overlay-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

.overlay-bg.visible {
  opacity: 1;
  pointer-events: auto;
}

/* aside sidebar */
aside:not(.sidebar-open) .desc-user {
  pointer-events: none;
  opacity: 0;
}

aside.sidebar-open .desc-user {
  pointer-events: auto;
  opacity: 1;
}

aside:not(.sidebar-open) nav a::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  background: linear-gradient(
    to right,
    rgba(116, 116, 249, 1),
    rgba(48, 48, 237, 1)
  );
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 9999;
}

aside:not(.sidebar-open) nav a:hover::after {
  opacity: 1;
}

/* Notifications block */
.notifications-block {
  width: 300px;
}

@media (min-width: 1280px) {
  .notifications-block {
    width: 400px;
  }
}