/*
 * t2-search-suggest.css
 * T2 composition ONLY for the global search suggestions overlay.
 *
 * Visuals come from the design-system component-scoped artifact
 * (/vendor/topdata-design-system/search-suggest.css). This file may only
 * handle layout/anchor wiring for the full-width two-column panel, the terms
 * column and the provider switcher. Do not declare --td-* tokens, redefine
 * .td-* primitives, or use raw colours.
 */

/* Bootstrap 3 pins html { font-size: 10px }, but the design-system tokens are
   rem-based and designed for a 16px root. The overlay also renders on the
   legacy shell, which does not load t2-admin.css, so restore the documented
   root scale here (same rule as t2-admin.css); without it every --td-text-*
   value resolves at 62.5% size. */
html[data-theme] {
    font-size: 16px;
}

[x-cloak] {
    display: none !important;
}

.t2-search-suggest__panel {
    box-sizing: border-box;
    width: 100vw;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: var(--td-z-overlay);
}

.t2-search-suggest__panel *,
.t2-search-suggest__panel *::before,
.t2-search-suggest__panel *::after {
    box-sizing: border-box;
}

.t2-search-suggest__inner {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: var(--td-space-4);
    padding-block: var(--td-space-3);
}

.t2-search-suggest__providers {
    display: flex;
    flex-direction: column;
    gap: var(--td-space-1);
    margin-bottom: var(--td-space-3);
}

.t2-search-suggest__provider-label {
    color: var(--td-color-fg-dim);
    font-family: var(--td-font-body);
    font-size: var(--td-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.t2-search-suggest__heading {
    margin: 0 0 var(--td-space-2);
    color: var(--td-color-fg-dim);
    font-family: var(--td-font-body);
    font-size: var(--td-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.t2-search-suggest__columns {
    display: grid;
    grid-template-columns: minmax(200px, 22%) minmax(0, 1fr);
    gap: var(--td-space-3);
}

.t2-search-suggest__columns--single {
    grid-template-columns: minmax(0, 1fr);
}

.t2-search-suggest__column {
    min-width: 0;
}

.t2-search-suggest__terms {
    display: flex;
    flex-direction: column;
    gap: var(--td-space-1);
}

.t2-search-suggest__term {
    padding: var(--td-space-2) var(--td-space-3);
    border-radius: var(--td-radius-sm);
    color: var(--td-color-fg);
    cursor: pointer;
    font-family: var(--td-font-body);
    font-size: var(--td-text-sm);
}

.t2-search-suggest__term:hover,
.t2-search-suggest__term[aria-selected="true"] {
    background-color: var(--td-color-surface-hover);
}

.t2-search-suggest__panel .td-search-suggest__link {
    align-items: flex-start;
    display: flex;
    gap: var(--td-space-3);
    text-decoration: none;
}

.t2-search-suggest__clear {
    color: var(--td-color-fg-dim);
    cursor: pointer;
    font-size: 16px;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.t2-search-suggest__scope {
    display: flex;
    flex-direction: column;
    gap: var(--td-space-1);
    margin-bottom: var(--td-space-3);
}

.t2-search-suggest__scope-label {
    color: var(--td-color-fg-dim);
    font-family: var(--td-font-body);
    font-size: var(--td-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Provider tabs and the scope selector are overlay-local controls. They are
   styled here with tokens (instead of relying on the full UI kit) because the
   shared search overlay also renders on legacy shells, which only load the
   component-scoped search-suggest artifact. */
.t2-search-suggest__segmented {
    display: flex;
    flex-wrap: wrap;
    gap: var(--td-space-1);
}

.t2-search-suggest__segmented-item {
    align-items: center;
    background-color: var(--td-color-surface);
    border: 1px solid var(--td-color-border);
    border-radius: var(--td-radius-full);
    color: var(--td-color-fg-muted);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--td-font-body);
    font-size: var(--td-text-xs);
    gap: var(--td-space-1);
    line-height: var(--td-leading-tight);
    padding: var(--td-space-1) var(--td-space-2);
    transition: background-color var(--td-motion-fast) var(--td-ease-standard),
        border-color var(--td-motion-fast) var(--td-ease-standard),
        color var(--td-motion-fast) var(--td-ease-standard);
}

.t2-search-suggest__segmented-item:hover {
    background-color: var(--td-color-surface-hover);
    color: var(--td-color-fg);
}

.t2-search-suggest__segmented-item:focus-visible {
    outline: 2px solid var(--td-color-focus);
    outline-offset: 2px;
}

.t2-search-suggest__segmented-item--active {
    background-color: var(--td-color-primary-soft);
    border-color: var(--td-color-primary);
    color: var(--td-color-primary-fg);
}

.t2-search-suggest__recents {
    display: flex;
    flex-direction: column;
    gap: var(--td-space-1);
    min-width: 0;
}

.t2-search-suggest__recent {
    align-items: baseline;
    background: transparent;
    border: 0;
    border-radius: var(--td-radius-sm);
    color: var(--td-color-fg);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--td-font-body);
    font-size: var(--td-text-sm);
    gap: var(--td-space-2);
    padding: var(--td-space-2) var(--td-space-3);
    text-align: start;
    width: 100%;
}

.t2-search-suggest__recent:hover {
    background-color: var(--td-color-surface-hover);
}

.t2-search-suggest__recent-query {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.t2-search-suggest__recent-meta {
    color: var(--td-color-fg-dim);
    font-size: var(--td-text-xs);
}

.t2-search-suggest__recents-empty {
    color: var(--td-color-fg-dim);
    font-family: var(--td-font-body);
    font-size: var(--td-text-sm);
    margin: 0;
}

.t2-search-suggest__recents-clear {
    align-self: flex-start;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--td-radius-md);
    color: var(--td-color-fg-muted);
    cursor: pointer;
    font-family: var(--td-font-body);
    font-size: var(--td-text-xs);
    font-weight: var(--td-weight-semibold);
    line-height: var(--td-leading-tight);
    margin-top: var(--td-space-1);
    padding: var(--td-space-1) var(--td-space-2);
}

.t2-search-suggest__recents-clear:hover {
    background-color: var(--td-color-surface-hover);
    color: var(--td-color-fg);
}

.t2-search-suggest__recents-clear:focus-visible {
    outline: 2px solid var(--td-color-focus);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .t2-search-suggest__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .t2-search-suggest__inner {
        padding-inline: var(--td-space-3);
    }

    .t2-search-suggest__recent {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--td-space-1);
    }

    .t2-search-suggest__recent-query {
        overflow-wrap: anywhere;
        white-space: normal;
    }
}