/* Omnisearch palette (Cmd/Ctrl+K). The service provider adds this file to the
   active theme's styles, so it loads on every admin page. Colors come from Tabler's
   variables so the palette follows the light/dark mode switch. */

/* Knobs. Override them in your own stylesheet, e.g. .bp-omnisearch { --bp-omnisearch-width: 900px; } */
.bp-omnisearch {
    --bp-omnisearch-width: 760px;        /* panel width on wide screens */
    --bp-omnisearch-top: 8vh;            /* distance from the top of the viewport */
    --bp-omnisearch-max-height: 84vh;    /* the results list scrolls past this */
    --bp-omnisearch-z-index: 1100;       /* above Tabler's navbar, modals and offcanvas */
    --bp-omnisearch-backdrop: rgba(22, 28, 45, .55);
    --bp-omnisearch-radius: var(--tblr-border-radius-lg, 1rem);
}

.bp-omnisearch { position: fixed; inset: 0; z-index: var(--bp-omnisearch-z-index); }
.bp-omnisearch__backdrop { position: absolute; inset: 0; background: var(--bp-omnisearch-backdrop); backdrop-filter: blur(2px); }
.bp-omnisearch__panel {
    position: relative; margin: var(--bp-omnisearch-top) auto 0; width: min(var(--bp-omnisearch-width), 94vw); max-height: var(--bp-omnisearch-max-height);
    display: flex; flex-direction: column; overflow: hidden;
    /* Skins like "glass" make --tblr-bg-surface translucent, which reads as "disabled"
       over the dark backdrop. Painting it over the opaque body background keeps the
       surface tint but makes the panel solid, in both color modes. */
    background: linear-gradient(var(--tblr-bg-surface), var(--tblr-bg-surface)), var(--tblr-body-bg);
    color: var(--tblr-body-color);
    border-radius: var(--bp-omnisearch-radius);
    box-shadow: 0 2rem 4rem rgba(22, 28, 45, .3);
}

/* Input row */
.bp-omnisearch__field { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--tblr-border-color); }
.bp-omnisearch__icon { position: absolute; left: 1.1rem; color: var(--tblr-secondary); font-size: 1.25rem; pointer-events: none; }
.bp-omnisearch__input { flex: 1; border: 0; outline: 0; font-size: 1.15rem; padding: 1.1rem 6rem 1.1rem 3rem; background: transparent; color: inherit; }
.bp-omnisearch__input::-webkit-search-cancel-button { display: none; }
.bp-omnisearch__spinner { position: absolute; right: 4rem; color: var(--tblr-secondary); }
.bp-omnisearch__close {
    position: absolute; right: 1rem; border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-secondary); border-radius: .35rem; font-size: .7rem; padding: .15rem .45rem; text-transform: uppercase; letter-spacing: .04em;
}

/* Results */
.bp-omnisearch__results { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.bp-omnisearch__group { padding: .75rem 0 .25rem; }
.bp-omnisearch__group + .bp-omnisearch__group { border-top: 1px solid var(--tblr-border-color); }
.bp-omnisearch__group-title { display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tblr-secondary); padding: 0 1.25rem .35rem; }
.bp-omnisearch__group-count { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .8; }
.bp-omnisearch__hit { display: block; padding: .55rem 1.25rem .55rem calc(1.25rem - 3px); cursor: pointer; border-left: 3px solid transparent; }
.bp-omnisearch__hit:hover, .bp-omnisearch__hit.is-active { background: var(--tblr-active-bg, var(--tblr-bg-surface-secondary)); border-left-color: var(--tblr-primary); }
.bp-omnisearch__hit .bp-chip { pointer-events: none; }           /* the whole row is the click target… */
.bp-omnisearch__hit .bp-chip a { pointer-events: auto; }         /* …but links inside the chip still work. */
.bp-omnisearch__hit--more { padding-top: .4rem; padding-bottom: .4rem; font-size: .8125rem; color: var(--tblr-secondary); }
.bp-omnisearch__hit--more .la { width: 1.25rem; text-align: center; }
.bp-omnisearch__hit--more:hover, .bp-omnisearch__hit--more.is-active { color: var(--tblr-body-color); }
.bp-omnisearch__empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--tblr-secondary); }
.bp-omnisearch__empty strong { color: var(--tblr-body-color); }

/* Shortcut hits: one line, icon + label + muted hint */
.bp-omnisearch-shortcut { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.bp-omnisearch-shortcut__icon { color: var(--tblr-secondary); width: 1.25rem; text-align: center; flex: none; }
.bp-omnisearch-shortcut__label { font-weight: 500; white-space: nowrap; }
.bp-omnisearch-shortcut__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.bp-omnisearch-shortcut__badge { flex: none; font-weight: 500; }
.bp-omnisearch-shortcut__badge kbd { font-size: .65rem; padding: 0 .25rem; margin-left: .15rem; background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: .2rem; font-family: inherit; }
.bp-omnisearch__hit.is-busy { opacity: .6; pointer-events: none; }

/* Footer with keyboard hints */
.bp-omnisearch__footer { display: flex; gap: 1.25rem; align-items: center; padding: .6rem 1.25rem; border-top: 1px solid var(--tblr-border-color); font-size: .75rem; color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); }
.bp-omnisearch__footer kbd { font-size: .7rem; padding: .05rem .35rem; margin-right: .15rem; color: var(--tblr-secondary); background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: .25rem; font-family: inherit; }

@media (max-width: 575.98px) {
    .bp-omnisearch__panel { margin-top: 0; width: 100vw; max-height: 100vh; height: 100dvh; border-radius: 0; }
    .bp-omnisearch__footer span { display: none; }
    .bp-omnisearch__footer { padding: .35rem; }
}