/* Pride-themed Bootstrap color overrides */
:root {
  /* Pride flag colors with RGB values */
  --pride-red: #e40303;
  --pride-red-rgb: 228, 3, 3;

  --pride-orange: #ff8c00;
  --pride-orange-rgb: 255, 140, 0;

  --pride-yellow: #ffed00;
  --pride-yellow-rgb: 255, 237, 0;

  --pride-green: #008026;
  --pride-green-rgb: 0, 128, 38;

  --pride-blue: #004dff;
  --pride-blue-rgb: 0, 77, 255;

  --pride-purple: #750787;
  --pride-purple-rgb: 117, 7, 135;

  /* Additional pride colors */
  --pride-pink: #ff69b4;
  --pride-pink-rgb: 255, 105, 180;

  --pride-cyan: #00ffff;
  --pride-cyan-rgb: 0, 255, 255;

  --pride-lavender: #b57edc;
  --pride-lavender-rgb: 181, 126, 220;

  /* Override Bootstrap's default colors with pride colors */
  --bs-primary: var(--pride-blue);
  --bs-primary-rgb: 0, 77, 255;

  --bs-secondary: var(--pride-purple);
  --bs-secondary-rgb: 117, 7, 135;

  --bs-success: var(--pride-green);
  --bs-success-rgb: 0, 128, 38;

  --bs-info: #3ECDF3; /* Light blue from trans flag */
  --bs-info-rgb: 62, 205, 243;

  --bs-warning: var(--pride-orange);
  --bs-warning-rgb: 255, 140, 0;

  --bs-danger: var(--pride-red);
  --bs-danger-rgb: 228, 3, 3;

  /* Replace light and dark with more colorful alternatives */
  --bs-light: #f0e6ff; /* Light lavender */
  --bs-light-rgb: 240, 230, 255;

  --bs-dark: #330066; /* Deep purple */
  --bs-dark-rgb: 51, 0, 102;

  /* Link colors */
  --bs-link-color: var(--pride-blue);
  --bs-link-hover-color: var(--pride-purple);

  /* Button hover effects */
  --bs-btn-hover-bg-shade-amount: 15%;
  --bs-btn-hover-bg-tint-amount: 15%;

  /* Card and border colors */
  --bs-border-color: rgba(var(--bs-primary-rgb), 0.2);
  --bs-card-cap-bg: rgba(var(--bs-primary-rgb), 0.1);

  /* Navbar colors */
  --bs-navbar-active-color: var(--pride-yellow);
  --bs-navbar-brand-color: var(--pride-yellow);
  --bs-navbar-brand-hover-color: var(--pride-orange);
  --bs-navbar-hover-color: var(--pride-orange);
}

/* Custom background classes for pride colors */
.bg-pride-red { background-color: var(--pride-red) !important; color: white !important; }
.bg-pride-orange { background-color: var(--pride-orange) !important; color: black !important; }
.bg-pride-yellow { background-color: var(--pride-yellow) !important; color: black !important; }
.bg-pride-green { background-color: var(--pride-green) !important; color: white !important; }
.bg-pride-blue { background-color: var(--pride-blue) !important; color: white !important; }
.bg-pride-purple { background-color: var(--pride-purple) !important; color: white !important; }
.bg-pride-pink { background-color: var(--pride-pink) !important; color: white !important; }
.bg-pride-cyan { background-color: var(--pride-cyan) !important; color: black !important; }
.bg-pride-lavender { background-color: var(--pride-lavender) !important; color: black !important; }

/* Body styling with subtle gradient background */
body {
  background: linear-gradient(135deg, var(--bs-light) 0%, white 50%, var(--bs-light) 100%);
  min-height: 100vh;
}

/* Rainbow gradient backgrounds */
.bg-rainbow {
  background: linear-gradient(
    to right,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple)
  ) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.bg-rainbow-vertical {
  background: linear-gradient(
    to bottom,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple)
  ) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Override specific Bootstrap components */
.navbar-dark {
  background: linear-gradient(
    to right,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple)
  ) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .nav-link {
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.navbar-dark .nav-link:hover {
  color: var(--bs-light) !important;
  text-shadow: 0 0 5px white;
}

/* Card styling */
.card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(var(--pride-lavender-rgb), 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

.card:hover {
  transform: translateY(-20px);
  box-shadow: 0 15px 30px rgba(var(--pride-pink-rgb), 0.4);
}

.card-header {
  background: linear-gradient(
    to right,
    rgba(var(--pride-blue-rgb), 0.7),
    rgba(var(--pride-purple-rgb), 0.7)
  );
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  border-bottom: none;
  padding: 1rem 1.25rem;
}

.card-body {
  border-top: 3px solid rgba(255, 255, 255, 0.8);
}

/* Add rainbow border to cards */
.card {
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  z-index: -1;
  border-radius: 12px;
  background: linear-gradient(
    45deg,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple),
    var(--pride-pink)
  );
}

/* Button styling */
.btn {
  border-radius: 25px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Footer styling */
footer {
  background: linear-gradient(
    to right,
    var(--pride-purple),
    var(--pride-blue),
    var(--pride-green),
    var(--pride-yellow),
    var(--pride-orange),
    var(--pride-red)
  ) !important;
  color: white !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  padding: 1.5rem 0;
  margin-top: 2rem;
}

/* Table styling */
.table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.1);
}

.table thead {
  background: linear-gradient(
    to right,
    rgba(var(--pride-pink-rgb), 0.7),
    rgba(var(--bs-primary-rgb), 0.7)
  );
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(var(--pride-lavender-rgb), 0.15);
}

.table-striped > tbody > tr:nth-of-type(even) {
  background-color: rgba(var(--pride-cyan-rgb), 0.1);
}

.table-hover > tbody > tr:hover {
  background-color: rgba(var(--bs-warning-rgb), 0.2);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

/* Badge styling */
.badge {
  border-radius: 12px;
  padding: 0.5em 0.8em;
  font-weight: 600;
}

/* Progress bar styling */
.progress {
  height: 1.2rem;
  border-radius: 0.6rem;
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.progress-bar {
  border-radius: 0.6rem;
}

/* Alert styling */
.alert {
  border-radius: 10px;
  border: none;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  color: #000;
  font-weight: 500;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

.alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
}

.alert-primary {
  background-color: rgba(var(--pride-blue-rgb), 0.2);
}

.alert-primary::before {
  background-color: var(--pride-blue);
}

.alert-secondary {
  background-color: rgba(var(--pride-purple-rgb), 0.2);
}

.alert-secondary::before {
  background-color: var(--pride-purple);
}

.alert-success {
  background-color: rgba(var(--pride-green-rgb), 0.2);
}

.alert-success::before {
  background-color: var(--pride-green);
}

.alert-danger {
  background-color: rgba(var(--pride-red-rgb), 0.2);
}

.alert-danger::before {
  background-color: var(--pride-red);
}

.alert-warning {
  background-color: rgba(var(--pride-orange-rgb), 0.2);
}

.alert-warning::before {
  background-color: var(--pride-orange);
}

.alert-info {
  background-color: rgba(var(--bs-info-rgb), 0.2);
}

.alert-info::before {
  background-color: var(--bs-info);
}

/* Form control styling */
.form-control {
  border-radius: 10px;
  border: 2px solid rgba(var(--pride-lavender-rgb), 0.3);
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--pride-blue);
  box-shadow: 0 0 0 0.25rem rgba(var(--pride-blue-rgb), 0.25);
  transform: translateY(-3px);
}

.form-label {
  font-weight: bold;
  color: var(--pride-purple);
}

.form-select {
  border-radius: 10px;
  border: 2px solid rgba(var(--pride-lavender-rgb), 0.3);
  background-image: linear-gradient(45deg, var(--pride-purple) 0%, var(--pride-blue) 100%);
  background-size: 20px 20px;
  color: var(--bs-dark);
  transition: all 0.3s ease;
}

.form-select:focus {
  border-color: var(--pride-blue);
  box-shadow: 0 0 0 0.25rem rgba(var(--pride-blue-rgb), 0.25);
  transform: translateY(-3px);
}

/* Rainbow text for special elements */
.rainbow-text {
  background-image: linear-gradient(
    to right,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple),
    var(--pride-pink)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  animation: rainbow-shift 5s linear infinite;
}

/* Apply rainbow text to headings */
h1, h2, h3 {
  background-image: linear-gradient(
    to right,
    var(--pride-red),
    var(--pride-orange),
    var(--pride-yellow),
    var(--pride-green),
    var(--pride-blue),
    var(--pride-purple),
    var(--pride-pink)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}

/* Flash messages styling */
.flash-messages {
  margin-bottom: 2rem;
}

.flash-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  animation: flash-pulse 2s infinite;
  font-weight: bold;
  text-align: center;
}

.flash-success {
  background: linear-gradient(to right, var(--pride-green), var(--pride-cyan));
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.flash-error {
  background: linear-gradient(to right, var(--pride-red), var(--pride-pink));
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.flash-warning {
  background: linear-gradient(to right, var(--pride-yellow), var(--pride-orange));
  color: black;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}

.flash-info {
  background: linear-gradient(to right, var(--pride-blue), var(--pride-lavender));
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Animations */
@keyframes rainbow-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes flash-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}