:root {
  --primary-color: #00897b;
}

/* Override button colors */
.btn, .btn-large, .btn-small {
  background-color: var(--primary-color);
}
.btn:hover, .btn-large:hover, .btn-small:hover {
  background-color: #00695c; /* teal darken-3 */
}

/* App-specific utilities */
.error { color: #b00; }
.flag { color: #b06f00; font-size: .85em; }

/* Gate coordinate rows sit inside fieldsets; drop Materialize's row gutter
   so paired lat/lon rows stay tight. */
fieldset .row { margin-bottom: 0; }

/* Small static label above a coordinate input. Overrides Materialize's
   1rem label size; not a floating label, so it never moves. */
.field-label {
  display: block;
  font-size: .75rem;
  color: #757575;
  line-height: 1.2;
}

/* Course name heading. Size and margins are set explicitly rather than
   inheriting Materialize's h3 (~2.9rem with ~2.8rem margins), which would
   dominate the page and undo the height saved by the paired gate rows. */
.course-name {
  font-size: 1.8rem;
  font-weight: 400;
  margin: 1.5rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid #e0e0e0;
}

/* .flag is sized in em, so inside the larger heading it would render near
   1.5rem. Pin it in rem so the warning stays a small annotation. */
.course-name .flag { font-size: .9rem; }

/* Icon-only delete control for list rows. Built on .btn-flat so it escapes the
   primary-color background override above, and with the 16px side padding
   trimmed so it takes little more room than the glyph itself. Red to mark the
   destructive action, reusing the .error red rather than Materialize's
   brighter #F44336; darkens on hover/focus. */
.btn-delete {
  padding: 0 .4rem;
  color: #b00;
}
.btn-delete:hover, .btn-delete:focus { color: #800; }
.btn-delete i { font-size: 1.2rem; }

/* Age bracket grid scrolls internally so a long bracket set doesn't push the
   Segments and Riders sections far down the admin page. The header sticks so
   the columns stay identified while scrolling. */
.bracket-grid { max-height: 22rem; overflow-y: auto; }
.bracket-grid thead th { position: sticky; top: 0; background: #fff; }

/* Materialize gives text inputs a 20px bottom margin and 3rem height, which
   inside table cells stacks into a needlessly tall grid. */
.bracket-grid input[type="text"],
.bracket-grid input[type="number"] { margin-bottom: 0; height: 2.2rem; }

/* Results table scrolls itself horizontally once per-segment columns push it wider
   than the page, the same self-contained-scroll idea as .bracket-grid above but on
   the horizontal axis. Segment columns don't wrap their time values onto two lines. */
.results-table-scroll { overflow-x: auto; }
.results-table-scroll .segment-col { white-space: nowrap; }

/* Riders table scrolls internally, same self-contained-scroll idea as
   .bracket-grid above -- a start sheet can run 200+ rows, which would
   otherwise push the Flagged submissions and Submission jobs sections far
   down the admin page. The header sticks so Bib/Name/Gender/Course stay
   identified while scrolling. */
.riders-grid { max-height: 26rem; overflow-y: auto; }
.riders-grid thead th { position: sticky; top: 0; background: #fff; }