/* RCJ Scoreboard — Linear Light theme
 * -------------------------------------------------------------------
 * Palette aligned to cms.robocup.org (warm off-white + RoboCup orange
 * + burgundy). Sits on top of Bootstrap 5 so un-rewritten templates
 * inherit the theme via component overrides. New pages should lean on
 * the shell + component primitives defined in this file rather than
 * Bootstrap utilities.
 *
 * Source-of-truth mockups: docs/redesign-mockups/v3/linear-light/
 * -------------------------------------------------------------------
 */

/* ═══ Fonts ═══ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* ═══ Tokens ═══ */
:root {
  --bg:          #f8f5f1;
  --surface:     #ffffff;
  --surface-2:   #f0ebe7;
  --line:        #e8e2dc;
  --line-2:      #d4cdd2;
  --ink:         #2c1a10;
  --ink-2:       #5c5250;
  --mute:        #9b9290;
  --dim:         #b8b0ac;
  --accent:      #f26223;
  --accent-h:    #d9531a;
  --accent-soft: #fdf2f0;
  --emphasis:    #4d0b18;
  --emphasis-h:  #3a0812;
  --emphasis-soft:#f5e8e8;
  --ok:          #15803d;
  --ok-soft:     #e7f4ea;
  --warn:        #8a5a00;
  --warn-soft:   #fbefd2;
  --danger:      #4d0b18;
  --danger-soft: #f5e8e8;

  /* Bootstrap 5.2+ CSS-var hooks — reskins stock components without !important. */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-font-size: 13.5px;
  --bs-body-line-height: 1.5;
  --bs-border-color: var(--line);
  --bs-border-radius: 6px;
  --bs-border-radius-sm: 4px;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 242, 98, 35;
  --bs-secondary: var(--ink-2);
  --bs-danger: var(--danger);
  --bs-danger-rgb: 77, 11, 24;
  --bs-success: var(--ok);
  --bs-warning: var(--warn);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-h);
  --bs-link-color-rgb: 242, 98, 35;
}

/* ═══ Base ═══ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 0;
}
h1, .h1 { font-size: 22px; line-height: 1.25; }
h2, .h2 { font-size: 18px; line-height: 1.3; }
h3, .h3 { font-size: 16px; }
h4, .h4 { font-size: 15px; font-weight: 600; }
h5, .h5 { font-size: 14px; font-weight: 600; }
h6, .h6 { font-size: 13px; font-weight: 600; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.display-5 { font-size: 32px; }

code, kbd, samp, pre, .mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.92em;
}
code {
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(242, 98, 35, 0.22);
  font-size: 0.88em;
}
.text-muted { color: var(--mute) !important; }
.lead { color: var(--ink-2); font-weight: 400; font-size: 15px; }
small { color: var(--mute); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); text-decoration: underline; text-underline-offset: 2px; }

/* ═══ App shell ═══ */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 48px 1fr;
  min-height: 100vh;
}
.app.nosidebar { grid-template-columns: 1fr; }
.app.nosidebar .sidebar { display: none; }
.app.nosidebar .main { grid-column: 1; }
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sidebar {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow-y: auto;
  max-height: calc(100vh - 48px);
  position: sticky;
  top: 48px;
}
.main {
  grid-column: 2;
  grid-row: 2;
  background: var(--bg);
  min-width: 0;
}

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { grid-column: 1; }
  /* The breadcrumb trail and the (decorative, keyboard-only) command
     bar force the topbar wider than a phone viewport, causing
     horizontal overflow of the whole page. Drop both on small screens;
     the page heading conveys location and the bar is non-functional. */
  .topbar .crumbs,
  .topbar .kbar { display: none; }
}

/* ═══ Topbar ═══ */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
  height: 100%;
}
.brand .brand-mark {
  width: 20px; height: 20px; border-radius: 4px;
  background: var(--accent); color: #fff;
  font-family: 'Geist Mono', monospace;
  font-weight: 700; font-size: 12px;
  display: grid; place-items: center;
}
.brand .brand-name {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 14px;
}
.brand .brand-name:hover { color: var(--ink); text-decoration: none; }
.brand .brand-slash { color: var(--line-2); }
.brand .brand-sub { color: var(--mute); font-size: 12px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  color: var(--ink-2);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  flex-wrap: wrap;
  min-width: 0;
  overflow: hidden;
}
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { color: var(--line-2); }
.crumbs .cur { color: var(--ink); }

.topbar-spacer { flex: 1; }

.kbar {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  min-width: 220px;
  cursor: pointer;
}
.kbar .kbd {
  border: 1px solid var(--line-2);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--ink-2);
  background: var(--surface);
  font-family: 'Geist Mono', monospace;
}

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f47d47);
  margin-left: 12px;
  color: #fff;
  font-size: 11px;
  display: grid; place-items: center;
  font-weight: 600;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
}
.topbar-actions .logout-form { display: inline-block; margin: 0; }

/* ═══ Sidebar ═══ */
.side-section {
  padding: 14px 14px 6px;
  color: var(--mute);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
  font-size: 13px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.side-item:hover {
  color: var(--ink);
  background: var(--surface-2);
  text-decoration: none;
}
.side-item.active {
  color: var(--ink);
  background: var(--accent-soft);
  font-weight: 500;
  border-left-color: var(--accent);
}
.side-item .icon {
  width: 14px;
  color: var(--mute);
  flex: 0 0 auto;
  font-size: 12px;
  display: inline-grid;
  place-items: center;
}
.side-item.active .icon { color: var(--accent); }
.side-item .count {
  margin-left: auto;
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
}
.side-item.nested { padding-left: 30px; font-size: 12.5px; }
.side-item.nested-2 { padding-left: 48px; font-size: 12px; color: var(--mute); }
.side-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.side-sep { height: 1px; background: var(--line); margin: 8px 12px; }

/* ═══ Main head + meta ═══ */
.main-head {
  padding: 22px 28px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.main-head h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.main-head .eyebrow {
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.main-head .sub {
  color: var(--mute);
  margin-top: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.main-head .sub a { color: var(--mute); }
.main-head .sub a:hover { color: var(--ink); }
.main-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.meta-row {
  display: flex;
  gap: 8px;
  padding: 0 28px 14px;
  align-items: center;
  flex-wrap: wrap;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.section-head h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}
.section-head .muted {
  color: var(--mute);
  font-weight: 400;
  margin-left: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
}

/* Content wrapper used by plain pages */
.page {
  padding: 22px 28px 80px;
  max-width: 1280px;
}

/* Messages wrap (top of main) */
.messages-wrap {
  padding: 14px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.messages-wrap .alert { margin: 0; }

/* ═══ Pills + chips + identifier badges ═══ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: var(--surface);
}
.pill.ok      { color: var(--ok);       border-color: rgba(21,128,61,.3);  background: var(--ok-soft); }
.pill.accent  { color: var(--accent);   border-color: rgba(242,98,35,.3);  background: var(--accent-soft); }
.pill.mute    { color: var(--mute);     border-color: var(--line-2);       background: var(--surface-2); }
.pill.warn    { color: var(--warn);     border-color: rgba(138,90,0,.3);   background: var(--warn-soft); }
.pill.danger  { color: var(--danger);   border-color: rgba(77,11,24,.3);   background: var(--danger-soft); }
.pill.big     { font-size: 12px; padding: 3px 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed var(--line-2);
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--mute);
  font-size: 12px;
  cursor: pointer;
}
.chip.on {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.lg-code {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(242, 98, 35, 0.25);
}

.kbd, kbd {
  border: 1px solid var(--line-2);
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10.5px;
  color: var(--mute);
  background: var(--surface-2);
  font-family: 'Geist Mono', monospace;
}

/* ═══ Buttons (mockup + Bootstrap overrides in one block) ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: var(--surface-2); border-color: var(--ink-2); color: var(--ink); text-decoration: none; }
.btn-sm, .btn.sm { padding: 4px 9px; font-size: 11.5px; }
.btn-lg { padding: 9px 16px; font-size: 14px; }

.btn-primary, .btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn.primary:hover {
  background: var(--accent-h); border-color: var(--accent-h); color: #fff;
}
.btn-outline-primary {
  color: var(--accent); border-color: rgba(242,98,35,.45); background: var(--surface);
}
.btn-outline-primary:hover {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-h);
}
.btn-secondary, .btn-outline-secondary {
  color: var(--ink-2); background: var(--surface); border-color: var(--line-2);
}
.btn-outline-secondary:hover, .btn-secondary:hover {
  color: var(--ink); background: var(--surface-2); border-color: var(--ink-2);
}
.btn-danger, .btn-outline-danger, .btn.danger {
  color: var(--danger); background: var(--surface); border-color: rgba(77,11,24,.4);
}
.btn-outline-danger:hover, .btn-danger:hover, .btn.danger:hover {
  background: var(--danger-soft); border-color: var(--danger); color: var(--emphasis-h);
}
.btn-warning, .btn-outline-warning, .btn.warn {
  color: var(--warn); background: var(--surface); border-color: rgba(138,90,0,.4);
}
.btn-outline-warning:hover, .btn-warning:hover, .btn.warn:hover {
  background: var(--warn-soft); border-color: var(--warn); color: var(--warn);
}
.btn-success, .btn-outline-success {
  color: var(--ok); background: var(--surface); border-color: rgba(21,128,61,.4);
}
.btn-outline-success:hover, .btn-success:hover {
  background: var(--ok-soft); border-color: var(--ok); color: var(--ok);
}

.btn-primary .kbd, .btn.primary .kbd {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12);
}

/* Bootstrap btn-group — lose the default radii joins, match the mockup */
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: 6px 0 0 6px; }
.btn-group .btn:last-child { border-radius: 0 6px 6px 0; }
.btn-group .btn + .btn { border-left-width: 0; }
.btn-group .btn + .btn:hover { border-left-width: 1px; margin-left: -1px; }

/* ═══ Tables ═══ */
.table {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: var(--surface-2);
  margin-bottom: 0;
  font-size: 13px;
}
.table > :not(caption) > * > * {
  padding: 8px 12px;
  border-bottom-color: var(--line);
}
.table thead th, .table thead td {
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line) !important;
}
.table-sm > :not(caption) > * > * { padding: 6px 10px; }

/* Bootstrap state tints, reskinned for diff screens */
.table-danger, .table-danger > th, .table-danger > td {
  --bs-table-bg: var(--danger-soft);
  color: var(--ink-2);
  box-shadow: inset 3px 0 0 var(--danger);
}
.table-warning, .table-warning > th, .table-warning > td {
  --bs-table-bg: var(--warn-soft);
  color: var(--ink-2);
  box-shadow: inset 3px 0 0 var(--warn);
}
.table-success, .table-success > th, .table-success > td {
  --bs-table-bg: var(--ok-soft);
  color: var(--ink-2);
  box-shadow: inset 3px 0 0 var(--ok);
}

/* Wrap loose .table elements in a framed look */
main .table:not(.table-borderless),
main .table-responsive {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* ═══ Badges ═══ */
.badge {
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  text-transform: none;
}
.badge.bg-primary, .bg-primary    { background: var(--accent-soft) !important;  color: var(--accent) !important;  border-color: rgba(242,98,35,.3); }
.badge.bg-secondary, .bg-secondary{ background: var(--surface-2) !important;     color: var(--ink-2) !important;   border-color: var(--line-2); }
.badge.bg-success, .bg-success    { background: var(--ok-soft) !important;       color: var(--ok) !important;      border-color: rgba(21,128,61,.3); }
.badge.bg-warning, .bg-warning    { background: var(--warn-soft) !important;     color: var(--warn) !important;    border-color: rgba(138,90,0,.3); }
.badge.bg-danger, .bg-danger      { background: var(--danger-soft) !important;   color: var(--danger) !important;  border-color: rgba(77,11,24,.3); }
.badge.bg-light, .bg-light        { background: var(--surface-2) !important;     color: var(--ink-2) !important;   border-color: var(--line); }

/* ═══ Alerts ═══ */
.alert {
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
}
.alert strong { color: var(--ink); font-weight: 600; }
.alert em { color: var(--ink); font-style: normal; background: var(--surface); border: 1px solid var(--line-2); padding: 1px 5px; border-radius: 3px; font-family: 'Geist Mono', monospace; font-size: 12px; }
.alert-info    { background: var(--accent-soft); border-color: rgba(242, 98, 35, 0.3); color: var(--ink-2); }
.alert-success { background: var(--ok-soft); border-color: rgba(21, 128, 61, 0.35); color: var(--ink-2); }
.alert-warning { background: var(--warn-soft); border-color: rgba(138, 90, 0, 0.35); color: var(--ink-2); }
.alert-danger,
.alert-error   { background: var(--danger-soft); border-color: rgba(77, 11, 24, 0.35); color: var(--ink-2); }

/* ═══ Preconditions list (#54 next-round confirm; reusable) ═══ */
.precond-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.precond-list .precond {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}
.precond-list .precond:last-child { border-bottom: none; }
.precond-list .precond::before {
  content: "";
  display: inline-block;
  flex: 0 0 14px;
  height: 14px;
  border-radius: 50%;
  position: relative;
  top: 2px;
}
.precond-list .precond .label { color: var(--ink); font-weight: 500; }
.precond-list .precond .muted { color: var(--ink-2); }
.precond-list .precond-ok::before {
  background: var(--ok-soft);
  border: 1px solid var(--ok);
  box-shadow: inset 0 0 0 3px var(--ok-soft);
}
/* No `.precond-warn` rule today: no code path emits status="warn".
   Add the rule alongside the first emit so the dead-code lifetime
   is bounded. */
.precond-list .precond-fail::before {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  box-shadow: inset 0 0 0 3px var(--danger-soft);
}
.precond-list .precond-fail .label { color: var(--danger); }
.precond-list .precond-fail .muted { color: var(--ink); }

/* ═══ Top-of-standings preview (#54) ═══ */
.standings-preview {
  list-style: none;
  margin: 0;
  padding: 0;
}
.standings-preview > li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.standings-preview > li:last-child { border-bottom: none; }
.standings-preview .rank {
  font-family: 'Geist Mono', monospace;
  color: var(--mute);
  flex: 0 0 32px;
}
.standings-preview .team { color: var(--ink); font-weight: 500; flex: 1; }
.standings-preview .muted { color: var(--ink-2); }

/* ═══ Disabled-button affordance (used everywhere) ═══ */
.btn:disabled,
.btn[disabled],
button.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  /* `pointer-events: none` would prevent the cursor from showing on
     hover, defeating its own purpose. Keep events on, intercept the
     click via `pointer-events` only on inner content if needed. */
  filter: grayscale(0.4);
}
.btn:disabled:hover,
.btn[disabled]:hover,
button.btn:disabled:hover {
  /* Hold the disabled visuals against the normal :hover overrides
     (which would otherwise lighten/darken the background and undo
     the muted look). */
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* ═══ Form action row (#54 confirm pages: submit + cancel) ═══ */
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 0;
  margin-top: 6px;
}
.form-actions .form-actions-help {
  flex: 1;
  font-size: 12.5px;
  color: var(--ink-2);
  text-align: right;
  padding-right: 4px;
}

/* ═══ List-group (used by league list, stage list drag-reorder) ═══ */
.list-group {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.list-group-item {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  padding: 11px 14px;
  font-size: 13.5px;
}
.list-group-item:hover { background: var(--surface-2); }
.list-group-item strong { font-weight: 600; }
.list-group-item a { color: var(--accent); }

/* ═══ Forms ═══ */
.form-control, .form-select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  padding: 7px 10px;
  border-radius: 6px;
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 98, 35, 0.15);
}
.form-label {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.form-text { color: var(--mute); font-size: 11.5px; }
textarea.form-control { line-height: 1.5; }
.invalid-feedback { color: var(--danger); font-size: 11.5px; }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); }

/* ═══ Breadcrumbs (Bootstrap, when still used) ═══ */
.breadcrumb {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 10px;
}
.breadcrumb-item a { color: var(--mute); }
.breadcrumb-item a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb-item.active { color: var(--ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--line-2); content: "/"; }

/* ═══ Definition lists (tournament dashboard) ═══ */
dl.row { margin: 0; }
dl.row dt {
  color: var(--mute);
  font-weight: 500;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  padding-top: 8px;
}
dl.row dd {
  color: var(--ink);
  padding-top: 8px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 10px;
  margin-bottom: 0;
}
dl.row dt:last-of-type, dl.row dd:last-of-type { border-bottom: none; }

/* Reorder grip */
.bi-grip-vertical { color: var(--dim); cursor: grab; }
.bi-grip-vertical:hover { color: var(--ink-2); }

/* ═══ Panel ═══
 * Bordered white box used for grouping content (property grids, list
 * sections, stage tables). Replaces the Bootstrap "card" for the new
 * design language — tighter and flatter than Bootstrap's default card.
 */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 28px 20px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  gap: 12px;
}
.panel-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.panel-title .muted {
  color: var(--mute);
  font-weight: 400;
  margin-left: 6px;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
}
.panel-body { padding: 14px 16px; }
.panel-body.padless { padding: 0; }
.panel-empty {
  padding: 22px 16px;
  color: var(--mute);
  text-align: center;
  font-size: 13px;
}

/* ═══ Key-value property grid ═══ */
dl.kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  margin: 0;
  font-size: 13px;
}
dl.kv dt {
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  border-top: none;
}
dl.kv dd {
  color: var(--ink);
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
dl.kv > dt:last-of-type,
dl.kv > dd:last-of-type { border-bottom: none; }
dl.kv .desc {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ═══ Leagues list (rows of clickable league cards) ═══ */
.leagues-list {
  display: flex;
  flex-direction: column;
}
.league-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: background .12s;
}
.league-row:last-child { border-bottom: none; }
.league-row:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.league-row .league-name {
  font-weight: 500;
  color: var(--ink);
  font-size: 14px;
}
.league-row .league-meta {
  margin-left: auto;
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ═══ Group-header rows (grouped tables like stage entries) ═══ */
.table tr.group-head > td {
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
}
.table tr.group-head > td .muted {
  color: var(--mute);
  font-weight: 400;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* ═══ Strikethrough for withdrawn/cancelled entries ═══ */
.table tr.is-withdrawn td { color: var(--mute); }
.table tr.is-withdrawn td .team-name {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-color: var(--dim);
}

/* ═══ Hint row at bottom of dense tables ═══ */
.kb-hint {
  display: flex;
  gap: 16px;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--mute);
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.kb-hint .k {
  border: 1px solid var(--line-2);
  padding: 0 5px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink-2);
  margin-right: 4px;
}
.kb-hint .k.dim { opacity: 0.45; }

/* Reorder grip */
.bi-grip-vertical { color: var(--dim); cursor: grab; }
.bi-grip-vertical:hover { color: var(--ink-2); }

/* ═══ Responsive tweaks ═══ */
@media (max-width: 760px) {
  .main-head, .meta-row, .section-head, .panel { padding-left: 16px; padding-right: 16px; }
  .panel { margin-left: 14px; margin-right: 14px; }
  dl.kv { grid-template-columns: 110px 1fr; }
}

/* Utility cleanup so pages that still use bootstrap spacing utilities behave */
.mt-4 { margin-top: 24px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 20px !important; }

/* --- Host standings view (#47) ----------------------------------- */

/* Right-align numeric stat columns. */
.table.standings td.num,
.table.standings th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cut line between last qualifier and first non-qualifier. */
.table.standings tbody tr[data-cut="true"] > td {
  border-top: 2px solid var(--accent);
}

/* Non-qualifying rows are slightly de-emphasised. */
.table.standings tbody tr[data-qualifies="false"] > td {
  color: var(--mute);
}

/* Per-group / overall subheads between _table.html includes. */
.panel-subhead {
  padding: 14px 14px 6px;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Stage selector in the host standings header. */
.inline-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.inline-form select {
  padding: 4px 8px;
  font-size: 13px;
}

/* Sign-out form in the sidebar: looks like a side-item row but is a
   POST form for CSRF safety. Button resets the default browser
   styling so it matches surrounding side-item entries. */
.side-logout-form {
  padding: 0;
  margin: 0;
}
.side-logout-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.side-logout-button:hover {
  background: var(--hover, rgba(0, 0, 0, 0.04));
}

/* ═══ Match results entry (#28) ═══
 * Scorecard-row layout for the Editor's results-entry grid.
 * Each match is a slim horizontal row inside a single .panel:
 *   home-name → stepper-:-stepper → away-name → Save
 * with a quiet mono meta sub-line below. Rows are grouped by
 * scheduled start time. Status messages absorb into an inline
 * .mre-status slot under the meta line.
 */

.mre-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 28px 14px;
  flex-wrap: wrap;
}
.mre-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mre-toolbar-label {
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
.mre-toolbar-spacer { flex: 1; }
.mre-toolbar input[type="date"] { width: auto; max-width: 160px; }
.mre-toolbar select.form-select { width: auto; max-width: 220px; }

.mre-seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
}
.mre-seg button,
.mre-seg .mre-seg-link {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  padding: 5px 11px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mre-seg button:last-child,
.mre-seg .mre-seg-link:last-child { border-right: 0; }
.mre-seg button:hover,
.mre-seg .mre-seg-link:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.mre-seg .on,
.mre-seg button.on,
.mre-seg .mre-seg-link.on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.mre-jump {
  display: inline-flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
}
.mre-jump .mre-jump-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  background: var(--surface-2);
  color: var(--mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  border-right: 1px solid var(--line);
}
.mre-jump input {
  appearance: none;
  border: 0;
  background: var(--surface);
  padding: 5px 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  width: 160px;
  outline: none;
}
.mre-jump input::placeholder { color: var(--dim); }
.mre-jump button {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  padding: 0 11px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.mre-jump button:hover { background: var(--surface-2); color: var(--ink); }

/* Time-group separator inside the panel body. */
.mre-time-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 18px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mre-rows > .mre-time-group:first-child { border-top: none; }
.mre-time-group .mre-time-count {
  color: var(--mute);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Scorecard rows. The <form> element IS the row container so the
 * existing match_results_entry.js (which selects form.mre-row) keeps
 * working unchanged. */
.mre-rows .mre-row + .mre-row,
.mre-rows .mre-time-group + .mre-row {
  border-top: 1px solid var(--line);
}
.mre-rows > .mre-time-group + .mre-row { border-top: none; }
.mre-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  column-gap: 18px;
  padding: 14px 18px 12px;
  background: var(--surface);
  transition: background .12s;
  position: relative;
  margin: 0;
}
.mre-row:hover { background: var(--surface-2); }
.mre-row.is-focus { background: var(--accent-soft); }
.mre-row.is-focus::before,
.mre-row.is-error::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.mre-row.is-focus::before  { background: var(--accent); }
.mre-row.is-error::before  { background: var(--danger); }
.mre-row.is-locked { color: var(--mute); }

.mre-team {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  min-width: 0;
}
.mre-row.is-locked .mre-team { color: var(--mute); font-weight: 500; }
.mre-team-home { text-align: right; padding-right: 4px; }
.mre-team-away { text-align: left;  padding-left: 4px; }

/* Soft inspection warning marker on a match row (no hard block). */
.inspection-marker {
  display: inline-block;
  margin: 0 4px;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}
.inspection-marker.inspection-missing { color: var(--warn); }
.inspection-marker.inspection-failed  { color: var(--danger); }

.mre-score {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Stepper — keeps the legacy .match-stepper class so match_stepper.js
 * binds without changes; .mre-stepper just adds visual styling that
 * only applies inside .mre-row. */
.mre-row .match-stepper {
  display: inline-flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
  height: 44px;
  padding: 0;
  width: auto;
  flex-wrap: nowrap;
}
.mre-row .match-stepper button {
  appearance: none;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  width: 32px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Geist Mono', monospace;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 0;
  transition: background .12s, color .12s;
}
.mre-row .match-stepper button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.mre-row .match-stepper-input {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--surface);
  width: 64px;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  padding: 0;
  outline: none;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  flex: 0 0 auto;
}
.mre-row .match-stepper-input::-webkit-outer-spin-button,
.mre-row .match-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mre-row .match-stepper-input::placeholder { color: var(--dim); font-weight: 400; }
.mre-row .match-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 98, 35, 0.15);
}
.mre-row .match-stepper:focus-within button { color: var(--accent); }
.mre-row .match-stepper:has(input:placeholder-shown) .match-stepper-input,
.mre-row .match-stepper:has(input[value=""]) .match-stepper-input {
  color: var(--dim);
}

.mre-colon {
  font-family: 'Geist Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--mute);
  line-height: 1;
  padding-bottom: 3px;
  user-select: none;
}

.mre-save.btn {
  height: 44px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mre-save.btn .kbd { margin-left: 8px; }

/* Quiet meta sub-line beneath the team line. */
.mre-meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  margin-top: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--mute);
  flex-wrap: wrap;
}
.mre-meta .lg-code { font-size: 11.5px; padding: 2px 7px; }
.mre-meta .mre-meta-sep { color: var(--line-2); }
.mre-meta .mre-league-abbrev { color: var(--ink-2); font-weight: 500; }
.mre-meta .mre-when { color: var(--ink-2); }
.mre-meta .mre-where { color: var(--mute); }
.mre-meta .mre-open-link {
  margin-left: auto;
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
}
.mre-meta .mre-open-link:hover { text-decoration: underline; }

/* Inline status slot — absorbs error/conflict/lock messages from JS. */
.mre-status {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 6px;
  min-height: 0;
}
.mre-status:empty { display: none; }
.mre-status .mre-error {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid rgba(77, 11, 24, 0.18);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: 'Inter', sans-serif;
}
.mre-status a {
  margin-left: 8px;
  color: var(--danger);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Ghost-undo strip below the panel. */
.mre-ghost {
  list-style: none;
  margin: 0 28px 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mre-ghost-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--ok-soft);
  border: 1px solid rgba(21, 128, 61, 0.3);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.mre-ghost-item .lg-code { font-size: 11.5px; padding: 2px 7px; }
.mre-ghost-item strong {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  color: var(--ok);
  font-size: 13px;
}
.mre-ghost-item a {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mre-ghost-item .mre-countdown {
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--mute);
}
.mre-ghost-item .mre-warn { color: var(--warn); font-weight: 500; }

/* Empty-state. */
.mre-empty {
  padding: 32px 18px;
  text-align: center;
  color: var(--mute);
  font-size: 13px;
}

/* Responsive collapse — single column on narrow viewports. */
@media (max-width: 760px) {
  .mre-row {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 14px 14px 12px;
  }
  .mre-team-home, .mre-team-away { text-align: left; padding: 0; }
  .mre-score { justify-content: center; }
  .mre-save.btn { width: 100%; justify-content: center; }
  .mre-toolbar { padding-left: 14px; padding-right: 14px; }
  .mre-ghost { margin-left: 14px; margin-right: 14px; }
}

/* ═══ Form layout (inspection + shared) ═══ */
/* Dense field grid for forms with many short inputs (inspection
   criteria, module registry). Children are the renderer's mb-3 field
   blocks; each spans one column, wrapping responsively. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: 18px;
}

/* Single-row upload form: file input + caption + button. */
.photo-upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.photo-upload-row .form-control { width: auto; flex: 1 1 200px; max-width: 320px; }

.photo-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.photo-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.photo-item img { border-radius: 6px; border: 1px solid var(--line); display: block; }

/* Inline action cluster in a table row (Edit + Delete/Detach). */
.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.row-actions form { display: inline; margin: 0; }

/* Wide tables inside a panel (which clips overflow for its rounded
   corners) scroll horizontally on narrow screens instead of having
   their right-hand columns — e.g. row actions — cut off. */
.table-wrap { overflow-x: auto; }

@media (max-width: 760px) {
  /* Stack the file-upload / inline-register control rows so each field
     and button is full-width and tappable on a phone. (box-sizing is
     border-box globally via Bootstrap, so width:100% includes padding.) */
  .photo-upload-row { flex-direction: column; align-items: stretch; }
  .photo-upload-row .form-control,
  .photo-upload-row .form-select { width: 100%; max-width: none; flex: none; }
  .photo-upload-row .btn { width: 100%; justify-content: center; }
}