/* Shared checkbox dropdown; dimensions and palette inherit locked KONAN tokens. */
.checkbox-select { min-width: 0; display: grid; gap: var(--form-label-gap); }
.checkbox-select__anchor { position: relative; min-width: 0; }
.checkbox-select__trigger { width: 100%; height: var(--filter-height); display: flex; align-items: center; justify-content: space-between; gap: var(--button-gap); padding-inline: var(--filter-padding-x); border: var(--filter-border); border-radius: var(--filter-radius); background: var(--surface); color: var(--text); cursor: pointer; }
.checkbox-select__trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkbox-select__trigger > svg { width: var(--button-icon-size); height: var(--button-icon-size); flex-shrink: 0; color: var(--hint); }
.checkbox-select__panel { position: absolute; top: calc(100% + var(--form-label-gap)); inset-inline: 0; z-index: 3; padding: var(--form-padding); background: var(--surface); border: var(--account-menu-border); border-radius: var(--account-menu-radius); box-shadow: var(--account-menu-shadow); }
.checkbox-select__panel:not([hidden]) { display: grid; gap: var(--form-label-gap); }
.checkbox-select__options { max-height: min(240px, 30dvh); overflow-y: auto; min-width: 0; }
.checkbox-select__option { padding-block: var(--form-label-gap); cursor: pointer; }
.checkbox-select__chips { display: flex; flex-wrap: wrap; gap: var(--form-label-gap); min-width: 0; }
.checkbox-select__chips[hidden] { display: none; }
.checkbox-select__chips > .ui-button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.checkbox-select__panel > .checkbox-select__chips { max-height: calc(2 * var(--compact-button-height) + var(--form-label-gap)); overflow-y: auto; }

.checkbox-select__chips--fixed { height: var(--compact-button-height); overflow-y: auto; align-content: start; }

.checkbox-select--with-create { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* Dropdown values are actual data, distinct from search hints. */
.checkbox-select__options > .checkbox-select__choice { justify-content: flex-start; text-align: left; color: var(--text); font-weight: 400; }
.checkbox-select__options > .checkbox-select__choice:disabled { color: var(--hint); }

/* One product-list appearance for both UI-04 sales forms. */
:is(.sales-product-select,.checkbox-select--plain) .checkbox-select__options > .ui-button.checkbox-select__choice { width:100%; height:36px; border:0; box-shadow:none; background:transparent; color:#000; font-size:14px; font-weight:300; border-radius:var(--filter-radius); }
:is(.sales-product-select,.checkbox-select--plain) .checkbox-select__options > .checkbox-select__choice:hover,
:is(.sales-product-select,.checkbox-select--plain) .checkbox-select__options > .checkbox-select__choice:focus-visible { background:var(--secondary-hover); }
:is(.sales-product-select,.checkbox-select--plain) .checkbox-select__panel > input { height:36px; border:var(--filter-border); border-radius:var(--filter-radius); outline:none; }
:is(.sales-product-select,.checkbox-select--plain) .checkbox-select__panel > input:focus { border-color:var(--secondary-hover-border); }

/* Customer debt colours come from ledger balances supplied by the sales form. */
.sales-customer-select .checkbox-select__trigger,
.sales-customer-select .checkbox-select__options > .checkbox-select__choice { font-size:16px; font-weight:400; }