/* Navigation Component System */

/* Base Navigation */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-accent);
    text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-accent-dark);
    text-decoration: none;
}

.nav-link.disabled {
    color: var(--color-muted);
    pointer-events: none;
    cursor: default;
}

/* Navigation Variants */
.nav-tabs {
    border-bottom: var(--border-width-1) solid var(--border-color);
}

.nav-tabs .nav-item {
    margin-bottom: calc(var(--border-width-1) * -1);
}

.nav-tabs .nav-link {
    border: var(--border-width-1) solid transparent;
    border-top-left-radius: var(--radius-base);
    border-top-right-radius: var(--radius-base);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--color-gray-200) var(--color-gray-200) var(--border-color);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--color-gray-700);
    background-color: var(--color-white);
    border-color: var(--border-color) var(--border-color) var(--color-white);
}

.nav-pills .nav-link {
    border-radius: var(--radius-base);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--color-white);
    background-color: var(--color-accent);
}

/* Site Navigation */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) 0;
}

.site-nav .nav-brand {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    text-decoration: none;
}

.site-nav .nav-brand:hover {
    color: var(--color-accent);
    text-decoration: none;
}

.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-left: auto;
}

.site-nav .nav-link {
    padding: var(--spacing-1) var(--spacing-2);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    color: var(--color-accent);
}

.site-nav .nav-link.active {
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
}

/* Breadcrumb Navigation */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-2) 0;
    margin-bottom: var(--spacing-4);
    list-style: none;
    background-color: transparent;
}

.breadcrumb-item {
    display: flex;
}

.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--spacing-2);
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: var(--spacing-2);
    color: var(--color-muted);
    content: "/";
}

.breadcrumb-item.active {
    color: var(--color-muted);
}

/* Pagination */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: var(--radius-base);
}

.page-link {
    position: relative;
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    margin-left: calc(var(--border-width-1) * -1);
    line-height: 1.25;
    color: var(--color-accent);
    text-decoration: none;
    background-color: var(--color-white);
    border: var(--border-width-1) solid var(--border-color);
}

.page-link:hover {
    z-index: 2;
    color: var(--color-accent-dark);
    text-decoration: none;
    background-color: var(--color-gray-100);
    border-color: var(--border-color);
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring for pagination */
}

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: var(--radius-base);
    border-bottom-left-radius: var(--radius-base);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--radius-base);
    border-bottom-right-radius: var(--radius-base);
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--color-white);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.page-item.disabled .page-link {
    color: var(--color-muted);
    pointer-events: none;
    cursor: auto;
    background-color: var(--color-white);
    border-color: var(--border-color);
}

/* Pagination Sizes */
.pagination-lg .page-link {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-lg);
    line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

.pagination-sm .page-link {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}


/* Mobile Navigation */
@media (max-width: 1023px) {
    /* Navbar positioning handled by grid system */

    .navbar-container {
        flex-wrap: nowrap;
        padding: var(--spacing-2) var(--spacing-3);
        gap: var(--spacing-2);
    }

    /* Mobile navbar layout: [brand] [spacer] [account-icon] */

    /* Hide hamburger toggle on mobile (sidebar now opened from bottom nav) */
    .navbar-toggle {
        display: none;
    }

    /* Hide nav links from navbar on mobile — they move to sidebar overlay */
    .js-enabled .navbar-main {
        display: none;
    }

    /* No-JS fallback: show nav links inline when JS is disabled */
    .navbar-main {
        order: 2;
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: var(--spacing-2);
    }

    .navbar-brand {
        display: none;
    }

    .navbar-brand-mobile {
        order: 1;
        flex-shrink: 0;
    }

    /* Spacer pushes right items to the end */
    .navbar-spacer {
        flex: 1;
        order: 2;
    }

    /* Hide desktop user menu on mobile — replaced by .navbar-mobile-account */
    .js-enabled .navbar-user {
        display: none;
    }

    .navbar-user {
        order: 4;
        flex-shrink: 0;
    }

    /* Mobile account dropdown (balance pill trigger) */
    .js-enabled .navbar-mobile-account {
        display: block;
        order: 3;
        flex-shrink: 0;
    }

    .skip-nav {
        left: var(--spacing-2);
    }

    .navbar-nav {
        gap: var(--spacing-2);
        flex-wrap: wrap;
    }

    .navbar .nav-link {
        padding: var(--spacing-1) var(--spacing-2);
        font-size: var(--font-size-sm);
    }

    .navbar-text {
        font-size: var(--font-size-xs);
        padding: var(--spacing-1) var(--spacing-2);
    }

    .navbar-logo {
        font-size: var(--font-size-lg);
    }

    .site-nav {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-2);
    }

    .site-nav .nav-links {
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
    }

    .breadcrumb {
        font-size: var(--font-size-sm);
    }

    .pagination {
        font-size: var(--font-size-sm);
    }

    .page-link {
        padding: var(--spacing-1) var(--spacing-2);
    }
}

/* Unified Navbar */
/* Note: Positioning and z-index handled by .site-navbar in _universal_grid.css */
.navbar {
    background-color: var(--color-white);
    border-bottom: var(--border-width-1) solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-3) var(--spacing-4);
}

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

.navbar-main {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

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

.navbar-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    row-gap: var(--spacing-2);  /* Tighter vertical spacing when wrapped */
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar .nav-item {
    margin: 0;
}

.navbar .nav-link {
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    border-radius: var(--radius-base);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--color-accent);
    background-color: var(--color-gray-100);
    text-decoration: none;
}

.navbar .nav-link.active {
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    border-radius: 0;
}

/* Navbar-specific button override: Reduced padding for thinner navbar */
.navbar .btn-tertiary {
    --btn-padding-y: 0.375rem; /* 6px - between spacing-1 (4px) and spacing-2 (8px) */
    border: none; /* Remove border for exact height match */
}

.navbar-text {
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--color-gray-700);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.navbar-toggle {
    display: none;
    background: none;
    border: none;
    padding: var(--spacing-2);
    cursor: pointer;
    border-radius: var(--radius-base);
}

.navbar-toggle:hover {
    background-color: var(--color-gray-100);
}

.navbar-toggle-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--color-gray-600);
    position: relative;
}

.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--color-gray-600);
}

.navbar-toggle-icon::before {
    top: -6px;
}

.navbar-toggle-icon::after {
    top: 6px;
}

/* Skip Navigation */
.skip-nav {
    position: absolute;
    top: -50px;
    left: var(--spacing-2);
    z-index: calc(var(--z-100) + 10); /* Above navbar */
}

.skip-nav:focus {
    top: var(--spacing-2);
}

/* Navigation States */
.nav-loading {
    opacity: 0.6;
    pointer-events: none;
}

.nav-error {
    color: var(--color-danger);
}

.nav-error .nav-link {
    color: var(--color-danger);
}

.nav-success {
    color: var(--color-success);
}

.nav-success .nav-link {
    color: var(--color-success);
}

/* ========================================
   NAVBAR USER MENU DROPDOWN
   ======================================== */

/* Wrapper - Contains details element */
.navbar-user-menu-wrapper {
    position: relative;
}

/* Details element - Progressive enhancement container */
.navbar-user-menu-details {
    position: relative;
}

/* Trigger button - Extends .nav-link */
.navbar-user-menu-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    /* Dynamic width - no max-width constraint to accommodate any display name length */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active state when dropdown is open */
.navbar-user-menu-details[open] > .navbar-user-menu-trigger {
    background-color: var(--color-gray-100);
}

/* Chevron indicator */
.dropdown-chevron {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
    /* Functional UX: Rotate when open */
    transition: transform 0.15s ease;
}

.navbar-user-menu-details[open] .dropdown-chevron {
    transform: rotate(180deg);
}

/* Dropdown container */
.navbar-user-menu-dropdown {
    position: absolute;
    top: calc(100% + var(--spacing-1));
    right: 0;
    z-index: var(--z-50);

    /* Card styling */
    background-color: var(--color-white);
    border: var(--border-width-1) solid var(--border-color);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-md);

    /* Dimensions - flexible width based on content */
    min-width: 180px;
    width: max-content;
    max-width: 320px;

    /* Hidden by default (details closed) */
    display: none;
}

/* Show dropdown when details is open */
.navbar-user-menu-details[open] .navbar-user-menu-dropdown {
    display: block;
}

/* Menu content wrapper */
.navbar-user-menu-content {
    padding: var(--spacing-2) 0;
}

/* Menu items */
.navbar-user-menu-item {
    display: block;
    padding: var(--spacing-3); /* Uniform 12px padding all around for consistency */
    color: var(--color-gray-700);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    transition: none; /* Respect no-animation policy */
}

.navbar-user-menu-item:hover,
.navbar-user-menu-item:focus {
    color: var(--color-accent);
    background-color: var(--color-gray-100);
    text-decoration: none;
}

/* Section dividers */
.navbar-user-menu-divider {
    height: var(--border-width-1);
    margin: var(--spacing-2) 0;
    background-color: var(--border-color-light);
}

/* Mobile responsive - Navbar user menu dropdown */
@media (max-width: 1023px) {
    .navbar-mobile-account .navbar-user-menu-dropdown {
        /* Right-aligned under trigger, constrained to viewport */
        right: 0;
        left: auto;
        width: max-content;
        max-width: calc(100vw - var(--spacing-4));
    }
}

/* Balance link at top of dropdown menu */
.navbar-user-menu-balance-link {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.navbar-user-menu-balance-label {
    font-weight: var(--font-weight-medium);
}

.navbar-user-menu-balance-amount {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

/* Mobile account trigger (balance pill + chevron) */
.navbar-mobile-account {
    display: none;
}

.navbar-mobile-account-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    cursor: pointer;
    min-height: 44px;
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-base);
    list-style: none;
}

/* Remove default <summary> marker */
.navbar-mobile-account-trigger::-webkit-details-marker {
    display: none;
}

.navbar-mobile-account-trigger:hover,
.navbar-mobile-account-trigger:focus-visible {
    background-color: var(--color-gray-100);
}