/* Header omnisearch: input, dropdown with tabs, results and loading state */
.omnisearch { width: 22rem; }
.omnisearch-icon { position: absolute; left: .95rem; top: 1.25rem; transform: translateY(-50%); color: var(--vw-muted); z-index: 1; }
.omnisearch .form-control { padding-right: 2.6rem; }
.omnisearch-clear { position: absolute; right: .45rem; top: 1.25rem; transform: translateY(-50%); width: 1.8rem; height: 1.8rem; border: 0; border-radius: 50%; background: var(--vw-border); color: var(--vw-text); display: grid; place-items: center; font-size: .85rem; }
.omnisearch-clear:hover { background: var(--vw-primary-soft); color: var(--vw-primary); }

/* Loading: the search icon becomes a spinner */
.omnisearch.loading .omnisearch-icon::before { content: "\f110"; display: inline-block; animation: omnisearch-spin 1s linear infinite; color: var(--vw-primary); }
@keyframes omnisearch-spin { to { transform: rotate(360deg); } }

.omnisearch-panel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 1100; width: min(46rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 6rem)); display: flex; flex-direction: column; background: var(--vw-surface); border-radius: var(--vw-radius); box-shadow: 0 8px 32px rgb(74 60 40 / .18); padding: .75rem; }

.omnisearch-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--vw-border); }
.omnisearch-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--vw-text); border-radius: var(--vw-radius-sm) var(--vw-radius-sm) 0 0; }
.omnisearch-tab:hover { background: var(--vw-bg); }
.omnisearch-tab.active { border-bottom-color: var(--vw-primary); background: var(--vw-primary-soft); color: var(--vw-primary); font-weight: 600; }
.omnisearch-tab .count { color: var(--vw-muted); font-weight: 400; }

.omnisearch-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem .25rem .4rem; }
.omnisearch-title { font-size: 1.05rem; }
.omnisearch-all { font-size: .9rem; text-decoration: none; }

.omnisearch-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; transition: opacity .15s; }
.omnisearch.loading .omnisearch-results { opacity: .5; } /* older results while a new search runs */
.omnisearch-item { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 15rem) 1rem; align-items: center; gap: 1rem; padding: .55rem .5rem; border-bottom: 1px solid var(--vw-border); color: var(--vw-text); text-decoration: none; border-radius: var(--vw-radius-sm); }
.omnisearch-results li:last-child .omnisearch-item { border-bottom: 0; }
.omnisearch-item:hover, .omnisearch-item.selected { background: var(--vw-bg); }
.omnisearch-thumb { width: 2.6rem; height: 2.6rem; border-radius: var(--vw-radius-sm); background: var(--vw-offline-soft); color: var(--vw-offline); display: grid; place-items: center; }
.omnisearch-main, .omnisearch-detail { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.omnisearch-main > *, .omnisearch-detail > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omnisearch-detail .status { font-size: .85rem; }
.omnisearch-chevron { color: var(--vw-text); }
.omnisearch mark { padding: 0 .05em; background: #efe0a8; color: inherit; border-radius: 2px; }
.omnisearch-empty { padding: 1rem .5rem; color: var(--vw-muted); }

/* Skeleton rows for the first search */
.omnisearch-skeleton { display: flex; align-items: center; gap: 1rem; padding: .7rem .5rem; border-bottom: 1px solid var(--vw-border); }
.sk { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--vw-offline-soft) 25%, var(--vw-border) 50%, var(--vw-offline-soft) 75%); background-size: 200% 100%; animation: omnisearch-shimmer 1.2s ease-in-out infinite; }
.sk-icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--vw-radius-sm); }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.sk-line { height: .8rem; width: 60%; }
.sk-short { width: 35%; }
.omnisearch-dot { display: inline-block; width: .8rem; height: .8rem; border: 2px solid var(--vw-border); border-top-color: var(--vw-primary); border-radius: 50%; animation: omnisearch-spin .8s linear infinite; vertical-align: -.1rem; }
@keyframes omnisearch-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
    .sk, .omnisearch-dot, .omnisearch.loading .omnisearch-icon::before { animation: none; }
}