/*
 * ropebreak-admin.css — the RopeBreak house theme for the Django admin.
 *
 * Loads after Django's own admin CSS and re-points every variable it exposes
 * at the house tokens, then styles the surfaces those variables can't reach.
 * It reads `design/tokens.css` at runtime and defines no color of its own:
 * every value below resolves to a `--rb-*` or `--color-*` token, or to a
 * `color-mix()` of one. Change a color in tokens.css and this file follows.
 *
 * There is no light mode. RopeBreak has one theme — the arena at night — so
 * `admin/base_site.html` drops Django's `dark-mode-vars` block entirely: no
 * `dark_mode.css`, no `theme.js`, no toggle to land you in a half-branded
 * light admin. The variable map below still names `html[data-theme="…"]`
 * so the theme holds even if a consumer restores that block.
 *
 * Volume, per brand.md: the chrome is Loud (gold ramp, Big Shoulders, hard
 * rules) and the data is Quiet (system sans, tabular mono, hairline rules).
 * "Facts stay quiet" is the whole reason an admin can be this loud up top
 * without becoming unreadable in the rows.
 *
 * Unlike the public apps, the admin is staff-only and may rely on JavaScript
 * (Django's own calendar, selector and autocomplete widgets do). The JS-free
 * rule this repo enforces in bootstrap/ does not apply here.
 */

/* ==========================================================================
   1. Variable map — Django admin's surface, re-pointed at house tokens
   ========================================================================== */

/*
 * `dark_mode.css` scopes its block as `html[data-theme="light"], :root`, and
 * `html[data-theme="light"]` outranks a bare `:root`. Naming every theme
 * attribute here keeps us at equal specificity and later in the cascade, so
 * the house values win in all three states.
 */
:root,
html[data-theme="auto"],
html[data-theme="light"],
html[data-theme="dark"] {
  /* Private admin tones. Derived from the palette, never typed as hex — the
   * admin needs more steps between "canvas" and "panel" than the public
   * surfaces do, and mixing keeps them tied to the tokens they came from. */
  --rb-admin-canvas: var(--rb-navy-900);
  --rb-admin-panel: var(--rb-navy-700);
  --rb-admin-panel-sunk: color-mix(in srgb, var(--rb-navy-700) 45%, var(--rb-navy-900));
  --rb-admin-panel-raised: color-mix(in srgb, var(--rb-navy-500) 40%, var(--rb-navy-700));
  --rb-admin-line: color-mix(in srgb, var(--rb-navy-500) 55%, transparent);
  --rb-admin-line-strong: var(--rb-navy-500);
  --rb-admin-row-hover: color-mix(in srgb, var(--rb-navy-500) 22%, transparent);
  --rb-admin-gold-wash: color-mix(in srgb, var(--rb-gold-500) 12%, transparent);

  /* The red and green in tokens.css are picked for text *on* light paper and
   * for solid fills. As foreground on the arena canvas they land near 3:1, so
   * lift each toward cream for the text roles and leave the raw token for the
   * fills. Same hue, readable weight. */
  --rb-admin-danger-fg: color-mix(in srgb, var(--rb-red-600) 45%, var(--rb-cream-50));
  --rb-admin-success-fg: color-mix(in srgb, var(--rb-green-600) 40%, var(--rb-cream-50));

  /* Django admin's palette variables */
  --primary: var(--rb-navy-700);
  --secondary: var(--rb-navy-500);
  --accent: var(--rb-gold-500);
  --primary-fg: var(--rb-cream-50);

  --body-fg: var(--color-fg);
  --body-bg: var(--color-bg);
  --body-quiet-color: var(--color-fg-muted);
  --body-medium-color: var(--rb-navy-50);
  --body-loud-color: var(--rb-cream-50);

  --header-color: var(--color-fg);
  --header-branding-color: var(--rb-gold-500);
  --header-bg: var(--rb-navy-700);
  --header-link-color: var(--color-fg);

  --breadcrumbs-fg: var(--color-fg-muted);
  --breadcrumbs-link-fg: var(--rb-gold-300);
  --breadcrumbs-bg: var(--rb-admin-panel-sunk);

  --link-fg: var(--color-link);
  --link-hover-color: var(--rb-cream-50);
  --link-selected-fg: var(--rb-gold-500);

  --hairline-color: var(--rb-admin-line);
  --border-color: var(--rb-admin-line-strong);

  --error-fg: var(--rb-admin-danger-fg);

  --message-debug-bg: var(--rb-admin-panel);
  --message-info-bg: color-mix(in srgb, var(--rb-navy-500) 55%, var(--rb-navy-900));
  --message-success-bg: color-mix(in srgb, var(--rb-green-600) 32%, var(--rb-navy-900));
  --message-warning-bg: color-mix(in srgb, var(--rb-gold-700) 30%, var(--rb-navy-900));
  --message-error-bg: color-mix(in srgb, var(--rb-red-600) 32%, var(--rb-navy-900));

  --darkened-bg: var(--rb-admin-panel-sunk);
  --selected-bg: var(--rb-admin-gold-wash);
  --selected-row: color-mix(in srgb, var(--rb-gold-500) 16%, transparent);

  --button-fg: var(--rb-cream-50);
  --button-bg: var(--rb-navy-500);
  --button-hover-bg: color-mix(in srgb, var(--rb-navy-300) 70%, var(--rb-navy-500));
  /* The default button is the championship moment of a form: belt gold. */
  --default-button-bg: var(--rb-gold-500);
  --default-button-hover-bg: var(--rb-gold-300);
  --close-button-bg: color-mix(in srgb, var(--rb-navy-500) 55%, transparent);
  --close-button-hover-bg: var(--rb-navy-500);
  --delete-button-bg: var(--rb-red-600);
  --delete-button-hover-bg: color-mix(in srgb, var(--rb-red-600) 75%, var(--rb-navy-900));

  --object-tools-fg: var(--rb-cream-50);
  --object-tools-bg: color-mix(in srgb, var(--rb-navy-500) 70%, transparent);
  --object-tools-hover-bg: var(--rb-gold-500);

  --font-family-primary: var(--font-sans);
  --font-family-monospace: var(--font-mono);

  /* Mirrors tokens.css. Carries the single-theme decision to the surfaces
   * custom properties can't reach: native controls, scrollbars, and the
   * canvas the browser paints before the stylesheet lands. */
  color-scheme: dark;
}

/* ==========================================================================
   2. Shape — bracket-board, not modern-app
   ========================================================================== */

/*
 * "Square corners, no rounding, on cards that carry tournament or
 * card-of-matches data. Roundness reads modern-app; we want bracket-board."
 * An admin is nothing but data surfaces, so the rounding goes to zero across
 * the board. The only survivors are the pill-shaped chips in the data kit,
 * where the pill *is* the affordance.
 */
.module,
.button,
a.button,
input[type="submit"],
input[type="button"],
button,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.vTextField,
.errornote,
ul.messagelist li,
ul.errorlist,
.object-tools a,
.paginator a,
.paginator a:link,
.paginator a:visited,
#toolbar #searchbar,
#changelist-filter,
.calendarbox,
.clockbox,
.selector select,
.selector-filter input,
.inline-related fieldset,
.related-widget-wrapper-link {
  border-radius: 0;
}

/* ==========================================================================
   3. Type — marquee up top, plain in the rows
   ========================================================================== */

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
 * "Display type wants size. Don't ship it under 20 px." Big Shoulders is
 * reserved for the three places in an admin that clear that bar: the site
 * name, the page title, and the login plate. Every other heading in here —
 * module captions, fieldset legends, filter headers — would land at 13–17 px,
 * so it gets the *kicker* treatment instead (§3.2): uppercase, tracked wide,
 * gold, system sans. Two typographic moves, applied consistently, instead of
 * condensed type squeezed into places it reads cramped.
 */

/* 3.1 Marquee */

#site-name,
#site-name a:link,
#site-name a:visited,
#content h1,
.login #header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: var(--line-height-tight);
}

#content h1 {
  font-size: var(--font-fluid-xl);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-2);
  color: var(--rb-cream-50);
  /* Hard rule — the title-card underline. */
  border-bottom: 2px solid var(--rb-gold-500);
}

/* The page subtitle sits under the marquee and stays quiet. */
#content h2,
#content .subhead {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
}

/* 3.2 Kicker — the small-caps gold label, used everywhere a heading is too
 * small to carry display type. Mirrors `.rb-marquee-kicker` in the Bootstrap
 * theme so the two systems agree. */

.module h2,
.module caption,
.inline-group h2,
#changelist-filter h2,
#content-related .module h2,
.selector-available-title,
.selector-chosen-title,
fieldset > legend,
.aligned legend {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rb-gold-500);
  background: var(--rb-admin-panel);
  border-bottom: 1px solid var(--rb-admin-line-strong);
}

.module caption a.section:link,
.module caption a.section:visited,
.module h2 a:link,
.module h2 a:visited {
  color: var(--rb-gold-500);
}

/* 3.3 Numbers stay quiet and aligned. Tabular figures everywhere a column of
 * them can occur — that is most of a wrestling database. */

.rb-stat,
.rb-num,
td.field-id,
th.field-id,
.paginator,
.vIntegerField,
.vBigIntegerField,
.vPositiveSmallIntegerField,
.datetime input,
input.vDateField,
input.vTimeField {
  font-variant-numeric: tabular-nums;
}

code,
pre,
.rb-stat,
fieldset.monospace textarea {
  font-family: var(--font-mono);
}

/* ==========================================================================
   4. Chrome — header, breadcrumbs, sidebar
   ========================================================================== */

#header {
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--rb-admin-panel);
  /* Hard rule under the marquee band — the single loudest line on the page. */
  border-bottom: 2px solid var(--rb-gold-500);
}

#branding {
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

#site-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-end: var(--space-4);
  font-size: var(--font-fluid-xl);
}

#site-name a:link,
#site-name a:visited {
  display: flex;
  align-items: center;
  color: var(--rb-gold-500);
  text-decoration: none;
}

/*
 * Gold ramp on the wordmark — "the single most 'wrestling' move in the kit",
 * spent here on the one championship moment the chrome gets. This is the
 * fallback path: when the inline SVG mark is unavailable the header renders
 * ROPEBREAK as type and reproduces the mark's own gradient. Degrades to flat
 * gold where `background-clip: text` isn't supported, which is a fine second
 * place.
 */
.rb-admin-wordmark {
  color: var(--rb-gold-500);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rb-admin-wordmark {
    background-image: linear-gradient(
      180deg,
      var(--rb-gold-300) 0%,
      var(--rb-gold-500) 55%,
      var(--rb-gold-700) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* The mark itself, inlined by base_site.html. Its colors are locked — "don't
 * recolor the marks" — so it gets size and nothing else. The banner variant is
 * 540×130, which at this height lands around 170 px wide: inside the ≤250 px
 * band where brand.md calls for the cropped variant, which is what we inline. */
.rb-admin-mark {
  display: block;
  flex: none;
  width: auto;
  height: 2.4rem;
}

/* Server wall clock. An admin editing broadcast schedules across time zones
 * needs to know which one the server is answering in. */
.rb-admin-clock {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
  white-space: nowrap;
}

/*
 * Django's light/dark/auto control. `base_site.html` drops the `dark-mode-vars`
 * block, so `theme.js` never loads and the button could not work — and
 * `dark_mode.css`, which is what normally hides two of its three icons, is
 * gone with it. Hiding it here is the last step of removing it: no dead
 * control, and no template fork to keep in sync with upstream.
 */
.theme-toggle {
  display: none;
}

/* Tagline beside the mark: which in-house admin am I looking at. */
.rb-admin-tagline {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-fg-muted);
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--rb-admin-line-strong);
  white-space: nowrap;
}

/* Cross-app links in the header (month view, feeds, sibling services). */
.rb-admin-navlink {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#header .rb-admin-navlink:link,
#header .rb-admin-navlink:visited {
  color: var(--color-fg-muted);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

#header .rb-admin-navlink:focus,
#header .rb-admin-navlink:hover {
  color: var(--rb-gold-300);
  border-bottom-color: var(--rb-gold-500);
  text-decoration: none;
}

#branding nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

#user-tools {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
}

#user-tools a:link,
#user-tools a:visited,
#logout-form button {
  color: var(--rb-gold-300);
}

#logout-form button {
  font-family: var(--font-sans);
  font-size: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

div.breadcrumbs {
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--rb-admin-panel-sunk);
  border-bottom: 1px solid var(--rb-admin-line);
}

div.breadcrumbs a:link,
div.breadcrumbs a:visited {
  color: var(--rb-gold-300);
}

#footer {
  padding: var(--space-4) var(--space-6);
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
}

/* Skip link — brand focus treatment, matching `.rb-skip-link`. */
.skip-to-content-link {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-radius: 0;
}

/* 4.1 Nav sidebar */

#nav-sidebar {
  background: var(--rb-admin-panel-sunk);
  border-inline-end: 1px solid var(--rb-admin-line-strong);
}

#nav-sidebar .module th,
#nav-sidebar .module td {
  border-bottom: 1px solid var(--rb-admin-line);
}

#nav-sidebar .current-model,
#nav-sidebar .current-model th {
  background: var(--rb-admin-gold-wash);
}

/* A gold spine on the current model — the bracket-frame motif, at nav scale. */
#nav-sidebar .current-model th {
  box-shadow: inset 3px 0 0 0 var(--rb-gold-500);
}

#nav-filter {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border: 1px solid var(--rb-admin-line-strong);
  border-radius: 0;
}

.toggle-nav-sidebar {
  color: var(--color-fg-muted);
  background: var(--rb-admin-panel-sunk);
  border-inline-end: 1px solid var(--rb-admin-line-strong);
}

/* ==========================================================================
   5. Modules and panels
   ========================================================================== */

.module {
  background: var(--rb-admin-panel-sunk);
  border: 1px solid var(--rb-admin-line);
}

.dashboard .module,
#content-related .module {
  background: var(--rb-admin-panel-sunk);
}

/*
 * Bracket frame on the dashboard app cards — square, with a gold spine. The
 * app list is the closest thing an admin has to a card of matches.
 */
.dashboard #content-main .module {
  border-inline-start: 3px solid var(--rb-gold-500);
}

.dashboard #content-main .current-app {
  border-inline-start-color: var(--rb-gold-300);
  background: var(--rb-admin-panel);
}

#content-related .module {
  border-inline-start: 3px solid var(--rb-admin-line-strong);
}

fieldset.module {
  background: transparent;
}

.inline-group {
  background: transparent;
}

/* ==========================================================================
   6. Tables — where the wrestling data actually lives
   ========================================================================== */

/*
 * Results, rosters, teams, bouts, broadcast rules — everything a RopeBreak
 * admin edits arrives as a long table. So the table is the surface that gets
 * the most care and the least decoration: hairline rules, a readable row
 * rhythm, a gold marker on the row you're acting on, and nothing else.
 */

#changelist table,
.module table,
.inline-group table {
  border-collapse: collapse;
}

thead th,
#changelist table thead th,
.inline-group thead th {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rb-gold-500);
  background: var(--rb-admin-panel);
  border-bottom: 2px solid var(--rb-gold-700);
}

thead th a:link,
thead th a:visited,
#changelist table thead th a:link,
#changelist table thead th a:visited {
  color: var(--rb-gold-500);
}

thead th.sorted {
  background: var(--rb-admin-panel-raised);
}

td,
th {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rb-admin-line);
  vertical-align: top;
}

tbody th {
  font-weight: var(--font-weight-medium);
}

/* Zebra on the odd row, gold wash on the row you touched. Both are washes
 * rather than opaque fills, so a row keeps its own background if a display
 * helper gave it one. */
#changelist table tbody tr:nth-child(odd),
.module table tbody tr:nth-child(odd) {
  background: color-mix(in srgb, var(--rb-navy-500) 10%, transparent);
}

#changelist table tbody tr:hover {
  background: var(--rb-admin-row-hover);
}

#changelist tbody tr.selected,
#changelist tbody tr:has(.action-select:checked) {
  background: var(--selected-row);
  box-shadow: inset 3px 0 0 0 var(--rb-gold-500);
}

/* Long free text (event names, gimmick lists, notes) needs to wrap; short
 * factual columns must not. */
#changelist table td,
#changelist table th {
  word-break: normal;
  overflow-wrap: anywhere;
}

tfoot td {
  color: var(--color-fg-muted);
}

/* 6.1 Toolbar, filters, pagination */

#toolbar {
  padding: var(--space-3);
  background: var(--rb-admin-panel-sunk);
  border: 1px solid var(--rb-admin-line);
  border-bottom: none;
}

#toolbar #searchbar {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border: 1px solid var(--rb-admin-line-strong);
  padding: var(--space-2) var(--space-3);
}

#toolbar #searchbar:focus {
  border-color: var(--rb-gold-500);
}

#changelist-filter {
  background: var(--rb-admin-panel-sunk);
  border: 1px solid var(--rb-admin-line);
  border-inline-start: 3px solid var(--rb-gold-700);
}

#changelist-filter h2 {
  border-bottom: 1px solid var(--rb-admin-line-strong);
}

#changelist-filter details summary {
  color: var(--color-fg);
  font-weight: var(--font-weight-medium);
}

#changelist-filter li.selected {
  border-inline-start: 3px solid var(--rb-gold-500);
}

#changelist-filter li.selected a {
  color: var(--rb-gold-300);
}

.paginator {
  padding: var(--space-3);
  color: var(--color-fg-muted);
  background: var(--rb-admin-panel-sunk);
  border-top: 1px solid var(--rb-admin-line-strong);
}

.paginator a:link,
.paginator a:visited {
  padding: var(--space-1) var(--space-3);
  color: var(--rb-gold-300);
  background: transparent;
  border: 1px solid var(--rb-admin-line-strong);
}

.paginator a:not([aria-current="page"], .showall):hover {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-color: var(--rb-gold-500);
}

.paginator a[aria-current="page"] {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-color: var(--rb-gold-500);
  font-weight: var(--font-weight-bold);
}

/* 6.2 Action bar */

#changelist .actions {
  padding: var(--space-2) var(--space-3);
  color: var(--color-fg-muted);
  background: var(--rb-admin-panel);
  border-bottom: 1px solid var(--rb-admin-line-strong);
}

#changelist .actions.selected {
  background: var(--rb-admin-gold-wash);
}

/* 6.3 Date hierarchy — the top strip on any calendar-shaped changelist */

.change-list .toplinks {
  padding: var(--space-2) var(--space-3);
  background: var(--rb-admin-panel-sunk);
  border-bottom: 1px solid var(--rb-admin-line);
}

.change-list .toplinks a:link,
.change-list .toplinks a:visited {
  color: var(--rb-gold-300);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.vTextField {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border: 1px solid var(--rb-admin-line-strong);
  padding: var(--space-2);
}

input:focus,
textarea:focus,
select:focus,
.vTextField:focus {
  border-color: var(--rb-gold-500);
}

input::placeholder,
textarea::placeholder {
  color: var(--rb-navy-300);
}

input[readonly],
textarea[readonly],
input:disabled,
textarea:disabled,
select:disabled {
  color: var(--color-fg-muted);
  background: var(--rb-admin-panel-sunk);
}

label,
.aligned label {
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
}

.required label,
label.required {
  color: var(--color-fg);
}

/* The required marker reads as a gold cue rather than a bold weight. */
.required label:after,
label.required:after {
  color: var(--rb-gold-500);
}

.form-row {
  border-bottom: 1px solid var(--rb-admin-line);
}

fieldset.module {
  border: 1px solid var(--rb-admin-line);
}

.help,
p.help,
div.help,
.form-row div.help {
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
}

.aligned label + div.readonly,
.form-row .readonly {
  color: var(--color-fg);
}

details summary {
  color: var(--rb-gold-300);
}

/* 7.1 Buttons */

.button,
a.button,
input[type="submit"],
input[type="button"],
.submit-row input {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.04em;
  border: 1px solid var(--rb-admin-line-strong);
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

/* The championship button: belt gold, navy type. Django only swaps the
 * background for `.default`, so the foreground is set here. */
.button.default,
input[type="submit"].default,
.submit-row input.default {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-color: var(--rb-gold-700);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.button.default:focus,
.button.default:hover,
input[type="submit"].default:focus,
input[type="submit"].default:hover,
.submit-row input.default:focus,
.submit-row input.default:hover {
  color: var(--rb-navy-900);
  background: var(--rb-gold-300);
}

.submit-row {
  padding: var(--space-3);
  background: var(--rb-admin-panel-sunk);
  border: 1px solid var(--rb-admin-line);
  border-top: 2px solid var(--rb-gold-700);
}

.submit-row a.deletelink,
.submit-row a.deletelink:link,
.submit-row a.deletelink:visited {
  color: var(--rb-cream-50);
  background: var(--rb-red-600);
  border-radius: 0;
}

.submit-row a.closelink,
.submit-row a.closelink:link,
.submit-row a.closelink:visited {
  color: var(--rb-cream-50);
  border-radius: 0;
}

.object-tools a:link,
.object-tools a:visited {
  color: var(--rb-cream-50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--rb-admin-line-strong);
}

.object-tools a:focus,
.object-tools a:hover {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-color: var(--rb-gold-500);
}

/* 7.2 Inlines — bouts on a card, members on a team, appearances on a person */

.inline-related h3 {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rb-gold-500);
  background: var(--rb-admin-panel);
  border-bottom: 1px solid var(--rb-admin-line-strong);
}

.inline-related fieldset {
  background: transparent;
  border: 1px solid var(--rb-admin-line);
}

.inline-group .tabular tr.add-row td,
.inline-group .tabular tr.add-row td a {
  color: var(--rb-gold-300);
  background: var(--rb-admin-panel-sunk);
}

.inline-group .tabular tr.has_original td {
  background: transparent;
}

/* ==========================================================================
   8. Messages, errors, and the delete confirmation
   ========================================================================== */

ul.messagelist li {
  color: var(--color-fg);
  border: 1px solid var(--rb-admin-line-strong);
  border-inline-start-width: 3px;
}

ul.messagelist li.success {
  border-inline-start-color: var(--rb-green-600);
}

ul.messagelist li.warning {
  border-inline-start-color: var(--rb-gold-500);
}

ul.messagelist li.error {
  border-inline-start-color: var(--rb-red-600);
}

.errornote {
  color: var(--rb-admin-danger-fg);
  background: var(--message-error-bg);
  border: 1px solid var(--rb-red-600);
}

ul.errorlist li {
  color: var(--rb-cream-50);
  background: var(--rb-red-600);
  border-radius: 0;
}

.delete-confirmation form input[type="submit"] {
  background: var(--rb-red-600);
  color: var(--rb-cream-50);
}

.delete-confirmation form .cancel-link {
  background: var(--rb-navy-500);
  color: var(--rb-cream-50);
  border-radius: 0;
}

/* ==========================================================================
   9. Widgets — calendar, clock, selector, autocomplete
   ========================================================================== */

.calendarbox,
.clockbox {
  color: var(--color-fg);
  background: var(--rb-admin-panel);
  border: 1px solid var(--rb-gold-700);
  box-shadow: var(--shadow-md);
}

.calendar caption,
.calendarbox h2 {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.calendar th {
  color: var(--color-fg-muted);
  background: var(--rb-admin-panel-sunk);
  border-bottom: 1px solid var(--rb-admin-line);
}

.calendar td a,
.timelist a {
  color: var(--color-fg);
}

.calendar td a:hover,
.timelist a:hover {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
}

.calendar td.selected a {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
}

.calendar td.today a {
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 -2px 0 0 var(--rb-gold-500);
}

.calendar td.nonday {
  background: var(--rb-admin-panel-sunk);
}

.calendarnav,
.calendar-shortcuts,
.calendar-cancel {
  background: var(--rb-admin-panel-sunk);
  border-top: 1px solid var(--rb-admin-line);
}

.timezonewarning {
  color: var(--color-fg-muted);
}

.selector-available,
.selector-chosen {
  border: 1px solid var(--rb-admin-line-strong);
}

.selector select {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border: none;
}

.selector-chosen select {
  border-top: 1px solid var(--rb-admin-line-strong);
}

.selector .selector-filter,
.selector-chosen .list-footer-display {
  background: var(--rb-admin-panel-sunk);
  border-color: var(--rb-admin-line-strong);
}

/* Django's icon sprites are drawn for a light canvas — #000 to #666 — so they
 * vanish on the arena field. One filter, applied where the sprite is the only
 * affordance, lifts them to a gold-ish cream. The `-dark` message icons that
 * Django already ships are wired up in base_site.html instead, since their
 * URLs have to come from `{% static %}`. */
.calendarnav-previous,
.calendarnav-next,
.datetimeshortcuts .clock-icon,
.datetimeshortcuts .date-icon,
.selector-add,
.selector-remove,
.selector-chooseall,
.selector-clearall,
.selector .search-label-icon,
.inline-deletelink,
thead th.sorted .sortoptions a {
  filter: invert(88%) sepia(24%) saturate(520%) hue-rotate(357deg) brightness(103%) contrast(93%);
}

/* 9.1 Autocomplete (select2) — staff-only, so JS widgets are fair game here */

.select2-container--admin-autocomplete .select2-selection {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border: 1px solid var(--rb-admin-line-strong);
  border-radius: 0;
}

.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered {
  color: var(--color-fg);
}

.select2-container--admin-autocomplete .select2-dropdown {
  background: var(--rb-admin-panel);
  border-color: var(--rb-gold-700);
  border-radius: 0;
}

.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] {
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
}

.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice {
  color: var(--rb-cream-50);
  background: var(--rb-navy-500);
  border-color: var(--rb-admin-line-strong);
  border-radius: 0;
}

.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
  color: var(--color-fg);
  background: var(--rb-admin-canvas);
  border-color: var(--rb-admin-line-strong);
}

/* ==========================================================================
   10. Login — the one page a visitor sees before they're staff
   ========================================================================== */

.login {
  background: var(--rb-admin-canvas);
}

.login #container {
  background: var(--rb-admin-panel-sunk);
  border: 1px solid var(--rb-admin-line-strong);
  border-top: 3px solid var(--rb-gold-500);
  border-radius: 0;
  box-shadow: var(--shadow-md);
}

.login #header {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: transparent;
  border-bottom: 2px solid var(--rb-gold-500);
}

.login #header h1 {
  font-size: var(--font-fluid-xl);
  color: var(--rb-gold-500);
}

/* On the login plate the branding stacks and centres — it is the whole page,
 * not a bar across the top of one. */
.login #branding,
.login #site-name {
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-inline-end: 0;
  text-align: center;
}

.login .rb-admin-mark {
  height: 3rem;
}

.login .rb-admin-tagline {
  padding-inline-start: 0;
  border-inline-start: none;
}

/* Service links and the server clock are chrome for people already working;
 * they have no business on the door. Hidden here rather than branched in the
 * template, because `login.html` inherits the branding block wholesale and
 * forking it to drop two elements would be a worse trade. */
.login #branding nav,
.login .rb-admin-clock {
  display: none;
}

.login .submit-row {
  padding: var(--space-4) 0 0;
  background: transparent;
  border: none;
}

.login .submit-row input[type="submit"] {
  width: 100%;
  color: var(--rb-navy-900);
  background: var(--rb-gold-500);
  border-color: var(--rb-gold-700);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login .submit-row input[type="submit"]:hover,
.login .submit-row input[type="submit"]:focus {
  background: var(--rb-gold-300);
}

/* ==========================================================================
   11. Focus — the gold ring, everywhere
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--rb-gold-500);
  outline-offset: 2px;
}

/* ==========================================================================
   12. The data kit
   ==========================================================================
 *
 * Presentation classes for `list_display` and readonly fields. Every one is
 * emitted by a helper in `ropebreak_admin.display`, so an admin never hand-
 * writes this markup and every in-house admin renders the same shapes for the
 * same kinds of fact.
 *
 * All of it obeys "facts stay quiet": the badges carry hue, not volume, and
 * nothing in here uses display type or the gold ramp. The one exception is
 * `.rb-title` — a championship *is* the loud fact in a wrestling database.
 */

/* 12.1 Badge — a compact, tinted state label */

.rb-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  color: var(--color-fg-muted);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.rb-badge--win {
  color: var(--rb-admin-success-fg);
}

.rb-badge--loss {
  color: var(--rb-admin-danger-fg);
}

.rb-badge--draw,
.rb-badge--nc {
  color: var(--color-fg-muted);
}

.rb-badge--gold,
.rb-badge--title {
  color: var(--rb-gold-500);
}

.rb-badge--live {
  color: var(--rb-gold-300);
  border-style: solid;
  /* A slow pulse, routed through the motion tokens so the reduced-motion
   * kill switch in tokens.css collapses it to a static badge. */
  animation: rb-admin-pulse calc(var(--duration-slow) * 6) var(--ease-standard) infinite;
}

.rb-badge--info {
  color: var(--rb-navy-100);
}

@keyframes rb-admin-pulse {
  50% {
    opacity: 0.55;
  }
}

/* 12.2 Chip — an entity reference: wrestler, team, promotion, venue */

.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 0.1em 0.6em 0.1em 0.2em;
  font-size: var(--font-size-sm);
  line-height: 1.7;
  border: 1px solid var(--rb-admin-line-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--rb-navy-500) 22%, transparent);
}

a.rb-chip:link,
a.rb-chip:visited {
  color: var(--color-fg);
  text-decoration: none;
}

a.rb-chip:focus,
a.rb-chip:hover {
  border-color: var(--rb-gold-500);
  background: var(--rb-admin-gold-wash);
}

.rb-chip__avatar {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  object-fit: cover;
  border-radius: var(--radius-pill);
  background: var(--rb-admin-panel);
}

/* Initials stand in when there is no photograph. "No AI faces" — an absent
 * likeness gets a typographic placeholder, never a generated one. */
.rb-chip__initials {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  font-size: 0.7em;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--rb-gold-500);
  background: var(--rb-admin-panel);
  border-radius: var(--radius-pill);
}

.rb-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rb-chip__sub {
  color: var(--color-fg-muted);
  font-size: var(--font-size-xs);
}

/* 12.3 Stat — a number that has to line up with the numbers above it */

.rb-stat {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rb-stat__unit {
  color: var(--color-fg-muted);
  font-size: 0.85em;
  padding-inline-start: 0.15em;
}

/* Django's changelist has no per-column alignment hook, so numeric columns are
 * opted in by wrapping the value — the wrapper fills the cell and right-aligns
 * itself along with the header when the header is marked too. */
.rb-num {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

/* 12.4 Meter — a proportion you can scan down a column (win rate, coverage) */

.rb-meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 8rem;
}

.rb-meter__track {
  flex: 1;
  height: 0.5rem;
  background: color-mix(in srgb, var(--rb-navy-500) 45%, transparent);
}

.rb-meter__fill {
  display: block;
  height: 100%;
  background: var(--rb-gold-500);
}

.rb-meter__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}

/* 12.5 Thumbnail — posters, cards, promo shots */

.rb-thumb {
  display: block;
  max-width: 100%;
  height: auto;
  background: var(--rb-admin-panel);
  border: 1px solid var(--rb-admin-line-strong);
}

.rb-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}

.rb-gallery figure {
  margin: 0;
  max-width: 12rem;
  text-align: center;
}

.rb-gallery figcaption {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}

/* 12.6 Key/value grid — a readonly detail block that isn't a form */

.rb-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.rb-kv dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
}

.rb-kv dd {
  margin: 0;
  color: var(--color-fg);
}

/* 12.7 Card of matches — an ordered bout list on a change form */

.rb-card {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--rb-admin-line);
}

.rb-card > li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rb-admin-line);
}

.rb-card > li:last-child {
  border-bottom: none;
}

.rb-card__order {
  flex: none;
  width: 2ch;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
}

/* The main event carries the bracket-frame spine. One per card. */
.rb-card__main {
  box-shadow: inset 3px 0 0 0 var(--rb-gold-500);
  padding-inline-start: var(--space-3);
}

/* 12.8 Championship — the one loud fact */

.rb-title {
  font-weight: var(--font-weight-bold);
  color: var(--rb-gold-500);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rb-title {
    background-image: linear-gradient(
      180deg,
      var(--rb-gold-300) 0%,
      var(--rb-gold-500) 55%,
      var(--rb-gold-700) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* 12.9 Provenance — claims, citations, conflicts. Quiet, always. */

.rb-source {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}

.rb-conflict {
  color: var(--rb-admin-danger-fg);
  border-bottom: 1px dashed currentColor;
  cursor: help;
}

.rb-time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
  white-space: nowrap;
}

/* 12.10 Absence — one shape for "we don't have this fact" */

.rb-null {
  color: var(--rb-navy-300);
}

.rb-truncate {
  display: inline-block;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 767px) {
  #header {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
  }

  #branding {
    flex-wrap: wrap;
  }

  /* The tagline's divider rule reads as a stray line once the header wraps. */
  .rb-admin-tagline {
    padding-inline-start: 0;
    border-inline-start: none;
  }

  div.breadcrumbs {
    padding: var(--space-2) var(--space-4);
  }

  .rb-kv {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ==========================================================================
   14. Print — the corner sheet
   ========================================================================== */

@media print {
  #header,
  #nav-sidebar,
  .toggle-nav-sidebar,
  div.breadcrumbs,
  .object-tools,
  .submit-row,
  #changelist-filter,
  #toolbar {
    display: none;
  }

  body {
    color: #000;
    background: #fff;
  }
}