/*
 * webconsulting GitLab colour system
 *
 * Loaded after GitLab's compiled styles. The overrides intentionally target
 * GitLab design tokens instead of component markup wherever possible, so the
 * theme remains stable across minor GitLab updates.
 */

:root:not(.gl-dark),
.gl-light-scope {
  --webcon-50: #e8f4f8;
  --webcon-100: #c5e4ed;
  --webcon-200: #9dd2e2;
  --webcon-300: #66c4e1;
  --webcon-400: #2b8ba5;
  --webcon-500: #1b7a95;
  --webcon-600: #155d73;
  --webcon-700: #0f4555;
  --webcon-800: #0c3744;
  --webcon-900: #082a34;
  --webcon-950: #051d24;
  --webcon-on-primary: #ffffff;
  --webcon-page: #e8f4f8;
  --webcon-surface: #ffffff;
  --webcon-text: #231f20;
  --webcon-muted-text: #535158;
  --webcon-border: #1b7a95;
  --webcon-primary-hover-surface: rgba(27, 122, 149, 0.12);
  --webcon-primary-active-surface: rgba(27, 122, 149, 0.22);
}

:root.gl-dark,
.gl-dark-scope {
  --webcon-50: #0b2f39;
  --webcon-100: #0f4555;
  --webcon-200: #155d73;
  --webcon-300: #1b7a95;
  --webcon-400: #3aa3bf;
  --webcon-500: #66c4e1;
  --webcon-600: #82cfe6;
  --webcon-700: #9dd8eb;
  --webcon-800: #c5e8f2;
  --webcon-900: #e8f4f8;
  --webcon-950: #f4fafc;
  --webcon-on-primary: #0b2f39;
  --webcon-page: #071f26;
  --webcon-surface: #0b2f39;
  --webcon-text: #f4fafc;
  --webcon-muted-text: #c5e8f2;
  --webcon-border: #66c4e1;
  --webcon-primary-hover-surface: rgba(102, 196, 225, 0.16);
  --webcon-primary-active-surface: rgba(102, 196, 225, 0.26);
}

:root,
.gl-light-scope,
.gl-dark-scope {
  /* Replace GitLab blue and purple palettes with the corporate teal scale. */
  --blue-50: var(--webcon-50) !important;
  --blue-100: var(--webcon-100) !important;
  --blue-200: var(--webcon-200) !important;
  --blue-300: var(--webcon-300) !important;
  --blue-400: var(--webcon-400) !important;
  --blue-500: var(--webcon-500) !important;
  --blue-600: var(--webcon-600) !important;
  --blue-700: var(--webcon-700) !important;
  --blue-800: var(--webcon-800) !important;
  --blue-900: var(--webcon-900) !important;
  --blue-950: var(--webcon-950) !important;
  --gl-color-blue-50: var(--webcon-50) !important;
  --gl-color-blue-100: var(--webcon-100) !important;
  --gl-color-blue-200: var(--webcon-200) !important;
  --gl-color-blue-300: var(--webcon-300) !important;
  --gl-color-blue-400: var(--webcon-400) !important;
  --gl-color-blue-500: var(--webcon-500) !important;
  --gl-color-blue-600: var(--webcon-600) !important;
  --gl-color-blue-700: var(--webcon-700) !important;
  --gl-color-blue-800: var(--webcon-800) !important;
  --gl-color-blue-900: var(--webcon-900) !important;
  --gl-color-blue-950: var(--webcon-950) !important;
  --purple-50: var(--webcon-50) !important;
  --purple-100: var(--webcon-100) !important;
  --purple-200: var(--webcon-200) !important;
  --purple-300: var(--webcon-300) !important;
  --purple-400: var(--webcon-400) !important;
  --purple-500: var(--webcon-500) !important;
  --purple-600: var(--webcon-600) !important;
  --purple-700: var(--webcon-700) !important;
  --purple-800: var(--webcon-800) !important;
  --purple-900: var(--webcon-900) !important;
  --purple-950: var(--webcon-950) !important;
  --gl-color-purple-50: var(--webcon-50) !important;
  --gl-color-purple-100: var(--webcon-100) !important;
  --gl-color-purple-200: var(--webcon-200) !important;
  --gl-color-purple-300: var(--webcon-300) !important;
  --gl-color-purple-400: var(--webcon-400) !important;
  --gl-color-purple-500: var(--webcon-500) !important;
  --gl-color-purple-600: var(--webcon-600) !important;
  --gl-color-purple-700: var(--webcon-700) !important;
  --gl-color-purple-800: var(--webcon-800) !important;
  --gl-color-purple-900: var(--webcon-900) !important;
  --gl-color-purple-950: var(--webcon-950) !important;
  --gl-color-brand-purple-01g: var(--webcon-200) !important;
  --gl-color-brand-purple-01p: var(--webcon-300) !important;
  --gl-color-brand-purple-02p: var(--webcon-500) !important;
  --brand-purple-01: var(--webcon-300) !important;
  --brand-purple-02: var(--webcon-500) !important;

  /* Primary actions and selected navigation. */
  --gl-action-strong-confirm-background-color-default: var(--webcon-500) !important;
  --gl-action-strong-confirm-background-color-hover: var(--webcon-600) !important;
  --gl-action-strong-confirm-background-color-focus: var(--webcon-600) !important;
  --gl-action-strong-confirm-background-color-active: var(--webcon-700) !important;
  --gl-action-strong-confirm-border-color-default: var(--webcon-600) !important;
  --gl-action-strong-confirm-border-color-hover: var(--webcon-700) !important;
  --gl-action-strong-confirm-border-color-focus: var(--webcon-700) !important;
  --gl-action-strong-confirm-border-color-active: var(--webcon-800) !important;
  --gl-action-strong-confirm-foreground-color-default: var(--webcon-on-primary) !important;
  --gl-action-strong-confirm-foreground-color-hover: var(--webcon-on-primary) !important;
  --gl-action-strong-confirm-foreground-color-focus: var(--webcon-on-primary) !important;
  --gl-action-strong-confirm-foreground-color-active: var(--webcon-on-primary) !important;
  --gl-button-confirm-primary-background-color-default: var(--webcon-500) !important;
  --gl-button-confirm-primary-background-color-hover: var(--webcon-600) !important;
  --gl-button-confirm-primary-background-color-focus: var(--webcon-600) !important;
  --gl-button-confirm-primary-background-color-active: var(--webcon-700) !important;
  --gl-button-confirm-primary-border-color-default: var(--webcon-600) !important;
  --gl-button-confirm-primary-border-color-hover: var(--webcon-700) !important;
  --gl-button-confirm-primary-border-color-focus: var(--webcon-700) !important;
  --gl-button-confirm-primary-border-color-active: var(--webcon-800) !important;
  --gl-button-confirm-primary-foreground-color-default: var(--webcon-on-primary) !important;
  --gl-button-confirm-primary-foreground-color-hover: var(--webcon-on-primary) !important;
  --gl-button-confirm-primary-foreground-color-focus: var(--webcon-on-primary) !important;
  --gl-button-confirm-primary-foreground-color-active: var(--webcon-on-primary) !important;

  --gl-action-selected-background-color-default: var(--webcon-500) !important;
  --gl-action-selected-background-color-hover: var(--webcon-600) !important;
  --gl-action-selected-background-color-focus: var(--webcon-600) !important;
  --gl-action-selected-background-color-active: var(--webcon-700) !important;
  --gl-action-selected-border-color-default: var(--webcon-500) !important;
  --gl-action-selected-border-color-hover: var(--webcon-600) !important;
  --gl-action-selected-border-color-focus: var(--webcon-600) !important;
  --gl-action-selected-border-color-active: var(--webcon-700) !important;
  --gl-action-selected-foreground-color-default: var(--webcon-on-primary) !important;
  --gl-action-selected-foreground-color-hover: var(--webcon-on-primary) !important;
  --gl-action-selected-foreground-color-focus: var(--webcon-on-primary) !important;
  --gl-action-selected-foreground-color-active: var(--webcon-on-primary) !important;
  --gl-nav-item-selected-background-color-default: var(--webcon-500) !important;
  --gl-nav-item-selected-background-color-hover: var(--webcon-600) !important;
  --gl-nav-item-selected-background-color-focus: var(--webcon-600) !important;
  --gl-nav-item-selected-background-color-active: var(--webcon-700) !important;
  --gl-nav-item-selected-foreground-color-default: var(--webcon-on-primary) !important;
  --gl-nav-item-selected-foreground-color-hover: var(--webcon-on-primary) !important;
  --gl-nav-item-selected-foreground-color-focus: var(--webcon-on-primary) !important;
  --gl-nav-item-selected-foreground-color-active: var(--webcon-on-primary) !important;

  /* Secondary and quiet buttons follow webconsulting's outlined button style. */
  --gl-button-default-primary-background-color-default: var(--webcon-surface) !important;
  --gl-button-default-primary-background-color-hover: var(--webcon-50) !important;
  --gl-button-default-primary-background-color-focus: var(--webcon-50) !important;
  --gl-button-default-primary-background-color-active: var(--webcon-100) !important;
  --gl-button-default-primary-border-color-default: var(--webcon-border) !important;
  --gl-button-default-primary-border-color-hover: var(--webcon-600) !important;
  --gl-button-default-primary-border-color-focus: var(--webcon-600) !important;
  --gl-button-default-primary-border-color-active: var(--webcon-700) !important;
  --gl-button-default-primary-foreground-color-default: var(--webcon-700) !important;
  --gl-button-default-primary-foreground-color-hover: var(--webcon-700) !important;
  --gl-button-default-primary-foreground-color-focus: var(--webcon-700) !important;
  --gl-button-default-primary-foreground-color-active: var(--webcon-800) !important;
  --gl-button-default-tertiary-background-color-default: transparent !important;
  --gl-button-default-tertiary-background-color-hover: var(--webcon-primary-hover-surface) !important;
  --gl-button-default-tertiary-background-color-focus: var(--webcon-primary-hover-surface) !important;
  --gl-button-default-tertiary-background-color-active: var(--webcon-primary-active-surface) !important;
  --gl-button-default-tertiary-foreground-color-default: var(--webcon-700) !important;
  --gl-button-default-tertiary-foreground-color-hover: var(--webcon-700) !important;
  --gl-button-default-tertiary-foreground-color-focus: var(--webcon-700) !important;
  --gl-button-default-tertiary-foreground-color-active: var(--webcon-800) !important;
  --gl-button-selected-background-color-default: var(--webcon-100) !important;
  --gl-button-selected-background-color-hover: var(--webcon-50) !important;
  --gl-button-selected-background-color-focus: var(--webcon-50) !important;
  --gl-button-selected-background-color-active: var(--webcon-200) !important;
  --gl-button-selected-border-color-default: var(--webcon-500) !important;
  --gl-button-selected-border-color-hover: var(--webcon-600) !important;
  --gl-button-selected-border-color-focus: var(--webcon-600) !important;
  --gl-button-selected-border-color-active: var(--webcon-700) !important;
  --gl-button-selected-foreground-color-default: var(--webcon-700) !important;
  --gl-button-selected-foreground-color-hover: var(--webcon-700) !important;
  --gl-button-selected-foreground-color-focus: var(--webcon-700) !important;
  --gl-button-selected-foreground-color-active: var(--webcon-800) !important;

  /* Outlined and text-only confirm actions. */
  --gl-button-confirm-secondary-background-color-default: var(--webcon-surface) !important;
  --gl-button-confirm-secondary-background-color-hover: var(--webcon-50) !important;
  --gl-button-confirm-secondary-background-color-focus: var(--webcon-50) !important;
  --gl-button-confirm-secondary-background-color-active: var(--webcon-100) !important;
  --gl-button-confirm-secondary-border-color-default: var(--webcon-500) !important;
  --gl-button-confirm-secondary-border-color-hover: var(--webcon-600) !important;
  --gl-button-confirm-secondary-border-color-focus: var(--webcon-600) !important;
  --gl-button-confirm-secondary-border-color-active: var(--webcon-700) !important;
  --gl-button-confirm-secondary-foreground-color-default: var(--webcon-700) !important;
  --gl-button-confirm-secondary-foreground-color-hover: var(--webcon-700) !important;
  --gl-button-confirm-secondary-foreground-color-focus: var(--webcon-700) !important;
  --gl-button-confirm-secondary-foreground-color-active: var(--webcon-800) !important;
  --gl-action-confirm-background-color-default: transparent !important;
  --gl-action-confirm-background-color-hover: var(--webcon-primary-hover-surface) !important;
  --gl-action-confirm-background-color-focus: var(--webcon-primary-hover-surface) !important;
  --gl-action-confirm-background-color-active: var(--webcon-primary-active-surface) !important;
  --gl-action-confirm-foreground-color-default: var(--webcon-700) !important;
  --gl-action-confirm-foreground-color-hover: var(--webcon-700) !important;
  --gl-action-confirm-foreground-color-focus: var(--webcon-700) !important;
  --gl-action-confirm-foreground-color-active: var(--webcon-800) !important;
  --gl-button-confirm-tertiary-background-color-default: transparent !important;
  --gl-button-confirm-tertiary-background-color-hover: var(--webcon-primary-hover-surface) !important;
  --gl-button-confirm-tertiary-background-color-focus: var(--webcon-primary-hover-surface) !important;
  --gl-button-confirm-tertiary-background-color-active: var(--webcon-primary-active-surface) !important;
  --gl-button-confirm-tertiary-foreground-color-default: var(--webcon-700) !important;
  --gl-button-confirm-tertiary-foreground-color-hover: var(--webcon-700) !important;
  --gl-button-confirm-tertiary-foreground-color-focus: var(--webcon-700) !important;
  --gl-button-confirm-tertiary-foreground-color-active: var(--webcon-800) !important;

  /* Links, focus, tabs, controls and informational states. */
  --gl-text-color-link: var(--webcon-700) !important;
  --gl-button-link-text-color-default: var(--webcon-700) !important;
  --gl-button-link-text-color-hover: var(--webcon-700) !important;
  --gl-button-link-text-color-focus: var(--webcon-700) !important;
  --gl-button-link-text-color-active: var(--webcon-800) !important;
  --gl-focus-ring-outer-color: var(--webcon-500) !important;
  --gl-tab-selected-indicator-color-default: var(--webcon-500) !important;
  --gl-control-background-color-selected-default: var(--webcon-500) !important;
  --gl-control-background-color-selected-hover: var(--webcon-600) !important;
  --gl-control-background-color-selected-focus: var(--webcon-600) !important;
  --gl-control-border-color-selected-default: var(--webcon-500) !important;
  --gl-control-border-color-selected-hover: var(--webcon-600) !important;
  --gl-control-border-color-selected-focus: var(--webcon-600) !important;
  --gl-dropdown-option-indicator-color-selected-default: var(--webcon-500) !important;
  --gl-dropdown-option-indicator-color-selected-hover: var(--webcon-700) !important;
  --gl-dropdown-option-indicator-color-selected-focus: var(--webcon-700) !important;
  --gl-dropdown-option-indicator-color-selected-active: var(--webcon-700) !important;
  --gl-toggle-switch-icon-color-checked-default: var(--webcon-500) !important;
  --gl-toggle-switch-icon-color-checked-hover: var(--webcon-600) !important;
  --gl-toggle-switch-icon-color-checked-focus: var(--webcon-600) !important;
  --gl-toggle-switch-icon-color-checked-active: var(--webcon-700) !important;
  --gl-feedback-info-background-color: var(--webcon-50) !important;
  --gl-feedback-info-border-color: var(--webcon-200) !important;
  --gl-feedback-info-icon-color: var(--webcon-600) !important;
  --gl-feedback-info-text-color: var(--webcon-700) !important;
  --gl-status-info-background-color: var(--webcon-100) !important;
  --gl-status-info-icon-color: var(--webcon-500) !important;
  --gl-status-info-text-color: var(--webcon-700) !important;
  --gl-badge-info-background-color-default: var(--webcon-100) !important;
  --gl-badge-info-background-color-hover: var(--webcon-100) !important;
  --gl-badge-info-background-color-focus: var(--webcon-100) !important;
  --gl-badge-info-background-color-active: var(--webcon-200) !important;
  --gl-badge-info-text-color-default: var(--webcon-700) !important;
  --gl-badge-info-text-color-hover: var(--webcon-800) !important;
  --gl-badge-info-text-color-focus: var(--webcon-800) !important;
  --gl-badge-info-text-color-active: var(--webcon-900) !important;
  --gl-badge-info-icon-color-default: var(--webcon-500) !important;
  --gl-badge-info-icon-color-hover: var(--webcon-600) !important;
  --gl-badge-info-icon-color-focus: var(--webcon-600) !important;
  --gl-badge-info-icon-color-active: var(--webcon-700) !important;
  --gl-link-mention-background-color-default: var(--webcon-100) !important;
  --gl-link-mention-text-color-default: var(--webcon-800) !important;
}

/* GitLab navigation themes otherwise force blue/purple page surfaces. */
:root:not(.gl-dark).application-chrome.page-with-panels {
  --body-background-color: var(--webcon-page) !important;
  --super-sidebar-theme-color: var(--webcon-500) !important;
  --super-sidebar-theme-accent-color: var(--webcon-500) !important;
  --super-sidebar-theme-accent-badge-color: var(--webcon-600) !important;
  --super-sidebar-accent-foreground-color: var(--webcon-900) !important;
  --super-sidebar-accent-background-color: var(--webcon-100) !important;
}

:root.gl-dark.application-chrome.page-with-panels {
  --body-background-color: var(--webcon-page) !important;
  --super-sidebar-theme-color: var(--webcon-500) !important;
  --super-sidebar-theme-accent-color: var(--webcon-500) !important;
  --super-sidebar-theme-accent-badge-color: var(--webcon-600) !important;
  --super-sidebar-accent-foreground-color: var(--webcon-950) !important;
  --super-sidebar-accent-background-color: var(--webcon-100) !important;
}

/* Visible, brand-consistent keyboard focus for legacy components. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--webcon-500) !important;
  outline-offset: 2px !important;
}

/* Project lists: avoid GitLab's redundant generic project glyph when a custom
 * avatar is present, and give the meaningful project pictogram room to read. */
[data-testid='project-content']
  > .gl-mr-3:has(+ .gl-avatar-labeled > img.gl-avatar) {
  display: none !important;
}

[data-testid='project-content'] .gl-avatar-labeled > img.gl-avatar-s32 {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px rgba(15, 69, 85, 0.18);
}

[data-testid='project-content'] .gl-avatar-labeled-labels {
  margin-left: 12px !important;
}

/* Preserve semantic danger/success/warning colours: only corporate actions,
 * information states and navigation are recoloured. */