/*
 * Navigation: header bar, breadcrumbs, tabs, pagination, steps and dropdown menus.
 */
@layer components {
    /* Header bar of the app shell; the menu collapses behind a button on small screens. */
    .navbar {
        position: sticky;
        top: 0;
        z-index: var(--z-index-sticky);
        border-bottom: var(--border-width-thin) solid var(--color-border);
        background: color-mix(in srgb, var(--color-bg-surface) 92%, transparent);
        backdrop-filter: blur(8px);
    }

    .navbar-inner {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-height: 4rem;
    }

    .navbar-brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--color-text);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        text-decoration: none;
    }

    .navbar-brand .icon {
        color: var(--color-primary);
        font-size: 1.4em;
    }

    .navbar-menu {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar-end {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-inline-start: auto;
    }

    .nav-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-control);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
    }

    .nav-link:hover {
        background: var(--color-bg-subtle);
        color: var(--color-text);
    }

    .nav-link[aria-current="page"] {
        background: var(--color-primary-subtle);
        color: var(--color-primary-text);
    }

    .navbar-toggle {
        display: none;
    }

    @media (max-width: 48rem) {
        .navbar-toggle {
            display: inline-flex;
        }

        .navbar-menu {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            display: none;
            flex-direction: column;
            align-items: stretch;
            padding: var(--space-2) var(--layout-gutter) var(--space-4);
            border-bottom: var(--border-width-thin) solid var(--color-border);
            background: var(--color-bg-surface);
            box-shadow: var(--shadow-md);
        }

        .navbar.is-open .navbar-menu {
            display: flex;
        }

        .navbar-end {
            margin-inline-start: auto;
        }
    }

    /* Vertical navigation, e.g. in a sidebar. */
    .nav-vertical {
        display: flex;
        flex-direction: column;
        gap: var(--space-0-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav-vertical .nav-link {
        width: 100%;
    }

    .nav-section {
        margin: var(--space-4) 0 var(--space-1);
        padding: 0 var(--space-3);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--font-letter-spacing-wide);
        text-transform: uppercase;
        color: var(--color-text-subtle);
    }

    /* Breadcrumbs: <nav aria-label="…"><ol class="breadcrumb">…</ol></nav> */
    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        margin: 0 0 var(--space-4);
        padding: 0;
        list-style: none;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .breadcrumb li + li::before {
        content: '/';
        margin-right: var(--space-2);
        color: var(--color-text-subtle);
    }

    .breadcrumb a {
        color: inherit;
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--color-text);
        text-decoration: underline;
    }

    .breadcrumb [aria-current="page"] {
        color: var(--color-text);
        font-weight: var(--font-weight-medium);
    }

    /* Tabs (tabs_controller.js): .tabs > .tab-list > button.tab, then .tab-panel */
    .tab-list {
        display: flex;
        gap: var(--space-1);
        margin-bottom: var(--space-5);
        overflow-x: auto;
        border-bottom: var(--border-width-thin) solid var(--color-border);
    }

    .tab {
        margin-bottom: calc(-1 * var(--border-width-thin));
        padding: var(--space-2) var(--space-3);
        border: 0;
        border-bottom: var(--border-width-thick) solid transparent;
        background: none;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        white-space: nowrap;
        cursor: pointer;
    }

    .tab:hover {
        color: var(--color-text);
    }

    .tab[aria-selected="true"] {
        border-bottom-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* Pagination */
    .pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
        margin: var(--space-6) 0;
        padding: 0;
        list-style: none;
    }

    .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--control-height-sm);
        height: var(--control-height-sm);
        padding: 0 var(--space-2);
        border-radius: var(--radius-control);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        text-decoration: none;
        font-variant-numeric: tabular-nums;
    }

    a.page-link:hover {
        background: var(--color-bg-subtle);
        color: var(--color-text);
    }

    .page-link[aria-current="page"] {
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        font-weight: var(--font-weight-semibold);
    }

    span.page-link:not([aria-current]) {
        color: var(--color-text-subtle);
    }

    /* Steps of a process: <ol class="steps"><li class="is-done">…</li><li aria-current="step">…</li></ol> */
    .steps {
        display: flex;
        gap: var(--space-2);
        margin: 0 0 var(--space-6);
        padding: 0;
        list-style: none;
        counter-reset: step;
    }

    .steps li {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding-top: var(--space-3);
        border-top: 4px solid var(--color-bg-muted);
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
        counter-increment: step;
    }

    .steps li::before {
        content: counter(step);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-xs);
    }

    .steps li.is-done {
        border-top-color: var(--color-primary);
    }

    .steps li[aria-current="step"] {
        border-top-color: var(--color-primary);
        color: var(--color-text);
        font-weight: var(--font-weight-semibold);
    }

    /* Dropdown menu (dropdown_controller.js) */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-menu {
        position: absolute;
        top: calc(100% + var(--space-1));
        left: 0;
        z-index: var(--z-index-dropdown);
        min-width: 12rem;
        margin: 0;
        padding: var(--space-1);
        border: var(--border-width-thin) solid var(--color-border);
        border-radius: var(--radius-surface);
        background: var(--color-bg-surface-raised);
        box-shadow: var(--shadow-lg);
        list-style: none;
    }

    .dropdown-menu.is-end {
        right: 0;
        left: auto;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--color-text);
        font-size: var(--font-size-sm);
        text-align: start;
        text-decoration: none;
        cursor: pointer;
    }

    .dropdown-item:hover,
    .dropdown-item:focus-visible {
        background: var(--color-bg-subtle);
        color: var(--color-text);
        outline: none;
    }

    .dropdown-item.is-danger {
        color: var(--color-danger);
    }

    .dropdown-divider {
        height: 1px;
        margin: var(--space-1) 0;
        background: var(--color-border);
    }
}