/* ===== ch_filters_html (HTML form, scoped) =====
   Loaded from anvil.yaml native_deps.head_html.

   The root is the card, <div class="ch-filters-card" id="filters-card">, so its own rule stays a
   bare class and the rest scope on it at zero specificity. No other sheet, template or injected
   theme on the Prescriptions page styles these classes, so no rule here ties with another
   sheet. */

.ch-filters-card {
  background: var(--ch-bg-card);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-lg);
  padding: var(--ch-space-md);
}

:where(.ch-filters-card) .ch-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ch-space-md);
  padding-bottom: var(--ch-space-sm);
  border-bottom: 2px solid var(--ch-accent-primary);
}

:where(.ch-filters-card) .ch-filters-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ch-accent-primary-text, #b45309);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.ch-filters-card) .ch-clear-btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--ch-font-primary);
  background: transparent;
  color: var(--ch-text-muted);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  cursor: pointer;
  transition: opacity var(--ch-transition-fast), transform var(--ch-transition-fast), background-color var(--ch-transition-fast), color var(--ch-transition-fast), border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
}

:where(.ch-filters-card) .ch-clear-btn:hover {
  background: var(--ch-danger-bg);
  color: var(--ch-danger);
  border-color: var(--ch-danger-border);
}

:where(.ch-filters-card) .ch-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ch-space-sm) var(--ch-space-md);
}

:where(.ch-filters-card) .ch-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

:where(.ch-filters-card) .ch-filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ch-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.ch-filters-card) .ch-filter-input,
:where(.ch-filters-card) .ch-filter-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--ch-font-primary);
  color: var(--ch-text-primary);
  background: var(--ch-bg-input);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  outline: none;
  transition: border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
  box-sizing: border-box;
}

:where(.ch-filters-card) .ch-filter-input:focus,
:where(.ch-filters-card) .ch-filter-select:focus {
  border-color: var(--ch-border-focus);
  box-shadow: 0 0 0 2px var(--ch-focus-shadow, rgba(246, 139, 31, 0.15));
}

:where(.ch-filters-card) .ch-filter-input::placeholder {
  color: var(--ch-text-muted);
  font-size: 13px;
}

:where(.ch-filters-card) .ch-filter-input.invalid {
  border-color: var(--ch-danger);
  box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2);
}

:where(.ch-filters-card) .ch-checkbox-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ch-bg-input);
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-sm);
  cursor: pointer;
  transition: opacity var(--ch-transition-fast), transform var(--ch-transition-fast), background-color var(--ch-transition-fast), color var(--ch-transition-fast), border-color var(--ch-transition-fast), box-shadow var(--ch-transition-fast);
}

:where(.ch-filters-card) .ch-checkbox-filter:hover {
  border-color: var(--ch-accent-primary);
}

:where(.ch-filters-card) .ch-checkbox-filter.checked {
  background: var(--ch-accent-secondary);
  border-color: var(--ch-accent-primary);
}

:where(.ch-filters-card) .ch-checkbox-filter input {
  width: 16px;
  height: 16px;
  accent-color: var(--ch-accent-primary);
  cursor: pointer;
  margin: 0;
}

:where(.ch-filters-card) .ch-checkbox-filter label {
  font-size: 14px;
  color: var(--ch-text-primary);
  cursor: pointer;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1100px) {
  :where(.ch-filters-card) .ch-filters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 800px) {
  :where(.ch-filters-card) .ch-filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  :where(.ch-filters-card) .ch-filters-grid {
    grid-template-columns: 1fr;
  }
}