/* Brand overrides for KutulaSoft
   - Brand gradient: deep blue (primary) -> darker blue
   - Purpose: replace 'dark' button styles with brand gradient and outline variants
*/
:root{
  /* Core tokens sampled from assets/img/logo-ct.png (K logo)
     left (navy): #073b5a  right (cyan): #0ba0cf */
  --brand-500: #0ba0cf; /* cyan-blue (logo highlight) */
  --brand-600: #073b5a; /* deep navy (logo base) */
  --brand-contrast: #ffffff; /* on-brand text */
  --brand-gradient: linear-gradient(90deg, var(--brand-600) 0%, var(--brand-500) 100%);
}

/* General gradient replacement for areas using bg-gradient-dark */
.bg-gradient-dark {
  background-image: var(--brand-gradient) !important;
  color: var(--brand-contrast) !important;
  border-color: transparent !important;
}

/* Buttons */
.btn.bg-gradient-dark,
.btn.btn-dark {
  background-image: var(--brand-gradient) !important;
  color: var(--brand-contrast) !important;
  border-color: transparent !important;
  transition: filter .12s ease, box-shadow .12s ease;
}

.btn.bg-gradient-dark:hover,
.btn.btn-dark:hover,
.btn.bg-gradient-dark:focus,
.btn.btn-dark:focus {
  filter: brightness(.94);
  box-shadow: 0 6px 18px rgba(11,160,207,0.18);
}

/* Outline variant mapped to brand (uses darker token for better contrast on white backgrounds) */
.btn-outline-dark {
  color: var(--brand-600) !important;
  border-color: var(--brand-600) !important;
  background: transparent !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
  color: var(--brand-contrast) !important;
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

/* Avatars, badges and other small UI elements */
.avatar.bg-gradient-dark,
.badge.bg-gradient-dark,
.nav-link.active.bg-gradient-dark,
.mask.bg-gradient-dark,
.avatar.bg-gradient-dark {
  background-image: var(--brand-gradient) !important;
  color: var(--brand-contrast) !important;
}

/* Color swatches & filter badges used in fixed-plugin */
.badge.filter.bg-gradient-dark.active {
  background-image: var(--brand-gradient) !important;
  box-shadow: 0 6px 18px rgba(11,160,207,0.18);
}

/* Ensure outline buttons used as small labels also adopt brand */
.btn-sm.btn-outline-dark {
  color: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
}

/* Small utility: ensure any .btn-dark used by JS (e.g. back-to-top) shows brand */
.btn-dark.position-fixed {
  background-image: var(--brand-gradient) !important;
  color: var(--brand-contrast) !important;
}

/* Accessibility: focus ring with brand tint */
.btn:focus, .btn:active {
  outline: 3px solid rgba(11,160,207,0.14);
  outline-offset: 2px;
}

/* Optional: tweak small shadows where original used "shadow-dark" */
.shadow-dark { box-shadow: 0 10px 25px rgba(7,59,90,0.12) !important; }

/* Keep a fallback for older browsers */
@supports (background-image: linear-gradient(0deg, #fff, #fff)) {
  /* nothing */
}