/**
 * FEF Form Fields — input-first comboboxes (Bootstrap style, no button, no green)
 * search_select / search_multiselect / chips. The field is a search input that
 * drops options directly below; native <select> is hidden (still submits).
 */

:root, .fef-ff, .fef-lr-form, .fef-fb-form {
    --ff-bg:#fff; --ff-fg:#212529; --ff-muted:#6c757d;
    --ff-border:#ced4da; --ff-border-strong:#adb5bd; --ff-radius:.375rem;
    --ff-hover:#f8f9fa; --ff-selected:#e9ecef; --ff-panel-border:#dee2e6;
    --ff-focus-ring:rgba(108,117,125,.25); --ff-btn:#6c757d;
}

/* Hide native selects completely — they still submit while display:none. */
select.fef-cb-native { display:none !important; }

.fef-cb { position:relative; width:100%; }

/* The visible field (search input) — looks like a Bootstrap form-control */
.fef-cb .fef-cb-input {
    -webkit-appearance:none; appearance:none;
    width:100%; box-sizing:border-box; min-height:38px;
    padding:.375rem 2rem .375rem .75rem; margin:0;
    background:var(--ff-bg); color:var(--ff-fg);
    border:1px solid var(--ff-border); border-radius:var(--ff-radius);
    font-size:14px; font-family:inherit; line-height:1.5; box-shadow:none;
}
.fef-cb .fef-cb-input::placeholder { color:var(--ff-muted); }
.fef-cb.open .fef-cb-input, .fef-cb .fef-cb-input:focus {
    outline:0; border-color:var(--ff-border-strong); box-shadow:0 0 0 .2rem var(--ff-focus-ring);
}

/* Chevron */
.fef-cb .fef-cb-arrow {
    position:absolute; top:0; right:0; height:38px; width:34px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
    transition:transform .15s ease;
}
.fef-cb.open .fef-cb-arrow { transform:rotate(180deg); }

/* Multi control: a bordered box holding chips + the input */
.fef-cb--multi .fef-cb-control {
    display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
    min-height:38px; padding:.25rem 2rem .25rem .4rem;
    background:var(--ff-bg); border:1px solid var(--ff-border); border-radius:var(--ff-radius);
    cursor:text;
}
.fef-cb--multi.open .fef-cb-control { border-color:var(--ff-border-strong); box-shadow:0 0 0 .2rem var(--ff-focus-ring); }
.fef-cb--multi .fef-cb-input {
    flex:1 1 auto; min-width:110px; width:auto; min-height:28px;
    border:0; padding:.25rem .15rem; box-shadow:none !important;
}
.fef-cb--multi .fef-cb-input:focus { box-shadow:none; border:0; }
.fef-cb--multi .fef-cb-arrow { height:100%; }

/* Selected tags inside the multi control (pastel capsules) */
.fef-cb-tag {
    display:inline-flex; align-items:center; gap:.3rem;
    padding:.1rem .3rem .1rem .55rem; border-radius:999px;
    font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap;
}
.fef-cb-tag-x {
    display:inline-grid; place-items:center; width:15px; height:15px; padding:0;
    border:0; border-radius:50%; cursor:pointer; font-size:0;
    background:rgba(0,0,0,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23343a40' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") center/8px 8px no-repeat;
}
.fef-cb-tag-x:hover { background-color:rgba(0,0,0,.22); }

/* Dropdown menu */
.fef-cb-menu {
    list-style:none; margin:0; padding:.375rem; position:absolute; z-index:99999;
    left:0; right:0; top:calc(100% + 4px);
    background:var(--ff-bg); border:1px solid var(--ff-panel-border); border-radius:var(--ff-radius);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15); max-height:250px; overflow-y:auto;
}
.fef-cb-option {
    display:flex; align-items:center; gap:.5rem;
    padding:.375rem .625rem; border-radius:calc(var(--ff-radius) - 1px);
    cursor:pointer; font-size:14px; color:var(--ff-fg);
}
.fef-cb-option:hover, .fef-cb-option.active { background:var(--ff-hover); }
.fef-cb-option.selected { background:var(--ff-selected); }
.fef-cb-none { padding:.5rem .625rem; color:var(--ff-muted); font-size:13px; }

/* Checkbox mark for multi options */
.fef-cb-box {
    flex:0 0 auto; width:16px; height:16px; border:1px solid var(--ff-border-strong);
    border-radius:3px; background:var(--ff-bg);
}
.fef-cb-option.selected .fef-cb-box {
    background:var(--ff-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E") center/10px no-repeat;
    border-color:var(--ff-btn);
}

/* ── Chips ── */
.fef-lr-chips {
    display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; min-height:38px;
    padding:.3rem 2rem .3rem .5rem; position:relative;
    background:var(--ff-bg); border:1px solid var(--ff-border); border-radius:var(--ff-radius);
}
.fef-lr-chips:focus-within { border-color:var(--ff-border-strong); box-shadow:0 0 0 .2rem var(--ff-focus-ring); }
.fef-lr-chips.is-empty.shake { animation:fef-chip-shake .4s; border-color:#b02a37; }
@keyframes fef-chip-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.fef-lr-chips-selected { display:contents; }
.fef-lr-chip {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.15rem .35rem .15rem .6rem; border-radius:999px;
    font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap;
}
.fef-lr-chip-x {
    display:inline-grid; place-items:center; width:16px; height:16px; padding:0;
    border:0; border-radius:50%; cursor:pointer; font-size:0;
    background:rgba(0,0,0,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23343a40' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E") center/9px no-repeat;
}
.fef-lr-chip-x:hover { background-color:rgba(0,0,0,.22); }
.fef-lr-chips-input { flex:1 1 auto; min-width:120px; border:0; background:transparent; outline:0; padding:.25rem .15rem; font-size:14px; font-family:inherit; color:var(--ff-fg); }
.fef-lr-chips-input::placeholder { color:var(--ff-muted); }
.fef-lr-chips-suggest {
    list-style:none; margin:0; padding:.375rem; position:absolute; z-index:99999;
    left:0; right:0; top:calc(100% + 4px);
    background:var(--ff-bg); border:1px solid var(--ff-panel-border); border-radius:var(--ff-radius);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15); max-height:240px; overflow-y:auto;
}
.fef-lr-suggest-item { padding:.375rem .625rem; border-radius:calc(var(--ff-radius) - 1px); cursor:pointer; font-size:14px; color:var(--ff-fg); }
.fef-lr-suggest-item:hover, .fef-lr-suggest-item.active { background:var(--ff-hover); }

/* ── Package / Tests toggle field ── */
.fef-pt-toggle{display:inline-flex;border:1px solid var(--ff-border);border-radius:var(--ff-radius);overflow:hidden;margin-bottom:10px}
.fef-pt-btn{-webkit-appearance:none;appearance:none;background:var(--ff-bg);border:0;padding:.5rem 1.1rem;font-size:14px;font-family:inherit;color:var(--ff-muted);cursor:pointer;line-height:1.5}
.fef-pt-btn+.fef-pt-btn{border-left:1px solid var(--ff-border)}
.fef-pt-btn.active{background:#495057;color:#fff;font-weight:600}
.fef-pt-pkg{-webkit-appearance:none;appearance:none;width:100%;min-height:38px;padding:.375rem 2rem .375rem .75rem;margin:0 0 8px;background:var(--ff-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .6rem center/16px;border:1px solid var(--ff-border);border-radius:var(--ff-radius);color:var(--ff-fg);font-size:14px;font-family:inherit;line-height:1.5}
.fef-pt-pkg:focus{outline:0;border-color:var(--ff-border-strong);box-shadow:0 0 0 .2rem var(--ff-focus-ring)}
.fef-pt.shake{animation:fef-chip-shake .4s}