/* E-LEAD Sports visual identity. Colours taken from the logo: blue #0e55ce, green #218537.
   Bootstrap 5.3 buttons and badges keep their own variables, so they are set here explicitly. */
:root, [data-bs-theme="light"] {
  --brand-blue: #0e55ce;
  --brand-blue-dark: #0a43a6;
  --brand-blue-rgb: 14, 85, 206;
  --brand-green: #218537;
  --brand-green-dark: #1a6b2c;
  --bs-primary: var(--brand-blue);
  --bs-primary-rgb: var(--brand-blue-rgb);
  --bs-primary-text-emphasis: #06306f;
  --bs-primary-bg-subtle: #dbe6fa;
  --bs-primary-border-subtle: #a9c2f0;
  --bs-success: var(--brand-green);
  --bs-success-rgb: 33, 133, 55;
  --bs-link-color: var(--brand-blue);
  --bs-link-color-rgb: var(--brand-blue-rgb);
  --bs-link-hover-color: var(--brand-blue-dark);
  --bs-link-hover-color-rgb: 10, 67, 166;
}

.btn-primary {
  --bs-btn-bg: var(--brand-blue); --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue-dark); --bs-btn-hover-border-color: var(--brand-blue-dark);
  --bs-btn-active-bg: var(--brand-blue-dark); --bs-btn-active-border-color: var(--brand-blue-dark);
  --bs-btn-disabled-bg: var(--brand-blue); --bs-btn-disabled-border-color: var(--brand-blue);
  --bs-btn-focus-shadow-rgb: var(--brand-blue-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-blue); --bs-btn-border-color: var(--brand-blue);
  --bs-btn-hover-bg: var(--brand-blue); --bs-btn-hover-border-color: var(--brand-blue);
  --bs-btn-active-bg: var(--brand-blue); --bs-btn-active-border-color: var(--brand-blue);
  --bs-btn-disabled-color: var(--brand-blue); --bs-btn-disabled-border-color: var(--brand-blue);
  --bs-btn-focus-shadow-rgb: var(--brand-blue-rgb);
}
.btn-success {
  --bs-btn-bg: var(--brand-green); --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green-dark); --bs-btn-hover-border-color: var(--brand-green-dark);
  --bs-btn-active-bg: var(--brand-green-dark); --bs-btn-active-border-color: var(--brand-green-dark);
}
.btn-outline-success {
  --bs-btn-color: var(--brand-green); --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-bg: var(--brand-green); --bs-btn-hover-border-color: var(--brand-green);
  --bs-btn-active-bg: var(--brand-green); --bs-btn-active-border-color: var(--brand-green);
}
.text-bg-primary { background-color: var(--brand-blue) !important; }
.text-bg-success { background-color: var(--brand-green) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-blue); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--brand-blue); }
.form-check-input:checked { background-color: var(--brand-blue); border-color: var(--brand-blue); }
.form-control:focus, .form-select:focus, .btn:focus, .form-check-input:focus {
  border-color: #86a9e8; box-shadow: 0 0 0 .2rem rgba(var(--brand-blue-rgb), .25);
}
.progress-bar.bg-success { background-color: var(--brand-green) !important; }

/* Top bar: white, logo only, a thin blue-to-green line under it. */
.brand-navbar { background: #fff; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand-blue), var(--brand-green)) 1; }
.brand-navbar .navbar-brand { padding: .15rem 0; }
.brand-navbar .navbar-brand img { height: 40px; width: auto; display: block; }
.brand-navbar .nav-link.active { color: var(--brand-blue); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand-blue); }

/* Footer: partners and EU funding, on every page. */
.brand-footer { background: #fff; border-top: 1px solid var(--bs-border-color); padding: 1.5rem 1rem 1.25rem; margin-top: 2rem; }
.brand-footer .partners { display: block; max-width: 640px; width: 100%; height: auto; margin: 0 auto 1.2rem; }
.brand-footer .funding { display: flex; gap: 1rem; align-items: center; justify-content: center; max-width: 980px; margin: 0 auto; flex-wrap: wrap; }
.brand-footer .funding img { height: 44px; width: auto; flex: none; }
.brand-footer .disclaimer { font-size: .72rem; line-height: 1.35; color: var(--bs-secondary-color); flex: 1 1 26rem; margin: 0; }
.brand-footer .copy { text-align: center; font-size: .7rem; color: var(--bs-secondary-color); margin-top: .8rem; }
/* The editor and simulator need the screen: a compact footer there. */
.brand-footer.compact { padding: .6rem 1rem; margin-top: 1rem; }
.brand-footer.compact .partners { display: none; }
.brand-footer.compact .funding img { height: 30px; }

/* Sign-in: the track photo behind a white card. */
.brand-auth {
  min-height: calc(100vh - 0px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1rem; background: linear-gradient(rgba(6, 30, 70, .55), rgba(6, 30, 70, .35)), url("../brand/hero.jpg") center / cover no-repeat;
}
.brand-auth .auth-card { width: 100%; max-width: 27rem; border: 0; border-radius: 1rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35); }
.brand-auth .auth-logo { display: block; width: 78%; max-width: 300px; height: auto; margin: -.5rem auto .5rem; }
.brand-auth .auth-eu { margin-top: 1.25rem; max-width: 40rem; background: rgba(255, 255, 255, .94); border-radius: .75rem;
  padding: .8rem 1rem; display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.brand-auth .auth-eu img { height: 40px; width: auto; }
.brand-auth .auth-eu p { flex: 1 1 18rem; font-size: .72rem; line-height: 1.35; margin: 0; color: #333; }
.brand-auth .auth-partners { margin-top: .75rem; max-width: 40rem; width: 100%; background: rgba(255, 255, 255, .94); border-radius: .75rem; padding: .6rem 1rem; }
.brand-auth .auth-partners img { width: 100%; height: auto; display: block; }
.brand-auth .auth-lang { position: absolute; top: 1rem; right: 1rem; }

/* Dashboard banner. */
.brand-hero { position: relative; border-radius: 1rem; overflow: hidden; min-height: 190px; margin-bottom: 1.5rem;
  background: linear-gradient(90deg, rgba(6, 30, 70, .82) 0%, rgba(6, 30, 70, .45) 55%, rgba(6, 30, 70, .1) 100%),
              url("../brand/hero.jpg") center 60% / cover no-repeat;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 2rem; color: #fff; }
.brand-hero h1 { font-weight: 700; margin: 0 0 .25rem; }
.brand-hero p { margin: 0; opacity: .9; max-width: 34rem; }
.brand-hero .hero-logo { background: rgba(255, 255, 255, .95); border-radius: .9rem; padding: .5rem; flex: none; }
.brand-hero .hero-logo img { height: 140px; width: auto; display: block; }
@media (max-width: 768px) { .brand-hero .hero-logo { display: none; } .brand-hero { padding: 1.25rem; } }

/* The footer stays at the bottom on short pages. */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }