/* Chrome global search — compact pill that lives in the top nav and
 * expands to a flyout panel on focus. Fully namespaced via [data-tt-cs-*]
 * attribute selectors so it does not collide with the legacy .btn /
 * .dropdown-menu / .fab-items rules in default-layout.css. Color tokens
 * align with kendo-grid-shell.css and frm_detail_action_link--primary so
 * the component reads as part of the same modernization family.
 */

/* Wrapper <li> in the legacy .notifi-nav. The nav rows are 40px tall;
 * the trigger is 32px so center it vertically and absorb the nav-li
 * styles so the chrome reads as a peer of the other top-bar items.
 *
 * No min-width on the host so the navbar's flex layout can shrink the
 * search when the row competes for space (high DPI / 175% scale, or
 * narrow viewports). The trigger has its own min-width = the icon, so
 * even fully shrunk it remains a recognizable search affordance. */
.tt-chrome-search-host {
    display: inline-flex !important;
    align-items: center;
    height: 52px;
    padding: 0 !important;
    flex: 0 0 clamp(420px, 28vw, 570px);
    width: clamp(420px, 28vw, 570px);
    max-width: 570px;
    min-width: 0;
}
.tt-chrome-search-host > a:hover { background: transparent !important; }

[data-tt-cs] {
    --tt-cs-bg-soft: var(--ds-surface-secondary-menu, #f8fafc);
    --tt-cs-border: #d9e2ec;
    --tt-cs-border-soft: #eef2f6;
    --tt-cs-text: #1f2937;
    --tt-cs-muted: #64748b;
    --tt-cs-faint: #94a3b8;
    --tt-cs-brand: var(--tt-chrome-row-selected-border, #2b7fff);
    --tt-cs-brand-soft: var(--tt-chrome-row-selected-bg, #e8f3ff);
    --tt-cs-radius: 8px;
    --tt-cs-radius-panel: 12px;
    --tt-cs-shadow: 0 18px 44px -24px rgba(15, 23, 42, .24), 0 4px 12px -8px rgba(15, 23, 42, .12);

    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 12px 0 0;
}

[data-tt-cs][aria-expanded="true"] {
    position: fixed;
    top: var(--tt-cs-open-top, 8px);
    left: var(--tt-cs-open-left, 48px);
    width: var(--tt-cs-open-width, min(860px, calc(100vw - 96px)));
    max-width: none;
    display: block;
    margin: 0;
    z-index: 10000;
}

[data-tt-cs-backdrop] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .36);
    z-index: 0;
}
[data-tt-cs-backdrop][hidden] { display: none !important; }

/* The trigger pill: icon + placeholder + ⌘K hint. Looks editable but
 * delegates to the panel input on focus — so the visible chrome state
 * never receives a typed character.
 *
 * Tuned for the LIGHT navbar: a visible, low-contrast field border so
 * the target is discoverable without reading as a heavy button. */
[data-tt-cs-trigger] {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid var(--tt-cs-border);
    border-radius: var(--tt-cs-radius);
    color: var(--tt-cs-muted);
    font: 500 13px inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; /* override .btn box-shadow if .btn class leaks in */
    line-height: 1;
    text-align: left;
    position: relative;
    z-index: 2;
}
[data-tt-cs-trigger]:hover {
    background: var(--tt-cs-bg-soft);
    border-color: var(--tt-cs-brand);
    color: var(--tt-cs-text);
}
[data-tt-cs][aria-expanded="true"] [data-tt-cs-trigger] {
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 0 16px;
    background: #ffffff;
    border-color: var(--tt-cs-border);
    box-shadow: none !important;
    color: var(--tt-cs-text);
    outline: none;
    border-radius: 12px 12px 0 0;
    z-index: 3;
}
[data-tt-cs-trigger]:focus-visible {
    background: #fff;
    border-color: var(--tt-cs-brand);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .25) !important;
    color: var(--tt-cs-text);
    outline: none;
}
[data-tt-cs-trigger] [data-tt-cs-icon] {
    display: inline-flex;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: currentColor;
    opacity: .85;
}
[data-tt-cs-trigger] [data-tt-cs-icon] svg { width: 15px; height: 15px; }
[data-tt-cs-trigger] [data-tt-cs-placeholder] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-tt-cs-trigger] [data-tt-cs-input] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 30px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--tt-cs-text);
    font: 500 13.5px/30px inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}
[data-tt-cs-trigger] [data-tt-cs-input]::placeholder {
    color: var(--tt-cs-muted);
    opacity: 1;
}
[data-tt-cs][aria-expanded="true"] [data-tt-cs-trigger] [data-tt-cs-input] {
    height: 40px !important;
    font: 500 15px/40px inherit;
}

/* Keyboard shortcut chip in the trigger. Light-nav variant: white
 * surface with slate border. Reserves space so platform swap
 * (⌘K → Ctrl K) doesn't reflow. */
[data-tt-cs-kbd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 32px;
    height: 18px;
    padding: 0 6px;
    border: 1px solid var(--tt-cs-border);
    border-radius: 4px;
    background: #fff;
    color: var(--tt-cs-muted);
    font: 600 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
    white-space: nowrap;
}
[data-tt-cs][aria-expanded="true"] [data-tt-cs-kbd],
[data-tt-cs-trigger]:focus-visible [data-tt-cs-kbd] {
    border-color: var(--tt-cs-border);
    background: #fff;
    color: var(--tt-cs-muted);
}
[data-tt-cs][aria-expanded="true"] [data-tt-cs-trigger] > [data-tt-cs-kbd] {
    display: none;
}

/* The expanded panel. Anchored to the trigger's RIGHT edge so it grows
 * leftward (away from the right-side icon cluster — Mailbox, Apps,
 * Notif, Help, Profile). On narrow viewports `width: min(640px, …)`
 * still prevents the left edge from running off-screen. */
[data-tt-cs-panel] {
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    width: 100%;
    padding-top: 42px;
    background: #fff;
    border: 1px solid var(--tt-cs-border);
    border-radius: var(--tt-cs-radius-panel);
    box-shadow: var(--tt-cs-shadow);
    overflow: hidden;
    z-index: 1;
    /* Hidden via the [hidden] attribute, not display:none, so screen
     * readers can be notified when it appears via aria-live patterns
     * if we add them later. */
}
[data-tt-cs-panel][hidden] { display: none; }

[data-tt-cs-input-row] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 14px 16px 10px;
    padding: 0 12px;
    height: 50px;
    min-height: 50px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: none;
}
[data-tt-cs-input-row] [data-tt-cs-icon] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-tt-cs-input-row] [data-tt-cs-icon] svg { width: 16px; height: 16px; color: #475569; }

/* Active-sigil chip. Shown when user types a sigil prefix (>, @, #, :)
 * to indicate the current scope. Sits between the magnifying glass and
 * the input. Color carries the meaning — Pages green, Users purple,
 * Records blue, Views gray — so a glance at the chrome tells you what
 * mode you're in. */
[data-tt-cs-scope-chip] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 22px;
    padding: 0 9px;
    border-radius: 12px;
    background: var(--tt-cs-brand-soft);
    color: var(--tt-cs-brand);
    font: 600 11px inherit;
    line-height: 1;
    text-transform: capitalize;
    letter-spacing: .01em;
}
[data-tt-cs-scope-chip][hidden] { display: none !important; }
[data-tt-cs-scope-chip][data-tt-cs-scope="pages"]   { background: #dcfce7; color: #166534; }
[data-tt-cs-scope-chip][data-tt-cs-scope="users"]   { background: #f3e8ff; color: #6d28d9; }
[data-tt-cs-scope-chip][data-tt-cs-scope="records"] { background: var(--tt-cs-brand-soft); color: var(--tt-cs-brand); }
[data-tt-cs-scope-chip][data-tt-cs-scope="views"]   { background: var(--tt-cs-bg-soft); color: var(--tt-cs-muted); }

[data-tt-cs-input] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 48px !important;
    border: 0 !important;
    border-bottom: 0 !important;
    outline: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    font: 500 15px/normal inherit;
    color: var(--tt-cs-text);
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    vertical-align: middle;
}
[data-tt-cs-input]::placeholder { color: #64748b; opacity: 1; }
[data-tt-cs-input]:focus {
    border: 0 !important;
    border-bottom: 0 !important;
    outline: none;
    box-shadow: none !important;
}

[data-tt-cs-trigger] [data-tt-cs-input] {
    height: 30px !important;
    font: 500 13.5px/30px inherit;
}
[data-tt-cs][aria-expanded="true"] [data-tt-cs-trigger] [data-tt-cs-input] {
    height: 36px !important;
    font: 500 15px/36px inherit;
}

[data-tt-cs-list] {
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0 6px;
    /* Reserve scrollbar gutter in layout so the kbd chip can't be
     * overlaid or clipped on any platform — overlay (macOS/iPad),
     * classic (Windows), or "Always show scrollbars" macOS preference.
     * Padding-right alone is insufficient because classic-mode
     * scrollbars can be 14–17px wide and eat into the gutter. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}
[data-tt-cs-list]::-webkit-scrollbar { width: 8px; }
[data-tt-cs-list]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
[data-tt-cs-list]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-tt-cs-list]::-webkit-scrollbar-track { background: transparent; }
/* Per-item right padding still applied below as a redundant safety. */
[data-tt-cs-section-label] {
    padding: 11px 24px 4px 18px;
    box-sizing: border-box;
    font: 700 10.5px inherit;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .06em;
}
[data-tt-cs-item] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px 8px 18px;
    /* See chrome-create.css — content-box + width:100% + padding caused
     * the kbd chip to overflow the panel right edge. */
    box-sizing: border-box;
    cursor: pointer;
    color: var(--tt-cs-text);
    font-size: 13.5px;
    text-decoration: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    line-height: 1.3;
}
[data-tt-cs-item]:hover {
    background: var(--tt-cs-bg-soft);
}
/* Keyboard-active row stands out enough that arrow-key navigation is
 * obviously working. Brand-tinted bg + brand-colored label + filled
 * brand icon. Same treatment as chrome-create for consistency. */
[data-tt-cs-item][data-tt-cs-active="true"] {
    background: var(--tt-cs-brand-soft);
    box-shadow: inset 3px 0 0 var(--tt-cs-brand);
}
[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-label] {
    color: var(--tt-cs-brand);
    font-weight: 600;
}
[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-icon] {
    background: var(--tt-cs-brand);
    color: #fff;
}
[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip] {
    background: var(--tt-cs-bg-soft);
    color: #475569;
    border: 1px solid transparent;
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="crm"] {
    background: #e6fbfd;
    color: #008fa1;
    border-color: rgba(0, 143, 161, .72);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="contact"] {
    background: #e6fbfd;
    color: #008fa1;
    border-color: rgba(0, 143, 161, .72);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="company"] {
    background: #eff6ff;
    color: #2563eb;
    border-color: rgba(37, 99, 235, .62);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="deal"] {
    background: #fff7ed;
    color: #b45309;
    border-color: rgba(180, 83, 9, .62);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="billing"] {
    background: #eef2ff;
    color: #4f46e5;
    border-color: rgba(79, 70, 229, .62);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="forms"] {
    background: #f0fdf4;
    color: #15803d;
    border-color: rgba(21, 128, 61, .62);
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-chip][data-tt-cs-chip-area="calendar"] {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: rgba(124, 58, 237, .58);
}
[data-tt-cs-item-icon] {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--tt-cs-bg-soft);
    color: #475569;
    font-size: 14px;
}
[data-tt-cs-item-icon] i { font-size: 14px; line-height: 1; }
[data-tt-cs-item-icon] svg { width: 15px; height: 15px; }
[data-tt-cs-item-label] {
    flex: 1;
    min-width: 0;
    font-weight: 520;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-tt-cs-item-meta] {
    color: #64748b;
    font-size: 12.5px;
    margin-right: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
[data-tt-cs-item-chip] {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--tt-cs-bg-soft);
    color: #475569;
    font: 500 11px/1.15 inherit;
    text-transform: none;
    letter-spacing: 0;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="crm"] {
    background: #e6fbfd;
    color: #008fa1;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="contact"] {
    background: #e6fbfd;
    color: #008fa1;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="company"] {
    background: #eff6ff;
    color: #2563eb;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="deal"] {
    background: #fff7ed;
    color: #b45309;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="billing"] {
    background: #eef2ff;
    color: #4f46e5;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="forms"] {
    background: #f0fdf4;
    color: #15803d;
}

[data-tt-cs-item-chip][data-tt-cs-chip-area="calendar"] {
    background: #f5f3ff;
    color: #7c3aed;
}

[data-tt-cs-item-kbd] {
    flex-shrink: 0;
    min-width: 28px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 1px solid var(--tt-cs-border);
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    font: 700 10.5px/1 inherit;
    letter-spacing: .02em;
}

[data-tt-cs-item][data-tt-cs-active="true"] [data-tt-cs-item-kbd] {
    border-color: var(--tt-cs-brand);
    color: var(--tt-cs-brand);
}

[data-tt-cs-empty] {
    padding: 22px 14px;
    text-align: center;
    color: var(--tt-cs-muted);
    font-size: 13px;
}
[data-tt-cs-loading] {
    padding: 14px;
    color: var(--tt-cs-faint);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
[data-tt-cs-loading] .tt-cs-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--tt-cs-border);
    border-top-color: var(--tt-cs-brand);
    border-radius: 50%;
    animation: tt-cs-spin .7s linear infinite;
}
@keyframes tt-cs-spin { to { transform: rotate(360deg); } }

[data-tt-cs-foot] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border-top: 1px solid var(--tt-cs-border-soft);
    background: var(--tt-cs-bg-soft);
    font-size: 11.5px;
    color: #64748b;
}
[data-tt-cs-foot] [data-tt-cs-sigil] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
[data-tt-cs-foot] [data-tt-cs-foot-right] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
[data-tt-cs-foot] kbd,
[data-tt-cs-foot] [data-tt-cs-kbd-inline] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--tt-cs-border);
    border-radius: 4px;
    background: #fff;
    color: var(--tt-cs-muted);
    font: 600 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
}

/* Hide everything when [hidden] for graceful degradation if JS fails. */
[data-tt-cs-panel][hidden],
[data-tt-cs-list-typed][hidden],
[data-tt-cs-list-zero][hidden] { display: none !important; }

/* Responsive ladder. Keep search useful on ordinary pages; reserve the
 * icon-only state for genuinely cramped laptop/tablet widths. */
@media (max-width: 1700px) {
    .tt-chrome-search-host {
        flex-basis: clamp(370px, 27vw, 520px);
        width: clamp(370px, 27vw, 520px);
        max-width: 520px;
    }
    [data-tt-cs] { width: 100%; max-width: none; margin: 0 12px 0 0; }
}

@media (max-width: 1500px) {
    .tt-chrome-search-host {
        flex-basis: clamp(315px, 24vw, 395px);
        width: clamp(315px, 24vw, 395px);
        max-width: 395px;
    }
    [data-tt-cs] { width: 100%; max-width: none; margin: 0 10px 0 0; }
}

@media (max-width: 1180px) {
    .tt-chrome-search-host {
        flex: 0 0 clamp(280px, 30vw, 340px);
        width: clamp(280px, 30vw, 340px);
        max-width: 340px;
    }
    [data-tt-cs] { width: 100%; max-width: none; min-width: 0; margin: 0 8px 0 0; }
    [data-tt-cs-trigger] { padding: 0 10px; gap: 8px; }
    [data-tt-cs-trigger] [data-tt-cs-kbd] { display: none; }
}

@media (max-width: 760px) {
    .tt-chrome-search-host { flex: 0 0 44px; width: 44px; max-width: 44px; }
    [data-tt-cs] { max-width: 44px; min-width: 36px; margin: 0 4px; }
    [data-tt-cs-trigger] { padding: 0 10px; gap: 0; }
    [data-tt-cs-trigger] [data-tt-cs-kbd] { display: none; }
    [data-tt-cs]:not([aria-expanded="true"]) [data-tt-cs-trigger] [data-tt-cs-placeholder],
    [data-tt-cs]:not([aria-expanded="true"]) [data-tt-cs-trigger] [data-tt-cs-input] { display: none; }
}