/* ------------------------------------------------------------------------------
   Ô chọn cột kiểu dropdown + chip (`common/columns_picker.js`) thay cho hai list box
   Available / Selected Columns của Redmine. Hai list box gốc chỉ bị ẩn (class
   `aio-colpick-source`), không bị gỡ: chúng vẫn là nguồn dữ liệu khi submit.
   ------------------------------------------------------------------------------ */

.aio-colpick-source { display: none !important; }

.aio-colpick { position: relative; flex: 1 1 36em; max-width: 56em; min-width: 18em; }
.aio-colpick-caption { margin-bottom: 3px; }

.aio-colpick-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 2.2em;
                     padding: 3px 5px; border: 1px solid #ccc; border-radius: 3px; background: #fff;
                     box-sizing: border-box; cursor: text; }
.aio-colpick-field:focus-within { border-color: #628db6; box-shadow: 0 0 0 2px rgba(98, 141, 182, 0.25); }

.aio-colpick-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.aio-colpick-chip { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 1px 3px 1px 8px;
                    border: 1px solid #b5cbe0; border-radius: 3px; background: #e8f0f8; color: #1f4468;
                    line-height: 1.5; cursor: grab; user-select: none; }
.aio-colpick-chip:focus { outline: 2px solid #628db6; outline-offset: 1px; }
.aio-colpick-chip.is-dragging { opacity: 0.4; }
/* Vạch báo chỗ thả: cạnh trước/sau của chip đang rê tới. */
.aio-colpick-chip.drop-before { box-shadow: -3px 0 0 #628db6; }
.aio-colpick-chip.drop-after { box-shadow: 3px 0 0 #628db6; }
.aio-colpick-chip-x { border: 0; background: transparent; padding: 0 5px; font-size: 1.15em; line-height: 1;
                      color: #5b7a99; cursor: pointer; }
.aio-colpick-chip-x:hover { color: #b00020; }

.aio-colpick-input { flex: 1 1 10em; min-width: 8em; width: auto; margin: 0; padding: 2px 4px; border: 0;
                     background: transparent; box-shadow: none; outline: 0; }

.aio-colpick-menu { position: absolute; z-index: 10001; left: 0; right: 0; margin: 2px 0 0; padding: 2px 0;
                    max-height: 20em; overflow-y: auto; list-style: none; border: 1px solid #ccc;
                    border-radius: 3px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.aio-colpick-menu[hidden] { display: none; }
.aio-colpick-item, .aio-colpick-empty { margin: 0; padding: 4px 10px; }
.aio-colpick-item { cursor: pointer; }
.aio-colpick-item.is-active { background: #e8f0f8; color: #1f4468; }
.aio-colpick-empty { color: #999; }

.aio-colpick.is-disabled .aio-colpick-field { background: #f3f3f3; cursor: not-allowed; }
.aio-colpick.is-disabled .aio-colpick-chip { opacity: 0.6; cursor: default; }