/* ── Field — select ──────────────────────────────────────────────────────── */

.field--select {
    cursor: pointer;
}

.field--select:not(.field--focused):not(.field--invalid):not(.field--valid):hover {
    border-color: var(--field-border-hover);
}

.field__select-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 26px;
}

.field__select-placeholder {
    color: var(--field-placeholder);
    font-size: var(--field-font-size);
    line-height: 1;
}

.field__select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    flex: 1;
    min-width: 0;
}

.field__select-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    /* Реизползва вече съществуващите --field-* токени (border-focus/shadow-
       focus) вместо hardcoded индиго — app-ова тема (FormThemeInterface) го
       обхваща автоматично, без нов токен. */
    background: var(--field-shadow-focus, rgba(99, 102, 241, 0.1));
    color: var(--field-border-focus, #6366f1);
    font-size: 0.82rem;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field__select-chip i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.field__select-arrow {
    flex-shrink: 0;
    color: var(--field-label-color);
    font-size: 0.72rem;
    transition: transform 150ms ease;
}

/* ── Field — select (view:'icon') ────────────────────────────────────────── */
/* Компактен trigger — само иконата, без label/chips/chevron (виж
   SelectElement.js view опция) — reuse-ва СЪЩАТА picking логика (list/
   search/create), само trigger изгледът е различен. */
.field--select-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background: var(--field-bg);
    color: var(--field-label-color);
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease;
}

.field--select-icon:hover {
    border-color: var(--field-border-hover);
}

.field--select-icon.field--filled {
    color: var(--field-color);
    border-color: var(--field-border-focus);
}

.field__select-icon-display {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* ── Icon picker button (виж IconPickerButton.js) ────────────────────────── */
/* Компактен, споделен building block — идентичен look на .field--select-icon,
   но БЕЗ SelectFieldService зависимост (само икона, реален грид picker). */
.icon-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background: var(--field-bg);
    color: var(--field-color);
    font-size: 1.1rem;
    cursor: pointer;
    transition: border-color 150ms ease;
}

.icon-picker-btn:hover {
    border-color: var(--field-border-hover);
}

/* Preview на текущия избор в горния панел на Modal.group() (виж IconPickerButton#open) */
.icon-picker-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    font-size: 1.2rem;
    color: var(--field-color);
}