/* =========================================================
   WONDER APP - VENDOR APPLICATION
   File: /vendor_app/assets/css/navigation.css
   Purpose: Application navigation, menus, breadcrumbs,
            tabs, pagination navigation and mobile navigation
   ========================================================= */


/* =========================================================
   1. GLOBAL NAVIGATION BASE
   ========================================================= */

.app-navigation,
.navigation,
.vendor-navigation {
    position:relative;

    width:100%;
    min-width:0;

    color:var(--navigation-text, var(--color-text, #1f2937));
}

.app-navigation ul,
.navigation ul,
.vendor-navigation ul {
    list-style:none;

    padding:0;
    margin:0;
}

.app-navigation a,
.navigation a,
.vendor-navigation a {
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   2. PRIMARY TOP NAVIGATION
   ========================================================= */

.primary-navigation,
.main-navigation,
.vendor-primary-navigation {
    display:flex;
    align-items:center;

    width:100%;
    min-width:0;

    gap:var(--space-2, 8px);
}

.primary-navigation-list,
.main-navigation-list,
.vendor-primary-navigation-list {
    display:flex;
    align-items:center;

    width:100%;
    min-width:0;

    gap:var(--space-1, 4px);

    list-style:none;

    padding:0;
    margin:0;
}

.primary-navigation-item,
.main-navigation-item,
.vendor-primary-navigation-item {
    position:relative;

    flex:0 0 auto;
}

.primary-navigation-link,
.main-navigation-link,
.vendor-primary-navigation-link {
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border:1px solid transparent;
    border-radius:var(--radius-md, 10px);

    color:
        var(--navigation-link-text, #475569);

    background:transparent;

    font-size:
        var(--font-size-sm, 14px);

    font-weight:
        var(--font-weight-medium, 500);

    line-height:1.4;

    white-space:nowrap;

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.primary-navigation-link:hover,
.main-navigation-link:hover,
.vendor-primary-navigation-link:hover {
    color:
        var(--navigation-link-hover-text, #111827);

    background:
        var(--navigation-link-hover-bg, #f1f5f9);
}

.primary-navigation-link:focus-visible,
.main-navigation-link:focus-visible,
.vendor-primary-navigation-link:focus-visible {
    outline:
        2px solid var(--color-primary, #2563eb);

    outline-offset:2px;
}

.primary-navigation-link.active,
.main-navigation-link.active,
.vendor-primary-navigation-link.active,

.primary-navigation-item.active > .primary-navigation-link,
.main-navigation-item.active > .main-navigation-link,
.vendor-primary-navigation-item.active > .vendor-primary-navigation-link,

.primary-navigation-link[aria-current="page"],
.main-navigation-link[aria-current="page"],
.vendor-primary-navigation-link[aria-current="page"] {
    color:
        var(--navigation-active-text, #2563eb);

    background:
        var(--navigation-active-bg, #eff6ff);

    border-color:
        var(--navigation-active-border, #dbeafe);

    font-weight:
        var(--font-weight-semibold, 600);
}

.primary-navigation-link-icon,
.main-navigation-link-icon,
.vendor-primary-navigation-link-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex:0 0 20px;

    color:currentColor;
}

.primary-navigation-link-icon svg,
.main-navigation-link-icon svg,
.vendor-primary-navigation-link-icon svg {
    width:100%;
    height:100%;

    display:block;

    fill:none;
    stroke:currentColor;
}

.primary-navigation-link-label,
.main-navigation-link-label,
.vendor-primary-navigation-link-label {
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   3. DROPDOWN NAVIGATION
   ========================================================= */

.navigation-dropdown,
.primary-navigation-dropdown,
.vendor-navigation-dropdown {
    position:relative;
}

.navigation-dropdown-toggle,
.primary-navigation-dropdown-toggle,
.vendor-navigation-dropdown-toggle {
    display:inline-flex;
    align-items:center;

    gap:var(--space-2, 8px);
}

.navigation-dropdown-arrow,
.primary-navigation-dropdown-arrow,
.vendor-navigation-dropdown-arrow {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    flex:0 0 18px;

    transition:transform .2s ease;
}

.navigation-dropdown.is-open
.navigation-dropdown-arrow,

.primary-navigation-dropdown.is-open
.primary-navigation-dropdown-arrow,

.vendor-navigation-dropdown.is-open
.vendor-navigation-dropdown-arrow,

.navigation-dropdown-toggle[aria-expanded="true"]
.navigation-dropdown-arrow,

.primary-navigation-dropdown-toggle[aria-expanded="true"]
.primary-navigation-dropdown-arrow,

.vendor-navigation-dropdown-toggle[aria-expanded="true"]
.vendor-navigation-dropdown-arrow {
    transform:rotate(180deg);
}

.navigation-dropdown-menu,
.primary-navigation-dropdown-menu,
.vendor-navigation-dropdown-menu {
    position:absolute;

    top:calc(100% + 6px);
    left:0;

    z-index:var(--z-dropdown, 1000);

    min-width:220px;
    max-width:min(360px, calc(100vw - 32px));

    padding:var(--space-2, 8px);

    margin:0;

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 12px);

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        var(--shadow-lg,
        0 12px 30px rgba(15, 23, 42, .12));

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:
        translateY(-4px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;
}

.navigation-dropdown.is-open
.navigation-dropdown-menu,

.primary-navigation-dropdown.is-open
.primary-navigation-dropdown-menu,

.vendor-navigation-dropdown.is-open
.vendor-navigation-dropdown-menu,

.navigation-dropdown-menu.is-open,
.primary-navigation-dropdown-menu.is-open,
.vendor-navigation-dropdown-menu.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translateY(0);
}

.navigation-dropdown-item,
.primary-navigation-dropdown-item,
.vendor-navigation-dropdown-item {
    width:100%;

    margin:0 0 var(--space-1, 4px);
}

.navigation-dropdown-item:last-child,
.primary-navigation-dropdown-item:last-child,
.vendor-navigation-dropdown-item:last-child {
    margin-bottom:0;
}

.navigation-dropdown-link,
.primary-navigation-dropdown-link,
.vendor-navigation-dropdown-link {
    display:flex;
    align-items:center;

    width:100%;
    min-height:40px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border-radius:
        var(--radius-md, 10px);

    color:
        var(--navigation-dropdown-text, #475569);

    background:transparent;

    font-size:
        var(--font-size-sm, 14px);

    transition:
        color .18s ease,
        background-color .18s ease;
}

.navigation-dropdown-link:hover,
.primary-navigation-dropdown-link:hover,
.vendor-navigation-dropdown-link:hover {
    color:
        var(--navigation-link-hover-text, #111827);

    background:
        var(--navigation-link-hover-bg, #f1f5f9);
}

.navigation-dropdown-link.active,
.primary-navigation-dropdown-link.active,
.vendor-navigation-dropdown-link.active {
    color:
        var(--navigation-active-text, #2563eb);

    background:
        var(--navigation-active-bg, #eff6ff);

    font-weight:
        var(--font-weight-semibold, 600);
}

.navigation-dropdown-icon,
.primary-navigation-dropdown-icon,
.vendor-navigation-dropdown-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex:0 0 20px;

    color:currentColor;
}

.navigation-dropdown-label,
.primary-navigation-dropdown-label,
.vendor-navigation-dropdown-label {
    min-width:0;

    flex:1 1 auto;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   4. BREADCRUMBS
   ========================================================= */

.breadcrumbs,
.breadcrumb,
.vendor-breadcrumbs {
    display:flex;
    align-items:center;

    width:100%;
    min-width:0;

    margin-bottom:var(--space-4, 16px);

    color:
        var(--breadcrumb-muted, #64748b);

    font-size:
        var(--font-size-sm, 14px);
}

.breadcrumb-list,
.breadcrumbs-list,
.vendor-breadcrumb-list {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    min-width:0;

    list-style:none;

    padding:0;
    margin:0;

    gap:0;
}

.breadcrumb-item,
.breadcrumbs-item,
.vendor-breadcrumb-item {
    display:inline-flex;
    align-items:center;

    min-width:0;
}

.breadcrumb-link,
.breadcrumbs-link,
.vendor-breadcrumb-link {
    display:inline-flex;
    align-items:center;

    min-width:0;

    padding:
        var(--space-1, 4px)
        var(--space-2, 8px);

    border-radius:
        var(--radius-sm, 8px);

    color:
        var(--breadcrumb-link, #475569);

    white-space:nowrap;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.breadcrumb-link:hover,
.breadcrumbs-link:hover,
.vendor-breadcrumb-link:hover {
    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-surface-muted, #f8fafc);
}

.breadcrumb-current,
.breadcrumbs-current,
.vendor-breadcrumb-current {
    display:inline-flex;
    align-items:center;

    min-width:0;

    padding:
        var(--space-1, 4px)
        var(--space-2, 8px);

    color:
        var(--breadcrumb-current, #1f2937);

    font-weight:
        var(--font-weight-semibold, 600);

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
}

.breadcrumb-separator,
.breadcrumbs-separator,
.vendor-breadcrumb-separator {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    color:
        var(--breadcrumb-separator, #94a3b8);

    user-select:none;
}

.breadcrumb-home,
.breadcrumbs-home,
.vendor-breadcrumb-home {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;
}


/* =========================================================
   5. TAB NAVIGATION
   ========================================================= */

.tabs,
.tab-navigation,
.vendor-tabs {
    display:flex;
    align-items:center;

    width:100%;
    min-width:0;

    border-bottom:1px solid
        var(--tabs-border, var(--color-border, #e5e7eb));
}

.tabs-list,
.tab-navigation-list,
.vendor-tabs-list {
    display:flex;
    align-items:center;

    width:100%;
    min-width:0;

    gap:var(--space-1, 4px);

    list-style:none;

    padding:0;
    margin:0;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;
}

.tabs-list::-webkit-scrollbar,
.tab-navigation-list::-webkit-scrollbar,
.vendor-tabs-list::-webkit-scrollbar {
    display:none;
}

.tab-item,
.tabs-item,
.vendor-tab-item {
    position:relative;

    flex:0 0 auto;
}

.tab-link,
.tabs-link,
.vendor-tab-link {
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:44px;

    padding:
        var(--space-2, 12px)
        var(--space-4, 16px);

    gap:var(--space-2, 8px);

    border:0;

    color:
        var(--tab-text, #64748b);

    background:transparent;

    font-size:
        var(--font-size-sm, 14px);

    font-weight:
        var(--font-weight-medium, 500);

    white-space:nowrap;

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease;
}

.tab-link::after,
.tabs-link::after,
.vendor-tab-link::after {
    content:"";

    position:absolute;

    left:var(--space-3, 12px);
    right:var(--space-3, 12px);
    bottom:-1px;

    height:2px;

    border-radius:2px 2px 0 0;

    background:
        var(--tab-active-border, var(--color-primary, #2563eb));

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .18s ease;
}

.tab-link:hover,
.tabs-link:hover,
.vendor-tab-link:hover {
    color:
        var(--tab-hover-text, #1f2937);

    background:
        var(--tab-hover-bg, #f8fafc);
}

.tab-link.active,
.tabs-link.active,
.vendor-tab-link.active,

.tab-link[aria-selected="true"],
.tabs-link[aria-selected="true"],
.vendor-tab-link[aria-selected="true"] {
    color:
        var(--tab-active-text, var(--color-primary, #2563eb));

    font-weight:
        var(--font-weight-semibold, 600);
}

.tab-link.active::after,
.tabs-link.active::after,
.vendor-tab-link.active::after,

.tab-link[aria-selected="true"]::after,
.tabs-link[aria-selected="true"]::after,
.vendor-tab-link[aria-selected="true"]::after {
    transform:scaleX(1);
}

.tab-icon,
.tabs-icon,
.vendor-tab-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex:0 0 20px;

    color:currentColor;
}

.tab-label,
.tabs-label,
.vendor-tab-label {
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tab-badge,
.tabs-badge,
.vendor-tab-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:20px;
    height:20px;

    padding:
        0 var(--space-2, 8px);

    border-radius:999px;

    color:
        var(--tab-badge-text, #ffffff);

    background:
        var(--tab-badge-bg, #ef4444);

    font-size:
        var(--font-size-xs, 12px);

    font-weight:
        var(--font-weight-semibold, 600);
}


/* =========================================================
   6. PILL / SEGMENTED NAVIGATION
   ========================================================= */

.segmented-navigation,
.segmented-tabs,
.nav-pills {
    display:inline-flex;
    align-items:center;

    max-width:100%;

    padding:var(--space-1, 4px);

    gap:var(--space-1, 4px);

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-lg, 12px);

    background:
        var(--color-surface-muted, #f8fafc);

    overflow-x:auto;
}

.segmented-navigation-link,
.segmented-tab-link,
.nav-pill-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:36px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border:0;

    border-radius:
        var(--radius-md, 10px);

    color:
        var(--navigation-link-text, #64748b);

    background:transparent;

    font-size:
        var(--font-size-sm, 14px);

    font-weight:
        var(--font-weight-medium, 500);

    white-space:nowrap;

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.segmented-navigation-link:hover,
.segmented-tab-link:hover,
.nav-pill-link:hover {
    color:
        var(--color-text, #1f2937);

    background:
        var(--color-surface, #ffffff);
}

.segmented-navigation-link.active,
.segmented-tab-link.active,
.nav-pill-link.active,

.segmented-navigation-link[aria-selected="true"],
.segmented-tab-link[aria-selected="true"],
.nav-pill-link[aria-selected="true"] {
    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-surface, #ffffff);

    box-shadow:
        var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, .08));

    font-weight:
        var(--font-weight-semibold, 600);
}


/* =========================================================
   7. VERTICAL SECTION NAVIGATION
   ========================================================= */

.vertical-navigation,
.section-navigation,
.vendor-section-navigation {
    width:100%;
}

.vertical-navigation-list,
.section-navigation-list,
.vendor-section-navigation-list {
    display:flex;
    flex-direction:column;

    width:100%;

    gap:var(--space-1, 4px);

    list-style:none;

    padding:0;
    margin:0;
}

.vertical-navigation-link,
.section-navigation-link,
.vendor-section-navigation-link {
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    min-height:42px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-3, 12px);

    border:1px solid transparent;
    border-radius:
        var(--radius-md, 10px);

    color:
        var(--navigation-link-text, #475569);

    background:transparent;

    font-size:
        var(--font-size-sm, 14px);

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.vertical-navigation-link:hover,
.section-navigation-link:hover,
.vendor-section-navigation-link:hover {
    color:
        var(--navigation-link-hover-text, #111827);

    background:
        var(--navigation-link-hover-bg, #f1f5f9);
}

.vertical-navigation-link.active,
.section-navigation-link.active,
.vendor-section-navigation-link.active {
    color:
        var(--navigation-active-text, #2563eb);

    background:
        var(--navigation-active-bg, #eff6ff);

    border-color:
        var(--navigation-active-border, #dbeafe);

    font-weight:
        var(--font-weight-semibold, 600);
}

.vertical-navigation-icon,
.section-navigation-icon,
.vendor-section-navigation-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:20px;
    height:20px;

    flex:0 0 20px;

    color:currentColor;
}

.vertical-navigation-label,
.section-navigation-label,
.vendor-section-navigation-label {
    min-width:0;

    flex:1 1 auto;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   8. PAGINATION NAVIGATION
   ========================================================= */

.pagination,
.navigation-pagination,
.vendor-pagination {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;

    width:100%;

    gap:var(--space-3, 12px);

    margin-top:var(--space-5, 20px);
}

.pagination-list,
.navigation-pagination-list,
.vendor-pagination-list {
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:var(--space-1, 4px);

    list-style:none;

    padding:0;
    margin:0;
}

.pagination-item,
.navigation-pagination-item,
.vendor-pagination-item {
    display:flex;
}

.pagination-link,
.navigation-pagination-link,
.vendor-pagination-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:38px;
    height:38px;

    padding:
        0 var(--space-2, 8px);

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-md, 10px);

    color:
        var(--color-text-muted, #64748b);

    background:
        var(--color-surface, #ffffff);

    font-size:
        var(--font-size-sm, 14px);

    font-weight:
        var(--font-weight-medium, 500);

    text-decoration:none;

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.pagination-link:hover,
.navigation-pagination-link:hover,
.vendor-pagination-link:hover {
    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-surface-muted, #f8fafc);

    border-color:
        var(--color-border-hover, #cbd5e1);
}

.pagination-link.active,
.navigation-pagination-link.active,
.vendor-pagination-link.active,

.pagination-link[aria-current="page"],
.navigation-pagination-link[aria-current="page"],
.vendor-pagination-link[aria-current="page"] {
    color:#ffffff;

    background:
        var(--color-primary, #2563eb);

    border-color:
        var(--color-primary, #2563eb);

    font-weight:
        var(--font-weight-semibold, 600);
}

.pagination-link.disabled,
.navigation-pagination-link.disabled,
.vendor-pagination-link.disabled,

.pagination-link[aria-disabled="true"],
.navigation-pagination-link[aria-disabled="true"],
.vendor-pagination-link[aria-disabled="true"] {
    opacity:.5;

    cursor:not-allowed;

    pointer-events:none;
}

.pagination-prev,
.pagination-next,
.navigation-pagination-prev,
.navigation-pagination-next,
.vendor-pagination-prev,
.vendor-pagination-next {
    min-width:40px;
}

.pagination-icon,
.navigation-pagination-icon,
.vendor-pagination-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;
}

.pagination-info,
.navigation-pagination-info,
.vendor-pagination-info {
    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-sm, 14px);
}


/* =========================================================
   9. MOBILE NAVIGATION
   ========================================================= */

.mobile-navigation,
.mobile-nav,
.vendor-mobile-navigation {
    display:none;

    width:100%;

    background:
        var(--color-surface, #ffffff);

    border-bottom:1px solid
        var(--color-border, #e5e7eb);
}

.mobile-navigation-inner,
.mobile-nav-inner,
.vendor-mobile-navigation-inner {
    display:flex;
    align-items:center;

    width:100%;
    min-height:56px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);
}

.mobile-navigation-toggle,
.mobile-nav-toggle,
.vendor-mobile-navigation-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    flex:0 0 42px;

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-md, 10px);

    color:
        var(--color-text, #1f2937);

    background:
        var(--color-surface, #ffffff);

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.mobile-navigation-toggle:hover,
.mobile-nav-toggle:hover,
.vendor-mobile-navigation-toggle:hover {
    background:
        var(--color-surface-muted, #f8fafc);

    border-color:
        var(--color-border-hover, #cbd5e1);
}

.mobile-navigation-content,
.mobile-nav-content,
.vendor-mobile-navigation-content {
    min-width:0;

    flex:1 1 auto;
}

.mobile-navigation-title,
.mobile-nav-title,
.vendor-mobile-navigation-title {
    display:block;

    min-width:0;

    overflow:hidden;

    white-space:nowrap;
    text-overflow:ellipsis;

    color:
        var(--color-text, #1f2937);

    font-size:
        var(--font-size-md, 16px);

    font-weight:
        var(--font-weight-semibold, 600);
}


/* =========================================================
   10. NAVIGATION ACTIONS
   ========================================================= */

.navigation-actions,
.nav-actions,
.vendor-navigation-actions {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;

    gap:var(--space-2, 8px);

    margin-left:auto;
}

.navigation-action,
.nav-action,
.vendor-navigation-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:
        var(--space-2, 8px)
        var(--space-3, 12px);

    gap:var(--space-2, 8px);

    border:1px solid
        var(--color-border, #e5e7eb);

    border-radius:
        var(--radius-md, 10px);

    color:
        var(--color-text, #334155);

    background:
        var(--color-surface, #ffffff);

    font-size:
        var(--font-size-sm, 14px);

    text-decoration:none;

    cursor:pointer;

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

.navigation-action:hover,
.nav-action:hover,
.vendor-navigation-action:hover {
    color:
        var(--color-primary, #2563eb);

    background:
        var(--color-surface-muted, #f8fafc);

    border-color:
        var(--color-border-hover, #cbd5e1);
}

.navigation-action-primary,
.nav-action-primary,
.vendor-navigation-action-primary {
    color:#ffffff;

    background:
        var(--color-primary, #2563eb);

    border-color:
        var(--color-primary, #2563eb);
}

.navigation-action-primary:hover,
.nav-action-primary:hover,
.vendor-navigation-action-primary:hover {
    color:#ffffff;

    background:
        var(--color-primary-hover, #1d4ed8);

    border-color:
        var(--color-primary-hover, #1d4ed8);
}


/* =========================================================
   11. NAVIGATION DIVIDER
   ========================================================= */

.navigation-divider,
.nav-divider,
.vendor-navigation-divider {
    width:100%;
    height:1px;

    margin:
        var(--space-3, 12px)
        0;

    background:
        var(--color-border, #e5e7eb);
}


/* =========================================================
   12. NAVIGATION GROUP / TITLE
   ========================================================= */

.navigation-group,
.nav-group,
.vendor-navigation-group {
    width:100%;

    margin-bottom:
        var(--space-5, 20px);
}

.navigation-group:last-child,
.nav-group:last-child,
.vendor-navigation-group:last-child {
    margin-bottom:0;
}

.navigation-group-title,
.nav-group-title,
.vendor-navigation-group-title {
    display:flex;
    align-items:center;

    width:100%;

    min-height:30px;

    margin-bottom:
        var(--space-2, 8px);

    padding:
        0 var(--space-3, 12px);

    color:
        var(--color-text-muted, #64748b);

    font-size:
        var(--font-size-xs, 12px);

    font-weight:
        var(--font-weight-semibold, 600);

    line-height:1.2;

    text-transform:uppercase;
    letter-spacing:.06em;
}


/* =========================================================
   13. NAVIGATION STATES
   ========================================================= */

.navigation-item-loading,
.nav-item-loading,
.vendor-navigation-item-loading {
    pointer-events:none;
    opacity:.65;
}

.navigation-item-disabled,
.nav-item-disabled,
.vendor-navigation-item-disabled {
    opacity:.5;

    pointer-events:none;

    cursor:not-allowed;
}

.navigation-empty,
.nav-empty,
.vendor-navigation-empty {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:100px;

    padding:
        var(--space-5, 20px);

    color:
        var(--color-text-muted, #64748b);

    text-align:center;

    font-size:
        var(--font-size-sm, 14px);
}


/* =========================================================
   14. RESPONSIVE NAVIGATION
   ========================================================= */

@media (max-width:992px) {

    .primary-navigation,
    .main-navigation,
    .vendor-primary-navigation {
        width:100%;
        overflow-x:auto;

        scrollbar-width:none;
    }

    .primary-navigation::-webkit-scrollbar,
    .main-navigation::-webkit-scrollbar,
    .vendor-primary-navigation::-webkit-scrollbar {
        display:none;
    }

    .primary-navigation-list,
    .main-navigation-list,
    .vendor-primary-navigation-list {
        width:max-content;
        min-width:100%;
    }

    .navigation-dropdown-menu,
    .primary-navigation-dropdown-menu,
    .vendor-navigation-dropdown-menu {
        max-width:
            calc(100vw - 24px);
    }

    .mobile-navigation,
    .mobile-nav,
    .vendor-mobile-navigation {
        display:block;
    }

    .pagination,
    .navigation-pagination,
    .vendor-pagination {
        align-items:flex-start;
        flex-direction:column;
    }

    .pagination-list,
    .navigation-pagination-list,
    .vendor-pagination-list {
        width:100%;

        overflow-x:auto;
        flex-wrap:nowrap;

        padding-bottom:2px;

        scrollbar-width:none;
    }

    .pagination-list::-webkit-scrollbar,
    .navigation-pagination-list::-webkit-scrollbar,
    .vendor-pagination-list::-webkit-scrollbar {
        display:none;
    }

    .pagination-info,
    .navigation-pagination-info,
    .vendor-pagination-info {
        width:100%;
    }
}


@media (max-width:768px) {

    .breadcrumbs,
    .breadcrumb,
    .vendor-breadcrumbs {
        margin-bottom:
            var(--space-3, 12px);

        font-size:
            var(--font-size-xs, 12px);
    }

    .breadcrumb-link,
    .breadcrumbs-link,
    .vendor-breadcrumb-link,
    .breadcrumb-current,
    .breadcrumbs-current,
    .vendor-breadcrumb-current {
        max-width:180px;
    }

    .tabs,
    .tab-navigation,
    .vendor-tabs {
        width:calc(100% + 0px);
    }

    .tab-link,
    .tabs-link,
    .vendor-tab-link {
        min-height:42px;

        padding:
            var(--space-2, 10px)
            var(--space-3, 12px);
    }

    .segmented-navigation,
    .segmented-tabs,
    .nav-pills {
        width:100%;
    }

    .segmented-navigation-link,
    .segmented-tab-link,
    .nav-pill-link {
        flex:1 0 auto;
    }

    .navigation-actions,
    .nav-actions,
    .vendor-navigation-actions {
        width:100%;

        margin-left:0;

        justify-content:flex-start;
    }

    .navigation-action,
    .nav-action,
    .vendor-navigation-action {
        flex:1 1 auto;
    }
}


@media (max-width:480px) {

    .mobile-navigation-inner,
    .mobile-nav-inner,
    .vendor-mobile-navigation-inner {
        min-height:52px;

        padding:
            var(--space-2, 8px);
    }

    .mobile-navigation-toggle,
    .mobile-nav-toggle,
    .vendor-mobile-navigation-toggle {
        width:40px;
        height:40px;

        flex-basis:40px;
    }

    .mobile-navigation-title,
    .mobile-nav-title,
    .vendor-mobile-navigation-title {
        font-size:
            var(--font-size-sm, 14px);
    }

    .pagination-link,
    .navigation-pagination-link,
    .vendor-pagination-link {
        min-width:36px;
        height:36px;
    }

    .breadcrumb-link,
    .breadcrumbs-link,
    .vendor-breadcrumb-link,
    .breadcrumb-current,
    .breadcrumbs-current,
    .vendor-breadcrumb-current {
        max-width:130px;
    }
}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .primary-navigation-link,
    .main-navigation-link,
    .vendor-primary-navigation-link,

    .navigation-dropdown-menu,
    .primary-navigation-dropdown-menu,
    .vendor-navigation-dropdown-menu,

    .navigation-dropdown-arrow,
    .primary-navigation-dropdown-arrow,
    .vendor-navigation-dropdown-arrow,

    .breadcrumb-link,
    .breadcrumbs-link,
    .vendor-breadcrumb-link,

    .tab-link,
    .tabs-link,
    .vendor-tab-link,

    .tab-link::after,
    .tabs-link::after,
    .vendor-tab-link::after,

    .segmented-navigation-link,
    .segmented-tab-link,
    .nav-pill-link,

    .pagination-link,
    .navigation-pagination-link,
    .vendor-pagination-link,

    .navigation-action,
    .nav-action,
    .vendor-navigation-action,

    .mobile-navigation-toggle,
    .mobile-nav-toggle,
    .vendor-mobile-navigation-toggle {
        transition:none;
    }
}


/* =========================================================
   16. PRINT
   ========================================================= */

@media print {

    .primary-navigation,
    .main-navigation,
    .vendor-primary-navigation,

    .mobile-navigation,
    .mobile-nav,
    .vendor-mobile-navigation,

    .navigation-actions,
    .nav-actions,
    .vendor-navigation-actions {
        display:none !important;
    }

    .breadcrumbs,
    .breadcrumb,
    .vendor-breadcrumbs {
        margin-bottom:10px;
    }
}