@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800&display=swap');

:root {
  --w-font-sans: 'Inter';
  /*--w-font-mono: Inconsolata;*/
  --w-color-primary-hue: 160;
  --w-color-secondary-hue: 160;
  --w-color-grey-50: #eceae6;
  --w-color-grey-100: #e1dfda;
  --w-color-grey-150: #d8d5cf;
  --w-color-grey-200: #cbc7c1;
  --w-color-grey-400: #88847c;
  --w-color-grey-500: #726e67;
  --w-color-grey-600: #5c5853;
  --w-color-grey-700: #46423e;
  --w-color-grey-800: #302d2b;

  --w-login-fullscreen-background: radial-gradient(
    100% 300.28% at 100% 0%,
    var(--w-color-primary) 0%,
    var(--w-color-primary) 32.94%,
    var(--w-color-primary) 49.9%,
    var(--w-color-primary) 50.2%,
    var(--w-color-secondary) 100%
  );
  --w-color-surface-menus: var(--w-color-grey-700);
  --w-color-surface-menu-item-active: var(--w-color-grey-800);
  --w-color-text-label-menus-default: var(--w-color-white);
  --w-color-text-label-menus-active: var(--w-color-grey-50);

  &.w-theme-dark {
    --w-color-text-link-default: #c0f5d2;
    --w-color-secondary-100: #c0f5d2;
    --w-color-critical-200: #e37d7d;
  }
}

.sidebar-custom-branding {
  margin: 1rem auto;
}

.sidebar--slim .sidebar-custom-branding {
  padding: 10px 0;
}

.active-plan-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7rem;
  padding: 0.5rem;
}

.active-plan-name {
  line-height: 1.2;
  color: var(--w-color-text-label-menus-default);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-plan-status {
  color: var(--w-color-grey-200);
  padding: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.active-plan-status svg {
  height: 0.5rem;
  width: 0.5rem;
}

.active-plan-version-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 15ch;
}

.active-plan-live {
  text-transform: uppercase;
  font-weight: bold;
}

.active-plan-live.public {
  color: var(--w-color-warning-100);
}

.active-plan-live.scheduled {
  color: #d8b4fe;
}

.sidebar--slim .active-plan-info {
  display: none;
}

.login .login-logo {
  width: 3.5rem;
}

.w-header h1 {
  font-weight: 600;
}

.w-panel span.field-visibility-label {
  font-weight: bold;
}

.w-panel span.field-visibility-label.w-status--primary {
  color: var(--w-color-grey-800);
}

section[role='tabpanel'] .help-block:has(> .field-visibility-label) {
  /*
  We are using this to make the "public" vs "non-public" field labels
  prettier when they are rendered inside a .help-block, which happens
  when the field in question has its own tab, for example "contant persons".
  (The label is rendered right below the tab header.)

  We do not want to match other help blocks since they may contain
  validation errors which we want to be highlighted with colors.
  */
  background-color: inherit;
  padding-left: 0;
  span.field-visibility-label.w-status--primary {
    color: var(--w-color-grey-800);
    font-size: 0.8rem;
    font-weight: bold;
  }
  svg {
    display: none;
  }
}

.page-explorer .w-breadcrumb li:only-child a,
.page-explorer .w-breadcrumb li[hidden] ~ li:last-child a {
  font-weight: 600;
}

.chooser__preview {
  padding: 2px;
}

.chooser__preview svg {
  max-width: 100%;
  max-height: 100%;
}

/* Wagtail notifications */
.messages {
  z-index: 1;
}

.w-tabs__tab {
  color: var(--w-color-grey-600);
}

.w-field__help .help {
  color: var(--w-color-grey-600);
}

/* Modeladmin fixes */
.modeladmin .listing tbody tr ul.actions {
  visibility: hidden;
  display: inline-block;
  min-width: 9em;
  white-space: normal;
  overflow-wrap: break-word;
  height: auto;
  float: inline-start;
}
/* Hack to fix https://app.asana.com/0/1206017643443542/1208668942052483 */
.modeladmin .result-list ul {
  width: 100%;
}
/* Need to repeat this here from modeladmin's CSS because our custom React-based components won't use that file */
.modeladmin .listing tbody tr:hover ul.actions {
  visibility: visible;
}
/* Fix footer in, e.g., custom React-based action index view since Wagtail upgrade */
.footer__container--hidden {
  display: block;
}
/* Fix space between action buttons */
.listing .actions > li {
  margin: 0 0 0.5em;
}
/* Fix text being cropped when action buttons have long texts */
.actions .button {
  height: auto; /* originally 2em */
  min-height: 2em; /* adding this to make sure things don't change for short texts */
}
/* Fix weird inline block issues on, e.g., category list (unfiltered by category type) */
/*
.listing .title .title-wrapper,
.listing .title h2 {
  display: block;
}
*/
.screen-reader-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.w-status--internal {
  background-color: var(--w-color-grey-400);
  color: var(--w-color-white);
}

.w-status--public {
  background-color: #fef08a;
  color: #854d0e;
}

.w-status--scheduled {
  background-color: #d8b4fe;
  color: #6b21a8;
}

/* Accessibility: Ensure form fields wrap on narrow or zoomed in screens */
.w-slim-header__search-form {
  flex-wrap: wrap;
}

/* Intrusive accessibility fixes for customers with plan.features.admin_accessibility_conformance_level == 'high'

In the end, we would like to move away from these and provide fixes compatible
with Wagtail's styles but so far these are required.

 */

:root > body.watch-active-accessibility-level-high {
  a {
    text-decoration: underline;
  }
  button.sidebar-menu-item__link {
    text-decoration: underline;
  }
  a.button {
    text-decoration: none;
  }
  /*
  .listing .title .title-wrapper a {
    text-decoration: underline;
  }
  */
}

/*
 * Select2 / Autocomplete widget styling
 * Harmonize Select2 widgets with Wagtail's native text input styling
 */

/* Base styling for Select2 selection containers (single and multiple) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  min-height: 2.625rem; /* Match Wagtail's $text-input-height: 42px */
  border-radius: 0.3125rem; /* Match Wagtail's default border-radius: 5px */
  border: 1px solid var(--w-color-border-field-default);
  background-color: var(--w-color-surface-field);
  font-size: 1.1875rem; /* Match Wagtail's body-text-large: 19px */
  line-height: 1.5;
}

/* Hover state */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
  border-color: var(--w-color-border-field-hover);
}

/* Focus state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--w-color-border-field-hover);
  outline: none;
}

/* Single select: rendered text wrapper - handles the text and clear button */
/* Using !important to override default Select2 styles */
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--w-color-text-context);
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 1.25rem !important;
  padding-right: 2.5rem !important; /* Leave room for arrow */
  line-height: calc(2.625rem - 0.75rem - 2px); /* height - vertical padding - border */
  display: block;
}

/* Single select: placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--w-color-text-placeholder);
}

/* Single select: arrow positioning */
/* Using !important to override default Select2 styles */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 2rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix arrow icon */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-width: 5px 4px 0 4px;
  margin-left: 0;
  margin-top: 0;
  position: static;
  top: auto;
  left: auto;
}

/* Multiple select: rendered container */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0.375rem 1.25rem !important; /* Match Wagtail's input padding */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 0.375rem; /* Vertical and horizontal spacing between pills */
  white-space: normal !important; /* Allow wrapping */
}

/* Multiple select: choice pills */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--w-color-surface-header);
  border: 1px solid var(--w-color-border-field-default);
  border-radius: 0.3125rem; /* Match main border-radius */
  color: var(--w-color-text-context);
  margin: 0 !important;
  padding: 0.25rem 0.625rem !important;
  display: inline-flex;
  align-items: center;
  font-size: 1.1875rem; /* Match main input font size */
  line-height: 1.3;
  float: none !important; /* Override default float */
  max-width: calc(100% - 1rem); /* Prevent overflow, leave some margin */
  /* Text overflow handling - only for content inside pill */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multiple select: choice remove button */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--w-color-icon-secondary);
  margin-right: 0.5rem !important; /* More space between x and text */
  order: -1; /* Move remove button to the left */
  font-size: 1.1875rem;
  line-height: 1;
  flex-shrink: 0; /* Don't shrink the x button */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--w-color-text-context);
}

/* Multiple select: search input inside */
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
  margin: 0;
  padding: 0.25rem 0;
  font-size: 1.1875rem;
}

/* Dropdown styling */
.select2-container--default .select2-dropdown {
  border: 1px solid var(--w-color-border-field-default);
  border-radius: 0.3125rem;
  background-color: var(--w-color-surface-field);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.05);
}

/* Dropdown: search field */
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--w-color-border-field-default);
  border-radius: 0.3125rem;
  background-color: var(--w-color-surface-field);
  color: var(--w-color-text-context);
  padding: 0.375rem 1.25rem;
  min-height: 2.625rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--w-color-border-field-hover);
  outline: none;
}

/* Dropdown: results */
.select2-container--default .select2-results__option {
  color: var(--w-color-text-context);
  padding: 0.5rem 1.25rem;
  font-size: 1.1875rem;
}

/* Dropdown: highlighted option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--w-color-surface-button-default);
  color: var(--w-color-text-button);
}

/* Dropdown: selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--w-color-surface-header);
}

/* Disabled state */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--w-color-surface-field-inactive);
  border-color: var(--w-color-border-field-inactive);
  cursor: not-allowed;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
  color: var(--w-color-text-placeholder);
}

/* Error state */
.w-field--error .select2-container--default .select2-selection--single,
.w-field--error .select2-container--default .select2-selection--multiple {
  border-color: var(--w-color-critical-200);
}

/* Clear button styling for single select - position absolutely within the selection */
.select2-container--default .select2-selection--single .select2-selection__clear {
  color: var(--w-color-icon-secondary);
  font-size: 1.1875rem;
  font-weight: 400;
  position: absolute !important;
  right: 2.5rem !important; /* Position before the arrow */
  top: 50% !important;
  transform: translateY(-50%);
  float: none !important;
  margin: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--w-color-text-context);
}

/* Clear button styling for multiple select - position absolutely */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  color: var(--w-color-icon-secondary);
  font-size: 1.1875rem;
  font-weight: 400;
  position: absolute !important;
  right: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%);
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
  color: var(--w-color-text-context);
}

/* Impersonation warning styles */
/* Style the account menu button with warning background when impersonating */
.sidebar-footer__account--impersonating {
  background-color: #FAA500 !important; /* Wagtail warning-100 color */
  color: #2E1F5E !important; /* Wagtail primary color for proper contrast */
}

.sidebar-footer__account--impersonating:hover,
.sidebar-footer__account--impersonating:focus {
  background-color: #FDD074 !important; /* Wagtail warning-75 color for hover state */
}

/* Ensure the account label text also uses the proper contrast color */
.sidebar-footer__account--impersonating .sidebar-footer__account-label {
  color: #2E1F5E !important;
}

/* Ensure the chevron icon also uses the proper contrast color */
.sidebar-footer__account--impersonating .icon {
  color: #2E1F5E !important;
}