/* =========================================================================
   انتخاب با جست‌وجو (ui/combobox.js) — جایگزین Select2
   -------------------------------------------------------------------------
   مستقل از pg.css تا در پنل مدیریت (با Bootstrap) هم قابل استفاده باشد؛ رنگ‌ها از متغیرهای
   pg.css و در نبود آن‌ها از مقدارهای پیش‌فرض همان سیستم طراحی گرفته می‌شود.
   در لایه‌ی components است تا قاعده‌های لایه‌ی site در pg.css (مثل نوار جست‌وجو) بر آن غلبه کنند.
   ========================================================================= */
@layer components {
    .combo {
        --c-primary: var(--primary, #0f6b4f);
        --c-soft: var(--primary-soft, #eef8f3);
        --c-soft-2: var(--green-100, #d6efe2);
        --c-fg-soft: var(--green-800, #0d5640);
        --c-border: var(--border-strong, #c8d1cd);
        --c-border-2: var(--border, #e0e6e3);
        --c-surface: var(--surface, #fff);
        --c-hover: var(--gray-50, #f5f7f6);
        --c-text: var(--text, #141c18);
        --c-muted: var(--text-3, #6b7873);
        --c-danger: var(--danger, #c4321f);
        --c-ring: var(--ring, 0 0 0 3px rgba(15, 107, 79, .28));
        --c-r: var(--r, 10px);
        position: relative;
    }
    .combo-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 12px; padding-inline-end: 40px; border: 1.5px solid var(--c-border); border-radius: var(--c-r); background: var(--c-surface); cursor: text; transition: border-color .16s, box-shadow .16s; }
    .combo-control:hover { border-color: #9aa6a1; }
    .combo.is-open .combo-control, .combo-control:focus-within { border-color: var(--c-primary); box-shadow: var(--c-ring); }
    .combo-control.input-validation-error { border-color: var(--c-danger); }
    .combo-input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; padding: 4px; font: inherit; color: var(--c-text); }
    .combo-value { flex: 1; padding: 4px; color: var(--c-text); }
    .combo-value.is-placeholder { color: #9aa6a1; }
    .combo-caret { position: absolute; inset-inline-end: 12px; top: 23px; translate: 0 -50%; color: var(--c-muted); pointer-events: none; }
    .combo-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; padding-inline-end: 4px; border-radius: 999px; background: var(--c-soft); color: var(--c-fg-soft); font-size: .875rem; font-weight: 500; line-height: 1.6; }
    .combo-tag button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
    .combo-tag button:hover { background: var(--c-soft-2); }
    .combo-list { position: absolute; z-index: 1060; top: calc(100% + 6px); inset-inline: 0; max-height: 280px; overflow: auto; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--c-border-2); border-radius: var(--c-r); background: var(--c-surface); box-shadow: 0 18px 40px -12px rgba(20, 28, 24, .18), 0 6px 12px -6px rgba(20, 28, 24, .08); }
    .combo-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 6px; font-size: .875rem; cursor: pointer; color: var(--c-text); }
    .combo-option[aria-selected="true"] { color: var(--c-primary); font-weight: 600; }
    .combo-option.is-active { background: var(--c-hover); }
    .combo-option .i { color: var(--c-primary); }
    .combo-group { padding: 8px 12px 4px; font-size: .75rem; font-weight: 700; color: var(--c-muted); }
    .combo-empty { padding: 12px; font-size: .875rem; color: var(--c-muted); text-align: center; }
    .combo-new { font-weight: 600; color: var(--c-primary); }
    .combo-badge { font-size: .7rem; font-weight: 600; padding: 0 8px; border-radius: 999px; background: var(--c-soft); color: var(--c-fg-soft); }
    .combo select.combo-native { position: absolute; inset: auto 0 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
}