/* Additional Colors */
.mcx-bg-gray-50 {background-color: #F9FAFB;}
.mcx-bg-gray-100 {background-color: #F3F4F6;}
.mcx-bg-gray-200 {background-color: #E5E7EB;}
.mcx-bg-gray-300 {background-color: #D1D5DB;}
.mcx-bg-gray-400 {background-color: #9CA3AF;}
.mcx-bg-gray-500 {background-color: #6B7280;}
.mcx-bg-gray-600 {background-color: #4B5563;}
.mcx-bg-gray-700 {background-color: #374151;}
.mcx-bg-gray-800 {background-color: #1F2937;}
.mcx-bg-gray-900 {background-color: #111827;}

.mcx-bg-red-50 {background-color: #FEF2F2;}
.mcx-bg-red-100 {background-color: #FEE2E2;}
.mcx-bg-red-200 {background-color: #FECACA;}
.mcx-bg-red-300 {background-color: #FCA5A5;}
.mcx-bg-red-400 {background-color: #F87171;}
.mcx-bg-red-500 {background-color: #EF4444;}
.mcx-bg-red-600 {background-color: #DC2626;}
.mcx-bg-red-700 {background-color: #B91C1C;}
.mcx-bg-red-800 {background-color: #991B1B;}
.mcx-bg-red-900 {background-color: #7F1D1D;}

.hover\:mcx-bg-gray-50:hover {background-color: #F9FAFB;}
.hover\:mcx-bg-gray-100:hover {background-color: #F3F4F6;}
.hover\:mcx-bg-gray-200:hover {background-color: #E5E7EB;}
.hover\:mcx-bg-gray-300:hover {background-color: #D1D5DB;}
.hover\:mcx-bg-gray-400:hover {background-color: #9CA3AF;}
.hover\:mcx-bg-gray-500:hover {background-color: #6B7280;}
.hover\:mcx-bg-gray-600:hover {background-color: #4B5563;}
.hover\:mcx-bg-gray-700:hover {background-color: #374151;}
.hover\:mcx-bg-gray-800:hover {background-color: #1F2937;}
.hover\:mcx-bg-gray-900:hover {background-color: #111827;}

.hover\:mcx-bg-red-50:hover {background-color: #FEF2F2;}
.hover\:mcx-bg-red-100:hover {background-color: #FEE2E2;}
.hover\:mcx-bg-red-200:hover {background-color: #FECACA;}
.hover\:mcx-bg-red-300:hover {background-color: #FCA5A5;}
.hover\:mcx-bg-red-400:hover {background-color: #F87171;}
.hover\:mcx-bg-red-500:hover {background-color: #EF4444;}
.hover\:mcx-bg-red-600:hover {background-color: #DC2626;}
.hover\:mcx-bg-red-700:hover {background-color: #B91C1C;}
.hover\:mcx-bg-red-800:hover {background-color: #991B1B;}
.hover\:mcx-bg-red-900:hover {background-color: #7F1D1D;}

/* Password helper texts decor */
.password-help {
    margin-top: 0.5rem;            /* mt-2 */
    font-size: 0.75rem;            /* text-xs */
    color: #64748b;                /* slate-500 */
}
.password-help ul {
    margin-top: 0.25rem;
    padding-left: 1rem;            /* list-inside visual spacing */
    list-style-type: disc;
}
.password-help li {
    margin-bottom: 0.25rem;        /* space-y-1 equivalent */
    line-height: 1.25rem;
    font-size: 0.75rem;            /* text-xs */
    color: #64748b;                /* slate-500 */
}