/* Scoped styles for Stats routes only. Import this file in each stats page. */

/* Scope everything under .stats-scope so nothing leaks to the rest of the site */
.stats-scope table {
  width: auto;           /* shrink to content where possible */
  margin-left: auto;     /* center within container */
  margin-right: auto;    /* center within container */
  border-collapse: separate;
  border-spacing: 0;
}

/* Header styling (works for both dhgc-table and stats-table) */
.stats-scope .dhgc-table thead,
.stats-scope .stats-table thead,
.stats-scope .dhgc-table-header,
.stats-scope .stats-table-header {
  background-color: var(--color-churchill-brown);
  color: var(--color-white);
}

/* Improve header icon/text contrast on dark header */
.stats-scope .dhgc-table thead th,
.stats-scope .stats-table thead th {
  /* Subtle outline to boost readability of emojis and text on brown */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Zebra striping */
.stats-scope .dhgc-table tbody tr:nth-child(even),
.stats-scope .stats-table tbody tr:nth-child(even) {
  background-color: rgba(133, 176, 154, 0.08); /* caius-blue with low alpha */
}

/* Hover row */
.stats-scope .dhgc-table tbody tr:hover,
.stats-scope .stats-table tbody tr:hover {
  background-color: rgba(133, 176, 154, 0.15);
}

/* Vertical separators */
.stats-scope .dhgc-table th,
.stats-scope .dhgc-table td,
.stats-scope .stats-table th,
.stats-scope .stats-table td {
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  vertical-align: middle;
}
.stats-scope .dhgc-table th:last-child,
.stats-scope .dhgc-table td:last-child,
.stats-scope .stats-table th:last-child,
.stats-scope .stats-table td:last-child { border-right: none; }

/* Row separators */
.stats-scope .dhgc-table tbody tr,
.stats-scope .stats-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Numeric alignment */
.stats-scope .num { text-align: center; font-variant-numeric: tabular-nums; }

/* Ensure table body numeric cells are centered where appropriate (non-first column) */
.stats-scope .dhgc-stats-table tbody td.num,
.stats-scope table.dhgc-table tbody td.num,
.stats-scope table.stats-table tbody td.num { text-align: center !important; }

/* First column: player/label column should be right-aligned so numbers sit neatly after it */
.stats-scope .dhgc-table th:first-child,
.stats-scope .dhgc-table td:first-child,
.stats-scope .stats-table th:first-child,
.stats-scope .stats-table td:first-child,
.stats-scope .dhgc-stats-table th:first-child,
.stats-scope .dhgc-stats-table td:first-child {
  text-align: right;
}

/* Center all other header cells (numeric/trophy columns) so icons and numbers align visually */
.stats-scope .dhgc-table thead th:not(:first-child),
.stats-scope .stats-table thead th:not(:first-child),
.stats-scope .dhgc-stats-table thead th:not(:first-child) {
  text-align: center;
}

/* Handle other table variants and make centering authoritative */
.stats-scope .dhgc-stats-table thead th:not(:first-child),
.stats-scope table.dhgc-table thead th:not(:first-child),
.stats-scope table.stats-table thead th:not(:first-child) {
  text-align: center !important;
}

/* Extra-specific selector to override inline utility classes (text-left) from the table component */
.stats-scope .dhgc-stats-table thead th.text-left:not(:first-child),
.stats-scope .dhgc-stats-table thead th[aria-sort]:not(:first-child) {
  text-align: center !important;
}

/* Ensure first (player) cell text is right aligned even if utilities try to force left */
.stats-scope .dhgc-stats-table thead th.text-left:first-child,
.stats-scope .dhgc-stats-table thead th[aria-sort]:first-child,
.stats-scope .dhgc-stats-table td:first-child {
  text-align: right !important;
}

/* Sort indicators (scoped) */
.stats-scope thead th.sortable {
  position: relative;
  padding-right: 1.25rem; /* space for arrow */
}
.stats-scope thead th.sortable::after {
  content: '\2195'; /* up/down arrow */
  position: absolute;
  right: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
}
.stats-scope thead th.sortable[aria-sort="ascending"]::after { content: '\2191'; }
.stats-scope thead th.sortable[aria-sort="descending"]::after { content: '\2193'; }

/* Equal-height button groups in Stats filters */
.stats-scope .dhgc-header-controls,
.stats-scope .dhgc-filter-section {
  align-items: stretch; /* ensure all groups match tallest */
  flex-wrap: wrap;      /* allow wrapping without height mismatch */
}
.stats-scope .dhgc-button-group {
  align-items: stretch; /* stretch children to same height within group */
}
.stats-scope .dhgc-button-group > * {
  height: 100%;         /* fill group height */
  display: flex;        /* keep text vertically centered */
  align-items: center;
}

/* Standardize FilterBar button appearance to match site buttons (brown on white, downing-red hover) */
/* Target the actual FilterBar markup (dhgc-filter-btn) used across components */
.stats-scope .dhgc-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.6rem;
  height: 36px;
  border-radius: 0.375rem;
  background: #fff;
  color: var(--color-churchill-brown);
  border: 1px solid rgba(0,0,0,0.06);
  font-weight: 600;
  text-decoration: none;
  transition: color .12s, border-color .12s, background .12s, box-shadow .12s;
}
.stats-scope .dhgc-filter-btn:hover,
.stats-scope .dhgc-filter-btn:focus {
  color: var(--color-downing-red);
  border-color: var(--color-downing-red);
  background: #fff;
}
/* Preserve the existing 'is-active' visual (caius-blue) but ensure sizing/shape match */
.stats-scope .dhgc-filter-btn.is-active {
  background: var(--color-caius-blue) !important;
  color: var(--color-white) !important;
  border-color: var(--color-caius-blue) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Filter row styling: prefer a seamless cream background inside panels and
   brown labels; remove the boxed border so the header and filter area read as
   a single component. Buttons keep their button visuals. */
.dhgc-stats-panel .dhgc-filter-section,
.dhgc-stats-panel > .flex,
.stats-scope .dhgc-filter-section,
.stats-scope > .dhgc-filter-section {
  border: none;
  background: transparent;
  padding: 0.25rem 0.5rem; /* Tightened padding */
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
}

/* Filter labels should use the site brown and a consistent weight/size */
.dhgc-filter-section label,
.dhgc-filter-section .field-label {
  color: var(--color-churchill-brown);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Make each group inside the filter bar align items vertically centered so
  the 'Selected only' checkbox and Clear selection link line up with buttons */
.dhgc-filter-section > * { display: flex; align-items: center; gap: 0.5rem; }
.dhgc-filter-section input[type="checkbox"] { transform: translateY(1px); }

/* Collapsible panel shared styling (unify look across tables and collections) */
.stats-scope .dhgc-collapsible {
  border: 2px solid var(--color-downing-red);
  border-radius: 0.375rem; /* rounded-md */
  margin-bottom: 1.5rem;   /* mb-6 */
}
.stats-scope .dhgc-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.375rem; /* reduced header padding to halve vertical gap */
  min-height: 40px;        /* slightly smaller header height */
  background-color: rgba(255, 255, 255, 0.4);
}

/* Ensure the filters box uses the thicker Downing Red border too */
.stats-scope .dhgc-card-subgroup {
  border: 2px solid var(--color-downing-red);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem; /* match header spacing */
  margin-bottom: 1.5rem;
}

/* When a collapsible is used inside a dhgc-stats-panel, the panel already
   provides the downing-red border; avoid nested double borders and extra
   header chrome. */
.stats-scope .dhgc-stats-panel .dhgc-collapsible {
  border: none;
  margin-bottom: 0;
}
.stats-scope .dhgc-stats-panel .dhgc-collapsible-header {
  background: transparent;
  padding: 0;
  min-height: auto;
}

/* The outer grouping wrapper (dhgc-panel-outer) provides the black frame. If
   a dhgc-card-primary sits directly inside it, suppress the card's own border
   to avoid double framing and keep spacing consistent. */
.dhgc-panel-outer > .dhgc-card-primary {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Draw an encompassing rounded black frame around panel outer elements and
   ensure internal content doesn't overflow the rounded corners. This matches
   the pattern used elsewhere in the site. */
.stats-scope .dhgc-panel-outer {
  border: 2px solid var(--color-black) !important;
  border-radius: 0.5rem; /* 8px */
  padding: 0.75rem; /* slightly larger so inner panels sit comfortably */
  box-sizing: border-box;
  overflow: hidden;
}

/* Likewise suppress secondary card chrome when wrapped by panel outer on the index page */
.dhgc-panel-outer > .dhgc-card-secondary,
.dhgc-panel-outer > .dhgc-card-secondary * {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure inner red panel chrome appears for stats panels inside the outer wrapper */
.dhgc-panel-outer .dhgc-stats-panel {
  border: 3px solid var(--color-downing-red) !important;
  background: var(--color-cream) !important;
  padding: 0.75rem !important; /* restore comfortable inner padding so content doesn't overflow */
}

/* Make inner red panels rounded to sit neatly inside the outer black frame */
.dhgc-panel-outer .dhgc-stats-panel {
  border-radius: 0.5rem;
}

/* Ensure consistent vertical spacing between inner red panels when stacked inside panel-outer */
.dhgc-panel-outer .dhgc-stats-panel + .dhgc-stats-panel {
  margin-top: 0.5rem; /* halved gap between stacked panels */
}

/* Ensure panel titles and small labels render in churchill brown across panels */
.dhgc-stats-panel .dhgc-title-section,
.dhgc-stats-panel .field-label,
.dhgc-stats-panel .dhgc-filter-section label,
.dhgc-stats-panel .dhgc-filter-section .field-label,
.dhgc-stats-panel p.text-sm {
  color: var(--color-churchill-brown) !important;
}

/* Hide any empty action buttons (no text/only whitespace) to remove stray square in headers */
.dhgc-stats-panel-header .dhgc-button-inactive:empty,
.dhgc-stats-panel-header .dhgc-button-inactive:not(:defined) {
  display: none !important;
}

/* Fallback: hide buttons that have no visible text (only icons or whitespace) */
.dhgc-stats-panel-header .dhgc-button-inactive { min-width: 40px; }
.dhgc-stats-panel-header .dhgc-button-inactive span[hidden],
.dhgc-stats-panel-header .dhgc-button-inactive:has(:not(:empty):not([hidden])) { display: inline-flex; }

/* When panels are placed using a wrapper + manual mt-* spacing (legacy), normalize so inner spacing matches above rule */
.dhgc-panel-outer > * { margin-top: 0; }
.dhgc-panel-outer > .dhgc-stats-panel { margin-top: 0; }

/* Round collapsible panels and headers for consistent corners */
.stats-scope .dhgc-collapsible { border-radius: 0.375rem; }
.stats-scope .dhgc-collapsible-header { border-radius: 0.375rem; }

/* Make CTA anchors inside the stats hub render as brown-on-white buttons with downing-red hover */
.dhgc-panel-outer .dhgc-button-secondary {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  border-radius: 0.375rem;
  background: #fff;
  color: var(--color-churchill-brown);
  border: 1px solid rgba(0,0,0,0.06);
  text-decoration: none;
  transition: color .15s, border-color .15s, box-shadow .15s, background .15s;
}
.dhgc-panel-outer .dhgc-button-secondary:hover,
.dhgc-panel-outer .dhgc-button-secondary:focus {
  color: var(--color-downing-red);
  border-color: var(--color-downing-red);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Equal-height tiles grid for the stats hub */
.dhgc-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.dhgc-stats-grid .dhgc-stats-panel { display:flex; flex-direction:column; justify-content:space-between; height:100%; }

/* Make the CTA buttons inside tiles visually match the show/hide buttons */
.dhgc-stats-panel .dhgc-button-inactive, .dhgc-stats-panel a.dhgc-button-inactive { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; }

/* Utility: ensure grid items stretch to same height when used inside responsive container */
.dhgc-panel-outer .dhgc-stats-grid > div { height:100%; }

/* Ensure pivot leaderboards keep the first (player) column sticky so names remain visible
   when many year columns overflow horizontally. This complements the table's built-in
   sticky-col behavior and covers cases where the grid/component doesn't inject the
   .sticky-col class reliably. */
.stats-scope .pivot-leaderboard .dhgc-stats-table th:first-child,
.stats-scope .pivot-leaderboard .dhgc-stats-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 600;
  min-width: 11rem;
  max-width: 11rem;
  width: 11rem;
  background: var(--color-white, #ffffff) !important;
  box-shadow: 3px 0 4px -2px rgba(0,0,0,0.18);
}