/*
 * Credixa Hub theme: the Credixa web app's teal palette over Argon's default purple (#5e72e4).
 * Loaded last, after argon.css and custom.css.
 */
:root {
  --credixa-teal: #0e7490;
  --credixa-teal-dark: #0b5f76;
  --credixa-cyan: #0891b2;
  --credixa-blue: #3b82f6;
  --credixa-mint: #67e8f9;
  --credixa-gradient: linear-gradient(135deg, #0e7490 0%, #0891b2 55%, #3b82f6 100%);
  --credixa-soft: rgb(14 116 144 / 10%);
}

/* Gradients and solid primary backgrounds (page headers, login band, cards) */
.bg-gradient-primary,
.bg-gradient-info,
.bg-gradient-default {
  background: var(--credixa-gradient) !important;
}

.bg-primary,
.bg-info {
  background-color: var(--credixa-teal) !important;
}

.fill-primary,
.fill-default {
  fill: var(--credixa-teal) !important;
}

/* Text and links */
.text-primary,
.text-info {
  color: var(--credixa-teal) !important;
}

a {
  color: var(--credixa-cyan);
}

a:hover {
  color: var(--credixa-teal-dark);
}

/* Buttons */
.btn-primary,
.btn-info {
  color: #fff;
  background-color: var(--credixa-teal);
  border-color: var(--credixa-teal);
  box-shadow: 0 4px 10px rgb(14 116 144 / 25%);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:hover,
.btn-info:focus {
  color: #fff;
  background-color: var(--credixa-teal-dark);
  border-color: var(--credixa-teal-dark);
}

.btn-outline-primary {
  color: var(--credixa-teal);
  border-color: var(--credixa-teal);
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--credixa-teal);
  border-color: var(--credixa-teal);
}

/* Badges, alerts */
.badge-primary,
.badge-info {
  color: var(--credixa-teal-dark);
  background-color: var(--credixa-soft);
}

.alert-primary,
.alert-info {
  color: #fff;
  background-color: var(--credixa-cyan);
  border-color: var(--credixa-cyan);
}

/* Sidebar and navigation */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link:hover {
  color: var(--credixa-teal) !important;
}

.navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active::before {
  border-left-color: var(--credixa-teal);
}

.navbar-vertical .navbar-brand-img,
.navbar-vertical .navbar-brand > img {
  max-height: 3.4rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--credixa-teal);
}

.nav-pills .nav-link {
  color: var(--credixa-teal);
}

/* Pagination, form controls */
.page-item.active .page-link {
  background-color: var(--credixa-teal);
  border-color: var(--credixa-teal);
}

.page-link {
  color: var(--credixa-cyan);
}

.form-control:focus {
  border-color: var(--credixa-cyan);
  box-shadow: 0 0 0 0.15rem rgb(8 145 178 / 20%);
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-toggle input:checked + .custom-toggle-slider {
  background-color: var(--credixa-teal);
  border-color: var(--credixa-teal);
}

.custom-toggle input:checked + .custom-toggle-slider::before {
  background-color: #fff;
}

/* Table headers read as a teal band, like the Credixa account pages */
.table .thead-light th {
  color: #fff;
  background-color: var(--credixa-teal);
  border-color: var(--credixa-teal);
}

/* Login / guest pages: logo sizing */
.navbar-horizontal .navbar-brand img {
  height: 3.2rem;
}

.credixa-auth-logo {
  display: block;
  height: 7rem;
  margin: 0 auto 1rem;
}

/* The fixed top bar (#navbar-main, z-index 1100) spans the full page width and covers the sidebar's
   logo on desktop; there the sidebar sits above it. Phones keep the collapsed sidebar's own layering. */
@media (min-width: 768px) {
  #sidenav-main {
    z-index: 1101;
  }
}

/* Logo: the Hub variants are cropped tight with a bolder wordmark; let them fill their slot. */
#sidenav-main .navbar-brand {
  display: block;
  padding: 0.25rem 0 0.75rem;
}

#sidenav-main .navbar-brand-img {
  width: 100%;
  max-width: 210px;
  height: auto;
  max-height: none !important;
}

/* Guest top bar (landing, login): full width with the logo near the left edge. Login, register and
   password pages use the white bar with the colour logo; every other guest page (the partners landing
   page) uses the teal glass bar with the white logo. */
.navbar-horizontal .container-fluid {
  /* Balanced inset: the same on both sides, scaling with the window (about 58px at 1440px). */
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
  padding-right: clamp(1.5rem, 4vw, 4rem) !important;
}

.navbar-horizontal .navbar-brand {
  margin-left: 0;
  padding: 0;
}

.navbar-horizontal .navbar-brand img {
  height: 6rem !important;
  width: auto;
}

.navbar-horizontal.navbar-top.credixa-bar-white {
  background: #fff !important;
  border-bottom: 1px solid rgb(14 116 144 / 15%) !important;
  box-shadow: 0 2px 10px rgb(14 116 144 / 8%);
}

.navbar-horizontal.navbar-top.credixa-bar-white .navbar-nav .nav-link,
.navbar-horizontal.navbar-top.credixa-bar-white .navbar-nav .nav-link span {
  color: #0e7490 !important;
  font-weight: 600;
}

.navbar-horizontal.navbar-top.credixa-bar-teal {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 0%) 50%),
    linear-gradient(135deg, rgb(14 116 144 / 96%) 0%, rgb(8 145 178 / 93%) 55%, rgb(6 182 212 / 90%) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgb(255 255 255 / 28%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 24px rgb(8 47 73 / 18%);
}

.navbar-horizontal.navbar-top.credixa-bar-teal .navbar-nav .nav-link,
.navbar-horizontal.navbar-top.credixa-bar-teal .navbar-nav .nav-link span {
  color: #fff !important;
  font-weight: 600;
}

/* Signed-in top bar: the Credixa toolbar teal as frosted glass (translucent gradient, blur, a soft
   top highlight and a light edge), with white text. */
#navbar-main,
.main-content #navbar-main {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 0%) 50%),
    linear-gradient(135deg, rgb(14 116 144 / 96%) 0%, rgb(8 145 178 / 93%) 55%, rgb(6 182 212 / 90%) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgb(255 255 255 / 28%) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 30%),
    0 8px 24px rgb(8 47 73 / 18%);
}

#navbar-main .navbar-nav .nav-link,
#navbar-main .media-body span,
#navbar-main a.h4 {
  color: #fff !important;
}

#navbar-main .navbar-nav .nav-link:hover,
#navbar-main .navbar-nav .nav-link:focus {
  color: rgb(255 255 255 / 80%) !important;
}

/* Landing page partner cards */
.partner-card {
  border: 1px solid rgb(14 116 144 / 12%);
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgb(14 116 144 / 18%) !important;
}

.partner-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 1.25rem 1.5rem 0;
}

.partner-card-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Cards stand out from the page: a deeper default shadow everywhere. */
.card {
  box-shadow: 0 6px 18px rgb(8 47 73 / 10%), 0 1px 3px rgb(8 47 73 / 8%) !important;
}

/* Partners section: soft tinted band, white cards with a teal top accent and a stronger shadow. */
.credixa-soft-bg {
  background: linear-gradient(180deg, #eef6f8 0%, #e3eef2 100%);
}

.partner-card {
  background: #fff;
  border: 0;
  box-shadow: 0 10px 28px rgb(8 47 73 / 14%), 0 2px 6px rgb(8 47 73 / 8%) !important;
}

.partner-card:hover {
  box-shadow: 0 16px 36px rgb(8 47 73 / 20%), 0 3px 8px rgb(8 47 73 / 10%) !important;
}