/* Black Sheep Run - Main Stylesheet */
/* Dark theme based on logo colors */

/* ============================================================================
   CSS Variables
   ============================================================================ */

:root
{
	/* Colors */
	--bg-primary: #000000;
	--bg-secondary: #111111;
	--bg-card: #1a1a1a;
	--bg-input: #222222;
	--text-primary: #ffffff;
	--text-secondary: #aaaaaa;
	--text-muted: #666666;
	--border-color: #333333;
	--accent: #4a9eff;
	--accent-hover: #6bb3ff;
	--success: #22c55e;
	--error: #ef4444;
	--warning: #f59e0b;

	/* Typography */
	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-size-xs: 13px;
	--font-size-base: 16px;
	--font-size-sm: 14px;
	--font-size-lg: 18px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--letter-spacing: 0.02em;

	/* Spacing */
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Transitions */
	--transition: 0.2s ease;
}

/* ============================================================================
   Reset & Base
   ============================================================================ */

*,
*::before,
*::after
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html
{
	font-size: var(--font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body
{
	font-family: var(--font-family);
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	letter-spacing: var(--letter-spacing);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

a
{
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover
{
	color: var(--accent-hover);
}

img
{
	max-width: 100%;
	height: auto;
}

/* ============================================================================
   Layout
   ============================================================================ */

.container
{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.main-content
{
	flex: 1;
	padding: var(--spacing-xl) 0;
}

/* ============================================================================
   Header
   ============================================================================ */

.site-header
{
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border-color);
	padding: var(--spacing-md) 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-container
{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-md);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-lg);
}

.logo-link
{
	display: flex;
	align-items: center;
}

.logo
{
	height: 40px;
	width: auto;
}

.main-nav
{
	display: flex;
	gap: var(--spacing-md);
}

.nav-link
{
	color: var(--text-secondary);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-md);
	transition: all var(--transition);
}

.nav-link:hover
{
	color: var(--text-primary);
	background-color: var(--bg-card);
}

.nav-link.active
{
	color: var(--text-primary);
	background-color: var(--bg-card);
}

.user-menu
{
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding-left: var(--spacing-2xl);
	margin-left: calc(-1 * var(--spacing-2xl));
}

.user-menu-toggle
{
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}

.user-dropdown
{
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	padding-top: var(--spacing-sm);
	min-width: 170px;
	z-index: 100;
}

.user-dropdown-menu
{
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.user-menu:hover .user-dropdown,
.user-dropdown.show
{
	display: block;
}

.user-dropdown.force-hide
{
	display: none !important;
}

.user-dropdown-item
{
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: all var(--transition);
}

.user-dropdown-item:hover
{
	color: var(--text-primary);
	background: var(--bg-card);
}

/* Admin dropdown menu */
.admin-menu
{
	position: relative;
	display: flex;
	align-items: center;
}

.admin-menu > .nav-link
{
	cursor: pointer;
}

.admin-dropdown
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	padding-top: var(--spacing-sm);
	min-width: 190px;
	z-index: 100;
}

.admin-dropdown-menu
{
	background: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.admin-menu:hover .admin-dropdown
{
	display: block;
}

.admin-dropdown-item
{
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--text-secondary);
	text-decoration: none;
	transition: all var(--transition);
}

.admin-dropdown-item:hover
{
	color: var(--text-primary);
	background: var(--bg-secondary);
}

.user-link
{
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-primary);
}

.user-avatar
{
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	border: 1px solid white;
	object-fit: cover;
}

.user-avatar-placeholder
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-input);
	color: var(--text-muted);
	font-weight: 600;
	font-size: 14px;
}

.user-name
{
	font-weight: 500;
}

.logout-link
{
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.logout-link:hover
{
	color: var(--error);
}

/* ============================================================================
   Footer
   ============================================================================ */

.site-footer
{
	background-color: var(--bg-secondary);
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-lg) 0;
	text-align: center;
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

.site-footer a
{
	color: var(--text-muted);
}

.site-footer a:hover
{
	color: var(--text-primary);
}

/* ============================================================================
   Alerts
   ============================================================================ */

.alert
{
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-lg);
}

.alert-error
{
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--error);
	color: var(--error);
}

.alert-success
{
	background-color: rgba(34, 197, 94, 0.1);
	border: 1px solid var(--success);
	color: var(--success);
}

.alert-warning
{
	background-color: rgba(245, 158, 11, 0.1);
	border: 1px solid var(--warning);
	color: var(--warning);
}

/* ============================================================================
   Cards
   ============================================================================ */

.card
{
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
}

.card-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

.card-title
{
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin: 0;
}

/* ============================================================================
   Buttons
   ============================================================================ */

.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-sm) var(--spacing-lg);
	border: none;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--font-size-base);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition);
	text-decoration: none;
}

.btn-primary
{
	background-color: var(--accent);
	color: var(--bg-primary);
}

.btn-primary:hover
{
	background-color: var(--accent-hover);
	color: var(--bg-primary);
}

.btn-secondary
{
	background-color: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
}

.btn-secondary:hover
{
	background-color: var(--bg-card);
	color: var(--text-primary);
}

.btn-danger
{
	background-color: var(--error);
	color: var(--text-primary);
}

.btn-danger:hover
{
	background-color: #dc2626;
	color: var(--text-primary);
}

.btn-success
{
	background-color: var(--success);
	color: var(--bg-primary);
}

.btn-success:hover
{
	background-color: #16a34a;
	color: var(--bg-primary);
}

.btn-sm
{
	padding: var(--spacing-xs) var(--spacing-md);
	font-size: var(--font-size-sm);
}

.btn-xs
{
	padding: 2px var(--spacing-sm);
	font-size: 12px;
}

.btn-lg
{
	padding: var(--spacing-md) var(--spacing-xl);
	font-size: var(--font-size-lg);
}

.btn-facebook
{
	background-color: #1877f2;
	color: #ffffff;
}

.btn-facebook:hover
{
	background-color: #166fe5;
	color: #ffffff;
}

/* ============================================================================
   Forms
   ============================================================================ */

.form-group
{
	margin-bottom: var(--spacing-lg);
}

.form-label
{
	display: block;
	margin-bottom: var(--spacing-sm);
	font-weight: 500;
	color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select
{
	width: 100%;
	padding: var(--spacing-sm) var(--spacing-md);
	background-color: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--font-size-base);
	transition: border-color var(--transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus
{
	outline: none;
	border-color: var(--accent);
}

.form-input::placeholder,
.form-textarea::placeholder
{
	color: var(--text-muted);
}

.form-textarea
{
	min-height: 120px;
	resize: vertical;
}

.form-input-static
{
	padding: var(--spacing-sm) 0;
	color: var(--text-secondary);
}

.form-hint
{
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.form-error
{
	margin-top: var(--spacing-xs);
	font-size: var(--font-size-sm);
	color: var(--error);
}

.form-actions
{
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-xl);
}

/* ============================================================================
   Tables
   ============================================================================ */

.table-container
{
	overflow-x: auto;
}

.table
{
	width: 100%;
	border-collapse: collapse;
}

.table th,
.table td
{
	padding: var(--spacing-md);
	text-align: left;
	border-bottom: 1px solid var(--border-color);
}

.table th
{
	font-weight: 600;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.table tr:hover td
{
	background-color: var(--bg-card);
}

.table tr.clickable-row
{
	cursor: pointer;
}

.table tr.clickable-row:hover td
{
	background-color: var(--bg-secondary);
}

/* Admin tables - don't hide columns */
.table.admin-table th:nth-child(4),
.table.admin-table td:nth-child(4)
{
	display: table-cell;
}

/* Pending users responsive layouts */
.pending-users-mobile
{
	display: none;
}

.pending-users-desktop
{
	display: block;
}

.pending-user-actions,
.admin-user-actions
{
	display: flex;
	gap: var(--spacing-sm);
	flex-direction: row;
}

/* ============================================================================
   Page Headers
   ============================================================================ */

.page-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xl);
}

.page-title
{
	font-size: var(--font-size-2xl);
	font-weight: 700;
	margin: 0;
}

.page-subtitle
{
	color: var(--text-secondary);
	margin-top: var(--spacing-sm);
}

.back-link-container
{
	/* CURRENTLY HIDDEN */
	display: none;
	margin: 0 0 var(--spacing-md) 0;
}

/* ============================================================================
   Race Cards - Compact (used on dashboard)
   ============================================================================ */

.race-list-compact
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.race-card-compact
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
	transition: border-color var(--transition), background-color var(--transition);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.race-card-compact:hover
{
	border-color: var(--accent);
	background-color: var(--bg-secondary);
}

.race-card-left
{
	flex: 1;
	min-width: 0;
}

.race-card-title
{
	font-size: var(--font-size-lg);
	font-weight: 600;
	color: var(--accent);
	margin-bottom: var(--spacing-xs);
}

.race-card-meta
{
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.race-card-right
{
	text-align: right;
	flex-shrink: 0;
	margin-left: var(--spacing-md);
}

.race-card-counts
{
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.race-card-buttons
{
	display: flex;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xs);
	justify-content: flex-end;
}

/* ============================================================================
   Race Cards - Full (legacy, kept for compatibility)
   ============================================================================ */

.race-list
{
	display: grid;
	gap: var(--spacing-lg);
}

.race-card
{
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	padding: var(--spacing-lg);
	transition: border-color var(--transition);
}

.race-card:hover
{
	border-color: var(--accent);
}

.race-card-header
{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--spacing-md);
}

.race-name
{
	font-size: var(--font-size-xl);
	font-weight: 600;
	margin: 0;
}

.race-name a
{
	color: var(--accent);
}

.race-name a:hover
{
	color: var(--accent-hover);
}

.race-date
{
	background-color: var(--bg-input);
	padding: var(--spacing-xs) var(--spacing-sm);
	border-radius: var(--radius-sm);
	font-size: var(--font-size-sm);
	color: var(--text-primary);
	font-weight: 500;
}

.race-meta
{
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-sm);
}

.race-participants
{
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* ============================================================================
   Race Table (compact list view)
   ============================================================================ */

.race-table-container
{
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.race-table
{
	width: 100%;
	border-collapse: collapse;
}

.race-table thead
{
	background-color: var(--bg-secondary);
}

.race-table th
{
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: left;
	font-weight: 600;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid var(--border-color);
}

.race-table td
{
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

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

.race-row
{
	cursor: pointer;
	transition: background-color var(--transition);
}

.race-row:hover
{
	background-color: var(--bg-secondary);
}

.race-table-date
{
	width: 80px;
	white-space: nowrap;
	color: var(--text-secondary);
}

.race-table-name
{
	font-weight: 500;
}

.race-table-name a
{
	color: var(--accent);
}

.race-table-name a:hover
{
	color: var(--accent-hover);
}

.race-table-location
{
	color: var(--text-secondary);
}

.race-table-going,
.race-table-interested
{
	width: 50px;
	text-align: center;
	color: var(--text-muted);
}

.race-table-chat
{
	display: none;
}

/* Hide messenger link on desktop */
.race-messenger-link
{
	display: none;
}

/* Races page responsive layouts */
.races-cards
{
	display: none;
}

.races-table
{
	display: block;
}

.race-card-mobile
{
	display: flex;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--transition);
}

.race-card-mobile:hover
{
	background-color: var(--bg-secondary);
}

.race-card-mobile-date
{
	flex-shrink: 0;
	width: 70px;
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
}

.race-card-mobile-content
{
	flex: 1;
	min-width: 0;
}

.race-card-mobile-name
{
	font-weight: 500;
	color: var(--accent);
	margin-bottom: 2px;
}

.race-card-mobile-meta
{
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

.race-card-mobile-chat
{
	color: var(--accent);
	margin-left: var(--spacing-sm);
	cursor: pointer;
}

.race-card-mobile-chat:hover
{
	color: var(--accent-hover);
}

.join-race-buttons
{
	display: flex;
	gap: var(--spacing-sm);
}

/* ============================================================================
   User Race List (compact view on profile)
   ============================================================================ */

.user-race-item
{
	display: flex;
	align-items: baseline;
	gap: var(--spacing-md);
}

.user-race-date
{
	width: 100px;
	flex-shrink: 0;
	color: var(--text-secondary);
	white-space: nowrap;
}

.user-race-item a
{
	flex: 1;
	font-weight: 500;
}

.user-race-status
{
	flex-shrink: 0;
	color: var(--text-secondary);
	white-space: nowrap;
}

/* ============================================================================
   User Cards / List
   ============================================================================ */

.user-grid
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--spacing-lg);
}

/* Members Table (desktop) */
.member-table-container
{
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.member-table
{
	width: 100%;
	border-collapse: collapse;
}

.member-table thead
{
	background-color: var(--bg-secondary);
}

.member-table th
{
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: left;
	font-weight: 600;
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.member-table td
{
	padding: var(--spacing-sm) var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

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

.member-row
{
	cursor: pointer;
	transition: background-color var(--transition);
}

.member-row:hover
{
	background-color: var(--bg-secondary);
}

.member-table-name
{
	font-weight: 500;
}

.member-table-name a
{
	color: var(--accent);
}

.member-table-name a:hover
{
	color: var(--accent-hover);
}

.member-table-location
{
	color: var(--text-secondary);
}

.member-table-going,
.member-table-interested
{
	width: 50px;
	text-align: center;
	color: var(--text-muted);
}

.admin-badge
{
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: 500;
	color: var(--success);
	margin-left: var(--spacing-sm);
}

/* Members Cards (mobile) */
.members-cards
{
	display: none;
}

.members-table
{
	display: block;
}

.member-card-mobile
{
	display: block;
	padding: var(--spacing-md);
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-sm);
	transition: background-color var(--transition);
}

.member-card-mobile:hover
{
	background-color: var(--bg-secondary);
}

.member-card-mobile-name
{
	font-weight: 500;
	color: var(--accent);
	margin-bottom: 2px;
}

.member-card-mobile-location
{
	font-size: var(--font-size-sm);
	color: var(--text-secondary);
	margin-bottom: 2px;
}

.member-card-mobile-location:empty
{
	display: none;
}

.member-card-mobile-meta
{
	font-size: var(--font-size-sm);
	color: var(--text-muted);
}

/* Sortable Table Headers */
.sortable-table th.sortable
{
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 24px;
}

.sortable-table th.sortable:hover
{
	color: var(--accent);
}

.sortable-table th.sortable::after
{
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-top-color: var(--text-muted);
	opacity: 0.3;
	margin-top: 3px;
}

.sortable-table th.sortable.sort-asc::after
{
	border-top-color: transparent;
	border-bottom-color: var(--accent);
	margin-top: -3px;
	opacity: 1;
}

.sortable-table th.sortable.sort-desc::after
{
	border-top-color: var(--accent);
	opacity: 1;
}

/* ============================================================================
   Participant List
   ============================================================================ */

.participant-list
{
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
}

.participant
{
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	background-color: var(--bg-input);
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: var(--radius-full);
}

.participant-avatar
{
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.profile-avatar
{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	object-fit: cover;
}

.participant-name
{
	font-weight: 500;
}

.participant-notes
{
	color: var(--text-muted);
	font-size: var(--font-size-sm);
}

/* ============================================================================
   Login Page
   ============================================================================ */

.login-page
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
	text-align: center;
}

.login-logo
{
	max-width: 300px;
	margin-bottom: var(--spacing-xl);
}

.login-title
{
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-md);
}

.login-subtitle
{
	color: var(--text-secondary);
	margin-bottom: var(--spacing-xl);
}

/* ============================================================================
   Pending Page
   ============================================================================ */

.pending-page
{
	text-align: center;
	padding: var(--spacing-2xl) 0;
}

.pending-icon
{
	font-size: 64px;
	margin-bottom: var(--spacing-lg);
}

.pending-title
{
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-md);
}

.pending-text
{
	color: var(--text-secondary);
	max-width: 500px;
	margin: 0 auto;
}

/* ============================================================================
   Dashboard
   ============================================================================ */

.dashboard-grid
{
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--spacing-xl);
}

@media (max-width: 900px)
{
	.dashboard-grid
	{
		grid-template-columns: 1fr;
	}
}

.section-title
{
	font-size: var(--font-size-lg);
	font-weight: 600;
	margin-bottom: var(--spacing-lg);
}

.section-title:has(a)
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-title a
{
	font-size: var(--font-size-lg);
	font-weight: 500;
	color: var(--accent);
}

/* My Races (Dashboard) */
.my-races-list
{
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.my-race-card
{
	background-color: var(--bg-card);
	border-radius: var(--radius-md);
	padding: var(--spacing-md);
}

.my-race-header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-xs);
}

.my-race-title
{
	font-weight: 600;
	font-size: var(--font-size-lg);
	color: var(--accent);
}

.my-race-status
{
	font-size: var(--font-size-sm);
	padding: 2px 8px;
	border-radius: var(--radius-sm);
}

.my-race-status.status-going
{
	background-color: rgba(34, 197, 94, 0.2);
	color: var(--success);
}

.my-race-status.status-interested
{
	background-color: rgba(74, 158, 255, 0.2);
	color: var(--accent);
}

.my-race-meta
{
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-sm);
}

.my-race-participants
{
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
}

.participants-label
{
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	margin-right: var(--spacing-xs);
}

.participant-avatar
{
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.participant-avatar-placeholder
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-secondary);
	color: var(--text-muted);
	font-size: 12px;
}

.participant-more
{
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	margin-left: var(--spacing-xs);
}

/* Activity Items (Dashboard) */
.activity-item
{
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
}

.activity-item:last-child
{
	padding-bottom: 0;
	border-bottom: none;
}

.activity-avatar
{
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.activity-avatar-placeholder
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-secondary);
	color: var(--text-muted);
	font-size: 14px;
}

.activity-content
{
	flex: 1;
	min-width: 0;
}

.activity-race
{
	font-weight: 500;
}

.activity-meta
{
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.activity-stats
{
	font-size: var(--font-size-sm);
}

/* ============================================================================
   Empty States
   ============================================================================ */

.empty-state
{
	text-align: center;
	padding: var(--spacing-2xl);
	color: var(--text-secondary);
}

.empty-state-icon
{
	font-size: 48px;
	margin-bottom: var(--spacing-md);
	opacity: 0.5;
}

.empty-state-text
{
	margin-bottom: var(--spacing-lg);
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

.text-muted
{
	color: var(--text-muted);
}

.text-secondary
{
	color: var(--text-secondary);
}

.text-accent
{
	color: #4ade80;
}

.text-link
{
	color: var(--accent);
}

.text-success
{
	color: var(--success);
}

.text-error
{
	color: var(--error);
}

.text-center
{
	text-align: center;
}

.text-right
{
	text-align: right;
}

.mb-0
{
	margin-bottom: 0;
}

.mb-sm
{
	margin-bottom: var(--spacing-sm);
}

.mb-md
{
	margin-bottom: var(--spacing-md);
}

.mb-lg
{
	margin-bottom: var(--spacing-lg);
}

.mb-xl
{
	margin-bottom: var(--spacing-xl);
}

.mt-lg
{
	margin-top: var(--spacing-lg);
}

.flex
{
	display: flex;
}

.flex-between
{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gap-sm
{
	gap: var(--spacing-sm);
}

.gap-md
{
	gap: var(--spacing-md);
}

/* ============================================================================
   Responsive
   ============================================================================ */

/* Header breakpoint - switches at 900px */
@media (max-width: 900px)
{
	.header-container
	{
		flex-wrap: wrap;
	}

	.main-nav
	{
		order: 3;
		width: 100%;
		justify-content: center;
		padding-top: var(--spacing-md);
		border-top: 1px solid var(--border-color);
		margin-top: var(--spacing-md);
		gap: 2px;
		flex-wrap: nowrap;
	}

	.nav-link
	{
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--font-size-xs);
		white-space: nowrap;
	}

	.user-menu
	{
		gap: var(--spacing-sm);
	}

	.user-name
	{
		display: none;
	}

	.logo
	{
		height: 32px;
	}

	.admin-dropdown
	{
		left: auto;
		right: 0;
	}
}

/* General mobile breakpoint */
@media (max-width: 768px)
{
	/* Page Layout */
	.page-header
	{
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-md);
	}

	.page-title
	{
		font-size: var(--font-size-xl);
	}

	/* Race Cards */
	.race-card-header
	{
		flex-direction: column;
		gap: var(--spacing-sm);
		align-items: flex-start;
	}

	.race-name
	{
		font-size: var(--font-size-lg);
	}

	/* Races list - show cards by default on mobile, allow toggle */
	.races-cards
	{
		display: block;
	}

	.races-table
	{
		display: none;
	}

	/* Simplified mobile table - fewer columns */
	.races-table .race-table-location
	{
		display: none;
	}

	/* Race Detail Page */
	.race-messenger-link
	{
		display: block;
	}

	.flex-between
	{
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-md);
	}

	.flex-between form
	{
		flex-direction: column;
	}

	.flex-between form .form-input
	{
		width: 100% !important;
	}

	/* User Grid */
	.user-grid
	{
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: var(--spacing-sm);
	}

	/* Members - show cards, hide table on mobile */
	.members-cards
	{
		display: block;
	}

	.members-table
	{
		display: none;
	}

	/* Profile avatar */
	.profile-avatar
	{
		width: 120px;
		height: 120px;
	}

	.profile-location,
	.profile-admin
	{
		text-align: center;
	}

	/* Admin pending users - show mobile, hide desktop */
	.pending-users-mobile
	{
		display: block;
	}

	.pending-users-desktop
	{
		display: none;
	}

	/* Participant List */
	.participant-list
	{
		gap: var(--spacing-sm);
	}

	.participant
	{
		padding: var(--spacing-xs) var(--spacing-sm);
	}

	.participant-avatar
	{
		width: 24px;
		height: 24px;
	}

	.participant-name
	{
		font-size: var(--font-size-sm);
	}

	.participant-notes
	{
		display: none;
	}

	/* Forms */
	.form-actions
	{
		flex-direction: column;
	}

	.btn
	{
		width: 100%;
	}

	/* Cards */
	.card
	{
		padding: var(--spacing-md);
	}

	/* Flex utilities */
	.flex.gap-md
	{
		flex-direction: column;
		width: 100%;
	}

	/* Section titles */
	.section-title
	{
		font-size: var(--font-size-base);
	}

	.section-title:has(a)
	{
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-sm);
	}

	/* Tables */
	.table th,
	.table td
	{
		padding: var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.table th:nth-child(4),
	.table td:nth-child(4),
	.table th:nth-child(5),
	.table td:nth-child(5)
	{
		display: none;
	}

	.table .btn-sm
	{
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: 12px;
	}
}

@media (max-width: 480px)
{
	/* Extra small screens */
	.main-nav
	{
		flex-wrap: wrap;
	}

	.container
	{
		padding: 0 var(--spacing-sm);
	}

	.main-content
	{
		padding: var(--spacing-md) 0;
	}

	.page-title
	{
		font-size: var(--font-size-lg);
	}

	.race-name
	{
		font-size: var(--font-size-base);
	}

	.user-grid
	{
		grid-template-columns: 1fr 1fr;
	}

	.empty-state
	{
		padding: var(--spacing-lg);
	}
}

/* ============================================
   Map Styles
   ============================================ */

.map-container
{
	width: 100%;
	height: calc(100vh - 200px);
	min-height: 400px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.map-popup
{
	min-width: 180px;
}

.map-popup-title
{
	font-weight: 600;
	margin-bottom: 4px;
	color: #1a1a1a;
}

.map-popup-meta
{
	color: #666;
	font-size: 0.875rem;
	margin-bottom: 2px;
}

.map-popup-link
{
	margin-top: 8px;
}

.leaflet-container .map-popup-link .btn
{
	background-color: var(--accent);
	color: var(--bg-primary);
}

.leaflet-container .map-popup-link .btn:hover
{
	background-color: var(--accent-hover);
	color: var(--bg-primary);
}

/* Marker cluster styling */
.leaflet-container .marker-cluster-small,
.leaflet-container .marker-cluster-medium,
.leaflet-container .marker-cluster-large
{
	background-color: rgba(74, 158, 255, 0.4) !important;
}

.leaflet-container .marker-cluster-small div,
.leaflet-container .marker-cluster-medium div,
.leaflet-container .marker-cluster-large div
{
	background-color: var(--accent) !important;
	color: var(--bg-primary);
	font-weight: 600;
}

/* ============================================================================
   jQuery UI Dialog Overrides
   ============================================================================ */

.ui-dialog
{
	background-color: var(--bg-card);
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	padding: 0;
}

.ui-dialog .ui-dialog-titlebar
{
	background-color: var(--accent);
	color: var(--bg-primary);
	border: none;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding: var(--spacing-md);
}

.ui-dialog .ui-dialog-title
{
	color: var(--bg-primary);
	font-weight: 600;
}

.ui-dialog .ui-dialog-titlebar-close
{
	background: transparent;
	border: none;
	color: var(--bg-primary);
}

.ui-dialog .ui-dialog-titlebar-close:hover
{
	background: rgba(0, 0, 0, 0.2);
}

.ui-dialog .ui-dialog-content
{
	background-color: var(--bg-card) !important;
	color: var(--text-primary) !important;
	padding: var(--spacing-lg);
}

.ui-dialog .ui-widget-content
{
	background-color: var(--bg-card) !important;
	color: var(--text-primary) !important;
}

.ui-dialog .ui-dialog-buttonpane
{
	background-color: var(--bg-card) !important;
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-md) var(--spacing-lg);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button
{
	background-color: var(--accent);
	color: var(--bg-primary);
	border: none;
	border-radius: var(--radius-sm);
	padding: var(--spacing-sm) var(--spacing-md);
	font-weight: 500;
	cursor: pointer;
	margin-left: var(--spacing-sm);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover
{
	background-color: var(--accent-hover);
}

/* Location change link */
.location-change-link
{
	margin-left: var(--spacing-sm);
	font-size: var(--font-size-sm);
	color: var(--accent);
}

/* Location updated hint - more prominent than regular hints */
.location-hint
{
	color: var(--success);
	font-weight: 500;
	margin-top: var(--spacing-sm);
}