/* ═══════════════════════════════════════════════════════════════════
   FILTERS.CSS — FilterBar, FilterSelect, FilterDateRange, ActiveFilters.
   Redesign: monochrome dark surfaces, Archivo typography, editorial
   restraint. All class names preserved — JS bound throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Filter Bar ───────────────────────────────────────────────────── */
.filter-bar {
  background:    var(--color-surface-01);
  border:        1px solid var(--color-border-subtle);
  border-radius: 6px;
  margin-bottom: var(--sp-5);
  /* overflow must stay visible so dropdowns can escape the container */
  overflow:      visible;
  position:      relative;
}

.filter-bar-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-3) var(--sp-4);
  border-bottom:   1px solid var(--color-border-subtle);
  background:      var(--color-surface-01);
  min-height:      44px;
}

.filter-bar-title {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   12px;
  font-weight: 600;
  color:       var(--color-text-secondary);
  font-family: var(--mc-font, 'Archivo', system-ui, sans-serif);
  letter-spacing: 0.01em;
}
.filter-bar-title > i {
  color: var(--color-text-secondary);
  opacity: 0.7;
}

.filter-count-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 5px;
  background:      var(--color-text-primary);
  color:           var(--color-surface-00);
  border-radius:   9999px;
  font-size:       10px;
  font-weight:     700;
  font-family:     var(--mc-font, 'Archivo', system-ui, sans-serif);
}

.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;
  /* must stay visible so absolutely-positioned dropdowns can escape */
  overflow:              visible;
}

/* ── Filter Group ─────────────────────────────────────────────────── */
.filter-group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.filter-label {
  font-size:      10px;
  font-weight:    600;
  color:          var(--color-text-disabled);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family:    var(--mc-font, 'Archivo', system-ui, sans-serif);
}

/* ── Select ───────────────────────────────────────────────────────── */
.filter-select {
  width:          100%;
  padding:        7px var(--sp-3);
  border:         1px solid var(--color-border-default);
  border-radius:  6px;
  background:     var(--color-surface-03);
  color:          var(--color-text-sub);
  font-size:      12px;
  font-family:    var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:     border-color 140ms ease, box-shadow 140ms ease;
  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='%23666666' 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(--color-border-strong); }
.filter-select:focus {
  outline:      none;
  border-color: var(--color-border-strong);
  box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.05);
}
/* PRESERVED: .active — JS bound */
.filter-select.active {
  border-color: var(--color-border-strong);
  background:   rgba(255, 255, 255, 0.08);
  color:        var(--color-text-primary);
  font-weight:  600;
}

/* ── Date inputs ──────────────────────────────────────────────────── */
.filter-date-range {
  display: contents;
}

.filter-input-date {
  width:       100%;
  padding:     7px var(--sp-3);
  border:      1px solid var(--color-border-default);
  border-radius: 6px;
  background:  var(--color-surface-03);
  color:       var(--color-text-sub);
  font-size:   12px;
  font-family: var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:  border-color 140ms ease, box-shadow 140ms ease;
  cursor:      pointer;
}
.filter-input-date:hover { border-color: var(--color-border-strong); }
.filter-input-date:focus {
  outline:      none;
  border-color: var(--color-border-strong);
  box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.05);
}
/* PRESERVED: .active — JS bound */
.filter-input-date.active {
  border-color: var(--color-border-strong);
  background:   rgba(255, 255, 255, 0.08);
  color:        var(--color-text-primary);
}

/* Color-scheme for native date pickers in dark mode */
.filter-input-date { color-scheme: dark; }

/* ══════════════════════════════════════════════════════════════════
   STATUS MULTI-SELECT (.sms-*)
   All class names preserved — JS bound.
   ══════════════════════════════════════════════════════════════════ */

/* Control (trigger button) */
.sms-control {
  display:      flex;
  align-items:  center;
  gap:          6px;
  width:        100%;
  padding:      7px var(--sp-3);
  border:       1px solid var(--color-border-default);
  border-radius: 6px;
  background:   var(--color-surface-03);
  color:        var(--color-text-sub);
  font-size:    12px;
  font-family:  var(--mc-font, 'Archivo', system-ui, sans-serif);
  text-align:   left;
  cursor:       pointer;
  transition:   border-color 140ms ease, background 140ms ease, color 140ms ease;
  white-space:  nowrap;
  overflow:     hidden;
}
/* PRESERVED: .open, .active — JS bound */
.sms-control:hover,
.sms-control.open  { border-color: var(--color-border-strong); }
.sms-control.active {
  border-color: var(--color-border-strong);
  background:   rgba(255, 255, 255, 0.08);
  color:        var(--color-text-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:       17px;
  height:          17px;
  padding:         0 4px;
  background:      var(--color-text-primary);
  color:           var(--color-surface-00);
  border-radius:   9999px;
  font-size:       10px;
  font-weight:     700;
  flex-shrink:     0;
}

.sms-caret {
  font-size:  10px;
  color:      var(--color-text-secondary);
  flex-shrink: 0;
  transition: transform 140ms ease;
}
.sms-control.open .sms-caret { transform: rotate(180deg); }

/* Dropdown — fixed so it escapes any overflow:hidden ancestor */
.sms-dropdown {
  position:      fixed;
  z-index:       9999;
  min-width:     220px;
  width:         max-content;
  max-width:     320px;
  background:    var(--color-surface-03);
  border:        1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow:    0 8px 40px rgba(0, 0, 0, 0.9);
  overflow:      hidden;
  animation:     fadeIn 140ms ease both;
}

/* relative anchor kept for legacy — coords now computed via JS */
.filter-group:has(.sms-control) { position: relative; }

/* Dropdown header */
.sms-dropdown-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 12px;
  border-bottom:   1px solid var(--color-border-subtle);
  background:      var(--color-surface-02);
}

.sms-action-btn {
  display:       flex;
  align-items:   center;
  gap:           4px;
  background:    none;
  border:        none;
  font-size:     11px;
  font-weight:   600;
  color:         var(--color-text-secondary);
  cursor:        pointer;
  padding:       2px 4px;
  border-radius: 3px;
  transition:    color 140ms ease, background 140ms ease;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
}
.sms-action-btn:hover {
  color:       var(--color-text-primary);
  background:  rgba(255, 255, 255, 0.07);
}
/* PRESERVED: .sms-action-clear — JS bound */
.sms-action-clear {
  color: var(--color-semantic-negative-text) !important;
  margin-left: auto;
}
.sms-action-clear:hover {
  background: var(--color-semantic-negative-dim) !important;
}

/* Option list */
.sms-list {
  list-style: none;
  margin:     0;
  padding:    4px 0;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-subtle) transparent;
}
.sms-list::-webkit-scrollbar       { width: 3px; }
.sms-list::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 2px; }

/* PRESERVED: .sms-item, .checked — JS bound */
.sms-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     7px 12px;
  cursor:      pointer;
  transition:  background 140ms ease;
  user-select: none;
}
.sms-item:hover   { background: rgba(255, 255, 255, 0.05); }
.sms-item.checked { background: rgba(255, 255, 255, 0.08); }

.sms-empty {
  padding:     16px 12px;
  font-size:   12px;
  color:       var(--color-text-secondary);
  text-align:  center;
  font-family: var(--mc-font, 'Archivo', system-ui, sans-serif);
}

/* Checkbox visual */
/* PRESERVED: .sms-checkbox, .checked — JS bound */
.sms-checkbox {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           14px;
  height:          14px;
  min-width:       14px;
  border:          1px solid var(--color-border-default);
  border-radius:   3px;
  background:      var(--color-surface-03);
  font-size:       8px;
  color:           transparent;
  transition:      background 140ms ease, border-color 140ms ease;
  flex-shrink:     0;
}
.sms-checkbox.checked {
  background:   var(--color-text-primary);
  border-color: var(--color-text-primary);
  color:        var(--color-surface-00);
}

/* Search inside dropdown */
.sms-search-wrap {
  position: relative;
  padding:  6px 8px 0;
}
.sms-search-icon {
  position:       absolute;
  left:           16px;
  top:            50%;
  transform:      translateY(-30%);
  font-size:      10px;
  color:          var(--color-text-secondary);
  pointer-events: none;
}
.sms-search-input {
  width:         100%;
  box-sizing:    border-box;
  background:    var(--color-surface-02);
  border:        1px solid var(--color-border-default);
  border-radius: 4px;
  color:         var(--color-text-sub);
  font-size:     11px;
  padding:       5px 8px 5px 24px;
  outline:       none;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:    border-color 140ms ease;
}
.sms-search-input:focus { border-color: var(--color-border-strong); }

/* Label for non-status SMS options */
.sms-option-label {
  font-size:     12px;
  color:         var(--color-text-sub);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
}

/* Seller chip variant (monochrome, no color accent) */
.sms-chip-seller {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 7px;
  border-radius: 9999px;
  font-size:     11px;
  font-weight:   500;
  background:    rgba(255, 255, 255, 0.07);
  color:         var(--color-text-secondary);
  border:        1px solid var(--color-border-default);
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
}

/* 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;
  /* inherits padding/border-radius from .status-badge */
}

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

/* ── Filter Pill (design system anatomy) ─────────────────────────── */
/* Variante de pill individual para barra de filtros rápidos */
/* PRESERVED: .filter-pill, .is-active — JS may toggle state */
.filter-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2, 8px);
  font-family:   var(--font-family-base, 'Archivo', system-ui, sans-serif);
  font-size:     var(--font-size-xs, 11px);
  font-weight:   var(--font-weight-medium, 500);
  color:         var(--color-text-tertiary);
  background:    transparent;
  border:        1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill, 999px);
  padding:       0 var(--space-4, 16px);
  min-height:    32px;
  cursor:        pointer;
  white-space:   nowrap;
  letter-spacing: 0.02em;
  flex-shrink:   0;
  transition:
    color var(--duration-fast),
    border-color var(--duration-fast),
    background var(--duration-fast);
  user-select:   none;
}

.filter-pill:hover {
  color:        var(--color-text-support);
  border-color: var(--color-border-default);
  background:   var(--color-interactive-dim);
}

.filter-pill.is-active {
  color:        var(--color-text-primary);
  background:   var(--color-surface-04);
  border-color: var(--color-border-strong);
}

/* Contador dentro da pill */
.filter-pill__count {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  min-width:    18px;
  height:       16px;
  padding:      0 5px;
  font-size:    10px;
  font-weight:  var(--font-weight-semibold, 600);
  letter-spacing: 0;
  color:        var(--color-text-disabled);
  background:   var(--color-surface-04);
  border-radius: var(--radius-pill, 999px);
  transition:   color var(--duration-fast), background var(--duration-fast);
}

.filter-pill.is-active .filter-pill__count {
  color:      var(--color-text-secondary);
  background: var(--color-surface-05);
}

/* Ícone de fechar (remover filtro) */
.filter-pill__close {
  width:        14px;
  height:       14px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  color:        var(--color-text-disabled);
  flex-shrink:  0;
  border-radius: 50%;
  margin-right: -4px;
  transition:   color var(--duration-fast), background var(--duration-fast);
}

.filter-pill__close:hover {
  color:      var(--color-text-secondary);
  background: var(--color-surface-05);
}

/* ── 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(--color-border-subtle);
  background: var(--color-surface-01);
  animation:  fadeIn var(--t-fast) both;
}

/* PRESERVED: .active-filter-tag, .active-filter-tag-remove — JS bound */
.active-filter-tag {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       3px 8px 3px 10px;
  background:    rgba(255, 255, 255, 0.07);
  border:        1px solid var(--color-border-default);
  border-radius: 9999px;
  color:         var(--color-text-sub);
  font-size:     11px;
  font-weight:   500;
  white-space:   nowrap;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  transition:    border-color 140ms ease, background 140ms ease;
}
.active-filter-tag:hover { border-color: var(--color-border-strong); }

.active-filter-tag-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           15px;
  height:          15px;
  background:      rgba(255, 255, 255, 0.08);
  border:          none;
  border-radius:   50%;
  color:           var(--color-text-secondary);
  font-size:       9px;
  transition:      background 140ms ease, color 140ms ease;
  padding:         0;
  cursor:          pointer;
}
.active-filter-tag-remove:hover {
  background: rgba(255, 255, 255, 0.18);
  color:      var(--color-text-primary);
}

/* ── Filter toggle / reset buttons ───────────────────────────────── */
/* PRESERVED: .btn-reset, .filter-toggle-btn — JS bound */
.btn-reset,
.filter-toggle-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       5px 11px;
  height:        30px;
  background:    transparent;
  border:        1px solid var(--color-border-default);
  border-radius: 4px;
  color:         var(--color-text-secondary);
  font-size:     11px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background 140ms ease, border-color 140ms ease, color 140ms ease;
  white-space:   nowrap;
  font-family:   var(--mc-font, 'Archivo', system-ui, sans-serif);
  letter-spacing: 0.02em;
}
.btn-reset:hover,
.filter-toggle-btn:hover {
  background:   rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-strong);
  color:        var(--color-text-primary);
}


/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS — Mobile-first
   ════════════════════════════════════════════════════════════════════ */

/* ── ≤1024 px — Tablet landscape ─────────────────────────────────── */
@media (max-width: 1024px) {
  /* Filter grid: reduzir colunas mínimas */
  .filter-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ── ≤768 px — Tablet portrait ────────────────────────────────────── */
@media (max-width: 768px) {
  /* Filter grid: 2 colunas */
  .filter-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); padding: var(--sp-3); }

  /* Filter bar header */
  .filter-bar-header { padding: var(--sp-2) var(--sp-3); min-height: 40px; }

  /* Ative filters: wrapping de pills */
  .active-filters { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
  .active-filter-tag { font-size: 10px; padding: 2px 7px 2px 9px; }

  /* Dropdown: limitar largura máxima */
  .sms-dropdown { max-width: 280px; }

  /* Buttons: touch targets */
  .btn-reset,
  .filter-toggle-btn { height: 36px; padding: 5px 10px; }

  /* Filter pills: wrap e touch targets adequados */
  .filter-pill { min-height: 36px; }
}

/* ── ≤480 px — Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Filter grid: 1 coluna */
  .filter-grid { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-3); }

  /* Filter bar header: empilhar título + ações */
  .filter-bar-header {
    flex-direction: column;
    align-items:    flex-start;
    padding:        var(--sp-2) var(--sp-3);
    gap:            var(--sp-2);
  }
  .filter-bar-actions { width: 100%; justify-content: flex-end; }

  /* Inputs + selects: touch-friendly */
  .filter-select,
  .filter-input-date,
  .sms-control { padding: 9px var(--sp-3); font-size: 13px; min-height: 40px; }

  /* Dropdown: largura completa em mobile */
  .sms-dropdown {
    min-width: 90vw;
    max-width: 95vw;
    left:      50% !important;
    transform: translateX(-50%);
  }

  /* Dropdown header: botões maiores */
  .sms-dropdown-header { padding: 10px 12px; }
  .sms-action-btn      { padding: 6px 8px; font-size: 12px; }

  /* Lista de opções: itens mais altos */
  .sms-item  { padding: 10px 12px; }
  .sms-list  { max-height: 220px; }

  /* Active filter tags */
  .active-filters     { padding: var(--sp-2); gap: var(--sp-1); }
  .active-filter-tag  { font-size: 10px; }

  /* Buttons: touch targets ≥40px */
  .btn-reset,
  .filter-toggle-btn  { height: 40px; min-width: 40px; padding: 5px 12px; font-size: 12px; }

  /* Filter pills */
  .filter-pill { min-height: 40px; padding: 0 var(--sp-3); }

  /* Chips de status selecionados */
  .sms-chips { gap: 3px; }
  .sms-chip-seller { max-width: 150px; }
}

/* ── ≤360 px — Small mobile ───────────────────────────────────────── */
@media (max-width: 360px) {
  .filter-grid { padding: var(--sp-2); }
  .filter-bar-header { padding: var(--sp-2); }
  .active-filters    { padding: var(--sp-2); }

  .filter-select,
  .filter-input-date,
  .sms-control { font-size: 12px; }
}

/* ── Touch: desabilitar hover ─────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .filter-select:hover,
  .filter-input-date:hover { border-color: var(--color-border-default); }

  .sms-item:hover           { background: transparent; }
  .sms-action-btn:hover     { background: transparent; color: var(--color-text-secondary); }

  .active-filter-tag:hover  { border-color: var(--color-border-default); }
  .filter-pill:hover        { background: transparent; border-color: var(--color-border-subtle); color: var(--color-text-tertiary); }

  /* Garantir touch targets mínimos */
  .sms-item       { min-height: 44px; }
  .btn-reset,
  .filter-toggle-btn { min-height: 44px; }
  .filter-pill    { min-height: 44px; }
}