/* Sva lokalna polja za pretragu koriste okvir, ikonicu i fokus globalne pretrage. */
html:root[data-theme] body #app-shell .bm-page-search {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0 !important;
    border: 1px solid var(--bm-search-border, var(--bm-border, rgba(127, 127, 127, .2))) !important;
    border-radius: 8px !important;
    background: var(--bm-search-bg, var(--bm-surface, transparent)) !important;
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    box-shadow: none !important;
    overflow: hidden;
}

html:root[data-theme] body #app-shell .bm-page-search--compact { width: min(185px, 100%) !important; }
html:root[data-theme] body #app-shell .bm-page-search--wide { width: min(420px, 100%) !important; }
html:root[data-theme] body #app-shell .bm-page-search--full { width: 100% !important; }

/* Na Serverima je ikonica ranije bila apsolutno pozicionirana, pa je novi fleks raspored nije uračunavao i tekst je prelazio preko nje. */
html:root[data-theme] body #app-shell .bm-server-search.bm-page-search {
    width: min(280px, calc(100vw - 2rem)) !important;
    max-width: 100%;
}

html:root[data-theme] body #app-shell .bm-server-search.bm-page-search > .bm-server-search__icon {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

html:root[data-theme] body #app-shell .bm-page-search:focus-within {
    border-color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bm-search-icon-active, var(--bm-accent, currentColor)) 16%, transparent) !important;
}

html:root[data-theme] body #app-shell .bm-page-search > :is(.bm-search-icon, .bm-server-search__icon, .chat-search__icon, .wg-search-icon, .bm-page-search__icon) {
    display: block !important;
    flex: 0 0 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 0 0 .65rem !important;
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    background: currentColor !important;
    background-image: none !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

html:root[data-theme] body #app-shell .bm-page-search > :is(.bm-server-search__icon, .chat-search__icon) svg { display: none !important; }

html:root[data-theme] body #app-shell .bm-page-search:focus-within > :is(.bm-search-icon, .bm-server-search__icon, .chat-search__icon, .wg-search-icon, .bm-page-search__icon) {
    color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
}

html:root[data-theme] body #app-shell .bm-page-search > input,
html:root[data-theme] body #app-shell .bm-page-search > input:focus {
    display: block !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 .55rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--bm-text-primary, var(--bm-text, currentColor)) !important;
    -webkit-text-fill-color: var(--bm-text-primary, var(--bm-text, currentColor)) !important;
    caret-color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    font-family: inherit !important;
    font-size: .78rem !important;
    font-weight: 400 !important;
    line-height: normal !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

html:root[data-theme] body #app-shell .bm-page-search > input::placeholder {
    color: #8b93a1 !important;
    -webkit-text-fill-color: #8b93a1 !important;
    font-family: inherit !important;
    font-size: .76rem !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    opacity: 1 !important;
}

html:root[data-theme].dark-theme body #app-shell .bm-page-search > input::placeholder {
    color: #626771 !important;
    -webkit-text-fill-color: #626771 !important;
}

html:root[data-theme] body #app-shell .bm-page-search > input::-webkit-search-decoration,
html:root[data-theme] body #app-shell .bm-page-search > input::-webkit-search-cancel-button,
html:root[data-theme] body #app-shell .bm-page-search > input::-webkit-search-results-button,
html:root[data-theme] body #app-shell .bm-page-search > input::-webkit-search-results-decoration { display: none !important; }

html:root[data-theme] body #app-shell .bm-page-search > button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 1.75rem !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--bm-search-icon, var(--bm-text-secondary, currentColor)) !important;
    background: transparent !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

html:root[data-theme] body #app-shell .bm-page-search > button:hover,
html:root[data-theme] body #app-shell .bm-page-search > button:focus-visible {
    color: var(--bm-search-icon-active, var(--bm-accent, currentColor)) !important;
    background: var(--bm-row-hover, transparent) !important;
}