/* =========================================================
   GLOBAL TYPOGRAPHY & UTILITIES
   ========================================================= */

.small_text {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 10px;
	line-height: 10px;
	font-weight: 400;
	color: #333;
	margin: 0;
	padding: 0;
	margin-bottom: 2px;
	margin-top: 2px;
}

.error {
	background: #F2DEDE;
	color: #0c0101;
	padding: 10px;
	width: 95%;
	border-radius: 5px;
	margin: 20px auto;
}

/* ---------- Headings & Paragraphs ---------- */

p {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 24px;
	line-height: 28px;
	font-weight: 400;
	color: #333;
	margin: 0;
	padding: 0;
	margin-bottom: 12px;
}

h1 {
	text-transform: uppercase;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 32px;
	line-height: 32px;
	font-weight: 800;
	color: #df664c;
	margin: 0;
	padding: 16px 0 16px;
}

h2 {
	text-transform: uppercase;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 30px;
	line-height: 30px;
	font-weight: 800;
	color: #4caeb8;
	margin: 0;
	padding: 16px 0 34px;
	border-top: 1px solid #4caeb8;
}

/* Stats section headers (LAST 30 DAYS, LONGER VIEW) */
.stat-section-title,
.stat-section-subtitle {
	border-top: none !important;
	padding: 0 !important;           /* no extra padding from h2/h3 defaults */
	margin: 16px 0 4px 0 !important; /* same space above & a snug gap below */
}

/* Typography for stats section subtitle */
.stat-section-subtitle {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	font-weight: 700;
	color: #7aa6ad;
	text-transform: uppercase;
}

h3 {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 24px;
	line-height: 24px;
	font-weight: bold;
	color: #df664c;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
}

/* =========================================================
   FORMS & INPUTS
   ========================================================= */

input[type=password],
input[type=text],
input[type=email],
input[type=date] {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	background-color: rgb(204, 255, 255);
	color: black;
	width: 400px;
	height: 45px;
	border: 2px solid #ccc;
	border-radius: 4px;
}

input[type=radio] {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	color: black;
}

input[type=button],
input[type=submit],
input[type=reset] {
	background-color: #df664c;
	border: none;
	color: white;
	font-size: 14px;
	padding: 16px 32px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 12px;
}

textarea {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	width: 400px;
	height: 200px;
	padding: 5px 5px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: rgb(204, 255, 255);
	resize: none;
}

select {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	width: 400px;
	height: 45px;
	padding: 5px 5px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 4px;
	background-color: rgb(204, 255, 255);
	resize: none;
}

/* =========================================================
   TABLES
   ========================================================= */

th {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	background-color: rgb(0, 204, 255);
	color: white;
	text-align: center;
	padding: 15px;
}

td {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	padding: 5px;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

/* =========================================================
   COLLAPSIBLE SECTIONS
   ========================================================= */

.collapsible {
	background-color: #777;
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}

.active,
.collapsible:hover {
	background-color: #555;
}

.content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
}

/* =========================================================
   ADMIN DASHBOARD LAYOUT
   ========================================================= */

.admin-page {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	clear: both; /* keep all admin content below navbar floats */
}

.admin-header {
	text-align: center;
	margin-bottom: 24px;
}

.admin-subtitle {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	line-height: 20px;
	color: #333;
	margin: 0 0 24px 0;
}

/* ---------- Admin Grid & Cards ---------- */

.admin-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-bottom: 20px;
}

.admin-card {
	background-color: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Override default h2 inside admin cards (no border line) */
.admin-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

/* Smaller paragraph style inside admin cards */
.admin-card p {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	line-height: 20px;
	color: #555;
	margin: 0 0 10px 0;
}

/* Lists in admin cards – ensure they don't look like nav items */
.admin-card ul {
	margin: 0;
	padding-left: 18px;
	list-style-type: disc;
	background: transparent;
	overflow: visible;
	height: auto;
}

.admin-card li {
	margin-bottom: 6px;
	float: none;
	display: list-item;
}

.admin-card ul li a {
	display: inline;
	background: transparent;
	color: inherit;
	padding: 0;
	width: auto;
	text-align: left;
}

/* Tag badge for "Coming soon", etc. */
.admin-tag {
	display: inline-block;
	padding: 2px 6px;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 10px;
	line-height: 12px;
	border-radius: 999px;
	background-color: #df664c; /* matches h1 color */
	color: #ffffff;
	text-transform: uppercase;
	margin-left: 6px;
}

/* =========================================================
   RUNNER DASHBOARD LAYOUT (index.php)
   ========================================================= */

.dashboard-page {
	max-width: 1100px;
	margin: 20px auto 40px; /* slightly less space under logo */
	padding: 0 20px 40px;
}

.dashboard-header {
	text-align: center;
	margin-bottom: 24px;
}

.dashboard-subtitle {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	line-height: 22px;
	color: #333;
	margin: 0;
}

/* ---------- Runner: Key Stats Cards ---------- */

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin: 4px 0 8px;
}

.stats-divider {
	height: 1px;
	background: #e3f1f3;
	margin: 10px 0 8px;   /* less space above and below the line */
	border-radius: 4px;
}

.stat-card {
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 14px 18px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-label {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	color: #555;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.stat-value {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 32px;
	line-height: 32px;
	font-weight: 800;
	color: #4caeb8;
}

.stat-unit {
	font-size: 16px;
	font-weight: normal;
	margin-left: 4px;
}

/* Secondary stats row (year + lifetime) */
.stats-grid-secondary {
	margin-top: 4px;   /* match the feel of the FIRST stats row */
}

.stat-card-secondary {
	background: #f7fbfb;
}

.stat-card-muted {
	background: #fafafa;
	border-color: #e0e0e0;
}

.stat-value-muted {
	color: #7baeb4;        /* softer teal */
	font-size: 28px;
}

.stat-small {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	color: #666;
	margin-top: 4px;
}

/* ---------- Runner: How You Compare ---------- */

.compare-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 10px;
	margin-bottom: 6px;
}

.compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 24px;
	align-items: flex-start;
	margin-bottom: 6px;
}

.compare-metric {
	font-family: 'Trebuchet MS', 'Arial';
}

.compare-label {
	font-size: 14px;
	text-transform: uppercase;
	color: #777;
	margin-bottom: 4px;
}

.compare-value {
	font-size: 26px;
	font-weight: 800;
	color: #4caeb8;
}

.compare-sub {
	display: block;
	font-size: 14px;
	font-weight: normal;
	color: #555;
	margin-top: 2px;
}

.compare-placeholder {
	font-size: 14px;
	color: #777;
}

.compare-note {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 12px;
	color: #999;
	margin: 4px 0 0;
}

/* ---------- Runner: Last Run Card ---------- */

.last-run-card {
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 10px 20px 12px;  /* less top/bottom padding */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	/* 16px above, 24px below to balance spacing */
	margin: 16px 0 24px;
}

/* Remove global h2 border inside this card */
.last-run-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 8px;
	margin: 0 0 8px;
}

.last-run-content {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;  /* let height be defined by the text side */
}

.last-run-info {
	flex: 1 1 260px;
	min-width: 260px;
}

.last-run-visual {
	flex: 2 1 480px;     /* larger = map takes more horizontal space */
	max-width: 600px;    /* allow wider map */
	display: flex;
	align-items: flex-start; /* align map with top of text */
}

/* Text styles inside last run card */
.last-run-title {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 6px;
}

.last-run-details {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
	margin-bottom: 8px;
}

.last-run-extra {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	margin-bottom: 8px;
	color: #555;
}

.last-run-link {
	margin-top: 4px;
}

/* Map image inside last run card */
.last-run-map {
	width: 100%;
	max-height: 190px;   /* a bit taller to fill the card better */
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #ddd;
}

/* ---------- Runner: Charts ---------- */

.chart-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.chart-card {
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px 20px 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

/* ---------- Runner: Upcoming Runs ---------- */

.upcoming-runs-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

.upcoming-run {
	display: flex;
	gap: 12px;
	border-radius: 8px;
	border: 1px solid #f0f0f0;
	padding: 10px 12px;
	background-color: #fafafa;
}

.upcoming-run-image {
	flex: 0 0 120px;
	max-width: 120px;
}

.upcoming-run-image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	border: 1px solid #ddd;
	object-fit: cover;
}

.upcoming-run-main {
	flex: 1 1 auto;
}

.upcoming-run-header-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;  /* improve alignment with date */
	margin-bottom: 8px;   /* more breathing room */
}

.upcoming-run-club {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	font-weight: 700;
	color: #4caeb8;
	text-transform: uppercase;
}

.upcoming-run-datetime {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	color: #555;
}

.upcoming-run-title {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 19px;
	font-weight: 700;
	margin: 6px 0 4px;
	color: #df664c;
}

.upcoming-run-text {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 15px;
	color: #555;
	margin: 8px 0 12px 0; /* more breathing room */
	line-height: 1.4;
}

.upcoming-run-links a {
	font-size: 13px;
	margin-right: 10px;
	text-decoration: underline;
}

.upcoming-run-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	text-transform: uppercase;
	background-color: #e7f6f7;
	color: #4caeb8;
	margin-left: 6px;
	border: 1px solid #c4e6e8;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* ---------- Runner: Badges ---------- */

.badges-section {
	margin: 30px 0;
}

.badges-section h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

.badges-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.badge {
	border-radius: 999px;
	padding: 6px 12px;
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
}

.badge-strava {
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;

	/* EXACT same geometry as .badge */
	padding: 6px 12px;
	border-radius: 999px;

	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;          /* same as .badge */
	font-weight: 700;         /* bold like badge label */
	text-transform: uppercase;

	/* Only difference vs 100 Mile Club badge: the color */
	background-color: #df664c; /* RunClubs orange */
	color: #ffffff;
	text-decoration: none;
	line-height: 1.2;         /* normal-ish line height, like badges */
}

.badge-strava:hover {
	text-decoration: underline;
}

.badge-earned {
	background-color: #4caeb8;
	color: #ffffff;
}

.badge-locked {
	background-color: #f2f2f2;
	color: #555555;
}

.badge-label {
	font-weight: bold;
	margin-right: 6px;
}

.badge-status {
	font-size: 12px;
	text-transform: uppercase;
}

/* ---------- Runner: Clubs ---------- */

.clubs-section {
	margin: 30px 0;
}

.clubs-section h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

.club-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.club-logo img {
	max-width: 120px;
	height: auto;
	border-radius: 8px;
	border: 1px solid #ddd;
}

/* ---------- Runner: Placeholder Text ---------- */

.dashboard-placeholder {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	color: #777;
}

/* =========================================================
   CLUBS + HOW YOU COMPARE
   ========================================================= */

.clubs-compare-section {
	margin: 30px 0;
}

.clubs-compare-section h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.clubs-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.club-compare-card {
	background: #ffffff;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.compare-metrics-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 4px;
}

.compare-metric {
	flex: 1 1 120px;
}

.compare-label {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 12px;
	text-transform: uppercase;
	color: #777;
	margin-bottom: 4px;
}

.compare-value {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 22px;
	font-weight: 800;
	color: #4caeb8;
}

.compare-sub {
	display: block;
	font-size: 13px;
	font-weight: normal;
	color: #555;
	margin-top: 2px;
}

.compare-placeholder {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	color: #777;
	margin-top: 4px;
}

.compare-note {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 13px;
	color: #777;
	margin-top: 10px;
}

/* Centered club header + logo */

.club-compare-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 14px;
}

.club-compare-logo {
	height: 90px;             /* consistent logo height */
	width: auto;              /* preserve aspect ratio */
	object-fit: contain;      /* prevent cropping */
	border-radius: 8px;
	margin-bottom: 8px;
}

.club-compare-name {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 20px;
	font-weight: 700;
	color: #4caeb8;
	text-transform: uppercase;
	text-align: center;
}

.club-compare-name a {
	color: #4caeb8;
	text-decoration: none;
}

.club-compare-name a:hover {
	text-decoration: underline;
}

/* =========================================================
   PREFERENCES PAGE & STRAVA ELEMENTS
   ========================================================= */

/* Override global input width inside preferences cards */
.prefs-card input[type=text],
.prefs-card input[type=password],
.prefs-card input[type=email],
.prefs-card input[type=tel],
.prefs-card input[type=date] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.prefs-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 12px;
	margin-bottom: 8px;
}

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

.prefs-table th {
	width: 160px;
	text-align: left;
	background: transparent;
	color: #333;
	font-size: 16px;
	padding: 6px 4px;
}

.prefs-table td {
	padding: 6px 4px;
}

.prefs-readonly {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 18px;
}

.button-link {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background-color: #df664c;
	color: #ffffff;
	text-decoration: none;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

/* Extra spacing when button appears inside upcoming runs */
.upcoming-run .button-link {
	margin-top: 10px;
	padding: 10px 20px;
	font-size: 13px;
}

.button-link:hover {
	text-decoration: underline;
}

.button-link-secondary {
	background-color: #f2f2f2;
	color: #df664c;
}

.strava-connection {
	display: flex;
	align-items: center;
	gap: 12px;
}

.strava-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid #ddd;
}

.strava-connection-text p {
	margin-bottom: 6px;
}

/* Spacing under the Strava connect card on the dashboard */
.strava-connect-card {
	margin-bottom: 24px;
}

.strava-connect-card h2 {
	border-top: none;
	padding-top: 0;
	padding-bottom: 8px;
	margin-bottom: 6px;
}

/* =========================================================
   ELECTIONS PAGE: FORM LAYOUT & BUTTONS
   ========================================================= */

/* Wrap-specific tweaks for the elections admin page */
.elections-page {
	/* hook for elections-only styles */
}

/* ---------- Vertical form layout inside admin cards ---------- */

.admin-card .form-vertical {
	max-width: 550px;       /* keeps the form from feeling too wide */
}

/* Label spacing and typography for vertical forms */
.admin-card .form-vertical label {
	display: block;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	font-weight: 600;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
	color: #333;
}

/* Smaller helper text under headings or labels */
.small-note {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 12px;
	line-height: 16px;
	color: #777;
	margin: 2px 0 6px;
}

/* Inputs & textareas inside admin cards */
.admin-card .form-vertical input[type=text],
.admin-card .form-vertical input[type=email],
.admin-card .form-vertical input[type=number],
.admin-card .form-vertical input[type=password],
.admin-card .form-vertical input[type=date],
.admin-card .form-vertical input[type=datetime-local],
.admin-card .form-vertical textarea {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 6px 8px;
	box-sizing: border-box;
	font-size: 16px;
	border-radius: 4px;
	border: 2px solid #ccc;
	background-color: rgb(204, 255, 255);
}

/* Allow textareas to be taller by default but responsive */
.admin-card .form-vertical textarea {
	min-height: 120px;
	resize: vertical;
}

/* Section headings inside forms: smaller, subtle, and tight spacing */
.admin-card .form-vertical h3 {
	margin-top: 1.25rem;
	margin-bottom: 0.25rem;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	line-height: 18px;
	font-weight: 700;
	color: #df664c;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ---------- Primary button style ---------- */

.btn-primary {
	display: inline-block;
	border: none;
	border-radius: 12px;
	padding: 10px 24px;
	margin-top: 16px;

	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;

	background-color: #df664c;
	color: #ffffff;
	cursor: pointer;
	text-decoration: none;
}

.btn-primary:hover {
	text-decoration: underline;
}

/* ---------- Elections list table styling (summary view) ---------- */

.admin-card .election-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	table-layout: fixed; /* consistent column widths */
}

.admin-card .election-table thead th {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: left;
	padding: 6px 8px;
	background-color: rgb(0, 204, 255);
	color: #ffffff;
	border-bottom: 1px solid #d0eef5;
}

.admin-card .election-table tbody td {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 13px;
	padding: 6px 8px;
	vertical-align: middle;
	border-bottom: 1px solid #e5e5e5;
	word-wrap: break-word;
	white-space: normal;
}

.admin-card .election-table tbody tr:nth-child(even) {
	background-color: #f7f7f7;
}

/* Column widths: Title / Voting Ends / Actions */
.election-col-title {
	width: 60%;
}

.election-col-voteend {
	width: 25%;
	text-align: center;
}

/* Actions cell */
.election-col-actions {
	width: 15%;
	padding: 0;
}

.election-actions-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 8px;
	height: 100%;
}

.election-actions-wrapper .btn-primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Center the header text for Voting Ends + Actions */
.admin-card .election-table thead th:nth-child(2),
.admin-card .election-table thead th:nth-child(3) {
	text-align: center;
}

/* Smaller button style for table actions */
.btn-small {
	padding: 6px 14px;
	font-size: 12px;
	border-radius: 999px;
	margin: 0;
}

/* Positions table centering */
.positions-table thead th:nth-child(2) {
	text-align: center;
}

.positions-table td.positions-actions {
	text-align: center;
}

.positions-actions form {
	display: inline-block;
}

/* ---------- Admin alert boxes (success + error) ---------- */

.alert-success,
.alert-error {
	max-width: 1000px;
	margin: 0 auto 16px;
	padding: 10px 14px;
	border-radius: 6px;
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
}

.alert-success {
	background-color: #e4f7ec;
	color: #276749;
	border: 1px solid #c6e6d4;
}

.alert-error {
	background-color: #fdecea;
	color: #8a1f17;
	border: 1px solid #f4c1bb;
}

.alert-error ul {
	margin: 4px 0 0;
	padding-left: 20px;
}

/* =========================================================
   DISABLED BUTTON STATES (ELECTIONS + GLOBAL)
   ========================================================= */

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
.btn-primary:disabled,
.btn-small:disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Delete Election button should NEVER look disabled */
.delete-election-btn {
	opacity: 1 !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

/* =========================================================
   PUBLIC ELECTION BALLOT PAGE
   ========================================================= */

.ballot-body {
	background-color: #f5f5f5;
}

.ballot-page {
	max-width: 1000px;
	margin: 20px auto 40px;
	padding: 0 12px;
}

/* Outer card */
.election-ballot-header {
	max-width: 780px;
	margin: 0 auto 16px auto;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e0e0e0;
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* Blue hero area with logo + club + title + voter */
.election-ballot-hero {
	padding: 16px 20px;
	color: #ffffff;
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Inner body of the card */
.election-ballot-body {
	padding: 16px 20px 20px 20px;
	font-size: 18px;           /* larger base text */
	line-height: 1.55;
}

/* “Ballot for” line */
.election-meta {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 14px;
	color: #f4f4f4;
}

/* Position blocks */
.election-position-block {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	background: #fafafa;
}

.election-position-block h3 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 22px;
	line-height: 26px;
}

.election-ballot-logo img {
	max-height: 80px;     /* keep the logo modest */
	width: auto;
	display: block;
	border-radius: 4px;
	object-fit: contain;
}

/* Extra safety: any image inside the ballot hero is capped */
.election-ballot-hero img {
	max-height: 80px;
	width: auto;
	display: block;
	object-fit: contain;
}


/* =========================================================
   BALLOT-ONLY FONT & INPUT ENHANCEMENTS (senior-friendly)
   ========================================================= */

/* Increase base reading size inside the ballot */
.election-ballot-body {
    font-size: 18px !important;
    line-height: 1.55 !important;
}

/* Bigger small notes */
.election-ballot-body .small-note,
.election-note {
    font-size: 16px !important;
    line-height: 1.45 !important;
}

/* Larger candidate labels */
.election-candidate-option label {
    font-size: 19px !important;
}

/* Increase heading size for ballot positions */
.election-position-block h3 {
    font-size: 22px !important;
}

/* Write-in input — ballot only */
.election-position-block input[type="text"] {
    height: 32px !important;
    max-width: 260px;
    font-size: 18px;
}

/* Individual candidate row */
.election-candidate-option {
	margin: 4px 0;
}

.election-candidate-option label {
	cursor: pointer;
	font-size: 18px;
	line-height: 22px;
}

/* Make radios/checkboxes slightly larger and better spaced */
.election-candidate-option input[type="radio"],
.election-candidate-option input[type="checkbox"] {
	transform: scale(1.15);
	margin-right: 6px;
}

/* Helper note text inside ballot */
.election-note {
	font-family: 'Trebuchet MS', 'Arial';
	font-size: 16px;
	line-height: 20px;
	color: #555;
	margin-top: 8px;
}

/* Make all “small-note” text inside the ballot more readable */
.election-ballot-body .small-note {
	font-size: 16px;
	line-height: 20px;
	color: #555;
}

/* Write-in input box text */
.election-position-block input[type="text"] {
	font-size: 18px;
	padding: 6px 8px;
}

/* Closed-election banner */
.election-closed-banner {
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid #e6b0b0;
	background: #ffe5e5;
	color: #5a1a1a;
}

.election-closed-main {
	font-weight: 700;
	margin-bottom: 2px;
	font-size: 18px;
}

.election-closed-sub {
	font-size: 16px;
}

/* Tighten spacing around BALLOT heading on the public ballot */
.election-ballot-body h2 {
	padding-top: 12px;
	padding-bottom: 6px;
	margin-top: 12px;
	margin-bottom: 4px;
}

.election-ballot-body .ballot-intro {
	margin-top: 0;
}

/* Wrapper around submit button + note */
.election-submit-wrap {
	margin-top: 12px;
}

/* ---------------------------
   Mobile tweaks (phones)
   --------------------------- */
@media (max-width: 600px) {

	.ballot-page {
		margin-top: 12px;
	}

	.election-ballot-header {
		margin: 0 4px 16px 4px;
	}

	/* Stack logo over text on narrow screens */
	.election-ballot-hero {
		padding: 12px 16px;
		flex-direction: column;
		align-items: flex-start;
	}

	/* Slightly larger base text on phones */
	.election-ballot-body {
		font-size: 19px;
	}

	/* Bigger helper/secondary text on phones */
	.election-ballot-body .small-note,
	.election-note {
		font-size: 17px;
		line-height: 22px;
	}

	/* Make “Ballot for” more readable */
	.election-meta {
		font-size: 15px;
	}

	/* Position headings a bit larger */
	.election-position-block h3 {
		font-size: 23px;
	}
}