/* ── Modal Multi-select / Single-select Widget ────────────────────────────────
 *
 * A custom select widget that replaces the native <select> element.
 * Supports both multi-select (chips + floating label) and
 * single-select (inline text, no floating label) modes.
 *
 * Usage:
 *   Multi-select:  <div class="modal-ms-wrapper" data-label="Label" data-options="optionKey">
 *   Single-select: <div class="modal-ms-wrapper" data-single="true" data-label="Label" data-options="optionKey">
 *
 * Initialised by: js/components/multiselect.js → initModalMultiselects()
 * ─────────────────────────────────────────────────────────────────────────── */

/* Hide the native <select multiple> — JS builds the custom UI on top */
.modal-ms-source {
    display: none;
}

.modal-ms-wrapper {
    position: relative;
}

.modal-ms-trigger {
    position: relative;
    min-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    padding: 6px 32px 6px 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: #fff;
    outline: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    transition: border-color 0.15s;
}

.modal-ms-trigger:focus,
.modal-ms-wrapper.is-open .modal-ms-trigger {
    border-color: rgba(0, 0, 0, 0.6);
}

/* Floating label */
.modal-ms-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
    background: transparent;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

.modal-ms-wrapper.label-float .modal-ms-label {
    top: 0;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    padding: 0 4px;
    left: 7px;
}

/* Single-select: show selected value in dark text (no floating) */
.modal-ms-label--selected {
    color: rgba(0, 0, 0, 0.87);
}

/* Single-select floating label mode: selected value shown as plain text */
.modal-ms-value-display {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1;
}

/* Arrow — chevron drawn in CSS, no inline SVG needed */
.modal-ms-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}

.modal-ms-arrow::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.54);
}

.modal-ms-wrapper.is-open .modal-ms-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Chips */
.modal-ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.modal-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    padding: 2px 5px 2px 8px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    color: rgba(0, 0, 0, 0.87);
    line-height: 1.4;
}

.modal-ms-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-ms-chip-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.modal-ms-chip-remove:hover {
    opacity: 1;
}

/* Dropdown panel — hidden by default, shown when wrapper has .is-open */
.modal-ms-panel {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    overflow: hidden;
}

.modal-ms-wrapper.is-open .modal-ms-panel {
    display: block;
}

.modal-ms-search {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.87);
    outline: none;
    box-sizing: border-box;
    background: transparent;
}

.modal-ms-search::placeholder {
    color: rgba(0, 0, 0, 0.38);
}

.modal-ms-options {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 180px;
    overflow-y: auto;
}

.modal-ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    user-select: none;
}

.modal-ms-option:hover {
    background: rgba(0, 0, 0, 0.04);
}

.modal-ms-option-check {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    transition: background-color 0.15s, border-color 0.15s;
}

.modal-ms-option.is-selected .modal-ms-option-check {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Checkmark drawn via CSS — no textContent manipulation needed in JS */
.modal-ms-option.is-selected .modal-ms-option-check::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.modal-ms-no-results {
    padding: 10px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.38);
    text-align: center;
}