/* =========================================================
   NAVIGATION — menu, dropdown, context-menu, tabs, segmented,
                breadcrumbs, pagination, sidebar, navbar, tree, stepper
   ========================================================= */

.ui-kit-menu {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px; background: var(--ui-kit-white);
    border: 1px solid var(--ui-kit-border);
    border-radius: var(--ui-kit-radius-md);
    min-width: 220px;
}
.ui-kit-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: var(--ui-kit-radius-sm);
    color: var(--ui-kit-navy); text-decoration: none;
    font-size: var(--ui-kit-fs-base); font-weight: var(--ui-kit-fw-medium);
    transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-menu__item:hover { background: var(--ui-kit-bg-soft); }
.ui-kit-menu__item.is-active { background: var(--ui-kit-blue-tint); color: var(--ui-kit-blue); }
.ui-kit-menu__item--danger { color: var(--ui-kit-danger); }
.ui-kit-menu__item--danger:hover { background: var(--ui-kit-danger-tint); }

.ui-kit-dropdown { position: relative; display: inline-block; }
.ui-kit-dropdown__menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 2000;
    min-width: 200px; padding: 6px;
    background: var(--ui-kit-white); border: 1px solid var(--ui-kit-border);
    border-radius: var(--ui-kit-radius-md); box-shadow: var(--ui-kit-shadow-md);
    display: flex; flex-direction: column; gap: 2px;
}
.ui-kit-dropdown__menu--right { left: auto; right: 0; }
.ui-kit-dropdown__item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: none; background: transparent;
    border-radius: var(--ui-kit-radius-sm); color: var(--ui-kit-navy);
    font-family: inherit; font-size: var(--ui-kit-fs-base);
    font-weight: var(--ui-kit-fw-medium); text-decoration: none;
    cursor: pointer; text-align: left; width: 100%;
    transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-dropdown__item:hover { background: var(--ui-kit-bg-soft); }
.ui-kit-dropdown__item--danger { color: var(--ui-kit-danger); }
.ui-kit-dropdown__item--danger:hover { background: var(--ui-kit-danger-tint); }
.ui-kit-dropdown__divider { height: 1px; background: var(--ui-kit-border); margin: 4px 0; }

.ui-kit-context-menu {
    position: absolute; z-index: 3000;
    min-width: 200px; padding: 6px;
    background: var(--ui-kit-white); border: 1px solid var(--ui-kit-border);
    border-radius: var(--ui-kit-radius-md);
    box-shadow: var(--ui-kit-shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
}
.ui-kit-context-menu__item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: none; background: transparent;
    border-radius: var(--ui-kit-radius-sm); color: var(--ui-kit-navy);
    font-family: inherit; font-size: var(--ui-kit-fs-base);
    font-weight: var(--ui-kit-fw-medium); cursor: pointer; text-align: left; width: 100%;
    transition: background var(--ui-kit-trans-fast);
}
.ui-kit-context-menu__item:hover { background: var(--ui-kit-bg-soft); }
.ui-kit-context-menu__item--danger { color: var(--ui-kit-danger); }
.ui-kit-context-menu__item--danger:hover { background: var(--ui-kit-danger-tint); }

.ui-kit-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--ui-kit-bg-soft); border-radius: var(--ui-kit-radius-md); }
.ui-kit-tab {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border: none; background: transparent;
    border-radius: var(--ui-kit-radius-sm); font-family: inherit;
    font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-medium);
    color: var(--ui-kit-text-muted); cursor: pointer;
    transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-tab:hover { color: var(--ui-kit-navy); }
.ui-kit-tab.is-active { background: var(--ui-kit-white); color: var(--ui-kit-navy); box-shadow: var(--ui-kit-shadow-sm); }

.ui-kit-segmented {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; background: var(--ui-kit-bg-soft);
    border-radius: var(--ui-kit-radius-md);
}
.ui-kit-segmented__item {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 14px;
    border: none; background: transparent;
    border-radius: var(--ui-kit-radius-sm);
    font-family: inherit; font-size: var(--ui-kit-fs-sm);
    font-weight: var(--ui-kit-fw-medium); color: var(--ui-kit-text-muted);
    cursor: pointer; transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-segmented__item:hover { color: var(--ui-kit-navy); }
.ui-kit-segmented__item.is-active {
    background: var(--ui-kit-white); color: var(--ui-kit-navy);
    box-shadow: var(--ui-kit-shadow-sm);
}

.ui-kit-breadcrumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: var(--ui-kit-fs-sm); color: var(--ui-kit-text-muted);
    list-style: none; padding: 0; margin: 0;
}
.ui-kit-breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; }
.ui-kit-breadcrumbs__item a { color: var(--ui-kit-text-muted); text-decoration: none; transition: color var(--ui-kit-trans-fast); }
.ui-kit-breadcrumbs__item a:hover { color: var(--ui-kit-accent); }
.ui-kit-breadcrumbs__item--current { color: var(--ui-kit-navy); font-weight: var(--ui-kit-fw-medium); }
.ui-kit-breadcrumbs__sep { display: inline-flex; color: var(--ui-kit-text-muted); opacity: 0.5; }

.ui-kit-pagination { display: inline-flex; align-items: center; gap: 4px; }
.ui-kit-pagination__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid transparent; border-radius: var(--ui-kit-radius-md);
    background: transparent; color: var(--ui-kit-navy);
    font-family: inherit; font-size: var(--ui-kit-fs-sm);
    font-weight: var(--ui-kit-fw-medium); text-decoration: none; cursor: pointer;
    transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast), border-color var(--ui-kit-trans-fast);
}
.ui-kit-pagination__item:hover { background: var(--ui-kit-bg-soft); }
.ui-kit-pagination__item.is-active { background: var(--ui-kit-blue); color: var(--ui-kit-white); border-color: var(--ui-kit-blue); }
.ui-kit-pagination__item.is-disabled { opacity: 0.4; pointer-events: none; }
.ui-kit-pagination__item--dots { pointer-events: none; color: var(--ui-kit-text-muted); font-weight: var(--ui-kit-fw-bold); }

.ui-kit-sidebar {
    display: flex; flex-direction: column;
    width: 280px; height: 100%;
    background: var(--ui-kit-white);
    border-right: 1px solid var(--ui-kit-border);
    overflow-y: auto;
}
.ui-kit-sidebar__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-kit-border);
}
.ui-kit-sidebar__title {
    font-size: var(--ui-kit-fs-md); font-weight: var(--ui-kit-fw-bold);
    color: var(--ui-kit-navy); margin: 0;
}
.ui-kit-sidebar__body { flex: 1; padding: 12px; }
.ui-kit-sidebar__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--ui-kit-border);
    background: var(--ui-kit-bg-muted);
}
.ui-kit-sidebar--right { border-right: none; border-left: 1px solid var(--ui-kit-border); }

.ui-kit-navbar {
    display: flex; align-items: center; gap: var(--ui-kit-space-lg);
    height: 60px; padding: 0 var(--ui-kit-space-2xl);
    background: var(--ui-kit-white);
    border-bottom: 1px solid var(--ui-kit-border);
}
.ui-kit-navbar__brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: var(--ui-kit-fs-lg); font-weight: var(--ui-kit-fw-bold);
    color: var(--ui-kit-navy); text-decoration: none;
    flex-shrink: 0;
}
.ui-kit-navbar__nav {
    display: flex; align-items: center; gap: 4px;
    flex: 1;
}
.ui-kit-navbar__link {
    padding: 8px 14px; border-radius: var(--ui-kit-radius-sm);
    color: var(--ui-kit-text-muted); text-decoration: none;
    font-size: var(--ui-kit-fs-base); font-weight: var(--ui-kit-fw-medium);
    transition: background var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-navbar__link:hover { background: var(--ui-kit-bg-soft); color: var(--ui-kit-navy); }
.ui-kit-navbar__link.is-active { background: var(--ui-kit-blue-tint); color: var(--ui-kit-blue); }
.ui-kit-navbar__actions { display: inline-flex; align-items: center; gap: 8px; }

.ui-kit-tree {
    display: flex; flex-direction: column;
    font-size: var(--ui-kit-fs-base); color: var(--ui-kit-navy);
}
.ui-kit-tree__node { display: flex; flex-direction: column; }
.ui-kit-tree__row {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: var(--ui-kit-radius-sm);
    cursor: pointer;
    transition: background var(--ui-kit-trans-fast);
}
.ui-kit-tree__row:hover { background: var(--ui-kit-bg-soft); }
.ui-kit-tree__row.is-active { background: var(--ui-kit-blue-tint); color: var(--ui-kit-blue); }
.ui-kit-tree__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; background: transparent;
    color: var(--ui-kit-text-muted); cursor: pointer; padding: 0;
    transition: transform var(--ui-kit-trans-fast);
}
.ui-kit-tree__node.is-open > .ui-kit-tree__row .ui-kit-tree__toggle { transform: rotate(90deg); }
.ui-kit-tree__children {
    display: none;
    padding-left: 24px;
    border-left: 1px dashed var(--ui-kit-border);
    margin-left: 9px;
}
.ui-kit-tree__node.is-open > .ui-kit-tree__children { display: flex; flex-direction: column; }
.ui-kit-tree__icon { display: inline-flex; color: var(--ui-kit-text-muted); }
.ui-kit-tree__label { flex: 1; }
.ui-kit-tree__count { font-size: var(--ui-kit-fs-xs); color: var(--ui-kit-text-muted); }

.ui-kit-stepper-vertical {
    display: flex; flex-direction: column;
    position: relative;
}
.ui-kit-stepper-vertical__item {
    display: flex; gap: 16px;
    position: relative;
    padding-bottom: 28px;
}
.ui-kit-stepper-vertical__item:last-child { padding-bottom: 0; }
.ui-kit-stepper-vertical__item:not(:last-child)::before {
    content: ''; position: absolute;
    left: 15px; top: 32px; bottom: 0;
    width: 2px; background: var(--ui-kit-border);
}
.ui-kit-stepper-vertical__item--done:not(:last-child)::before { background: var(--ui-kit-success); }
.ui-kit-stepper-vertical__bullet {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ui-kit-white); border: 2px solid var(--ui-kit-border);
    color: var(--ui-kit-text-muted);
    font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-bold);
    flex-shrink: 0;
    position: relative; z-index: 1;
    transition: background var(--ui-kit-trans-fast), border-color var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-stepper-vertical__item--done .ui-kit-stepper-vertical__bullet { background: var(--ui-kit-success); border-color: var(--ui-kit-success); color: var(--ui-kit-white); }
.ui-kit-stepper-vertical__item--active .ui-kit-stepper-vertical__bullet { background: var(--ui-kit-blue); border-color: var(--ui-kit-blue); color: var(--ui-kit-white); box-shadow: 0 0 0 4px var(--ui-kit-blue-ring); }
.ui-kit-stepper-vertical__content { flex: 1; padding-top: 4px; }
.ui-kit-stepper-vertical__title { font-size: var(--ui-kit-fs-base); font-weight: var(--ui-kit-fw-semibold); color: var(--ui-kit-navy); margin: 0 0 4px; }
.ui-kit-stepper-vertical__desc { font-size: var(--ui-kit-fs-sm); color: var(--ui-kit-text-muted); margin: 0; line-height: var(--ui-kit-lh-loose); }

.ui-kit-steps { display: flex; align-items: flex-start; gap: 0; width: 100%; }
.ui-kit-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; gap: 8px; }
.ui-kit-step:not(:last-child)::after {
    content: ''; position: absolute; top: 16px; left: calc(50% + 22px);
    right: calc(-50% + 22px); height: 2px;
    background: var(--ui-kit-border); z-index: 0;
}
.ui-kit-step--done:not(:last-child)::after { background: var(--ui-kit-success); }
.ui-kit-step__bullet {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ui-kit-white); border: 2px solid var(--ui-kit-border);
    color: var(--ui-kit-text-muted);
    font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-bold);
    position: relative; z-index: 1; flex-shrink: 0;
    transition: background var(--ui-kit-trans-fast), border-color var(--ui-kit-trans-fast), color var(--ui-kit-trans-fast);
}
.ui-kit-step--done .ui-kit-step__bullet { background: var(--ui-kit-success); border-color: var(--ui-kit-success); color: var(--ui-kit-white); }
.ui-kit-step--active .ui-kit-step__bullet { background: var(--ui-kit-blue); border-color: var(--ui-kit-blue); color: var(--ui-kit-white); box-shadow: 0 0 0 4px var(--ui-kit-blue-ring); }
.ui-kit-step__label { font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-semibold); color: var(--ui-kit-navy); }
.ui-kit-step__desc { font-size: var(--ui-kit-fs-xs); color: var(--ui-kit-text-muted); }

.ui-kit-progress-stages {
    display: flex; align-items: center; gap: 4px;
    width: 100%;
}
.ui-kit-progress-stages__seg {
    flex: 1; height: 6px; border-radius: var(--ui-kit-radius-pill);
    background: var(--ui-kit-bg-soft);
    position: relative;
}
.ui-kit-progress-stages__seg--done { background: var(--ui-kit-success); }
.ui-kit-progress-stages__seg--active { background: var(--ui-kit-blue); }
.ui-kit-progress-stages__labels {
    display: flex; justify-content: space-between;
    margin-top: 8px; font-size: var(--ui-kit-fs-xs);
    color: var(--ui-kit-text-muted);
}