/*
 * Baljunara BI color system - Bright Flow B
 * Loaded after Bootstrap CDN to keep brand colors consistent across views.
 */

:root {
  --brand-cobalt: #2563EB;
  --brand-cobalt-dark: #1d4ed8;
  --brand-cobalt-soft: #EFF6FF;
  --brand-navy: #0D1B2A;
  --brand-navy-muted: #1A2D42;
  --brand-orange: #FF8A00;
  --brand-orange-soft: #FFF3E0;
  --brand-teal: #00CBB7;
  --brand-teal-soft: #E6FFFC;
  --brand-green: #7ED957;
  --brand-green-strong: #5CB83A;
  --brand-green-soft: #F0FBEA;
  --brand-pink: #FF6B8A;
  --brand-pink-soft: #FFF0F4;
  --brand-bg: #F8F9FA;
  --brand-surface: #FFFFFF;
  --brand-border: #E2E8F0;
  --brand-text: #0D1B2A;
  --brand-text-muted: #64748B;
  --brand-text-soft: #CBD5E1;
  --brand-gradient-flow: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-teal) 50%, var(--brand-cobalt) 100%);

  --bs-primary: var(--brand-cobalt);
  --bs-primary-rgb: 37, 99, 235;
  --bs-link-color: var(--brand-cobalt);
  --bs-link-color-rgb: 37, 99, 235;
  --bs-link-hover-color: var(--brand-cobalt-dark);
  --bs-link-hover-color-rgb: 29, 78, 216;
  --bs-dark: var(--brand-navy);
  --bs-dark-rgb: 13, 27, 42;
  --bs-success: var(--brand-green-strong);
  --bs-success-rgb: 92, 184, 58;
  --bs-info: var(--brand-teal);
  --bs-info-rgb: 0, 203, 183;
  --bs-warning: var(--brand-orange);
  --bs-warning-rgb: 255, 138, 0;
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-surface);
  --bs-border-color: var(--brand-border);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-cobalt);
  --bs-btn-border-color: var(--brand-cobalt);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-cobalt-dark);
  --bs-btn-hover-border-color: var(--brand-cobalt-dark);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-cobalt-dark);
  --bs-btn-active-border-color: var(--brand-cobalt-dark);
  --bs-btn-disabled-bg: var(--brand-cobalt);
  --bs-btn-disabled-border-color: var(--brand-cobalt);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-cobalt);
  --bs-btn-border-color: var(--brand-cobalt);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-cobalt);
  --bs-btn-hover-border-color: var(--brand-cobalt);
  --bs-btn-focus-shadow-rgb: 37, 99, 235;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-cobalt);
  --bs-btn-active-border-color: var(--brand-cobalt);
}

.btn-success {
  --bs-btn-bg: var(--brand-green-strong);
  --bs-btn-border-color: var(--brand-green-strong);
  --bs-btn-hover-bg: #4ca12e;
  --bs-btn-hover-border-color: #4ca12e;
}

.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-orange);
  --bs-btn-border-color: var(--brand-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #e67c00;
  --bs-btn-hover-border-color: #e67c00;
}

.text-primary,
.link-primary {
  color: var(--brand-cobalt) !important;
}

.text-info {
  color: var(--brand-teal) !important;
}

.text-success {
  color: var(--brand-green-strong) !important;
}

.text-warning {
  color: var(--brand-orange) !important;
}

.bg-primary {
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-success {
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-info {
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-warning {
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.border-primary {
  border-color: var(--brand-cobalt) !important;
}

.sub-page-header {
  background: linear-gradient(135deg, var(--brand-navy) 0%, #060D14 100%) !important;
  padding: 5rem 0 !important;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sub-page-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--brand-gradient-flow);
}

.sub-page-header .lead {
  color: var(--brand-text-soft) !important;
}

.btn-highlight-trial {
  background: linear-gradient(135deg, var(--brand-cobalt) 0%, var(--brand-teal) 100%);
  color: #fff !important;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.38);
  animation: pulse-shadow 2s infinite;
  transition: all 0.3s ease;
}

.btn-highlight-trial:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.52);
  background: linear-gradient(135deg, var(--brand-cobalt-dark) 0%, var(--brand-cobalt) 100%);
  color: #fff !important;
}

@keyframes pulse-shadow {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.border-radius-brand {
  border-radius: 10px;
}

.brand-accent-cobalt { color: var(--brand-cobalt) !important; }
.brand-accent-orange { color: var(--brand-orange) !important; }
.brand-accent-teal { color: var(--brand-teal) !important; }
.brand-accent-green { color: var(--brand-green-strong) !important; }
.brand-accent-pink { color: var(--brand-pink) !important; }

.brand-bg-cobalt-soft { background-color: var(--brand-cobalt-soft) !important; }
.brand-bg-orange-soft { background-color: var(--brand-orange-soft) !important; }
.brand-bg-teal-soft { background-color: var(--brand-teal-soft) !important; }
.brand-bg-green-soft { background-color: var(--brand-green-soft) !important; }
.brand-bg-pink-soft { background-color: var(--brand-pink-soft) !important; }

.text-gradient-flow {
  background: var(--brand-gradient-flow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.border-gradient-flow {
  border-image: var(--brand-gradient-flow) 1;
}

.brand-logo-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-logo-text {
  color: var(--brand-navy);
  font-weight: 800;
  letter-spacing: -0.5px;
}

.navbar-brand:hover .brand-logo-text {
  color: var(--brand-teal) !important;
}

.icon-square--cobalt { background-color: var(--brand-cobalt-soft) !important; color: var(--brand-cobalt) !important; }
.icon-square--orange { background-color: var(--brand-orange-soft) !important; color: var(--brand-orange) !important; }
.icon-square--teal { background-color: var(--brand-teal-soft) !important; color: var(--brand-teal) !important; }
.icon-square--green { background-color: var(--brand-green-soft) !important; color: var(--brand-green-strong) !important; }
.icon-square--pink { background-color: var(--brand-pink-soft) !important; color: var(--brand-pink) !important; }

.feature-box--cobalt:hover { border-color: var(--brand-cobalt) !important; box-shadow: 0 15px 30px rgba(37, 99, 235, 0.12) !important; }
.feature-box--orange:hover { border-color: var(--brand-orange) !important; box-shadow: 0 15px 30px rgba(255, 138, 0, 0.12) !important; }
.feature-box--teal:hover { border-color: var(--brand-teal) !important; box-shadow: 0 15px 30px rgba(0, 203, 183, 0.12) !important; }
.feature-box--green:hover { border-color: var(--brand-green-strong) !important; box-shadow: 0 15px 30px rgba(92, 184, 58, 0.12) !important; }
.feature-box--pink:hover { border-color: var(--brand-pink) !important; box-shadow: 0 15px 30px rgba(255, 107, 138, 0.12) !important; }

.feature-box--cobalt:hover .feature-bg-icon { color: var(--brand-cobalt-soft) !important; }
.feature-box--orange:hover .feature-bg-icon { color: var(--brand-orange-soft) !important; }
.feature-box--teal:hover .feature-bg-icon { color: var(--brand-teal-soft) !important; }
.feature-box--green:hover .feature-bg-icon { color: var(--brand-green-soft) !important; }
.feature-box--pink:hover .feature-bg-icon { color: var(--brand-pink-soft) !important; }

.stat-icon--cobalt { background-color: var(--brand-cobalt-soft) !important; color: var(--brand-cobalt) !important; }
.stat-icon--orange { background-color: var(--brand-orange-soft) !important; color: var(--brand-orange) !important; }
.stat-icon--teal { background-color: var(--brand-teal-soft) !important; color: var(--brand-teal) !important; }
.stat-icon--green { background-color: var(--brand-green-soft) !important; color: var(--brand-green-strong) !important; }
.stat-icon--pink { background-color: var(--brand-pink-soft) !important; color: var(--brand-pink) !important; }

.accent-border-cobalt { border-left: 4px solid var(--brand-cobalt) !important; }
.accent-border-orange { border-left: 4px solid var(--brand-orange) !important; }
.accent-border-teal { border-left: 4px solid var(--brand-teal) !important; }
.accent-border-green { border-left: 4px solid var(--brand-green-strong) !important; }
.accent-border-pink { border-left: 4px solid var(--brand-pink) !important; }

[data-accent="cobalt"].active,
[data-accent="cobalt"]:hover { color: var(--brand-cobalt) !important; border-color: var(--brand-cobalt) !important; }
[data-accent="orange"].active,
[data-accent="orange"]:hover { color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; }
[data-accent="teal"].active,
[data-accent="teal"]:hover { color: var(--brand-teal) !important; border-color: var(--brand-teal) !important; }
[data-accent="green"].active,
[data-accent="green"]:hover { color: var(--brand-green-strong) !important; border-color: var(--brand-green-strong) !important; }
[data-accent="pink"].active,
[data-accent="pink"]:hover { color: var(--brand-pink) !important; border-color: var(--brand-pink) !important; }

@media (max-width: 576px) {
  .brand-logo-icon {
    width: 30px;
    height: 30px;
  }

  .brand-logo-text {
    font-size: 1.05rem;
  }
}