// ==========================================================================
// BASE NAVIGATION
// ==========================================================================
// Theme-agnostic navigation structures and behaviors
// Visual styling handled by themes
// ==========================================================================

// NAVIGATION BASE
.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  gap: var(--nav-gap, 8px);

  &.nav-vertical {
    flex-direction: column;
  }

  &.nav-horizontal {
    flex-direction: row;
  }

  &.nav-fill {
    .nav-item {
      flex: 1 1 auto;
      text-align: center;
    }
  }

  &.nav-justified {
    .nav-item {
      flex-basis: 0;
      flex-grow: 1;
      text-align: center;
    }
  }
}

.nav-item {
  display: flex;
}

.nav-link {
  display: block;
  padding: var(--nav-link-padding, 8px 16px);
  text-decoration: none;
  border: var(--nav-link-border, 1px solid transparent);
  border-radius: var(--nav-link-border-radius, 4px);
  transition: all var(--nav-link-transition-duration, 0.2s) var(--nav-link-transition-easing, ease);
  cursor: pointer;
  position: relative;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: var(--nav-link-focus-outline, 2px solid transparent);
    outline-offset: var(--nav-link-focus-outline-offset, 2px);
  }

  &.nav-link-active {
    // Active state styling handled by themes
  }

  &.nav-link-disabled {
    pointer-events: none;
    opacity: var(--nav-link-disabled-opacity, 0.6);
    cursor: not-allowed;
  }
}

// NAVIGATION TABS
.nav-tabs {
  border-bottom: var(--nav-tabs-border, 1px solid #dee2e6);

  .nav-link {
    margin-bottom: calc(var(--nav-tabs-border-width, 1px) * -1);
    border: var(--nav-tabs-link-border, 1px solid transparent);
    border-top-left-radius: var(--nav-tabs-border-radius, 4px);
    border-top-right-radius: var(--nav-tabs-border-radius, 4px);
    border-bottom: none;

    &.nav-link-active {
      border-bottom: var(--nav-tabs-active-border-bottom, 1px solid transparent);
    }
  }
}

// NAVIGATION PILLS
.nav-pills {
  .nav-link {
    border-radius: var(--nav-pills-border-radius, 20px);
  }
}

// NAVBAR
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--navbar-padding, 8px 16px);

  &.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  &.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--z-navbar, 1030);
  }

  &.navbar-fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-navbar, 1030);
  }

  &.navbar-sticky-top {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar, 1030);
  }
}

.navbar-brand {
  display: inline-block;
  padding-top: var(--navbar-brand-padding-y, 4px);
  padding-bottom: var(--navbar-brand-padding-y, 4px);
  margin-right: var(--navbar-brand-margin-end, 16px);
  font-size: var(--navbar-brand-font-size, 1.25rem);
  font-weight: var(--navbar-brand-font-weight, 600);
  line-height: inherit;
  text-decoration: none;
  white-space: nowrap;

  &:hover,
  &:focus {
    text-decoration: none;
  }
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;

  .nav-link {
    padding-right: 0;
    padding-left: 0;
  }
}

.navbar-collapse {
  align-items: center;
  width: 100%;
  flex-basis: 100%;
  flex-grow: 1;

  &.navbar-collapse-show {
    display: flex !important;
  }
}

.navbar-toggler {
  padding: var(--navbar-toggler-padding, 4px 8px);
  font-size: var(--navbar-toggler-font-size, 1.25rem);
  line-height: 1;
  border: var(--navbar-toggler-border, 1px solid transparent);
  border-radius: var(--navbar-toggler-border-radius, 4px);
  background: transparent;
  cursor: pointer;
  transition: all var(--navbar-toggler-transition-duration, 0.2s);

  &:focus {
    outline: var(--navbar-toggler-focus-outline, 2px solid transparent);
    outline-offset: var(--navbar-toggler-focus-outline-offset, 2px);
  }

  &:not(:disabled):not(.disabled):hover {
    text-decoration: none;
  }
}

.navbar-toggler-icon {
  display: inline-block;
  width: var(--navbar-toggler-icon-size, 24px);
  height: var(--navbar-toggler-icon-size, 24px);
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

// RESPONSIVE NAVBAR
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;

    .navbar-nav {
      flex-direction: row;

      .nav-link {
        padding-right: var(--navbar-nav-link-padding-x, 8px);
        padding-left: var(--navbar-nav-link-padding-x, 8px);
      }
    }

    .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }

    .navbar-toggler {
      display: none;
    }
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;

    .navbar-nav {
      flex-direction: row;

      .nav-link {
        padding-right: var(--navbar-nav-link-padding-x, 8px);
        padding-left: var(--navbar-nav-link-padding-x, 8px);
      }
    }

    .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }

    .navbar-toggler {
      display: none;
    }
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;

    .navbar-nav {
      flex-direction: row;

      .nav-link {
        padding-right: var(--navbar-nav-link-padding-x, 8px);
        padding-left: var(--navbar-nav-link-padding-x, 8px);
      }
    }

    .navbar-collapse {
      display: flex !important;
      flex-basis: auto;
    }

    .navbar-toggler {
      display: none;
    }
  }
}

// BREADCRUMB
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: var(--breadcrumb-padding, 12px 0);
  margin-bottom: var(--breadcrumb-margin-bottom, 16px);
  list-style: none;
  border-radius: var(--breadcrumb-border-radius, 4px);
}

.breadcrumb-item {
  display: flex;
  align-items: center;

  + .breadcrumb-item {
    padding-left: var(--breadcrumb-divider-padding, 8px);

    &::before {
      content: var(--breadcrumb-divider, '/');
      padding-right: var(--breadcrumb-divider-padding, 8px);
      opacity: var(--breadcrumb-divider-opacity, 0.6);
    }
  }

  &.breadcrumb-item-active {
    opacity: var(--breadcrumb-active-opacity, 0.6);
  }

  .breadcrumb-link {
    text-decoration: none;
    transition: all var(--breadcrumb-link-transition-duration, 0.2s);

    &:hover {
      text-decoration: underline;
    }

    &:focus {
      outline: var(--breadcrumb-link-focus-outline, 2px solid transparent);
      outline-offset: var(--breadcrumb-link-focus-outline-offset, 2px);
    }
  }
}

// PAGINATION
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: var(--pagination-border-radius, 4px);
  gap: var(--pagination-gap, 4px);
}

.pagination-item {
  &.pagination-item-active .pagination-link {
    z-index: 3;
    // Active styling handled by themes
  }

  &.pagination-item-disabled .pagination-link {
    pointer-events: none;
    opacity: var(--pagination-disabled-opacity, 0.6);
    cursor: not-allowed;
  }
}

.pagination-link {
  position: relative;
  display: block;
  padding: var(--pagination-link-padding, 8px 12px);
  text-decoration: none;
  border: var(--pagination-link-border, 1px solid #dee2e6);
  border-radius: var(--pagination-link-border-radius, 4px);
  transition: all var(--pagination-link-transition-duration, 0.2s) var(--pagination-link-transition-easing, ease);
  min-width: var(--pagination-link-min-width, 44px);
  text-align: center;

  &:hover {
    z-index: 2;
    text-decoration: none;
  }

  &:focus {
    z-index: 3;
    outline: var(--pagination-link-focus-outline, 2px solid transparent);
    outline-offset: var(--pagination-link-focus-outline-offset, 2px);
  }
}

// PAGINATION SIZES
.pagination-sm {
  .pagination-link {
    padding: var(--pagination-sm-padding, 4px 8px);
    font-size: var(--pagination-sm-font-size, 0.875rem);
    min-width: var(--pagination-sm-min-width, 32px);
  }
}

.pagination-lg {
  .pagination-link {
    padding: var(--pagination-lg-padding, 12px 16px);
    font-size: var(--pagination-lg-font-size, 1.125rem);
    min-width: var(--pagination-lg-min-width, 52px);
  }
}

// SIDEBAR NAVIGATION
.nav-sidebar {
  flex-direction: column;
  width: 100%;

  .nav-item {
    width: 100%;
  }

  .nav-link {
    display: flex;
    align-items: center;
    padding: var(--nav-sidebar-link-padding, 12px 16px);
    border-radius: var(--nav-sidebar-link-border-radius, 6px);
    margin-bottom: var(--nav-sidebar-link-margin, 4px);
    text-decoration: none;
    transition: all var(--nav-sidebar-link-transition-duration, 0.2s);
    position: relative;
    gap: var(--nav-sidebar-link-gap, 12px);

    .nav-icon {
      width: var(--nav-sidebar-icon-size, 20px);
      height: var(--nav-sidebar-icon-size, 20px);
      flex-shrink: 0;
    }

    .nav-text {
      flex: 1;
      min-width: 0;
    }

    .nav-badge {
      margin-left: auto;
      flex-shrink: 0;
    }

    .nav-arrow {
      margin-left: auto;
      transition: transform var(--nav-sidebar-arrow-transition-duration, 0.2s);
      flex-shrink: 0;
    }

    &.nav-link-expandable {
      cursor: pointer;

      &.nav-link-expanded .nav-arrow {
        transform: rotate(180deg);
      }
    }

    &.nav-link-active {
      // Active styling handled by themes
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--nav-sidebar-active-indicator-width, 4px);
        border-radius: var(--nav-sidebar-active-indicator-radius, 0 2px 2px 0);
        // Color handled by themes
      }
    }
  }

  .nav-submenu {
    margin-left: var(--nav-sidebar-submenu-indent, 32px);
    margin-top: var(--nav-sidebar-submenu-margin, 4px);
    padding-left: var(--nav-sidebar-submenu-padding, 16px);
    border-left: var(--nav-sidebar-submenu-border, 1px solid rgba(0, 0, 0, 0.1));

    .nav-link {
      padding: var(--nav-sidebar-submenu-link-padding, 8px 12px);
      font-size: var(--nav-sidebar-submenu-font-size, 0.875rem);
    }
  }
}

// MOBILE NAVIGATION
@media (max-width: 768px) {
  .nav-sidebar {
    .nav-link {
      padding: var(--nav-sidebar-mobile-padding, 16px);
      font-size: var(--nav-sidebar-mobile-font-size, 1rem);
    }
  }

  .navbar-collapse {
    display: none;

    &.navbar-collapse-show {
      display: block !important;
    }
  }

  .navbar-nav {
    .nav-item {
      margin: var(--navbar-mobile-item-margin, 4px 0);
    }

    .nav-link {
      padding: var(--navbar-mobile-link-padding, 12px 16px);
    }
  }
}

// ACCESSIBILITY
@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .navbar-toggler,
  .breadcrumb-link,
  .pagination-link,
  .nav-sidebar .nav-arrow {
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .nav-link,
  .navbar-toggler,
  .pagination-link {
    border-width: 2px;
  }

  .nav-link:focus,
  .navbar-toggler:focus,
  .breadcrumb-link:focus,
  .pagination-link:focus {
    outline-width: 3px;
  }
}