/* ==========================================================================
   BAUKO MULTI-SELECT — componente de filtro multi-seleção compartilhado
   --------------------------------------------------------------------------
   Origem: vendas_perdidas.html (.ms-* family). Eleito componente OFICIAL de
   multi-seleção do Hub — substitui Select2/jQuery nos demais módulos.

   Tokens: usa apenas variáveis do Design System (via aliases-ponte ou
   colors_and_type.css). Nunca hardcode hex aqui.

   Markup mínimo:
     <div class="ms-wrap" id="meu-filtro">
       <button type="button" class="ms-btn"
               onclick="toggleMS('meu-filtro')">
         <span class="ms-btn-txt">Todos</span><span class="ms-arr">▼</span>
       </button>
       <div class="ms-panel"><!-- labels .ms-item via buildMSOptions() --></div>
     </div>
   ========================================================================== */

.ms-wrap{position:relative}
.ms-btn{display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:28px;padding:5px 8px;font-size:11px;background:var(--bg);border:1px solid var(--bd2);border-radius:7px;color:var(--tx);gap:6px;width:100%;box-sizing:border-box;text-align:left;font-family:inherit}
.ms-btn-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu)}
.ms-btn-txt.sel{color:var(--tx);font-weight:600}
.ms-arr{font-size:8px;color:var(--mu);flex-shrink:0;transition:transform .15s}
/* Seta vira ✕ clicável (limpar só este filtro) quando há seleção */
.ms-arr.ms-clear{font-size:12px;font-weight:700;cursor:pointer;padding:0 2px;border-radius:4px;transition:none}
.ms-arr.ms-clear:hover{color:var(--neg,#c0392b);background:rgba(192,57,43,.12)}
.ms-panel{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:300;background:var(--s1);border:1px solid var(--bd);border-radius:8px;box-shadow:var(--sh);max-height:190px;overflow-y:auto}
.ms-panel.open{display:block}
.ms-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;color:var(--tx);-webkit-user-select:none;user-select:none}
.ms-item:hover{background:var(--s2)}
.ms-item input[type=checkbox]{accent-color:var(--grn);width:14px;height:14px;flex-shrink:0;cursor:pointer;pointer-events:none}
.ms-item span{flex:1;pointer-events:none}