/**
 * FinverseHub Theme Colors
 * Color Palette Implementation
 * Primary: #26B7F3 (Cyan Blue)
 * Secondary: #4A57E3 (Deep Purple)
 * Dark: #0F1824 (Dark Navy)
 * Black: #000000
 * White: #FFFFFF
 */

:root {
  /* FinverseHub Primary Colors */
  --finverse-primary: #26B7F3;      /* Cyan Blue */
  --finverse-secondary: #4A57E3;    /* Deep Purple */
  --finverse-dark: #0F1824;         /* Dark Navy */
  --finverse-black: #000000;        /* Pure Black */
  --finverse-white: #FFFFFF;        /* Pure White */
}

/* Override theme colors with FinverseHub palette */
.theme-finverse {
  --theme-color: #26B7F3;           /* Primary Cyan Blue */
  --theme-color2: #4A57E3;          /* Secondary Purple */
  --title-color: #0F1824;           /* Dark Navy */
  --title-color2: #0F1824;
  --title-color3: #0F1824;
  --title-color4: #0F1824;
  --body-color: #506172;
  --smoke-color: #E8F4FB;           /* Light Cyan */
  --smoke-color2: #F0F5FA;
  --smoke-color3: #F5F7FC;
  --black-color: #0F1824;
  --black-color2: #1A2538;
  --th-border-color: #26B7F3;
  --th-border-color2: #E0F2FE;
  --white-color: #FFFFFF;
  --yellow-color: #4A57E3;
}

/* Apply FinverseHub theme globally if body has finverse class */
body.theme-finverse {
  --theme-color: #26B7F3;
  --theme-color2: #4A57E3;
  --title-color: #0F1824;
  --title-color2: #0F1824;
  --title-color3: #0F1824;
  --title-color4: #0F1824;
}

/* Primary Color (#26B7F3) - Cyan Blue Implementations */
.btn-finverse-primary,
.th-btn.finverse-primary,
a.finverse-primary,
.finverse-primary {
  background-color: #26B7F3;
  color: #FFFFFF;
}

.btn-finverse-primary:hover,
.th-btn.finverse-primary:hover,
a.finverse-primary:hover {
  background-color: #1ea5dd;
  color: #FFFFFF;
}

/* Secondary Color (#4A57E3) - Deep Purple Implementations */
.btn-finverse-secondary,
.th-btn.finverse-secondary,
a.finverse-secondary,
.finverse-secondary {
  background-color: #4A57E3;
  color: #FFFFFF;
}

.btn-finverse-secondary:hover,
.th-btn.finverse-secondary:hover,
a.finverse-secondary:hover {
  background-color: #3a47d3;
  color: #FFFFFF;
}

/* Dark Color (#0F1824) - Dark Navy Implementations */
.btn-finverse-dark,
.th-btn.finverse-dark,
a.finverse-dark,
.finverse-dark {
  background-color: #0F1824;
  color: #FFFFFF;
}

.btn-finverse-dark:hover,
.th-btn.finverse-dark:hover,
a.finverse-dark:hover {
  background-color: #000000;
  color: #FFFFFF;
}

/* Text Color Utilities */
.text-finverse-primary {
  color: #26B7F3;
}

.text-finverse-secondary {
  color: #4A57E3;
}

.text-finverse-dark {
  color: #0F1824;
}

.text-finverse-black {
  color: #000000;
}

.text-finverse-white {
  color: #FFFFFF;
}

/* Background Color Utilities */
.bg-finverse-primary {
  background-color: #26B7F3;
}

.bg-finverse-secondary {
  background-color: #4A57E3;
}

.bg-finverse-dark {
  background-color: #0F1824;
}

.bg-finverse-black {
  background-color: #000000;
}

.bg-finverse-white {
  background-color: #FFFFFF;
}

/* Light background variants */
.bg-finverse-primary-light {
  background-color: #E8F4FB;
}

.bg-finverse-secondary-light {
  background-color: #EEF0F9;
}

.bg-finverse-dark-light {
  background-color: #F5F7FC;
}

/* Border utilities */
.border-finverse-primary {
  border-color: #26B7F3;
}

.border-finverse-secondary {
  border-color: #4A57E3;
}

.border-finverse-dark {
  border-color: #0F1824;
}

/* Gradient utilities */
.gradient-finverse {
  background: linear-gradient(135deg, #26B7F3 0%, #4A57E3 100%);
  color: #FFFFFF;
}

.gradient-finverse-dark {
  background: linear-gradient(135deg, #0F1824 0%, #26B7F3 100%);
  color: #FFFFFF;
}

/* Shadow utilities with FinverseHub colors */
.shadow-finverse-primary {
  box-shadow: 0 4px 20px rgba(38, 183, 243, 0.2);
}

.shadow-finverse-secondary {
  box-shadow: 0 4px 20px rgba(74, 87, 227, 0.2);
}

.shadow-finverse-dark {
  box-shadow: 0 4px 20px rgba(15, 24, 36, 0.2);
}

/* Links with FinverseHub colors */
a.finverse-link {
  color: #26B7F3;
  text-decoration: none;
  transition: color 0.3s ease;
}

a.finverse-link:hover {
  color: #4A57E3;
  text-decoration: underline;
}

/* Button group utilities */
.btn-group-finverse .btn,
.btn-group-finverse .th-btn {
  border-color: #26B7F3;
  color: #26B7F3;
}

.btn-group-finverse .btn.active,
.btn-group-finverse .th-btn.active {
  background-color: #26B7F3;
  color: #FFFFFF;
}

/* Form input focus states */
.form-control:focus.finverse-focus,
.finverse-focus .form-control:focus {
  border-color: #26B7F3;
  box-shadow: 0 0 0 0.2rem rgba(38, 183, 243, 0.25);
}

/* Alert utilities */
.alert-finverse-primary {
  background-color: #E8F4FB;
  border-color: #26B7F3;
  color: #0F1824;
}

.alert-finverse-secondary {
  background-color: #EEF0F9;
  border-color: #4A57E3;
  color: #0F1824;
}

/* Badge utilities */
.badge-finverse-primary {
  background-color: #26B7F3;
  color: #FFFFFF;
}

.badge-finverse-secondary {
  background-color: #4A57E3;
  color: #FFFFFF;
}

.badge-finverse-dark {
  background-color: #0F1824;
  color: #FFFFFF;
}

/* Navbar customization for FinverseHub */
.navbar-finverse {
  background-color: #FFFFFF;
  border-bottom: 2px solid #E0F2FE;
}

.navbar-finverse .navbar-brand {
  color: #0F1824;
}

.navbar-finverse .nav-link {
  color: #506172;
  transition: color 0.3s ease;
}

.navbar-finverse .nav-link:hover,
.navbar-finverse .nav-link.active {
  color: #26B7F3;
}

/* Card styling with FinverseHub theme */
.card-finverse {
  border-color: #E0F2FE;
  box-shadow: 0 2px 8px rgba(38, 183, 243, 0.1);
}

.card-finverse .card-header {
  background: linear-gradient(135deg, #26B7F3 0%, #4A57E3 100%);
  color: #FFFFFF;
  border: none;
}

.card-finverse .card-footer {
  background-color: #F5F7FC;
  border-color: #E0F2FE;
}

/* Section backgrounds with FinverseHub */
.section-finverse-primary {
  background-color: #E8F4FB;
}

.section-finverse-secondary {
  background-color: #EEF0F9;
}

.section-finverse-dark {
  background-color: #0F1824;
  color: #FFFFFF;
}

.section-finverse-dark .text-body-color {
  color: #E0F2FE;
}

/* Hover effects */
.hover-finverse {
  transition: all 0.3s ease;
}

.hover-finverse:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(38, 183, 243, 0.15);
}

/* Theme toggle indicators */
.theme-toggle-finverse {
  width: 24px;
  height: 24px;
  background-color: #26B7F3;
  border-radius: 50%;
  display: inline-block;
}

/* Scrollbar styling with FinverseHub colors */
.finverse-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.finverse-scrollbar::-webkit-scrollbar-track {
  background: #F5F7FC;
}

.finverse-scrollbar::-webkit-scrollbar-thumb {
  background-color: #26B7F3;
  border-radius: 4px;
}

.finverse-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #4A57E3;
}

/* Animation utilities */
@keyframes finverse-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-finverse-pulse {
  animation: finverse-pulse 2s infinite;
}

/* Color transition utilities */
.finverse-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Account for fixed header */
}

/* Additional smooth scrolling enhancements */
* {
  scroll-behavior: smooth;
}

/* Ensure smooth scrolling works on all elements */
body {
  scroll-behavior: smooth;
}