/**
 * @file
 * dashboard_v2-specific Gin tweaks.
 *
 * Loaded after gin_customizations/brand.css. Everything here is dashboard-only
 * UI that must not sync to the platform, so the shared gin_customizations
 * module can stay byte-identical across both repos.
 */

:root {
  /* Dark-mode accent (lighter variant for text/gradients). Used by the wizard
     pager below; kept here rather than in the shared brand tokens because
     nothing on the platform consumes them. */
  --livalos-blue-lighter: #8891ff;
  --livalos-blue-lightest: #b4baff;
  --livalos-text-muted: rgba(255, 255, 255, .4);
}

/* ---------------------------------------------------------------------------
   26. ORDER WIZARD — Step progress pager
   --------------------------------------------------------------------------- */

.wizard-pager {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 0 2rem !important;
  padding: .75rem 1rem !important;
  background: var(--livalos-gray-50) !important;
  border-radius: var(--livalos-radius-lg) !important;
  border: 1.5px solid var(--livalos-gray-200) !important;
  overflow-x: auto !important;
}

.wizard-pager li {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Connector line between steps */
.wizard-pager li + li::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 2px !important;
  background: var(--livalos-gray-300) !important;
  margin: 0 .25rem !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

.wizard-pager__step {
  display: inline-flex !important;
  align-items: center !important;
  gap: .375rem !important;
  padding: .4rem .85rem !important;
  border-radius: 100px !important;
  font-size: .8125rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
  color: var(--livalos-gray) !important;
  background: transparent !important;
  transition: all .2s cubic-bezier(.19, 1, .22, 1) !important;
}

/* Active step */
.wizard-pager__step--active {
  background: linear-gradient(135deg, var(--livalos-blue) 0%, var(--livalos-blue-light) 100%) !important;
  color: var(--livalos-white) !important;
  box-shadow: var(--livalos-shadow-md) !important;
}

/* Completed step */
.wizard-pager__step--completed {
  color: var(--livalos-blue) !important;
  background: var(--livalos-blue-wash) !important;
}

/* Completed connector turns blue */
.wizard-pager li:has(.wizard-pager__step--completed) + li::before,
.wizard-pager li:has(.wizard-pager__step--active)::before {
  background: var(--livalos-blue-light) !important;
}

/* Dark mode */
.gin--dark-mode .wizard-pager {
  background: rgba(var(--livalos-blue-light-rgb), .1) !important;
  border-color: rgba(var(--livalos-blue-light-rgb), .25) !important;
}

.gin--dark-mode .wizard-pager li + li::before {
  background: rgba(var(--livalos-blue-light-rgb), .3) !important;
}

.gin--dark-mode .wizard-pager__step {
  color: var(--livalos-gray-300) !important;
}

.gin--dark-mode .wizard-pager__step--active {
  background: linear-gradient(135deg, var(--livalos-blue-light) 0%, var(--livalos-blue-lighter) 100%) !important;
  color: var(--livalos-white) !important;
  box-shadow: 0 4px 16px rgba(var(--livalos-blue-light-rgb), .35) !important;
}

.gin--dark-mode .wizard-pager__step--completed {
  color: var(--livalos-blue-lightest) !important;
  background: rgba(var(--livalos-blue-light-rgb), .2) !important;
}

.gin--dark-mode .wizard-pager li:has(.wizard-pager__step--completed) + li::before,
.gin--dark-mode .wizard-pager li:has(.wizard-pager__step--active)::before {
  background: var(--livalos-blue-lightest) !important;
}