/* ============================================================================
   TryTons — Bootstrap 5 theme overrides
   Shared across every Bootstrap-based page. Dark green + gold + silver
   "premium sports crest" palette (Green-Gold design, per
   design_handoff_login_redesign/README.md).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --bg: #0c1712;
  --line: #2c4437;

  --silver: #c7d1c9;
  --silver-dim: #7f9187;
  --silver-bright: #eef3ef;

  --gold: #c9a227;
  --gold-bright: #e8c765;
  --gold-deep: #8a6a15;

  --bs-body-bg: var(--bg);
  --bs-body-color: var(--silver);
  --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --bs-link-color: var(--silver-bright);
  --bs-link-hover-color: var(--gold-bright);
  --bs-border-radius: 8px;
  --bs-border-radius-lg: 12px;

  --bs-primary: var(--gold);
  --bs-primary-rgb: 201, 162, 39;
}

body {
  margin: 0;
  background: var(--bg);
  animation: page-fade-in 0.25s ease;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Toggled by page-transitions.js just before following an internal link, so
   the old page fades out before the browser navigates away. */
body.page-fade-out {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ============================================================================
   Baseline fallback for pages with no bespoke CSS of their own yet — makes
   raw, unclassed form controls and tables legible against the dark
   background. Any page-specific CSS or Bootstrap component class overrides
   these automatically (plain element selectors lose to classes/ids on
   specificity), so this is safe to layer under everything else.
   ========================================================================== */
main, .container, .container-fluid {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

h1, h2, h3, h4 {
  color: var(--silver-bright);
}

p {
  color: var(--silver);
}

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

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--silver-dim);
  font-weight: 600;
}

input, select, textarea {
  background: #0f2118;
  color: var(--silver-bright);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-family: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

label {
  color: var(--silver-dim);
  font-weight: 600;
  font-size: 0.9rem;
}

button {
  background: var(--gold);
  color: #141f0e;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

a {
  color: var(--silver-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}

a:hover {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-deep);
}

.brand-font {
  font-family: "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* ---------- Shared gold CTA button ------------------------------------------ */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  border: none;
  color: #141f0e;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-gold:hover {
  filter: brightness(1.08);
  color: #141f0e;
}

.btn-gold:active {
  transform: translateY(1px);
}

.btn-gold:disabled {
  opacity: 0.65;
  /* theme.css sets cursor:pointer on every button, so disabled ones need this
     or they still invite a click. */
  cursor: not-allowed;
}

@keyframes login-spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(20, 31, 14, 0.3);
  border-top-color: #141f0e;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: -2px;
  animation: login-spin 0.7s linear infinite;
}

.btn-gold.is-loading .btn-spinner {
  display: inline-block;
}

/* ============================================================================
   Shared "auth page" components (login + register share this exact visual
   language, per REGISTER-SPEC.md: "styled to match the redesigned login
   page"). Page-specific bits (panel background color, hero photo, checkbox)
   stay in each page's own CSS file.
   ========================================================================== */

/* ---------- Left panel: rule mark + eyebrow + heading block ------------------ */
.auth-rule {
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 16px;
}

.auth-eyebrow {
  color: var(--gold-bright);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.auth-heading {
  color: var(--silver-bright);
  font-size: 1.7rem;
  font-weight: 600;
}

.auth-subtext {
  color: var(--silver-dim);
  font-size: 0.85rem;
}

.auth-footer-text {
  color: var(--silver-dim);
  font-size: 0.82rem;
}

/* ---------- Alerts: left accent-bar, one treatment per feedback type --------- */
.auth-alert {
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  padding: 0.65rem 0.9rem;
  color: var(--silver-bright);
  font-size: 0.85rem;
  background: transparent;
}

.auth-alert-success { border-left-color: var(--gold); }
.auth-alert-notice { border-left-color: #c9832b; }
.auth-alert-danger { border-left-color: #c0524a; }

/* ---------- Form fields: underline style, no boxed inputs -------------------- */
.field-label {
  display: block;
  color: var(--silver-dim);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #33493c;
  padding-bottom: 9px;
  transition: border-color 0.15s ease;
}

.field-row:focus-within {
  border-color: var(--gold);
}

.field-icon {
  color: var(--silver-dim);
  display: flex;
  flex-shrink: 0;
}

.field-row:focus-within .field-icon {
  color: var(--gold);
}

.field-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--silver-bright);
  font-size: 0.92rem;
  min-width: 0;
  font-family: inherit;
}

.field-input::placeholder {
  color: #5c6e64;
}

.field-help {
  color: var(--silver-dim);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.password-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--silver-dim);
  display: flex;
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--gold-bright);
}

.forgot-link {
  font-size: 0.78rem;
}

/* ---------- Right pane: hero photo + overlay + glow --------------------------- */
.auth-visual {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
}

.auth-visual::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, .22) 0%, transparent 70%);
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.auth-visual-content {
  position: relative;
  max-width: 400px;
  text-align: center;
}

.auth-visual-logo {
  width: 240px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 28px;
}

.auth-visual-rule {
  width: 40px;
  height: 2px;
  background: var(--gold);
  margin: 0 auto 20px;
}

.auth-visual-tagline {
  color: var(--gold-bright);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
}

.auth-visual-support {
  color: var(--silver);
  font-size: 0.85rem;
}