.global-search { flex: 1; max-width: 500px; position: relative; margin: 0 16px; } .global-search__input { width: 100%; padding: 6px 12px; font-size: 13px; border: 1px solid var(--c-border); border-radius: 4px; background: var(--c-bg); color: var(--c-text); outline: none; transition: border-color 0.15s; &::placeholder { color: var(--c-text-muted, #94a3b8); } &:focus { border-color: var(--c-primary, #3b82f6); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); } } .global-search__results { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--c-surface, #fff); border: 1px solid var(--c-border); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); max-height: 400px; overflow-y: auto; z-index: 1000; } .global-search__item { display: block; padding: 8px 12px; cursor: pointer; text-decoration: none; color: var(--c-text); border-bottom: 1px solid var(--c-border); transition: background-color 0.1s; &:last-child { border-bottom: none; } &:hover, &.is-highlighted { background: var(--c-bg, #f1f5f9); } } .global-search__item-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; } .global-search__item-details { font-size: 11px; color: var(--c-text-muted, #64748b); } .global-search__empty { padding: 12px; text-align: center; color: var(--c-text-muted, #94a3b8); font-size: 13px; } @media (max-width: 768px) { .global-search { max-width: none; margin: 0 8px; } .global-search__input { font-size: 12px; padding: 5px 8px; } }