/**
 * Club Tables - Dark & Light Mode Support
 *
 * Styles for club statistics and comparison tables:
 * - [ccm-club-mileage-stats] -> #ccm-club-stats-table
 * - [ccm-club-comparison-stats] -> #ccm-club-comparison-stats-table
 * - [ccm-completed-rides] -> #ccm-completed-ride-table
 * - [ccm-ride-results] -> .ccm-event-table (multiple instances)
 *
 * Uses BuddyX theme color tokens for automatic dark/light mode support.
 * Specificity note: Uses !important only to override Bootstrap's forced utilities.
 * This file is loaded AFTER bootstrap-tables.css, so it can override safely.
 *
 * @package Cycling_Club_Manager
 */

/* Shared container height */
#ccm-club-stats-list,
#ccm-club-comparison-stats-list,
#ccm-completed-ride-list {
	height: 75vh;
}

/* Base table styling - override Bootstrap defaults for all club tables */
#ccm-club-stats-table,
#ccm-club-comparison-stats-table,
#ccm-completed-ride-table,
.ccm-event-table {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-page, #ffffff) !important;

	/* Override Bootstrap's CSS variables so they use BuddyX theme colors */
	--bs-table-bg: var(--bx-color-bg-page, #ffffff);
	--bs-table-striped-bg: var(--bx-color-bg-muted, #f5f5f4);
	--bs-table-color: var(--bx-color-fg, #1f2937);
	--bs-table-striped-color: var(--bx-color-fg, #1f2937);
	--bs-table-accent-bg: transparent;
	--bs-table-border-color: var(--bx-color-border, #adb5bd);
}

/* Table header - sticky positioning */
#ccm-club-stats-table thead,
#ccm-club-comparison-stats-table thead,
#ccm-completed-ride-table thead,
.ccm-event-table thead {
	background-color: var(--bx-color-bg-page, #ffffff) !important;
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 1px 0 var(--bx-color-border, #adb5bd);
}

/* Table header cells - override Bootstrap table styles */
#ccm-club-stats-table thead th,
#ccm-club-comparison-stats-table thead th,
#ccm-completed-ride-table thead th,
.ccm-event-table thead th {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-page, #ffffff) !important;
	border-color: var(--bx-color-border, #adb5bd) !important;
	border-bottom: 1px solid var(--bx-color-border, #adb5bd) !important;
	font-weight: 600;
	padding: 12px 8px;
}

/* Text alignment utilities */
#ccm-club-stats-table thead th.header,
#ccm-club-comparison-stats-table thead th.header,
#ccm-completed-ride-table thead th.header,
.ccm-event-table thead th.header {
	text-align: start;
}

/* Table body rows - Bootstrap will use our CSS variables now */
#ccm-club-stats-table tbody tr,
#ccm-club-comparison-stats-table tbody tr,
#ccm-completed-ride-table tbody tr,
.ccm-event-table tbody tr {
	border-bottom: 1px solid var(--bx-color-border, #adb5bd);
}

/* Table cells - Bootstrap's .table> rules will now use our --bs-table-* variables */
#ccm-club-stats-table tbody td,
#ccm-club-comparison-stats-table tbody td,
#ccm-completed-ride-table tbody td,
.ccm-event-table tbody td {
	padding: 10px 8px;
}

/* Hover state for better interactivity */
#ccm-club-stats-table tbody tr:hover,
#ccm-club-comparison-stats-table tbody tr:hover,
#ccm-completed-ride-table tbody tr:hover,
.ccm-event-table tbody tr:hover {
	background-color: var(--bx-color-bg-muted, #f5f5f4) !important;
}

/* Text alignment utilities - ensure they override Bootstrap */
#ccm-club-stats-table .text-end,
#ccm-club-comparison-stats-table .text-end,
#ccm-completed-ride-table .text-end,
.ccm-event-table .text-end {
	text-align: end !important;
}

#ccm-club-stats-table .text-start,
#ccm-club-comparison-stats-table .text-start,
#ccm-completed-ride-table .text-start,
.ccm-event-table .text-start {
	text-align: start !important;
}

/* Responsive containers - with adaptive scrollbar matching table background */
#ccm-club-stats-list.table-responsive,
#ccm-club-comparison-stats-list.table-responsive,
#ccm-completed-ride-list.table-responsive {
	height: 75vh;
}

#ccm-club-rides .table-responsive {
	height: 70vh;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;

	/* Firefox scrollbar styling */
	scrollbar-color: var(--bx-color-border, #d1d5db) var(--bx-color-bg-page, #ffffff);
	scrollbar-width: thin;
}

/* Chrome/Edge/Safari scrollbar - track and thumb */
#ccm-club-stats-list.table-responsive::-webkit-scrollbar,
#ccm-club-comparison-stats-list.table-responsive::-webkit-scrollbar,
#ccm-completed-ride-list.table-responsive::-webkit-scrollbar,
#ccm-club-rides .table-responsive::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

#ccm-club-stats-list.table-responsive::-webkit-scrollbar-track,
#ccm-club-comparison-stats-list.table-responsive::-webkit-scrollbar-track,
#ccm-completed-ride-list.table-responsive::-webkit-scrollbar-track,
#ccm-club-rides .table-responsive::-webkit-scrollbar-track {
	background-color: var(--bx-color-bg-page, #ffffff);
	border-radius: 5px;
}

#ccm-club-stats-list.table-responsive::-webkit-scrollbar-thumb,
#ccm-club-comparison-stats-list.table-responsive::-webkit-scrollbar-thumb,
#ccm-completed-ride-list.table-responsive::-webkit-scrollbar-thumb,
#ccm-club-rides .table-responsive::-webkit-scrollbar-thumb {
	background-color: var(--bx-color-border, #d1d5db);
	border-radius: 5px;
}

#ccm-club-stats-list.table-responsive::-webkit-scrollbar-thumb:hover,
#ccm-club-comparison-stats-list.table-responsive::-webkit-scrollbar-thumb:hover,
#ccm-completed-ride-list.table-responsive::-webkit-scrollbar-thumb:hover,
#ccm-club-rides .table-responsive::-webkit-scrollbar-thumb:hover {
	background-color: var(--bx-color-border-strong, #9ca3af);
}

/* Total row styling - uses theme colors for dark/light mode support */
/* Higher specificity required to override bootstrap-tables.css rules */
#ccm-club-stats-table tr.ccm-total-row>*,
#ccm-club-comparison-stats-table tr.ccm-total-row>*,
#ccm-completed-ride-table tr.ccm-total-row>* {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-page, #ffffff) !important;
	border-color: var(--bx-color-border, #adb5bd) !important;
	border-top-color: var(--bx-color-border-strong, #404040) !important;
	border-top-width: 2px !important;
	/* Override Bootstrap's CSS variables that power the inset box-shadow */
	--bs-table-bg-type: var(--bx-color-bg-page, #ffffff) !important;
	--bs-table-bg-state: var(--bx-color-bg-page, #ffffff) !important;
}

/* Event table specific styling - ride results tables */

/* Event header and subtitle - dark/light mode support */
.ccm-event-table thead tr:first-child {
	border: none;
}

.ccm-event-table thead tr:first-child th {
	border: none;
	padding: 12px 8px 0;
}

.ccm-event-table thead tr:first-child h3 {
	color: var(--bx-color-fg, #1f2937) !important;
	margin: 0.5em 0 0.1em;
}

.ccm-event-table thead tr:first-child h3 a {
	color: var(--site-text-primary, #1f2937);
	text-decoration: none;
}

.ccm-event-table thead tr:first-child h3 a:hover {
	color: var(--site-link-hover, #e85192);
	text-decoration: none;
}

/* Event subtitle - use muted text color from theme */
.ccm-event-subtitle {
	color: var(--bx-color-fg-muted, #6b7280) !important;
	font-size: 0.85em;
	padding-bottom: 0.25em;
}

/* Team header rows - distinct visual styling with theme colors & sticky positioning */
.ccm-event-table tbody tr.ccm-team-header {
	position: sticky;
	top: var(--ccm-event-thead-height, 4.5em);
	z-index: 1;
	background-color: var(--bx-color-bg-muted, #f5f5f4) !important;
	border-top: 2px solid var(--bx-color-border-strong, #404040);
	border-bottom: 1px solid var(--bx-color-border, #adb5bd);
}

.ccm-event-table tbody tr.ccm-team-header td {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-muted, #f5f5f4) !important;
	padding: 12px 8px;
	/* Neutralize table-striped's --bs-table-bg-type override on odd rows so the
	   team-header background is always consistent regardless of row parity. */
	--bs-table-bg-type: transparent;
}

/* Team name - make it semibold */
.ccm-event-table tbody tr.ccm-team-header .fw-semibold {
	font-weight: 600 !important;
	color: var(--bx-color-fg, #1f2937) !important;
}

/* Team subtitle - muted styling */
.ccm-team-subtitle {
	color: var(--bx-color-fg-subtle, #6b7280) !important;
	font-size: 0.85em;
}

/* Override Bootstrap's text-muted to use theme colors */
.ccm-event-table .text-muted {
	color: var(--bx-color-fg-subtle, #6b7280) !important;
}

/* Year selector styling - ensure it uses theme colors */
.ccm-year-label {
	color: var(--bx-color-fg, #1f2937) !important;
	font-size: 1rem;
}

.ccm-year-select {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-page, #ffffff) !important;
	border-color: var(--bx-color-border, #adb5bd) !important;
	height: 2.1875rem;
}

.ccm-year-select:focus {
	color: var(--bx-color-fg, #1f2937) !important;
	background-color: var(--bx-color-bg-page, #ffffff) !important;
	border-color: var(--bx-color-link, #1e73be) !important;
	box-shadow: 0 0 0 0.25rem rgba(30, 115, 190, 0.25);
}

/* Sort headers - ride results specific styling */
.ccm-sort-col {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.ccm-sort-col:hover {
	color: var(--site-link-hover, #e85192);
}

.ccm-sort-col.ccm-sort-active {
	color: var(--site-text-primary, #1f2937);
}

.ccm-sort-indicator {
	font-size: 0.75em;
	opacity: 0.6;
}

.ccm-sort-col.ccm-sort-active .ccm-sort-indicator {
	opacity: 1;
}

.w-auto {
	width: auto;
}