/* ── Searchable multiselect dropdown ─────────────────────────── */

.ms-wrap { position: relative; display: inline-block; }

/* Trigger au repos */
.ms-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px 3px 10px; height: 26px;
    background: transparent; border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8rem; font-weight: 500; font-family: inherit;
    color: var(--text-secondary, #6b7280);
    white-space: nowrap; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    outline: none;
}
.ms-trigger:hover {
    border-color: var(--border, #e5e7eb);
    background: var(--gray-50, #f9fafb);
    color: var(--text, #1f2937);
}

/* Filtre actif ou panel ouvert → bleu */
.ms-wrap.open .ms-trigger,
.ms-wrap.has-value .ms-trigger {
    border-color: var(--primary, #193153);
    color: var(--primary, #193153);
    background: var(--primary-light, #eef2ff);
}

/* Chevron animé */
.ms-chevron { opacity: 0.5; flex-shrink: 0; transition: transform 0.15s; }
.ms-wrap.open .ms-chevron { transform: rotate(180deg); opacity: 1; }

/* Badge count */
.ms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    font-size: 0.68rem; font-weight: 700;
    background: var(--primary, #193153); color: #fff; line-height: 1;
    flex-shrink: 0;
}

/* Panel */
.ms-panel {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
    min-width: 200px; background: #fff;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius, .5rem);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    overflow: hidden;
}
.ms-wrap.open .ms-panel { display: block; }

.ms-search-wrap {
    display: flex; align-items: center; gap: 7px;
    padding: .5rem .75rem; border-bottom: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary, #6b7280);
}
.ms-search {
    border: none; outline: none; background: transparent;
    font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); width: 100%; min-width: 0;
}
.ms-search::placeholder { color: var(--text-muted, #9ca3af); }

.ms-options { max-height: 220px; overflow-y: auto; padding: 4px; }
.ms-option {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: calc(var(--radius, .5rem) - 2px);
    cursor: pointer; font-size: .875rem; font-family: inherit;
    color: var(--text, #1f2937); user-select: none;
    transition: background .1s;
}
.ms-option:hover { background: var(--gray-100, #f3f4f6); }
.ms-option.hidden { display: none; }
.ms-option input[type="checkbox"] {
    width: 14px; height: 14px; flex-shrink: 0;
    accent-color: var(--primary, #193153); cursor: pointer; margin: 0;
}

.ms-empty { padding: 10px 12px; font-size: .85rem; color: var(--text-secondary, #6b7280); text-align: center; }
.ms-empty.hidden { display: none; }

.ms-footer {
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 6px 8px; display: flex; justify-content: flex-end;
}
.ms-clear-btn {
    background: none; border: none; font-size: .8rem;
    color: var(--text-secondary, #6b7280); cursor: pointer;
    padding: 3px 8px; border-radius: var(--radius-sm, 4px); font-family: inherit;
}
.ms-clear-btn:hover { color: var(--error, #ef4444); background: var(--gray-100, #f3f4f6); }

/* ── ms-dropdown dans un <th> ────────────────────────────────── */
.table thead th:has(.ms-wrap) { padding: 0; }
.table thead th .ms-wrap      { display: block; }
.table thead th .ms-trigger {
    padding: var(--space-3, .75rem);
    font-size: 0.72rem; font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase; letter-spacing: 0.4px;
    width: 100%; height: auto;
    border-radius: 0; background: var(--gray-50, #f9fafb);
    border-color: transparent;
}
.table thead th .ms-trigger:hover {
    border-color: transparent;
    background: var(--gray-100, #f3f4f6);
}

/* Panel escapes table overflow via .ms-open class (toggled by JS) */
.table-container.ms-open               { overflow: visible; }
.table-container.ms-open thead         { position: relative; z-index: 5; }
.table-container.ms-open thead tr:first-child th:first-child { border-top-left-radius: var(--radius, .5rem); }
.table-container.ms-open thead tr:first-child th:last-child  { border-top-right-radius: var(--radius, .5rem); }