/*
    ChipSelect (Components/Shared/ChipSelect.razor): the site's one dropdown. Builds on the Category picker
    (category-picker.css: tx-field-box + txc-field + txc-combo) and adds what every other pick list needs: full width,
    a hover and focus glow, an error state, a 36px toolbar variant, a tinted glyph badge per row with an optional hint
    and tone, and a check on the picked row. Native <select> elements are not used anywhere on the web app.

    Prefix: cs-. Colors: the --tx-* tokens of transaction-popups.css (light on :root, dark on [data-bs-theme="dark"]).
    Load after category-picker.css.
*/

/* ------------------------------------------------------------------ The field */

.cs-select.tx-field-box {
    width: 100%;
    min-width: 0;
    gap: 10px;
    cursor: pointer;
}

.cs-select.tx-field-box:hover:not(.txc-disabled) {
    border-color: color-mix(in srgb, var(--tx-primary) 45%, var(--tx-tile-border));
}

.cs-select.tx-field-box:focus-within {
    border-color: var(--tx-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx-primary) 18%, transparent);
}

.cs-select .cs-field-glyph {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
}

.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo,
.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input {
    cursor: pointer;
}

.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The chevron turns with the list. */
.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon::before {
    display: inline-block;
    transition: transform .18s ease;
}

.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo.e-input-focus .e-input-group-icon.e-ddl-icon.e-icon-anim::before,
.cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon.e-icon-anim::before {
    transform: rotate(180deg);
}

/* Error: the field's border and glyph turn critical. */
.cs-select.cs-invalid.tx-field-box,
.cs-select.cs-invalid.tx-field-box:hover {
    border-color: var(--tx-critical);
}

.cs-select.cs-invalid.tx-field-box:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tx-critical) 18%, transparent);
}

.cs-select.cs-invalid .cs-field-glyph {
    color: var(--tx-critical);
}

.cs-select.txc-disabled.tx-field-box {
    cursor: default;
}

/* Compact: the 36px toolbar variant (sort and filter bars). */
.cs-select.cs-compact.tx-field-box {
    width: auto;
    min-width: 180px;
    padding: 0 4px 0 10px;
    gap: 8px;
    border-radius: 10px;
}

.cs-select.cs-compact.txc-field .e-input-group.e-control-wrapper.txc-combo,
.cs-select.cs-compact.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input {
    min-height: 34px;
    height: 34px;
    font-size: 13px;
}

.cs-select.cs-compact .cs-field-glyph {
    font-size: 12px;
}

/* ------------------------------------------------------------------ The list (appended to <body>) */

.e-ddl.e-popup.cs-select-combo {
    padding: 4px;
    min-width: 220px;
}

.e-ddl.e-popup.cs-select-combo .e-list-item {
    height: 40px;
    min-height: 40px;
    margin: 1px 0;
    border-radius: 8px;
}

.e-ddl.e-popup.cs-select-combo .cs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 4px 8px 4px 6px;
}

/* The row glyph sits in a tinted badge (the popup's icon chip, smaller). */
.e-ddl.e-popup.cs-select-combo .cs-item-glyph {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: 12px;
    color: var(--tx-primary);
    background: color-mix(in srgb, var(--tx-primary) 12%, transparent);
}

.e-ddl.e-popup.cs-select-combo .txc-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.e-ddl.e-popup.cs-select-combo .cs-item-hint {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 10px;
    font-family: var(--tx-font);
    font-weight: 500;
    font-size: 12px;
    color: var(--tx-muted);
}

.e-ddl.e-popup.cs-select-combo .cs-tone-positive .cs-item-glyph { color: var(--tx-positive); background: color-mix(in srgb, var(--tx-positive) 14%, transparent); }
.e-ddl.e-popup.cs-select-combo .cs-tone-negative .cs-item-glyph { color: var(--tx-negative); background: color-mix(in srgb, var(--tx-negative) 14%, transparent); }
.e-ddl.e-popup.cs-select-combo .cs-tone-caution .cs-item-glyph { color: var(--tx-caution); background: color-mix(in srgb, var(--tx-caution) 16%, transparent); }
.e-ddl.e-popup.cs-select-combo .cs-tone-partner .cs-item-glyph { color: var(--tx-partner); background: color-mix(in srgb, var(--tx-partner) 16%, transparent); }
.e-ddl.e-popup.cs-select-combo .cs-tone-user .cs-item-glyph { color: var(--tx-user); background: color-mix(in srgb, var(--tx-user) 14%, transparent); }

/* The picked row: the primary wash and a check at the end. */
.e-ddl.e-popup.cs-select-combo .e-list-item.e-active .cs-item::after {
    content: "\f00c";
    flex: 0 0 auto;
    margin-left: 8px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    color: inherit;
}

.e-ddl.e-popup.cs-select-combo .e-list-item.e-active .cs-item-hint {
    color: inherit;
    opacity: .8;
}

.e-ddl.e-popup.cs-select-combo .e-list-item.e-active .cs-item-glyph {
    color: inherit;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

/* Filter bar (Filter="true"). */
.e-ddl.e-popup.cs-select-combo .e-filter-parent {
    padding: 4px 4px 6px;
    background: transparent;
    border: 0;
}

.e-ddl.e-popup.cs-select-combo .e-filter-parent .e-input-group {
    border: 1px solid var(--tx-entry-border);
    border-radius: 8px;
    background: var(--tx-input-bg);
}

.e-ddl.e-popup.cs-select-combo .e-filter-parent input.e-input-filter {
    padding: 0 10px;
    font-family: var(--tx-font);
    font-size: 13px;
    color: var(--tx-text);
}

.cs-empty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 6px;
    font-family: var(--tx-font);
    font-size: 13px;
    color: var(--tx-muted);
}

@media (prefers-reduced-motion: reduce) {
    .cs-select.txc-field .e-input-group.e-control-wrapper.txc-combo .e-input-group-icon.e-ddl-icon::before {
        transition: none;
    }
}