/* Custom Theme Colors - Override Vuexy defaults */

/* Primary Color (Vibrant Green #4CAF50) */
:root {
  --bs-primary: #4CAF50 !important;
  --primary-color: #4CAF50 !important;
  --bs-primary-rgb: 76, 175, 80 !important;
}

/* Primary color overrides */
.text-primary { color: #4CAF50 !important; }
.bg-primary { background-color: #4CAF50 !important; }
.btn-primary { 
  background-color: #4CAF50 !important; 
  border-color: #4CAF50 !important;
  color: #ffffff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #45a049 !important;
  border-color: #45a049 !important;
  color: #ffffff !important;
}
.btn-outline-primary {
  color: #4CAF50 !important;
  border-color: #4CAF50 !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover {
  background-color: #4CAF50 !important;
  border-color: #4CAF50 !important;
  color: #ffffff !important;
}

/* Links */
a { color: #4CAF50 !important; }
a:hover { color: #45a049 !important; }

/* Progress bars */
.progress-bar { background-color: #4CAF50 !important; }

/* Badges */
.badge-primary { 
  background-color: #4CAF50 !important; 
  color: white !important;
}

/* Nav pills */
.nav-pills .nav-link.active { background-color: #4CAF50 !important; }

/* Form controls focus */
.form-control:focus, .form-select:focus {
  border-color: #4CAF50 !important;
  box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
}

/* Checkboxes and radios */
.form-check-input:checked {
  background-color: #4CAF50 !important;
  border-color: #4CAF50 !important;
}

/* Secondary Color (Neutral Gray #424242) */
.text-secondary { color: #424242 !important; }
.bg-secondary { background-color: #424242 !important; }
.btn-secondary {
  background-color: #424242 !important;
  border-color: #424242 !important;
}

/* Body and heading colors */
body { color: #424242 !important; }
h1, h2, h3, h4, h5, h6 { color: #424242 !important; }

/* Menu active states */
.layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before {
  background-color: #4CAF50 !important;
}

.bg-menu-theme .menu-inner .menu-item.active > .menu-link {
  color: #4CAF50 !important;
  background-color: rgba(76, 175, 80, 0.12) !important;
}

/* Vuexy specific overrides */
.bg-label-primary {
  background-color: rgba(76, 175, 80, 0.16) !important;
  color: #4CAF50 !important;
}

/* Cards and borders */
.card-border-shadow-primary {
  box-shadow: 0 0.125rem 0.25rem rgba(76, 175, 80, 0.4) !important;
}

/* Dropdown active */
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(76, 175, 80, 0.08) !important;
  color: #4CAF50 !important;
}

/* Logo styling improvements */
.app-brand-logo img {
  max-width: 100% !important;
  height: auto !important;
}

/* Home navbar brand alignment - normal sizing */
.landing-navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
}

/* Menu brand centering */
.layout-menu .app-brand {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 1rem !important;
}

/* Responsive logo sizes */
@media (max-width: 768px) {
  .app-brand-logo img {
    width: 50px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .app-brand-logo img {
    width: 60px !important;
  }
}