/* Custom ZSelect (react-select look) + ZCheckbox (MUI look) supporting layout.
   Colours/typography come from the copied react-select / MUI CSS in global.css etc. */

/* ----- ZSelect ----- */
.react-select-container {
    position: relative;
    width: 100%;
}

.react-select__control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    background: #fff;
    cursor: pointer;
}

.react-select__value-container {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.react-select__single-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.react-select__input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    color: var(--gray-dark);
}

.react-select__indicators {
    display: flex;
    align-items: center;
}

.react-select__indicator {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.react-select__indicator--open {
    transform: rotate(180deg);
}

.react-select__menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 100000;
    background: #fff;
}

.react-select__menu-list {
    max-height: 240px;
    overflow-y: auto;
}

.react-select__option {
    padding: 8px 16px;
    cursor: pointer;
    background: #fff;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 14px;
    line-height: 171%;
    color: var(--gray-dark);
}

.react-select__option:hover,
.react-select__option--is-selected {
    background: var(--gray-background);
}

.zselect-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: transparent;
}

/* ----- ZCheckbox (MUI) ----- */
.MuiButtonBase-root {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.z-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

/* ----- Native checkboxes restyled to the MUI Checkbox look (no markup changes) ----- */
.page_main_list_item-col-checbox input[type="checkbox"],
.filter_param_label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23B7B6B3' d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.page_main_list_item-col-checbox input[type="checkbox"]:checked,
.filter_param_label input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E6BE32' d='M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

/* ----- Export buttons (Сгенерировать QR-код / выгрузить Excel) ----- */
.generate_pdf_button {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 16px;
}

.generate_pdf_button-icon {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.generate_pdf_button-label {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 14px;
    line-height: 171%;
    color: var(--gray-medium);
    white-space: nowrap;
}