/* Custom styles if needed */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    color: #222;
}

/* EMERALD COLOR SUPPORT */
.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; }

.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; }

.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; }

.hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
.hover\:bg-emerald-600:hover { background-color: #059669; }
.hover\:bg-emerald-700:hover { background-color: #047857; }

.dark .dark\:bg-emerald-500 { background-color: #10b981; }
.dark .dark\:bg-emerald-600 { background-color: #059669; }
.dark .dark\:bg-emerald-700 { background-color: #047857; }
.dark .dark\:bg-emerald-800 { background-color: #065f46; }
.dark .dark\:bg-emerald-900\/30 { background-color: rgba(6, 78, 59, 0.3); }

.dark .dark\:text-emerald-200 { color: #a7f3d0; }
.dark .dark\:text-emerald-300 { color: #6ee7b7; }
.dark .dark\:text-emerald-400 { color: #34d399; }

.dark .dark\:border-emerald-600 { border-color: #059669; }
.dark .dark\:border-emerald-700 { border-color: #047857; }

.dark .dark\:hover\:bg-emerald-600:hover { background-color: #059669; }
.dark .dark\:hover\:bg-emerald-700:hover { background-color: #047857; }

/* GRADIENT SUPPORT */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.from-emerald-50 { --tw-gradient-from: #ecfdf5; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 253, 245, 0)); }
.to-green-50 { --tw-gradient-to: #f0fdf4; }
.to-emerald-50 { --tw-gradient-to: #ecfdf5; }
.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 253, 244, 0)); }
.from-emerald-900\/30 { --tw-gradient-from: rgba(6, 78, 59, 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0)); }
.to-green-900\/30 { --tw-gradient-to: rgba(20, 83, 45, 0.3); }
.from-green-900\/30 { --tw-gradient-from: rgba(20, 83, 45, 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 83, 45, 0)); }
.to-emerald-900\/30 { --tw-gradient-to: rgba(6, 78, 59, 0.3); }

/* DARK MODE GRADIENT OVERRIDES */
.dark .dark\:from-green-900\/30 { --tw-gradient-from: rgba(20, 83, 45, 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 83, 45, 0)); }
.dark .dark\:to-emerald-900\/30 { --tw-gradient-to: rgba(6, 78, 59, 0.3); }
.dark .dark\:from-emerald-900\/30 { --tw-gradient-from: rgba(6, 78, 59, 0.3); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(6, 78, 59, 0)); }
.dark .dark\:to-green-900\/30 { --tw-gradient-to: rgba(20, 83, 45, 0.3); }

/* CRITICAL GRADIENT FIXES - Must be at top for priority */
*[class*="bg-gradient-to-r"][class*="from-teal-500"][class*="to-teal-600"] {
    background: linear-gradient(to right, #14b8a6, #0d9488) !important;
}

*[class*="bg-gradient-to-r"][class*="from-amber-500"][class*="to-amber-600"] {
    background: linear-gradient(to right, #f59e0b, #d97706) !important;
}

*[class*="bg-gradient-to-r"][class*="from-red-500"][class*="to-red-600"] {
    background: linear-gradient(to right, #ef4444, #dc2626) !important;
}

*[class*="bg-gradient-to-r"][class*="from-green-500"][class*="to-green-600"] {
    background: linear-gradient(to right, #22c55e, #16a34a) !important;
}

*[class*="bg-gradient-to-r"][class*="from-orange-500"][class*="to-orange-600"] {
    background: linear-gradient(to right, #f97316, #ea580c) !important;
}

*[class*="bg-gradient-to-r"][class*="from-gray-500"][class*="to-gray-600"] {
    background: linear-gradient(to right, #6b7280, #4b5563) !important;
}

*[class*="bg-gradient-to-r"][class*="from-purple-500"][class*="to-purple-600"] {
    background: linear-gradient(to right, #a855f7, #9333ea) !important;
}

*[class*="bg-gradient-to-r"][class*="from-blue-500"][class*="to-blue-600"] {
    background: linear-gradient(to right, #3b82f6, #2563eb) !important;
}

a{
    color: #60a5fa;
		text-decoration: underline;
}
.forum-topic-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.menu-hidden {
    display: none;
}
/* Ensure desktop menu dropdowns appear above other content */
.desktop-menu-dropdown {
    z-index: 50; /* Needs to be higher than other elements if overlap occurs */
}
@media (min-width: 768px) { /* md breakpoint in Tailwind */
    .mobile-menu-button {
        display: none;
    }
    .desktop-menu {
        display: flex !important;
    }
   
}
/* For screens smaller than 768px (e.g., smartphones) */
@media (max-width: 768px) {
    .mt-20 {
        margin-top: 2rem; /* Reduce margin for smaller screens */
    }
}

.w3-row-padding, .w3-row-padding>.w3-half, .w3-row-padding>.w3-third, .w3-row-padding>.w3-twothird, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-col {
    padding: 0 8px;
}
.w3-container, .w3-panel {
    padding: 0.01em 16px;
}
.w3-right {
    float: right !important;
}
footer {
    background-color: #f0f0f0 !important;
    display: block;
}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter {
    float: left;
    width: 100%
}
.w3-center {
    text-align: center !important;
}
.w3-tiny {
    font-size: 10px !important;
}
.w3-container, .w3-panel {
    padding: 0.01em 16px;
}
@media (min-width: 601px) {
.w3-col.m3, .w3-quarter {
    width: 25%;
}
}
.rounded-button {
   background: linear-gradient(to bottom, #93c5fd 0%, #1d4ed8 50%, #93c5fd 100%);
  color: #fff;
  font-weight: bold;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
  font-size: 0.875rem;
  transition: background 0.2s;
  text-align: center;
  text-decoration: none;
  margin-left: 5px; /* Add 5px space on the left */
}
.rounded-button:hover {
  background: linear-gradient(to bottom, #60a5fa 0%, #1e40af 50%, #60a5fa 100%);
}

.rounded-button-no-padding {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: 600;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 0.75rem;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    border: 1px solid #2563eb;
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
}
.rounded-button-no-padding:hover {
    background-color: #2563eb;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
    transform: scale(1.05);
    border-color: #1d4ed8;
}

.rounded-button-selected {
   background: linear-gradient(to bottom, #f0e79c 0%, #ffef15 50%, #f0e79c 100%);
  color: #000000;
  font-weight: bold;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
  font-size: 0.875rem;
  transition: background 0.2s;
  text-align: center;
  text-decoration: none;
  margin-left: 5px; /* Add 5px space on the left */
}
.rounded-button-selected:hover {
  background: linear-gradient(to bottom, #f1eb89 0%, #ffd900 50%, #f1eb89 100%);
}


.rounded-button-no-padding-selected {
    background-color: #eab308;
    color: #000000;
    font-weight: 600;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    font-size: 0.75rem;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ca8a04;
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
}
.rounded-button-no-padding-selected:hover {
    background-color: #ca8a04;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
    transform: scale(1.05);
    border-color: #a16207;
}
  .blue-link {
    color: blue; /* Ensures the link appears blue */
    text-decoration: underline; /* Keeps the traditional hyperlink style */
    font-weight: bold; /* Makes the text stand out */
  }
@media (prefers-color-scheme: dark) {
    .blue-link{
		color:rgb(63, 125, 241);
		}
	}

/* Theme-specific link classes for light and dark modes */
.theme-link {
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.theme-link:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Theme link variant without underlines */
.theme-link-no-underline:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

/* Additional specificity for no-underline links */
.theme-link.theme-link-no-underline {
    text-decoration: none !important;
}

.theme-link.theme-link-no-underline:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

/* Remove underlines from anchor tags containing no-underline spans */
a:has(.theme-link-no-underline) {
    text-decoration: none !important;
}

a:has(.theme-link-no-underline):hover {
    text-decoration: none !important;
}

/* Fallback for browsers that don't support :has() */
a .theme-link-no-underline {
    text-decoration: none !important;
}

a:hover .theme-link-no-underline {
    text-decoration: none !important;
}

/* Amber theme links */
.theme-link-amber {
    color: #CD853F;
}
@media (prefers-color-scheme: dark) {
    .theme-link-amber {
        color: #F59E0B;
    }
}

/* Red theme links */
.theme-link-red {
    color: #FF1493;
}
@media (prefers-color-scheme: dark) {
    .theme-link-red {
        color: #EF4444;
    }
}

/* Green theme links */
.theme-link-green {
    color: #4ef526;
}
@media (prefers-color-scheme: dark) {
    .theme-link-green {
        color: #22C55E;
    }
}

/* Orange theme links */
.theme-link-orange {
    color: #FF6347;
}
@media (prefers-color-scheme: dark) {
    .theme-link-orange {
        color: #F97316;
    }
}

/* Gray theme links */
.theme-link-gray {
    color: #6e2ac5;
}
@media (prefers-color-scheme: dark) {
    .theme-link-gray {
        color: #8B5CF6;
    }
}

/* Purple theme links */
.theme-link-purple {
    color: #8A2BE2;
}
@media (prefers-color-scheme: dark) {
    .theme-link-purple {
        color: #A855F7;
    }
}

/* Teal theme links */
.theme-link-teal {
    color: #00CED1;
}
@media (prefers-color-scheme: dark) {
    .theme-link-teal {
        color: #14B8A6;
    }
}

/* Blue theme links (default) */
.theme-link-blue {
    color: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
    .theme-link-blue {
        color: #3B82F6;
    }
}

.rounded-button-admin {
   background: linear-gradient(to bottom, #eeff00 0%, #697aa8 50%, #eeff00 100%);
  color: #fff;
  font-weight: bold;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
  font-size: 0.875rem;
  transition: background 0.2s;
  text-align: center;
  text-decoration: none;
  margin-left: 5px; /* Add 5px space on the left */
}
.rounded-button-admin:hover {
  background: linear-gradient(to bottom, #fffecd 0%, #1e40af 50%, #fffecd 100%);
}

/* --- Dark mode support --- */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #18181b;
        color: #868686;
    }
    
    /* Background colors */
    .bg-white {
        background-color: #23272f !important;
    }
    .bg-gray-50 {
        background-color: #23272f !important;
    }
    .bg-gray-100 {
        background-color: #18181b !important;
    }
    .bg-blue-700 {
        background-color: #1e3a8a !important;
    }
    
    /* Site main content dark mode override */
    .site-main-content {
        background: #000000 !important;
    }
    
    /* Override all theme gradient backgrounds in dark mode */
    .site-main-content.bg-gradient-to-b.from-amber-50.to-amber-100,
    .site-main-content.bg-gradient-to-b.from-yellow-50.to-yellow-100,
    .site-main-content.bg-gradient-to-b.from-red-50.to-red-100,
    .site-main-content.bg-gradient-to-b.from-green-50.to-green-100,
    .site-main-content.bg-gradient-to-b.from-orange-50.to-orange-100,
    .site-main-content.bg-gradient-to-b.from-gray-50.to-gray-100,
    .site-main-content.bg-gradient-to-b.from-purple-50.to-purple-100,
    .site-main-content.bg-gradient-to-b.from-teal-50.to-teal-100,
    .site-main-content.bg-gradient-to-b.from-blue-50.to-blue-100 {
        background: #23272f !important;
    }
    
   
    
    /* Text colors - comprehensive coverage */
    .text-gray-900 {
        color: #f9fafb !important;
    }
    .text-gray-800 {
        color: #374151 !important;
    }
    .text-gray-700 {
        color: #374151 !important; /* Proper 700 shade of grey */
    }
    .text-gray-600, .text-gray-500 {
        color: #a1a1aa !important;
    }
     /* Text color overrides for dark mode */
   
    
    /* Dark mode specific text colors */
    .dark\:text-gray-700 {
        color: #000000 !important; /* Black text for better contrast against grey backgrounds */
    }
    .dark\:text-black {
        color: #000000 !important;
    }
    .dark\:text-gray-200 {
        color: #e5e7eb !important;
    }
    .dark\:text-orange-200 {
        color: #d45f28 !important;
    }
    .dark\:text-orange-300 {
        color: #d2541a !important;
    }
    .dark\:text-orange-400 {
        color: #b64916 !important;
    }
    .dark\:text-orange-500 {
        color: #b64916 !important;
    }
    .text-gray-400 {
        color: #71717a !important;
    }
    .text-gray-300 {
        color: #d4d4d8 !important;
    }
    
    /* Blue text colors */
    .text-blue-700 {
        color: #60a5fa !important;
    }
    .text-blue-800 {
        color: #3b82f6 !important;
    }
    .text-blue-600 {
        color: #60a5fa !important;
    }
    .text-blue-300 {
        color: #93c5fd !important;
    }
    .text-blue-400 {
        color: #60a5fa !important;
    }
    
    /* Red text colors */
    .text-red-700 {
        color: #fca5a5 !important;
    }
    .text-red-600 {
        color: #f87171 !important;
    }
    .text-red-300 {
        color: #fca5a5 !important;
    }
    .text-red-400 {
        color: #f87171 !important;
    }
    
    /* Green text colors */
    .text-green-700 {
        color: #86efac !important;
    }
    .text-green-600 {
        color: #4ade80 !important;
    }
    .text-green-300 {
        color: #86efac !important;
    }
    .text-green-400 {
        color: #4ade80 !important;
    }
    
    /* Yellow text colors */
    .text-yellow-700 {
        color: #fcd34d !important;
    }
    .text-yellow-600 {
        color: #fbbf24 !important;
    }
    .text-yellow-300 {
        color: #fcd34d !important;
    }
    
    /* Border colors */
    .border-gray-100 {
        border-color: #2d2d35 !important;
    }
    .border-gray-200 {
        border-color: #374151 !important;
    }
    .border-gray-600 {
        border-color: #4b5563 !important;
    }
    .border-gray-700 {
        border-color: #374151 !important;
    }
    
    /* Specific background combinations for alerts */
    .bg-red-50 {
        background-color: rgba(127, 29, 29, 0.2) !important;
    }
    .bg-green-50 {
        background-color: rgba(20, 83, 45, 0.2) !important;
    }
    .bg-blue-50 {
        background-color: rgba(30, 58, 138, 0.2) !important;
    }
    .bg-yellow-50 {
        background-color: rgba(146, 64, 14, 0.2) !important;
    }
    .bg-amber-50 {
        background-color: rgba(146, 64, 14, 0.2) !important;
    }
    .bg-orange-50 {
        background-color: rgba(154, 52, 18, 0.2) !important;
    }
    .bg-purple-50 {
        background-color: rgba(88, 28, 135, 0.2) !important;
    }
    .bg-teal-50 {
        background-color: rgba(15, 118, 110, 0.2) !important;
    }
    
    /* Border colors for alerts */
    .border-red-200 {
        border-color: #dc2626 !important;
    }
    .border-red-800 {
        border-color: #991b1b !important;
    }
    .border-green-200 {
        border-color: #16a34a !important;
    }
    .border-green-800 {
        border-color: #166534 !important;
    }
    .border-blue-200 {
        border-color: #2563eb !important;
    }
    .border-yellow-200 {
        border-color: #d97706 !important;
    }
    .border-yellow-800 {
        border-color: #92400e !important;
    }
    
    /* Footer and other elements */
    footer, .w3-tiny, .w3-center {
        background-color: #23272f !important;
        color: #a1a1aa !important;
    }
    
    /* Gradient backgrounds */
    .bg-gradient-to-b {
        background: linear-gradient(to bottom, #353535 0%, #313131 50%, #474747 100%) !important;
    }
    
    /* Tailwind gradient direction classes */
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
    }
    .bg-gradient-to-l {
        background-image: linear-gradient(to left, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
    }
    .bg-gradient-to-t {
        background-image: linear-gradient(to top, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
    }
    .bg-gradient-to-b {
        background-image: linear-gradient(to bottom, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent)) !important;
    }
    
    /* CRITICAL: Direct gradient fixes for header elements - highest specificity */
    .bg-gradient-to-r.from-teal-500.to-teal-600.rounded-t-xl,
    .bg-gradient-to-r.from-teal-500.to-teal-600 {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
        background-image: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    
    .bg-gradient-to-r.from-amber-500.to-amber-600.rounded-t-xl,
    .bg-gradient-to-r.from-amber-500.to-amber-600 {
        background: linear-gradient(to right, #f59e0b, #d97706) !important;
        background-image: linear-gradient(to right, #f59e0b, #d97706) !important;
    }
    
    .bg-gradient-to-r.from-red-500.to-red-600.rounded-t-xl,
    .bg-gradient-to-r.from-red-500.to-red-600 {
        background: linear-gradient(to right, #ef4444, #dc2626) !important;
        background-image: linear-gradient(to right, #ef4444, #dc2626) !important;
    }
    
    .bg-gradient-to-r.from-green-500.to-green-600.rounded-t-xl,
    .bg-gradient-to-r.from-green-500.to-green-600 {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
        background-image: linear-gradient(to right, #22c55e, #16a34a) !important;
    }
    
    .bg-gradient-to-r.from-orange-500.to-orange-600.rounded-t-xl,
    .bg-gradient-to-r.from-orange-500.to-orange-600 {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
        background-image: linear-gradient(to right, #f97316, #ea580c) !important;
    }
    
    .bg-gradient-to-r.from-gray-500.to-gray-600.rounded-t-xl,
    .bg-gradient-to-r.from-gray-500.to-gray-600 {
        background: linear-gradient(to right, #6b7280, #4b5563) !important;
        background-image: linear-gradient(to right, #6b7280, #4b5563) !important;
    }
    
    .bg-gradient-to-r.from-purple-500.to-purple-600.rounded-t-xl,
    .bg-gradient-to-r.from-purple-500.to-purple-600 {
        background: linear-gradient(to right, #a855f7, #9333ea) !important;
        background-image: linear-gradient(to right, #a855f7, #9333ea) !important;
    }
    
    .bg-gradient-to-r.from-blue-500.to-blue-600.rounded-t-xl,
    .bg-gradient-to-r.from-blue-500.to-blue-600 {
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
        background-image: linear-gradient(to right, #3b82f6, #2563eb) !important;
    }
    
    /* Additional explicit gradient support when CSS variables don't work */
    .from-teal-500.to-teal-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-teal-500.to-teal-600 {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
        --tw-gradient-from: #14b8a6 !important;
        --tw-gradient-to: #0d9488 !important;
    }
    
    .from-amber-500.to-amber-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-amber-500.to-amber-600 {
        background: linear-gradient(to right, #f59e0b, #d97706) !important;
        --tw-gradient-from: #f59e0b !important;
        --tw-gradient-to: #d97706 !important;
    }
    
    .from-red-500.to-red-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-red-500.to-red-600 {
        background: linear-gradient(to right, #ef4444, #dc2626) !important;
        --tw-gradient-from: #ef4444 !important;
        --tw-gradient-to: #dc2626 !important;
    }
    
    .from-green-500.to-green-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-green-500.to-green-600 {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
        --tw-gradient-from: #22c55e !important;
        --tw-gradient-to: #16a34a !important;
    }
    
    .from-orange-500.to-orange-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-orange-500.to-orange-600 {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
        --tw-gradient-from: #f97316 !important;
        --tw-gradient-to: #ea580c !important;
    }
    
    .from-gray-500.to-gray-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-gray-500.to-gray-600 {
        background: linear-gradient(to right, #6b7280, #4b5563) !important;
        --tw-gradient-from: #6b7280 !important;
        --tw-gradient-to: #4b5563 !important;
    }
    
    .from-purple-500.to-purple-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-purple-500.to-purple-600 {
        background: linear-gradient(to right, #a855f7, #9333ea) !important;
        --tw-gradient-from: #a855f7 !important;
        --tw-gradient-to: #9333ea !important;
    }
    
    .from-blue-500.to-blue-600.bg-gradient-to-r,
    .bg-gradient-to-r.from-blue-500.to-blue-600 {
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
        --tw-gradient-from: #3b82f6 !important;
        --tw-gradient-to: #2563eb !important;
    }
    
    /* Specific teal gradient classes for buttons */
    .bg-gradient-to-r.from-teal-500.to-teal-600 {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    .bg-gradient-to-r.from-teal-600.to-teal-700 {
        background: linear-gradient(to right, #0d9488, #0f766e) !important;
    }
    
    /* Specific amber gradient classes for headers */
    .bg-gradient-to-r.from-amber-500.to-amber-600 {
        background: linear-gradient(to right, #f59e0b, #d97706) !important;
    }
    .bg-gradient-to-r.from-amber-600.to-amber-700 {
        background: linear-gradient(to right, #d97706, #b45309) !important;
    }
    
    /* Specific red gradient classes for headers */
    .bg-gradient-to-r.from-red-500.to-red-600 {
        background: linear-gradient(to right, #ef4444, #dc2626) !important;
    }
    .bg-gradient-to-r.from-red-600.to-red-700 {
        background: linear-gradient(to right, #dc2626, #b91c1c) !important;
    }
    
    /* Specific green gradient classes for headers */
    .bg-gradient-to-r.from-green-500.to-green-600 {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
    }
    .bg-gradient-to-r.from-green-600.to-green-700 {
        background: linear-gradient(to right, #16a34a, #15803d) !important;
    }
    
    /* Specific orange gradient classes for headers */
    .bg-gradient-to-r.from-orange-500.to-orange-600 {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
    }
    .bg-gradient-to-r.from-orange-600.to-orange-700 {
        background: linear-gradient(to right, #ea580c, #c2410c) !important;
    }
    
    /* Specific gray gradient classes for headers */
    .bg-gradient-to-r.from-gray-500.to-gray-600 {
        background: linear-gradient(to right, #6b7280, #4b5563) !important;
    }
    .bg-gradient-to-r.from-gray-600.to-gray-700 {
        background: linear-gradient(to right, #4b5563, #374151) !important;
    }
    
    /* Specific purple gradient classes for headers */
    .bg-gradient-to-r.from-purple-500.to-purple-600 {
        background: linear-gradient(to right, #a855f7, #9333ea) !important;
    }
    .bg-gradient-to-r.from-purple-600.to-purple-700 {
        background: linear-gradient(to right, #9333ea, #7c3aed) !important;
    }
    
    /* Specific blue gradient classes for headers */
    .bg-gradient-to-r.from-blue-500.to-blue-600 {
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
    }
    .bg-gradient-to-r.from-blue-600.to-blue-700 {
        background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
    }
    
    /* Fallback for any teal gradient button */
    a[class*="from-teal-500"] {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    a[class*="from-teal-600"] {
        background: linear-gradient(to right, #0d9488, #0f766e) !important;
    }
    
    /* Direct button styling for Reply buttons */
    a[title="Reply"].bg-gradient-to-r {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    a[title="Reply"].bg-gradient-to-r:hover {
        background: linear-gradient(to right, #0d9488, #0f766e) !important;
    }
    
    /* Dark mode utility classes */
    .dark\:text-white {
        color: #e5e7eb !important;
    }
    .dark\:text-gray-100 {
        color: #f3f4f6 !important;
    }
    .dark\:text-gray-300 {
        color: #d1d5db !important;
    }
    .dark\:text-gray-400 {
        color: #9ca3af !important;
    }
    .dark\:bg-gray-800 {
        background-color: #1f2937 !important;
    }
    .dark\:bg-gray-700 {
        background-color: #374151 !important;
    }
    
    /* Input field dark mode support */
    input[type="text"], 
    input[type="password"], 
    input[type="email"], 
    select, 
    textarea {
        background-color: #374151 !important; /* gray-700 */
        color: #f9fafb !important; /* gray-50 - ensures password dots are visible */
        border-color: #6b7280 !important; /* gray-500 */
    }
    
    input[type="text"]::placeholder,
    input[type="password"]::placeholder,
    input[type="email"]::placeholder,
    textarea::placeholder {
        color: #9ca3af !important; /* gray-400 */
    }
    
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus,
    select:focus,
    textarea:focus {
        background-color: #374151 !important; /* keep same bg on focus */
        color: #f9fafb !important; /* keep light text on focus */
        border-color: #3b82f6 !important; /* blue-500 for focus */
        outline-color: #3b82f6 !important; /* blue-500 for focus outline */
    }
}

/* Generation selector link overrides */
/* Generation selector link overrides (let components control color) */
.flex a.px-3.py-1.text-xs {
    color: inherit !important; /* allow utility classes like dark:text-white to apply */
    text-decoration: none !important;
}

@media (prefers-color-scheme: dark) {
    .flex a.px-3.py-1.text-xs {
        color: inherit !important; /* do not force; respect element classes */
    }
}

/* ===== TAILWIND UTILITY CLASSES FOR THEME COLORS ===== */

/* AMBER COLORS */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }
.bg-amber-600 { background-color: #d97706; }
.bg-amber-700 { background-color: #b45309; }
.bg-amber-900\/20 { background-color: rgba(120, 53, 15, 0.2); }
.bg-amber-900\/30 { background-color: rgba(120, 53, 15, 0.3); }
.border-amber-100 { border-color: #fef3c7; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-700 { border-color: #b45309; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-600 { border-color: #d97706; }
.text-amber-100 { color: #f59e0b; }
.text-amber-200 { color: #e69509; }
.text-amber-400 { color: #da9012; }
.text-amber-500 { color: #d48b0d; }
.text-amber-600 { color: #d97706; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #7e380c; }
.from-amber-50 { --tw-gradient-from: #fffbeb; }
.from-amber-500 { --tw-gradient-from: #f59e0b; }
.to-amber-100 { --tw-gradient-to: #fef3c7; }
.to-amber-600 { --tw-gradient-to: #d97706; }
.hover\:bg-amber-700:hover { background-color: #b45309; }

/* RED COLORS */
.bg-red-50 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-200 { background-color: #fecaca; }
.bg-red-600 { background-color: #dc2626; }
.bg-red-700 { background-color: #b91c1c; }
.bg-red-900\/20 { background-color: rgba(127, 29, 29, 0.2); }
.border-red-100 { border-color: #fee2e2; }
.border-red-200 { border-color: #fecaca; }
.border-red-400 { border-color: #f87171; }
.border-red-700 { border-color: #b91c1c; }
.text-red-600 { color: #dc2626; }
.from-red-50 { --tw-gradient-from: #fef2f2; }
.from-red-500 { --tw-gradient-from: #ef4444; }
.to-red-100 { --tw-gradient-to: #fee2e2; }
.to-red-600 { --tw-gradient-to: #dc2626; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }

/* GREEN COLORS */
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-100 { background-color: #dcfce7; }
.bg-green-200 { background-color: #bbf7d0; }
.bg-green-600 { background-color: #16a34a; }
.bg-green-700 { background-color: #15803d; }
.bg-green-900\/20 { background-color: rgba(20, 83, 45, 0.2); }
.border-green-100 { border-color: #dcfce7; }
.border-green-200 { border-color: #bbf7d0; }
.border-green-400 { border-color: #4ade80; }
.border-green-700 { border-color: #15803d; }
.text-green-600 { color: #16a34a; }
.from-green-50 { --tw-gradient-from: #f0fdf4; }
.from-green-500 { --tw-gradient-from: #22c55e; }
.to-green-100 { --tw-gradient-to: #dcfce7; }
.to-green-600 { --tw-gradient-to: #16a34a; }
.hover\:bg-green-700:hover { background-color: #15803d; }

/* ORANGE COLORS */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.bg-orange-900\/20 { background-color: rgba(154, 52, 18, 0.2); }
.border-orange-100 { border-color: #ffedd5; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-400 { border-color: #fb923c; }
.border-orange-700 { border-color: #c2410c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-800 { color: #c2410c; }
.from-orange-50 { --tw-gradient-from: #fff7ed; }
.from-orange-500 { --tw-gradient-from: #f97316; }
.to-orange-100 { --tw-gradient-to: #ffedd5; }
.to-orange-600 { --tw-gradient-to: #ea580c; }
.hover\:bg-orange-700:hover { background-color: #c2410c; }

/* GRAY COLORS */
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-600 { background-color: #4b5563; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-900\/20 { background-color: rgba(17, 24, 39, 0.2); }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-400 { border-color: #9ca3af; }
.border-gray-700 { border-color: #374151; }
.text-gray-600 { color: #4b5563; }
.from-gray-50 { --tw-gradient-from: #f9fafb; }
.from-gray-500 { --tw-gradient-from: #6b7280; }
.to-gray-100 { --tw-gradient-to: #f3f4f6; }
.to-gray-600 { --tw-gradient-to: #4b5563; }
.hover\:bg-gray-700:hover { background-color: #374151; }

/* PURPLE COLORS */
.bg-purple-50 { background-color: #faf5ff; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-purple-200 { background-color: #e9d5ff; }
.bg-purple-600 { background-color: #9333ea; }
.bg-purple-700 { background-color: #7c3aed; }
.bg-purple-900\/20 { background-color: rgba(88, 28, 135, 0.2); }
.border-purple-100 { border-color: #f3e8ff; }
.border-purple-200 { border-color: #e9d5ff; }
.border-purple-400 { border-color: #c084fc; }
.border-purple-700 { border-color: #7c3aed; }
.text-purple-600 { color: #9333ea; }
.from-purple-50 { --tw-gradient-from: #faf5ff; }
.from-purple-500 { --tw-gradient-from: #a855f7; }
.to-purple-100 { --tw-gradient-to: #f3e8ff; }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.hover\:bg-purple-700:hover { background-color: #7c3aed; }

/* TEAL COLORS */
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.bg-teal-900\/20 { background-color: rgba(19, 78, 74, 0.2); }
.bg-teal-900\/30 { background-color: rgba(19, 78, 74, 0.3); }
.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-700 { border-color: #0f766e; }
.text-teal-200 { color: #99f6e4; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.text-teal-800 { color: #115e59; }
.from-teal-50 { --tw-gradient-from: #f0fdfa; }
.from-teal-500 { --tw-gradient-from: #14b8a6; }
.from-teal-600 { --tw-gradient-from: #0d9488; }
.to-teal-100 { --tw-gradient-to: #ccfbf1; }
.to-teal-600 { --tw-gradient-to: #0d9488; }
.to-teal-700 { --tw-gradient-to: #0f766e; }
.hover\:from-teal-600:hover { --tw-gradient-from: #0d9488; }
.hover\:to-teal-700:hover { --tw-gradient-to: #0f766e; }
.hover\:border-teal-300:hover { border-color: #5eead4; }
.hover\:bg-teal-700:hover { background-color: #0f766e; }

/* BLUE COLORS */
.bg-blue-50 { background-color: #eff6ff; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-blue-200 { background-color: #bfdbfe; }
.bg-blue-600 { background-color: #2563eb; }
.bg-blue-700 { background-color: #1d4ed8; }
.bg-blue-900\/20 { background-color: rgba(30, 58, 138, 0.2); }
.border-blue-100 { border-color: #dbeafe; }
.border-blue-200 { border-color: #bfdbfe; }
.border-blue-400 { border-color: #60a5fa; }
.border-blue-700 { border-color: #1d4ed8; }
.text-blue-600 { color: #2563eb; }
.from-blue-50 { --tw-gradient-from: #eff6ff; }
.from-blue-500 { --tw-gradient-from: #3b82f6; }
.to-blue-100 { --tw-gradient-to: #dbeafe; }
.to-blue-600 { --tw-gradient-to: #2563eb; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }

/* Dark mode overrides for theme colors */
@media (prefers-color-scheme: dark) {
    .dark\:bg-amber-700 { background-color: #b45309; }
    .dark\:bg-amber-900\/30 { background-color: rgba(120, 53, 15, 0.3); }
    .dark\:bg-red-700 { background-color: #b91c1c; }
    .dark\:bg-green-700 { background-color: #15803d; }
    .dark\:bg-orange-700 { background-color: #c2410c; }
    .dark\:bg-orange-900\/30 { background-color: rgba(154, 52, 18, 0.3); }
    .dark\:bg-gray-700 { background-color: #374151; }
    .dark\:bg-purple-700 { background-color: #7c3aed; }
    .dark\:bg-purple-900\/30 { background-color: rgba(88, 28, 135, 0.3); }
    .dark\:bg-teal-700 { background-color: #0f766e; }
    .dark\:bg-teal-900\/30 { background-color: rgba(19, 78, 74, 0.3); }
    .dark\:bg-blue-700 { background-color: #1d4ed8; }
    
    .dark\:border-amber-400 { border-color: #fbbf24; }
    .dark\:border-amber-700 { border-color: #b45309; }
    .dark\:border-amber-600 { border-color: #d97706; }
    .dark\:border-red-400 { border-color: #f87171; }
    .dark\:border-red-700 { border-color: #b91c1c; }
    .dark\:border-green-400 { border-color: #4ade80; }
    .dark\:border-green-700 { border-color: #15803d; }
    .dark\:border-orange-400 { border-color: #fb923c; }
    .dark\:border-orange-600 { border-color: #ea580c; }
    .dark\:border-orange-700 { border-color: #c2410c; }
    .dark\:border-gray-400 { border-color: #9ca3af; }
    .dark\:border-gray-700 { border-color: #374151; }
    .dark\:border-purple-400 { border-color: #c084fc; }
    .dark\:border-purple-600 { border-color: #9333ea; }
    .dark\:border-purple-700 { border-color: #7c3aed; }
    .dark\:border-teal-400 { border-color: #2dd4bf; }
    .dark\:border-teal-600 { border-color: #0d9488; }
    .dark\:border-teal-700 { border-color: #0f766e; }
    .dark\:border-blue-400 { border-color: #60a5fa; }
    .dark\:border-blue-700 { border-color: #1d4ed8; }

    /* Amber dark-mode text helpers */
    .dark\:text-amber-100 { color: #fef3c7 !important; }
    .dark\:text-amber-200 { color: #fde68a !important; }
    .dark\:text-amber-300 { color: #fcd34d !important; }
    .dark\:text-amber-400 { color: #fbbf24 !important; }
    .dark\:text-amber-500 { color: #f59e0b !important; }
    .dark\:text-amber-600 { color: #d97706 !important; }
    .dark\:text-amber-700 { color: #b45309 !important; }
    .dark\:text-amber-800 { color: #92400e !important; }
    .dark\:text-amber-900 { color: #78350f !important; }

    /* Orange dark-mode text helpers */
    .dark\:text-orange-100 { color: #ffedd5 !important; }
    .dark\:text-orange-200 { color: #fed7aa !important; }
    .dark\:text-orange-300 { color: #fdba74 !important; }
    .dark\:text-orange-400 { color: #fb923c !important; }
    .dark\:text-orange-500 { color: #f97316 !important; }
    .dark\:text-orange-600 { color: #ea580c !important; }
    .dark\:text-orange-700 { color: #c2410c !important; }
    .dark\:text-orange-800 { color: #9a3412 !important; }
    .dark\:text-orange-900 { color: #7c2d12 !important; }

    /* Purple dark-mode text helpers */
    .dark\:text-purple-100 { color: #f3e8ff !important; }
    .dark\:text-purple-200 { color: #e9d5ff !important; }
    .dark\:text-purple-300 { color: #d8b4fe !important; }
    .dark\:text-purple-400 { color: #c084fc !important; }
    .dark\:text-purple-500 { color: #a855f7 !important; }
    .dark\:text-purple-600 { color: #9333ea !important; }
    .dark\:text-purple-700 { color: #7c3aed !important; }
    .dark\:text-purple-800 { color: #6b21a8 !important; }
    .dark\:text-purple-900 { color: #581c87 !important; }

    /* Teal dark-mode text helpers */
    .dark\:text-teal-100 { color: #ccfbf1 !important; }
    .dark\:text-teal-200 { color: #99f6e4 !important; }
    .dark\:text-teal-300 { color: #5eead4 !important; }
    .dark\:text-teal-400 { color: #2dd4bf !important; }
    .dark\:text-teal-500 { color: #14b8a6 !important; }
    .dark\:text-teal-600 { color: #0d9488 !important; }
    .dark\:text-teal-700 { color: #0f766e !important; }
    .dark\:text-teal-800 { color: #115e59 !important; }
    .dark\:text-teal-900 { color: #134e4a !important; }

    /* Yellow dark-mode text helpers */
    .dark\:text-yellow-200 { color: #fadb77 !important; }
    .dark\:text-yellow-300 { color: #fcd34d !important; }
    .dark\:text-yellow-400 { color: #fbbf24 !important; }
    .dark\:text-yellow-600 { color: #d9a806 !important; }
    .dark\:text-yellow-800 { color: #dab900 !important; }
}