/* Modernized "Golfers Used Compare" pages (Compare By Team / Compare By Golfer, both rendered via the shared
   index.rhtml + _inputForm.rhtml + _golfersUsedTable.rhtml partials). Scoped under .modernGolfersUsedComparePage
   so it never affects other pages. The .golferUsage1-.golferUsage11 heat-map colors (application.css) are a
   meaningful legend for usage-count intensity and are left completely unchanged -- only borders/spacing/font
   and the surrounding chrome are modernized. #golferUsagesTable is looked up by ID from JS (addUsagesColumn in
   application.js), which appends new <th>/<td> elements to it live when a comparison is added -- those
   dynamically-created cells pick up this CSS automatically since the rules target tag/class, not specific
   elements, so nothing here needs to change to stay in sync with the JS. */

.modernGolfersUsedComparePage #pageTitle {
  margin-bottom: 16px;
}

.modernGolfersUsedComparePage .form-group {
  margin-bottom: 10px;
}

.modernGolfersUsedComparePage .input-group-addon.ptfgBlue {
  background: #0b1a67;
  color: #fff !important;
  border: 1px solid #0b1a67;
  border-radius: 6px 0 0 6px;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
}

.modernGolfersUsedComparePage .input-group select.form-control {
  border: 1px solid #cfd4e0;
  border-left: none;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
}

.modernGolfersUsedComparePage .input-group select.form-control:focus {
  outline: none;
  border-color: #1c5bc4;
  box-shadow: 0 0 0 3px rgba(28, 91, 196, 0.15);
}

.modernGolfersUsedComparePage small {
  color: #6b7280;
  font-size: 12px;
}

.modernGolfersUsedComparePage .golfersUsedShowEarningsRow {
  margin-top: 10px;
  font-size: 13px;
  color: #333;
}

.modernGolfersUsedComparePage .golfersUsedShowEarningsRow label {
  font-weight: normal;
  margin-bottom: 0;
  cursor: pointer;
}

.modernGolfersUsedComparePage .golfersUsedSortByGroup {
  margin-top: 10px;
}

.modernGolfersUsedComparePage .golfersUsedSortByRow {
  font-size: 13px;
  color: #333;
  margin-bottom: 3px;
}

.modernGolfersUsedComparePage .golfersUsedSortByRow:last-child {
  margin-bottom: 0;
}

.modernGolfersUsedComparePage .alert-warning {
  background: #fff8e8;
  border: none;
  border-left: 4px solid #e8a83c;
  border-radius: 6px;
  color: #6b4d10;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 14px;
}

.modernGolfersUsedComparePage .golfersUsedTableWrap {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid #e2e6f2;
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
}

.modernGolfersUsedComparePage #golferUsagesTable {
  margin: 0;
  border-collapse: collapse;
}

.modernGolfersUsedComparePage #golferUsagesTable th {
  background-color: #0b1a67;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid #24358c;
  padding: 4px 5px;
}

.modernGolfersUsedComparePage #golferUsagesTable .golfersUsedTableHeaderBackground {
  background-color: #0b1a67;
  color: #fff;
}

.modernGolfersUsedComparePage .golfersUsedRemoveColumn {
  float: right;
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: #c30900;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modernGolfersUsedComparePage .golfersUsedRemoveColumn:hover {
  background-color: #c30900;
  color: #fff;
}

.modernGolfersUsedComparePage #golferUsagesTable thead td {
  border: 1px solid #24358c;
  padding: 4px 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.modernGolfersUsedComparePage #golferUsagesTable td {
  border: 1px solid #e2e6f2;
  padding: 3px 5px;
  font-size: 12px;
}

.modernGolfersUsedComparePage #golferUsagesTable .grayRow {
  background-color: #f4f6fb;
}

.modernGolfersUsedComparePage #golferUsagesTable td.highlightCell {
  background-color: #d0a9f5;
}

.modernGolfersUsedComparePage #golferUsagesTable tbody tr:hover td:not([class*="golferUsage"]) {
  background-color: #eef1fa;
}

/* Total Golfer Usages page (reuses the same .golfersUsedTableWrap scroll-card wrapper as #golferUsagesTable
   above, applied to a completely separate table/id here). Unlike that wide, dynamically-growing comparison
   table, this one only ever has 3 columns, so shrink both the table and its wrapper to fit the content instead
   of stretching to the full card width. */
.modernGolfersUsedComparePage .totalGolferUsagesTableWrap {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.modernGolfersUsedComparePage #totalGolferUsages {
  float: none;
  width: auto;
  margin: 0;
  border-collapse: collapse;
  white-space: nowrap;
}

.modernGolfersUsedComparePage #totalGolferUsages thead tr#header {
  background-color: #0b1a67;
}

.modernGolfersUsedComparePage #totalGolferUsages thead tr#header td {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  padding: 6px 10px;
  border: 1px solid #24358c;
}

.modernGolfersUsedComparePage #totalGolferUsages thead tr#header td a.sortheader {
  color: #fff;
}

.modernGolfersUsedComparePage #totalGolferUsages thead tr#header td a.sortheader:hover {
  color: #dde3f2;
}

.modernGolfersUsedComparePage #totalGolferUsages tbody td {
  border: 1px solid #e2e6f2;
  padding: 5px 10px;
  font-size: 12px;
}

.modernGolfersUsedComparePage #totalGolferUsages tbody td.number {
  text-align: right;
}

.modernGolfersUsedComparePage #totalGolferUsages tbody tr.golferUsageTotalsRowEven td {
  background-color: #f4f6fb;
}

.modernGolfersUsedComparePage #totalGolferUsages tbody tr.whiteRow td {
  background-color: #fff;
}

.modernGolfersUsedComparePage #totalGolferUsages tbody tr:hover td {
  background-color: #eef1fa;
}