/* ============================================================
   Chadura brand overlay for GitLab CE 19.2.4
   Injected site-wide by nginx sub_filter.

   Strategy: override the PRIMITIVE blue ramp rather than component
   selectors. GitLab's semantic tokens (links, focus rings, primary
   actions, selected states, info feedback) all reference
   --gl-color-blue-*, so ~103 semantic tokens re-point automatically
   and the styling survives component refactors.

   Every step keeps GitLab's original LIGHTNESS, so all documented
   contrast pairings remain valid. Only hue and saturation move,
   toward the Chadura mark: cyan #3AC7F3 -> indigo #5266AF.
   ============================================================ */

:root, .gl-light-scope, :root.gl-dark, .gl-dark-scope {
  --gl-color-blue-50: #e6f9fe;
  --gl-color-blue-100: #c6f0fe;
  --gl-color-blue-200: #93dafb;
  --gl-color-blue-300: #55b8f7;
  --gl-color-blue-400: #3597e9;
  --gl-color-blue-500: #1470d6;
  --gl-color-blue-600: #2964ba;
  --gl-color-blue-700: #2c54a3;
  --gl-color-blue-800: #283e79;
  --gl-color-blue-900: #222c53;
  --gl-color-blue-950: #1e233d;
}

/* ---- brand tokens of our own, for the accents below ---- */
:root {
  --ch-cyan:   #3AC7F3;
  --ch-blue:   #4080C0;
  --ch-indigo: #5266AF;
}

/* ------------------------------------------------------------
   Primary actions carry the brand gradient, matching the sign-in
   page. Scoped to the SOLID confirm button only - secondary and
   tertiary variants keep GitLab's own treatment so button
   hierarchy still reads correctly.
   ------------------------------------------------------------ */
.btn.btn-confirm:not(.btn-confirm-secondary):not(.btn-confirm-tertiary):not(.btn-icon):not(:disabled):not(.disabled) {
  background-image: linear-gradient(115deg, var(--ch-cyan) 0%, var(--ch-blue) 52%, var(--ch-indigo) 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #fff;
  transition: background-position .45s ease, box-shadow .25s ease, transform .12s ease;
}

.btn.btn-confirm:not(.btn-confirm-secondary):not(.btn-confirm-tertiary):not(.btn-icon):not(:disabled):not(.disabled):hover {
  background-position: 100% 50%;
  box-shadow: 0 4px 14px -4px rgba(82, 102, 175, .5);
  color: #fff;
}

.btn.btn-confirm:not(.btn-confirm-secondary):not(.btn-confirm-tertiary):not(.btn-icon):not(:disabled):not(.disabled):active {
  transform: translateY(1px);
}

/* ------------------------------------------------------------
   Brand slot in the sidebar. TWO different DOM shapes exist:

   a) logged OUT  -> <a class="brand-logo"><svg class="tanuki-logo">
   b) logged IN   -> <a class="brand-logo"><img src=".../appearance/header_logo/...">

   In (b) GitLab already paints our uploaded wordmark, so painting a
   mark behind it collides. Use :has() to branch: replace only the
   tanuki, never the real logo image.
   ------------------------------------------------------------ */

/* (a) no image present - hide the tanuki and paint our mark */
a.brand-logo:not(:has(img)) svg {
  visibility: hidden;
}

a.brand-logo:not(:has(img)) {
  background-image: url("/brand/mark-nav.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

/* (b) our uploaded logo is already there - leave it completely alone */
a.brand-logo:has(img) {
  background-image: none;
}

/* give the real logo room to breathe in the narrow brand slot */
a.brand-logo img {
  height: 24px;
  width: auto;            /* the lockup is ~98x24 - never force a square */
  max-width: 150px;
  object-fit: contain;
}

/* dark sidebar needs the white-ink lockup. Generated from the 1232px
   source (not upscaled), so it stays sharp at 24px. */
:root.gl-dark a.brand-logo img,
.gl-dark-scope a.brand-logo img {
  content: url("/brand/lockup-white.png");
}

@media (prefers-color-scheme: dark) {
  :root.gl-system a.brand-logo img,
  :root:not(.gl-light):not(.gl-light-scope) a.brand-logo img {
    content: url("/brand/lockup-white.png");
  }
}

/* The header logo is now the MARK ONLY (96px source, rendered at 24px
   = 4x density). No dark-mode swap is needed: the blue diamond reads
   on both light and dark grounds, and swapping in an upscaled wordmark
   was the cause of the blurring. The full wordmark is still used on the
   sign-in page, where it renders large enough to stay sharp. */

/* ------------------------------------------------------------
   Cyan marker on the active sidebar item.
   Real class is .super-sidebar-nav-item.selected
   ------------------------------------------------------------ */
.super-sidebar-nav-item.selected {
  position: relative;
}

.super-sidebar-nav-item.selected::before {
  content: "";
  position: absolute;
  left: -2px; top: 15%; bottom: 15%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--ch-cyan), var(--ch-indigo));
}

/* ------------------------------------------------------------
   Focus visibility - keep it obvious, in brand colour
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ch-blue) !important;
  outline-offset: 2px !important;
}

/* progress bars and meters pick up the gradient too */
.progress-bar {
  background-image: linear-gradient(90deg, var(--ch-cyan), var(--ch-indigo));
}

@media (prefers-reduced-motion: reduce) {
  .btn.btn-confirm { transition: none !important; }
}