/* ================================================================
   CPA — Componente Reutilizável: MultiSelect com Chips
   css/components/multi-select.css
   Versão: 1.0

   Classes principais:
     .cms-wrap         — container raiz do componente
     .cms-chips-area   — faixa de chips selecionados
     .cms-trigger-wrap — campo de busca + botão toggle
     .cms-dropdown     — lista de opções
     .cms-chip         — item chip individual

   Variantes de cor (aplicar no .cms-wrap como modificador):
     .cms--green   (padrão SUAP)
     .cms--blue    (campi "todos")
     .cms--amber   (cursos)
     .cms--purple  (público)
     .cms--teal    (dimensões / objetivos PDI)
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   CONTAINER RAIZ
   ──────────────────────────────────────────────────────────────── */
.cms-wrap {
  --cms-accent:      #2e7d45;
  --cms-accent-light:#d4edda;
  --cms-accent-ring: rgba(46,125,69,.15);
  --cms-chip-bg:     #edf7f0;
  --cms-chip-border: #b3d9bc;
  --cms-chip-text:   #1c5c2f;
  --cms-chip-icon:   #2e7d45;
  position: relative;
  width: 100%;
}

/* Variantes de cor */
.cms--blue   { --cms-accent:#1d4ed8; --cms-accent-light:#dbeafe; --cms-accent-ring:rgba(29,78,216,.13); --cms-chip-bg:#eff6ff; --cms-chip-border:#bfdbfe; --cms-chip-text:#1e40af; --cms-chip-icon:#3b82f6; }
.cms--amber  { --cms-accent:#d97706; --cms-accent-light:#fef9c3; --cms-accent-ring:rgba(217,119,6,.13);  --cms-chip-bg:#fefce8; --cms-chip-border:#fde68a; --cms-chip-text:#92400e; --cms-chip-icon:#d97706; }
.cms--purple { --cms-accent:#7c3aed; --cms-accent-light:#f5f3ff; --cms-accent-ring:rgba(124,58,237,.13); --cms-chip-bg:#fdf4ff; --cms-chip-border:#e9d5ff; --cms-chip-text:#6b21a8; --cms-chip-icon:#9333ea; }
.cms--teal   { --cms-accent:#0d9488; --cms-accent-light:#ccfbf1; --cms-accent-ring:rgba(13,148,136,.13); --cms-chip-bg:#f0fdfa; --cms-chip-border:#99f6e4; --cms-chip-text:#134e4a; --cms-chip-icon:#14b8a6; }

/* ────────────────────────────────────────────────────────────────
   ÁREA DE CHIPS
   ──────────────────────────────────────────────────────────────── */
.cms-chips-area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  margin-bottom: 6px;
  transition: border-color .2s;
}

.cms-chips-area:focus-within {
  border-color: var(--cms-accent);
  box-shadow: 0 0 0 3px var(--cms-accent-ring);
}

/* Placeholder quando vazio */
.cms-chips-placeholder {
  color: var(--color-text-muted, #9ca3af);
  font-size: .78rem;
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: italic;
  pointer-events: none;
  user-select: none;
}

/* Contador */
.cms-chips-count {
  font-size: .7rem;
  color: var(--color-text-muted, #9ca3af);
  margin-left: 2px;
  font-style: italic;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────
   CHIP INDIVIDUAL
   ──────────────────────────────────────────────────────────────── */
.cms-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  border: 1px solid var(--cms-chip-border);
  border-radius: 20px;
  background: var(--cms-chip-bg);
  color: var(--cms-chip-text);
  font-size: .74rem;
  font-weight: 500;
  white-space: nowrap;
  max-width: 240px;
  animation: cms-chip-in .15s ease;
}

@keyframes cms-chip-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

.cms-chip-icon {
  font-size: .65rem;
  color: var(--cms-chip-icon);
  flex-shrink: 0;
}

.cms-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  white-space: nowrap;
}

.cms-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--cms-chip-icon);
  cursor: pointer;
  padding: 0;
  font-size: .6rem;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  line-height: 1;
}

.cms-chip-remove:hover {
  background: var(--cms-chip-icon);
  color: #fff;
}

/* Chip especial "Todos" */
.cms-chip--all {
  --cms-chip-bg:    var(--cms-accent-light);
  --cms-chip-border:var(--cms-accent);
  --cms-chip-text:  var(--cms-accent);
  font-weight: 700;
}

/* ────────────────────────────────────────────────────────────────
   CAMPO DE BUSCA (TRIGGER)
   ──────────────────────────────────────────────────────────────── */
.cms-trigger-wrap {
  display: flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.cms-trigger-wrap:focus-within {
  border-color: var(--cms-accent);
  box-shadow: 0 0 0 3px var(--cms-accent-ring);
}

.cms-trigger-icon {
  padding: 0 9px;
  color: var(--cms-chip-icon);
  font-size: .78rem;
  flex-shrink: 0;
  pointer-events: none;
}

.cms-search-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-base, 'Inter', sans-serif);
  font-size: .82rem;
  color: var(--color-text-primary, #111827);
  min-width: 0;
  padding: 0 4px;
}

.cms-search-input::placeholder { color: var(--color-text-muted, #9ca3af); }

.cms-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted, #9ca3af);
  font-size: .65rem;
  flex-shrink: 0;
  transition: color .15s;
}

.cms-open-btn:hover { color: var(--cms-accent); }

.cms-open-btn i { transition: transform .2s; }
.cms-open-btn.open i { transform: rotate(180deg); }

/* Erro */
.cms-wrap.cms--error .cms-trigger-wrap {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.cms-wrap.cms--error .cms-chips-area {
  border-color: #dc2626;
}

/* Desabilitado */
.cms-wrap.cms--disabled .cms-trigger-wrap,
.cms-wrap.cms--disabled .cms-chips-area {
  background: #f9fafb;
  opacity: .6;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   DROPDOWN
   ──────────────────────────────────────────────────────────────── */
.cms-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 700;
  background: #fff;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
  display: none;
  animation: cms-drop-in .15s ease;
}

.cms-dropdown.open { display: block; }

@keyframes cms-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabeçalho do dropdown (ações rápidas) */
.cms-dd-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border, #d1d5db);
  background: #fafafa;
}

.cms-dd-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid var(--color-border, #d1d5db);
  background: #fff;
  font-size: .71rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-secondary, #4b5563);
  transition: background .15s, border-color .15s, color .15s;
}

.cms-dd-action:hover:not(:disabled) {
  background: var(--cms-accent-light);
  border-color: var(--cms-accent);
  color: var(--cms-accent);
}

.cms-dd-action:disabled {
  opacity: .45;
  cursor: default;
}

.cms-dd-action--all {
  font-weight: 700;
  color: var(--cms-accent);
  border-color: var(--cms-chip-border);
  background: var(--cms-chip-bg);
}

.cms-dd-action--all:hover:not(:disabled) {
  background: var(--cms-accent);
  color: #fff;
  border-color: var(--cms-accent);
}

/* Lista de opções */
.cms-options-list {
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #d1d5db) transparent;
}

/* Item de opção */
.cms-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: .81rem;
  color: var(--color-text-primary, #111827);
  border-bottom: 1px solid #f3f4f6;
  transition: background .1s;
  user-select: none;
}

.cms-option:last-child { border-bottom: none; }
.cms-option:hover { background: #f8fafc; }

.cms-option.cms-option--selected {
  background: var(--cms-chip-bg);
  color: var(--cms-chip-text);
}

.cms-option.cms-option--disabled {
  opacity: .4;
  pointer-events: none;
  cursor: default;
}

/* Ícone do item */
.cms-option-icon {
  font-size: .72rem;
  color: var(--cms-chip-icon);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.cms-option-label { flex: 1; line-height: 1.3; }

/* Marcador check */
.cms-option-check {
  font-size: .65rem;
  color: var(--cms-accent);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s;
}

.cms-option.cms-option--selected .cms-option-check { opacity: 1; }

/* Item especial "Todos" */
.cms-option--all {
  font-weight: 700;
  background: #f8fafc;
  border-bottom: 2px solid var(--color-border, #d1d5db) !important;
  color: var(--cms-accent);
}

.cms-option--all:hover { background: var(--cms-accent-light); }
.cms-option--all.cms-option--selected { background: var(--cms-accent-light); }

/* Highlight de busca */
.cms-highlight {
  background: #fef08a;
  color: #713f12;
  border-radius: 2px;
  padding: 0 1px;
}

/* Sem resultados */
.cms-no-results {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 18px 16px;
  color: var(--color-text-muted, #9ca3af);
  font-size: .78rem;
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────
   MENSAGEM DE ERRO
   ──────────────────────────────────────────────────────────────── */
.cms-error-msg {
  display: block;
  font-size: .73rem;
  color: #dc2626;
  margin-top: 4px;
  min-height: 1em;
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVIDADE
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cms-chip-text { max-width: 110px; }
  .cms-options-list { max-height: 180px; }
}