/*****************************
  STARRYMEET BOOTSTRAP & VENDOR OVERRIDES

  This file ensures StarryMeet color system
  takes precedence over Bootstrap and vendor CSS
*****************************/

/* ========================================
   BOOTSTRAP COLOR OVERRIDES
======================================== */

/* Override Bootstrap's default backgrounds */
.bg-primary { background-color: var(--cta-indigo-1) !important; }
.bg-secondary { background-color: var(--bg-level-4) !important; }
.bg-success { background-color: var(--green-1) !important; }
.bg-danger { background-color: var(--red-1) !important; }
.bg-warning { background-color: var(--orange-1) !important; }
.bg-info { background-color: var(--cta-indigo-1) !important; }
.bg-light { background-color: var(--bg-level-2) !important; }
.bg-dark { background-color: var(--bg-level-1) !important; }
.bg-white { background-color: var(--bg-level-2) !important; }

/* Override Bootstrap text colors */
.text-primary { color: var(--yellow-1) !important; }
.text-secondary { color: var(--text-level-4) !important; }
.text-success { color: var(--green-1) !important; }
.text-danger { color: var(--red-1) !important; }
.text-warning { color: var(--orange-1) !important; }
.text-info { color: var(--text-level-3) !important; }
.text-light { color: var(--text-level-5) !important; }
.text-dark { color: var(--text-level-1) !important; }
.text-white { color: var(--text-level-1) !important; }
.text-muted { color: var(--text-level-5) !important; }

/* Override Bootstrap buttons */
.btn-primary {
  background-color: var(--cta-indigo-1) !important;
  border-color: var(--cta-indigo-1) !important;
  color: var(--text-level-1) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--cta-indigo-2) !important;
  border-color: var(--cta-indigo-2) !important;
  color: var(--text-level-1) !important;
}

.btn-secondary {
  background-color: var(--bg-level-4) !important;
  border-color: var(--bg-level-5) !important;
  color: var(--text-level-2) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--bg-level-5) !important;
  border-color: var(--yellow-1) !important;
  color: var(--text-level-1) !important;
}

.btn-outline-primary {
  border-color: var(--yellow-1) !important;
  color: var(--yellow-1) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background-color: var(--yellow-1) !important;
  color: var(--bg-level-1) !important;
}

/* Override Bootstrap forms */
.form-control {
  background-color: var(--bg-level-3) !important;
  border-color: var(--bg-level-5) !important;
  color: var(--text-level-2) !important;
}

.form-control:focus {
  background-color: var(--bg-level-3) !important;
  border-color: var(--yellow-1) !important;
  color: var(--text-level-1) !important;
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
}

.form-control::placeholder {
  color: var(--text-level-5) !important;
}

.form-select {
  background-color: var(--bg-level-3) !important;
  border-color: var(--bg-level-5) !important;
  color: var(--text-level-2) !important;
}

.form-select:focus {
  border-color: var(--yellow-1) !important;
  box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.25) !important;
}

/* Override Bootstrap cards */
.card {
  background-color: var(--bg-level-2) !important;
  border-color: var(--bg-level-4) !important;
  color: var(--text-level-4) !important;
}

.card-header {
  background-color: var(--bg-level-3) !important;
  border-bottom-color: var(--bg-level-5) !important;
  color: var(--text-level-2) !important;
}

.card-footer {
  background-color: var(--bg-level-3) !important;
  border-top-color: var(--bg-level-5) !important;
}

/* Override Bootstrap modals */
.modal-content {
  background-color: var(--bg-level-2) !important;
  border-color: var(--bg-level-5) !important;
}

.modal-header {
  border-bottom-color: var(--bg-level-5) !important;
  color: var(--text-level-1) !important;
}

.modal-footer {
  border-top-color: var(--bg-level-5) !important;
}

.modal-body {
  color: var(--text-level-4) !important;
}

.close,
.btn-close {
  color: var(--text-level-2) !important;
  opacity: 0.8;
}

.close:hover,
.btn-close:hover {
  color: var(--yellow-1) !important;
  opacity: 1;
}

/* Override Bootstrap alerts */
.alert {
  border-width: 1px;
}

.alert-primary {
  background-color: rgba(99, 102, 241, 0.15) !important;
  border-color: var(--cta-indigo-1) !important;
  color: var(--text-level-2) !important;
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--green-1) !important;
  color: var(--text-level-2) !important;
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: var(--red-1) !important;
  color: var(--text-level-2) !important;
}

.alert-warning {
  background-color: rgba(255, 149, 0, 0.15) !important;
  border-color: var(--orange-1) !important;
  color: var(--text-level-2) !important;
}

/* Override Bootstrap tables */
.table {
  color: var(--text-level-4) !important;
  border-color: var(--bg-level-4) !important;
}

.table thead th {
  background-color: var(--bg-level-3) !important;
  color: var(--text-level-2) !important;
  border-color: var(--bg-level-5) !important;
}

.table tbody tr {
  background-color: var(--bg-level-2) !important;
  border-color: var(--bg-level-4) !important;
}

.table tbody tr:hover {
  background-color: var(--bg-level-3) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-level-2) !important;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--bg-level-3) !important;
}

/* Override Bootstrap nav/tabs */
.nav-tabs {
  border-bottom-color: var(--bg-level-5) !important;
}

.nav-tabs .nav-link {
  color: var(--text-level-4) !important;
  border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
  color: var(--yellow-1) !important;
  border-color: var(--bg-level-5) var(--bg-level-5) var(--bg-level-3) !important;
}

.nav-tabs .nav-link.active {
  background-color: var(--bg-level-3) !important;
  color: var(--text-level-1) !important;
  border-color: var(--bg-level-5) var(--bg-level-5) var(--bg-level-3) !important;
}

/* Override Bootstrap pagination */
.pagination .page-link {
  background-color: var(--bg-level-3) !important;
  border-color: var(--bg-level-5) !important;
  color: var(--text-level-3) !important;
}

.pagination .page-link:hover {
  background-color: var(--bg-level-4) !important;
  border-color: var(--yellow-1) !important;
  color: var(--yellow-1) !important;
}

.pagination .page-item.active .page-link {
  background-color: var(--yellow-1) !important;
  border-color: var(--yellow-1) !important;
  color: var(--bg-level-1) !important;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--bg-level-2) !important;
  border-color: var(--bg-level-4) !important;
  color: var(--text-level-6) !important;
}

/* Override Bootstrap dropdowns */
.dropdown-menu {
  background-color: var(--bg-level-3) !important;
  border-color: var(--bg-level-5) !important;
}

.dropdown-item {
  color: var(--text-level-3) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bg-level-4) !important;
  color: var(--text-level-1) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--yellow-1) !important;
  color: var(--bg-level-1) !important;
}

.dropdown-divider {
  border-top-color: var(--bg-level-5) !important;
}

/* Override Bootstrap badges */
.badge {
  font-weight: 500;
}

.badge-primary {
  background-color: var(--cta-indigo-1) !important;
  color: var(--text-level-1) !important;
}

.badge-secondary {
  background-color: var(--bg-level-5) !important;
  color: var(--text-level-2) !important;
}

.badge-success {
  background-color: var(--green-1) !important;
  color: var(--text-level-1) !important;
}

.badge-danger {
  background-color: var(--red-1) !important;
  color: var(--text-level-1) !important;
}

.badge-warning {
  background-color: var(--orange-1) !important;
  color: var(--bg-level-1) !important;
}

/* ========================================
   GLOBAL OVERRIDES
======================================== */

/* Force any remaining white backgrounds */
*[style*="background-color: white"],
*[style*="background-color: #fff"],
*[style*="background-color: #ffffff"],
*[style*="background: white"],
*[style*="background: #fff"] {
  background-color: var(--bg-level-2) !important;
}

/* Force any remaining black text */
*[style*="color: black"],
*[style*="color: #000"],
*[style*="color: #000000"] {
  color: var(--text-level-1) !important;
}

/* Override any hardcoded light grays */
*[class*="bg-gray"],
*[class*="bg-light"] {
  background-color: var(--bg-level-2) !important;
}

/* ========================================
   ICON LIBRARY OVERRIDES
======================================== */

/* Font Awesome & Linear Icons - ensure they inherit our colors */
.fa,
.lnr,
[class^="icon-"],
[class*=" icon-"] {
  color: inherit;
}

/* Icon hover states */
a .fa:hover,
a .lnr:hover {
  color: var(--yellow-1) !important;
  transition: color 0.3s ease;
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Ensure borders use our system */
.border { border-color: var(--bg-level-5) !important; }
.border-top { border-top-color: var(--bg-level-5) !important; }
.border-bottom { border-bottom-color: var(--bg-level-5) !important; }
.border-left { border-left-color: var(--bg-level-5) !important; }
.border-right { border-right-color: var(--bg-level-5) !important; }

/* Shadows */
.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; }
.shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; }
.shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; }

/* ========================================
   DASHBOARD STAT CARDS - StarryMeet Colors
======================================== */

/* Override bright color backgrounds with subtle dark theme */
.mcolorbg1 {
  background: linear-gradient(135deg, var(--bg-level-3), var(--bg-level-4)) !important;
  border-left: 3px solid var(--green-1) !important;
}

.mcolorbg2 {
  background: linear-gradient(135deg, var(--bg-level-3), var(--bg-level-4)) !important;
  border-left: 3px solid var(--orange-1) !important;
}

.mcolorbg3 {
  background: linear-gradient(135deg, var(--bg-level-3), var(--bg-level-4)) !important;
  border-left: 3px solid var(--yellow-1) !important;
}

.mcolorbg4 {
  background: linear-gradient(135deg, var(--bg-level-3), var(--bg-level-4)) !important;
  border-left: 3px solid var(--cta-indigo-1) !important;
}