// ==========================================================================
// Navigation Components
// ==========================================================================

// Sidebar Navigation
.sidebar-nav {
  .nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.75rem;

    .nav-link {
      color: var(--bs-body-color);
      border-radius: var(--border-radius-sm);
      margin-bottom: 0.25rem;
      display: flex;
      align-items: center;
      transition: var(--transition-fast);

      i {
        width: 1.25rem;
        margin-right: 0.75rem;
        font-size: 1rem;
      }

      &:hover {
        background-color: var(--bs-primary-bg-subtle);
        color: var(--bs-primary);
        transform: translateX(4px);
      }

      &.active {
        background-color: var(--bs-primary);
        color: white;
        box-shadow: var(--box-shadow-sm);
        border-radius: 0;

        &:hover {
          background-color: var(--bs-primary);
          color: white;
          transform: none;
        }
      }

      // Expandable menu styling
      &[data-bs-toggle="collapse"] {
        .bi-chevron-down {
          transition: transform 0.2s ease;
        }

        &[aria-expanded="true"] {
          .bi-chevron-down {
            transform: rotate(180deg);
          }
        }
      }
    }
  }

  // Submenu styling
  .nav-submenu {
    background-color: rgba(var(--bs-secondary-rgb), 0.05);
    border-radius: var(--border-radius-sm);
    margin: 0.25rem 0;
    padding: 0.25rem 0;
    width: 100%;
    display: block !important;

    // Override Bootstrap nav defaults that might cause multi-column layout
    &.nav {
      display: block !important;
      flex-direction: column !important;
      flex-wrap: nowrap !important;
    }

    .nav-item {
      width: 100% !important;
      margin-bottom: 0;
      flex: none !important;
      display: block !important;
    }

    .nav-link {
      padding: 0.4rem 1rem 0.4rem 2.25rem !important;
      margin-bottom: 0 !important;
      font-size: 0.85rem !important;
      display: flex !important;
      align-items: center !important;
      width: 100% !important;
      white-space: nowrap !important;
      border-radius: var(--border-radius-sm) !important;
      transition: all 0.2s ease !important;
      text-decoration: none !important;
      border: none !important;

      i {
        width: 1rem;
        margin-right: 0.5rem;
        font-size: 0.8rem;
        opacity: 0.7;
        flex-shrink: 0;
      }

      span {
        flex-grow: 1;
        text-align: left;
      }

      &:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.08);
        transform: translateX(2px);
        color: var(--bs-primary);

        i {
          opacity: 1;
        }
      }

      &.active {
        background-color: rgba(var(--bs-primary-rgb), 0.15);
        color: var(--bs-primary);
        font-weight: 500;

        i {
          opacity: 1;
        }

        &:hover {
          background-color: var(--bs-primary);
          color: white;
          transform: translateX(2px);

          i {
            opacity: 1;
            color: white;
          }
        }
      }
    }
  }
}

// Top Navigation
.admin-header {
  .navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;

    img {
      margin-right: 0.5rem;
    }
  }

  .search-container {
    max-width: 400px;

    .form-control {
      border: 1px solid var(--bs-border-color);
      border-radius: var(--border-radius-sm);
      padding-right: 2.5rem;

      &:focus {
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
        border-color: var(--bs-primary);
      }
    }

    .bi-search {
      color: var(--bs-secondary);
      pointer-events: none;
    }
  }
}

// ==========================================================================
// Sidebar collapse behavior (desktop only)
// ==========================================================================
.admin-wrapper {
  &.sidebar-collapsed {
    .admin-sidebar {
      width: var(--sidebar-mini-width);

      .sidebar-nav {
        .nav-link {
          justify-content: center;
          padding: 0.75rem 0.5rem;

          span {
            display: none;
          }

          .badge {
            display: none;
          }

          .bi-chevron-down {
            display: none;
          }

          i {
            margin-right: 0;
            font-size: 1.1rem;
          }
        }

        .nav-item {
          small {
            display: none;
          }
        }

        // Hide submenu in collapsed state
        .collapse {
          display: none !important;
        }

        // Disable submenu toggle functionality in collapsed state
        .nav-link[data-bs-toggle="collapse"] {
          pointer-events: none;
        }
      }
    }

    .admin-main,
    .admin-footer {
      margin-left: var(--sidebar-mini-width);
    }
  }
}

// ==========================================================================
// Mobile Sidebar Backdrop
// ==========================================================================
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: $zindex-modal-backdrop; // 1040
  opacity: 0;
  transition: opacity 0.3s ease;

  &.show {
    display: block;
    opacity: 1;
  }
}

// ==========================================================================
// Mobile Responsive (< 992px)
// ==========================================================================
@media (max-width: 991.98px) {
  // On mobile, collapse state should not affect main/footer margins
  .admin-wrapper.sidebar-collapsed {
    .admin-main,
    .admin-footer {
      margin-left: 0;
    }

    // Restore full sidebar width when opened on mobile
    .admin-sidebar {
      width: var(--sidebar-width);

      .sidebar-nav {
        .nav-link {
          justify-content: flex-start;
          padding: 0.75rem 1rem;

          span,
          .badge,
          .bi-chevron-down {
            display: initial;
          }

          i {
            margin-right: 0.75rem;
            font-size: 1rem;
          }
        }

        .nav-item small {
          display: block;
        }

        .collapse {
          display: block !important;
        }

        .nav-link[data-bs-toggle="collapse"] {
          pointer-events: auto;
        }
      }
    }
  }

  // Header adjustments for mobile
  .admin-header {
    .navbar-brand {
      h1 {
        font-size: 1.125rem;
      }
    }

    // Hide search on small screens
    .search-container {
      display: none;
    }

    // Compact header buttons
    .navbar-nav {
      gap: 0.25rem;
    }
  }
}

// Show search on tablets (md to lg)
@media (min-width: 768px) and (max-width: 991.98px) {
  .admin-header .search-container {
    display: block;
    max-width: 240px;
  }
}
