/*
 * League organiser portal: baize-green On The Baize styling (#3400). Loaded after portal.css, and only
 * by the organiser _base.html, so the venue portal and admin console never see it.
 *
 * Contrast rules (WCAG, computed at scoping). Only these pairings are used:
 *   - on baize (#0d4309): cream text 10.47:1, paper text 11.33:1. Nothing else: chalk 1.80, loss 1.66,
 *     brass 2.29 and mute 1.87 all fail on baize.
 *   - on ink (hover/active pill inside the baize sidebar): cream text.
 *   - on paper or cream: ink 15.70, baize 10.47, chalk 5.81, loss 6.30.
 *   - never cream text on sage (1.57:1), never --focus (chalk) outlines on baize: they are cream.
 * Sign-in pages (body.organiser-auth) are a full baize surface with paper boxes for inputs and
 * messages; signed-in pages (body.organiser-app) keep the cream page with a baize sidebar.
 */

/* ---- Sign-in, password reset and error pages: full baize surface ---- */

body.organiser-auth {
  background: var(--baize);
  color: var(--cream);
}

/* The card dissolves into the baize page; the roundel sits above the heading. */
.organiser-auth .card {
  background: transparent;
  border: 0;
  padding: var(--space-5) var(--space-4);
}

.organiser-auth .card::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-card);
  background: url("/portal/static/otb-logo.png") center / cover no-repeat;
}

.organiser-auth h1,
.organiser-auth label,
.organiser-auth p {
  color: var(--cream);
}

.organiser-auth a {
  color: var(--cream);
  text-decoration: underline;
}

.organiser-auth a:hover {
  color: var(--paper);
}

.organiser-auth a:focus-visible,
.organiser-auth button:focus-visible,
.organiser-auth input:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
}

/* Inputs stay paper with ink text; focus is a cream ring on the baize around them. */
.organiser-auth input[type="email"],
.organiser-auth input[type="password"],
.organiser-auth input[type="text"] {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
}

.organiser-auth input:focus {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
  border-color: var(--paper);
}

/* Primary button: cream with baize text (10.47:1), like the app's sign-in screen. */
.organiser-auth button,
.organiser-auth input[type="submit"] {
  background: var(--cream);
  color: var(--baize);
  border: 1px solid var(--cream);
}

.organiser-auth button:hover,
.organiser-auth input[type="submit"]:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--baize);
}

/* Messages sit in a paper box: errors loss on paper, notices ink on paper. Never loss on baize. */
.organiser-auth .error,
.organiser-auth .notice {
  background: var(--paper);
  border-color: var(--paper);
}

.organiser-auth .error {
  color: var(--loss);
  border-left-color: var(--loss);
}

.organiser-auth .notice {
  color: var(--ink);
  border-left-color: var(--brass);
}

.organiser-auth .error p,
.organiser-auth .notice p {
  color: inherit;
}

.organiser-auth .error a,
.organiser-auth .notice a {
  color: var(--chalk);
}

.organiser-auth .error a:focus-visible,
.organiser-auth .notice a:focus-visible {
  outline-color: var(--baize);
}

/* The authenticator QR code needs a light quiet zone to scan; the manual key is ink on cream. */
.organiser-auth .mfa-qr {
  display: inline-block;
  padding: var(--space-3);
  background: var(--paper);
  border-radius: var(--radius-control);
}

.organiser-auth .mfa-secret {
  background: var(--cream);
  color: var(--ink);
}

/* ---- Signed-in pages: baize sidebar (top bar on phones), content stays on cream ---- */

.organiser-app .shell-sidebar {
  background: var(--baize);
  color: var(--cream);
}

.organiser-app .shell-brand strong,
.organiser-app .shell-brand-sub,
.organiser-app .shell-sidebar a {
  color: var(--cream);
}

/* Hover and the current page sit on ink (cream on ink is 15:1), with a cream marker dot. */
.organiser-app .shell-sidebar a:hover,
.organiser-app .shell-sidebar a[aria-current="page"] {
  background: var(--ink);
  color: var(--cream);
}

.organiser-app .shell-sidebar a[aria-current="page"]::before {
  background: var(--cream);
}

.organiser-app .shell-sidebar a:focus-visible,
.organiser-app .shell-sidebar .shell-nav-toggle:focus-visible + .shell-nav-button {
  outline-color: var(--cream);
}

.organiser-app .shell-nav-button {
  border-color: var(--cream);
  color: var(--cream);
}