/* =================================================================
   v2 legacy-overrides.css
   Loaded ON TOP of Bootstrap + legacy inline styles when the v2 theme
   cookie is set. Re-skins the existing pages (submit_result.php,
   browse_results.php, etc.) to match the v2 design tokens WITHOUT
   changing any HTML markup.

   Goal: a committee member browsing /submit_result.php?theme=v2 sees
   the new design but every form, validation, AJAX call, and submission
   continues to work exactly as before.
   ================================================================= */

/* --- 1. Reset the legacy page chrome -------------------------- */
/* Re-skin body + tables + sidebar to match v2 paper background */
html, body {
	background-color: var(--paper) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
	color: var(--ink-800) !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

body, td, th {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* Hide the legacy 85%-wide outer table chrome */
body > div[align="center"] > table[width="85%"] {
	background: transparent !important;
}

/* Hide the legacy header strip (logo + welcome banner) */
body > div[align="center"]:first-of-type {
	display: none !important;
}

/* Hide the legacy sidebar menu */
.menu, .nsnta-welcome-banner {
	display: none !important;
}

/* The legacy 20%-wide sidebar cell — collapse */
body > div > table[width="85%"] > tbody > tr > td[width="20%"] {
	display: none !important;
}

/* Force the content column to full width */
body > div > table[width="85%"] {
	width: 100% !important;
	max-width: var(--max-w, 1180px) !important;
	margin: 0 auto !important;
	padding: 0 var(--gutter, 24px) !important;
	border: none !important;
}

body > div > table[width="85%"] > tbody > tr > td:not([width="20%"]):not([width="14%"]) {
	width: 100% !important;
	display: block !important;
	padding: 30px 0 !important;
}

/* --- 2. v2 topnav at the top of the page ----------------------
   The topnav is rendered in document flow by public_header.php — it
   takes its own 64px so no ::before spacer needed. */

/* --- 3. Re-skin Bootstrap form controls ----------------------- */
.form-control, .form-select, select, input[type="text"], input[type="tel"],
input[type="number"], input[type="email"], input[type="password"], textarea {
	font-family: 'Inter', system-ui, sans-serif !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-sm) !important;
	padding: 10px 12px !important;
	font-size: 0.97rem !important;
	color: var(--ink-900) !important;
	background-color: var(--paper-card) !important;
}

.form-control:focus, .form-select:focus, select:focus, input:focus, textarea:focus {
	outline: 2px solid var(--teal-300) !important;
	border-color: var(--teal-600) !important;
	box-shadow: none !important;
}

label, .form-label {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 600 !important;
	color: var(--ink-700) !important;
	font-size: 0.92rem !important;
}

/* --- 4. Re-skin buttons --------------------------------------- */
.btn, button, input[type="submit"], input[type="button"] {
	font-family: 'Inter', system-ui, sans-serif !important;
	border-radius: var(--r-sm) !important;
	font-weight: 600 !important;
	padding: 10px 18px !important;
	font-size: 0.95rem !important;
	border: none !important;
	cursor: pointer !important;
	transition: transform 0.1s, box-shadow 0.15s, background 0.15s !important;
}

.btn-primary, input[type="submit"] {
	background: var(--clay-500) !important;
	color: white !important;
	border: none !important;
}
.btn-primary:hover, input[type="submit"]:hover {
	background: var(--clay-600) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--shadow-md) !important;
}

.btn-secondary, .btn-outline-secondary {
	background: var(--paper-card) !important;
	color: var(--ink-900) !important;
	border: 1px solid var(--line) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
	background: var(--paper-soft) !important;
}

.btn-success, .btn-outline-success {
	background: var(--teal-600) !important;
	color: white !important;
	border: none !important;
}
.btn-success:hover { background: var(--teal-700) !important; }

.btn-danger, .btn-outline-danger {
	background: var(--clay-500) !important;
	color: white !important;
	border: none !important;
}

/* --- 5. Re-skin cards ----------------------------------------- */
.card, .form-container {
	background-color: var(--paper-card) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-lg) !important;
	box-shadow: var(--shadow-sm) !important;
	margin-bottom: 18px !important;
}

/* Bootstrap cards delegate padding to .card-body, so the .card itself
   must be padding-free or its body gets double-padded. */
.card {
	padding: 0 !important;
}

/* `.form-container` is a flat custom wrapper (no inner .card-body) — it
   needs its own padding to give the form fields breathing room from the
   rounded edge, otherwise the leading icon on the first label hugs the
   corner and visually clips. */
.form-container {
	padding: 22px 26px !important;
}

.card-header, .card-body, .card-footer {
	padding: 22px 26px !important;
}

.card-header {
	background: var(--paper-soft) !important;
	border-bottom: 1px solid var(--line) !important;
	font-weight: 700 !important;
	color: var(--ink-900) !important;
}

/* --- 6. Re-skin tables ---------------------------------------- */
.table, table.table, table[class*="table-"] {
	background-color: var(--paper-card) !important;
	border-collapse: collapse !important;
	width: 100% !important;
}

.table thead th, .table tbody td, table.table th, table.table td {
	font-family: 'Inter', system-ui, sans-serif !important;
	padding: 12px 14px !important;
	border-bottom: 1px solid var(--line) !important;
}

.table thead th {
	background: var(--paper-soft) !important;
	font-size: 0.76rem !important;
	color: var(--ink-500) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	font-weight: 700 !important;
}

/* --- 7. Score table styling (used on submit_result.php) ------- */
.score-table {
	margin: 20px 0 !important;
}
.score-table td {
	border: 1px solid var(--line) !important;
	padding: 10px !important;
	background: var(--paper-card) !important;
}
.score-table input[type="number"] {
	width: 70px !important;
	padding: 10px !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 1.15rem !important;
}

/* --- 8. Player select button --------------------------------- */
.player-select-btn {
	font-family: 'Inter', system-ui, sans-serif !important;
	border-radius: var(--r-sm) !important;
	padding: 10px 14px !important;
	border: 1px dashed var(--line-strong) !important;
	background: var(--paper-card) !important;
}

.player-select-btn:hover {
	border-color: var(--teal-300) !important;
	background: var(--paper-soft) !important;
}

.player-select-btn.selected {
	border-style: solid !important;
	border-color: var(--teal-600) !important;
	background: var(--teal-50) !important;
}

/* --- 9. Modal restyle ----------------------------------------- */
.modal-content {
	background: var(--paper-card) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-lg) !important;
}

.modal-header {
	background: var(--teal-600) !important;
	color: white !important;
	border-top-left-radius: var(--r-lg) !important;
	border-top-right-radius: var(--r-lg) !important;
}

/* --- 10. Headings -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', system-ui, sans-serif !important;
	color: var(--ink-900) !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

h1 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; }
h2 { font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important; }
h3 { font-size: 1.2rem !important; }

/* Times-New-Roman page titles (used on existing submit_result.php) */
.page-title, [style*="Times New Roman"] {
	font-family: 'Inter', system-ui, sans-serif !important;
	font-weight: 700 !important;
	color: var(--ink-900) !important;
	letter-spacing: -0.02em !important;
}

/* --- 11. Links ----------------------------------------------- */
a, a:visited { color: var(--teal-700); }
a:hover { color: var(--clay-600); }

/* --- 12. Alerts ---------------------------------------------- */
.alert {
	border-radius: var(--r-md) !important;
	border: 1px solid !important;
	padding: 14px 18px !important;
}
.alert-warning { background: #FFF8E1 !important; border-color: var(--gold-500) !important; color: #6B5500 !important; }
.alert-danger  { background: #FDEAE4 !important; border-color: var(--clay-500) !important; color: var(--clay-600) !important; }
.alert-success { background: var(--teal-50) !important; border-color: var(--teal-300) !important; color: var(--teal-800) !important; }
.alert-info    { background: var(--teal-50) !important; border-color: var(--teal-300) !important; color: var(--teal-800) !important; }

/* --- 13. Override the small grey error message ---------------- */
.error-message {
	background: #FDEAE4 !important;
	border: 1px solid var(--clay-500) !important;
	color: var(--clay-600) !important;
	border-radius: var(--r-sm) !important;
	padding: 12px 16px !important;
	font-family: 'Inter', system-ui, sans-serif !important;
}