:root {
  --color-primary: rgb(37, 51, 213);
  --color-primary-dark: rgb(27, 27, 27);
  --color-primary-light: #e6efff;
  --color-secondary: #ee6c16;
  --color-secondary-dark: #ac4400;
  --color-secondary-light: #ffeee3;
  --color-grey: #293448;
  --color-grey-dark: #091429;
  --color-grey-light: #eef0f2;
  --color-white: #ffffff;
  --color-danger: #b4191f;

  /* Wagtail 8 design system overrides */
  --w-color-surface-menus: rgb(27, 27, 27);
  --w-color-surface-header: rgb(37, 51, 213);
  --w-color-text-label-menus-default: #ffffff;
  --w-color-text-label-menus-active: #ffffff;
  --w-login-fullscreen-background: #000000;
}

/* Top header bar */
.w-header,
[data-controller="w-breadcrumbs"],
.w-slim-header {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  --w-color-text-label: #ffffff;
  --w-color-text-context: #ffffff;
  --w-color-text-default: #ffffff;
}
.changelist-filter h2,
.col3 h2 {
  color: #ffffff !important;
}
.changelist-filter ul li a,
.col3 ul li a {
  display: block;
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  border-radius: 3px;
  margin-bottom: 2px;
  background-color: var(--color-white);
  color: var(--color-primary) !important;
}
.changelist-filter ul li.selected a,
.col3 ul li.selected a {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}

.w-header h1,
.w-header h2,
.w-header h2 *,
.w-header a,
.w-header a:hover,
.w-header a *,
.w-header nav a,
.w-header nav a:hover,
.w-header [class*="label"],
.w-header [class*="title"],
.w-slim-header h1,
.w-slim-header h2,
.w-slim-header h2 *,
.w-slim-header a,
.w-slim-header a * {
  color: #ffffff !important;
}
.w-text-primary {
  color: var(--color-white) !important;
}

/* Main content area - white background */
html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--color-grey);
  background-color: var(--color-white) !important;
}

.content-wrapper,
body {
  background-color: var(--color-white) !important;
  color: var(--color-grey-dark) !important;
}

/* Login page - black background, not 2-tone */
body.login,
.login {
  background: #000000 !important;
}

/* Logo above the login card */
body.login .content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: transparent !important;
}
body.login .content-wrapper img {
  order: -1 !important;
  width: 200px !important;
  margin-bottom: 1.5rem !important;
}
body.login .content-wrapper h1 {
  background-color: var(--color-white) !important;
  color: #000 !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 !important;
  padding: 2rem 2rem 0 !important;
  border-radius: 4px 4px 0 0 !important;
}
body.login .content-wrapper .messages {
  background-color: var(--color-white) !important;
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 !important;
  padding: 0 2rem !important;
}
body.login .login-form,
body.login .form-container,
body.login .content-wrapper > form {
  background-color: var(--color-white) !important;
  padding: 0 2rem 2rem !important;
  border-radius: 0 0 4px 4px !important;
  width: 100% !important;
  max-width: 500px !important;
  color: #000 !important;
}
body.login .content-wrapper > form *:not(.button):not(button) {
  color: #000 !important;
}
body.login .content-wrapper > form input {
  background-color: var(--color-white) !important;
  color: #000 !important;
  border: 1px solid #ccc !important;
}
body.login .content-wrapper .button:not(.button-secondary),
body.login .content-wrapper button:not(.button-secondary),
body.login .content-wrapper .button:not(.button-secondary) *,
body.login .content-wrapper button:not(.button-secondary) * {
  color: var(--color-white) !important;
}
body.login .content-wrapper .button.button-secondary {
  color: var(--color-primary) !important;
}



/* Side navigation - black background (Wagtail 8) */
.sidebar,
.sidebar__inner,
[data-sidebar-navigation-instance],
.nav-wrapper,
.nav-wrapper .inner,
.nav-main .footer {
  background-color: #000000 !important;
}
li.submenu-active {
  background-color: rgb(27, 27, 27) !important;
  color: var(--w-color-text-label-menus-active) !important;
}

/* buttons */
.button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF !important;
}
.button:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}
.w-slim-header .button.bicolor,
.w-slim-header a.button.bicolor,
.w-header .button.bicolor,
.w-header a.button.bicolor {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.w-slim-header .button.bicolor:hover,
.w-slim-header a.button.bicolor:hover,
.w-header .button.bicolor:hover,
.w-header a.button.bicolor:hover {
  background-color: #333333 !important;
  border-color: #333333 !important;
}
.button.button-secondary,
a.button.button-secondary {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.button.no,
a.button.no {
  background-color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: var(--color-white) !important;
}
.button.button-secondary:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* links */
a {
  color: var(--color-primary);
  transition: color ease-in-out 0.2s;
}
a:hover,
.nolink:hover {
  color: var(--color-primary-dark);
}
.help-block a {
  color: var(--color-primary);
  transition: color ease-in-out 0.2s;
}
.help-block a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
button.status-tag:hover {
  background-color: var(--color-primary-light) !important;
}

/* form elements */
input,
select,
textarea {
  background-color: var(--color-white) !important;
  border-color: var(--color-grey-light) !important;
  color: var(--color-grey-dark) !important;
}
input:focus,
select:focus,
textarea:focus {
  background-color: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-grey-dark) !important;
}

/* table */
table {
  border-color: var(--color-grey-light);
}
table th {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}
table th a,
table th a:hover {
  color: #ffffff !important;
}
table td {
  border-color: var(--color-grey-light);
}
table tr:hover td {
  background-color: var(--color-primary-light) !important;
  color: var(--color-primary-dark) !important;
}
table tr:hover {
  background-color: var(--color-primary-light) !important;
}

/* breadcrumbs */
.breadcrumb {
  background-color: var(--color-white);
  border-color: var(--color-grey-light);
}
.breadcrumb a {
  color: var(--color-primary);
}
.breadcrumb a:hover {
  color: var(--color-primary-dark);
}

/* form blocks */
.form-block__header {
  background-color: var(--color-white);
  border-color: var(--color-grey-light);
}
.form-block__header h3 {
  color: var(--color-primary);
}

/* search input */
input[type="search"] {
  background-color: var(--color-white) !important;
  border-color: var(--color-grey-light) !important;
  color: var(--color-grey-dark) !important;
}

/* form block headers */
.form-block__header h3 {
  color: var(--color-primary-dark);
}

/* Navigation */
.nav-search input {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-light);
  color: var(--color-grey-dark);
}
.nav-search input:focus ~ button,
.nav-search input:active ~ button {
  color: var(--color-primary) !important;
}
.nav-main .account {
  background-color: var(--color-primary-dark);
  transition: background-color ease-in-out 0.2s;
}
.nav-main .account:hover,
.nav-main .account:focus,
.nav-main .account:active {
  background-color: var(--color-primary);
}
.nav-main a {
  transition: background-color ease-in-out 0.2s, border-color 0.2s ease !important;
  background-color: transparent;
  color: var(--w-color-text-label-menus-default) !important;
}
.nav-main a:hover,
.nav-main a:focus,
.nav-main a:active,
.nav-main .menu-active {
  background-color: var(--color-primary);
  color: var(--w-color-text-label-menus-active) !important;
}
.nav-main .menu-active > a {
  border-left-color: var(--color-secondary);
}
li.submenu-active {
  background-color: rgb(27, 27, 27) !important;
  color: var(--w-color-text-label-menus-active) !important;
}

/* Dashboard site summary */
.w-summary {
  margin: 1.5rem 0 2rem;
}
.w-summary__list {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  list-style: none;
  padding: 1.5rem 0;
  margin: 0;
}
.w-summary__list li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.w-summary__list li .icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-grey) !important;
  opacity: 1 !important;
  fill: var(--color-grey) !important;
}
.w-summary__list li a {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-secondary) !important;
  text-decoration: none;
  line-height: 1.1;
}
.w-summary__list li a span:not(.w-sr-only) {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-secondary) !important;
}

/* Dashboard header padding */

/* Remove white gap above header bar */
body,
html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.w-header,
.w-slim-header {
  margin-top: 0 !important;
}

/* Ensure Wagtail CMS has white background */
.wagtail-admin {
  background: #fff;
}

/* Ensure all content areas in Wagtail have white background */
.wagtail-admin .content,
.wagtail-admin .main-content {
  background: #fff;
}

/* Ensure modeladmin changelist filters are readable */
.modeladmin .changelist-filter ul li a {
  color: var(--color-primary) !important;
}

.modeladmin .changelist-filter ul li.selected a {
  color: #ffffff !important;
}

/* Dark mode fixes for modeladmin changelist — Wagtail uses .w-theme-dark class */
.w-theme-dark .changelist-filter ul li a,
.w-theme-dark .col3 ul li a {
  background-color: #444 !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
}
.w-theme-dark .changelist-filter ul li.selected a,
.w-theme-dark .col3 ul li.selected a {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.w-theme-dark .changelist-filter input,
.w-theme-dark .col3 input {
  color: #ffffff !important;
  background-color: #444 !important;
}
.w-theme-dark .changelist-filter,
.w-theme-dark .col3 {
  color: #ffffff !important;
}
.w-theme-dark .result_count,
.w-theme-dark .result-count,
.w-theme-dark p.paginator,
.w-theme-dark .paginator,
.w-theme-dark .paginator a,
.w-theme-dark .pagination__start,
.w-theme-dark .pagination__end,
.w-theme-dark .changelist-filter p,
.w-theme-dark .col3 p,
.w-theme-dark .listing td,
.w-theme-dark .listing th {
  color: #ffffff !important;
}
.w-theme-dark table th {
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
}
.w-theme-dark table tr:hover td,
.w-theme-dark table tr:hover td a,
.w-theme-dark table tr:hover td a:hover {
  color: #111111 !important;
}

/* Same fixes for system dark mode (when user hasn't manually toggled) */
@media (prefers-color-scheme: dark) {
  .w-theme-system .changelist-filter ul li a,
  .w-theme-system .col3 ul li a {
    background-color: #444 !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
  }
  .w-theme-system .changelist-filter ul li.selected a,
  .w-theme-system .col3 ul li.selected a {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
  }
  .w-theme-system .changelist-filter input,
  .w-theme-system .col3 input {
    color: #ffffff !important;
    background-color: #444 !important;
  }
  .w-theme-system .changelist-filter,
  .w-theme-system .col3 {
    color: #ffffff !important;
  }
  .w-theme-system .result_count,
  .w-theme-system .result-count,
  .w-theme-system p.paginator,
  .w-theme-system .paginator,
  .w-theme-system .paginator a,
  .w-theme-system .pagination__start,
  .w-theme-system .pagination__end,
  .w-theme-system .changelist-filter p,
  .w-theme-system .col3 p,
  .w-theme-system .listing td,
  .w-theme-system .listing th {
    color: #ffffff !important;
  }
  .w-theme-system table th {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
  }
  .w-theme-system table tr:hover td,
  .w-theme-system table tr:hover td a,
  .w-theme-system table tr:hover td a:hover {
    color: #111111 !important;
  }
}

/* Dark mode: Draftail rich text editor */
.w-theme-dark .Draftail-Editor,
.w-theme-dark .DraftEditor-root,
.w-theme-dark .DraftEditor-editorContainer,
.w-theme-dark .public-DraftEditor-content,
.w-theme-dark [data-contents="true"] {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
}
.w-theme-dark [data-contents="true"] span[data-text="true"] {
  color: #ffffff !important;
}
/* Image field: 'Clear' link and 'currently' text */
.w-theme-dark .field-content p,
.w-theme-dark .clearable-file-input,
.w-theme-dark .clearable-file-input p,
.w-theme-dark .w-field__input p {
  color: #ffffff !important;
}

/* Dark mode: form fields, links, and image clear button */
.w-theme-dark input,
.w-theme-dark select,
.w-theme-dark textarea {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #555 !important;
}
.w-theme-dark input:focus,
.w-theme-dark select:focus,
.w-theme-dark textarea:focus {
  background-color: #333 !important;
  color: #ffffff !important;
}
.w-theme-dark a {
  color: #ffffff !important;
}
.w-theme-dark a:hover {
  color: var(--color-primary-light) !important;
}
.w-theme-dark table th a,
.w-theme-dark table th a:hover {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system .Draftail-Editor,
  .w-theme-system .DraftEditor-root,
  .w-theme-system .DraftEditor-editorContainer,
  .w-theme-system .public-DraftEditor-content,
  .w-theme-system [data-contents="true"] {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
  }
  .w-theme-system [data-contents="true"] span[data-text="true"] {
    color: #ffffff !important;
  }
  .w-theme-system .field-content p,
  .w-theme-system .clearable-file-input,
  .w-theme-system .clearable-file-input p,
  .w-theme-system .w-field__input p {
    color: #ffffff !important;
  }
  .w-theme-system input,
  .w-theme-system select,
  .w-theme-system textarea {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #555 !important;
  }
  .w-theme-system input:focus,
  .w-theme-system select:focus,
  .w-theme-system textarea:focus {
    background-color: #333 !important;
    color: #ffffff !important;
  }
  .w-theme-system a {
    color: #ffffff !important;
  }
  .w-theme-system a:hover {
    color: var(--color-primary-light) !important;
  }
  .w-theme-system table th a,
  .w-theme-system table th a:hover {
    color: #ffffff !important;
  }
}

/* Grouped gym checkboxes */
.gym-grouped-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.gym-country-heading {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.25rem;
  cursor: pointer;
  user-select: none;
}
.gym-country-toggle-icon {
  font-size: 0.85em;
  display: inline-block;
  transition: transform 0.2s;
}
.gym-country-group.collapsed .gym-country-toggle-icon {
  transform: rotate(-90deg);
}
.gym-country-group.collapsed .gym-checkbox-columns {
  display: none;
}
.gym-checkbox-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem 1rem;
}
.gym-checkbox-columns li label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  cursor: pointer;
}
.w-theme-dark .gym-country-heading {
  color: #ffffff;
  border-color: #ffffff;
}
.w-theme-dark .gym-checkbox-columns li label,
.w-theme-dark .gym-checkbox-columns li {
  color: #ffffff !important;
}
.w-theme-dark .nice-padding,
.w-theme-dark .nice-padding p,
.w-theme-dark .no-search-results,
.w-theme-dark .no-search-results p {
  color: #ffffff !important;
}

/* w-field__input bare text nodes (Currently/Change/Clear) */
.w-theme-dark .w-field__input,
.w-theme-dark .w-field__input label {
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system .gym-checkbox-columns li label,
  .w-theme-system .gym-checkbox-columns li {
    color: #ffffff !important;
  }
  .w-theme-system .gym-country-heading {
    color: #ffffff;
    border-color: #ffffff;
  }
  .w-theme-system .w-field__input,
  .w-theme-system .w-field__input label {
    color: #ffffff !important;
  }
  .w-theme-system .nice-padding,
  .w-theme-system .nice-padding p,
  .w-theme-system .no-search-results,
  .w-theme-system .no-search-results p {
    color: #ffffff !important;
  }
}