/* ═══════════════════════════════════════════════════════════════════
   FILTERS.CSS — FilterBar, FilterSelect, FilterDateRange, ActiveFilters.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Filter Bar ──────────────────────────────────────────────────── */
.filter-bar {
  background:    var(--c-surface);
  border:        1px solid var(--c-divider);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
  overflow:      hidden;
  box-shadow:    var(--shadow-xs);
}

.filter-bar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-3) var(--sp-4);
  border-bottom:   1px solid var(--c-divider);
  background:      var(--c-neutral-light);
  min-height:      44px;
}
.filter-bar-title {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  font-weight: 600;
  color:       var(--c-text-secondary);
}
.filter-bar-title > i { color:var(--c-primary); }

.filter-count-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       20px;
  height:          20px;
  padding:         0 6px;
  background:      var(--c-primary);
  color:           #fff;
  border-radius:   var(--r-full);
  font-size:       var(--text-2xs);
  font-weight:     700;
}

.filter-bar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}

/* ── Filter Grid ─────────────────────────────────────────────────── */
.filter-grid {
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:             var(--sp-3);
  padding:         var(--sp-4);
  animation:       fadeIn var(--t-fast) both;
}

/* ── Filter Group ────────────────────────────────────────────────── */
.filter-group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.filter-label {
  font-size:   var(--text-xs);
  font-weight: 600;
  color:       var(--c-text-tertiary);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ── Select ──────────────────────────────────────────────────────── */
.filter-select {
  width:          100%;
  padding:        7px var(--sp-3);
  border:         1px solid var(--c-border);
  border-radius:  var(--r-md);
  background:     var(--c-surface);
  color:          var(--c-text-primary);
  font-size:      var(--text-sm);
  font-family:    var(--font-sans);
  transition:     all var(--t-fast);
  cursor:         pointer;
  -webkit-appearance:none;
  appearance:     none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:  30px;
}
.filter-select:hover  { border-color:var(--c-primary); }
.filter-select:focus  { outline:none; border-color:var(--c-primary); box-shadow:var(--shadow-focus); }
.filter-select.active {
  border-color: var(--c-primary);
  background-color:var(--c-primary-light);
  color:        var(--c-primary);
  font-weight:  600;
}

/* ── Date inputs ─────────────────────────────────────────────────── */
.filter-date-range {
  display: contents; /* renders children into the grid directly */
}

.filter-input-date {
  width:          100%;
  padding:        7px var(--sp-3);
  border:         1px solid var(--c-border);
  border-radius:  var(--r-md);
  background:     var(--c-surface);
  color:          var(--c-text-primary);
  font-size:      var(--text-sm);
  font-family:    var(--font-sans);
  transition:     all var(--t-fast);
  cursor:         pointer;
}
.filter-input-date:hover  { border-color:var(--c-primary); }
.filter-input-date:focus  { outline:none; border-color:var(--c-primary); box-shadow:var(--shadow-focus); }
.filter-input-date.active { border-color:var(--c-primary); background:var(--c-primary-light); color:var(--c-primary); }

/* ══════════════════════════════════════════════════════════════════
   STATUS MULTI-SELECT (.sms-*)
   ══════════════════════════════════════════════════════════════════ */

/* Controle (botão disparador) */
.sms-control {
  display:        flex;
  align-items:    center;
  gap:            6px;
  width:          100%;
  padding:        7px var(--sp-3);
  border:         1px solid var(--c-border);
  border-radius:  var(--r-md);
  background:     var(--c-surface);
  color:          var(--c-text-primary);
  font-size:      var(--text-sm);
  font-family:    var(--font-sans);
  text-align:     left;
  cursor:         pointer;
  transition:     all var(--t-fast);
  white-space:    nowrap;
  overflow:       hidden;
}
.sms-control:hover,
.sms-control.open  { border-color: var(--c-primary); }
.sms-control.active {
  border-color:     var(--c-primary);
  background-color: var(--c-primary-light);
  color:            var(--c-primary);
  font-weight:      600;
}

.sms-control-label {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.sms-control-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  background:      var(--c-primary);
  color:           #fff;
  border-radius:   var(--r-full);
  font-size:       10px;
  font-weight:     700;
  flex-shrink:     0;
}

.sms-caret {
  font-size:  10px;
  color:      var(--c-text-tertiary);
  flex-shrink:0;
  transition: transform var(--t-fast);
}
.sms-control.open .sms-caret { transform: rotate(0deg); }

/* Dropdown */
.sms-dropdown {
  position:      absolute;
  z-index:       200;
  top:           calc(100% + 4px);
  left:          0;
  min-width:     220px;
  width:         max-content;
  max-width:     300px;
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
  overflow:      hidden;
  animation:     fadeIn var(--t-fast) both;
}

/* O filter-group precisa de position:relative para o absolute funcionar */
.filter-group:has(.sms-control) { position: relative; }

/* Header do dropdown */
.sms-dropdown-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 12px;
  border-bottom:   1px solid var(--c-divider);
  background:      var(--c-neutral-light);
}

.sms-action-btn {
  display:     flex;
  align-items: center;
  gap:         5px;
  background:  none;
  border:      none;
  font-size:   11px;
  font-weight: 600;
  color:       var(--c-text-secondary);
  cursor:      pointer;
  padding:     2px 4px;
  border-radius: var(--r-sm);
  transition:  all var(--t-fast);
}
.sms-action-btn:hover { color: var(--c-primary); background: var(--c-primary-light); }
.sms-action-clear     { color: var(--c-danger) !important; margin-left: auto; }
.sms-action-clear:hover { background: var(--c-danger-light, #fee2e2) !important; }

/* Lista de opções */
.sms-list {
  list-style: none;
  margin:     0;
  padding:    4px 0;
  max-height: 260px;
  overflow-y: auto;
}
.sms-list::-webkit-scrollbar { width: 4px; }
.sms-list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

.sms-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     7px 12px;
  cursor:      pointer;
  transition:  background var(--t-fast);
  user-select: none;
}
.sms-item:hover   { background: var(--c-neutral-light); }
.sms-item.checked { background: var(--c-primary-light); }

.sms-empty {
  padding:   16px 12px;
  font-size: 12px;
  color:     var(--c-text-tertiary);
  text-align:center;
}

/* Checkbox visual */
.sms-checkbox {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           15px;
  height:          15px;
  min-width:       15px;
  border:          1.5px solid var(--c-border);
  border-radius:   3px;
  background:      var(--c-surface);
  font-size:       9px;
  color:           transparent;
  transition:      all var(--t-fast);
  flex-shrink:     0;
}
.sms-checkbox.checked {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        #fff;
}

/* Chips dos status selecionados */
.sms-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
  margin-top:6px;
}

.sms-chip {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  max-width:   180px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* herda padding/border-radius de .status-badge */
}

.sms-chip-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           13px;
  height:          13px;
  min-width:       13px;
  background:      rgba(0,0,0,.15);
  border:          none;
  border-radius:   50%;
  font-size:       8px;
  color:           inherit;
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
  transition:      background var(--t-fast);
}
.sms-chip-remove:hover { background: rgba(0,0,0,.3); }

/* ── Active Filters tags ─────────────────────────────────────────── */
.active-filters {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2);
  padding:   var(--sp-3) var(--sp-4);
  border-top:1px solid var(--c-divider);
  background:var(--c-neutral-light);
  animation: fadeIn var(--t-fast) both;
}

.active-filter-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 8px 3px 10px;
  background:    var(--c-primary-light);
  border:        1px solid rgba(37,99,235,.2);
  border-radius: var(--r-full);
  color:         var(--c-primary);
  font-size:     var(--text-xs);
  font-weight:   500;
  white-space:   nowrap;
}
.active-filter-tag-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  height:          16px;
  background:      rgba(37,99,235,.15);
  border:          none;
  border-radius:   50%;
  color:           var(--c-primary);
  font-size:       9px;
  transition:      all var(--t-fast);
  padding:         0;
}
.active-filter-tag-remove:hover { background:var(--c-primary); color:#fff; }