/*
 * 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.
 */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/-/webconsulting-theme/HankenGrotesk-Variable.ttf') format('truetype');
}

: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: #f3f6f7;
  --webcon-surface: #ffffff;
  --webcon-surface-subtle: #edf2f4;
  --webcon-nav: #eef3f5;
  --webcon-selected: #dcebef;
  --webcon-text: #171a1d;
  --webcon-muted-text: #56646a;
  --webcon-border: #c7d3d8;
  --webcon-border-strong: #91a4ac;
  --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: #101416;
  --webcon-surface: #171c1f;
  --webcon-surface-subtle: #20282c;
  --webcon-nav: #141b1e;
  --webcon-selected: #23343a;
  --webcon-text: #f4f7f8;
  --webcon-muted-text: #b8c5ca;
  --webcon-border: #3b4a50;
  --webcon-border-strong: #60757d;
  --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 {
  --font-family-sans-serif: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  --gl-font-family-regular: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif !important;
  --gl-background-color-default: var(--webcon-surface) !important;
  --gl-background-color-subtle: var(--webcon-surface-subtle) !important;
  --gl-background-color-strong: var(--webcon-selected) !important;
  --gl-background-color-disabled: var(--webcon-surface-subtle) !important;
  --gl-border-color-default: var(--webcon-border) !important;
  --gl-border-color-subtle: var(--webcon-border) !important;
  --gl-border-color-strong: var(--webcon-border-strong) !important;
  --gl-text-color-default: var(--webcon-text) !important;
  --gl-text-color-strong: var(--webcon-text) !important;
  --gl-text-color-subtle: var(--webcon-muted-text) !important;
  --gl-control-background-color-default: var(--webcon-surface) !important;
  --gl-control-border-color-default: var(--webcon-border-strong) !important;
  --gl-control-border-color-hover: var(--webcon-500) !important;
  --gl-action-border-radius: 0 !important;
  --gl-alert-border-radius: 0 !important;
  --gl-avatar-square-border-radius-default: 0 !important;
  --gl-avatar-square-border-radius-lg: 0 !important;
  --gl-border-radius-2xl: 0 !important;
  --gl-border-radius-3xl: 0 !important;
  --gl-border-radius-default: 0 !important;
  --gl-border-radius-lg: 0 !important;
  --gl-border-radius-md: 0 !important;
  --gl-border-radius-sm: 0 !important;
  --gl-border-radius-xl: 0 !important;
  --gl-border-radius-xs: 0 !important;
  --gl-broadcast-banner-border-radius: 0 !important;
  --gl-button-border-radius: 0 !important;
  --gl-button-link-border-radius: 0 !important;
  --gl-card-border-radius: 0 !important;
  --gl-control-border-radius: 0 !important;
  --gl-drawer-border-radius: 0 !important;
  --gl-dropdown-border-radius: 0 !important;
  --gl-feedback-border-radius: 0 !important;
  --gl-modal-border-radius: 0 !important;
  --gl-nav-item-border-radius: 0 !important;
  --gl-token-border-radius: 0 !important;
  /* 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-selected) !important;
  --gl-nav-item-selected-background-color-hover: var(--webcon-selected) !important;
  --gl-nav-item-selected-background-color-focus: var(--webcon-selected) !important;
  --gl-nav-item-selected-background-color-active: var(--webcon-selected) !important;
  --gl-nav-item-selected-foreground-color-default: var(--webcon-text) !important;
  --gl-nav-item-selected-foreground-color-hover: var(--webcon-text) !important;
  --gl-nav-item-selected-foreground-color-focus: var(--webcon-text) !important;
  --gl-nav-item-selected-foreground-color-active: var(--webcon-text) !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-selected) !important;
  --application-chrome-nav-item-selected-background-color-default: var(--webcon-selected) !important;
  --application-chrome-nav-item-selected-background-color-hover: var(--webcon-selected) !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-selected) !important;
  --application-chrome-nav-item-selected-background-color-default: var(--webcon-selected) !important;
  --application-chrome-nav-item-selected-background-color-hover: var(--webcon-selected) !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif !important;
}

body,
.application-chrome {
  background: var(--webcon-page) !important;
  color: var(--webcon-text);
}

/* Rectilinear controls and panels follow the current webconsulting system. */
:where(
    .btn,
    .gl-button,
    .form-control,
    .input-group,
    .card,
    .gl-card,
    .alert,
    .badge,
    .gl-badge,
    .dropdown-menu,
    .gl-new-dropdown-panel,
    .modal-content,
    .content-wrapper,
    .super-sidebar-nav-item,
    .gl-tab-nav-item,
    [class*='gl-rounded']
  ) {
  border-radius: 0 !important;
}

.header-message,
.footer-message {
  min-height: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.005em;
}

.header-message p,
.footer-message p {
  margin: 0;
}

.super-topbar {
  border-bottom: 1px solid var(--webcon-border) !important;
  background: var(--webcon-surface) !important;
  box-shadow: none !important;
}

.super-sidebar {
  border-right: 1px solid var(--webcon-border);
  background: var(--webcon-nav) !important;
}

.super-sidebar-context-header {
  color: var(--webcon-muted-text);
  font-size: 13px;
  letter-spacing: 0.015em;
}

.super-sidebar-nav-item {
  min-height: 36px;
  border-left: 3px solid transparent;
}

.super-sidebar-nav-item:hover,
.super-sidebar-nav-item:focus-visible {
  background: var(--webcon-surface-subtle) !important;
}

.super-sidebar-nav-item-current {
  border-left-color: var(--webcon-500);
  background: var(--webcon-selected) !important;
  color: var(--webcon-text) !important;
  font-weight: 650;
}

.content-wrapper {
  position: relative;
  border: 0 !important;
  background: var(--webcon-surface) !important;
  box-shadow: none !important;
}

.content-wrapper::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--webcon-500) 0 calc(100% - 72px),
    var(--webcon-300) calc(100% - 72px) 100%
  );
  content: '';
  pointer-events: none;
}

.panel-header {
  border-bottom: 1px solid var(--webcon-border) !important;
  background: var(--webcon-surface) !important;
}

.gl-breadcrumbs {
  color: var(--webcon-muted-text);
  font-size: 13px;
}

.page-title {
  color: var(--webcon-text);
  font-weight: 680 !important;
  letter-spacing: -0.018em;
}

.gl-tabs-nav {
  border-bottom-color: var(--webcon-border) !important;
}

.gl-tab-nav-item {
  border-bottom: 2px solid transparent !important;
}

.gl-tab-nav-item:hover,
.gl-tab-nav-item:focus-visible {
  border-bottom-color: var(--webcon-border-strong) !important;
  background: transparent !important;
}

.gl-tab-nav-item-active,
.gl-tab-nav-item-active:hover,
.gl-tab-nav-item-active:focus-visible {
  border-bottom-color: var(--webcon-500) !important;
  color: var(--webcon-700) !important;
}

.gl-table tbody tr:hover,
table.table tbody tr:hover,
[data-testid='project-content']:hover {
  background: var(--webcon-surface-subtle) !important;
}

/* The sign-in page echoes the invoice structure: quiet surface, strong rule,
 * compact typography, and one cyan marker rather than a large teal field. */
.login-page {
  background: var(--webcon-page) !important;
}

.login-page .container.gl-self-center {
  width: min(1040px, calc(100% - 32px));
  max-width: 1040px;
}

.login-page main.content > .row {
  position: relative;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 36px 32px;
  border: 1px solid var(--webcon-border);
  border-top: 3px solid var(--webcon-500);
  background: var(--webcon-surface);
}

.login-page main.content > .row::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 72px;
  height: 3px;
  background: var(--webcon-300);
  content: '';
}

.login-page main.content > .row > .col-md:first-child {
  padding-right: 44px;
}

.login-page main.content > .row > .col-md:last-child {
  padding-left: 44px;
  border-left: 1px solid var(--webcon-border);
}

.login-page h1 {
  color: var(--webcon-text);
  font-weight: 680;
  letter-spacing: -0.015em;
}

.login-page .footer-container hr {
  border-color: var(--webcon-border) !important;
}

@media (max-width: 767px) {
  .login-page main.content > .row {
    padding: 28px 20px;
  }

  .login-page main.content > .row > .col-md:first-child,
  .login-page main.content > .row > .col-md:last-child {
    padding-right: 12px;
    padding-left: 12px;
    border-left: 0;
  }
}

/* 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: 0 !important;
  box-shadow: 0 0 0 1px rgba(15, 69, 85, 0.18);
}

[data-testid='project-content'] {
  min-height: 64px;
}

[data-testid='project-content'] .gl-avatar-labeled-labels {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

[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. */