/* ADMIN */

#admin-menu {
  --menu-border: rgba(198, 158, 127, 0.2);
  --menu-shadow: 0 24px 48px rgba(51, 51, 51, 0.1);
  --menu-ease: cubic-bezier(0.6, 0, 0.4, 1);
  --menu-ease-out: cubic-bezier(0.3, 1, 0.4, 1);

  .nav {
    .nav-item {
      .nav-link {
        color: #3b3b3b;
        font-weight: 600;
        border: 0;
        border-radius: 999px;
        padding: 0.45rem 1rem;
        position: relative;
        transition: color 0.3s var(--menu-ease-out),
                    background-color 0.3s var(--menu-ease-out);

        &::after {
          content: '';
          position: absolute;
          bottom: 4px;
          left: 50%;
          transform: translateX(-50%) scaleX(0);
          width: 60%;
          height: 2px;
          border-radius: 2px;
          background: var(--sm-primary);
          transition: transform 0.3s var(--menu-ease-out);
          transform-origin: center;
        }

        &:hover,
        &:focus-visible {
          color: #5c4636;
          background-color: rgba(198, 158, 127, 0.1);

          &::after {
            transform: translateX(-50%) scaleX(1);
          }
        }
      }
    }
  }

  .admin-menu-content {
    .card-body {
      background: rgba(255, 255, 255, 0.99);
      border: 1px solid var(--menu-border);
      border-radius: 16px;
      box-shadow: var(--menu-shadow);

      ul {
        list-style-type: none;
        padding: 0;
      }

      li {
        border-left: solid 1px rgba(198, 158, 127, 0.3);
        padding-left: 10px;
        margin-left: 5px;
        color: #6c757d;
        transition: color 0.25s var(--menu-ease-out),
                    border-color 0.25s var(--menu-ease-out);
      }

      a {
        text-decoration: none;
      }

      .categorie-2-link {
        color: #3b3b3b;
        font-weight: 600;
        display: inline-flex;
        padding: 0.25rem 0.35rem;
        border-radius: 8px;
        transition: background-color 0.25s var(--menu-ease-out),
                    color 0.25s var(--menu-ease-out);

        &:hover {
          background-color: rgba(198, 158, 127, 0.14);
          color: #5c4636;
        }
      }

      .categorie-3-link {
        display: inline-flex;
        width: 100%;
        padding: 0.2rem 0.35rem;
        border-radius: 8px;
        transition: background-color 0.25s var(--menu-ease-out);
      }

      .categorie-3-link:hover li {
        color: #5c4636;
        border-left-color: rgba(198, 158, 127, 0.7);
      }

      .categorie-3-link:hover {
        background-color: rgba(198, 158, 127, 0.12);
      }
    }
  }

  &.homepage {
    .nav {
      border-bottom: unset;
      gap: 0.35rem;
    }

    .admin-menu-content {
      position: absolute;
      z-index: 10;
      left: 0;
      right: 0;
      width: auto;

      .card-body {
        border-radius: 0 0 16px 16px;
      }
    }
  }

  .menu-modern {
    border: 1px solid var(--menu-border) !important;
    border-radius: 16px;
    box-shadow: var(--menu-shadow);
    background: rgba(255, 255, 255, 0.96);
    padding: 0.4rem 0.75rem;
    transition: border-radius 0.25s var(--menu-ease),
                border-color 0.25s var(--menu-ease),
                box-shadow 0.25s var(--menu-ease);

    &.menu-open {
      border-radius: 16px 16px 0 0;
      border-bottom-color: transparent !important;
      box-shadow: 0 -4px 16px rgba(51, 51, 51, 0.04);
    }
  }

  .menu-tabs {
    border-bottom: 0;
    gap: 0.35rem;
  }

  .menu-panel {
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--menu-ease-out),
                transform 0.35s var(--menu-ease-out);

    &.show {
      opacity: 1;
      pointer-events: auto;
    }
  }

  &.homepage .menu-panel {
    transform: translateY(-6px);

    &.show {
      transform: translateY(0);
    }
  }
}