/* ============================================================
   NEW UI - Topbar nav search (replaces the Cmd+K overlay)
   ============================================================ */
.nui-navsearch {
    position: relative;
    display: flex;
    align-items: center;
    width: 360px;
    height: 32px;
    margin: 0 16px;
    padding: 0 10px;
    background: var(--nui-bg-light, #f8fafc);
    border: 1px solid var(--nui-border, #e2e8f0);
    border-radius: 8px;
    transition: width 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out;
    font-family: var(--nui-font, "Montserrat", -apple-system, sans-serif);
}

/* Center the search bar in the topbar (JIRA-style), request 2026-07-23.
   .nui-topbar is a plain flex row (breadcrumbs, this, a flex:1 spacer,
   then the icon cluster) — absolute-centering removes it from that
   flow so its position is independent of breadcrumb/icon width on
   either side, and re-centers automatically when the focused state
   grows it to 440px (transform recomputes off current box size).
   Reverts to normal flex flow under the laptop-tier breakpoint
   (1366px, same cutoff used elsewhere in New UI) to avoid overlapping
   breadcrumbs or the icon cluster on narrower screens.

   Bug fixed 2026-07-24: only `left: 50%` was set, with no `top` — an
   absolutely positioned element with top:auto falls back to its
   browser-computed static position rather than true centering, which
   let the box sit low enough to collide with .nui-topbar's bottom
   border and the ::after gradient keyline just beneath it (visible as
   a seam through the box). `top: 50%` + a 2-axis transform centers it
   on both axes explicitly, independent of any static-position guess. */
@media (min-width: 1367px) {
    .nui-topbar {
        position: relative;
    }
    .nui-navsearch {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
}
.nui-navsearch.focused {
    width: 440px;
    background: var(--nui-bg-white, #fff);
    border-color: var(--nui-brand, #0074C5);
    box-shadow: 0 0 0 3px rgba(0, 116, 197, 0.12);
}
.nui-navsearch-icon {
    display: flex;
    align-items: center;
    color: var(--nui-text-muted, #94a3b8);
    margin-right: 8px;
    flex: none;
}
.nui-navsearch-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: var(--nui-text-dark, #0f172a);
    font-family: inherit;
}
.nui-navsearch-input::placeholder { color: var(--nui-text-muted, #94a3b8); }
.nui-navsearch-kbd {
    flex: none;
    font-size: 11px;
    line-height: 1;
    padding: 3px 5px;
    border: 1px solid var(--nui-border, #e2e8f0);
    border-bottom-width: 2px;
    border-radius: 4px;
    color: var(--nui-text-muted, #94a3b8);
    background: var(--nui-bg-white, #fff);
    font-family: inherit;
}
.nui-navsearch-dd {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--nui-bg-white, #fff);
    border: 1px solid var(--nui-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    padding: 6px;
    z-index: 1000;
    max-height: 340px;
    overflow-y: auto;
}
.nui-navsearch-group-header {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nui-text-muted, #94a3b8);
    padding: 8px 10px 4px;
}
.nui-navsearch-group-header:first-child {
    padding-top: 4px;
}
.nui-navsearch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 8px 0 10px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
}
.nui-navsearch-row--selected {
    background: var(--nui-bg-hover, #f1f5f9);
}
.nui-navsearch-row--selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--nui-brand, #0074C5);
}
.nui-navsearch-row-label {
    font-size: 13px;
    color: var(--nui-text-dark, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nui-navsearch-row-section {
    margin-left: auto;
    font-size: 11px;
    color: var(--nui-text-muted, #94a3b8);
    flex: none;
}
.nui-navsearch-row-action-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--nui-brand-teal, #00AEC4);
    flex: none;
    white-space: nowrap;
}
.nui-navsearch-row-action-badge svg {
    flex: none;
}
.nui-navsearch-star {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    border-radius: 4px;
    color: var(--nui-text-muted, #94a3b8);
    opacity: 0;
    transition: opacity 100ms ease-out, color 100ms ease-out;
}
.nui-navsearch-row:hover .nui-navsearch-star,
.nui-navsearch-row--selected .nui-navsearch-star,
.nui-navsearch-star--pinned {
    opacity: 1;
}
.nui-navsearch-star:hover {
    color: var(--nui-brand, #0074C5);
}
.nui-navsearch-star--pinned {
    color: var(--nui-brand, #0074C5);
}
@media (max-width: 1100px) {
    .nui-navsearch { width: 260px; }
    .nui-navsearch.focused { width: 320px; }
}