/**
 * Gravity Design System Theme Override for Spinnaker Deck
 *
 * This CSS remaps Deck's @spinnaker/styleguide CSS custom properties
 * to Gravity design tokens, giving the UI a Gravity visual identity
 * without modifying any source code.
 *
 * Gravity tokens sourced from @gravity/foundation (2026-07-02)
 */

/* ============================================================
   Gravity Font Faces (Bull) — loaded from Gravity CDN
   ============================================================ */
@font-face {
  font-display: swap;
  font-family: 'Bull';
  font-style: normal;
  font-weight: normal;
  src:
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Regular.woff2') format('woff2'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Regular.woff') format('woff'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Bull';
  font-style: normal;
  font-weight: 500;
  src:
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Medium.woff2') format('woff2'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Medium.woff') format('woff'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Medium.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: 'Bull';
  font-style: normal;
  font-weight: bold;
  src:
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Bold.woff2') format('woff2'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Bold.woff') format('woff'),
    url('https://rbds-static.redbull.com/@gravity/foundation/latest/fonts/v5.002/BullText-Bold.ttf') format('truetype');
}

/* ============================================================
   Gravity Foundation Tokens
   ============================================================ */
:root {
  /* --- Gravity Core Tokens --- */
  --gravity-color-primary: #1B6AEE;
  --gravity-color-primary-lighter: #3279F0;
  --gravity-color-primary-darker: #175ACA;
  --gravity-color-focus: #1B6AEE;

  --gravity-color-accent-informative: #FF9000;
  --gravity-color-accent-informative-light: #FFF4E6;
  --gravity-color-accent-negative: #DB0A40;
  --gravity-color-accent-negative-lighter: #F50B48;
  --gravity-color-accent-negative-light: #FBE7EC;
  --gravity-color-accent-positive: #159D48;
  --gravity-color-accent-positive-light: #D0EBDA;

  --gravity-color-text-dark: #000F1E;
  --gravity-color-text-dark-subtle: rgba(0,15,30,0.6);
  --gravity-color-text-dark-muted: rgba(0,15,30,0.4);
  --gravity-color-text-light: #FFFFFF;

  --gravity-color-surface-dark: #00162B;
  --gravity-color-surface-dark-lighter: #001C39;
  --gravity-color-surface-light: #F8F8F8;
  --gravity-color-surface-light-lighter: #FFFFFF;
  --gravity-color-surface-light-darker: #EFEFEF;
  --gravity-color-surface-primary: #DDE9FC;
  --gravity-color-surface-primary-lighter: #F4F8FE;

  --gravity-color-glass-dark-5: rgba(0,15,30,0.05);
  --gravity-color-glass-dark-10: rgba(0,15,30,0.1);
  --gravity-color-glass-dark-20: rgba(0,15,30,0.2);
  --gravity-color-glass-dark-60: rgba(0,15,30,0.6);

  --gravity-font-family-text: 'Bull', Helvetica, sans-serif;
  --gravity-font-family-title: 'Bull', Helvetica, sans-serif;

  --gravity-radius-small: 4px;
  --gravity-radius-medium: 6px;
  --gravity-radius-large: 8px;

  --gravity-spacing-xx-tight: 4px;
  --gravity-spacing-x-tight: 8px;
  --gravity-spacing-tight: 12px;
  --gravity-spacing-normal: 16px;
  --gravity-spacing-loose: 24px;
  --gravity-spacing-x-loose: 32px;

  --gravity-elevation-1: 0px 8px 12px 0px rgba(0,15,30,0.04), 0px 2px 4px 0px rgba(0,15,30,0.02);
  --gravity-elevation-2: 0px 16px 24px 0px rgba(0,15,30,0.06), 0px 4px 8px 0px rgba(0,15,30,0.02);

  /* ============================================================
     Deck Styleguide Variable Remapping → Gravity
     NOTE: !important is required to override webpack-inlined
     @spinnaker/styleguide CSS which loads dynamically at runtime.
     ============================================================ */

  /* --- Primary / Brand --- */
  --color-primary: var(--gravity-color-surface-dark) !important;
  --color-primary-g1: var(--gravity-color-surface-dark-lighter) !important;

  /* --- Accent (links, buttons, interactive) --- */
  --color-accent: var(--gravity-color-primary) !important;
  --color-accent-g1: var(--gravity-color-primary-lighter) !important;
  --color-accent-g2: var(--gravity-color-surface-light-darker) !important;
  --color-accent-g3: var(--gravity-color-surface-light-darker) !important;

  /* --- Text --- */
  --color-text-link: var(--gravity-color-primary) !important;
  --color-text-link-g1: var(--gravity-color-primary-darker) !important;
  --color-text-primary: var(--gravity-color-text-dark) !important;
  --color-text-secondary: var(--gravity-color-text-dark-subtle) !important;
  --color-text-on-dark: var(--gravity-color-text-light) !important;

  /* --- Neutrals / Surfaces --- */
  --color-white: #FFFFFF !important;
  --color-black: var(--gravity-color-text-dark) !important;
  --color-alabaster: var(--gravity-color-surface-light) !important;
  --color-seashell: var(--gravity-color-surface-light-darker) !important;
  --color-porcelain: var(--gravity-color-surface-light-darker) !important;
  --color-cirrus: var(--gravity-color-surface-primary-lighter) !important;
  --color-smoke: var(--gravity-color-glass-dark-5) !important;
  --color-silver: var(--gravity-color-glass-dark-10) !important;
  --color-alto: var(--gravity-color-glass-dark-10) !important;
  --color-concrete: var(--gravity-color-glass-dark-20) !important;
  --color-nobel: var(--gravity-color-text-dark-muted) !important;
  --color-dovegray: var(--gravity-color-text-dark-subtle) !important;
  --color-titanium: var(--gravity-color-text-dark-muted) !important;
  --color-mineshaft: var(--gravity-color-text-dark) !important;
  --color-charcoal: var(--gravity-color-surface-dark) !important;
  --color-regal: var(--gravity-color-surface-dark) !important;
  --color-blumine: var(--gravity-color-primary-darker) !important;
  --color-divider: var(--gravity-color-glass-dark-10) !important;

  /* --- Semantic Status --- */
  --color-success: var(--gravity-color-accent-positive) !important;
  --color-success-light: var(--gravity-color-accent-positive-light) !important;
  --color-danger: var(--gravity-color-accent-negative) !important;
  --color-danger-light: var(--gravity-color-accent-negative-light) !important;
  --color-danger-medium: var(--gravity-color-accent-negative-lighter) !important;
  --color-warning: var(--gravity-color-accent-informative) !important;
  --color-warning-light: var(--gravity-color-accent-informative-light) !important;
  --color-alert: var(--gravity-color-accent-informative) !important;
  --color-alert-light: var(--gravity-color-accent-informative-light) !important;
  --color-accessory: var(--gravity-color-accent-informative) !important;
  --color-accessory-light: var(--gravity-color-accent-informative-light) !important;

  /* --- Status (managed delivery) --- */
  --color-status-success: var(--gravity-color-accent-positive) !important;
  --color-status-success-light: var(--gravity-color-accent-positive-light) !important;
  --color-status-error: var(--gravity-color-accent-negative) !important;
  --color-status-error-light: var(--gravity-color-accent-negative-light) !important;
  --color-status-warning: var(--gravity-color-accent-informative) !important;
  --color-status-warning-light: var(--gravity-color-accent-informative-light) !important;
  --color-status-info: var(--gravity-color-primary) !important;
  --color-status-info-light: var(--gravity-color-surface-primary) !important;
  --color-status-neutral-light: var(--gravity-color-surface-light-darker) !important;
  --color-status-progress-light: var(--gravity-color-surface-primary) !important;

  /* --- Validation --- */
  --color-validation-error: var(--gravity-color-accent-negative) !important;
  --color-validation-error-light: var(--gravity-color-accent-negative-light) !important;
  --color-validation-success: var(--gravity-color-accent-positive) !important;
  --color-validation-success-light: var(--gravity-color-accent-positive-light) !important;
  --color-validation-info: var(--gravity-color-primary) !important;
  --color-validation-info-light: var(--gravity-color-surface-primary) !important;
  --color-validation-warning-light: var(--gravity-color-accent-informative-light) !important;
  --color-validation-black: var(--gravity-color-text-dark) !important;

  /* --- GitHub Diff (unchanged) --- */
  --color-github-history-add: #d6fcd6 !important;
  --color-github-history-remove: #fcd6d6 !important;

  /* --- Z-index layers (preserve Deck's defaults) --- */
  --layer-high: 100 !important;
  --layer-critical: 10000 !important;
}

/* ============================================================
   Typography Override
   NOTE: Excludes icon font elements (.glyphicon, .fa, .fas, .far, .fab)
   ============================================================ */
body,
html,
.tooltip,
.popover,
.navbar-inverse,
.navbar-inverse a,
.navbar-inverse span,
.navbar-inverse button,
.navbar-inverse input,
.navbar-inverse .navbar-brand {
  font-family: var(--gravity-font-family-text) !important;
}

/* Restore icon font families */
.glyphicon.glyphicon,
.navbar-inverse .glyphicon,
[class*="glyphicon-"],
i.glyphicon,
span.glyphicon,
button .glyphicon,
.btn .glyphicon,
.btn > .glyphicon {
  font-family: 'Glyphicons Halflings' !important;
}

/* Spinnaker custom icons use icomoon font; they combine .glyphicon with
   icon-* classes (e.g. "icon-spinner"). Use class^= and class~= patterns
   that only match standalone icon-* classes, NOT glyphicon-* substrings. */
span.glyphicon[class~="icon-spinner"],
.glyphicon[class*=" icon-"],
.glyphicon[class^="icon-"],
.btn .glyphicon[class*=" icon-"],
button .glyphicon[class*=" icon-"] {
  font-family: 'icomoon' !important;
}

.fa.fa, .fas.fas, .far.far, .fab.fab,
.navbar-inverse .fa,
i.fa, i.fas, i.far, i.fab,
[class*="fa-"] {
  font-family: 'Font Awesome 5 Free' !important;
}

/* ============================================================
   Navbar / Header — Gravity dark surface
   ============================================================ */
.navbar-inverse {
  background-color: var(--gravity-color-surface-dark) !important;
  box-shadow: var(--gravity-elevation-1);
}

.navbar-inverse,
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .nav-items > li > a {
  font-family: var(--gravity-font-family-title) !important;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .nav-items > li > a {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.navbar-inverse .navbar-nav > li > a:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .nav-items > li > a:focus,
.navbar-inverse .nav-items > li > a:hover,
.navbar-inverse .nav-items > .active > a,
.navbar-inverse .nav-items > .active > a:focus,
.navbar-inverse .nav-items > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse a.active,
.navbar-inverse li.active > a,
.navbar-inverse .nav.nav-items a.active,
.navbar-inverse .nav.page-nav a.active {
  background-color: #001C39 !important;
}

/* ============================================================
   Buttons — Gravity radius & colors
   ============================================================ */
.btn {
  border-radius: var(--gravity-radius-large) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Keep the compact filter-toggle button at normal weight so its width
   matches Deck's collapsed-filter layout; use Gravity's standard radius
   without changing its padding or positioning. */
.filters-toggle .btn {
  font-weight: 400 !important;
  border-radius: var(--gravity-radius-large) !important;
}

/* Pipeline executions only: the source toggle's 11px top margin is
   7px too high relative to the compact +/- controls after Gravity
   button styles apply. Align their vertical centers without changing
   the cluster toolbar. */
.executions-section .filters-toggle .filters-hidden {
  margin-top: 18px !important;
}

/* Reserve the compact filter button width plus a 16px gutter before the
   pipeline's +/- controls. This avoids the visual collision caused by
   Deck's original 84px offset when the Gravity radius is applied. */
.insight.filters-collapsed .execution-groups-header {
  margin-left: 100px !important;
}

.btn:focus,
.btn:active:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-color-focus) 30%, transparent);
  outline: none;
}

.btn-primary,
html .btn-primary,
.action-buttons .btn-primary {
  background-color: var(--gravity-color-primary) !important;
  border-color: var(--gravity-color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active,
.action-buttons .btn-primary:hover,
.action-buttons .btn-primary:focus {
  background-color: var(--gravity-color-primary-darker) !important;
  border-color: var(--gravity-color-primary-darker) !important;
}

/* ============================================================
   Cards & Panels — Gravity elevation and radius
   ============================================================ */
.panel,
.modal-content {
  border-radius: var(--gravity-radius-large);
  box-shadow: var(--gravity-elevation-1);
  border-color: var(--gravity-color-glass-dark-10);
}

.modal-content {
  border: 1px solid var(--gravity-color-glass-dark-10);
}

/* ============================================================
   Form Controls
   ============================================================ */
.form-control,
.Select-control {
  border-radius: var(--gravity-radius-small);
  border-color: var(--gravity-color-glass-dark-20);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
  border-color: var(--gravity-color-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-color-focus) 15%, transparent);
}

/* ============================================================
   Links
   ============================================================ */
a {
  color: var(--gravity-color-primary);
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--gravity-color-primary-darker);
}

/* ============================================================
   Loading Placeholder Override (splash screen)
   ============================================================ */
.loading-placeholder {
  background-color: var(--gravity-color-surface-dark) !important;
  color: var(--gravity-color-text-light) !important;
}

/* Make the Spinnaker logo visible against the dark Gravity background */
.loading-placeholder > svg {
  opacity: 0.85 !important;
  filter: brightness(1.8) saturate(0.5) !important;
}
.loading-placeholder h1,
.loading-placeholder h2 {
  font-family: var(--gravity-font-family-title) !important;
  color: var(--gravity-color-text-light) !important;
  font-weight: 500 !important;
}

.loading-placeholder .bar,
.loading-placeholder div.bar,
div.loading-placeholder div.bar {
  background-color: var(--gravity-color-primary) !important;
  border-radius: var(--gravity-radius-small) !important;
  min-height: 6px !important;
}

/* ============================================================
   Search Header / Infrastructure Section — old teal override
   ============================================================ */
.infrastructure-section.search-header,
.search-header,
div.infrastructure-section.search-header {
  background-color: var(--gravity-color-surface-light-darker) !important;
  background: var(--gravity-color-surface-light-darker) !important;
}

/* Sidebar / Vertical Navigation — use subtle surface instead of heavy blue */
.vertical-navigation {
  background-color: var(--gravity-color-surface-light-darker) !important;
}

/* Sidebar nav items — use dark text instead of blue for readability */
.vertical-navigation a,
.vertical-navigation .nav-category {
  color: var(--gravity-color-text-dark) !important;
}

/* Active sidebar nav item — subtle primary highlight with left accent border */
.vertical-navigation a.active,
.vertical-navigation .active,
.nav-category.active {
  background-color: var(--gravity-color-surface-primary-lighter) !important;
  border-left: 3px solid var(--gravity-color-primary) !important;
  color: var(--gravity-color-primary) !important;
}

/* Execution group headers — use lighter surface.
   NOTE: .execution-group-actions is INSIDE .execution-group-heading .shadowed
   (same flex row as the pipeline title), so it should NOT have a different
   background — that creates visual disconnection. */
.execution-group-actions {
  background-color: transparent !important;
}

/* Pipeline heading .shadowed container — make transparent so it
   inherits from the parent sticky-header context rather than
   creating a visually disconnected white bar.
   The .sticky-header parent gets a consistent surface background. */
.execution-group-heading .shadowed {
  background-color: transparent !important;
}

/* The sticky-header wrapping the pipeline name should have a
   consistent light surface background that visually connects
   the pipeline name with the trigger/configure controls (they're
   all in one flex row inside .execution-group-heading). */
.sticky-header {
  background-color: var(--gravity-color-surface-light-darker) !important;
  height: auto !important;
}

/* Stage details / info tables — subtle background */
.stage-details {
  background-color: var(--gravity-color-surface-light) !important;
}

/* Permalinks content — transparent to blend with the panel container */
.permalinks-content {
  background-color: transparent !important;
}

/* Pipeline execution bars — Gravity 40% accent tint
   Using color-mix() at 40% accent with white for large filled areas.
   Colored text for readability on the light background. */
.stage-progress .bar.bar-success,
.progress-bar-success {
  background-color: color-mix(in srgb, var(--gravity-color-accent-positive) 40%, white) !important;
  border-radius: var(--gravity-radius-small) !important;
}

.stage-progress .bar.bar-danger,
.progress-bar-danger {
  background-color: color-mix(in srgb, var(--gravity-color-accent-negative) 40%, white) !important;
  border-radius: var(--gravity-radius-small) !important;
}

/* Table rows with info highlighting — very subtle */
.table > tbody > tr.info > td {
  background-color: var(--gravity-color-surface-primary-lighter) !important;
}

/* Override any remaining hardcoded Spinnaker teal backgrounds */
[style*="background-color: rgb(215, 232, 237)"],
[style*="background-color:#D7E8ED"],
[style*="background: rgb(215, 232, 237)"] {
  background-color: var(--gravity-color-surface-primary-lighter) !important;
}

/* ============================================================
   Cluster Instance Boxes — Tone down icon/text color
   Per Gravity color guidelines, the primary blue should be used
   "only scarcely and only to highlight key actionable elements."
   Small status indicator icons in cluster instance boxes should
   use a subtler, muted color instead of the full primary blue.
   ============================================================ */
.instance {
  color: var(--gravity-color-text-dark-subtle) !important;
}

/* ============================================================
   Scrollbar Styling
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gravity-color-glass-dark-20);
  border-radius: var(--gravity-radius-full, 9999px);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gravity-color-glass-dark-60);
}

/* ============================================================
   Application-Level Tabs — Gravity Tabs Pattern
   (Secondary navigation: Pipelines, Clusters, Load Balancers, etc.)
   Uses underline indicator instead of background highlight,
   creating clear hierarchy below the main Navigation.
   NOTE: The top navbar also contains a .nav.nav-items.page-nav list,
   so these selectors MUST NOT match inside .navbar-inverse.
   We use :not(.navbar-inverse) .nav... which won't work because
   there are intermediate elements. Instead, we override back
   in the Navbar section. Here we just scope more carefully.
   ============================================================ */
.nav.nav-items.page-nav > li > a,
.application-nav a,
.nav.page-nav > li > a {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 400 !important;
  color: var(--gravity-color-text-dark) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  background: transparent !important;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.15s ease;
  margin-bottom: -1px;
}

.nav.nav-items.page-nav > li > a:hover,
.application-nav a:hover,
.nav.page-nav > li > a:hover {
  background: var(--gravity-color-surface-light-darker) !important;
  border-bottom-color: var(--gravity-color-glass-dark-10) !important;
  color: var(--gravity-color-text-dark) !important;
}

.nav.nav-items.page-nav > li.active > a,
.nav.nav-items.page-nav > li > a.active,
.application-nav a.active,
.nav.page-nav > li.active > a,
.nav.page-nav > li > a.active {
  font-weight: 500 !important;
  color: var(--gravity-color-primary) !important;
  border-bottom-color: var(--gravity-color-primary) !important;
  background: transparent !important;
}

/* Tab bar container — subtle bottom border to anchor the tabs */
.nav.nav-items.page-nav,
.nav.page-nav {
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  margin-bottom: var(--gravity-spacing-normal) !important;
}

/* --- Navbar override: undo the application-tab styles inside the top bar ---
   The navbar also uses .nav.nav-items.page-nav, so we must restore
   its link colors to light text on dark background here.
   Per Gravity Navigation guidelines:
   - Always highlight the page-corresponding item as active.
   - Inactive items use text-light-subtle (60% opacity white) for hierarchy.
   - Active item uses full text-light (white) + surface-dark-lighter background.
   This creates clear visual distinction between active and non-active states. */
.navbar-inverse .nav.nav-items.page-nav > li > a,
.navbar-inverse .nav.page-nav > li > a {
  color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: none !important;
  background: transparent !important;
  padding: 15px !important;
  margin-bottom: 0 !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-inverse .nav.nav-items.page-nav > li > a:hover,
.navbar-inverse .nav.nav-items.page-nav > li > a:focus,
.navbar-inverse .nav.page-nav > li > a:hover,
.navbar-inverse .nav.page-nav > li > a:focus {
  background-color: var(--gravity-color-surface-dark-lighter) !important;
  color: var(--gravity-color-text-light) !important;
  border-bottom: none !important;
}

.navbar-inverse .nav.nav-items.page-nav > li.active > a,
.navbar-inverse .nav.nav-items.page-nav > li > a.active,
.navbar-inverse .nav.page-nav > li.active > a,
.navbar-inverse .nav.page-nav > li > a.active {
  background-color: var(--gravity-color-surface-dark-lighter) !important;
  color: var(--gravity-color-text-light) !important;
  font-weight: 500 !important;
  border-bottom: none !important;
}

.navbar-inverse .nav.nav-items.page-nav,
.navbar-inverse .nav.page-nav {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Filter Sidebar — Gravity Filter Sidebar + Panel Pattern
   Left panel with pipeline and status filters.
   Uses surface stacking (darker surface = further back).
   ============================================================ */
.filter-section,
.execution-filters,
.all-filters {
  background: var(--gravity-color-surface-light) !important;
  border-right: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-normal) !important;
}

.filter-section h4,
.execution-filters h4,
.all-filters h4,
.filter-heading,
.collapsible-filter-section .section-heading {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  margin-bottom: var(--gravity-spacing-x-tight) !important;
  padding: var(--gravity-spacing-xx-tight) 0 !important;
}

/* Filter checkboxes — Gravity primary accent */
.filter-section input[type="checkbox"],
.execution-filters input[type="checkbox"],
.all-filters input[type="checkbox"] {
  accent-color: var(--gravity-color-primary) !important;
}

/* Filter search input */
.filter-section .form-control,
.execution-filters .form-control {
  border-radius: var(--gravity-radius-large) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-tight) !important;
  font-size: 13px !important;
  background: var(--gravity-color-surface-light-lighter) !important;
}

.filter-section .form-control:focus,
.execution-filters .form-control:focus {
  border-color: var(--gravity-color-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-color-focus) 15%, transparent) !important;
}

/* ============================================================
   Execution Group / Pipeline Header — Gravity Toolbar Pattern
   Pipeline name bar with actions (Configure, Start Manual Execution).
   NOTE: .execution-group-actions is INSIDE .execution-group-heading
   (same flex row), so only the heading gets the border-bottom.
   ============================================================ */
.execution-group-heading {
  font-family: var(--gravity-font-family-text) !important;
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  align-items: center !important;
  min-height: 44px !important;
}

.execution-group-heading h4,
.execution-group-heading .execution-group-title {
  font-family: var(--gravity-font-family-title) !important;
  font-weight: 500 !important;
  color: var(--gravity-color-text-dark) !important;
  margin: 0 !important;
}

/* The .shadowed container is a flex row holding the account badge,
   pipeline title, and actions — ensure vertical centering */
.execution-group-heading .shadowed {
  align-items: center !important;
  display: flex !important;
  min-height: 36px !important;
}

/* The .execution-group-actions sits inside the same flex row as the title,
   aligned to the right. Remove any border/background to keep it inline.
   Ensure it's also vertically centered with the title text. */
.execution-group-heading .execution-group-actions {
  border-bottom: none !important;
  padding: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--gravity-spacing-x-tight) !important;
  white-space: nowrap !important;
}

/* Account tag badge in the heading — keep it vertically centered */
.execution-group-heading .heading-tag {
  display: flex !important;
  align-items: center !important;
}

/* ============================================================
   Execution Entries — Gravity List Entry / Panel Pattern
   Individual pipeline run cards. Surface stacking:
   background (light) → card (lighter/white) for contrast rhythm.
   NOTE: .execution-group is inside .execution-groups, not
   .execution-group-container (which doesn't exist in this DOM).
   ============================================================ */
.execution-groups .execution-group,
.all-execution-groups .execution-group {
  background: var(--gravity-color-surface-light-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-large) !important;
  margin-bottom: var(--gravity-spacing-normal) !important;
  overflow: hidden;
}

/* Execution summary section — consistent spacing */
.execution-summary-section {
  padding: var(--gravity-spacing-tight) var(--gravity-spacing-normal) !important;
}

/* Execution trigger metadata (who started it, when) */
.execution-summary-section h5 {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500 !important;
  color: var(--gravity-color-text-dark) !important;
}

.execution-summary-section .execution-status-text,
.execution-summary-section .execution-parameters {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

/* ============================================================
   Pipeline Execution Stage Bars — 40% Accent Tint
   color-mix() at 40% accent with white. Colored text on bars.
   ============================================================ */
.execution-marker {
  border-radius: var(--gravity-radius-small) !important;
  transition: opacity 0.15s ease;
}

.execution-marker:hover {
  opacity: 0.85;
}

.execution-marker.execution-marker-succeeded {
  background-color: color-mix(in srgb, var(--gravity-color-accent-positive) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.execution-marker.execution-marker-running {
  background-color: color-mix(in srgb, var(--gravity-color-primary) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.execution-marker.execution-marker-not_started,
.execution-marker.execution-marker-not-started {
  background-color: var(--gravity-color-surface-light-darker) !important;
  color: rgba(0,15,30,0.4) !important;
}

.execution-marker.execution-marker-canceled,
.execution-marker.execution-marker-stopped {
  background-color: var(--gravity-color-text-dark-muted) !important;
  color: white !important;
}

.execution-marker.execution-marker-failed,
.execution-marker.execution-marker-terminal {
  background-color: color-mix(in srgb, var(--gravity-color-accent-negative) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.execution-marker.execution-marker-failed_continue {
  background-color: color-mix(in srgb, var(--gravity-color-accent-informative) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

/* ============================================================
   Execution Status Pills / Labels — Light Surface + Colored Text
   Same visual language as the stage bars: light fill, accent text.
   ============================================================ */
.execution-summary .label,
.execution-details .label,
.stage-details .label {
  border-radius: var(--gravity-radius-small) !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
}

.label.label-succeeded {
  background-color: color-mix(in srgb, var(--gravity-color-accent-positive) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.label.label-terminal,
.label.label-terminated {
  background-color: color-mix(in srgb, var(--gravity-color-accent-negative) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.label.label-failed_continue {
  background-color: color-mix(in srgb, var(--gravity-color-accent-informative) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.label.label-running,
.label.label-launched {
  background-color: color-mix(in srgb, var(--gravity-color-primary) 40%, white) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.label.label-stopped,
.label.label-canceled {
  background-color: var(--gravity-color-surface-light-darker) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
}

.label.label-not_started,
.label.label-buffered,
.label.label-paused,
.label.label-suspended {
  background-color: var(--gravity-color-surface-light-darker) !important;
  color: var(--gravity-color-text-dark-muted) !important;
}

/* Execution status text — semantic colors matching Gravity accents */
.execution-status .SUCCEEDED,
.execution-summary .SUCCEEDED,
[class*="execution-status"] .SUCCEEDED {
  color: var(--gravity-color-accent-positive) !important;
  font-weight: 500 !important;
}

.execution-status .TERMINAL,
.execution-summary .TERMINAL,
[class*="execution-status"] .TERMINAL {
  color: var(--gravity-color-accent-negative) !important;
  font-weight: 500 !important;
}

.execution-status .RUNNING,
.execution-summary .RUNNING,
[class*="execution-status"] .RUNNING {
  color: var(--gravity-color-primary) !important;
  font-weight: 500 !important;
}

.execution-status .CANCELED,
.execution-status .STOPPED,
.execution-summary .CANCELED,
.execution-summary .STOPPED {
  color: var(--gravity-color-text-dark-subtle) !important;
  font-weight: 500 !important;
}

/* ============================================================
   Stage Detail Table — Gravity Table Visual Pattern
   Steps table with Started, Completed, Duration, Status columns.
   ============================================================ */
.stage-details table,
.execution-details table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.stage-details table thead th,
.execution-details table thead th {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  background: var(--gravity-color-surface-light) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  text-align: left !important;
}

.stage-details table tbody tr,
.execution-details table tbody tr {
  border-bottom: 1px solid var(--gravity-color-glass-dark-5) !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.stage-details table tbody tr:hover,
.execution-details table tbody tr:hover {
  background-color: var(--gravity-color-surface-light-darker) !important;
}

.stage-details table tbody tr:last-child,
.execution-details table tbody tr:last-child {
  border-bottom: none !important;
}

.stage-details table tbody td,
.execution-details table tbody td {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  color: var(--gravity-color-text-dark) !important;
}

/* ============================================================
   Step Detail Tabs — Nested Tabs (Smaller Hierarchy Level)
   (Deployment Config / Task Status / Artifact Status)
   Per Gravity: "Use type to create hierarchy when nested."
   These are visually subordinate to application-level tabs.
   ============================================================ */
.stage-details .nav-tabs,
.detail-section .nav-tabs,
.execution-details .nav-tabs {
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  margin-bottom: var(--gravity-spacing-tight) !important;
}

.stage-details .nav-tabs > li > a,
.detail-section .nav-tabs > li > a,
.execution-details .nav-tabs > li > a {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-x-tight) !important;
  background: transparent !important;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.stage-details .nav-tabs > li > a:hover,
.detail-section .nav-tabs > li > a:hover,
.execution-details .nav-tabs > li > a:hover {
  color: var(--gravity-color-text-dark) !important;
  border-bottom-color: var(--gravity-color-glass-dark-10) !important;
  background: transparent !important;
}

.stage-details .nav-tabs > li.active > a,
.stage-details .nav-tabs > li > a.active,
.detail-section .nav-tabs > li.active > a,
.detail-section .nav-tabs > li > a.active,
.execution-details .nav-tabs > li.active > a,
.execution-details .nav-tabs > li > a.active {
  font-weight: 500 !important;
  color: var(--gravity-color-primary) !important;
  border-bottom-color: var(--gravity-color-primary) !important;
  background: transparent !important;
}

/* ============================================================
   Key-Value Definition Lists — Foundation-Based Composition
   (Deployment Config: Account, Region, Cluster, Strategy, etc.)
   No direct Gravity component exists; built on Foundation tokens.
   ============================================================ */
.stage-details dt,
.detail-section dt,
.execution-details dt,
.dl-horizontal dt {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  /* Match the value line box so label and value centers align. */
  padding-top: 0 !important;
  line-height: 20px !important;
}

.stage-details dd,
.detail-section dd,
.execution-details dd,
.dl-horizontal dd {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: var(--gravity-color-text-dark) !important;
  padding-bottom: var(--gravity-spacing-x-tight) !important;
  border-bottom: 1px solid var(--gravity-color-glass-dark-5) !important;
  margin-bottom: 0 !important;
}

.stage-details dd:last-of-type,
.detail-section dd:last-of-type,
.execution-details dd:last-of-type,
.dl-horizontal dd:last-of-type {
  border-bottom: none !important;
}

/* ============================================================
   Alert / Callout Banner — Gravity Callout Pattern
   (e.g., "application has not been configured" warning)
   Uses left-border accent per Gravity Callout visual style.
   ============================================================ */
.alert,
.alert-info {
  background: var(--gravity-color-surface-primary-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-left: 4px solid var(--gravity-color-primary) !important;
  border-radius: var(--gravity-radius-large) !important;
  color: var(--gravity-color-text-dark) !important;
  padding: var(--gravity-spacing-tight) var(--gravity-spacing-normal) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
}

.alert-warning {
  background: var(--gravity-color-accent-informative-light) !important;
  border-left-color: var(--gravity-color-accent-informative) !important;
}

.alert-danger,
.alert-error {
  background: var(--gravity-color-accent-negative-light) !important;
  border-left-color: var(--gravity-color-accent-negative) !important;
}

.alert-success {
  background: var(--gravity-color-accent-positive-light) !important;
  border-left-color: var(--gravity-color-accent-positive) !important;
}

.alert a {
  color: var(--gravity-color-primary) !important;
  font-weight: 500 !important;
}

/* Alert dismiss button — subtle and accessible */
.alert .close,
.alert button.close {
  color: var(--gravity-color-text-dark-subtle) !important;
  opacity: 0.7 !important;
  font-size: 18px !important;
}

.alert .close:hover,
.alert button.close:hover {
  opacity: 1 !important;
  color: var(--gravity-color-text-dark) !important;
}

/* ============================================================
   Execution Details Container — Active selection indicator
   Deck's original uses a heavy blue box-shadow glow to indicate
   the selected execution's details. Per Gravity border guidelines,
   borders should use the glass palette for structural purposes.
   Replace the blue glow with a subtle, neutral border.
   ============================================================ */
.execution-details-container {
  box-shadow: none !important;
  border: 1px solid var(--gravity-color-glass-dark-20) !important;
  border-radius: var(--gravity-radius-large) !important;
  overflow: hidden !important;
}

/* ============================================================
   Execution Detail Panel — Gravity Panel (right side panel)
   ============================================================ */
.execution-details-section,
.execution-detail-section,
.details-panel {
  background: var(--gravity-color-surface-light-lighter) !important;
  border-left: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-normal) !important;
}

/* Detail panel heading (Stage details: Deploy to PRODUCTION) */
.execution-details-section h5,
.stage-details h5,
.details-panel h5 {
  font-family: var(--gravity-font-family-title) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--gravity-color-text-dark) !important;
  margin-bottom: var(--gravity-spacing-tight) !important;
}

/* Detail panel sub-heading (Duration, etc.) */
.execution-details-section h6,
.stage-details h6,
.details-panel h6 {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  margin-bottom: var(--gravity-spacing-tight) !important;
}

/* ============================================================
   Permalinks / Footer Links — Gravity Link Pattern
   (View as JSON | Permalink + copy button)
   ============================================================ */
.permalinks,
.permalinks-section,
.execution-permalink {
  border-top: 1px solid var(--gravity-color-glass-dark-5) !important;
  padding-top: var(--gravity-spacing-tight) !important;
  margin-top: var(--gravity-spacing-normal) !important;
  font-size: 12px !important;
}

.permalinks a,
.permalinks-section a,
.execution-permalink a {
  color: var(--gravity-color-primary) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.permalinks a:hover,
.permalinks-section a:hover,
.execution-permalink a:hover {
  color: var(--gravity-color-primary-darker) !important;
  text-decoration: underline !important;
}

/* Copy-to-clipboard URL field */
.permalinks input[type="text"],
.execution-permalink input[type="text"] {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 11px !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  background: var(--gravity-color-surface-light) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-small) !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-x-tight) !important;
}

/* ============================================================
   Execution Controls Bar — Gravity Toolbar visual pattern
   (Group by, Show N executions, stage durations checkbox)
   NOTE: height:auto is critical — Deck's original CSS forces a fixed
   height that clips content when our padding overrides are applied.
   The clearfix (::after) is needed because children use float:right.
   margin-top reset fixes Deck's -30px negative margin that was
   pulling the bar into the element above, causing visual cropping.
   ============================================================ */
.execution-groups-header,
.execution-group-actions-container {
  background: transparent !important;
  border-bottom: none !important;
  padding-top: var(--gravity-spacing-x-tight) !important;
  padding-bottom: var(--gravity-spacing-x-tight) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  height: auto !important;
  min-height: 40px !important;
  overflow: visible !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}

/* Clearfix for float-based layout inside the controls bar */
.execution-groups-header::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

.execution-groups-header select,
.execution-group-actions-container select {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 12px !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-small) !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-x-tight) !important;
  background: var(--gravity-color-surface-light-lighter) !important;
  color: var(--gravity-color-text-dark) !important;
}

.execution-groups-header select:focus,
.execution-group-actions-container select:focus {
  border-color: var(--gravity-color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-color-focus) 15%, transparent) !important;
}

.execution-groups-header input[type="checkbox"],
.execution-group-actions-container input[type="checkbox"] {
  accent-color: var(--gravity-color-primary) !important;
}

/* ============================================================
   [FIX 1] Header Vertical Alignment
   Deck's .spinnaker-header uses min-height:40px and inner elements
   are 40px tall, but the themed navbar is 50px. Align inner row
   to match the 50px height so brand/menu don't sit too high.
   ============================================================ */
.spinnaker-header {
  min-height: 50px !important;
}

.spinnaker-header .navbar-header {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

.spinnaker-header .navbar-header .navbar-menu-icon {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.spinnaker-header .navbar-brand,
.navbar-inverse .navbar-brand {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 50px !important;
}

.spinnaker-header .nav-layout {
  height: 50px !important;
  align-items: center !important;
}

.spinnaker-header .nav-items {
  height: 50px !important;
}

.spinnaker-header .nav-items > li > a {
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
}

/* ============================================================
   [FIX 2] Pipeline Toggle Chevron — Remove Mismatched White Tile
   .pipeline-toggle retains Deck's --color-alabaster background
   while its parent sticky header is grey. Make it transparent,
   stretch to full header height, and centre only the icon.
   ============================================================ */
.execution-group-heading .pipeline-toggle {
  background-color: transparent !important;
  height: 100% !important;
  min-height: 37px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--gravity-spacing-x-tight) !important;
  border: none !important;
}

.execution-group-heading .pipeline-toggle .glyphicon {
  font-size: 12px !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  line-height: 1 !important;
}

/* ============================================================
   [FIX 3] Creation Form Validation — Softened Error Presentation
   Deck's SpinFormik marks all fields as "touched" on mount, so
   validation errors display immediately. Since Angular is removed,
   ng-* classes no longer exist. Instead, soften the validation
   message styling so it doesn't scream at users on form open.
   Make error messages less prominent until user actually interacts.
   ============================================================ */

/* Soften the ValidationMessage component appearance in modals */
.modal .ValidationMessage.errorMessage,
.modal-body .ValidationMessage.errorMessage {
  background-color: transparent !important;
  color: var(--gravity-color-accent-negative) !important;
  min-height: auto !important;
  font-size: 12px !important;
  padding: var(--gravity-spacing-xx-tight) 0 !important;
  margin-bottom: 0 !important;
  border-left: 2px solid var(--gravity-color-accent-negative) !important;
  padding-left: var(--gravity-spacing-x-tight) !important;
  border-radius: 0 !important;
}

.modal .ValidationMessage.errorMessage i,
.modal-body .ValidationMessage.errorMessage i {
  flex: 0 0 auto !important;
  height: auto !important;
  font-size: 14px !important;
  padding: 0 var(--gravity-spacing-xx-tight) !important;
}

/* Hide error-class red borders on inputs that haven't been focused yet.
   Once user focuses + blurs a field, the :user-invalid pseudo-class
   (supported in modern browsers) can be used. As fallback, soften
   the default border treatment for all form-controls in fresh modals. */
.modal .form-control,
.modal-body .form-control {
  border-color: var(--gravity-color-glass-dark-20) !important;
}

.modal .form-control:focus,
.modal-body .form-control:focus {
  border-color: var(--gravity-color-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-color-focus) 15%, transparent) !important;
}

/* After user interacts and input is invalid, show red border */
.modal .form-control:user-invalid,
.modal-body .form-control:user-invalid {
  border-color: var(--gravity-color-accent-negative) !important;
}

/* ============================================================
   [FIX 4] Sidebar Focus Treatment — Unified focus-visible
   Remove the warm-orange browser default outline that conflicts
   with the blue active indicator. Define one clear Gravity-aligned
   focus-visible treatment across all interactive sidebar items.
   ============================================================ */
.vertical-navigation a:focus,
.vertical-navigation a:focus-visible,
.vertical-navigation .nav-category:focus,
.vertical-navigation .nav-category:focus-visible,
.filter-section a:focus-visible,
.execution-filters a:focus-visible,
.all-filters a:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px
    color-mix(in srgb, var(--gravity-color-primary) 40%, transparent) !important;
  border-radius: var(--gravity-radius-small) !important;
}

/* Remove any orange/warm outline globally on sidebar elements */
.vertical-navigation *:focus {
  outline-color: var(--gravity-color-primary) !important;
}

/* Active item should not show focus ring on click (only keyboard) */
.vertical-navigation a.active:focus:not(:focus-visible),
.vertical-navigation .active:focus:not(:focus-visible) {
  box-shadow: none !important;
}

/* ============================================================
   [FIX 5] Standard Data-Table Treatment
   Application/project tables, sortable column headers, empty
   tables, and pagination retain legacy Bootstrap styling.
   Covers .table, header cells, row hover/selection, empty state,
   and pagination as a unified system.
   ============================================================ */

/* Base table */
.table,
table.table,
.table-responsive > .table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  background: var(--gravity-color-surface-light-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-large) !important;
  overflow: hidden !important;
}

/* Table header cells */
.table > thead > tr > th,
.table-responsive > .table > thead > tr > th {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  background: var(--gravity-color-surface-light) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  border-bottom: 2px solid var(--gravity-color-glass-dark-10) !important;
  border-top: none !important;
  white-space: nowrap !important;
}

/* Sortable column header indicator */
.table > thead > tr > th.sortable,
.table > thead > tr > th[ng-click],
.table > thead > tr > th .sort-toggle {
  cursor: pointer !important;
}

.table > thead > tr > th.sortable:hover,
.table > thead > tr > th[ng-click]:hover {
  background: var(--gravity-color-surface-light-darker) !important;
  color: var(--gravity-color-text-dark) !important;
}

/* Table body rows */
.table > tbody > tr > td,
.table-responsive > .table > tbody > tr > td {
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  border-top: 1px solid var(--gravity-color-glass-dark-5) !important;
  color: var(--gravity-color-text-dark) !important;
  vertical-align: middle !important;
}

/* Row hover */
.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td,
.table-responsive > .table > tbody > tr:hover > td {
  background-color: var(--gravity-color-surface-light-darker) !important;
}

/* Row selection (active/selected row) */
.table > tbody > tr.active > td,
.table > tbody > tr.selected > td,
.table > tbody > tr.info > td {
  background-color: var(--gravity-color-surface-primary-lighter) !important;
}

/* Striped rows (if used) — very subtle alternation */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--gravity-color-glass-dark-5) !important;
}

/* Empty table state */
.table > tbody > tr.no-data > td,
.table > tbody > tr > td.no-data,
.table .empty-state,
.no-data-message {
  text-align: center !important;
  color: var(--gravity-color-text-dark-muted) !important;
  font-style: italic !important;
  padding: var(--gravity-spacing-x-loose) var(--gravity-spacing-normal) !important;
}

/* Pagination */
.pagination {
  display: flex !important;
  gap: var(--gravity-spacing-xx-tight) !important;
  align-items: center !important;
  margin: var(--gravity-spacing-normal) 0 !important;
}

.pagination > li > a,
.pagination > li > span {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  color: var(--gravity-color-text-dark) !important;
  background: var(--gravity-color-surface-light-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-small) !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-x-tight) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pagination > li > a:hover,
.pagination > li > a:focus {
  background: var(--gravity-color-surface-light-darker) !important;
  border-color: var(--gravity-color-glass-dark-20) !important;
  color: var(--gravity-color-text-dark) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--gravity-color-primary) !important;
  border-color: var(--gravity-color-primary) !important;
  color: var(--gravity-color-text-light) !important;
}

.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--gravity-color-text-dark-muted) !important;
  background: var(--gravity-color-surface-light) !important;
  border-color: var(--gravity-color-glass-dark-5) !important;
  cursor: not-allowed !important;
}

/* ============================================================
   [FIX 6] Menu / Dropdown Patterns — Unified Treatment
   Account, Help, pipeline Configure menus still use stock
   Bootstrap styling. One shared rule set for dropdown surface,
   item padding, hover, focus, radius, border, and elevation.
   ============================================================ */

/* Dropdown container (menu surface) */
.dropdown-menu,
.open > .dropdown-menu,
.navbar-inverse .dropdown-menu,
.popover-content .dropdown-menu {
  background: var(--gravity-color-surface-light-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-radius: var(--gravity-radius-large) !important;
  box-shadow: var(--gravity-elevation-2) !important;
  padding: var(--gravity-spacing-xx-tight) 0 !important;
  margin-top: var(--gravity-spacing-xx-tight) !important;
  min-width: 180px !important;
  overflow: hidden !important;
}

/* Dropdown items */
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gravity-color-text-dark) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  border-radius: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  display: block !important;
  text-decoration: none !important;
}

/* Dropdown item hover/focus */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--gravity-color-surface-light-darker) !important;
  color: var(--gravity-color-text-dark) !important;
  outline: none !important;
}

/* Dropdown item active/selected */
.dropdown-menu > li.active > a,
.dropdown-menu > li > a.active,
.dropdown-menu > .active > a,
.dropdown-menu .dropdown-item.active {
  background: var(--gravity-color-surface-primary-lighter) !important;
  color: var(--gravity-color-primary) !important;
  font-weight: 500 !important;
}

/* Dropdown divider */
.dropdown-menu .divider,
.dropdown-menu > li.divider {
  background-color: var(--gravity-color-glass-dark-10) !important;
  margin: var(--gravity-spacing-xx-tight) 0 !important;
  height: 1px !important;
  border: none !important;
}

/* Dropdown header (section title) */
.dropdown-menu .dropdown-header {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--gravity-color-text-dark-muted) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
}

/* Navbar dropdown text color fix (was inheriting white from navbar) */
.navbar-inverse .dropdown-menu > li > a {
  color: var(--gravity-color-text-dark) !important;
}

.navbar-inverse .dropdown-menu > li > a:hover,
.navbar-inverse .dropdown-menu > li > a:focus {
  background: var(--gravity-color-surface-light-darker) !important;
  color: var(--gravity-color-text-dark) !important;
}

/* ============================================================
   [FIX 7] Unified Button Variants
   Primary looks good but secondary, destructive, split/dropdown,
   disabled, icon-only, and "add" buttons vary. Define all
   variants once with consistent radius, padding, and hierarchy.
   ============================================================ */

/* Shared button base (extends existing .btn rule) */
.btn:not(.btn-xs) {
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--gravity-spacing-xx-tight) !important;
  vertical-align: middle !important;
}

/* Secondary / Default button */
.btn-default,
.btn-secondary {
  background-color: var(--gravity-color-surface-light-lighter) !important;
  border: 1px solid var(--gravity-color-glass-dark-20) !important;
  color: var(--gravity-color-text-dark) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--gravity-color-surface-light-darker) !important;
  border-color: var(--gravity-color-glass-dark-20) !important;
  color: var(--gravity-color-text-dark) !important;
}

/* Destructive / Danger button */
.btn-danger,
html .btn-danger,
.action-buttons .btn-danger {
  background-color: var(--gravity-color-accent-negative) !important;
  border-color: var(--gravity-color-accent-negative) !important;
  color: var(--gravity-color-text-light) !important;
}

.btn-danger:hover,
.btn-danger:focus,
html .btn-danger:hover,
html .btn-danger:focus,
.action-buttons .btn-danger:hover,
.action-buttons .btn-danger:focus {
  background-color: #c00838 !important;
  border-color: #c00838 !important;
  color: var(--gravity-color-text-light) !important;
}

/* Link-style button (tertiary) */
.btn-link {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gravity-color-primary) !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-x-tight) !important;
  box-shadow: none !important;
}

.btn-link:hover,
.btn-link:focus {
  color: var(--gravity-color-primary-darker) !important;
  background: var(--gravity-color-glass-dark-5) !important;
  text-decoration: none !important;
}

/* Disabled buttons */
.btn.disabled,
.btn[disabled],
.btn-default.disabled,
.btn-primary.disabled,
.btn-danger.disabled,
.btn-default[disabled],
.btn-primary[disabled],
.btn-danger[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Split / dropdown toggle button */
.btn-group > .btn + .dropdown-toggle,
.btn-group > .btn + .btn {
  border-radius: 0 var(--gravity-radius-large) var(--gravity-radius-large) 0 !important;
  border-left: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding-left: var(--gravity-spacing-x-tight) !important;
  padding-right: var(--gravity-spacing-x-tight) !important;
}

.btn-group > .btn:first-child:not(:last-child) {
  border-radius: var(--gravity-radius-large) 0 0 var(--gravity-radius-large) !important;
}

.btn-group > .btn:only-child {
  border-radius: var(--gravity-radius-large) !important;
}

/* Icon-only button (small square) */
.btn-icon,
.btn .glyphicon:only-child,
.btn .fa:only-child {
  font-size: 14px !important;
}

.btn-icon {
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-x-tight) !important;
  min-width: 32px !important;
  justify-content: center !important;
}

/* "Add" / create buttons (typically + icon with text) */
.add-new,
[class*="add-"] .btn,
.btn.add-new {
  border-style: dashed !important;
  border-color: var(--gravity-color-glass-dark-20) !important;
  background: transparent !important;
  color: var(--gravity-color-primary) !important;
}

.add-new:hover,
[class*="add-"] .btn:hover,
.btn.add-new:hover {
  border-color: var(--gravity-color-primary) !important;
  background: var(--gravity-color-surface-primary-lighter) !important;
}

/* Success button */
.btn-success {
  background-color: var(--gravity-color-accent-positive) !important;
  border-color: var(--gravity-color-accent-positive) !important;
  color: var(--gravity-color-text-light) !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #128540 !important;
  border-color: #128540 !important;
}

/* ============================================================
   [FIX 8] Dialog System — Unified Modal Treatment
   Application and project dialogs have different navigation,
   validation, and action footers. Create common CSS patterns
   for modal header/body/footer, multi-step nav, required fields,
   validation messages, tables, and footer actions.
   ============================================================ */

/* Modal overlay */
.modal-backdrop {
  background: var(--gravity-color-surface-dark) !important;
  opacity: 0.5 !important;
}

/* Modal dialog container */
.modal-dialog {
  margin: var(--gravity-spacing-x-loose) auto !important;
}

/* Modal content (already has radius/shadow from existing rules) */
.modal-content {
  background: var(--gravity-color-surface-light-lighter) !important;
  border: none !important;
  border-radius: var(--gravity-radius-large) !important;
  box-shadow: var(--gravity-elevation-2) !important;
  overflow: hidden !important;
}

/* Modal header */
.modal-header {
  background: var(--gravity-color-surface-light-lighter) !important;
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-normal) var(--gravity-spacing-loose) !important;
  display: flex !important;
  align-items: center !important;
  min-height: 56px !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h3 {
  font-family: var(--gravity-font-family-title) !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--gravity-color-text-dark) !important;
  margin: 0 !important;
  flex: 1 !important;
}

.modal-header .close,
.modal-header button.close {
  color: var(--gravity-color-text-dark-subtle) !important;
  opacity: 0.6 !important;
  font-size: 22px !important;
  padding: var(--gravity-spacing-x-tight) !important;
  margin: 0 !important;
  order: 2 !important;
  line-height: 1 !important;
}

.modal-header .close:hover {
  opacity: 1 !important;
  color: var(--gravity-color-text-dark) !important;
}

/* Modal body */
.modal-body {
  padding: var(--gravity-spacing-loose) !important;
  color: var(--gravity-color-text-dark) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 14px !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}

/* Modal footer (action buttons) */
.modal-footer {
  background: var(--gravity-color-surface-light) !important;
  border-top: 1px solid var(--gravity-color-glass-dark-10) !important;
  padding: var(--gravity-spacing-tight) var(--gravity-spacing-loose) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: var(--gravity-spacing-x-tight) !important;
  align-items: center !important;
}

/* Multi-step navigation inside dialogs (wizard-style tabs) */
.modal-body .nav-tabs,
.modal .wizard-navigation,
.modal .steps,
.modal-body .steps-indicator {
  border-bottom: 1px solid var(--gravity-color-glass-dark-10) !important;
  margin-bottom: var(--gravity-spacing-normal) !important;
  padding: 0 !important;
  display: flex !important;
  gap: 0 !important;
}

.modal-body .nav-tabs > li > a,
.modal .wizard-navigation a,
.modal .steps a {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: var(--gravity-spacing-x-tight) var(--gravity-spacing-normal) !important;
  background: transparent !important;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.modal-body .nav-tabs > li > a:hover,
.modal .wizard-navigation a:hover,
.modal .steps a:hover {
  color: var(--gravity-color-text-dark) !important;
  border-bottom-color: var(--gravity-color-glass-dark-10) !important;
}

.modal-body .nav-tabs > li.active > a,
.modal .wizard-navigation a.active,
.modal .wizard-navigation .current a,
.modal .steps .active a {
  font-weight: 500 !important;
  color: var(--gravity-color-primary) !important;
  border-bottom-color: var(--gravity-color-primary) !important;
  background: transparent !important;
}

/* Required field indicator in modals */
.modal-body .form-group label .required,
.modal-body label .field-required,
.modal-body .required-indicator {
  color: var(--gravity-color-accent-negative) !important;
  font-weight: 700 !important;
}

/* Validation messages in modals (shown only after interaction — see Fix 3) */
.modal-body .error-message,
.modal-body .help-block.error-message,
.modal-body .validation-error {
  font-family: var(--gravity-font-family-text) !important;
  font-size: 12px !important;
  color: var(--gravity-color-accent-negative) !important;
  margin-top: var(--gravity-spacing-xx-tight) !important;
  padding: 0 !important;
}

/* Tables inside modals */
.modal-body .table {
  margin-bottom: var(--gravity-spacing-normal) !important;
  border-radius: var(--gravity-radius-medium) !important;
}

/* Modal form sections / groups */
.modal-body .form-group {
  margin-bottom: var(--gravity-spacing-normal) !important;
}

.modal-body .form-group label,
.modal-body .control-label {
  font-family: var(--gravity-font-family-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--gravity-color-text-dark) !important;
  margin-bottom: var(--gravity-spacing-xx-tight) !important;
}

/* ============================================================
   [FIX 9] Toast / Alert Notifications — Consistent Treatment
   The persistent "application has not been configured" toast is
   visually disconnected. Align callout/toast spacing, close
   affordance, elevation, semantic colour, and text hierarchy.
   ============================================================ */

/* Toast / notification container (persistent banners) */
.alert.alert-dismissable,
.alert.alert-dismissible,
.toast-message,
.notification-message {
  position: relative !important;
  padding: var(--gravity-spacing-tight) var(--gravity-spacing-normal) !important;
  padding-right: var(--gravity-spacing-x-loose) !important;
  margin-bottom: var(--gravity-spacing-normal) !important;
  border-radius: var(--gravity-radius-large) !important;
  border: 1px solid var(--gravity-color-glass-dark-10) !important;
  border-left: 4px solid var(--gravity-color-primary) !important;
  background: var(--gravity-color-surface-primary-lighter) !important;
  box-shadow: var(--gravity-elevation-1) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  color: var(--gravity-color-text-dark) !important;
  line-height: 1.5 !important;
}

/* Semantic variants for toasts */
.alert.alert-dismissable.alert-warning,
.alert.alert-dismissible.alert-warning,
.toast-message.warning {
  border-left-color: var(--gravity-color-accent-informative) !important;
  background: var(--gravity-color-accent-informative-light) !important;
}

.alert.alert-dismissable.alert-danger,
.alert.alert-dismissible.alert-danger,
.toast-message.error {
  border-left-color: var(--gravity-color-accent-negative) !important;
  background: var(--gravity-color-accent-negative-light) !important;
}

.alert.alert-dismissable.alert-success,
.alert.alert-dismissible.alert-success,
.toast-message.success {
  border-left-color: var(--gravity-color-accent-positive) !important;
  background: var(--gravity-color-accent-positive-light) !important;
}

/* Toast close button — accessible and consistent */
.alert.alert-dismissable .close,
.alert.alert-dismissible .close,
.toast-message .close,
.notification-message .close {
  position: absolute !important;
  top: 50% !important;
  right: var(--gravity-spacing-x-tight) !important;
  transform: translateY(-50%) !important;
  color: var(--gravity-color-text-dark-subtle) !important;
  opacity: 0.6 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: var(--gravity-spacing-xx-tight) !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  border-radius: var(--gravity-radius-small) !important;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.alert.alert-dismissable .close:hover,
.alert.alert-dismissible .close:hover,
.toast-message .close:hover,
.notification-message .close:hover {
  opacity: 1 !important;
  color: var(--gravity-color-text-dark) !important;
  background: var(--gravity-color-glass-dark-5) !important;
}

/* Toast title / strong text hierarchy */
.alert strong,
.alert b,
.toast-message strong,
.notification-message strong {
  font-weight: 500 !important;
  color: var(--gravity-color-text-dark) !important;
  display: block !important;
  margin-bottom: var(--gravity-spacing-xx-tight) !important;
}

/* Toast link styling */
.alert.alert-dismissable a,
.alert.alert-dismissible a,
.toast-message a {
  color: var(--gravity-color-primary) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
}

/* ============================================================
   Navbar Right-Side Fixes
   1. Search input in navbar — add rounded corners
   2. Help menu doubled — fix responsive visibility classes
   3. User menu & help toggle — rounded corners + consistent look
   ============================================================ */

/* Search input in navbar — rounded corners */
.global-search form input[type='search'],
.global-search form input[type='text'],
.global-search form .form-control,
.spinnaker-header input[type='search'],
.navbar-inverse input[type='search'],
.navbar-inverse input[type='text'] {
  border-radius: var(--gravity-radius-large) !important;
  border: 1px solid var(--gravity-color-glass-dark-20) !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-tight) !important;
  font-size: 13px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--gravity-color-text-light) !important;
  height: 32px !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.global-search form input[type='search']:focus,
.global-search form input[type='text']:focus,
.navbar-inverse input[type='search']:focus,
.navbar-inverse input[type='text']:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--gravity-color-primary-lighter) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--gravity-color-primary) 25%, transparent) !important;
}

.global-search form input::placeholder,
.navbar-inverse input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Help menu duplicate fix — ensure responsive visibility works.
   The HelpMenu renders two Dropdowns: one icon-only for small
   screens (.hidden-lg) and one with text for large (.hidden-xs
   .hidden-sm .hidden-md). Bootstrap responsive classes may be
   overridden by our display:inline-flex on .btn. Fix that. */
.help-menu .dropdown .hidden-lg,
.help-menu .hidden-lg.dropdown-toggle {
  display: none !important;
}

@media (max-width: 1199px) {
  .help-menu .dropdown .hidden-lg,
  .help-menu .hidden-lg.dropdown-toggle {
    display: inline-flex !important;
  }
  .help-menu .dropdown .hidden-xs.hidden-sm.hidden-md,
  .help-menu .hidden-xs.hidden-sm.hidden-md.dropdown-toggle {
    display: none !important;
  }
}

/* On large screens (≥1200px), show text variant, hide icon-only.
   The first dropdown has .hidden-lg toggle → hide entire dropdown.
   The second dropdown has .hidden-xs.hidden-sm.hidden-md toggle → show. */
@media (min-width: 1200px) {
  .help-menu #help-menu-dropdown {
    display: none !important;
  }
  .help-menu #help-menu-dropdown-large {
    display: inline-block !important;
  }
}

@media (max-width: 1199px) {
  .help-menu #help-menu-dropdown {
    display: inline-block !important;
  }
  .help-menu #help-menu-dropdown-large {
    display: none !important;
  }
}

/* User menu & Help menu dropdown toggles — rounded corners
   and consistent appearance in the dark navbar */
.user-menu .dropdown-toggle,
.help-menu .dropdown-toggle,
.spinnaker-header .nav-items .dropdown-toggle {
  border-radius: var(--gravity-radius-large) !important;
  padding: var(--gravity-spacing-xx-tight) var(--gravity-spacing-tight) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--gravity-color-text-light) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--gravity-spacing-xx-tight) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.user-menu .dropdown-toggle:hover,
.user-menu .dropdown-toggle:focus,
.help-menu .dropdown-toggle:hover,
.help-menu .dropdown-toggle:focus,
.spinnaker-header .nav-items .dropdown-toggle:hover,
.spinnaker-header .nav-items .dropdown-toggle:focus {
  background: var(--gravity-color-surface-dark-lighter) !important;
  border-color: var(--gravity-color-glass-dark-20) !important;
  color: var(--gravity-color-text-light) !important;
}

.user-menu .dropdown.open .dropdown-toggle,
.help-menu .dropdown.open .dropdown-toggle {
  background: var(--gravity-color-surface-dark-lighter) !important;
  border-color: var(--gravity-color-glass-dark-20) !important;
}

/* Caret in dropdown toggles */
.user-menu .dropdown-toggle .caret,
.help-menu .dropdown-toggle .caret {
  border-top-color: var(--gravity-color-text-light) !important;
  margin-left: var(--gravity-spacing-xx-tight) !important;
}

/* Ensure the right-side nav items have proper spacing */
.spinnaker-header .nav-items:last-child {
  gap: var(--gravity-spacing-xx-tight) !important;
  margin-right: var(--gravity-spacing-x-tight) !important;
}

/* ============================================================
   Filter Toggle ("Show filters" / "Hide filters")
   Only style the open-state header. Do NOT change the hidden
   button sizing — it must match Classic UI's compact layout
   to avoid overlap with adjacent action buttons.
   ============================================================ */
.filters-toggle .filters-open {
  background-color: var(--gravity-color-surface-light) !important;
  font-family: var(--gravity-font-family-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--gravity-color-text-dark) !important;
}

/* ============================================================
   Healthy Cluster State — Light surface treatment
   Consistent with pipeline bars: light fill tokens for larger
   surfaces, full accent for text/icons.
   ============================================================ */

/* Keep every instance state geometrically consistent. Deck's base
   instance tiles are square-cornered; Gravity applies the same small
   radius to healthy, transitional, unhealthy, and unknown states. */
.instances a.instance,
.instances a.instance:hover {
  border-radius: var(--gravity-radius-small) !important;
}

/* Healthy instance cells — 40% positive tint */
.instances a.instance.health-status-Up,
.instances a.instance.health-status-Up:hover {
  background-color: color-mix(in srgb, var(--gravity-color-accent-positive) 40%, white) !important;
}

/* Down/Failed instance cells — 40% negative tint */
.instances a.instance.health-status-Down,
.instances a.instance.health-status-Down:hover,
.instances a.instance.health-status-Failed,
.instances a.instance.health-status-Failed:hover {
  background-color: color-mix(in srgb, var(--gravity-color-accent-negative) 40%, white) !important;
}

/* Starting instance cells — 40% primary tint */
.instances a.instance.health-status-Starting,
.instances a.instance.health-status-Starting:hover {
  background-color: color-mix(in srgb, var(--gravity-color-primary) 40%, white) !important;
}

/* Unknown instance cells — 40% primary tint */
.instances a.instance.health-status-Unknown,
.instances a.instance.health-status-Unknown:hover {
  background-color: color-mix(in srgb, var(--gravity-color-primary) 40%, white) !important;
}

/* OutOfService instance cells — neutral muted surface */
.instances a.instance.health-status-OutOfService,
.instances a.instance.health-status-OutOfService:hover {
  background-color: var(--gravity-color-surface-light-darker) !important;
}

/* Healthy cluster summary percentage/count */
.health-counts .healthy,
.rollup-title-cell .health-counts .healthy {
  color: var(--gravity-color-accent-positive) !important;
  font-weight: 500 !important;
}

/* The cluster icon already communicates the category; reinforce its
   healthy semantic color without changing mixed/unhealthy states. */
.row.rollup-entry:not(.unhealthy) .glyphicon-th,
.row.rollup-entry:not(.unhealthy) .glyphicon-th-large {
  color: var(--gravity-color-accent-positive) !important;
}

/* ============================================================
   Task Status Filters — consistent Gravity button geometry
   Deck's btn-group styles split the corner radius across the
   segmented buttons. Gravity task filters use the same radius
   on every button for a consistent control treatment.
   ============================================================ */
.tasks > .tasks-header .btn-group > button.btn,
.tasks > .tasks-header .btn-group > button.btn:first-child,
.tasks > .tasks-header .btn-group > button.btn:last-child {
  border-radius: var(--gravity-radius-large) !important;
}

/* ============================================================
   Task Loading Spinner — rotate in place
   Keep this scoped to the task-view loader. Pinning the transform
   origin and using a locally named animation prevents the Font
   Awesome glyph from orbiting when a production stylesheet or
   animation name collision supplies an offset.
   ============================================================ */
@keyframes gravity-task-spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Any .spinner-container used as a flex wrapper should vertically center
   its child so the child doesn't stretch to the container height. Without
   this, transform-origin 50% 50% resolves to a point far from the glyph,
   causing the spinning icon to orbit in a large circle. */
.spinner-container {
  align-items: center !important;
}

/* All spinning icons: constrain to intrinsic size, pin origin, and use a
   locally-named rotation to avoid conflicts with Font Awesome's fa-spin
   keyframes (which may load with different timing/steps). */
.fa.fa-spin,
.fa-spin-slow,
.glyphicon.fa-spin-slow {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  transform-origin: center center !important;
}

.spinner-container .fa.fa-spin,
.spinner-container .fa-spin.fa-spinner {
  flex: 0 0 auto !important;
  animation: gravity-task-spinner-spin 4s steps(120) infinite !important;
}

/* ============================================================
   Copy Icon Fix — glyphicon-copy fallback
   The Glyphicons Halflings font bundled with Deck may not include
   the \e205 copy glyph. Replace it with a Font Awesome equivalent
   so the clipboard button shows a visible icon.
   ============================================================ */
.glyphicon.glyphicon-copy:before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: '\f0c5' !important;
}