/* Custom styles for Event Tracking System */

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal-backdrop.closing {
  animation: fadeOut 0.5s ease-in;
}

.modal-content {
  background: white;
  border-radius: var(--radius-lg);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.modal-backdrop.closing .modal-content {
  animation: bounceOut 0.5s cubic-bezier(0.4, 0, 1, 1);
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h2,
.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--text-dark);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
}

.modal-close:hover {
  color: var(--text-dark);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: var(--bg-secondary);
}

.modal-header-gradient {
  gap: 1.5rem;
  background: linear-gradient(135deg, #2c3e50 0%, #52718f 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px 12px 0 0;
}

.modal-header-gradient h2,
.modal-header-gradient h3 {
  color: white;
}

.modal-header-gradient .modal-close {
  color: white;
}

.modal-header-gradient .modal-close:hover {
  color: gray;
}

/* Modal Sizes */
.modal-content.modal-sm { max-width: 400px; }
.modal-content.modal-lg { max-width: 800px; }
.modal-content.modal-xl { max-width: 1200px; }


/* Flash Messages */
.flash-message {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  animation: slideIn 0.3s ease-out;
}

.flash-success {
  background-color: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success);
}

.flash-error {
  background-color: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error);
}

.flash-warning {
  background-color: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.flash-info {
  background-color: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info);
}

@keyframes slideIn {
  from {
      transform: translateY(-20px);
      opacity: 0;
  }
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes bounceOut {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  15% {
    transform: translateY(-10px) scale(1.02);
    opacity: 1;
  }
  50% {
    transform: translateY(50px) scale(0.98);
    opacity: 1;
  }
  85% {
    transform: translateY(300px) scale(0.95);
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    transform: translateY(100vh) scale(0.9);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*
 * Container Background Image
 */
.container-bg-image {
  background-image: url(/static/images/vbs-kids.png);
  background-size: cover;
  background-position: center;
}

/*
 * Organizations
 */
.organizations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.organization-card {
  background: var(--surface-2);
  border: 2px solid var(--surface-3);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;  
}

.organization-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.card-content {
  padding: 1.5rem;
}

.organization-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.organization-address {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.organization-info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.card-action {
  padding: 0 1.5rem 1.5rem;
}

.no-organizations {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
}

.no-organizations p {
  margin-top: 1rem;
  font-size: 1.125rem;
}

.org-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 0.75rem 0;
}

.org-details {
  margin: 0 0 1.5rem 0;
}

.org-dates {
  display: block;
  font-size: 0.875rem;
  color: var(--text-2);
}

.org-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-3);
}



/* Status indicators */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-draft {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.status-published {
  background-color: var(--blue-100);
  color: var(--blue-700);
}

.status-active {
  background-color: var(--green-100);
  color: var(--green-700);
}

.status-completed {
  background-color: var(--purple-100);
  color: var(--purple-700);
}

.status-archived {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

/*
 * Tiers
 */
.subscription-tier {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.tier-free {
  background: var(--surface-3);
  color: var(--text-2);
}

.tier-basic {
  background: var(--info-bg);
  color: var(--info-color);
}

.tier-premium {
  background: var(--warning-bg);
  color: var(--warning-color);
}



/*
 * Notification
 */
.notification {
  padding: 1rem 1.5rem;
  border-radius: 4px;
  position: relative;
  margin-bottom: 1rem;
}

.notification.is-danger {
  background-color: #ffe6e6;
  color: #cc0000;
  border-left: 4px solid #cc0000;
}

.notification.is-success {
  background-color: #e6ffe6;
  color: #00aa00;
  border-left: 4px solid #00aa00;
}

.notification.is-warning {
  background-color: #fff3cd;
  color: #856404;
  border-left: 4px solid #ffc107;
}

.notification.is-info {
  background-color: #e7f3ff;
  color: #004085;
  border-left: 4px solid #0066cc;
}

.notification .delete {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  color: inherit;
  opacity: 0.5;
}

.notification .delete:hover {
  opacity: 1;
}

.notification .delete::before {
  content: '×';
}





/* Progress tracking styles */
.progress-bar-container {
  width: 100%;
  height: 20px;
  background-color: var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  background-color: var(--success);
  transition: width 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.progress-bar-large {
  height: 30px;
  background-color: var(--gray-200);
  border-radius: 15px;
  overflow: hidden;
}

.progress-bar-large .progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success) 0%, var(--success-600) 100%);
}

/* Stat boxes */
.stat-box {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  color: var(--gray-900);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-top: 0.5rem;
}

/* Milestone cards */
.milestones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.milestone-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 2px solid var(--gray-200);
  transition: all 0.2s ease;
}

.milestone-card:hover {
  border-color: var(--warning);
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.milestone-icon {
  color: var(--warning);
  margin-bottom: 1rem;
}

/* Rewards */
.rewards-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reward-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: var(--gray-50);
  border-radius: 0.5rem;
  border: 1px solid var(--gray-200);
}

.reward-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reward-icon {
  color: var(--primary);
}

/* Analytics */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stat-card-icon {
  color: var(--primary);
}

.stat-card-content {
  flex: 1;
}

/* Distribution chart */
.distribution-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.distribution-label {
  width: 60px;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.distribution-bar {
  flex: 1;
  height: 24px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.distribution-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.distribution-count {
  width: 50px;
  text-align: right;
  font-weight: 500;
}

/* Insights */
.insights-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.5rem 0;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-icon {
  color: var(--gray-300);
  margin-bottom: 1rem;
}

/* Data tables */
.data-table {
  width: 100%;
  background: white;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.data-table th {
  background: var(--gray-50);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-200);
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--gray-100);
}

.data-table tbody tr:hover {
  background: var(--gray-50);
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.page-actions {
  display: flex;
  gap: 1rem;
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-secondary {
  background: var(--gray-200);
  color: var(--gray-700);
}

/*
 * Tags
 */
.tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.tag.is-light {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.tag.is-success {
  background-color: var(--success-bg);
  color: var(--success);
}

.tag.is-danger {
  background-color: var(--error-bg);
  color: var(--error);
}

.tag.is-info {
  background-color: var(--info-bg);
  color: var(--info);
}


/*
 * Utility Classes
 */



.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Colors */
/* White Text Color */
.text-white { color: #ffffff; }

/* Gray Text Colors */
.text-gray-50 { color: #f9fafb; }
.text-gray-100 { color: #f3f4f6; }
.text-gray-200 { color: #e5e7eb; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.text-gray-950 { color: #030712; }
.text-muted { color: #6b7280; }

/* Blue Text Colors */
.text-blue-50 { color: #eff6ff; }
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-blue-700 { color: #1d4ed8; }
.text-blue-800 { color: #1e40af; }
.text-blue-900 { color: #1e3a8a; }
.text-blue-950 { color: #172554; }

/* Purple Text Colors */
.text-purple-50 { color: #faf5ff; }
.text-purple-100 { color: #f3e8ff; }
.text-purple-200 { color: #e9d5ff; }
.text-purple-300 { color: #d8b4fe; }
.text-purple-400 { color: #c084fc; }
.text-purple-500 { color: #a855f7; }
.text-purple-600 { color: #9333ea; }
.text-purple-700 { color: #7c3aed; }
.text-purple-800 { color: #6b21a8; }
.text-purple-900 { color: #581c87; }
.text-purple-950 { color: #3b0764; }

/* Green Text Colors */
.text-green-50 { color: #f0fdf4; }
.text-green-100 { color: #dcfce7; }
.text-green-200 { color: #bbf7d0; }
.text-green-300 { color: #86efac; }
.text-green-400 { color: #4ade80; }
.text-green-500 { color: #22c55e; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-green-800 { color: #166534; }
.text-green-900 { color: #14532d; }
.text-green-950 { color: #052e16; }

/* Orange Text Colors */
.text-orange-50 { color: #fff7ed; }
.text-orange-100 { color: #ffedd5; }
.text-orange-200 { color: #fed7aa; }
.text-orange-300 { color: #fdba74; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }
.text-orange-800 { color: #9a3412; }
.text-orange-900 { color: #7c2d12; }
.text-orange-950 { color: #431407; }

/* Red Text Colors */
.text-red-50 { color: #fef2f2; }
.text-red-100 { color: #fee2e2; }
.text-red-200 { color: #fecaca; }
.text-red-300 { color: #fca5a5; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-red-600 { color: #dc2626; }
.text-red-700 { color: #b91c1c; }
.text-red-800 { color: #991b1b; }
.text-red-900 { color: #7f1d1d; }
.text-red-950 { color: #450a0a; }

/* Yellow Text Colors */
.text-yellow-50 { color: #fefce8; }
.text-yellow-100 { color: #fef3c7; }
.text-yellow-200 { color: #fde68a; }
.text-yellow-300 { color: #fcd34d; }
.text-yellow-400 { color: #fbbf24; }
.text-yellow-500 { color: #f59e0b; }
.text-yellow-600 { color: #d97706; }
.text-yellow-700 { color: #b45309; }
.text-yellow-800 { color: #92400e; }
.text-yellow-900 { color: #78350f; }
.text-yellow-950 { color: #451a03; }

/* Indigo Text Colors */
.text-indigo-50 { color: #eef2ff; }
.text-indigo-100 { color: #e0e7ff; }
.text-indigo-200 { color: #c7d2fe; }
.text-indigo-300 { color: #a5b4fc; }
.text-indigo-400 { color: #818cf8; }
.text-indigo-500 { color: #6366f1; }
.text-indigo-600 { color: #4f46e5; }
.text-indigo-700 { color: #4338ca; }
.text-indigo-800 { color: #3730a3; }
.text-indigo-900 { color: #312e81; }
.text-indigo-950 { color: #1e1b4b; }

/* Violet Text Colors */
.text-violet-50 { color: #f5f3ff; }
.text-violet-100 { color: #ede9fe; }
.text-violet-200 { color: #ddd6fe; }
.text-violet-300 { color: #c4b5fd; }
.text-violet-400 { color: #a78bfa; }
.text-violet-500 { color: #8b5cf6; }
.text-violet-600 { color: #7c3aed; }
.text-violet-700 { color: #6d28d9; }
.text-violet-800 { color: #5b21b6; }
.text-violet-900 { color: #4c1d95; }
.text-violet-950 { color: #2e1065; }

/* Pink Text Colors */
.text-pink-50 { color: #fdf2f8; }
.text-pink-100 { color: #fce7f3; }
.text-pink-200 { color: #fbcfe8; }
.text-pink-300 { color: #f9a8d4; }
.text-pink-400 { color: #f472b6; }
.text-pink-500 { color: #ec4899; }
.text-pink-600 { color: #db2777; }
.text-pink-700 { color: #be185d; }
.text-pink-800 { color: #9d174d; }
.text-pink-900 { color: #831843; }
.text-pink-950 { color: #500724; }

/* Rose Text Colors */
.text-rose-50 { color: #fff1f2; }
.text-rose-100 { color: #ffe4e6; }
.text-rose-200 { color: #fecdd3; }
.text-rose-300 { color: #fda4af; }
.text-rose-400 { color: #fb7185; }
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }
.text-rose-700 { color: #be123c; }
.text-rose-800 { color: #9f1239; }
.text-rose-900 { color: #881337; }
.text-rose-950 { color: #4c0519; }

/* Emerald Text Colors */
.text-emerald-50 { color: #ecfdf5; }
.text-emerald-100 { color: #d1fae5; }
.text-emerald-200 { color: #a7f3d0; }
.text-emerald-300 { color: #6ee7b7; }
.text-emerald-400 { color: #34d399; }
.text-emerald-500 { color: #10b981; }
.text-emerald-600 { color: #059669; }
.text-emerald-700 { color: #047857; }
.text-emerald-800 { color: #065f46; }
.text-emerald-900 { color: #064e3b; }
.text-emerald-950 { color: #022c22; }

/* Teal Text Colors */
.text-teal-50 { color: #f0fdfa; }
.text-teal-100 { color: #ccfbf1; }
.text-teal-200 { color: #99f6e4; }
.text-teal-300 { color: #5eead4; }
.text-teal-400 { color: #2dd4bf; }
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.text-teal-800 { color: #115e59; }
.text-teal-900 { color: #134e4a; }
.text-teal-950 { color: #042f2e; }

/* Cyan Text Colors */
.text-cyan-50 { color: #ecfeff; }
.text-cyan-100 { color: #cffafe; }
.text-cyan-200 { color: #a5f3fc; }
.text-cyan-300 { color: #67e8f9; }
.text-cyan-400 { color: #22d3ee; }
.text-cyan-500 { color: #06b6d4; }
.text-cyan-600 { color: #0891b2; }
.text-cyan-700 { color: #0e7490; }
.text-cyan-800 { color: #155e75; }
.text-cyan-900 { color: #164e63; }
.text-cyan-950 { color: #083344; }

/* Sky Text Colors */
.text-sky-50 { color: #f0f9ff; }
.text-sky-100 { color: #e0f2fe; }
.text-sky-200 { color: #bae6fd; }
.text-sky-300 { color: #7dd3fc; }
.text-sky-400 { color: #38bdf8; }
.text-sky-500 { color: #0ea5e9; }
.text-sky-600 { color: #0284c7; }
.text-sky-700 { color: #0369a1; }
.text-sky-800 { color: #075985; }
.text-sky-900 { color: #0c4a6e; }
.text-sky-950 { color: #082f49; }

/* Lime Text Colors */
.text-lime-50 { color: #f7fee7; }
.text-lime-100 { color: #ecfccb; }
.text-lime-200 { color: #d9f99d; }
.text-lime-300 { color: #bef264; }
.text-lime-400 { color: #a3e635; }
.text-lime-500 { color: #84cc16; }
.text-lime-600 { color: #65a30d; }
.text-lime-700 { color: #4d7c0f; }
.text-lime-800 { color: #365314; }
.text-lime-900 { color: #1a2e05; }
.text-lime-950 { color: #0c1302; }

/* Amber Text Colors */
.text-amber-50 { color: #fffbeb; }
.text-amber-100 { color: #fef3c7; }
.text-amber-200 { color: #fde68a; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }
.text-amber-950 { color: #451a03; }

/* Fuchsia Text Colors */
.text-fuchsia-50 { color: #fdf4ff; }
.text-fuchsia-100 { color: #fae8ff; }
.text-fuchsia-200 { color: #f5d0fe; }
.text-fuchsia-300 { color: #f0abfc; }
.text-fuchsia-400 { color: #e879f9; }
.text-fuchsia-500 { color: #d946ef; }
.text-fuchsia-600 { color: #c026d3; }
.text-fuchsia-700 { color: #a21caf; }
.text-fuchsia-800 { color: #86198f; }
.text-fuchsia-900 { color: #701a75; }
.text-fuchsia-950 { color: #4a044e; }

/* Slate Text Colors */
.text-slate-50 { color: #f8fafc; }
.text-slate-100 { color: #f1f5f9; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: #0f172a; }
.text-slate-950 { color: #020617; }

/* Zinc Text Colors */
.text-zinc-50 { color: #fafafa; }
.text-zinc-100 { color: #f4f4f5; }
.text-zinc-200 { color: #e4e4e7; }
.text-zinc-300 { color: #d4d4d8; }
.text-zinc-400 { color: #a1a1aa; }
.text-zinc-500 { color: #71717a; }
.text-zinc-600 { color: #52525b; }
.text-zinc-700 { color: #3f3f46; }
.text-zinc-800 { color: #27272a; }
.text-zinc-900 { color: #18181b; }
.text-zinc-950 { color: #09090b; }

/* Neutral Text Colors */
.text-neutral-50 { color: #fafafa; }
.text-neutral-100 { color: #f5f5f5; }
.text-neutral-200 { color: #e5e5e5; }
.text-neutral-300 { color: #d4d4d4; }
.text-neutral-400 { color: #a3a3a3; }
.text-neutral-500 { color: #737373; }
.text-neutral-600 { color: #525252; }
.text-neutral-700 { color: #404040; }
.text-neutral-800 { color: #262626; }
.text-neutral-900 { color: #171717; }
.text-neutral-950 { color: #0a0a0a; }

/* Stone Text Colors */
.text-stone-50 { color: #fafaf9; }
.text-stone-100 { color: #f5f5f4; }
.text-stone-200 { color: #e7e5e4; }
.text-stone-300 { color: #d6d3d1; }
.text-stone-400 { color: #a8a29e; }
.text-stone-500 { color: #78716c; }
.text-stone-600 { color: #57534e; }
.text-stone-700 { color: #44403c; }
.text-stone-800 { color: #292524; }
.text-stone-900 { color: #1c1917; }
.text-stone-950 { color: #0c0a09; }

/* Black Text Color */
.text-black { color: #000000; }


/* Background colors */
/* White Background Colors */
.bg-white { background-color: #ffffff; }

/* Gray Background Colors */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-gray-400 { background-color: #9ca3af; }
.bg-gray-500 { background-color: #6b7280; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-800 { background-color: #1f2937; }
.bg-gray-900 { background-color: #111827; }
.bg-gray-950 { background-color: #030712; }

/* Blue Background Colors */
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-blue-300 { background-color: #93c5fd; }
.bg-blue-400 { background-color: #60a5fa; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-800 { background-color: #1e40af; }
.bg-blue-900 { background-color: #1e3a8a; }
.bg-blue-950 { background-color: #172554; }

/* Purple Background Colors */
.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-purple-300 { background-color: #d8b4fe; }
.bg-purple-400 { background-color: #c084fc; }
.bg-purple-500 { background-color: #a855f7; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7c3aed; }
.bg-purple-800 { background-color: #6b21a8; }
.bg-purple-900 { background-color: #581c87; }
.bg-purple-950 { background-color: #3b0764; }

/* Green Background Colors */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-300 { background-color: #86efac; }
.bg-green-400 { background-color: #4ade80; }
.bg-green-500 { background-color: #22c55e; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-800 { background-color: #166534; }
.bg-green-900 { background-color: #14532d; }
.bg-green-950 { background-color: #052e16; }

/* Orange Background Colors */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-300 { background-color: #fdba74; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.bg-orange-800 { background-color: #9a3412; }
.bg-orange-900 { background-color: #7c2d12; }
.bg-orange-950 { background-color: #431407; }

/* Red Background Colors */
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-300 { background-color: #fca5a5; }
.bg-red-400 { background-color: #f87171; }
.bg-red-500 { background-color: #ef4444; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.bg-red-800 { background-color: #991b1b; }
.bg-red-900 { background-color: #7f1d1d; }
.bg-red-950 { background-color: #450a0a; }

/* Yellow Background Colors */
.bg-yellow-50 { background-color: #fefce8; }
.bg-yellow-100 { background-color: #fef3c7; }
.bg-yellow-200 { background-color: #fde68a; }
.bg-yellow-300 { background-color: #fcd34d; }
.bg-yellow-400 { background-color: #fbbf24; }
.bg-yellow-500 { background-color: #f59e0b; }
.bg-yellow-600 { background-color: #d97706; }
.bg-yellow-700 { background-color: #b45309; }
.bg-yellow-800 { background-color: #92400e; }
.bg-yellow-900 { background-color: #78350f; }
.bg-yellow-950 { background-color: #451a03; }

/* White Border Colors */
.border-white { border-color: #ffffff; }

/* Gray Border Colors */
.border-gray-50 { border-color: #f9fafb; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-400 { border-color: #9ca3af; }
.border-gray-500 { border-color: #6b7280; }
.border-gray-600 { border-color: #4b5563; }
.border-gray-700 { border-color: #374151; }
.border-gray-800 { border-color: #1f2937; }
.border-gray-900 { border-color: #111827; }
.border-gray-950 { border-color: #030712; }

/* Blue Border Colors */
.border-blue-50 { border-color: #eff6ff; }
.border-blue-100 { border-color: #dbeafe; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-300 { border-color: #93c5fd; }
.border-blue-400 { border-color: #60a5fa; }
.border-blue-500 { border-color: #3b82f6; }
.border-blue-600 { border-color: #2563eb; }
.border-blue-700 { border-color: #1d4ed8; }
.border-blue-800 { border-color: #1e40af; }
.border-blue-900 { border-color: #1e3a8a; }
.border-blue-950 { border-color: #172554; }

/* Purple Border Colors */
.border-purple-50 { border-color: #faf5ff; }
.border-purple-100 { border-color: #f3e8ff; }
.border-purple-200 { border-color: #e9d5ff; }
.border-purple-300 { border-color: #d8b4fe; }
.border-purple-400 { border-color: #c084fc; }
.border-purple-500 { border-color: #a855f7; }
.border-purple-600 { border-color: #9333ea; }
.border-purple-700 { border-color: #7c3aed; }
.border-purple-800 { border-color: #6b21a8; }
.border-purple-900 { border-color: #581c87; }
.border-purple-950 { border-color: #3b0764; }

/* Green Border Colors */
.border-green-50 { border-color: #f0fdf4; }
.border-green-100 { border-color: #dcfce7; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-300 { border-color: #86efac; }
.border-green-400 { border-color: #4ade80; }
.border-green-500 { border-color: #22c55e; }
.border-green-600 { border-color: #16a34a; }
.border-green-700 { border-color: #15803d; }
.border-green-800 { border-color: #166534; }
.border-green-900 { border-color: #14532d; }
.border-green-950 { border-color: #052e16; }

/* Orange Border Colors */
.border-orange-50 { border-color: #fff7ed; }
.border-orange-100 { border-color: #ffedd5; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-300 { border-color: #fdba74; }
.border-orange-400 { border-color: #fb923c; }
.border-orange-500 { border-color: #f97316; }
.border-orange-600 { border-color: #ea580c; }
.border-orange-700 { border-color: #c2410c; }
.border-orange-800 { border-color: #9a3412; }
.border-orange-900 { border-color: #7c2d12; }
.border-orange-950 { border-color: #431407; }

/* Red Border Colors */
.border-red-50 { border-color: #fef2f2; }
.border-red-100 { border-color: #fee2e2; }
.border-red-200 { border-color: #fecaca; }
.border-red-300 { border-color: #fca5a5; }
.border-red-400 { border-color: #f87171; }
.border-red-500 { border-color: #ef4444; }
.border-red-600 { border-color: #dc2626; }
.border-red-700 { border-color: #b91c1c; }
.border-red-800 { border-color: #991b1b; }
.border-red-900 { border-color: #7f1d1d; }
.border-red-950 { border-color: #450a0a; }

/* Yellow Border Colors */
.border-yellow-50 { border-color: #fefce8; }
.border-yellow-100 { border-color: #fef3c7; }
.border-yellow-200 { border-color: #fde68a; }
.border-yellow-300 { border-color: #fcd34d; }
.border-yellow-400 { border-color: #fbbf24; }
.border-yellow-500 { border-color: #f59e0b; }
.border-yellow-600 { border-color: #d97706; }
.border-yellow-700 { border-color: #b45309; }
.border-yellow-800 { border-color: #92400e; }
.border-yellow-900 { border-color: #78350f; }
.border-yellow-950 { border-color: #451a03; }

/* Indigo Background Colors */
.bg-indigo-50 { background-color: #eef2ff; }
.bg-indigo-100 { background-color: #e0e7ff; }
.bg-indigo-200 { background-color: #c7d2fe; }
.bg-indigo-300 { background-color: #a5b4fc; }
.bg-indigo-400 { background-color: #818cf8; }
.bg-indigo-500 { background-color: #6366f1; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-indigo-800 { background-color: #3730a3; }
.bg-indigo-900 { background-color: #312e81; }
.bg-indigo-950 { background-color: #1e1b4b; }

/* Violet Background Colors */
.bg-violet-50 { background-color: #f5f3ff; }
.bg-violet-100 { background-color: #ede9fe; }
.bg-violet-200 { background-color: #ddd6fe; }
.bg-violet-300 { background-color: #c4b5fd; }
.bg-violet-400 { background-color: #a78bfa; }
.bg-violet-500 { background-color: #8b5cf6; }
.bg-violet-600 { background-color: #7c3aed; }
.bg-violet-700 { background-color: #6d28d9; }
.bg-violet-800 { background-color: #5b21b6; }
.bg-violet-900 { background-color: #4c1d95; }
.bg-violet-950 { background-color: #2e1065; }

/* Pink Background Colors */
.bg-pink-50 { background-color: #fdf2f8; }
.bg-pink-100 { background-color: #fce7f3; }
.bg-pink-200 { background-color: #fbcfe8; }
.bg-pink-300 { background-color: #f9a8d4; }
.bg-pink-400 { background-color: #f472b6; }
.bg-pink-500 { background-color: #ec4899; }
.bg-pink-600 { background-color: #db2777; }
.bg-pink-700 { background-color: #be185d; }
.bg-pink-800 { background-color: #9d174d; }
.bg-pink-900 { background-color: #831843; }
.bg-pink-950 { background-color: #500724; }

/* Rose Background Colors */
.bg-rose-50 { background-color: #fff1f2; }
.bg-rose-100 { background-color: #ffe4e6; }
.bg-rose-200 { background-color: #fecdd3; }
.bg-rose-300 { background-color: #fda4af; }
.bg-rose-400 { background-color: #fb7185; }
.bg-rose-500 { background-color: #f43f5e; }
.bg-rose-600 { background-color: #e11d48; }
.bg-rose-700 { background-color: #be123c; }
.bg-rose-800 { background-color: #9f1239; }
.bg-rose-900 { background-color: #881337; }
.bg-rose-950 { background-color: #4c0519; }

/* Emerald Background Colors */
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-emerald-200 { background-color: #a7f3d0; }
.bg-emerald-300 { background-color: #6ee7b7; }
.bg-emerald-400 { background-color: #34d399; }
.bg-emerald-500 { background-color: #10b981; }
.bg-emerald-600 { background-color: #059669; }
.bg-emerald-700 { background-color: #047857; }
.bg-emerald-800 { background-color: #065f46; }
.bg-emerald-900 { background-color: #064e3b; }
.bg-emerald-950 { background-color: #022c22; }

/* Teal Background Colors */
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-300 { background-color: #5eead4; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.bg-teal-800 { background-color: #115e59; }
.bg-teal-900 { background-color: #134e4a; }
.bg-teal-950 { background-color: #042f2e; }

/* Cyan Background Colors */
.bg-cyan-50 { background-color: #ecfeff; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-cyan-200 { background-color: #a5f3fc; }
.bg-cyan-300 { background-color: #67e8f9; }
.bg-cyan-400 { background-color: #22d3ee; }
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-600 { background-color: #0891b2; }
.bg-cyan-700 { background-color: #0e7490; }
.bg-cyan-800 { background-color: #155e75; }
.bg-cyan-900 { background-color: #164e63; }
.bg-cyan-950 { background-color: #083344; }

/* Sky Background Colors */
.bg-sky-50 { background-color: #f0f9ff; }
.bg-sky-100 { background-color: #e0f2fe; }
.bg-sky-200 { background-color: #bae6fd; }
.bg-sky-300 { background-color: #7dd3fc; }
.bg-sky-400 { background-color: #38bdf8; }
.bg-sky-500 { background-color: #0ea5e9; }
.bg-sky-600 { background-color: #0284c7; }
.bg-sky-700 { background-color: #0369a1; }
.bg-sky-800 { background-color: #075985; }
.bg-sky-900 { background-color: #0c4a6e; }
.bg-sky-950 { background-color: #082f49; }

/* Lime Background Colors */
.bg-lime-50 { background-color: #f7fee7; }
.bg-lime-100 { background-color: #ecfccb; }
.bg-lime-200 { background-color: #d9f99d; }
.bg-lime-300 { background-color: #bef264; }
.bg-lime-400 { background-color: #a3e635; }
.bg-lime-500 { background-color: #84cc16; }
.bg-lime-600 { background-color: #65a30d; }
.bg-lime-700 { background-color: #4d7c0f; }
.bg-lime-800 { background-color: #365314; }
.bg-lime-900 { background-color: #1a2e05; }
.bg-lime-950 { background-color: #0c1302; }

/* Amber Background Colors */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }
.bg-amber-300 { background-color: #fcd34d; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }
.bg-amber-700 { background-color: #b45309; }
.bg-amber-800 { background-color: #92400e; }
.bg-amber-900 { background-color: #78350f; }
.bg-amber-950 { background-color: #451a03; }

/* Fuchsia Background Colors */
.bg-fuchsia-50 { background-color: #fdf4ff; }
.bg-fuchsia-100 { background-color: #fae8ff; }
.bg-fuchsia-200 { background-color: #f5d0fe; }
.bg-fuchsia-300 { background-color: #f0abfc; }
.bg-fuchsia-400 { background-color: #e879f9; }
.bg-fuchsia-500 { background-color: #d946ef; }
.bg-fuchsia-600 { background-color: #c026d3; }
.bg-fuchsia-700 { background-color: #a21caf; }
.bg-fuchsia-800 { background-color: #86198f; }
.bg-fuchsia-900 { background-color: #701a75; }
.bg-fuchsia-950 { background-color: #4a044e; }

/* Slate Background Colors */
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-300 { background-color: #cbd5e1; }
.bg-slate-400 { background-color: #94a3b8; }
.bg-slate-500 { background-color: #64748b; }
.bg-slate-600 { background-color: #475569; }
.bg-slate-700 { background-color: #334155; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-950 { background-color: #020617; }

/* Zinc Background Colors */
.bg-zinc-50 { background-color: #fafafa; }
.bg-zinc-100 { background-color: #f4f4f5; }
.bg-zinc-200 { background-color: #e4e4e7; }
.bg-zinc-300 { background-color: #d4d4d8; }
.bg-zinc-400 { background-color: #a1a1aa; }
.bg-zinc-500 { background-color: #71717a; }
.bg-zinc-600 { background-color: #52525b; }
.bg-zinc-700 { background-color: #3f3f46; }
.bg-zinc-800 { background-color: #27272a; }
.bg-zinc-900 { background-color: #18181b; }
.bg-zinc-950 { background-color: #09090b; }

/* Neutral Background Colors */
.bg-neutral-50 { background-color: #fafafa; }
.bg-neutral-100 { background-color: #f5f5f5; }
.bg-neutral-200 { background-color: #e5e5e5; }
.bg-neutral-300 { background-color: #d4d4d4; }
.bg-neutral-400 { background-color: #a3a3a3; }
.bg-neutral-500 { background-color: #737373; }
.bg-neutral-600 { background-color: #525252; }
.bg-neutral-700 { background-color: #404040; }
.bg-neutral-800 { background-color: #262626; }
.bg-neutral-900 { background-color: #171717; }
.bg-neutral-950 { background-color: #0a0a0a; }

/* Stone Background Colors */
.bg-stone-50 { background-color: #fafaf9; }
.bg-stone-100 { background-color: #f5f5f4; }
.bg-stone-200 { background-color: #e7e5e4; }
.bg-stone-300 { background-color: #d6d3d1; }
.bg-stone-400 { background-color: #a8a29e; }
.bg-stone-500 { background-color: #78716c; }
.bg-stone-600 { background-color: #57534e; }
.bg-stone-700 { background-color: #44403c; }
.bg-stone-800 { background-color: #292524; }
.bg-stone-900 { background-color: #1c1917; }
.bg-stone-950 { background-color: #0c0a09; }

/* Black Background Color */
.bg-black { background-color: #000000; }


/* Gradients */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

.from-blue-50 { --tw-gradient-from: #eff6ff; }
.from-purple-50 { --tw-gradient-from: #faf5ff; }
.from-green-50 { --tw-gradient-from: #f0fdf4; }
.from-orange-50 { --tw-gradient-from: #fff7ed; }

.to-blue-100 { --tw-gradient-to: #dbeafe; }
.to-purple-100 { --tw-gradient-to: #f3e8ff; }
.to-green-100 { --tw-gradient-to: #dcfce7; }
.to-orange-100 { --tw-gradient-to: #fed7aa; }

/* Borders */
/* Indigo Border Colors */
.border-indigo-50 { border-color: #eef2ff; }
.border-indigo-100 { border-color: #e0e7ff; }
.border-indigo-200 { border-color: #c7d2fe; }
.border-indigo-300 { border-color: #a5b4fc; }
.border-indigo-400 { border-color: #818cf8; }
.border-indigo-500 { border-color: #6366f1; }
.border-indigo-600 { border-color: #4f46e5; }
.border-indigo-700 { border-color: #4338ca; }
.border-indigo-800 { border-color: #3730a3; }
.border-indigo-900 { border-color: #312e81; }
.border-indigo-950 { border-color: #1e1b4b; }

/* Violet Border Colors */
.border-violet-50 { border-color: #f5f3ff; }
.border-violet-100 { border-color: #ede9fe; }
.border-violet-200 { border-color: #ddd6fe; }
.border-violet-300 { border-color: #c4b5fd; }
.border-violet-400 { border-color: #a78bfa; }
.border-violet-500 { border-color: #8b5cf6; }
.border-violet-600 { border-color: #7c3aed; }
.border-violet-700 { border-color: #6d28d9; }
.border-violet-800 { border-color: #5b21b6; }
.border-violet-900 { border-color: #4c1d95; }
.border-violet-950 { border-color: #2e1065; }

/* Pink Border Colors */
.border-pink-50 { border-color: #fdf2f8; }
.border-pink-100 { border-color: #fce7f3; }
.border-pink-200 { border-color: #fbcfe8; }
.border-pink-300 { border-color: #f9a8d4; }
.border-pink-400 { border-color: #f472b6; }
.border-pink-500 { border-color: #ec4899; }
.border-pink-600 { border-color: #db2777; }
.border-pink-700 { border-color: #be185d; }
.border-pink-800 { border-color: #9d174d; }
.border-pink-900 { border-color: #831843; }
.border-pink-950 { border-color: #500724; }

/* Rose Border Colors */
.border-rose-50 { border-color: #fff1f2; }
.border-rose-100 { border-color: #ffe4e6; }
.border-rose-200 { border-color: #fecdd3; }
.border-rose-300 { border-color: #fda4af; }
.border-rose-400 { border-color: #fb7185; }
.border-rose-500 { border-color: #f43f5e; }
.border-rose-600 { border-color: #e11d48; }
.border-rose-700 { border-color: #be123c; }
.border-rose-800 { border-color: #9f1239; }
.border-rose-900 { border-color: #881337; }
.border-rose-950 { border-color: #4c0519; }

/* Emerald Border Colors */
.border-emerald-50 { border-color: #ecfdf5; }
.border-emerald-100 { border-color: #d1fae5; }
.border-emerald-200 { border-color: #a7f3d0; }
.border-emerald-300 { border-color: #6ee7b7; }
.border-emerald-400 { border-color: #34d399; }
.border-emerald-500 { border-color: #10b981; }
.border-emerald-600 { border-color: #059669; }
.border-emerald-700 { border-color: #047857; }
.border-emerald-800 { border-color: #065f46; }
.border-emerald-900 { border-color: #064e3b; }
.border-emerald-950 { border-color: #022c22; }

/* Teal Border Colors */
.border-teal-50 { border-color: #f0fdfa; }
.border-teal-100 { border-color: #ccfbf1; }
.border-teal-200 { border-color: #99f6e4; }
.border-teal-300 { border-color: #5eead4; }
.border-teal-400 { border-color: #2dd4bf; }
.border-teal-500 { border-color: #14b8a6; }
.border-teal-600 { border-color: #0d9488; }
.border-teal-700 { border-color: #0f766e; }
.border-teal-800 { border-color: #115e59; }
.border-teal-900 { border-color: #134e4a; }
.border-teal-950 { border-color: #042f2e; }

/* Cyan Border Colors */
.border-cyan-50 { border-color: #ecfeff; }
.border-cyan-100 { border-color: #cffafe; }
.border-cyan-200 { border-color: #a5f3fc; }
.border-cyan-300 { border-color: #67e8f9; }
.border-cyan-400 { border-color: #22d3ee; }
.border-cyan-500 { border-color: #06b6d4; }
.border-cyan-600 { border-color: #0891b2; }
.border-cyan-700 { border-color: #0e7490; }
.border-cyan-800 { border-color: #155e75; }
.border-cyan-900 { border-color: #164e63; }
.border-cyan-950 { border-color: #083344; }

/* Sky Border Colors */
.border-sky-50 { border-color: #f0f9ff; }
.border-sky-100 { border-color: #e0f2fe; }
.border-sky-200 { border-color: #bae6fd; }
.border-sky-300 { border-color: #7dd3fc; }
.border-sky-400 { border-color: #38bdf8; }
.border-sky-500 { border-color: #0ea5e9; }
.border-sky-600 { border-color: #0284c7; }
.border-sky-700 { border-color: #0369a1; }
.border-sky-800 { border-color: #075985; }
.border-sky-900 { border-color: #0c4a6e; }
.border-sky-950 { border-color: #082f49; }

/* Lime Border Colors */
.border-lime-50 { border-color: #f7fee7; }
.border-lime-100 { border-color: #ecfccb; }
.border-lime-200 { border-color: #d9f99d; }
.border-lime-300 { border-color: #bef264; }
.border-lime-400 { border-color: #a3e635; }
.border-lime-500 { border-color: #84cc16; }
.border-lime-600 { border-color: #65a30d; }
.border-lime-700 { border-color: #4d7c0f; }
.border-lime-800 { border-color: #365314; }
.border-lime-900 { border-color: #1a2e05; }
.border-lime-950 { border-color: #0c1302; }

/* Amber Border Colors */
.border-amber-50 { border-color: #fffbeb; }
.border-amber-100 { border-color: #fef3c7; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-600 { border-color: #d97706; }
.border-amber-700 { border-color: #b45309; }
.border-amber-800 { border-color: #92400e; }
.border-amber-900 { border-color: #78350f; }
.border-amber-950 { border-color: #451a03; }

/* Fuchsia Border Colors */
.border-fuchsia-50 { border-color: #fdf4ff; }
.border-fuchsia-100 { border-color: #fae8ff; }
.border-fuchsia-200 { border-color: #f5d0fe; }
.border-fuchsia-300 { border-color: #f0abfc; }
.border-fuchsia-400 { border-color: #e879f9; }
.border-fuchsia-500 { border-color: #d946ef; }
.border-fuchsia-600 { border-color: #c026d3; }
.border-fuchsia-700 { border-color: #a21caf; }
.border-fuchsia-800 { border-color: #86198f; }
.border-fuchsia-900 { border-color: #701a75; }
.border-fuchsia-950 { border-color: #4a044e; }

/* Slate Border Colors */
.border-slate-50 { border-color: #f8fafc; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-400 { border-color: #94a3b8; }
.border-slate-500 { border-color: #64748b; }
.border-slate-600 { border-color: #475569; }
.border-slate-700 { border-color: #334155; }
.border-slate-800 { border-color: #1e293b; }
.border-slate-900 { border-color: #0f172a; }
.border-slate-950 { border-color: #020617; }

/* Zinc Border Colors */
.border-zinc-50 { border-color: #fafafa; }
.border-zinc-100 { border-color: #f4f4f5; }
.border-zinc-200 { border-color: #e4e4e7; }
.border-zinc-300 { border-color: #d4d4d8; }
.border-zinc-400 { border-color: #a1a1aa; }
.border-zinc-500 { border-color: #71717a; }
.border-zinc-600 { border-color: #52525b; }
.border-zinc-700 { border-color: #3f3f46; }
.border-zinc-800 { border-color: #27272a; }
.border-zinc-900 { border-color: #18181b; }
.border-zinc-950 { border-color: #09090b; }

/* Neutral Border Colors */
.border-neutral-50 { border-color: #fafafa; }
.border-neutral-100 { border-color: #f5f5f5; }
.border-neutral-200 { border-color: #e5e5e5; }
.border-neutral-300 { border-color: #d4d4d4; }
.border-neutral-400 { border-color: #a3a3a3; }
.border-neutral-500 { border-color: #737373; }
.border-neutral-600 { border-color: #525252; }
.border-neutral-700 { border-color: #404040; }
.border-neutral-800 { border-color: #262626; }
.border-neutral-900 { border-color: #171717; }
.border-neutral-950 { border-color: #0a0a0a; }

/* Stone Border Colors */
.border-stone-50 { border-color: #fafaf9; }
.border-stone-100 { border-color: #f5f5f4; }
.border-stone-200 { border-color: #e7e5e4; }
.border-stone-300 { border-color: #d6d3d1; }
.border-stone-400 { border-color: #a8a29e; }
.border-stone-500 { border-color: #78716c; }
.border-stone-600 { border-color: #57534e; }
.border-stone-700 { border-color: #44403c; }
.border-stone-800 { border-color: #292524; }
.border-stone-900 { border-color: #1c1917; }
.border-stone-950 { border-color: #0c0a09; }

/* Black Border Color */
.border-black { border-color: #000000; }


.divide-y > * + * { border-top-width: 1px; }
.divide-gray-100 > * + * { border-color: #f3f4f6; }
.divide-gray-200 > * + * { border-color: #e5e7eb; }


/* Transitions */
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* Links */
.link {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Button link */
.btn-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s ease;
}

.btn-link:hover {
  color: var(--primary-hover);
}


/* Theme-specific badges */
.badge.theme-success {
  background-color: #dcfce7;
  color: #15803d;
}

.badge.theme-danger {
  background-color: #fee2e2;
  color: #dc2626;
}

.badge.theme-info {
  background-color: #dbeafe;
  color: #2563eb;
}

.badge.theme-warning {
  background-color: #fef3c7;
  color: #d97706;
}

.badge.theme-gray {
  background-color: #f3f4f6;
  color: #4b5563;
}

/* Hover states */
.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

.hover\:text-blue-700:hover {
  color: #1d4ed8;
}

/* Notification close button styles */
.notification-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.notification-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Adjust notification padding for close button */
.notification.has-close {
  padding-right: 2.5rem;
}




/* Fix for wc-input autocomplete styling */
wc-input input:-webkit-autofill,
wc-input input:-webkit-autofill:hover,
wc-input input:-webkit-autofill:focus,
wc-input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: var(--text-1, #000) !important;
  background-color: white !important;
  border-color: var(--surface-3, #e5e7eb) !important;
  caret-color: var(--text-1, #000) !important; /* Fix cursor color */
}

/* For Firefox */
wc-input input:autofill {
  background-color: white !important;
  color: var(--text-1, #000) !important;
  border-color: var(--surface-3, #e5e7eb) !important;
  caret-color: var(--text-1, #000) !important; /* Fix cursor color */
}

/* Ensure the border remains visible */
wc-input input:-webkit-autofill {
  border: 1px solid var(--surface-3, #e5e7eb) !important;
}

/* Warning colors for non-participant incidents */
.bg-warning-light {
  background-color: #fff3cd;
}

.text-warning {
  color: #856404;
}

.tag.is-warning {
  background-color: #ffc107;
  color: #000;
}