:root {
	/* Modern theme variables to match design/layout1a.php */
	--primary-green: #3d931b;
	--secondary-green: #397a1f;
	--primary-blue: #131248;
	--secondary-blue: #141268;
	--light-gray: #e9e9e9;
	--dark-gray: #6c757d;
	--shadow: 0 2px 10px rgba(0,0,0,0.1);
	--border-radius: 12px;
	/* --header-height: 70px; */
	/* --header-img-height: 32px; */
	--header-height: 100px;
	--header-img-height: 50px;
	--card-img-height: 288px;
	--card-ratio: 1294/288;
	--card-slim-img-height: 142px;
	--card-slim-ratio: 638/142;
	--card-tall-img-height: 400px;
	--card-tall-ratio: 638/400;
}

.nav-masthead .nav-link {
  /* Modernized to match layout1a header look */
	background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: 0;
  padding: 0.5rem 1rem!important;
  border-radius: 25px;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .nav-link.active {
  color:  var(--primary-blue);
  background: rgba(255, 255, 255, 0.5);
  border: 0;
}

/* =============================
   Modern UI overrides for MyPools
   Align look with design/layout1a.php
   Safe to transfer to production
   ============================= */

/* Base + Typography */
body,
#body-frontend {
  font-family: "Open Sans", var(--bs-body-font-family);
  background: var(--light-gray);
  min-height: 100vh;
}

/* Header - convert Bootstrap navbar to gradient header */
header.navbar {
  background: linear-gradient(90deg, var(--primary-green) 0%, #2d7a2d 30%, #1a5d8a 70%, var(--primary-blue) 100%);
  color: #fff;
  box-shadow: var(--shadow);
  border-bottom: 0 !important;
	z-index: 1040;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(61, 147, 27, 0.15) 2px, rgba(61, 147, 27, 0.15) 4px), repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(19, 18, 72, 0.15) 2px, rgba(19, 18, 72, 0.15) 4px);
		background-size: 40px 40px, 40px 40px;
		opacity: 0.4;
		z-index: 1;
		border-radius: 0;
	}
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: 
			radial-gradient(ellipse at 30% 30%, rgba(76, 175, 80, 0.2) 0%, transparent 50%),
			radial-gradient(ellipse at 70% 20%, rgba(76, 175, 80, 0.3) 0%, transparent 50%),
			radial-gradient(ellipse at 80% 60%, rgba(19, 18, 72, 0.25) 0%, transparent 50%),
			radial-gradient(ellipse at 90% 40%, rgba(61, 147, 27, 0.2) 0%, transparent 50%),
			radial-gradient(ellipse at 20% 70%, rgba(19, 18, 72, 0.2) 0%, transparent 50%);
		z-index: 2;
		pointer-events: none;
	}
}

header.navbar .navbar-brand {
  background: transparent !important;
}

/* Standings: make Google Charts background transparent via CSS */
#standingsTabContent .stats svg > rect:first-of-type,
#standingsTabContent [id^="pickedpiechart"] svg > rect:first-of-type,
#standingsTabContent .stats svg > rect[fill="#ffffff"],
#standingsTabContent [id^="pickedpiechart"] svg > rect[fill="#ffffff"],
#standingsTabContent .stats svg rect[fill="#fff"],
#standingsTabContent .stats svg rect[fill="white"],
#standingsTabContent .stats svg rect[fill^="rgb(255"],
#standingsTabContent .stats svg rect {
  fill: transparent !important;
  fill-opacity: 0 !important;
}
#standingsTabContent .stats svg,
#standingsTabContent [id^="pickedpiechart"] svg {
  background: transparent !important;
}
/* also apply if outside standingsTabContent for safety */
.stats[id^="stats"] svg > rect:first-of-type,
[id^="pickedpiechart"] svg > rect:first-of-type,
[id^="pickedpiechart"] svg rect[fill="#ffffff"],
[id^="pickedpiechart"] svg rect[fill="#fff"],
[id^="pickedpiechart"] svg rect[fill="white"],
[id^="pickedpiechart"] svg rect[fill^="rgb(255"],
[id^="pickedpiechart"] svg rect {
  fill: transparent !important;
  fill-opacity: 0 !important;
}
#standingsTabContent .stats,
#standingsTabContent [id^="pickedpiechart"] {
  background: transparent !important;
}

/* Header layout refinements to resemble layout1a.php */
header.navbar>.container-xl {
  height: var(--header-height);
	z-index: 100;
}

/* Logo sizing */
header.navbar .navbar-brand img {
  height: var(--header-img-height);
  width: auto;
}

/* Improve navbar toggler icon visibility on gradient */
header.navbar .navbar-toggler .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

.theme {
	--bs-heading-color: var(--primary-blue);
}
hr.theme {
	border-color: var(--primary-blue)!important;
}
.pool-filters {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: start;
}

.btn-cta {
	background: white;
	border: 2px solid var(--dark-gray);
	border-radius: var(--bs-border-radius);
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--dark-gray);
	text-decoration: none;
	&:hover {
		border-color: var(--primary-green);
		color: var(--primary-green);
		box-shadow: var(--bs-box-shadow-sm);
	}
	&.active {
		background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-green) 100%);
		color: white;
		border-color: var(--primary-green);
		box-shadow: 0 0.125rem 0.25rem rgba(61, 147, 27, 0.075);
		&:hover {
			background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue) 20%, var(--primary-green) 100%);
		}
	}
	&.btn-cta-sm {
		padding: 0.5rem 1rem;
	}
}

.btn-blue, .btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--secondary-blue);
	--bs-btn-border-color: var(--secondary-blue);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--primary-blue);
	--bs-btn-hover-border-color: var(--primary-blue);
	--bs-btn-focus-shadow-rgb: 211, 212, 213;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--primary-blue);
	--bs-btn-active-border-color: var(--primary-blue);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: var(--primary-blue);
	--bs-btn-disabled-border-color: var(--primary-blue);
	position: relative;
	overflow: hidden;
}
.btn-green, .btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--primary-green);
	--bs-btn-border-color: var(--primary-green);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--secondary-green);
	--bs-btn-hover-border-color: var(--secondary-green);
	--bs-btn-focus-shadow-rgb: 211, 212, 213;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--primary-blue);
	--bs-btn-active-border-color: var(--primary-blue);
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #000;
	--bs-btn-disabled-bg: var(--primary-green);
	--bs-btn-disabled-border-color: var(--primary-green);
	position: relative;
	overflow: hidden;
}

.text-blue {
	--bs-text-opacity: 1;
  color: var(--primary-blue);
}
.text-green {
	--bs-text-opacity: 1;
  color: var(--primary-green);
}
.table-text-blue {
	--bs-table-color: var(--primary-blue);
}
.table-text-green {
	--bs-table-color: var(--primary-green);
}

.pool-card {
	.pool-card-img {
		display: block;
	}
	.card-img-top {height:100%; width:100%;object-fit: cover;aspect-ratio: var(--card-slim-ratio);}
	.card-title {
		text-transform: uppercase;
		a {
			color: var(--bs-card-title-color);
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
		.title {
			font-weight: 700;
		}
		.subtitle {
			display:block;
			font-size: .7em;
			font-weight: 400;
		}
	}
	.card-img-overlay {
		transition: 0.1s all;
	}
	&:hover {
		.card-img-overlay {
			background: rgba(0,0,0,0.3);
		}
	}
}
#availablePools {
	.card-img-top {
		aspect-ratio: var(--card-tall-ratio);
	}
}
.pool-overview-card {
	.card-img-top {
		height: 100%;
		width: 100%;
		max-height: var(--card-img-height);
		object-fit: cover;
		aspect-ratio: var(--card-ratio);
	}
	.pool-summary {
		color: var(--bs-gray);
		span {
			font-weight: 700;
		}
		i {
			color: var(--primary-green);
		}
		.info a {
			text-decoration: none;
			color: var(--bs-gray);
		}
	}
	.card-title {
		color: var(--bs-card-title-color);
		margin-bottom: 0.75rem;
		i {
			color: var(--primary-green);
		}
		text-transform: uppercase;
		.title {
			font-weight: 900;
		}
		.subtitle {
			display:block;
			font-size: 15px;
			font-weight: 400;
		}
	}
	div > ul#pool-nav {
		border:none;
		align-items: center;
		justify-content: center;
	}
}
.text-bg-blue {
	color: #fff !important;
	background-color: var(--primary-blue);
}
.text-bg-green {
	color: #fff !important;
	background-color: var(--primary-green);
}
footer {
	background-color: var(--primary-blue);
	color: var(--light-gray);
	padding:100px 0;
	.footer-logo {
		width: 200px;
		height: auto;
	}
	a {
		color: var(--light-gray);
		text-decoration: none;
	}
	.footer-logo {
		height: var(--header-img-height);
		width: auto;
	}
	.social-links {
		a {
			margin: 0 0.5em;
		}
	}
}
.table-expand .inner {
	overflow:hidden;
	max-height:20rem;
	transition: all 0.5s;
}
.table-expand [data-toggle='expand'] {display:block;}
.table-expand [data-toggle='expand']:hover {
	background-color:var(--bs-light);
}
.pool-rules-card img {
	max-width: 100%;
}
.card-title {
	i.fa-solid, i.fas {
		color: var(--primary-green);
	}
	.archived {
		i.fa-solid, i.fas {
			color: inherit;
		}
	}
}
.auction-table {
	border: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
#navbarMenu {
	.navbar-toggler {
		background-color: rgba(255, 255, 255, 0.3);
		box-shadow: none!important;
	}
}
.floating-help {display: none;}