/* Собственный выпадающий список: сам <select> прячется, но остаётся в разметке —
   он источник правды для кода. Видимая часть — кнопка и меню в body. */

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

/* Кнопка наследует классы поля от вызывающей стороны, поэтому здесь только то,
   что отличает её от обычной кнопки: выключка по левому краю и место под стрелку. */
.zsel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
    cursor: pointer;
}

.zsel-btn:disabled { cursor: not-allowed; opacity: .55; }
.zsel-btn__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zsel-btn__a {
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .75;
}

.zsel-menu {
    position: fixed;
    z-index: 30000;
    max-height: 320px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--zsel-line, #d3dce3);
    background: var(--zsel-bg, #fff);
    color: var(--zsel-ink, #16232e);
    box-shadow: 0 18px 44px -18px rgba(16, 36, 48, .45);
}

.zsel-menu[hidden] { display: none; }

.zsel-menu__search { padding: 6px; border-bottom: 1px solid var(--zsel-line, #d3dce3); }
.zsel-menu__input {
    width: 100%;
    font: inherit;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--zsel-line, #d3dce3);
    background: var(--zsel-field, #f2f5f8);
    color: inherit;
}
.zsel-menu__input:focus { outline: 2px solid var(--zsel-accent, #0d9488); outline-offset: 1px; }

.zsel-menu__list { overflow-y: auto; padding: 4px; }
.zsel-menu__item {
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zsel-menu__item.is-cursor { background: var(--zsel-hover, #e8f1fc); }
.zsel-menu__item.is-picked { font-weight: 600; }
.zsel-menu__item.is-picked::after { content: " ✓"; color: var(--zsel-accent, #0d9488); }
.zsel-menu__empty { padding: 10px; font-size: 12.5px; color: var(--zsel-muted, #7d8b96); }

/* Тёмная тема панелей: админка и рабочее место цеха помечают её по-разному. */
body.admin-theme-dark, body.dark-theme {
    --zsel-line: #2b3a47;
    --zsel-bg: #16212c;
    --zsel-ink: #dbe7ef;
    --zsel-field: #101a22;
    --zsel-hover: #1e2e3b;
    --zsel-muted: #7d93a3;
    --zsel-accent: #2ee6d6;
}