.themeFontColor {
  color: grey;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #f2f4f6;
  color: #2b2f33;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}
.container, .container-fluid {
  max-width: 1200px;
}

.themeFontColor {
  color: #555;
}

.table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.table thead {
  background-color: #f1f3f5;
}

/* Discipline Matrix — shared, fixed-order discipline COLUMNS, rendered as
   a real <table> instead of a row of pills/chips. As of the slim results
   table redesign, this full tick/empty matrix is used ONLY by the
   default DisciplineMatrix export on the range detail page (one range,
   every discipline). The results list (rangeList.js/RangeRow.js) used to
   embed these same columns directly into its own table via
   DisciplineColumnHeaders/DisciplineColumnCells, but that forced a wide
   table with a permanent horizontal scrollbar once there were 9
   discipline columns — replaced by a single "Disciplines" column of
   offered-only badges (see .disciplineBadgeCell etc. below). The
   DisciplineColumnHeaders/DisciplineColumnCells helpers are still
   exported from DisciplineMatrix.js and still used internally by its own
   default export, just no longer imported by the list page. A tick
   marks "offered"; an empty cell means "not offered" — there's no third
   "unknown" state for cells that aren't offered. Ready to become
   clickable later via the onToggle prop without any CSS changes — the
   button.disciplineTick rules below already cover that state. */
table.disciplineMatrix {
  border-collapse: collapse;
}

.disciplineColumnHeader {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-align: center;
  white-space: nowrap;
  border-bottom: 2px solid #e3e6e9;
}

.disciplineCell {
  padding: 6px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

.disciplineTick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e7f3ea;
  color: #1f6d38;
  font-weight: 700;
  font-size: 13px;
  border: none;
  padding: 0;
}

.disciplineTick--empty {
  background: transparent;
}

button.disciplineTick {
  cursor: pointer;
  font: inherit;
  appearance: none;
}

button.disciplineTick:hover {
  filter: brightness(0.96);
}

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

.disciplineMatrixEmpty {
  font-size: 13px;
  color: #9aa2ab;
  margin: 0;
  text-align: center;
}

/* Shared "offered disciplines as badges" building blocks — used by BOTH
   RangeRow's slim results-table cell (desktop) and RangeCard (mobile),
   so the two always read as the same visual language even though one's
   a <td> and the other's a <div>. Defined once here (rather than in
   rangeSearch.css) since these aren't specific to the search page. */
.disciplineBadgeCell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.disciplineBadge {
  display: inline-block;
  background: #e7f3ea;
  color: #1f6d38;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.disciplineBadgeEmpty {
  font-size: 13px;
  color: #9aa2ab;
  margin: 0;
}

/* Only the actual clickable results rows (RangeRow, in the search
   results table -- see the "table table-hover slimResultsTable" in
   RangeList.js) get a pointer cursor here. This used to be a blanket
   `tr { cursor: pointer }` covering every <tr> on the entire site,
   including read-only tables, which looked clickable while doing
   nothing. The Discipline Glossary table below has its own onClick-driven
   rows and its own matching cursor rule, since it isn't a
   .slimResultsTable. */
.slimResultsTable tbody tr {
  cursor: pointer;
}

.slimResultsTable th,
.slimResultsTable td {
  vertical-align: middle;
}

/* Discipline glossary (homepage) — a reference table explaining what
   each discipline category actually covers, e.g. "Black Powder" ->
   "Muzzle loading rifle, pistol, percussion, flintlock". Categories are
   fetched live from /api/disciplines (see DisciplineGlossary.js) so this
   table can never list a category that doesn't actually exist as a
   filter; only the "Includes" copy is static.

   IMPORTANT: app.js wraps its whole page in
   <div className="container text-center">, and Bootstrap's
   `.text-center` utility is `text-align: center !important`. That
   !important beats a plain `text-align: left` here regardless of
   selector specificity -- so every text-align override below that
   needs to win against it is marked !important too. Nothing else in
   this block needs !important; only text-align does. */
.disciplineGlossary {
  margin-top: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left !important;
}

.disciplineGlossary h4 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 6px;
}

.disciplineGlossaryIntro {
  text-align: center;
  color: #6b7680;
  font-size: 14px;
  max-width: 640px;
  margin: 0 auto 20px;
}

.disciplineGlossaryTable {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e3e7ea;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.disciplineGlossaryTable th {
  text-align: left !important;
  background: #f6f8f9;
  border-bottom: 1px solid #e3e7ea;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6b7680;
}

.disciplineGlossaryTable td {
  text-align: left !important;
  padding: 14px 16px;
  border-bottom: 1px solid #f2f4f5;
  font-size: 14px;
  line-height: 1.5;
  vertical-align: top;
  color: #3a444c;
}

/* Each row now navigates to a filtered Range Search on click (see
   DisciplineGlossary.js) -- cursor: pointer here so the row's existing
   hover highlight (below) actually implies a real action, matching the
   :hover rule instead of being purely decorative. */
.disciplineGlossaryTable tbody tr {
  cursor: pointer;
}

.disciplineGlossaryTable tbody tr:nth-child(even) {
  background: #fafbfc;
}

.disciplineGlossaryTable tbody tr:hover {
  background: #f3f6f8;
}

.disciplineGlossaryTable tbody tr:last-child td {
  border-bottom: none;
}

.disciplineGlossaryTable td:first-child {
  width: 200px;
}

/* Category column reuses the same green "offered discipline" badge look
   as the search results (.disciplineBadge in this same file) so the
   homepage glossary and the results list read as one visual system. It's
   a plain badge, not its own link/button -- the whole row is the
   clickable element (see .disciplineGlossaryTable tbody tr above and
   the onClick in DisciplineGlossary.js). */
.disciplineGlossaryCategory {
  display: inline-block;
  background: #e7f3ea;
  color: #1f6d38;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .disciplineGlossaryTable td:first-child {
    width: auto;
  }

  .disciplineGlossaryTable th,
  .disciplineGlossaryTable td {
    padding: 10px 12px;
    font-size: 13px;
  }
}