/* ==========================================================================
   Tournament Registration page - page-specific accent theming and layout.
   Header/nav-bar theming is shared (see tournament-accent.css). This file
   covers elements unique to this page's own markup.
   ========================================================================== */

.tournament-registration-page {
  --tournament-accent-color: var(--tournament-accent, var(--color-bracket-ace-400));
  --tournament-tint: #ffffff;
  --tournament-tint: color-mix(in srgb, var(--tournament-accent-color) 5%, white);

  background-color: var(--tournament-tint);
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  max-width: 860px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* -- Cards ------------------------------------------------------------- */

.tournament-registration-page .container {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow-x: auto;
}

.tournament-registration-page .container table {
  width: 100%;
  margin: 0;
}

.tournament-registration-page .container h2 {
  margin-top: 0;
}

/* The group-affiliation block already has its own distinct wrapper class
   in the markup, so it gets the card treatment directly rather than an
   extra wrapping div. */
.tournament-registration-page .ba.register.group-container {
  display: block;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* -- Table header accent color -------------------------------------------
   bracketAce.css hard-codes these to #829d9e via the generic th.ba class,
   used here by both the entries table and the other-items table. The text
   color isn't set by anything findable in bracketAce.css either (see the
   same fix on the Fees page) - likely a theme default - so it's forced
   explicitly rather than left alone.
   ---------------------------------------------------------------------- */

.tournament-registration-page th.ba {
  background: var(--tournament-accent-color) !important;
  color: #fff !important;
}

/* bracketAce.css hard-codes the zebra-stripe row background to #829d9e too
   (tr.entry.odd), used by both the entries table and the other-items
   table. */
.tournament-registration-page tr.entry.odd {
  background: var(--tournament-accent-color) !important;
}

/* -- Notes labels ---------------------------------------------------------
   .ba.register.notes-label isn't defined anywhere in bracketAce.css, so
   its teal color and ~80px width (causing the label text to wrap onto
   several lines) must come from tournament_registration.css, which isn't
   available here to edit directly. Overridden defensively with !important
   since its specificity/rule order relative to this stylesheet is unknown.
   ---------------------------------------------------------------------- */

.tournament-registration-page label.ba.register.notes-label {
  color: var(--tournament-accent-color) !important;
  width: auto !important;
  min-width: 100% !important;
  display: block !important;
  white-space: nowrap !important;
}