/* =============================================================================
   Filter Bar Component
   TASK-033: Filter bar styles
   ============================================================================= */

.billing-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-lg);
}

.billing-filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.billing-filter-bar__label {
  font-size: var(--text-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.billing-filter-bar__select,
.billing-filter-bar__input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: var(--text-size-sm);
  min-width: 150px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.billing-filter-bar__select:focus,
.billing-filter-bar__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.billing-filter-bar__clear {
  display: inline-flex;
  align-items: flex-end;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-size-sm);
  text-decoration: none;
  transition: color 0.2s ease;
}

.billing-filter-bar__clear:hover {
  color: var(--error);
}

/* Responsive */
@media (max-width: 640px) {
  .billing-filter-bar {
    flex-direction: column;
  }

  .billing-filter-bar__field {
    width: 100%;
  }

  .billing-filter-bar__select,
  .billing-filter-bar__input {
    width: 100%;
  }
}