html, body {
    margin: 0;
    min-height: 100%;
    /* тема приложения — Radzen «standard» (App.razor); цвета и шрифт берём из её переменных,
       а не из themeParams Telegram, чтобы вид не зависел от темы клиента */
    font-family: var(--rz-text-font-family, system-ui, sans-serif);
    background: var(--rz-body-background-color, #f5f6f7);
    color: var(--rz-text-color, #1b1b1b);
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* передача от пререндера к Blazor (js/prerender-handoff.js): пока живая разметка перерисовывается, видна неподвижная копия */
html.app-booting body > .app-shell:not(.app-shell-snapshot) {
    display: none;
}

.app-shell-snapshot {
    pointer-events: none;
}

/* FocusOnNavigate (Routes.razor) ставит фокус на заголовок страницы для экранных чтецов — рамка вокруг него не нужна */
h1:focus {
    outline: none;
}

/* Плотность на телефоне: у Radzen отступ карточки 1.25rem, на экране 375px карточка теряла пятую часть ширины.
   :root:root — специфичнее :root из темы Radzen, которая подключается после этого файла. */
:root:root {
    --rz-card-padding: 1rem;
    --rz-text-h5-font-size: 1.25rem;
    --rz-text-h5-font-weight: 600;
    --rz-text-h5-line-height: 1.3;
    --rz-text-h5-letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    :root:root {
        --rz-card-padding: 1.25rem;
    }
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem max(1rem, env(safe-area-inset-right)) 0.5rem max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid var(--rs-border);
}

.app-title {
    margin: 0;
}

.app-home {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-inline-start: -0.375rem;
    padding: 0.25rem 0.5rem 0.25rem 0.375rem;
    border-radius: 0.5rem;
}

.app-home .app-title {
    color: var(--rz-text-title-color);
}

@media (hover: hover) and (pointer: fine) {
    .app-home:hover {
        background: var(--rs-surface-hover);
    }
}

.app-home:active {
    background: var(--rs-surface-hover);
}

/* отступы под вырезы экрана и полоску «домой» на iPhone; по ширине содержимое не растягивается на весь монитор */
.app-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
    padding: 1rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* Подписи над группами («Робота», «Графік роботи»): мелко и приглушённо — заголовок не спорит с содержимым */
.section-label {
    margin: 0 0 0.375rem;
    padding-inline: 0.25rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* подпись прямо в RadzenStack (между ней и списком — общий зазор стека): прижимаем к своему списку */
.rz-stack > .section-label {
    margin-bottom: calc(-1 * var(--section-label-pull, 0.5rem));
}

/* Список строк одной группой (как настройки в Telegram/iOS): одна рамка, между строками тонкие линии.
   .list-card внутри группы — строка; отдельно стоящая .list-card — карточка с рамкой. */
.list-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
    background: var(--rz-base-background-color);
}

.list-card {
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
    background: var(--rz-base-background-color);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--rz-transition), border-color var(--rz-transition);
}

.list-group > .list-card {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--rs-border);
}

.list-group > .list-card:first-child {
    border-top: 0;
}

.list-card:hover,
.list-card:focus-visible {
    border-color: var(--rz-link-color);
}

.list-group > .list-card:hover,
.list-group > .list-card:focus-visible,
.list-group > .list-card:has(a:focus-visible) {
    border-color: var(--rs-border);
    background: var(--rs-surface-hover);
    outline: none;
}

.list-group > .list-card:active {
    background: var(--rs-surface-hover);
}

/* Второстепенный текст — цветом, а не прозрачностью: прозрачность по-разному смешивается с фоном и «грязнит» текст на цветных плашках.
   RadzenText красит себя переменной своего стиля, поэтому задаём и её. */
.muted {
    --rz-text-body1-color: var(--rz-text-tertiary-color);
    --rz-text-body2-color: var(--rz-text-tertiary-color);
    --rz-text-caption-color: var(--rz-text-tertiary-color);
    --rz-text-subtitle2-color: var(--rz-text-tertiary-color);
    color: var(--rz-text-tertiary-color);
}

/* Главная: разделы меню строками с иконкой */
.home {
    max-width: 40rem;
}

.home-hello {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
}

.menu-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-size: 1.25rem;
}

.menu-icon-work {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.menu-icon-analytics {
    background: var(--rz-success-lighter);
    color: var(--rz-success);
}

.menu-icon-admin {
    background: var(--rs-surface-muted);
    color: var(--rz-text-secondary-color);
}

.menu-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.menu-title {
    color: var(--rz-text-title-color);
    font-weight: 500;
}

/* описание раздела — только там, где есть место; на телефоне хватает названия и иконки */
.menu-description {
    display: none;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8125rem;
}

@media (min-width: 640px) {
    .menu-description {
        display: block;
    }
}

.menu-chevron {
    flex: none;
    color: var(--rz-text-disabled-color);
    font-size: 1.25rem;
}

/* сворачиваемый раздел («Адміністрування»): заголовок — такая же строка, как пункт меню */
.menu-details {
    overflow: hidden;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
    background: var(--rz-base-background-color);
}

.menu-details > summary {
    list-style: none;
    cursor: pointer;
}

.menu-details > summary::-webkit-details-marker {
    display: none;
}

.menu-details > summary .menu-chevron {
    transition: transform var(--rz-transition);
}

.menu-details[open] > summary .menu-chevron {
    transform: rotate(90deg);
}

.menu-details[open] > summary {
    border-bottom: 1px solid var(--rs-border);
}

.menu-details > .list-group {
    border: 0;
    border-radius: 0;
}

/* Ключ — значение (карточка точки, учётная запись): подпись приглушённая, значение рядом; на узком экране длинное значение переносится */
.kv-list {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.kv-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--rs-border);
}

.kv-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.kv-row:last-child {
    padding-bottom: 0;
}

.kv-row > dt {
    flex: none;
    color: var(--rz-text-tertiary-color);
    font-size: 0.875rem;
}

.kv-row > dd {
    flex: 1 1 12rem;
    margin: 0;
    color: var(--rz-text-color);
    font-size: 0.875rem;
    text-align: end;
    overflow-wrap: anywhere;
}

.kv-action {
    margin-inline-start: 0.5rem;
    vertical-align: middle;
}

.problem-title {
    --rz-text-body1-color: var(--rz-text-title-color);
    font-weight: 500;
}

.kv-row > dd.kv-block {
    flex-basis: 100%;
    text-align: start;
}

/* Чипы: свойства точки, фильтры, время восстановления */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--rs-border);
    border-radius: 999px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.35;
}

button.chip {
    min-height: 2rem;
    padding-inline: 0.75rem;
    cursor: pointer;
    transition: background-color var(--rz-transition), border-color var(--rz-transition), color var(--rz-transition);
}

@media (hover: hover) and (pointer: fine) {
    button.chip:hover:not([aria-pressed="true"]):not([aria-checked="true"]):not(:disabled) {
        border-color: var(--rs-border-hover);
        background: var(--rs-surface-hover);
    }
}

button.chip:focus-visible {
    outline: var(--rz-outline-focus, 2px solid var(--rz-primary));
    outline-offset: 2px;
}

button.chip[aria-pressed="true"],
button.chip[aria-checked="true"] {
    border-color: var(--rz-primary);
    background: var(--rz-primary-lighter);
    color: var(--rz-on-primary-lighter);
    font-weight: 500;
}

button.chip:disabled {
    cursor: default;
    opacity: 0.5;
}

/* «таблетка» статуса и счётчика проблем */
.pill {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--rs-surface-muted);
    color: var(--rz-text-secondary-color);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.pill-ok {
    background: var(--rz-success-lighter);
    color: var(--rz-on-success-lighter);
}

.pill-warn {
    background: var(--rz-warning-lighter);
    color: var(--rz-on-warning-lighter);
}

.pill-off {
    background: var(--rz-danger-lighter);
    color: var(--rz-on-danger-lighter);
}

/* Шапка точки: название, под ним статус и тип таблетками, звёздочка справа */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.page-head-main {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* Фильтры списка: строка поиска и чипы под ней */
.search-row {
    display: flex;
    gap: 0.5rem;
}

.search-row > .rz-textbox {
    flex: 1;
    min-width: 0;
}

/* Время восстановления: даты строками, часы — сеткой чипов */
.slot-day + .slot-day {
    margin-top: 0.5rem;
}

.slot-day-title {
    margin: 0 0 0.375rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.8125rem;
}

.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: 0.375rem;
}

.slot-grid > button.chip {
    justify-content: center;
}

/* Главная кнопка формы прилипает к низу экрана, пока форма на экране: не надо листать до неё через всю форму */
.sticky-action {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-inline: calc(-1 * var(--rz-card-padding));
    margin-bottom: calc(-1 * var(--rz-card-padding));
    padding: 0.75rem var(--rz-card-padding) max(0.75rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--rs-border);
    border-radius: 0 0 var(--rz-card-border-radius) var(--rz-card-border-radius);
    background: var(--rz-base-background-color);
}

.sticky-action > .rz-button {
    width: 100%;
}

/* Скелетон вместо «Завантаження…»: серые полосы на месте будущего содержимого */
.skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.skeleton-line {
    height: 0.875rem;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, var(--rs-surface-muted) 0%, var(--rs-surface-hover) 50%, var(--rs-surface-muted) 100%);
    background-color: var(--rs-surface-muted);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line:nth-child(3n + 1) {
    width: 60%;
}

.skeleton-line:nth-child(3n + 2) {
    width: 90%;
}

.skeleton-line:nth-child(3n) {
    width: 75%;
}

@keyframes skeleton-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-line {
        animation: none;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* сообщение под полем формы (проверка не пройдена) */
.field-error {
    color: var(--rz-danger);
}

.back-link {
    color: var(--rz-link-color);
    text-decoration: none;
}

.auth-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    text-align: center;
}

/* строка списка точек: ссылка + кнопка «обране» */
.shop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.shop-row-link {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

/* вкладки: полоса вкладок листается вбок внутри себя и не растягивает страницу.
   На узком экране Mini App вкладки точки («Огляд», «Проблеми», «Генератор», «Залишки», «Налаштування», «Доступи») не помещаются,
   а полоса Radzen — flex без переноса и без overflow, поэтому ширина страницы вырастала до суммы вкладок и страница ехала вбок.
   Слой modern подключается позже app.css и перекрыл бы эти правила порядком, поэтому специфичность повышена (.rz-tabview.rz-tabview-top). */
/* Вид вкладок — «таблетки» на мягком фоне, без рамки вокруг содержимого: карточки внутри вкладки и так в рамках,
   а панель-карточка вокруг них давала «коробки в коробках» и съедала ширину на телефоне.
   Справа полоса тает (mask) — видно, что вкладок больше и полосу можно листать; запас справа (padding) не даёт последней вкладке
   остаться полупрозрачной, когда полоса долистана до конца. */
.rz-tabview.rz-tabview-top > .rz-tabview-nav {
    gap: 0.25rem;
    padding: 0.1875rem 1.5rem 0.1875rem 0.1875rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border: 0;
    border-radius: 0.75rem;
    background: var(--rs-surface-muted);
    box-shadow: inset 0 0 0 1px var(--rs-border);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav li,
.rz-tabview.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    flex: none;
    margin: 0;
    border: 0;
    border-radius: 0.5625rem;
    background: transparent;
    white-space: nowrap;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-disabled) {
    color: var(--rz-text-title-color);
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav li > a {
    padding: 0.375rem 0.875rem;
}

.rz-tabview.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected {
    margin: 0;
    background: var(--rz-base-background-color);
    color: var(--rz-text-title-color);
    box-shadow: var(--rs-shadow-xs), 0 0 0 1px var(--rs-border);
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.rz-tabview.rz-tabview-top > .rz-tabview-panels > .rz-tabview-panel {
    padding: 1rem 0 0;
}

/* фото точки — RadzenCarousel (свайп пальцем, стрелки, точки); у Radzen высота ленты 100% от контейнера, поэтому высоту задаёт соотношение сторон */
.shop-photos {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    aspect-ratio: 4 / 3;
}

.shop-photos .rz-carousel-item {
    background-color: var(--rs-surface-muted);
}

.shop-photos .rz-carousel-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop-photos .rz-carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* экран переподключения Blazor (Components/Layout/ReconnectModal.razor; состояния — классы components-reconnect-*) */
.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    background-color: var(--rz-base-background-color);
    color: var(--rz-text-color);
    width: min(20rem, calc(100vw - 2rem));
    box-sizing: border-box;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: var(--rs-shadow-lg);
}

#components-reconnect-modal::backdrop {
    background-color: var(--rs-mask);
}

.components-reconnect-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button {
    border: 0;
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;
    font: inherit;
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

.components-rejoining-animation div {
    position: absolute;
    border: 3px solid var(--rz-primary);
    opacity: 1;
    border-radius: 50%;
    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes components-rejoining-animation {
    0%, 4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* заявки в Jira: текст з переносами рядків, вкладення, коментарі, перегляд фото */
.pre-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attachment-thumb {
    padding: 0;
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
    background: var(--rs-surface-muted);
    overflow: hidden;
    cursor: pointer;
}

.attachment-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attachment-name {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
}

.comment {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
}

.comment-composer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rs-border);
}

.upload-chip {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
}

.upload-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.88);
}

.lightbox img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
}

/* Просмотр файла журнала (/admin/logs): моноширинный текст, длинные строки переносятся, окно листается */
.log-view {
    margin: 0;
    padding: 0.5rem 0.75rem;
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
    background: var(--rs-surface-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Блок активных проблем точки — «Відхилення в роботі» (вкладка «Огляд») и «Активні проблеми» (вкладка «Проблеми»):
   цвет и рамка слева, чтобы блок не сливался с остальными карточками. Три класса — чтобы перебить .rz-card.rz-variant-filled
   из слоя modern, который подключается после этого файла. Без проблем (-ok) блок зелёный. */
.rz-card.rz-variant-filled.problems-card {
    border: 1px solid var(--rz-warning-light);
    background: var(--rz-warning-lighter);
}

.rz-card.rz-variant-filled.problems-card-ok {
    border-color: var(--rz-success);
    background: var(--rz-success-lighter);
}

/* выбор сотрудника / точки (LookupPicker): закрытое поле выглядит как поле ввода, найденное — списком строк под строкой поиска */
.lookup-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.lookup-picker-value,
.lookup-picker-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lookup-picker-current {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    min-height: var(--rz-input-height, 2.25rem);
    padding: 0.375rem 0.75rem;
    border: var(--rz-input-border);
    border-radius: var(--rz-input-border-radius, var(--rz-border-radius));
    background: var(--rz-input-background-color, transparent);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.lookup-picker-current:hover {
    border: var(--rz-input-hover-border);
}

.lookup-picker-current:focus-visible {
    border: var(--rz-input-focus-border);
    box-shadow: var(--rz-input-focus-shadow);
    outline: none;
}

.lookup-picker-icon {
    margin-inline-start: auto;
    opacity: 0.6;
}

.lookup-picker-results {
    display: flex;
    flex-direction: column;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--rs-border);
    border-radius: var(--rz-card-border-radius);
}

.lookup-picker-item {
    padding: 0.625rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--rs-border);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.lookup-picker-item:last-child {
    border-bottom: 0;
}

.lookup-picker-item:hover,
.lookup-picker-item:focus-visible {
    background: var(--rz-base-background-color, var(--rs-surface-muted));
    outline: none;
}

.lookup-picker-item[aria-selected="true"] {
    font-weight: 600;
}