/* Shared Filter Button Styles */

:root {
  /* FH Level colors */
  --color-d1-1: #1e88e5;
  --color-d1-2: #64b5f6;
  --color-d1-3: #bbdefb;
  --color-d2-1: #43a047;
  --color-d2-2: #a5d6a7;
  --color-d3-1: #fb8c00;
  --color-d3-2: #ffcc80;
  --color-usports: #ab47bc;
}

/* Filter controls container */
.filter-controls {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Base filter toggle button */
.filter-toggle {
  transition: all 0.2s;
  border-width: 1px;
  border-style: solid;
}

.filter-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.filter-toggle.active {
  border-color: currentColor;
}

.filter-toggle.inactive {
  opacity: 0.35;
}

/* FH Level filter buttons */
.fh-filter-d1-1.active { background-color: var(--color-d1-1); color: white; }
.fh-filter-d1-1.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d1-2.active { background-color: var(--color-d1-2); color: #1a3a52; }
.fh-filter-d1-2.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d1-3.active { background-color: var(--color-d1-3); color: #1a3a52; }
.fh-filter-d1-3.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d2-1.active { background-color: var(--color-d2-1); color: white; }
.fh-filter-d2-1.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d2-2.active { background-color: var(--color-d2-2); color: #2d5a3d; }
.fh-filter-d2-2.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d3-1.active { background-color: var(--color-d3-1); color: white; }
.fh-filter-d3-1.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-d3-2.active { background-color: var(--color-d3-2); color: #5a2a2a; }
.fh-filter-d3-2.inactive { background-color: #f8f9fa; color: #6c757d; }
.fh-filter-usports.active { background-color: var(--color-usports); color: white; }
.fh-filter-usports.inactive { background-color: #f8f9fa; color: #6c757d; }

/* Locale filter buttons - soft slate color */
.locale-filter-city.active,
.locale-filter-suburban.active,
.locale-filter-town.active,
.locale-filter-rural.active {
  background-color: #90a4ae;
  color: white;
}
.locale-filter-city.inactive,
.locale-filter-suburban.inactive,
.locale-filter-town.inactive,
.locale-filter-rural.inactive {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* Enrollment filter buttons - same soft slate color */
.enrollment-filter.active {
  background-color: #90a4ae;
  color: white;
}
.enrollment-filter.inactive {
  background-color: #f8f9fa;
  color: #6c757d;
}

/* ========================================
   Schools Page - Collapsible Filter Panel
   ======================================== */
.filter-panel {
  font-size: 0.875rem;
}

.filter-section {
  border-bottom: 1px solid #e9ecef;
}

.filter-section:last-child {
  border-bottom: none;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: #1e293b;
}

.filter-header:hover {
  color: #206bc4;
}

.filter-header .bi-chevron-down {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.filter-section.collapsed .filter-header .bi-chevron-down {
  transform: rotate(-90deg);
}

.filter-section.collapsed .filter-body {
  display: none;
}

.filter-body {
  padding-bottom: 0.75rem;
}

/* Checkbox list styling */
.filter-checks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-checks li {
  margin-bottom: 0.125rem;
}

.filter-checks label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.2rem 0;
  font-weight: normal;
  margin: 0;
}

.filter-checks label:hover {
  color: #206bc4;
}

.filter-checks input[type="checkbox"] {
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Subgroup styling (for locale) */
.filter-subgroup {
  margin-top: 0.375rem;
}

.filter-subgroup-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.125rem;
  padding-left: 1.375rem;
}

/* Search input */
.filter-search input {
  font-size: 0.875rem;
}

/* Reset button */
.filter-reset {
  margin-top: 0.75rem;
}

/* Active filter count badge */
.filter-count {
  font-size: 0.65rem;
  background: #206bc4;
  color: white;
  border-radius: 10px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.25rem;
  font-weight: normal;
}

/* "All/None" toggle links */
.filter-quick-toggle {
  font-size: 0.7rem;
  color: #6c757d;
  margin-left: auto;
  padding-left: 0.5rem;
}

.filter-quick-toggle a {
  color: #206bc4;
  text-decoration: none;
  cursor: pointer;
}

.filter-quick-toggle a:hover {
  text-decoration: underline;
}