/* Login page for cubs.joplux.com. Mounted over /public/style.css in the
 * nforwardauth container.
 *
 * Class names and element IDs are dictated by that image's index.html and its
 * script.js. Do not rename anything here; only appearance is ours.
 *
 * Follows the team palette: blue is the identity color, neutrals carry the
 * page, red appears once and only to signal a failed sign-in. No gradients, no
 * drop shadows on flat elements, no logo or wordmark.
 */

:root {
  --cubs-blue: #0E3386;
  --cubs-blue-ink: #0A2769;
  --cubs-red-ink: #A32826;
  --cubs-red-bg: #EFD9D9;
  --cubs-red-line: #E2C9C9;
  --paper: #F4F5F2;
  --card: #FFFFFF;
  --ink: #12161A;
  --soft: #5A6169;
  --rule: #D7DAD3;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 24rem;
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.25rem;
  box-sizing: border-box;
}

.form {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--cubs-blue);
  border-radius: 3px;
  padding: 1.75rem 1.5rem 1.5rem;
}

h1 {
  text-align: left;
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Subtitle is injected by the custom index.html. */
.sub {
  margin: 0 0 1.5rem;
  color: var(--soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.form-control {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--soft);
}

input[type=text],
input[type=password] {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75em;
  font: inherit;
  font-size: 1.05em;
  color: var(--ink);
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

input[type=text]:focus,
input[type=password]:focus {
  outline: none;
  border-color: var(--cubs-blue);
  box-shadow: 0 0 0 2px rgba(14, 51, 134, 0.18);
}

.button-container { margin-top: 1.25rem; }

button {
  width: 100%;
  padding: 0.85em;
  font: inherit;
  font-size: 1.02em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background-color: var(--cubs-blue);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s;
}

button:hover  { background-color: var(--cubs-blue-ink); }
button:focus-visible {
  outline: 2px solid var(--cubs-blue);
  outline-offset: 2px;
}

/* The only red on the page, and only when a sign-in fails. */
.alert {
  display: none;
  opacity: 0;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  font-size: 0.92rem;
  transition: opacity 0.4s ease-in-out;
}
.alert p { margin: 0; }

.alert.error {
  color: var(--cubs-red-ink);
  background-color: var(--cubs-red-bg);
  border: 1px solid var(--cubs-red-line);
}

.alert.success {
  color: #14532d;
  background-color: #e3ece5;
  border: 1px solid #cfdcd3;
}

.footnote {
  margin: 1.25rem 0 0;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}