/* Range Search layout */
.rangeSearchLayout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Name search bar — sits above the filters/results layout, full width,
   so it reads as the primary way to find a range (filters are secondary
   refinement). Debounced in rangeList.js, not here. */
.searchBar {
  margin-bottom: 14px;
}

.nameSearchInput {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
}

.nameSearchInput:focus {
  outline: none;
  border-color: #3c586f;
  box-shadow: 0 0 0 3px rgba(60, 88, 111, 0.15);
}

/* Sidebar */
.filterPanel {
  width: 320px;
  max-width: 100%;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

/* Sticky on desktop -- offset below the also-sticky site banner (see
   .header/.stuck in banner.module.css) so the two don't overlap. The
   banner shrinks once scrolled ("stuck") to ~96px tall; by the time this
   panel's own sticky position engages the user has necessarily scrolled
   past that point already, so 110px (96px + a little breathing room)
   is the right offset to use, not the banner's taller unscrolled height. */
@media (min-width: 992px) {
  .filterPanel {
    position: sticky;
    top: 110px;
  }
}

.filterHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.filterTitle {
  font-weight: 700;
  color: #444;
}

/* Collapsible sections */
.filterSection {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-top: 10px;
}

.filterToggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 0;
  font-weight: 600;
  color: #444;
  cursor: pointer;
}

.filterToggle:hover {
  color: #000;
}

.filterBody {
  margin-top: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Nice scrollbars (Chrome/Edge) */
.filterBody::-webkit-scrollbar {
  width: 8px;
}
.filterBody::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 8px;
}

.filterCount {
  font-size: 12px;
  color: #777;
}

/* Results area */
.resultsPanel {
  flex: 1;
  min-width: 0;
}

.resultsSummary {
  font-size: 13px;
  color: #777;
  margin-bottom: 8px;
}

/* Table polish */
.table thead th {
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.table tbody tr:hover {
  background: #fafafa;
}

/* The results table's "Disciplines" column and RangeCard's badge list
   both render the SAME shared classes -- .disciplineBadgeCell /
   .disciplineBadge / .disciplineBadgeEmpty, defined once in globals.css
   -- so the desktop row and the mobile card always read as the same
   visual language, not two different badge designs. */

/* Desktop (slim table) vs mobile (card list) results.
   Both are always rendered in the DOM — CSS alone decides which is
   visible at a given width, so there's no client-only screen-size
   detection or hydration mismatch to worry about. */
.desktopResultsView {
  display: block;
}

.mobileResultsView {
  display: none;
}

/* Range cards (mobile results view) — a compact card per range: name,
   county, and only the disciplines actually offered as small tags,
   rather than the full tick/empty matrix used on desktop. Loosely
   modelled on the card-list layout on myguns.co.uk/directory. */
.rangeCard {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.rangeCard:hover,
.rangeCard:focus-visible {
  border-color: #d7dde2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.rangeCard:focus-visible {
  outline: 2px solid #3c586f;
  outline-offset: 2px;
}

.rangeCardHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.rangeCardName {
  font-weight: 700;
  color: #222;
  font-size: 16px;
}

.rangeCardCounty {
  font-size: 13px;
  color: #777;
}

/* Badge styling itself (.disciplineBadgeCell/.disciplineBadge/
   .disciplineBadgeEmpty) lives in globals.css since RangeRow's table
   cell uses the exact same classes -- see the note above. */

.rangeCardLink {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3c586f;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.paginationStatus {
  font-size: 13px;
  color: #555;
  font-weight: 600;
}

/* Small screen: the banner also shrinks/sticks below 992px (see
   banner.module.css), so the .filterPanel isn't sticky here at all (see
   the max-width:991px block below removing "width: 100%" not sticky --
   it just stacks above the results instead), meaning there's no
   overlap to account for on mobile. */

/* Small screen: stack sidebar above results, switch to the card list */
@media (max-width: 991px) {
  .rangeSearchLayout {
    flex-direction: column;
  }
  .filterPanel {
    width: 100%;
  }

  .desktopResultsView {
    display: none;
  }

  .mobileResultsView {
    display: block;
  }
}