/* ==========================================================================
   Windsor Chess Challenge

   COLOUR DISCIPLINE- read before adding any colour to this file.
   Red, green, orange and yellow are STATUS colours and are reserved:
     green  = paid seat / green slot
     red    = unpaid seat, blocking flag
     orange = duplicate, split across days
     yellow = multiple registrations
   Brand chrome uses ink, walnut and the neutrals only. Never style a
   navbar, button or heading with a status colour.
   ========================================================================== */

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── A: Ink and walnut (current, for comparison) ────────────── */

/*:root {
  --wcc-ink:        #1A1512;
  --wcc-ink-soft:   #2E2723;
  --wcc-walnut:     #8A5A2B;
  --wcc-walnut-dk:  #6B4520;
  --wcc-bone:       #F4F0E6;
  --wcc-tan:        #D8C7A9;
  --wcc-tan-soft:   #EDE5D6;
  --wcc-stone:      #6E685E;
  --wcc-paper:      #FFFFFF;

  --wcc-nav-bg:     var(--wcc-ink);
  --wcc-nav-accent: var(--wcc-walnut);
  --wcc-footer-bg:  var(--wcc-ink);

  --wcc-paid:        #2E7D32;
  --wcc-paid-bg:     #E8F2E9;
  --wcc-paid-text:   #1B5E20;
  --wcc-unpaid:      #C0392B;
  --wcc-unpaid-bg:   #FBEAE7;
  --wcc-unpaid-text: #8C2A20;
  --wcc-unpaid-hatch: rgba(192, 57, 43, 0.06);
  --wcc-warn:        #B35309;
  --wcc-warn-bg:     #FCF0E4;
  --wcc-warn-text:   #7A3A06;
  --wcc-note:        #8A6D1F;
  --wcc-note-bg:     #FBF4DF;
}*/


/* ── B: Crimson and ink ─────────────────────────────────────── */
/* The brand red takes over walnut's role: accents, rules, links, focus.
   Warm off-white pages are kept, so the layout feels like the current
   build with a different accent. Status red is pushed to a deep maroon
   so the two never sit side by side looking alike.
   The most conservative way to get red into the system. */


:root {
  --wcc-ink:        #171310;
  --wcc-ink-soft:   #2B2320;
  --wcc-walnut:     #C30404;
  --wcc-walnut-dk:  #99_0303;
  --wcc-bone:       #F7F4EF;
  --wcc-tan:        #DDD5CA;
  --wcc-tan-soft:   #EFEAE3;
  --wcc-stone:      #6E6862;
  --wcc-paper:      #FFFFFF;

  --wcc-nav-bg:     var(--wcc-ink);
  --wcc-nav-accent: var(--wcc-walnut);
  --wcc-footer-bg:  var(--wcc-ink);

  --wcc-paid:        #2E7D32;
  --wcc-paid-bg:     #E8F2E9;
  --wcc-paid-text:   #1B5E20;
  --wcc-unpaid:      #8E1B12;
  --wcc-unpaid-bg:   #F7E6E4;
  --wcc-unpaid-text: #6E140D;
  --wcc-unpaid-hatch: rgba(142, 27, 18, 0.07);
  --wcc-warn:        #B35309;
  --wcc-warn-bg:     #FCF0E4;
  --wcc-warn-text:   #7A3A06;
  --wcc-note:        #8A6D1F;
  --wcc-note-bg:     #FBF4DF;
}



/* ── C: Red, white and black ────────────────────────────────── */
/* The literal reading. Pure white surfaces, near-black chrome, cool
   neutral greys, brand red as the only colour. Crisper and more modern
   than the current warm palette, and a bigger visual change. Status red
   again pushed deeper for separation. */

/*
:root {
  --wcc-ink:        #0F0F0F;
  --wcc-ink-soft:   #262626;
  --wcc-walnut:     #C30404;
  --wcc-walnut-dk:  #9C0303;
  --wcc-bone:       #F5F5F5;
  --wcc-tan:        #D6D6D6;
  --wcc-tan-soft:   #EBEBEB;
  --wcc-stone:      #6B6B6B;
  --wcc-paper:      #FFFFFF;

  --wcc-nav-bg:     var(--wcc-ink);
  --wcc-nav-accent: var(--wcc-walnut);
  --wcc-footer-bg:  var(--wcc-ink);

  --wcc-paid:        #2E7D32;
  --wcc-paid-bg:     #E9F3EA;
  --wcc-paid-text:   #1B5E20;
  --wcc-unpaid:      #8E1B12;
  --wcc-unpaid-bg:   #F8E8E6;
  --wcc-unpaid-text: #6E140D;
  --wcc-unpaid-hatch: rgba(142, 27, 18, 0.07);
  --wcc-warn:        #A8500C;
  --wcc-warn-bg:     #FBEFE3;
  --wcc-warn-text:   #74380A;
  --wcc-note:        #7E6420;
  --wcc-note-bg:     #F9F3E0;
}*/



/* ── D: Red chrome ──────────────────────────────────────────── */
/* The boldest option: a deep red navbar and footer instead of black.
   Unmistakably branded, and the one most likely to divide opinion: a
   large red fill is loud on every screen, including the flag dashboard.
   Uses a darker red than #C30404 for the fill, because the bright value
   is overwhelming at that size. Here the status red keeps its original
   value and shares the hue with the brand; the hatch, the x and the
   words "Not paid" do the distinguishing. */


/*:root {
  --wcc-ink:        #1A1A1A;
  --wcc-ink-soft:   #303030;
  --wcc-walnut:     #9C0303;
  --wcc-walnut-dk:  #7A0202;
  --wcc-bone:       #F7F5F2;
  --wcc-tan:        #D9D3CC;
  --wcc-tan-soft:   #EDE9E4;
  --wcc-stone:      #6C6660;
  --wcc-paper:      #FFFFFF;

  --wcc-nav-bg:     #9C0303;
  --wcc-nav-accent: #1A1A1A;
  --wcc-footer-bg:  #1A1A1A;

  --wcc-paid:        #2E7D32;
  --wcc-paid-bg:     #E8F2E9;
  --wcc-paid-text:   #1B5E20;
  --wcc-unpaid:      #C0392B;
  --wcc-unpaid-bg:   #FBEAE7;
  --wcc-unpaid-text: #8C2A20;
  --wcc-unpaid-hatch: rgba(192, 57, 43, 0.06);
  --wcc-warn:        #B35309;
  --wcc-warn-bg:     #FCF0E4;
  --wcc-warn-text:   #7A3A06;
  --wcc-note:        #8A6D1F;
  --wcc-note-bg:     #FBF4DF;
}*/


:root {
  /* Type scale: 1.25 ratio from a 16px base */
  --wcc-text-sm:    0.875rem;
  --wcc-text-base:  1rem;
  --wcc-text-lg:    1.25rem;
  --wcc-text-xl:    1.5rem;
  --wcc-text-2xl:   1.9rem;

  /* Spacing - 8px base, the board's own unit */
  --wcc-space:      0.5rem;

  /* Bootstrap overrides */
  --bs-body-bg:            var(--wcc-bone);
  --bs-body-color:         var(--wcc-ink);
  --bs-body-font-family:   "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size:     var(--wcc-text-base);
  --bs-body-line-height:   1.6;
  --bs-border-color:       var(--wcc-tan);
  --bs-link-color:         var(--wcc-walnut-dk);
  --bs-link-hover-color:   var(--wcc-ink);
  --bs-secondary-color:    var(--wcc-stone);
  --bs-emphasis-color:     var(--wcc-ink);
  --bs-border-radius:      4px;
  --bs-border-radius-sm:   3px;
  --bs-border-radius-lg:   6px;
}

/* ── Typography ─────────────────────────────────────────────── */

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, .wcc-display {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: var(--wcc-ink);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--wcc-text-2xl); }
h2 { font-size: var(--wcc-text-xl); }
h3 { font-size: var(--wcc-text-lg); }
h4, h5, h6 { font-weight: 600; color: var(--wcc-ink); }

p { max-width: 68ch; }

/* Section heading with a walnut rule beneath - structural, not decorative:
   it marks where one area of the page ends and the next begins. */
.wcc-rule {
  padding-bottom: calc(var(--wcc-space) * 1.5);
  border-bottom: 2px solid var(--wcc-walnut);
  margin-bottom: calc(var(--wcc-space) * 3);
}

.wcc-muted { color: var(--wcc-stone); }

/* ── Navigation ─────────────────────────────────────────────── */

.wcc-nav {
  background: var(--wcc-nav-bg);
  border-bottom: 3px solid var(--wcc-nav-accent);
}
.wcc-nav .navbar-brand {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  color: var(--wcc-bone);
  font-size: var(--wcc-text-lg);
}
.wcc-nav .nav-link {
  color: var(--wcc-tan);
  padding: calc(var(--wcc-space) * 1.25) calc(var(--wcc-space) * 1.75);
}
.wcc-nav .nav-link:hover,
.wcc-nav .nav-link:focus-visible { color: var(--wcc-bone); }
.wcc-nav .nav-link.active {
  color: var(--wcc-bone);
  box-shadow: inset 0 -2px 0 var(--wcc-walnut);
}
.wcc-nav .navbar-text { color: var(--wcc-stone); font-size: var(--wcc-text-sm); }

/* ── Surfaces ───────────────────────────────────────────────── */

.card {
  --bs-card-bg: var(--wcc-paper);
  --bs-card-border-color: var(--wcc-tan);
  --bs-card-cap-bg: var(--wcc-tan-soft);
  --bs-card-spacer-y: calc(var(--wcc-space) * 3);
  --bs-card-spacer-x: calc(var(--wcc-space) * 3);
  box-shadow: none;
}
.card-header {
  font-weight: 600;
  color: var(--wcc-ink);
  border-bottom-color: var(--wcc-tan);
}

/* ── Buttons ────────────────────────────────────────────────── */
/* Primary is ink, never walnut and never a status colour, so that a
   call to action is never mistaken for a warning. */

.btn {
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1.1rem;
  --bs-btn-font-weight: 500;
  min-height: 44px;                      /* touch target - teachers use phones */
}
.btn-primary {
  --bs-btn-bg: var(--wcc-ink);
  --bs-btn-border-color: var(--wcc-ink);
  --bs-btn-color: var(--wcc-bone);
  --bs-btn-hover-bg: var(--wcc-ink-soft);
  --bs-btn-hover-border-color: var(--wcc-ink-soft);
  --bs-btn-active-bg: #000;
  --bs-btn-disabled-bg: var(--wcc-stone);
  --bs-btn-disabled-border-color: var(--wcc-stone);
}
.btn-outline-primary {
  --bs-btn-color: var(--wcc-walnut-dk);
  --bs-btn-border-color: var(--wcc-walnut);
  --bs-btn-hover-bg: var(--wcc-walnut);
  --bs-btn-hover-border-color: var(--wcc-walnut);
  --bs-btn-hover-color: var(--wcc-paper);
}
.btn-link { color: var(--wcc-walnut-dk); text-underline-offset: 3px; }

/* ── Forms ──────────────────────────────────────────────────── */

.form-label { font-weight: 500; font-size: var(--wcc-text-sm); margin-bottom: 0.35rem; }
.form-control, .form-select {
  border-color: var(--wcc-tan);
  padding: 0.55rem 0.75rem;
  min-height: 44px;
  background: var(--wcc-paper);
  color: var(--wcc-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--wcc-walnut);
  box-shadow: 0 0 0 3px rgba(138, 90, 43, 0.18);
}
.form-text { color: var(--wcc-stone); font-size: var(--wcc-text-sm); }

/* Visible keyboard focus everywhere, not just on inputs. */
:focus-visible {
  outline: 2px solid var(--wcc-walnut);
  outline-offset: 2px;
}

/* ── Tables ─────────────────────────────────────────────────── */

.table {
  --bs-table-bg: var(--wcc-paper);
  --bs-table-border-color: var(--wcc-tan);
  --bs-table-color: var(--wcc-ink);
}
.table > thead {
  border-bottom: 2px solid var(--wcc-ink);
}
.table > thead th {
  font-weight: 600;
  font-size: var(--wcc-text-sm);
  color: var(--wcc-ink);
}

/* The roster is the one place the board motif is literal: numbered slots
   1..seats_requested laid out in alternating squares. Nothing else in the
   application gets decorative texture. */
.wcc-board tbody tr:nth-child(odd)  { background: var(--wcc-paper); }
.wcc-board tbody tr:nth-child(even) { background: var(--wcc-tan-soft); }
.wcc-board td { vertical-align: middle; }
.wcc-slot-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wcc-stone);
  width: 3rem;
}

/* ── Status ─────────────────────────────────────────────────── */
/* Colour is never the only
   signal each state carries an icon and a text label as well. */

.wcc-slot-paid   { border-left: 4px solid var(--wcc-paid); }
.wcc-slot-unpaid {
  border-left: 4px solid var(--wcc-unpaid);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    var(--wcc-unpaid-hatch) 6px, var(--wcc-unpaid-hatch) 12px
  );
  color: var(--wcc-stone);
}
.wcc-slot-unpaid input, .wcc-slot-unpaid select { pointer-events: none; opacity: 0.55; }

.wcc-flag-red    { border-left: 4px solid var(--wcc-unpaid); background: var(--wcc-unpaid-bg); }
.wcc-flag-orange { border-left: 4px solid var(--wcc-warn);   background: var(--wcc-warn-bg); }
.wcc-flag-yellow { border-left: 4px solid var(--wcc-note);   background: var(--wcc-note-bg); }
.wcc-flag-red, .wcc-flag-orange, .wcc-flag-yellow { border-radius: 0; }

.wcc-stat { border: 1px solid var(--wcc-tan); background: var(--wcc-paper); padding: calc(var(--wcc-space) * 2.5); }
.wcc-stat-value {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--wcc-text-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.wcc-stat-label { font-size: var(--wcc-text-sm); color: var(--wcc-stone); }

.progress { --bs-progress-bg: var(--wcc-tan-soft); --bs-progress-bar-bg: var(--wcc-ink); height: 0.6rem; }

.badge-phase {
  background: var(--wcc-tan-soft);
  color: var(--wcc-walnut-dk);
  border: 1px solid var(--wcc-tan);
  font-weight: 500;
  padding: 0.4em 0.7em;
}

/* ── Alerts ─────────────────────────────────────────────────── */

.alert { border-radius: 0; border-width: 0 0 0 4px; }
.alert-success { background: var(--wcc-paid-bg);   border-color: var(--wcc-paid);   color: var(--wcc-paid-text); }
.alert-danger  { background: var(--wcc-unpaid-bg); border-color: var(--wcc-unpaid); color: var(--wcc-unpaid-text); }
.alert-warning { background: var(--wcc-warn-bg);   border-color: var(--wcc-warn);   color: var(--wcc-warn-text); }
.alert-info    { background: var(--wcc-tan-soft);  border-color: var(--wcc-walnut); color: var(--wcc-ink); }

/* ── Footer ─────────────────────────────────────────────────── */

.wcc-footer {
  background: var(--wcc-footer-bg);
  color: var(--wcc-tan);
  font-size: var(--wcc-text-sm);
  padding: calc(var(--wcc-space) * 5) 0;
  margin-top: calc(var(--wcc-space) * 8);
}
.wcc-footer a { color: var(--wcc-bone); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Sortable table headers. The caret marks the active column and its
   direction; aria-sort on the th carries the same fact to screen readers. */
.wcc-sortable thead th a {
  color: var(--wcc-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.wcc-sortable thead th a:hover { color: var(--wcc-walnut-dk); text-decoration: underline; }
.wcc-sortable thead th[aria-sort="none"] a::after     { content: "↕"; color: var(--wcc-tan); }
.wcc-sortable thead th[aria-sort="ascending"] a::after  { content: "↑"; color: var(--wcc-walnut); }
.wcc-sortable thead th[aria-sort="descending"] a::after { content: "↓"; color: var(--wcc-walnut); }


/* Table links are navigation within a data grid, not prose links. Ink with
   a walnut underline on hover reads as "this row opens" without turning the
   column into a wall of blue. */
.table a {
  color: var(--wcc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--wcc-tan);
}
.table a:hover,
.table a:focus-visible {
  color: var(--wcc-walnut-dk);
  border-bottom-color: var(--wcc-walnut);
}

/* mailto and tel links on the detail screen are real links, keep them
   underlined so they read as actionable. */
.table a[href^="mailto:"],
.table a[href^="tel:"] {
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--wcc-walnut-dk);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--wcc-unpaid);
  background-image: none;
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

a.wcc-stat-link,
a.wcc-stat-link:hover,
a.wcc-stat-link:focus-visible {
  color: inherit;
  text-decoration: none;
  display: block;
}
a.wcc-stat-link .wcc-stat-value { color: var(--wcc-ink); }
a.wcc-stat-link .wcc-stat-label { color: var(--wcc-stone); }
a.wcc-stat-link:hover .wcc-stat { border-color: var(--wcc-walnut); }

/* ── Logo ───────────────────────────────────────────────────── */
/* The mark is black-and-white on a white disc with a transparent surround,
   so it reads correctly on both the ink navbar and the bone page without
   any treatment. Do not add a filter or a background, either would break
   the other context. */

.wcc-logo-nav {
  height: 68px;
  width: auto;
  flex-shrink: 0;
}

.wcc-logo-hero {
  width: 110px;
  height: auto;
}

@media (max-width: 575.98px) {
  .wcc-logo-nav { height: 68px; }
  .wcc-logo-hero { width: 88px; }
  .wcc-nav .navbar-brand { font-size: var(--wcc-text-base); }
  .wcc-brand-text { max-width: 9rem; }
}

/* Print: the disc is pure black and white, so it photocopies cleanly. Kept
   small, a roster sheet is a working document, not a letterhead. */
.wcc-logo-print {
  width: 54px;
  height: auto;
}

.wcc-brand-text {
  line-height: 1.15;
}